Color

One brand, one restrained blue-violet accent, neutral cool-grey surfaces, and success, warning, critical and info ramps with identical lightness steps (DECISIONS.md #15).

Colour has three tiers. Components only ever reference the semantic tier: surface.* for backgrounds, fg.* for text, line.* for borders, action.* for buttons, status.* for badges and messages, field.* for inputs, focus.ring and data.* for charts. Light and dark are modes of that layer, switched by data-theme on <html> or any region; nothing in component code branches on theme.

In practice

Rules

• Only token utilities: bg-surface-layer-1, text-fg-muted, border-line-default. Never hex, rgb, oklch or Tailwind's default palette.
• Depth comes from the surface ladder: canvas, then layer-1, layer-2, layer-3. See Surfaces.
• fg.primary and fg.numeric meet 7:1 on every surface; fg.secondary and fg.muted meet 4.5:1. Non-text lines and the focus ring meet 3:1.
• Status colour reinforces a word; it never replaces it. "Overdue" in critical, not a red dot alone.
• Primitives (color.neutral.600) are for the token files only. Rebranding is a change to the primitive tier.

In this section

• Palette: the primitive ramps.
• Semantic: every semantic token in both themes with contrast.
• Surfaces: the layer ladder and which layer goes where.
• Accessibility: the contrast matrix.