Design tokens

Live reference for CSS variables in app/tokens.css. Values update for light and dark themes. Click any swatch or token to copy var(--…).

Semantic colors

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

Core semantic

Chart

Sidebar

Alpha overlays

Custom composited

Primitive palette

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

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

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

Font weights

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.

tokens.css defines responsive typography and layout tokens. Sizes for display and heading styles increase when the viewport is at least 768px wide --breakpoint-md.

Breakpoints

Token	Value
	…
	…
	…
	…
	…

Containers

Token	Value
	…
	…
	…
	…
	…
	…
	…
	…
	…
	…
	…
	…
	…