UI
Design system showcase. Every token and component on the site, in one place.
Semantic colors
bg
bg.default
bg.subtle
bg.muted
bg.inverted
bg.panel
fg
fg.default
fg.muted
fg.subtle
fg.inverted
border
border.default
border.muted
border.emphasized
Palettes
gray
50
100
200
300
400
500
600
700
800
900
950
blue
50
100
200
300
400
500
600
700
800
900
950
red
50
100
200
300
400
500
600
700
800
900
950
green
50
100
200
300
400
500
600
700
800
900
950
amber
50
100
200
300
400
500
600
700
800
900
950
Type scale
xs · 0.75rem The quick brown fox
sm · 0.875rem The quick brown fox
base · 1rem The quick brown fox
lg · 1.125rem The quick brown fox
xl · 1.25rem The quick brown fox
2xl · 1.5rem The quick brown fox
3xl · 1.875rem The quick brown fox
4xl · 2.25rem The quick brown fox
5xl · 3rem The quick brown fox
6xl · 3.75rem The quick brown fox
weights
normal · 400 The quick brown fox
medium · 500 The quick brown fox
semibold · 600 The quick brown fox
bold · 700 The quick brown fox
Spacing
px · 1px
0.5 · 0.125rem
1 · 0.25rem
1.5 · 0.375rem
2 · 0.5rem
2.5 · 0.625rem
3 · 0.75rem
3.5 · 0.875rem
4 · 1rem
5 · 1.25rem
6 · 1.5rem
8 · 2rem
10 · 2.5rem
12 · 3rem
16 · 4rem
20 · 5rem
24 · 6rem
32 · 8rem
40 · 10rem
48 · 12rem
64 · 16rem
96 · 24rem
Radii
none 0
xs 0.125rem
sm 0.25rem
md 0.375rem
lg 0.5rem
xl 0.75rem
2xl 1rem
3xl 1.5rem
full 9999px
Shadows
xs
sm
base
md
lg
xl
2xl
inner
Card
outline · md
The default card. A hairline border, squircle corners.
subtle · md
A quiet tinted background, no border.
outline · sm
Tighter padding for dense content.
subtle · lg
Roomier padding for feature content.
Heading
Heading 2xl
Heading xl
Heading lg
Heading md
Heading sm
Badge
Subtle Outline Solid Subtle sm Subtle lg Subtle xl
List
compact
- The first item on the list Post
- A second item with a slightly longer title Note
- A third item Page
- The last item Link
default
Screenshot
Icon
Sticker
