1.8 KiB
1.8 KiB
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#2A2720sitting 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).