1.9 KiB
1.9 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 |
⚠️ 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#2E9880accent). Light equivalent would likely be#FFFFFF(white text on the dark#1F6B5Aaccent) — same as--color-accent-on.