Tokens

The theme is generated from scripts/theme/tokens.mjs (Design.md v1.72). Class names are token names: bg-surface-primary-filled, text-content-neutral-muted, border-stroke-neutral-subtle. Swatches paint with the live variable, so they follow Light/Dark and the brand toggle.

Neutral (§1.4)

One surface for the page and everything on it; what floats takes overlay.

content-neutral-primary#121317 · Dark #EEEEEF
content-neutral-secondary#4D4E51 · Dark #C6C6C7
content-neutral-muted#6C6D6F · Dark #A5A5A7
content-neutral-disabled#A5A5A7 · Dark #6C6D6F
content-neutral-on-filled#FFFFFF · Dark #121317
content-neutral-breadcrumb#5B6272 · Dark #A5A5A7
surface-neutral-default#FFFFFF · Dark #18191D
surface-neutral-overlay#FFFFFF · Dark #26272C
surface-neutral-subtle#F6F6F6 · Dark #1F2025
surface-neutral-strong#C6C6C7 · Dark #4D4E51
surface-neutral-filled#121317 · Dark #EEEEEF
surface-neutral-control#8D8E90 · Dark #7F8082
stroke-neutral-subtle#E3E3E3 · Dark #36373C
stroke-neutral-strong#C6C6C7 · Dark #4D4E51
stroke-neutral-control#8D8E90 · Dark #7F8082
stroke-neutral-control-hover#4D4E51 · Dark #A5A5A7
stroke-neutral-ring#FFFFFF · Dark #18191D
overlay-scrimrgb(18 19 23 / 40%) · Dark rgb(0 0 0 / 60%)

Colour families (§1.5)

Each family carries the same tokens. Filled keeps its values in Dark; lighter, words and stroke move to darker or lighter shades.

filledfilled-hoverfilled-pressedlighterlighter-strongdefault (words)stroketags
primaryAa
LighterFilled
secondaryAa
LighterFilled
successAa
LighterFilled
warningAa
LighterFilled
dangerAa
LighterFilled
infoAa
LighterFilled
accent-1Aa
LighterFilled
accent-2Aa
LighterFilled
accent-3Aa
LighterFilled
accent-4Aa
LighterFilled
accent-5Aa
LighterFilled
accent-6Aa
LighterFilled
accent-7Aa
LighterFilled
accent-8Aa
LighterFilled
accent-9Aa
LighterFilled