33 lines
1.8 KiB
Markdown
33 lines
1.8 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` | `#F0EDE9` | `#2A2720` | Elevated surfaces: tooltips, hover |
|
|
| `--color-ink-inverse` | `#FFFFFF` | `#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.
|
|
|
|
### Notes on the two added tokens
|
|
|
|
- **`--color-surface-raised`** (`#F0EDE9`): warm off-white, slightly darker than `--color-canvas` (`#FFFFFF`) to suggest elevation — mirrors the dark mode pattern of `#2A2720` sitting just above `#22201B`.
|
|
- **`--color-ink-inverse`** (`#FFFFFF`): white text on the dark teal accent (`#1F6B5A`). Inverse of dark mode where the lightened accent (`#2E9880`) is bright enough to carry dark text (`#17171A`).
|