Color
Every color is a token. Pages and components read the custom property, never the value, so changing one token recolors the whole system.
Palette
The table is written from tokens.json at build time.
| Token | Custom property | Value | Use |
|---|---|---|---|
color.ink | --color-ink | #17202a | Primary text and high-emphasis marks. |
color.muted | --color-muted | #5d6876 | Secondary text on canvas, surface, and accent-soft. |
color.canvas | --color-canvas | #f5f7fa | Page background. |
color.surface | --color-surface | #ffffff | Raised panels, cards, and inputs; text on accent. |
color.line | --color-line | #dce1e8 | Rules and borders. |
color.accent | --color-accent | #2457d6 | Primary actions, links, and focus. |
color.accent-soft | --color-accent-soft | #e8efff | Hover and selected backgrounds. |
Grounds
Text color is chosen with the ground behind it. Each pairing below is the only one the system uses on that ground.
CanvasSecondary text
SurfaceSecondary text
Accent softSecondary text
AccentNo secondary text
| Ground | Text | Secondary text | Use |
|---|---|---|---|
| Canvas | --color-ink | --color-muted | Page background |
| Surface | --color-ink | --color-muted | Panels, cards, and inputs |
| Accent soft | --color-ink | --color-muted | Hover and selected states |
| Accent | --color-surface | None | The primary action |