Sanity Design System
Dark · Generated 18/04/2026 · 31 colors · 57 type tokens · 34 spacing steps · 14 breakpoints · 10 motion tokens
v1.0.0
Color Palette
Background Colors
Black
#0B0B0B
Black 2
#000000
Dark Gray
#212121
Dark Gray 2
#353535
Light Gray 2
#EDEDED
Orange
#FF4100
Orange 2
#FF5500
Blue 2
#0081FF
Green 3
#19D600
Blue 3
#0052EF
Yellow 2
#FFF500
Dark Blue 2
rgba(18,25,35,.2)
Pink 2
#FF00FF
Text Colors
Light Gray
#B9B9B9
White
#FFFFFF
Pink
#F500FF
Green
#45FF00
Mid Gray
#797979
Blue
#027FFF
Light Blue
#AFBACA
Green 2
#00FF00
Dark Gray 3
#4A4A4A
Yellow
#FFFF00
Dark Green
#007800
Blue 4
#0053EF
Border & Fill Colors
Light Gray 3
#D6D6D6
Light Gray 4
#D7D7D7
Dark Gray 5
#373737
Cyan
#37CD8F
Typography
Base Font · waldenburgNormal / Helvetica
waldenburg
The content operating system for the AI era. Build remarkable content experiences.
Regular · 400 W425 · 425 Medium · 500 Semibold · 600
Mono Font · ibmPlexMono
IBM Plex Mono
import sanityClient from '@sanity/client' const client = sanityClient({ projectId: 'xxx' })
Regular · 400 Medium · 500
AI
Display 112px · Semibold · line-height: 112px · letter-spacing: −4.48px
Content OS
Hero · 72px · Semibold · line-height: 75.6px · letter-spacing: −4.48px
Build remarkable
Display LG · 60px · Semibold · line-height: 51.84px · letter-spacing: −2.88px
Structured content
Display MD · 48px · Semibold · line-height: 48px · letter-spacing: −2.88px
Content at the core
Heading · 32px · Semibold · line-height: 38.4px · letter-spacing: −1.68px
The platform teams love for content operations
Subheading · 24px · Medium · line-height: 29.76px · letter-spacing: −1.14px
Connect your content to any frontend or application. Sanity powers content for the world's leading brands.
Body · 16px · Regular · line-height: 22px · letter-spacing: −0.2px
CONTENT · STRUCTURED · PORTABLE TEXT
Label · 12px · Medium · monospace · letter-spacing: +0.06em
Line Heights
Tight
10px
Snug
11px
Normal
13px
Relaxed
14px
Loose
16px
LH-7
18px
LH-9
22px
LH-11
24px
LH-13
27px
LH-15
38.4px
LH-18
48px
LH-20
75.6px
Letter Spacing
AI
Tight · −4.48px
--letter-spacing-tight · hero display 72–112px
Content
Normal · −2.88px
--letter-spacing-normal · large headings 48–72px
Platform
Wide · −1.68px
--letter-spacing-wide · mid headings 32–48px
Structured data
Widest · −0.32px
--letter-spacing-widest · body headings 18–24px
Spacing
Spacing Scale
34 tokens — 1px → 300.32px
1
2
3
4
6
7
8
12
18
24
32
40
48
51.9
56.6
64
87.5
96
128
143.8
256
300
Borders
Border Radii
SM
3px
MD
4px
LG
5px
XL
6px
2XL
8px
Full
11px
R7
12px
Circle
50%
Pill
9999px
Sanity uses a 9-step radius system, from minimal 3px through standard 12px cards, all the way to full circles and 99999px pill shapes used on badges and tags.
Border Widths
--border-width-hairline
1px · dividers, card borders, inputs
--border-width-thin
2px · focus states, emphasis
--border-width-base
16px · decorative accents
--border-width-thick
24px · bold graphic borders
Shadow / Elevation
Shadow Tokens
2 tokens — focus ring & inset highlight
--shadow-sm
Focus ring · 1px
rgb(0,82,239) 0px 0px 0px 1px — used as keyboard focus ring indicator in blue
--shadow-md
Inset ring · 1px
rgb(255,255,255) 0px 0px 0px 1px inset — used for inset white highlight on interactive elements
Sanity relies on border-based elevation rather than traditional drop shadows. Depth is expressed through background fills, border opacity, and the focus ring shadow token.
Z-Index
LayerValueUsage
--z-1-1000Deep background, behind-canvas decorations
--z-2-10Background elements, stacking context base
--z-31Base content layer
--z-42Slightly elevated content
--z-55Cards, lifted surfaces
--z-610Sticky navigation, floating headers
--z-720Dropdowns, tooltips, popovers
--z-830Overlays, drawers, off-canvas panels
--z-950Modals, dialogs, command palette
--z-10200High-priority system UI
--z-112147483636Maximum browser z-index − 2 (iFrame escape)
--z-122147483637Maximum browser z-index − 1 (plugin layer)
--z-132147483638Maximum browser z-index (absolute top layer)
Breakpoints
📱
--breakpoint-xs
376px
Mobile SM
📱
--breakpoint-sm
479px
Mobile LG upper
📱
--breakpoint-md
480px
Mobile LG lower
💻
--breakpoint-lg
719px
Tablet upper
💻
--breakpoint-xl
720px
Tablet lower
💻
--breakpoint-2xl
767px
Tablet MD upper
💻
--breakpoint-3xl
768px
Tablet MD lower
🖥️
--breakpoint-bp-8
800px
Small desktop
🖥️
--breakpoint-bp-11
1100px
Desktop MD
🖥️
--breakpoint-bp-12
1200px
Desktop LG
🖥️
--breakpoint-bp-14
1640px
Ultrawide
Opacity
Opacity Tokens
5 tokens · 0.2 → 0.9
--opacity-20
20% · ghost
--opacity-40
40% · dim
--opacity-50
50% · half
--opacity-70
70% · muted
--opacity-90
90% · near full
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-light-gray--color-white1.96:1Fail
--color-light-gray--color-black10.03:1AAA
--color-light-gray--color-dark-gray8.21:1AAA
--color-light-gray--color-dark-gray-26.25:1AA
--color-light-gray--color-orange1.78:1Fail
--color-black-2--color-white21:1AAA
--color-black-2--color-black1.07:1Fail
--color-black-2--color-orange6.01:1AA
--color-pink--color-white3.32:1AA Large
--color-pink--color-black5.93:1AA
--color-pink--color-dark-gray4.85:1AA
--color-green--color-black14.58:1AAA
--color-green--color-dark-gray11.93:1AAA
--color-green--color-dark-gray-29.09:1AAA
--color-mid-gray--color-black4.52:1AA
--color-mid-gray--color-dark-gray3.7:1AA Large
CSS Variables Reference
Background Colors13 tokens
Black--color-black#0B0B0B
Black 2--color-black-2#000000
Dark Gray--color-dark-gray#212121
Dark Gray 2--color-dark-gray-2#353535
Light Gray 2--color-light-gray-2#EDEDED
Orange--color-orange#FF4100
Orange 2--color-orange-2#FF5500
Blue 2--color-blue-2#0081FF
Green 3--color-green-3#19D600
Blue 3--color-blue-3#0052EF
Yellow 2--color-yellow-2#FFF500
Dark Blue--color-dark-blue#29246A
Pink 2--color-pink-2#FF00FF
Text & Accent Colors12 tokens
Light Gray--color-light-gray#B9B9B9
White--color-white#FFFFFF
Pink (Magenta)--color-pink#F500FF
Green (Neon)--color-green#45FF00
Mid Gray--color-mid-gray#797979
Blue--color-blue#027FFF
Light Blue--color-light-blue#AFBACA
Green 2--color-green-2#00FF00
Dark Gray 3--color-dark-gray-3#4A4A4A
Yellow--color-yellow#FFFF00
Dark Green--color-dark-green#007800
Cyan (Fill)--color-cyan#37CD8F
Typography57 tokens
Base Font--font-family-basewaldenburgNormal
Sans Font--font-family-2Helvetica
Mono Font--font-family-3ibmPlexMono
Regular--font-weight-regular400
W425--font-weight-w425425
Medium--font-weight-medium500
Semibold--font-weight-semibold600
XS--font-size-xs10px
SM--font-size-sm11px
Base--font-size-base12px
LG--font-size-lg13px
XL--font-size-xl15px
2XL--font-size-2xl16px
3XL--font-size-3xl18px
5XL--font-size-5xl24px
6XL--font-size-6xl32px
Display 48--font-size-48px48px
Display 72--font-size-72px72px
Display 112--font-size-112px112px
Tight (hero)--letter-spacing-tight−4.48px
Normal--letter-spacing-normal−2.88px
Wide--letter-spacing-wide−1.68px
Wider--letter-spacing-wider−1.14px
Widest (UI)--letter-spacing-widest−0.32px
Spacing34 tokens
Space 1--space-11px
Space 2--space-22px
Space 4--space-44px
Space 5--space-56px
Space 12--space-128px
Space 20--space-2012px
Space 40--space-4018px
Space 64--space-6424px
Space 96--space-9632px
Space 128--space-12840px
Space 160--space-16048px
Space 24--space-2464px
Space 25--space-2587.45px
Space 26--space-2696px
Space 27--space-27128px
Space 33--space-33256px
Space 36--space-36300.32px
Borders & Radius14 tokens
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Base--border-width-base16px
Thick--border-width-thick24px
SM--radius-sm3px
MD--radius-md4px
LG--radius-lg5px
XL--radius-xl6px
2XL--radius-2xl8px
Full--radius-full11px
R7--radius-r712px
Circle--radius-r850%
Pill--radius-r99999px
Super Pill--radius-r1099999px
Motion, Opacity & Layers18 tokens
Instant--duration-instant100ms
Fast--duration-fast150ms
Normal--duration-normal200ms
Slow--duration-slow300ms
Slower--duration-slower400ms
Long--duration-duration-81s
Linear--easing-linearlinear
Ease Out--easing-ease-outease-out
Ghost--opacity-2020%
Dim--opacity-4040%
Half--opacity-5050%
Muted--opacity-7070%
Near Full--opacity-9090%
Deep BG--z-1-1000
Navigation--z-610
Modal--z-950
Max (iFrame)--z-132147483638
Design System Preview · Sanity (Dark) · Generated 18/04/2026 · 31 color tokens · 16 font-size · 3 font-family · 4 font-weight · 22 line-height · 12 letter-spacing · 34 spacing · 10 radius · 4 border-width · 2 shadow · 8 duration · 2 easing · 13 z-index · 14 breakpoints · 5 opacity