Clerk Design System Reference

Foundation

Color Tokens

The full color palette from Clerk's design system, including brand primaries, accent colors, neutrals, and surfaces supporting a dark-mode-first aesthetic.

Canvas

#131316

Page background · Primary dark surface

Primary

#212126

Primary CTA · Brand accent · Cards

Accent Gray 2

#42434D

Secondary buttons · Mid-tone accent

Link

#561EE3

Hyperlinks · Focus ring · Link states

Accent Cyan

#5DE3FF

Decorative · Hero accents · Visual flourishes

Accent Violet

#6C47FF

Decorative · Hero gradients · Brand personality

Accent Light Purple

#9785FF

Decorative · Subtle accent layers

On Primary

#FFFFFF

Headings · Primary text · High contrast

Body

#B7B8C2

Body copy · Standard text on dark

Muted

#9394A1

Captions · Secondary text · De-emphasized

Faint

#747686

Placeholders · Minimal weight · Tertiary text

Hairline

#EEEEF0

1px borders · Delicate strokes · Dividers

Surface Alt

#F7F7F8

Light sections · Inverted contexts · Hero bands

Typography

Type Scale

Inter for UI and body text with aggressive negative tracking on display sizes. JetBrains Mono for code, technical content, and snippets.

Primary Inter UI · Headings · Body · Buttons · Labels

Monospace JetBrains Mono Code · Token values · Technical metadata

Display XL Build what matters 64px · 700 · −2.24px

Display LG The quick brown fox 56px · 700 · −1.96px

Heading MD The quick brown fox jumps 32px · 600 · −0.48px

Heading SM The quick brown fox jumps 24px · 600 · −0.24px

Heading XS The quick brown fox jumps 13px · 500 · 1.54

Body LG The quick brown fox jumps over the lazy dog 18px · 400 · 1.55

Body MD The quick brown fox jumps over the lazy dog 15px · 400 · 1.87

Body SM The quick brown fox jumps over the lazy dog 13px · 400 · 1.54

Button XL Get started now 16px · 400 · 1.5

Button LG Learn more 15px · 500 · 1.6

Button MD Submit 14px · 450 · 1.43

Label MD Email Address 13px · 600 · 1.54

Caption MD Secondary caption text 12px · 400 · 1.33

Code MD const token = '#561EE3'; 13px · 400 · monospace

Layout

Spacing & Shapes

Spacing system based on 4px and 8px increments for consistent, scalable layouts. Border radii range from sharp (0px) to pill-shaped (9999px) by component context.

Spacing Scale

4px xxs

8px xs

12px sm

16px md

20px lg

24px xl

32px xxl

40px xxxl

48px section

64px band

Border Radius

None 0px

XS 4px

SM 6px

MD 8px

LG 12px

XL 16px

Full 9999px

Shadows

Flat No elevation

Micro Secondary buttons

Base Primary buttons

Elevated Floating panels

Border Widths

Thin 1px

Opacity

Full 100%

Muted 60%

Disabled 40%

Light 15%

Subtle 10%

Z-index / Layering

Base 1–7

Dropdown 10

Modal 1000+

Elevation

Depth & Surfaces

Three dark surface levels establish spatial hierarchy. Canvas (L0) → Primary (L1) → Accents (L2) — each step communicates depth through layered shadows and subtle color shifts.

Canvas

Base layer — the primary dark surface all content sits upon

L0 · #131316

Primary

Elevated containers — cards, panels, and modal backgrounds

L1 · #212126

Accent Gray 2

Secondary surface — inputs, nested elements, secondary buttons

L2 · #42434D

Canvas #131316

Primary #212126

Secondary #42434D

Link #561EE3

Light Alt #F7F7F8

Components

Component Library

Core interactive elements rendered at exact design-system specifications — colors, radii, layered shadows, and interaction states.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #212126 bg · pill-shaped (9999px) · 40px height · 16px text weight 400. Secondary: #42434D bg · sm radius (6px) · 30px height. Ghost: transparent with overlay background. All use layered shadows for subtle depth.

Text Input

Form control — Default and Focused states

.input

Default: #131316 bg · #42434D border · 6px radius · 40px height · 15px body text. Focus: #561EE3 border · 2px weight · 3px focus ring with 15% opacity. Placeholder color: #747686.

Card

Content container — elevated surface with layered shadow

.card

Get started with Clerk

Secure authentication and user identity management for modern applications.

#212126 bg · rgba(255,255,255,.08) border · 8px radius · multi-layer shadow. Title: 14px/600/#FFFFFF. Body: 13px/#9394A1. CTA: primary pill button.

Badges

Status indicators — Text-style badges with pill shape

.badge

Active Inactive Preview

12px/500 · 6px padding · pill-shaped (9999px). All use #561EE3 background on dark surfaces. Badges are text-driven status indicators with minimal visual weight.

Guidelines

Do's & Don'ts

Principles for consistent application of the Clerk design language across surfaces and contexts.

Do — Embrace

Use pill-shaped buttons (#9999px radius) for primary CTAs
Apply layered-micro shadows instead of bold drop shadows
Leverage aggressive negative tracking on display typography (−2.24px on Display XL)
Maintain the three-level surface hierarchy (Canvas → Primary → Secondary)
Reserve decorative accents (Cyan, Violet) for hero sections and visual flourishes
Use the spacing scale consistently (multiples of 4px or 8px)
Group form fields with clear labels and consistent spacing (16–24px)
Apply focus-visible states with #561EE3 outline for accessibility

Don't — Avoid

Don't use bold, single drop shadows; layer subtle shadows instead
Don't invent semantic status colors (error, success, warning); none are defined
Don't over-round corners on secondary elements (use 6px, not 9999px)
Don't apply decorative colors to functional semantics
Don't tighten line-height on body text below 1.5; readability suffers
Don't use Link Purple (#561EE3) for primary CTAs; it signals navigation
Don't stack more than three surface levels in a single component
Don't ignore responsive breakpoints; section padding and heading sizes shift

Clerk

Preview

Remixes of Clerk