Live Preview
See your design tokens applied to sample components.
Typography Scale
display Plus Jakarta Sans 48px/800
The quick brown fox jumps over the lazy dog.
headline Plus Jakarta Sans 32px/700
The quick brown fox jumps over the lazy dog.
title Plus Jakarta Sans 24px/600
The quick brown fox jumps over the lazy dog.
body Plus Jakarta Sans 16px/400
The quick brown fox jumps over the lazy dog.
label Plus Jakarta Sans 14px/500
The quick brown fox jumps over the lazy dog.
caption Plus Jakarta Sans 12px/400
The quick brown fox jumps over the lazy dog.
mono JetBrains Mono 14px/400
The quick brown fox jumps over the lazy dog.
Color Palette
Brand Colors
primary
secondary
accent
success
warning
danger
info
Surfaces
background
surface
surface_elevated
surface_container
Text
text
text_secondary
text_muted
Sample Components
Sample Card
PreviewThis card renders with your current token values — surface color, border radius, shadows, and typography.