Cairn

Color

One silver ramp is the material: the interface, the white page, the mid block and the deep ground all come off it. One warm signal interrupts, always as a fill with ink on top, a temperature break, not another grey. Hue carries meaning in exactly one place: the four message states.

  • 1 silver ramp
  • 3 grounds
  • 1 signal
  • 4 states

Furniture and grounds

One silver ramp is the material the interface is made of: chrome, type, and every ground, the white page, the mid block (300), the deep section (900). Cool at hue 237, held constant; chroma does the work, lowest in the light steps and at full value through the metal zone (300-500).

neutral

0
50
100
200
300
400
500
600
700
800
900

Signal

Main is the flare: rare, small, always a fill with ink on top, never text and never a link. It reads as a temperature break, the one warm thing on cool metal. Secondary is that same hue desaturated, the identity’s second family for everywhere the accent would be too loud; held in ref with no sys role yet.

main

50
100
200
300
400
500
600
700
800
900

secondary

50
100
200
300
400
500
600
700
800
900

Message states

The only place a hue carries meaning. Three steps each, never decorative.

green · success

50
600
800

blue · info

50
600
900

yellow · warning

50
700
900

red · error

50
600
700
800

Every fill ships with the foreground it is allowed to carry, and the ratio is measured here at build time rather than claimed. Read it as the usage policy: a pairing markedAA large only clears 3:1, so that fill may hold display type and graphical marks but never body copy. Worst pairing first.

Ag
on-accent on accent4.04:1AA large only
Ag
on-danger on danger4.83:1AA
Ag
on-error-container on error-container7.60:1AA
Ag
on-warning-container on warning-container8.38:1AA
Ag
on-success-container on success-container8.70:1AA
Ag
on-info-container on info-container9.40:1AA
Ag
on-ground-mid on ground-mid10.76:1AA
Ag
on-primary-container on primary-container14.74:1AA
Ag
on-ground-deep on ground-deep15.70:1AA
Ag
on-inverse-surface on inverse-surface15.70:1AA
Ag
on-primary on primary16.59:1AA
Ag
on-ground on ground16.59:1AA
Ag
on-surface on surface16.59:1AA

What components consume. A component reads these, never a `ref.*` primitive and never a hex, so re-theming is a swap of this layer alone.

Ground and surface

sys.color.ground

The page itself.

neutral.0
#ffffff
sys.color.on-ground16.59:1 · AA

Ink on the ground, 16.59:1.

neutral.900
#1b1f22
sys.color.ground-mid

The mid block: a large flat area, a media placeholder, a filled band, a full-width panel.

neutral.300
#cbd1d5
sys.color.on-ground-mid10.76:1 · AA

Ink on the mid ground, 10.76:1.

neutral.900
#1b1f22
sys.color.ground-deep

Full-bleed dark section ground, the dark counterpart of the light page.

neutral.900
#1b1f22
sys.color.on-ground-deep15.70:1 · AA

Paper 50 on the deep ground, 15.70:1.

neutral.50
#f6f9fc
sys.color.surface

What sits ON the ground: cards, panels, the content column.

white
#ffffff
sys.color.surface-subtle
neutral.50
#f6f9fc
sys.color.surface-muted
neutral.100
#eef2f5
sys.color.on-surface16.59:1 · AA
neutral.900
#1b1f22
sys.color.on-surface-variant
neutral.600
#4e5356

Action

sys.color.primary
neutral.900
#1b1f22
sys.color.primary-hover
neutral.800
#262a2d
sys.color.on-primary16.59:1 · AA
white
#ffffff
sys.color.primary-container
neutral.100
#eef2f5
sys.color.on-primary-container14.74:1 · AA
neutral.900
#1b1f22
sys.color.link
neutral.900
#1b1f22
sys.color.focus
neutral.900
#1b1f22

Signal

sys.color.accent
main.600
#e93c10
sys.color.accent-strong
main.700
#bd2900
sys.color.on-accent4.04:1 · AA large only
neutral.900
#1b1f22
sys.color.accent-subtle
main.100
#fbcdc1
sys.color.accent-halo

Faintest accent tint.

main.50
#fdede9
sys.color.accent-edge
main.800
#911f02

Line

sys.color.outline
neutral.200
#e0e5e8
sys.color.outline-strong
neutral.300
#cbd1d5

Inverse

sys.color.inverse-surface
neutral.900
#1b1f22
sys.color.on-inverse-surface15.70:1 · AA
neutral.50
#f6f9fc

Status colors, the one place hue carries meaning. Container background + accessible text, and always paired with an icon or a label so meaning never rests on colour alone.

Success
Changes saved successfully.
Info
A new version is available.
Warning
This action cannot be undone.
Error
Something went wrong. Try again.