02·Typography
Type ramp
Inter for UI · Instrument Serif for editorial accents. All sizes are pixel-anchored for consistency.
The quick brown fox jumps.
text-[64px]The quick brown fox jumps.
text-[48px]The quick brown fox jumps.
text-3xlThe quick brown fox jumps.
text-[28px]The quick brown fox jumps.
text-[22px]The quick brown fox jumps.
text-lgThe quick brown fox jumps.
text-[15px]The quick brown fox jumps.
text-[13.5px]The quick brown fox jumps.
text-[11px]03·Colors
Color tokens
Ink auto-inverts in dark mode. Brand + Accent scales stay stable across themes.
Brand
brand-50
#eef1ff
brand-100
#dee4ff
brand-200
#bec9ff
brand-300
#94a3ff
brand-400
#7178ff
brand-500
#4a3fe6
brand-600
#3d33c2
brand-700
#332ba0
brand-800
#2b247d
brand-900
#1e1a58
Accent
accent-50
#fff4ed
accent-100
#ffe4d1
accent-200
#ffc19d
accent-300
#ff9860
accent-400
#ff7833
accent-500
#ff5a0a
accent-600
#e04600
accent-700
#b83600
accent-800
#8f2b00
accent-900
#6b2200
Ink
ink-50
auto-invert
ink-100
auto-invert
ink-200
auto-invert
ink-300
auto-invert
ink-400
auto-invert
ink-500
auto-invert
ink-600
auto-invert
ink-700
auto-invert
ink-800
auto-invert
ink-900
auto-invert
Semantic tones
Success
Confirmations, positive states
Warning
Attention required, non-critical alerts
Danger
Errors, destructive actions
Info
Neutral guidance, tips
Violet
Alt-brand accents, categories
04·Spacing
Spacing scale
4 px base grid. Prefer these values over one-off pixel numbers.
- 0.52px
- 14px
- 28px
- 312px
- 416px
- 624px
- 832px
- 1248px
- 1664px
05·Radius
Border radius
rounded
4px
rounded-lg
8px
rounded-xl
12px
rounded-2xl
16px
rounded-3xl
24px
rounded-full
9999px
06·Shadows
Elevation
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl
08·Inputs
Form controls
09·Badges
Badges & chips
10·Cards
Card patterns
Bordered
Neutral surface with a subtle border.
Gradient
Brand + accent wash for calls to action.
Dark
Anchor card for high-contrast moments.
11·Icons
Icon library
27 stroke icons at 1.8–2.5 width. Use the semantic tone map elsewhere for consistent color coding.
home
briefcase
users
search
plus
check
close
arrowRight
arrowUpRight
chevronDown
star
bookmark
bell
send
mapPin
clock
wallet
sparkles
shield
globe
building
trending
award
quote
grid
filter
user