Foundations

Colour

One neutral ramp carries the whole interface. Every text grey is measured against paper, and each dark value mirrors its light ratio step for step.

Text

Five greys, each with one job. Left half of a chip is light theme, right half is dark. Click any chip to copy its variable.

ink--ink#161616 / #ededed18.10:1 · dark 16.00:1

ink-2--ink-2#4a4a4a / #b3b3b38.86:1 · dark 8.93:1

ink-body--ink-body#5c5c5c / #9b9b9b6.69:1 · dark 6.74:1

ink-3--ink-3#6e6e6e / #8686865.10:1 · dark 5.15:1

mut--mut#767676 / #7e7e7e4.54:1 · dark 4.61:1

The ladder is the point. 18.1 · 8.86 · 6.69 · 5.10 · 4.54 in light, 16.0 · 8.93 · 6.74 · 5.15 · 4.61 in dark. --mut is the floor - it was #8b8b8b (3.4:1) and failed AA for 18px prose, so it was darkened rather than restricted to large text.

Fill

ink-hover--ink-hover#212121 / #ffffff

--ink-hover is one measured grade above --ink: L* 7.2 to 12.7, a +5.5 step chosen off a ladder of five. Filled buttons used to hover to --ink-3 (+39.2), which made them go pale exactly when touched.

Surfaces

paper--paper#ffffff / #121212

surface--surface#fafafa / #181818

surface-2--surface-2#f4f4f4 / #1f1f1f

surface-3--surface-3#efefef / #262626

Lines

line--line#ececec / #262626

line-2--line-2#e7e7e7 / #2e2e2e

tint--tint#939393 / #5e5e5e

--tint is never used solid. Translucent marks are struck from it with color-mix() so they stay a tint over any surface: 16% for the dot grid and annotation chip, 55% for link underlines.

Inverse

ink-inv--ink-inv#1b1b1b / #0a0a0a

mut-inv--mut-inv#8e8e8e

Status

Spec. Colour that carries meaning: success, warning, error. Hues are fixed in OKLCH (150, 70, 27); each foreground clears 4.5:1 on paper and on its own tint.

ok--ok#1d7d3e / #76cf8a5.18:1 · dark 9.87:1

ok-bg--ok-bg#eef8ef / #15291a

warn--warn#8d5d1c / #eca8515.65:1 · dark 9.18:1

warn-bg--warn-bg#fdf3e6 / #30200d

danger--danger#c9302d / #f58c815.32:1 · dark 7.98:1

danger-bg--danger-bg#fff0ee / #391a17

Published Draft Failed

Show code

<span class="badge badge-ok"><span class="dot"></span>Published</span>
<span class="badge badge-warn"><span class="dot"></span>Draft</span>
<span class="badge badge-danger"><span class="dot"></span>Failed</span>

The four places colour lives

sel--sel#bbfff0 / #0c473e

g-a--g-aoklch(0.62 0.171 150)

g-b--g-boklch(0.62 0.301 318)

g-c--g-coklch(0.62 0.106 205)

Where	What
Aurora hero	GLSL constants `CA/CB/CC` in OKLCH - not CSS, so palette sweeps miss them.
Case illustrations	The pointer gradient (`ga/gb` uniforms). Resting colour is neutral; colour peaks only under the cursor.
Selection	`--sel`, sampled from 535,647 rendered aurora pixels (mean `#b0fded`) and pushed to the lightest in-gamut point on hue 180: 16.1:1 behind ink.
Glitch	`--g-a/-b/-c`, the shader's hues at L .62 - the most chroma sRGB will hold, so the magenta finally reaches the screen.

Auditing for stray colour

Scan the browser-serialised CSSOM, not the source: hsl(255 40% 96.5%) once survived a hex/rgb grep and only surfaced as rgb(244,243,250) after the browser normalised it.

All colour tokens

Token	Value	Role	Status
`--ink`	`#161616` `#ededed` dark	Primary text, headings, filled controls.	Shipped
`--ink-2`	`#4a4a4a` `#b3b3b3` dark	Emphasis, hover text, Redaction accents.	Shipped
`--ink-body`	`#5c5c5c` `#9b9b9b` dark	Long-form body copy on case pages.	Shipped
`--ink-3`	`#6e6e6e` `#868686` dark	Mono labels, chrome, icons at rest.	Shipped
`--mut`	`#767676` `#7e7e7e` dark	Secondary prose. The lightest grey allowed for text (AA floor).	Shipped
`--ink-hover`	`#212121` `#ffffff` dark	Hover fill for anything filled with --ink. One measured grade, L* 7.2 to 12.7: hover strengthens, never goes pale.	Shipped
`--paper`	`#ffffff` `#121212` dark	The page. Cards and floating UI sit on it at the same value.	Shipped
`--surface`	`#fafafa` `#181818` dark	Figure background, docs shell.	Shipped
`--surface-2`	`#f4f4f4` `#1f1f1f` dark	Wireframe bars, segmented inset, tool stage.	Shipped
`--surface-3`	`#efefef` `#262626` dark	Progress rails, skeletons.	Shipped
`--line`	`#ececec` `#262626` dark	Every hairline: dividers, card borders, nav rule.	Shipped
`--line-2`	`#e7e7e7` `#2e2e2e` dark	Borders on interactive or image shells (ghost button, fx-wrap).	Shipped
`--tint`	`#939393` `#5e5e5e` dark	Never used solid. The grey that translucent marks are struck from with color-mix: dot grid 16%, link underline 55%.	Shipped
`--ink-inv`	`#1b1b1b` `#0a0a0a` dark	The one inverted surface: figure.dark, for specimens that are themselves dark.	Shipped
`--mut-inv`	`#8e8e8e`	Caption text on --ink-inv (5.4:1).	Shipped
`--ok`	`#1d7d3e` `#76cf8a` dark	Success text and icons. oklch(.52 .13 150).	Spec
`--ok-bg`	`#eef8ef` `#15291a` dark	Success tint behind --ok text.	Spec
`--warn`	`#8d5d1c` `#eca851` dark	Warning text and icons. oklch(.52 .10 70).	Spec
`--warn-bg`	`#fdf3e6` `#30200d` dark	Warning tint behind --warn text.	Spec
`--danger`	`#c9302d` `#f58c81` dark	Errors and destructive actions. oklch(.55 .19 27).	Spec
`--danger-bg`	`#fff0ee` `#391a17` dark	Error tint behind --danger text.	Spec
`--sel`	`#bbfff0` `#0c473e` dark	Text selection. Sampled from the rendered aurora (mean #b0fded), pushed to the lightest in-gamut point on hue 180.	Shipped
`--g-a`	`oklch(0.62 0.171 150)`	Glitch green - the aurora's CA hue at max sRGB chroma.	Shipped
`--g-b`	`oklch(0.62 0.301 318)`	Glitch magenta - the aurora's CC hue.	Shipped
`--g-c`	`oklch(0.62 0.106 205)`	Glitch cyan - the aurora's CB hue.	Shipped