Playground
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).
×