Colors
Slate neutrals from one hue per theme, dove for long reading, and one beacon kept for things that are literally lights.
Surfaces
Every neutral is one slate hue.
By day the base is mist, cards are paper and controls are white. By night each step is lighter than the last. Adjacent steps sit at least 0.03 apart in OKLCH lightness at night and 0.02 by day, so the ladder reads at a glance. Only floating surfaces cast shadows. See Elevation.
One base for the page and its wells; the sidebar is the bezel, a step below the base it frames. Cards, controls and floating surfaces get successively lighter; paper uses a shadow for the last step.
The beacon
One light, an orange from the sunset family, deeper by day so it holds on paper. It marks only things that are literally lights, so when something is lit, something happened.
Never the beacon
- Links. They are ink (
--text-linkis text-1) with a quiet underline, like this one. - File paths, which stay in the neutral ranks.
- Keyboard focus. The ring is neutral ink.
- Controls and surfaces. The beacon never fills a button or washes a panel; the primary button is ink.
- The running glyph. The pine sweep is neutral; the light belongs to the product's live signal.
- Warnings, which are a signal yellow, so a warning never reads as new.
Contrast
Every ink on every surface, measured live from the shipped CSS with WCAG 2.
--text-4 has no minimum. It is for disabled labels and decoration only, never for anything someone reads, and it sits near 3:1 on every surface. Placeholders, key hints and meta are --text-3, which clears 5:1.
Text needs 4.5:1; the beacon and the focus ring are non-text and need 3:1. A pair below its minimum turns red.
Ink ladders
Each theme has one --ink, and every neutral is that ink at an alpha, so a ladder reads the same on every surface.
Stroke
Hairlines: 7% frames a card or a window bar, 10% an outline tag, 15% an outline button. Structural dividers use the umbra line, --stroke-edge.
Ranks per theme
Text and icon alphas are per-theme rank tokens, so day is calibrated for AA on its own rather than copied from night.
| Rank | Night | Day |
|---|---|---|
Night uses 64, 50 and 34% of white: text-3 scores 5.0:1 or more on every surface and text-4 about 3:1. Copied to day, 50% of the night ink would give text-3 only 3.9:1 on mist, so day uses 72, 60 and 44%: text-3 4.6:1 or more, text-4 near 3:1.
Pick by rank, never by greyness: text-1 for labels, titles and headings, text-2 secondary, text-3 for meta, hints and placeholders, text-4 for disabled states. Long reading uses --text-prose.
Hues and intents
Hues fill dots, icons and washes. Their text forms clear 4.5:1 on every surface; the ratio here is measured on the page.
| Hue | Text | Use | Contrast |
|---|---|---|---|
| The beacon, the one light. Its text form is for the accent Badge and Chip only. | |||
| Plan: breeze, a quiet distance blue. | |||
| Success and Ask. | |||
| Warning: signal yellow, kept well apart from the beacon's orange. | |||
| Danger, errors and Debug. | |||
| Information: the info toast. |
Washes, modes and status
Intent and mode washes are Badge and Chip tones; status is a 6px dot in a row's leading slot, or the pine sweep while something runs.
Charts
Series colour follows the entity, never its rank: each provider keeps one slot on every chart, so hiding a series or changing the range never repaints the rest.
| Slot | Hue |
|---|---|
| Blue | |
| Green | |
| Violet | |
| Amber | |
| Rose | |
| Leaf | |
| Every series past six, in the icon ink |
The six slots pass the colour-vision checks in this order on both themes; a seventh series is Other, never a new hue. providerChartColor and chartColor hand them out. Values and labels stay in the text ranks; the mark beside them carries the colour.
Diff and syntax
Code sits in a window on --bg-card.
− return `${m}m ago`;+ return `${m}m`;export function relTime(at: number) { if (elapsed < 30_000) return "Just now"; // under 30s}
| Syntax | Sample |
|---|---|
export function | |
relTime | |
at | |
number | |
"Just now" | |
30_000 | |
// under 30s | |
( ) { } ; | |
docs/motion.md | |
elapsed |
| Diff | Sample |
|---|---|
| + return | |
| + return | |
| + return | |
| − return | |
| − return | |
| − return |
The syntax tokens are dove on night (code fg is the prose ink): periwinkle keywords, sage strings, lamp-cream calls, clay numbers and teal constants. The lowest score on any surface is 4.5 or more, for comments by day.
Selection and focus
Selection is lit by the lamp: a 36% wash of the beacon under the text's own ink (--selection, --selection-ink).
With increased contrast the ring goes to full strength, text-3 takes text-2's alpha, text-4 rises to 60%, frames and hairlines step up, glass chrome turns opaque, and the live signal's bloom and glow go out.
Focus is neutral ink: 40% at night (3.8:1 on the page) and 50% by day (3.7:1).