Colour
Semantic colours, each with its high-contrast form. Serre is dark only. Every swatch is the live CSS variable inside a themed region; every ratio is computed from the token values, the same numbers the contrast test holds to WCAG 2.2.
Values are OKLCH in tokens/color.tokens.json, which refers to the primitive ramps in palette.tokens.json. Each token compiles to one value, with a prefers-contrast: more override.
Surfaces
color.surface
The page background.
color.surfaceRaised
A card or panel set on the page.
color.surfaceOverlay
Menus, popovers, dialogs and toasts: whatever floats above the page.
color.layer1
The first nested region: a sidebar, a table header.
color.layer2
A region inside layer 1, or the hover state of one.
color.layer3
The deepest nesting, or the pressed state of layer 2.
color.backdrop
The scrim behind a modal dialog or sheet.
color.highlight
The inset top edge that lifts a raised item off the page.
Text
color.text
Body text and headings. Checked against surface: at least 4.5:1.
color.textMuted
Secondary text: captions, metadata, hints. Checked against surface: at least 4.5:1.
color.textSubtle
The quietest readable text: placeholders, overlines, column headers, timestamps. Still 4.5:1 on every surface. Checked against layer3: at least 4.5:1.
color.textDisabled
Text of a disabled control. Exempt from contrast minimums, as WCAG allows.
Action
color.action
The primary action's fill: an ink grey, so blue stays for links, focus and selection.
color.onAction
Text and icons on the primary action. Checked against action: at least 4.5:1.
color.actionBorder
The primary action's edge. Decorative: the fill already contrasts with the surface.
Borders and focus
color.border
Dividers and the edges of regions. Decorative: not held to a contrast minimum.
color.borderSubtle
Quieter dividers inside a region.
color.borderStrong
Emphasised edges and link underlines.
color.borderControl
The boundary of a form control: at least 3:1 against every surface. Checked against surface: at least 3:1.
color.focus
The focus ring. Checked against surface: at least 3:1.
Accent
color.accent
Links, focus and selection. The primary action is ink, not accent: see action. Checked against surface: at least 4.5:1.
color.onAccent
Text and icons on an accent fill. Checked against accent: at least 4.5:1.
color.accentSubtle
A tinted background for selection and emphasis; text on it uses accent. Checked against accent: at least 4.5:1.
Status
color.danger
Errors and destructive actions. Checked against surface: at least 4.5:1.
color.onDanger
Text and icons on a danger fill. Checked against danger: at least 4.5:1.
color.dangerSubtle
Background of an error message; text on it uses danger. Checked against danger: at least 4.5:1.
color.warning
Warnings: something needs attention but nothing failed. Checked against surface: at least 4.5:1.
color.onWarning
Text and icons on a warning fill. Checked against warning: at least 4.5:1.
color.warningSubtle
Background of a warning; text on it uses warning. Checked against warning: at least 4.5:1.
color.success
Success and completion. Checked against surface: at least 4.5:1.
color.onSuccess
Text and icons on a success fill. Checked against success: at least 4.5:1.
color.successSubtle
Background of a success message; text on it uses success. Checked against success: at least 4.5:1.
color.info
Neutral information. Checked against surface: at least 4.5:1.
color.onInfo
Text and icons on an info fill. Checked against info: at least 4.5:1.
color.infoSubtle
Background of an information message; text on it uses info. Checked against info: at least 4.5:1.