Foundations
The tokens, voices, and scopes the rest of the system rests on. Everything above this layer — modules, components, controls — pulls from here. If a value isn't in here, it shouldn't be in production code.
Color
The palette — tints across sky, red, orange, yellow, green, purple, cyan, and stone. Use the --color-*-{tint} tokens, never hard-coded hex.
Type
Voice scale and type ratios — the locked voice classes (quiet-voice through loud-voice) and the modular scale. Voices name the role; the scale tunes how loud each role is. This is the canonical reference for "use voice classes only."
Semantic inlines
Inline semantic specimens — <strong>, <em>, <code>, <mark>, <kbd>, and the rest of the editor's Formats dropdown.
Emphasis
Emphasis scopes — data-emphasis values redefine --fill-*, --ink-*, --stroke-*, --accent within their scope. Components don't know which scope they're in; they just use the tokens.
Tokens
Token reference — semantic tokens (--paper, --fill, --ink, --stroke, --accent) and how they resolve through emphasis and tone scopes.
Glyphs
Universal Unicode glyphs — box-drawing, shading, arrows, marks. Render the same in browsers, terminals, and plain text. Use for chrome where "renders anywhere" is a virtue.
Highlights
Selection, target-text, find-in-page, and the .no-select utility — the CSS Highlight family plus the rule that keeps site chrome out of the user's clipboard.
Kitchen sink
One block with every voice, inline, surface, action, form control, and highlight state — repeated across every emphasis scope. The torture test for any new theme or token change.