Tokens

Foundations

The token pipeline: primitives → semantics → Tailwind theme. Every utility below resolves through @/design-system/styles.css.

Typography

text-style-* utilities from typography semantics.

The quick brown fox

display-lg

The quick brown fox

display-md

The quick brown fox

display-sm

The quick brown fox

header-lg

The quick brown fox

header-md

The quick brown fox

header-sm

The quick brown fox

body-lg

The quick brown fox

body-md

The quick brown fox

body-sm

The quick brown fox

caption

Surfaces

Semantic bg-surface-* utilities.

surface-primary

surface-secondary

surface-tertiary

surface-brand

surface-success

surface-warning

surface-danger

surface-info

Radius

rounded-xs

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-button

rounded-full

Shadow

shadow-xs

shadow-sm

shadow-md

shadow-lg

Heading + Text components

Prefer <Heading> and <Text> over raw utilities for consistency.

Heading display-md

Heading header-lg

Heading header-sm

Text body-lg — long-form paragraph reading size.

Text body-md — default UI text.

Text body-sm subtle — captions and secondary metadata.