Claude Design System
Light · Generated 12/04/2026 · 16 colors · 18 type tokens · 15 spacing steps · 12 breakpoints · 7 motion tokens
v1.0.0
Color Palette
Background Colors — 7 tokens
Dark Gray 3
#373734
White
#F8F8F6
Blue
#2977D6
Mid Gray 2
rgba(123,121,116,.15)
Light Gray 2
#EFEEEB
Mid Gray 3
rgba(123,121,116,.3)
White 4
#FFFFFF
Text Colors — 4 tokens
Dark Gray 2
#121212
Black
#000000
Mid Gray
#7B7974
Red (accent)
#D97757
Border Colors — 2 tokens
Dark Gray
#1F1F1E
Dark Gray 4
rgba(31,31,30,.15)
Fill & Gradient Colors — 3 tokens
White 2
#F4F4F1
Light Gray
rgba(244,244,241,.05)
White 3
rgba(244,244,241,.3)
Shadow Colors — none detected
No shadow color tokens detected in the color palette. Shadow values are defined inline within the shadow token.
Typography
Base Font · Anthropic Sans
Anthropic Sans
The quick brown fox jumps over the lazy dog — a clean, modern sans for the UI layer.
W330 · 330 Regular · 400 W430 · 430 Medium · 500 Semibold · 600
Serif Font · Anthropic Serif
Anthropic Serif
Claude's responses are rendered in this warm, readable serif — optimised for long-form reading.
Regular · 400 Medium · 500 Semibold · 600
Hello, Claude.
Display Hero · 40px · Semibold · line-height: 60px
Start a new conversation
Heading · 16px · Semibold · line-height: 24px
Claude is trained by Anthropic, and our mission is the responsible development and maintenance of advanced AI for the long-term benefit of humanity.
Body (Serif) · 14px · Regular · line-height: 19.6px · Anthropic Serif
Last updated just now · Context window: 200K tokens
Body Small · 14px · Regular · line-height: 22.4px
CLAUDE · ANTHROPIC · AI
Caption / Label · 12px · Medium · line-height: 16px · uppercase
Line Heights — 6 tokens
Tight
14px
Snug
16px
Normal
19.6px
Relaxed
22.4px
Loose
24px
lh-6
60px
Letter Spacing — no tokens detected
No letter-spacing tokens were extracted from the Claude design system. Spacing values are applied inline via component styles.
Spacing
Spacing Scale
15 tokens — 1px → 174.102px
1
2
4
5
6
8
10
12
14
16
24
28
32
172
174
Borders
Border Radii — 4 tokens
sm
6px · ×22
md
8px · ×9
lg
20px · ×1
xl
9999px · Pill · ×7
Border Widths — 2 tokens
--border-width-hairline
0.5px · ×27
--border-width-thin
1px · ×4
Shadow / Elevation
Shadow Tokens — 1 token
A single, precise shadow used for elevated surfaces like dropdowns and modals
--shadow-sm
×1
Hairline ring via box-shadow (rgba(31,31,30,0.15) 0px 0px 0px 0.5px) + gentle 4px 20px drop — used for overlays, menus, floating panels
Z-Index
LayerValueUsage
--z-1-10Background decorations, canvas underlayers
--z-2-1Behind-content elements
--z-31Base content layer
--z-410Sticky headers, navigation bars
--z-520Dropdowns, popovers, tooltips
--z-630Overlays, drawers, sidebars
--z-760Modals, dialogs, toasts
--z-82,147,483,001Maximum — browser extension UI, critical top-layer elements
Breakpoints
Responsive Breakpoints
12 tokens — 350px → 1562px
--breakpoint-xs
350px
--breakpoint-sm
500px
--breakpoint-md
640px
--breakpoint-lg
768px
--breakpoint-xl
840px
--breakpoint-2xl
1000px
--breakpoint-3xl
1024px
--breakpoint-bp-8
1200px
--breakpoint-bp-9
1280px
--breakpoint-bp-10
1400px
--breakpoint-bp-11
1536px
--breakpoint-bp-12
1562px
Opacity
Opacity Tokens — 2 tokens
0.47 → 0.75
--opacity-47
47% · ×1 — dimmed/disabled states
--opacity-75
75% · ×2 — semi-transparent overlays
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-dark-gray-2--color-dark-gray-31.57:1Fail
--color-dark-gray-2--color-white17.62:1AAA
--color-dark-gray-2--color-blue4.2:1AA Large
--color-dark-gray-2--color-mid-gray-24.27:1AA Large
--color-dark-gray-2--color-light-gray-216.15:1AAA
--color-black--color-dark-gray-31.76:1Fail
--color-black--color-white19.75:1AAA
--color-black--color-blue4.7:1AA
--color-black--color-mid-gray-24.79:1AA
--color-black--color-light-gray-218.1:1AAA
--color-mid-gray--color-dark-gray-32.75:1Fail
--color-mid-gray--color-white4.09:1AA Large
--color-mid-gray--color-blue1.03:1Fail
--color-mid-gray--color-mid-gray-21.01:1Fail
--color-mid-gray--color-light-gray-23.75:1AA Large
--color-red--color-dark-gray-33.83:1AA Large
--color-red--color-white2.94:1Fail
--color-red--color-blue1.43:1Fail
--color-red--color-mid-gray-21.4:1Fail
--color-red--color-light-gray-22.69:1Fail
CSS Variables Reference
Colors 16 tokens
Dark Gray (border)--color-dark-gray#1F1F1E
Dark Gray 2 (text)--color-dark-gray-2#121212
Dark Gray 3 (bg)--color-dark-gray-3#373734
Dark Gray 4 (border)--color-dark-gray-4rgba(31,31,30,.15)
Black (text)--color-black#000000
Mid Gray (text)--color-mid-gray#7B7974
White (bg)--color-white#F8F8F6
White 2 (fill)--color-white-2#F4F4F1
White 3 (fill)--color-white-3rgba(244,244,241,.3)
White 4 (bg)--color-white-4#FFFFFF
Light Gray (fill)--color-light-grayrgba(244,244,241,.05)
Light Gray 2 (bg)--color-light-gray-2#EFEEEB
Mid Gray 2 (bg)--color-mid-gray-2rgba(123,121,116,.15)
Mid Gray 3 (bg)--color-mid-gray-3rgba(123,121,116,.3)
Red (accent)--color-red#D97757
Blue (bg)--color-blue#2977D6
Typography 18 tokens
Base Font--font-family-baseAnthropic Sans
Serif Font--font-family-2Anthropic Serif
System Font--font-family-3system-ui
W330--font-weight-w330330
Regular--font-weight-regular400
W430--font-weight-w430430
Medium--font-weight-medium500
Semibold--font-weight-semibold600
2xs--font-size-2xs12px
xs--font-size-xs14px
sm--font-size-sm16px
base (display)--font-size-base40px
Tight--line-height-tight14px
Snug--line-height-snug16px
Normal--line-height-normal19.6px
Relaxed--line-height-relaxed22.4px
Loose--line-height-loose24px
lh-6 (display)--line-height-lh-660px
Spacing 15 tokens
Space 1--space-11px · ×9
Space 2--space-22px · ×3
Space 3--space-34px · ×18
Space 4--space-45px · ×1
Space 5--space-56px · ×55
Space 6--space-68px · ×47
Space 8--space-810px · ×12
Space 10--space-1012px · ×49
Space 12--space-1214px · ×7
Space 16--space-1616px · ×35
Space 20--space-2024px · ×2
Space 24--space-2428px · ×3
Space 32--space-3232px · ×5
Space 40--space-40172.2px · ×1
Space 48--space-48174.102px · ×4
Borders & Radius 6 tokens
Hairline--border-width-hairline0.5px · ×27
Thin--border-width-thin1px · ×4
Small--radius-sm6px · ×22
Medium--radius-md8px · ×9
Large--radius-lg20px · ×1
Pill / Full--radius-xl9999px · ×7
Shadow, Motion, Opacity & Z-Index 18 tokens
Shadow
Floating Panel--shadow-sm4px 20px blur
Motion · 7 tokens
Instant--duration-instant0.035s · ×3
Fast--duration-fast0.075s · ×143
Normal--duration-normal0.15s · ×149
Slow--duration-slow0.2s · ×17
Slower--duration-slower0.3s · ×111
Duration 6--duration-duration-60.5s · ×1
Ease Out--easing-ease-outease-out · ×1
Opacity · 2 tokens
Dim--opacity-4747% · ×1
Semi--opacity-7575% · ×2
Z-Index · 8 tokens
Background--z-1-10
Below--z-2-1
Base--z-31
Navigation--z-410
Popover--z-520
Overlay--z-630
Modal--z-760
Max (extension)--z-82,147,483,001
Breakpoints 12 tokens
XS--breakpoint-xs350px
SM--breakpoint-sm500px
MD--breakpoint-md640px
LG--breakpoint-lg768px
XL--breakpoint-xl840px
2XL--breakpoint-2xl1000px
3XL--breakpoint-3xl1024px
BP-8--breakpoint-bp-81200px
BP-9--breakpoint-bp-91280px
BP-10--breakpoint-bp-101400px
BP-11--breakpoint-bp-111536px
BP-12--breakpoint-bp-121562px
Design System Preview · Claude (Light) · Generated 12/04/2026 · 16 color tokens · 4 font-size · 3 font-family · 5 font-weight · 6 line-height · No letter-spacing · 15 spacing · 4 radius · 2 border-width · 1 shadow · 6 duration · 1 easing · 8 z-index · 12 breakpoints · 2 opacity