Source of truth

The system begins with tokens and axes.

The foundation layer decides surfaces, text, border, accent behavior, spacing scale, type scale, radius, shadows, and layout widths. Everything else is built on top of those values.

Token groups

A small set of token families shapes the whole interface.

New component work should consume these tokens instead of hardcoding color or size values.

Surface and text

--wb-bg, --wb-surface, --wb-surface-2, --wb-text, --wb-muted

Accent and semantic color

--wb-accent* plus success, warning, danger, and info families.

Spacing and shape

--wb-s1 to --wb-s20, --wb-r-sm to --wb-r-full.

Type and layout

Base, heading, mono fonts plus layout widths, line heights, and stacking rhythm.

Theme axes

The root attributes are the public face of the theme system.

Each axis changes a narrow part of the visual language. That separation is what keeps the system predictable.

data-mode
data-accent
data-preset
data-radius
data-density
data-shadow
data-font
data-border

Rule

Foundation choices should travel through components unchanged.

If a component needs a new hardcoded value, it usually means the token layer is missing a concept.

No hardcoded colors or sizes in component CSS. Add or reuse a token first, then consume it from the component.