Foundations

Colors

Semantic color tokens define the visual roles — background, foreground, border — not raw values. Always use semantic tokens in component code. Raw primitives are for building the semantic layer only.

Callout orange is an accent, not a surface. Use it to mark a single highlighted passage or figure — never as a page or section fill, never on a control, and never in the same view as a warning state. --bg-callout carries the tint, --fg-callout the text, --border-callout the rule.

Use the ☽ toggle in the sidebar to preview dark mode token values.