Tokens

Rule

DESIGN.md front matter is the source of every visual value. This catalogue names every normative leaf token. It deliberately does not repeat resolved colour or dimension values. Read the value at the source, then consume its semantic CSS variable or component recipe.

__tests__/design-docs-drift.test.ts compares the catalogue below with DESIGN.md in both directions: a normative token missing from this page fails, and a name published here that DESIGN.md no longer declares fails. A literal hexadecimal colour anywhere in this section fails too. The suite runs in the repository's bun run test gate.

Token contract

• colors.* names semantic surfaces, content, actions, status, charts, and both themes.
• typography.* names complete type recipes and their individual fields.
• rounded.* names the fitted-metal shape scale.
• spacing.* names rhythm, control, overlay, navigation, and measure values.
• renderers.* registers portable Open Graph projections.
• components.* composes the primitives from the other token groups.

Colours

• colors.chart-1, colors.chart-2, colors.chart-3, colors.chart-4, colors.chart-5, colors.dark-chart-1
• colors.dark-chart-2, colors.dark-chart-3, colors.dark-chart-4, colors.dark-chart-5, colors.dark-error, colors.dark-error-container
• colors.dark-inverse-on-surface, colors.dark-inverse-surface, colors.dark-on-error, colors.dark-on-error-container, colors.dark-on-primary, colors.dark-on-primary-container
• colors.dark-on-secondary-container, colors.dark-on-success, colors.dark-on-success-container, colors.dark-on-surface, colors.dark-on-surface-variant, colors.dark-on-tertiary
• colors.dark-on-tertiary-container, colors.dark-outline, colors.dark-outline-strong, colors.dark-outline-variant, colors.dark-primary, colors.dark-primary-active
• colors.dark-primary-container, colors.dark-primary-hover, colors.dark-secondary-container, colors.dark-success, colors.dark-success-container, colors.dark-surface
• colors.dark-surface-container, colors.dark-surface-container-high, colors.dark-surface-container-highest, colors.dark-surface-container-low, colors.dark-surface-container-lowest, colors.dark-tertiary
• colors.dark-tertiary-container, colors.error, colors.error-container, colors.inverse-on-surface, colors.inverse-surface, colors.on-error
• colors.on-error-container, colors.on-primary, colors.on-primary-container, colors.on-secondary-container, colors.on-success, colors.on-success-container
• colors.on-surface, colors.on-surface-variant, colors.on-tertiary, colors.on-tertiary-container, colors.on-warning, colors.on-warning-container
• colors.outline, colors.outline-strong, colors.outline-variant, colors.primary, colors.primary-active, colors.primary-container
• colors.primary-hover, colors.scrim, colors.secondary-container, colors.success, colors.success-container, colors.surface
• colors.surface-container, colors.surface-container-high, colors.surface-container-highest, colors.surface-container-low, colors.surface-container-lowest, colors.tertiary
• colors.tertiary-container, colors.warning, colors.warning-container

Typography

• typography.body-lg.fontFamily, typography.body-lg.fontSize, typography.body-lg.fontWeight, typography.body-lg.lineHeight, typography.body-md.fontFamily, typography.body-md.fontSize
• typography.body-md.fontWeight, typography.body-md.lineHeight, typography.code.fontFamily, typography.code.fontSize, typography.code.fontWeight, typography.code.lineHeight
• typography.data-md.fontFamily, typography.data-md.fontFeature, typography.data-md.fontSize, typography.data-md.fontWeight, typography.data-md.lineHeight, typography.display.fontFamily
• typography.display.fontSize, typography.display.fontWeight, typography.display.letterSpacing, typography.display.lineHeight, typography.headline-lg.fontFamily, typography.headline-lg.fontSize
• typography.headline-lg.fontWeight, typography.headline-lg.letterSpacing, typography.headline-lg.lineHeight, typography.headline-md.fontFamily, typography.headline-md.fontSize, typography.headline-md.fontWeight
• typography.headline-md.letterSpacing, typography.headline-md.lineHeight, typography.headline-sm.fontFamily, typography.headline-sm.fontSize, typography.headline-sm.fontWeight, typography.headline-sm.letterSpacing
• typography.headline-sm.lineHeight, typography.label-md.fontFamily, typography.label-md.fontSize, typography.label-md.fontWeight, typography.label-md.letterSpacing, typography.label-md.lineHeight
• typography.label-sm.fontFamily, typography.label-sm.fontSize, typography.label-sm.fontWeight, typography.label-sm.letterSpacing, typography.label-sm.lineHeight, typography.overline.fontFamily
• typography.overline.fontSize, typography.overline.fontWeight, typography.overline.letterSpacing, typography.overline.lineHeight, typography.title-lg.fontFamily, typography.title-lg.fontSize
• typography.title-lg.fontWeight, typography.title-lg.letterSpacing, typography.title-lg.lineHeight, typography.title-md.fontFamily, typography.title-md.fontSize, typography.title-md.fontWeight
• typography.title-md.letterSpacing, typography.title-md.lineHeight, typography.ui-lg.fontFamily, typography.ui-lg.fontSize, typography.ui-lg.fontWeight, typography.ui-lg.lineHeight
• typography.ui-md.fontFamily, typography.ui-md.fontSize, typography.ui-md.fontWeight, typography.ui-md.lineHeight, typography.ui-sm.fontFamily, typography.ui-sm.fontSize
• typography.ui-sm.fontWeight, typography.ui-sm.lineHeight

Shape

• rounded.2xl, rounded.DEFAULT, rounded.full, rounded.lg, rounded.md, rounded.none
• rounded.sm, rounded.xl, rounded.xs

Spacing

• spacing.2xl, spacing.2xs, spacing.3xl, spacing.3xs, spacing.4xl, spacing.base
• spacing.command-list, spacing.control-lg, spacing.control-md, spacing.control-sm, spacing.dialog-max, spacing.display-max
• spacing.form-max, spacing.gutter, spacing.heading-max, spacing.hover-card, spacing.lg, spacing.margin
• spacing.md, spacing.menu-min, spacing.menubar-min, spacing.page-max, spacing.popover, spacing.reading-max
• spacing.section, spacing.sidebar, spacing.sidebar-icon, spacing.sidebar-mobile, spacing.slider-length, spacing.sm
• spacing.xl, spacing.xs

Portable renderers

• renderers.open-graph-canvas.backgroundColor, renderers.open-graph-canvas.fontFamily, renderers.open-graph-content.left, renderers.open-graph-content.paddingBottom, renderers.open-graph-content.paddingRight, renderers.open-graph-content.paddingTop
• renderers.open-graph-content.width, renderers.open-graph-description.color, renderers.open-graph-description.fontSize, renderers.open-graph-description.fontWeight, renderers.open-graph-description.lineHeight, renderers.open-graph-title.color
• renderers.open-graph-title.fontSize, renderers.open-graph-title.fontWeight, renderers.open-graph-title.letterSpacing, renderers.open-graph-title.lineHeight, renderers.open-graph-title.marginBottom, renderers.open-graph-wordmark.color
• renderers.open-graph-wordmark.fontSize, renderers.open-graph-wordmark.fontWeight, renderers.open-graph-wordmark.left, renderers.open-graph-wordmark.letterSpacing, renderers.open-graph-wordmark.top

Components

• components.badge-active.backgroundColor, components.badge-active.padding, components.badge-active.rounded, components.badge-active.textColor, components.badge-active.typography, components.badge-attention.backgroundColor
• components.badge-attention.padding, components.badge-attention.rounded, components.badge-attention.textColor, components.badge-attention.typography, components.badge-error.backgroundColor, components.badge-error.padding
• components.badge-error.rounded, components.badge-error.textColor, components.badge-error.typography, components.badge-neutral.backgroundColor, components.badge-neutral.padding, components.badge-neutral.rounded
• components.badge-neutral.textColor, components.badge-neutral.typography, components.button-destructive.backgroundColor, components.button-destructive.padding, components.button-destructive.rounded, components.button-destructive.textColor
• components.button-destructive.typography, components.button-ghost-hover.backgroundColor, components.button-ghost-hover.textColor, components.button-ghost.backgroundColor, components.button-ghost.padding, components.button-ghost.rounded
• components.button-ghost.textColor, components.button-ghost.typography, components.button-primary-active.backgroundColor, components.button-primary-hover.backgroundColor, components.button-primary.backgroundColor, components.button-primary.height
• components.button-primary.padding, components.button-primary.rounded, components.button-primary.textColor, components.button-primary.typography, components.button-secondary-hover.backgroundColor, components.button-secondary.backgroundColor
• components.button-secondary.height, components.button-secondary.padding, components.button-secondary.rounded, components.button-secondary.textColor, components.button-secondary.typography, components.card-surface.backgroundColor
• components.card-surface.padding, components.card-surface.rounded, components.card-surface.textColor, components.chip-filter-selected.backgroundColor, components.chip-filter-selected.textColor, components.chip-filter.backgroundColor
• components.chip-filter.padding, components.chip-filter.rounded, components.chip-filter.textColor, components.chip-filter.typography, components.code-block.backgroundColor, components.code-block.padding
• components.code-block.rounded, components.code-block.textColor, components.code-block.typography, components.dialog-surface.backgroundColor, components.dialog-surface.padding, components.dialog-surface.rounded
• components.dialog-surface.textColor, components.icon.strokeWidth, components.input-field-error.textColor, components.input-field-focus.backgroundColor, components.input-field-focus.textColor, components.input-field.backgroundColor
• components.input-field.height, components.input-field.padding, components.input-field.rounded, components.input-field.textColor, components.input-field.typography, components.link-inline.backgroundColor
• components.link-inline.textColor, components.link-inline.typography, components.panel-inset.backgroundColor, components.panel-inset.padding, components.panel-inset.rounded, components.panel-inset.textColor
• components.popover-surface.backgroundColor, components.popover-surface.padding, components.popover-surface.rounded, components.popover-surface.textColor, components.sidebar-item-active.backgroundColor, components.sidebar-item-active.textColor
• components.sidebar-item.backgroundColor, components.sidebar-item.height, components.sidebar-item.padding, components.sidebar-item.rounded, components.sidebar-item.textColor, components.sidebar-item.typography
• components.spinner.duration, components.tab-item-active.textColor, components.tab-item.backgroundColor, components.tab-item.padding, components.tab-item.rounded, components.tab-item.textColor
• components.tab-item.typography, components.table-header-cell.backgroundColor, components.table-header-cell.padding, components.table-header-cell.textColor, components.table-header-cell.typography, components.table-row-hover.backgroundColor
• components.table-row.backgroundColor, components.table-row.padding, components.table-row.textColor, components.table-row.typography, components.tooltip.backgroundColor, components.tooltip.padding
• components.tooltip.rounded, components.tooltip.textColor, components.tooltip.typography

Correct example

A component asks for the semantic purpose first, then consumes the matching recipe or token. A primary action uses components.button-primary; a machine identifier uses typography.data-md; a decorative rule between grouped rows uses colors.outline-variant; the edge of a control that has no fill uses colors.outline-strong.

Rejected example

A route copies a resolved value from DESIGN.md, invents a local custom property, or uses a nearby default utility because it looks similar. The route has created a second token origin and cannot follow future theme changes safely.

Reasoning

Read the visual-language rationale and the single-source decision.