v0.1.0

Colors

Reach for the token, never the value. Every swatch below is labelled with the utility class you write and the role it plays; flip the theme toggle to check both themes.

Surfaces

Backgrounds, from the page itself up to floating menus.

Page background

bg-background--background

Raised surface: cards, dialogs

bg-card--card

Floating surface: menus, tooltips

bg-popover--popover

Quiet fill: rails, disabled fields

bg-muted--muted

Hairlines and field borders

border-border--border

Text on surfaces

Each foreground token shown on the background it is paired with, so contrast is visible.

Quarterly revenue is up 12%

Primary text

text-foreground

Quarterly revenue is up 12%

Secondary text and captions

text-muted-foreground

Quarterly revenue is up 12%

Text on cards

text-card-foreground

Quarterly revenue is up 12%

Text on the accent

text-primary-foreground

Quarterly revenue is up 12%

Text on the soft accent

text-accent-foreground

Accent and semantic states

One accent for action; the rest carry meaning.

Primary action, focus, selection

bg-primary--primary

Primary action, hovered

bg-primary-hover--primary-hover

Soft accent fill: active nav, badges

bg-accent--accent

Confirmation and healthy status

bg-success--success

Caution, needs attention

bg-warning--warning

Errors and destructive actions

bg-destructive--destructive

Keyboard focus ring

ring-ring--ring