Design tokens

Live reference for CSS variables in app/tokens.css. Values update for light and dark themes. Click Tailwind classes to copy the utility name, or click the --var to copy the CSS variable.

Semantic colors

Theme, chart, sidebar, alpha, and composited custom tokens from Figma.

Core semantic

…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…

Chart

…
…
…
…
…

Sidebar

…
…
…
…
…
…
…
…

Alpha overlays

…
…
…
…
…
…
…
…
…
…

Custom composited

…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…

Component card colors

Background and foreground pairs for colored cards across 17 hues.

red

…
…

orange

…
…

amber

…
…

yellow

…
…

lime

…
…

green

…
…

emerald

…
…

teal

…
…

cyan

…
…

sky

…
…

blue

…
…

indigo

…
…

violet

…
…

purple

…
…

fuchsia

…
…

pink

…
…

rose

…
…

Primitive palette

Tailwind color ramps (same scales as the default palette).

slate

50
100
200
300
400
500
600
700
800
900
950

gray

50
100
200
300
400
500
600
700
800
900
950

zinc

50
100
200
300
400
500
600
700
800
900
950

neutral

50
100
200
300
400
500
600
700
800
900
950

stone

50
100
200
300
400
500
600
700
800
900
950

red

50
100
200
300
400
500
600
700
800
900
950

orange

50
100
200
300
400
500
600
700
800
900
950

amber

50
100
200
300
400
500
600
700
800
900
950

yellow

50
100
200
300
400
500
600
700
800
900
950

lime

50
100
200
300
400
500
600
700
800
900
950

green

50
100
200
300
400
500
600
700
800
900
950

emerald

50
100
200
300
400
500
600
700
800
900
950

teal

50
100
200
300
400
500
600
700
800
900
950

cyan

50
100
200
300
400
500
600
700
800
900
950

sky

50
100
200
300
400
500
600
700
800
900
950

blue

50
100
200
300
400
500
600
700
800
900
950

indigo

50
100
200
300
400
500
600
700
800
900
950

violet

50
100
200
300
400
500
600
700
800
900
950

purple

50
100
200
300
400
500
600
700
800
900
950

fuchsia

50
100
200
300
400
500
600
700
800
900
950

pink

50
100
200
300
400
500
600
700
800
900
950

rose

50
100
200
300
400
500
600
700
800
900
950

Spacing

Spacing scale mapped to Tailwind-compatible tokens.

…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…

Radius

Corner radii for components and surfaces.

…
…
…
…
…
…
…
…
…
…

Typography

Font families, type scale, line heights, and weights.

Font families

Text scale

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Font weights

Weight sample — thin

Weight sample — extralight

Weight sample — light

Weight sample — normal

Weight sample — medium

Weight sample — semibold

Weight sample — bold

Weight sample — extrabold

Weight sample — black

Display & Heading utilities

Composite Tailwind classes that bundle font-family, size, line-height, weight, and letter-spacing. Responsive at ≥768px.

Shadows

Box shadows, inset shadows, and drop-shadow filters.

Box shadow

…
…
…
…
…
…
…

Inset shadow

…
…
…

Drop shadow (filter)

…
…
…
…
…
…

Blur

Backdrop-friendly blur radii.

…
…
…
…
…
…
…

Responsive layout & type

Breakpoints, containers, section spacing, and responsive display/heading styles.

Breakpoints

sm
…
md
…
lg
…
xl
…
2xl
…

Containers — max width

Caps the max width of a container. Use on a wrapper to limit reading width or content column.

3xs
…Tiny chip / badge
2xs
…Sidebar item
xs
…Compact dialog
sm
…Form field group
md
…Small dialog
lg
…Modal
xl
…Wide modal
2xl
…Article column
3xl
…Long-form text
4xl
…Page content
5xl
…Wide page content
6xl
…Marketing section
7xl
…Full-width hero

Section & layout spacing

Named spacing values you apply via Tailwind arbitrary-value syntax — e.g. px-(--responsive-container-padding-x). Values are responsive: they change at md: (≥768px).

Container side padding

Horizontal padding inside the page container (left + right gutters). 16px on mobile, 24px from md.

…
Section vertical padding

Vertical padding around a page section (top + bottom). 64px on mobile, 96px from md.

…
Title → body gap (XL)

Vertical gap between a section title and body content for XL-sized sections.

…
Title → body gap (LG)

Vertical gap between title and body content for LG-sized sections.

…
Title → body gap (MD)

Vertical gap between title and body content for MD-sized sections.

…
Title → body gap (SM)

Vertical gap between title and body content for SM-sized sections.

…

Display (PP Agrandir)

Composite utilities — responsive at md: (≥768px).

The quick brown fox.

The quick brown fox.

The quick brown fox.

The quick brown fox.

Heading (Inter)

Composite utilities — responsive at md: (≥768px).

The quick brown fox.

The quick brown fox.

The quick brown fox.

The quick brown fox.