System

Palette. Six ramps and a brand color the registry has no name for.

Core Tokens

The anchors, one per hue, plus the two ends of the page. Everything else the stylesheet declares points at one of these or at a step of the ramps below: 44 of its 45 color tokens are the registry's, name and value, so that list is a lookup table and the registry's to document. Only --brand-1is this site's own.

Surface

The canvas, the text on it, and the neutral ramp both are cut from.

Background--background

oklch(0.9725 0.0018 17.53)

darkoklch(0.1168 0.0026 17.53)

Foreground--foreground

oklch(0.1651 0.0025 17.53)

darkoklch(0.9725 0.0018 17.53)

Brand

Accent is the interactive color: links, focus, selected states, the default Button. Brand 1 is identity rather than interaction, so it never paints a control.

Accent--accent

oklch(0.5499 0.2489 262.31)

Brand 1--brand-1

oklch(0.7413 0.1712 306.54)

Semantic

Signals, not decoration. Each one carries a full ramp so a state has quiet and loud registers rather than one shout.

Destructive--destructive

oklch(0.6848 0.2087 37.85)

Warning--warning

oklch(0.8181 0.1663 87.4)

darkoklch(0.8462 0.1377 87.4)

Success--success

oklch(0.6446 0.1557 154.2)

11-Step Ramps

The same three roles, opened up. All six ramps are declared by mdv8: the kit ships its own as literals on the --color-* aliases, and this site redirects those aliases at its scales. So a ramp is the thing to retune when a color is wrong everywhere rather than in one place.

Surface

Neutral--neutral-*
50
100
200
300
400
500
600
700
800
900
950

Brand

Accent--accent-*
50
100
200
300
400
500
600
700
800
900
950
Brand 1--brand-1-*
50
100
200
300
400
500
600
700
800
900
950

Semantic

Destructive--destructive-*
50
100
200
300
400
500
600
700
800
900
950
Warning--warning-*
50
100
200
300
400
500
600
700
800
900
950
Success--success-*
50
100
200
300
400
500
600
700
800
900
950