Where designers ship production-ready polish
Try refining these components
Press . to start design mode, then select any element to change its padding, radius, or colors.
Playground
Select any element to explore the tools. Double-click text to edit it.
Layout & Flex
Dashboard
Components
Tokens
Typography
Views
2,847
Active
128
Growth
+24%
Radius & Style
Sharp
0px
Subtle
8px
Rounded
16px
Pill
26px
Typography & Spacing
The quick brown fox
Adjust font sizes, weights, line-height, and letter-spacing. Double-click any text to edit it directly.
Caption · Monospace · 11px
Spacing tokens
4
8
12
16
20
24
32
40
48
Colors & Shadows
Semantic tokens
Background
Card
Muted
Accent
Foreground
Shadow scale
none
sm
md
lg
xl
Components & Sizing
Jane Cooper
Designer
Notifications
+3
xs
sm
md
lg
xl