Design Tokens
Zudo Design System token reference — colors, spacing, typography, and more.
Color Palette (p0–p15)
p0
dark surface
p1
danger/red
p2
success/green
p3
warning/yellow
p4
info/link (white)
p5
accent/primary
p6
neutral/gray
p7
light text
p8
muted text
p9
background
p10
surface
p11
text primary
p12
price/highlight
p13
sold/special
p14
accent hover
p15
secondary text
Semantic Colors
bg
bg-bg
fg
bg-fg
surface
bg-surface
muted
bg-muted
accent
bg-accent
accent-hover
bg-accent-hover
link
bg-link
success
bg-success
danger
bg-danger
warning
bg-warning
price
bg-price
sold
bg-sold
code-bg
bg-code-bg
code-fg
bg-code-fg
Legacy Colors (zd-*)
zd-black
Background
zd-white
Text
zd-link
Links
zd-active
Active state
zd-gray
Neutral
zd-gray2
Dark neutral
zd-strong
Strong/emphasis
zd-sold
Sold
zd-notify
Notifications
zd-error
Errors
zd-warning
Warnings
zd-price
Price
zd-outline
Focus outline
zd-mercari-corporate
Mercari brand
Horizontal Spacing (hgap)
hgap-2xs 5px
hgap-xs 12px
hgap-sm 20px
hgap-md 40px
hgap-md-x2 80px
hgap-lg 60px
hgap-lg-x2 120px
hgap-xl 100px
hgap-2xl 250px
Vertical Spacing (vgap)
vgap-2xs
4px
vgap-xs
8px
vgap-sm
20px
vgap-md
35px
vgap-lg
50px
vgap-xl
65px
vgap-2xl
80px
Typography - Font Sizes
xs 1rem / 1.4
The quick brown fox
sm 1.1rem / 1.5
The quick brown fox
base 1.4rem / 1.7
The quick brown fox
lg 1.6rem / 1.5
The quick brown fox
xl 1.9rem / 1.4
The quick brown fox
2xl 2.8rem / 1.35
The quick brown fox
3xl 3.2rem / 1.3
The quick brown fox
4xl 4rem / 1.3
The quick brown fox
5xl 4.8rem / 1.3
The quick brown fox
Font Families
noto
The quick brown fox jumps over the lazy dog 0123456789
あのイーハトーヴォのすきとおった風 0123456789
Noto Sans / Noto Sans JP (body)
futura
The quick brown fox jumps over the lazy dog 0123456789
あのイーハトーヴォのすきとおった風 0123456789
Futura / Jost (headings)
sans
The quick brown fox jumps over the lazy dog 0123456789
あのイーハトーヴォのすきとおった風 0123456789
Helvetica / Arial (fallback)
mono
The quick brown fox jumps over the lazy dog 0123456789
あのイーハトーヴォのすきとおった風 0123456789
Menlo / Monaco (code)
Font Weights
thin 100
The quick brown fox jumps over the lazy dog
extralight 200
The quick brown fox jumps over the lazy dog
light 300
The quick brown fox jumps over the lazy dog
normal 400
The quick brown fox jumps over the lazy dog
medium 500
The quick brown fox jumps over the lazy dog
semibold 600
The quick brown fox jumps over the lazy dog
bold 700
The quick brown fox jumps over the lazy dog
extrabold 800
The quick brown fox jumps over the lazy dog
black 900
The quick brown fox jumps over the lazy dog
Line Heights
none
1
Typography tokens constrain the type scale to a small set of intentional values.
This eliminates drift and keeps the interface consistent.
tight
1.4
Typography tokens constrain the type scale to a small set of intentional values.
This eliminates drift and keeps the interface consistent.
snug
1.6
Typography tokens constrain the type scale to a small set of intentional values.
This eliminates drift and keeps the interface consistent.
normal
1.8
Typography tokens constrain the type scale to a small set of intentional values.
This eliminates drift and keeps the interface consistent.
loose
2.3
Typography tokens constrain the type scale to a small set of intentional values.
This eliminates drift and keeps the interface consistent.
Breakpoints
sm
580px md
740px lg
980px xl
1280px 2xl
1630px 3xl
1800px Border Radius
xs
0.125rem
sm
0.25rem
md
0.375rem
lg
0.5rem
Box Shadows
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-inner
Status Colors (Admin)
pending
notified
unsubscribed
confirmed
fulfilled
cancelled
Tailwind Class Quick Reference
| Category | Tailwind Class | CSS Property |
|---|---|---|
| Spacing | p-hgap-sm, px-hgap-sm | padding: 20px |
| py-vgap-md, pb-vgap-md | padding-block: 35px | |
| gap-hgap-xs, gap-x-hgap-xs | gap: 12px | |
| m-vgap-sm, mt-vgap-sm | margin: 20px | |
| Color | bg-accent, text-accent | Semantic accent color |
| bg-zd-black, text-zd-white | Legacy named colors | |
| bg-p5, text-p7 | Raw palette colors | |
| Typography | text-xs ... text-5xl | Font size + line-height pair |
| font-noto, font-futura, font-mono | Font family | |
| Radius | rounded-xs ... rounded-lg | Border radius |
Numeric Tailwind classes (p-2, m-4, gap-8, bg-gray-500) are prohibited. Only semantic tokens above are valid.