Home
DESIGN.mdStar on GitHub

Clerk

Authentication infrastructure for developers — drop-in components that handle the full user management lifecycle.

Colors
Brand
primary#6C47FF
primary-hover#5A38E8
cyan#5DE3FF
Surfaces
background#FFFFFF
surface#FAFAFA
surface-secondary#F4F4F5
border#E4E4E7
Text
text-primary#09090B
text-secondary#71717A
text-muted#A1A1AA
Semantic
error#EF4444
success#22C543
warning#F36B16
Typography
heading-xl
28px · 700
Sign in to Acme
heading-lg
22px · 600
User management
heading-md
16px · 600
Security settings
body
14px · 400
Standard body text for interface copy and descriptions
body-sm
13px · 400
Secondary information, metadata, timestamps
caption
12px · 400
Timestamps, helper text, supporting copy
label
12px · 500
Email address
code
13px · mono
pk_live_abc123xyz
Components
<SignIn /> component
Buttons
User button
JD
Jane Doe
A
Acme Corp
Role badges
Admin Member Active Pending
Input states
Must be at least 8 characters
Spacing
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-10
40px
space-12
48px
Guardrails
DO
Use violet only for the single primary action per view
Keep sign-in flows distraction-free — minimal chrome, no decorative backgrounds
Show accessible error messages with clear remediation steps
Use consistent 36–40px height for all interactive elements
Maintain 4.5:1 minimum contrast for all text
DON'T
Place more than one primary button on a screen
Show raw technical errors or stack traces to end users
Use animations that block the form from becoming interactive
Use uppercase labels or decorative font treatments
Add gradient backgrounds or heavy shadows to auth cards
Copied!