04
Colour.
The palette is small on purpose. One brand accent with a deep and a soft variant, an ink canvas for dark sections, a short ladder of paper neutrals, and three semantic colours (Evidence, Warning, Danger). Anything outside the list is off-palette — say so explicitly, or people will assume otherwise.
The accent is reserved for moments of contrast, never as a background fill. On any given screen it should occupy a small fraction of the pixels. If a layout needs more accent to feel correct, the layout is wrong, not the rule.
Every token is authored in OKLCH— the perceptually-uniform colour space standardised in CSS Color Level 4. Equal lightness values look equally bright across hues; equal chroma values look equally saturated. That makes derived shades, dark-mode inversions, and contrast-driven accessibility maths correct by construction. The sRGB hex equivalent is shown alongside each token for designers reading from external references; the OKLCH value is what the codebase ships.
The values the product renders live in app/globals.css; the swatches below list the same tokens.
Agined Orange
--color-agined
OKLCH · authored
oklch(71.30% 0.182 32.20)
sRGB · equivalent
#FF7153
Primary brand colour. Surgical use only — accents, CTAs, key kickers. Never flood.
Agined Orange Deep
--color-agined-deep
OKLCH · authored
oklch(59.90% 0.152 32.20)
sRGB · equivalent
#DC5A3D
Hover and pressed states for primary CTAs, and small accent text on light surfaces.
Agined Orange Soft
--color-agined-soft
OKLCH · authored
oklch(94.17% 0.033 32.20)
sRGB · equivalent
#FFE1D8
Warm tint for highlight panels, inline callouts, and active chips.
OKLCH · authored
oklch(15.15% 0.0085 285.34)
sRGB · equivalent
#0B0B0F
Near-black canvas for dark sections. Body text in print.
OKLCH · authored
oklch(98.51% 0 285)
sRGB · equivalent
#FAFAFA
Neutral off-white. The default background of every light surface.
OKLCH · authored
oklch(95.21% 0 285)
sRGB · equivalent
#EFEFEF
Neutral panel. Used for inputs, table stripes, and quiet cards.
Paper Line
--color-paper-line
OKLCH · authored
oklch(91.89% 0 285)
sRGB · equivalent
#E4E4E4
Hairline rules and borders on light surfaces.
Paper Ink
--color-paper-ink
OKLCH · authored
oklch(19.41% 0.012 285.23)
sRGB · equivalent
#14141A
Primary text colour on paper backgrounds.
OKLCH · authored
oklch(52.03% 0.1218 155.96)
sRGB · equivalent
#0F7D4A
Deep green. Reserved for verified / on-record badges and intact-chain states.
OKLCH · authored
oklch(65.21% 0.1322 81.57)
sRGB · equivalent
#B8860B
Goldenrod. Reserved for degraded and attention-required states.
OKLCH · authored
oklch(46.04% 0.1733 24.50)
sRGB · equivalent
#A31621
Crimson. Reserved for breach, failure, and refused operations.
ContrastWCAG AA, minimum.
Body text against any approved background should clear WCAG AA (4.5:1); display text should clear AA Large (3:1). Never approach these thresholds for decoration alone.
PairingsPaper or Ink. Pick one.
Every surface is either a light document or a dark section. No half-tones, no warm-grey backgrounds, no gradients across the canvas.
Forbidden combinationsBrand accent on Evidence. Brand accent on Danger.
Semantic colours never overlap with the brand colour. Orange on green reads as a verified state that is also an alert; orange on crimson reads as two alarms at once.