Type scale
3xl · 650 · tight
The quick brown fox jumps over the lazy dog
2xl · 650 · tight
The quick brown fox jumps over the lazy dog
xl · 650
The quick brown fox jumps over the lazy dog
lg · 500
The quick brown fox jumps over the lazy dog
md · 400
The quick brown fox jumps over the lazy dog. Body text sits at 16px with a line height of 1.5, which is where most reading happens, so it gets the most room.
sm · 400
The quick brown fox jumps over the lazy dog. Secondary text, table cells, and form help.
xs · 400
The quick brown fox jumps over the lazy dog. Labels and captions only.
mono
const fox = jump(over.lazyDog) // 0123456789
Gray
Accent
Status
Semantic colors
bg--color-bg
bg-raised--color-bg-raised
bg-subtle--color-bg-subtle
bg-muted--color-bg-muted
bg-emphasis--color-bg-emphasis
fg--color-fg
fg-muted--color-fg-muted
fg-subtle--color-fg-subtle
border-strong--color-border-strong
accent--color-accent
accent-subtle--color-accent-subtle
success--color-success-subtle / -fg
warning--color-warning-subtle / -fg
danger--color-danger-subtle / -fg
Spacing
1 · 4px
2 · 8px
3 · 12px
4 · 16px
5 · 20px
6 · 24px
8 · 32px
10 · 40px
12 · 48px
16 · 64px
Radius
sm
md
lg
xl
full
Shadow
sm
md
lg