Playground
Butter
Default
Gothic
Matcha
Neutral
Stone
Y2K
Theme Showcase
AI Chat · AI Chat Conversation
AI Chat · AI Chat Landing
AI Chat · Artifact Page
Content · Card Grid
Content · Documentation Catalog
Content · Documentation Design
Content · Documentation Technical
Content · Order Detail
Content · Product Detail
Form · Checkout Form
Form · Contact Form
Form · Two-column Form
Gallery · Centered Hero
Gallery · Classic Gallery
Gallery · Gallery Hero
Gallery · Mixed Gallery
Gallery · Product Gallery
Gallery · Side Gallery
Login · Login Card
Login · Login Split
Login · Login SSO
Settings · Settings Form
Settings · Settings Panels
Table · Grouped Table
Table · Searchable Table
Tools · File Explorer
Tools · IDE
Tools · Page Editor
Loading editor…
Create from accent
Color Accent
Color Neutral
Color Card
Color Surface
Color Text Primary
Preset
Compact
Default
Comfortable
Gigantic
Heading Font
System (Default)
Inter
Roboto
DM Sans
Figtree
Poppins
IBM Plex Sans
Source Sans
Noto Sans
Georgia (Serif)
Body Font
System (Default)
Inter
Roboto
DM Sans
Figtree
Poppins
IBM Plex Sans
Source Sans
Noto Sans
Georgia (Serif)
Type Scale
1.067 — Minor Second
1.125 — Major Second
1.200 — Minor Third
1.250 — Major Third
1.333 — Perfect Fourth
1.414 — Augmented Fourth
1.500 — Perfect Fifth
1.618 — Golden Ratio
Type Size
Geometric scale: size = round(base × ratio^step). Base = 14px, ratio = 1.200.
px
Corner Radius
Linear scale: inner = 4px, element = 8px, container = 12px, page = 28px.
px
Spacing
Linear scale: step N = 4px × N.
px
Element Size
sm = 28px, md = 32px, lg = 36px.
px
Duration
Speed multiplier for all motion. Current: 1× (e.g. medium = 410ms).
×
Click to select an element
Dark mode
Fullscreen preview
Share Playground
Copy URL