Design Tokens

Color palette and typography scale. Switch themes to see how tokens adapt.

Color Palette

Primary / Secondary / Accent

Primary

--primary

Primary FG

--primary-foreground

Secondary

--secondary

Secondary FG

--secondary-foreground

Accent

--accent

Accent FG

--accent-foreground

Destructive

--destructive

Neutrals

Background

--background

Foreground

--foreground

Card

--card

Card FG

--card-foreground

Popover

--popover

Popover FG

--popover-foreground

Muted

--muted

Muted FG

--muted-foreground

Border

--border

Input

--input

Ring

--ring

Chart Colors

Chart 1

--chart-1

Chart 2

--chart-2

Chart 3

--chart-3

Chart 4

--chart-4

Chart 5

--chart-5

Sidebar

--sidebar

Sidebar FG

--sidebar-foreground

Sidebar Primary

--sidebar-primary

Sidebar Primary FG

--sidebar-primary-foreground

Sidebar Accent

--sidebar-accent

Sidebar Accent FG

--sidebar-accent-foreground

Sidebar Border

--sidebar-border

Sidebar Ring

--sidebar-ring

Typography Scale

Heading 1 — 4xl bold

Heading 2 — 3xl bold

Heading 3 — 2xl semibold

Heading 4 — xl semibold

Heading 5 — lg medium

Heading 6 — base medium

Body text — base (16px). Used for primary content and descriptions.

Small text — sm (14px). Used for secondary content, labels, and metadata.

Extra small muted — xs (12px). Used for captions and fine print.

Monospace text — used for code, tokens, and technical values.

Bold, italic, muted, primary, destructive