Design tokens

The design system exposes a layered set of design tokens — primitives, then semantic tokens, then action tokens — so a whole product can be re-themed from one place.

Why tokens?

• Consistency across every screen and app
• Automatic light and dark theming
• One source of truth for color, type and spacing

Build with semantic tokens, never raw hex values.

Use utilities like bg-background and text-foreground, and read more in the foundations.

<div class="bg-background text-foreground">…</div>