Foundations
Core design tokens: colors, typography, spacing, radius, and shadows.
Colors — Light
bg
--bg
#ffffff
bg-subtle
--bg-subtle
#f9f9f9
bg-muted
--bg-muted
#f4f4f4
fg
--fg
#0d0d0d
fg-secondary
--fg-secondary
#5d5d5d
fg-muted
--fg-muted
#8e8e8e
accent
--accent
#10a37f
info
--info
#0070f3
success
--success
#10a37f
warning
--warning
#d97706
danger
--danger
#ef4444
Colors — Dark
bg (dark)
#212121
bg-subtle (dark)
#181818
bg-muted (dark)
#2f2f2f
fg (dark)
#ffffff
accent (dark)
#19c37d
Typography
Font: Pretendard Variable + system font fallback
text-display-72
The quick brown foxtext-display-56
The quick brown foxtext-heading-40
The quick brown fox jumpstext-heading-32
The quick brown fox jumps overtext-heading-24
The quick brown fox jumps over the lazy dogtext-heading-20
The quick brown fox jumps over the lazy dogtext-heading-16
The quick brown fox jumps over the lazy dogtext-body-18
The quick brown fox jumps over the lazy dogtext-body-16
The quick brown fox jumps over the lazy dogtext-body-14
The quick brown fox jumps over the lazy dogtext-caption-13
The quick brown fox jumps over the lazy dogtext-caption-12
The quick brown fox jumps over the lazy dogBorder Radius
sm
6px
md
12px
lg
16px
xl
24px
pill
9999px
Shadows
shadow-sm
0 1px 2px rgba(0,0,0,0.04)
shadow-md
0 4px 12px rgba(0,0,0,0.08)
shadow-lg
0 12px 32px rgba(0,0,0,0.12)
Spacing Scale
4
8
12
16
20
24
32
40
48
64