35 lines
1.9 KiB
Markdown
35 lines
1.9 KiB
Markdown
# Design System — Light Mode Color Palette
|
|
|
|
Light-mode counterpart to `design-system.md`. Only color tokens differ between themes — typography, spacing, radius, shadows, and layout are identical.
|
|
|
|
---
|
|
|
|
## Color palette
|
|
|
|
| Token | Light | Dark | Usage |
|
|
|---|---|---|---|
|
|
| `--color-paper` | `#F7F5F2` | `#1A1814` | Page background |
|
|
| `--color-canvas` | `#FFFFFF` | `#22201B` | Card surfaces, form backgrounds |
|
|
| `--color-ink` | `#17171A` | `#EDE8DF` | Primary text |
|
|
| `--color-ink-2` | `#4A4850` | `#B8B0A4` | Body text — muted |
|
|
| `--color-ink-muted` | `#9896A0` | `#90887E` | Labels, timestamps, captions |
|
|
| `--color-border` | `#E8E6E3` | `#2E2B25` | Standard dividers |
|
|
| `--color-border-soft` | `#F0EDEA` | `#252219` | Subtle dividers |
|
|
| `--color-accent` | `#1F6B5A` | `#2E9880` | Teal — brand color, links, CTAs |
|
|
| `--color-accent-hover` | `#185647` | `#287A68` | Hover/pressed teal |
|
|
| `--color-accent-light` | `#EBF5F2` | `#1A2E29` | Pale teal tint backgrounds |
|
|
| `--color-accent-on` | `#FFFFFF` | `#FFFFFF` | Text on accent surfaces |
|
|
| `--color-surface-raised` | ⚠️ not specified | `#2A2720` | Elevated surfaces: tooltips, hover |
|
|
| `--color-ink-inverse` | ⚠️ not specified | `#17171A` | Text on accent-coloured buttons |
|
|
|
|
### Notes on accent values
|
|
|
|
The dark accent is `#2E9880` — a lightened version of the original `#1F6B5A` to maintain contrast against near-black backgrounds.
|
|
|
|
### Gaps to resolve
|
|
|
|
Two tokens were added during dark-theme implementation without light counterparts:
|
|
|
|
- **`--color-surface-raised`**: dark is `#2A2720` (slightly above canvas). Light equivalent would be a warm off-white slightly darker than `--color-canvas` (`#FFFFFF`).
|
|
- **`--color-ink-inverse`**: dark is `#17171A` (dark text on the bright `#2E9880` accent). Light equivalent would likely be `#FFFFFF` (white text on the dark `#1F6B5A` accent) — same as `--color-accent-on`.
|