Clerk Design System
Dark · Generated 13/04/2026 · 100 colors · 47 type tokens · 65 spacing steps · 6 motion tokens
v1.0.0
Color Palette
Background Colors — 34 tokens
Pure Black
#000000
Dark Gray
#131316
White
#FFFFFF
Blue
#747686
Blue 2
#5E5F6E
Dark Gray 3
#2F3037
White 2
#F7F7F8
Dark Gray 4
#212126
Light Gray 3
#EEEEF0
Blue 4
#6C47FF
Cyan 2
#5DE3FF
Text Colors — 9 tokens
Light Gray
#D9D9DE
Mid Gray
#9394A1
Light Gray 2
#B7B8C2
Blue 3
#696A78
Dark Gray 9
#19191B
Dark Gray 15
#37373C
Light Blue
#9785FF
Blue 14
#3B82F6
Blue 5
rgba(37,99,235,.6)
Border Colors — 4 tokens
Dark Gray 13
rgba(19,19,22,.075)
Cyan 7
#3AD4FD
Light Gray 4
#E3E3E7
Mid Gray 4
rgba(94,95,110,.1)
Accent / Fill Colors — 6 tokens
Red
#EF4444
Orange
#FFC107
Green
#4CAF50
Green 2
#22C543
Blue 10
#1976D2
Blue 15
#6248F6
Typography
Base Font · geistNumbers / DM Sans
Geist Numbers
The quick brown fox jumps over the lazy dog
Regular · 400 W450 · 450 Medium · 500 Semibold · 600 Bold · 700
Mono Font · soehneMono / DM Mono
Söhne Mono
const { userId } = await clerk.auth()
Regular · 400 Medium · 500
Clerk
Display · 64px · Bold · lh: 72px · ls: −2.24px
Authentication & User Management
Heading XL · 32px · Bold · lh: 35.84px
Add authentication to your app in minutes
Heading Large · 22px · Semibold · lh: 28px
Clerk is the easiest way to add authentication and user management to your application.
Body Large · 20px · Medium · lh: 28px
Pre-built UI components, flexible APIs, and a dashboard to manage your users.
Body Default · 16px · Regular · lh: 24px
Last sign in: 2 minutes ago · Session active on 3 devices
Body Small · 14px · Regular · lh: 24px
AUTH · USERS · SESSIONS · ORGS
Label / Caption · 13px · Semibold · lh: 12px · ls: 0.8px
Line Heights — 14 tokens
Tight
10px
Snug
12px
Normal
13px
Relaxed
14px
Loose
15px
lh-9
22px
lh-10
24px
lh-11
28px
lh-12
35.84px
lh-13
40px
lh-14
72px
Letter Spacing — 9 tokens
Clerk Auth
Tight
−2.24px · large display headings
Secure Sign-In
Normal
−0.48px · standard body text
SESSIONS
ls-8
1px · uppercase micro labels
Spacing
Spacing Scale
65 tokens — 1px → 420.977px
1
1.5
2
3
4
6
7
8
15
16
20
24
28
30
32
36
40
46
48
52
54.5
60
64
72
80
90
106
111
128
384+
Borders
Border Radii — Selected tokens
r16
4px
r19
6px
r20
8px
r21
10px
r22
12px
r23
16px
r28
9999px · Pill
r27
50% · Circle
Border Widths — 3 tokens
--border-width-hairline
0.5px
--border-width-thin
1px · ×170
--border-width-base
2px · ×12
Shadow / Elevation
Shadow Tokens
6 tokens
sm
×28
Layered — ring + spread: modals, overlays, main panels
md
×18
Minimal — 1px + 2px blur: cards, small floating elements
lg
×18
Inner white ring inset — subtle elevated surface
xl
×18
Cyan inner glow inset — brand accent elevated surface
shadow-5
×11
Very subtle white gloss inset — inputs, dark buttons
shadow-6
×10
Ring + 2px drop shadow — light-mode style borders + lift
Z-Index
LayerValueUsage
--z-1-10Background decorations, canvas underlayers
--z-2-1Behind-content elements, decorative shapes
--z-31Base content layer
--z-42Slightly raised base layer
--z-53Raised base, above default stacking
--z-610Sticky headers, navigation bars
--z-720Dropdowns, popovers, tooltips
--z-830Overlays, drawers, sidebars
--z-940Modals, dialogs
--z-1050Toasts, notifications
--z-11100Top-level overlays, critical alerts
Breakpoints
📱
No breakpoints defined
—
The Clerk design system markdown does not define explicit breakpoint tokens. Responsive behavior is handled via component-level logic and CSS Grid / Flexbox without named breakpoint variables.
Opacity
Opacity Tokens
11 tokens — 0.07 → 0.70
Ghost
7% · ×1
Faint
10% · ×10
Dim 13
13% · ×1
Dim 15
15% · ×1
Quarter
25% · ×4
Soft
30% · ×8
Mid-low
35% · ×4
Muted
40% · ×2
Half
50% · ×14
Semi
60% · ×18
Strong
70% · ×6
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-black14.93:1AAA
--color-light-gray--color-dark-gray13.18:1AAA
--color-light-gray--color-white1.41:1Fail
--color-light-gray--color-blue3.19:1AA Large
--color-light-gray--color-blue-24.47:1AA Large
--color-mid-gray--color-black6.99:1AA
--color-mid-gray--color-dark-gray6.17:1AA
--color-mid-gray--color-white3:1AA Large
--color-mid-gray--color-blue1.49:1Fail
--color-mid-gray--color-blue-22.09:1Fail
--color-light-gray-2--color-black10.65:1AAA
--color-light-gray-2--color-dark-gray9.4:1AAA
--color-light-gray-2--color-white1.97:1Fail
--color-blue-3--color-black3.93:1AA Large
--color-blue-3--color-dark-gray3.47:1AA Large
--color-blue-3--color-white5.34:1AA
--color-blue-5--color-black4.03:1AA Large
--color-blue-5--color-dark-gray3.55:1AA Large
--color-blue-5--color-white5.22:1AA
--color-blue-5--color-blue1.16:1Fail
CSS Variables Reference
Background Colors 34 tokens
Pure Black--color-black#000000
Dark Gray--color-dark-gray#131316
White--color-white#FFFFFF
Blue--color-blue#747686
Blue 2--color-blue-2#5E5F6E
Dark Gray 3--color-dark-gray-3#2F3037
White 2--color-white-2#F7F7F8
Dark Gray 4--color-dark-gray-4#212126
Light Gray 3--color-light-gray-3#EEEEF0
Blue 4 (brand)--color-blue-4#6C47FF
Cyan 2--color-cyan-2#5DE3FF
Dark Gray 6--color-dark-gray-6#42434D
White 5--color-white-5#FAFAFB
Blue 16--color-blue-16#615CF6
Dark Blue 2--color-dark-blue-2#0E1A3A
Text & Border Colors 13 tokens
Light Gray--color-light-gray#D9D9DE
Mid Gray--color-mid-gray#9394A1
Light Gray 2--color-light-gray-2#B7B8C2
Blue 3--color-blue-3#696A78
Dark Gray 9--color-dark-gray-9#19191B
Dark Gray 15--color-dark-gray-15#37373C
Light Blue--color-light-blue#9785FF
Blue 14--color-blue-14#3B82F6
Border Subtle--color-dark-gray-13rgba(19,19,22,.075)
Cyan 7 / Border--color-cyan-7#3AD4FD
Light Gray 4--color-light-gray-4#E3E3E7
Mid Gray 4--color-mid-gray-4rgba(94,95,110,.1)
Typography 47 tokens
Base Font--font-family-basegeistNumbers
Mono Font--font-family-2soehneMono
Sans--font-family-3ui-sans-serif
Inter--font-family-4Inter
Regular--font-weight-regular400
W450--font-weight-w450450
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2xs--font-size-2xs8px
xs--font-size-xs9px
sm--font-size-sm10px
base--font-size-base11px
lg--font-size-lg12px
xl--font-size-xl13px
2xl--font-size-2xl14px
3xl--font-size-3xl15px
4xl--font-size-4xl16px
5xl--font-size-5xl17px
6xl--font-size-6xl18px
20px--font-size-20px20px
22px--font-size-22px22px
32px--font-size-32px32px
64px--font-size-64px64px
Tight--letter-spacing-tight-2.24px
Normal--letter-spacing-normal-0.48px
Wide--letter-spacing-wide-0.17px
Wider--letter-spacing-wider-0.14px
Widest--letter-spacing-widest-0.12px
Spacing (selected) 65 tokens
Space 1--space-11px
Space 3--space-32px
Space 8--space-84px
Space 10--space-106px
Space 16--space-168px
Space 80--space-8015px
Space 96--space-9616px
Space 192--space-19220px
Space 256--space-25624px
Space 24--space-2428px
Space 26--space-2632px
Space 29--space-2940px
Space 31--space-3148px
Space 33--space-3354.5px
Space 37--space-3764px
Space 41--space-4180px
Space 52--space-52128px
Space 70--space-70420.977px
Borders & Radius 31 tokens
Hairline--border-width-hairline0.5px
Thin--border-width-thin1px
Base--border-width-base2px
r16--radius-r164px
r19--radius-r196px
r20--radius-r208px
r21--radius-r2110px
r22--radius-r2212px
r23--radius-r2316px
r28 · Pill--radius-r289999px
r27 · Circle--radius-r2750%
Motion, Opacity & Layers 28 tokens
Instant--duration-instant0.15s · ×252
Fast--duration-fast0.2s · ×35
Normal--duration-normal0.3s · ×486
Slow--duration-slow0.45s · ×240
Slower--duration-slower0.5s · ×440
Skeleton / Long--duration-duration-61s · ×168
Ghost--opacity-77%
Faint--opacity-1010%
Quarter--opacity-2525%
Half--opacity-5050%
Strong--opacity-7070%
Background--z-1-10
Below--z-2-1
Base--z-31
Raised Base--z-42
Higher Base--z-53
Navigation--z-610
Popover--z-720
Overlay--z-830
Dialog--z-940
Toast--z-1050
Critical Alert--z-11100
Design System Preview · Clerk (Dark) · Generated 13/04/2026 · 100 color tokens · 15 font-size · 4 font-family · 5 font-weight · 14 line-height · 9 letter-spacing · 65 spacing · 28 radius · 3 border-width · 6 shadow · 6 duration · 11 z-index · 11 opacity · No breakpoints defined