Design Tokens
Grid System
8px
4px
8px
12px
16px
Color Palette
Primary
Success
Warning
Danger
Neutral
Spacing Scale
1x
Typography
16px
Shadows
Grid System
8px baseline
Component Preview
Buttons
Cards
Default Card
This card demonstrates the current spacing and shadow settings.
Another Card
All components update live as you adjust the design tokens.
Form Elements
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Regular paragraph text. The quick brown fox jumps over the lazy dog.
Smaller text for captions and secondary information.
Very small text for meta information or labels.
Code: font-family: system-ui, -apple-system, sans-serif;