Clerk design system

Clerk's website (clerk.com) uses a light interface with #6c47ff as its primary color and geistNumbers as the main typeface, with soehneMono alongside it. designlang measured 13 font sizes from 9px to 64px, 17 spacing values, 8 corner radii.

Captured 25 June 2026Light UI5,000 elements read

Download tokens Read it yourself

Clerk colors

The brand roles and neutrals clerk.com renders, with how many elements use each one.

Brand colors

Primary#6c47ff5 uses
Secondary#1cc4ff2 uses
Accent#5de3ff2 uses

Neutrals

#d9d9de4,902 uses
#0000004,526 uses
#ffffff176 uses
#131316164 uses
#747686137 uses
#5e5f6e79 uses
#2f303739 uses
#9394a138 uses
#696a7827 uses
#eeeef026 uses

Backgrounds

#f7f7f8
#f8f8f8
#131316
#ffffff
#212126
#2d2e3d
#29292e
#25252a

Text colors

#00000019.61:1 on #f7f7f8
#ffffff1.07:1 on #f7f7f8
#13131617.32:1 on #f7f7f8
#7476864.19:1 on #f7f7f8
#5e5f6e5.88:1 on #f7f7f8
#21212614.97:1 on #f7f7f8
#6c47ff4.92:1 on #f7f7f8
#9394a12.81:1 on #f7f7f8

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 100% of them pass.

Text	Background	Ratio	Result
`#ffffff`	`#6c47ff`	5.27:1	AA
`#ffffff`	`#42434d`	9.81:1	AAA

Clerk fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

geistNumbers: sans, most text (3,943 elements)
soehneMono: mono, body (51 elements)

Body text: 13px at weight 500, line height 24px.

Weights in use: 400, 500, 700, 600, 450.

Type scale

Size	Weight	Line height	Tracking	Used on
64px	700	72px	-1.6px	h1
32px	600	40px	-0.48px	p
24px	700	32px	normal	span, number-flow-react
18px	400	28px	normal	p
17px	700	24px	-0.17px	h2, p, h1
16px	400	24px	normal	html, head, style, meta
15px	450	24px	normal	p
14px	700	20px	-0.14px	h2
13px	500	24px	normal	a, span, svg, path
12px	600	24px	1.2px	button, span, svg, path
11px	400	16px	-0.11px	div, p, span
10px	500	14px	normal	p, div, svg, g

Spacing and radii

Spacing scale

1px
46px
56px
76px
94px
128px
140px
151px
158px
167px
172px
192px
220px
259px

Corner radii

2px
5px
8px
12px
16px
38px
44px
50px

Medium radii lead, with a few larger ones. 57 distinct box shadows.

Motion

The motion reads as mixed.

Durations

xs: 150ms
sm: 200ms
md: 300ms
lg: 450ms
xl: 1000ms

Easing

custom (65 uses): cubic-bezier(0.4, 0.36, 0, 1)
ease-out (46 uses): cubic-bezier(0.33, 1, 0.68, 1)

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

85/100, grade B

Components found: buttons (22), cards (120), links (10), navigation (13), modals (8), badges (8).

By category

Color Discipline	92/100
Typography Consistency	90/100
Spacing System	85/100
Shadow Consistency	50/100
Border Radius Consistency	80/100
Accessibility	100/100
CSS Tokenization	100/100

57 unique shadows — consider a 3-level elevation scale (sm/md/lg)
96 !important rules — prefer specificity over overrides
6012 duplicate CSS declarations

Download the tokens

The files designlang wrote for clerk.com. Run it yourself for a fresh read: npx designlang clerk.com.

The core values as CSS variables

:root {
  --color-primary: #6c47ff;
  --color-secondary: #1cc4ff;
  --color-accent: #5de3ff;
  --color-background: #f7f7f8;
  --color-text: #000000;
  --color-neutral-1: #d9d9de;
  --color-neutral-2: #000000;
  --color-neutral-3: #ffffff;
  --color-neutral-4: #131316;
  --font-primary: "geistNumbers", sans-serif;
  --font-secondary: "soehneMono", monospace;
  --radius-sm: 2px;
  --radius-md: 5px;
  --radius-lg: 8px;
}

Read clerk.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Webflow design system

Light UI, WF Visual Sans Variable, #146ef5

Stripe design system

Light UI, sohne-var, #533afd

Cal.com design system

Light UI, Inter, #0000ee

Tailwind CSS design system

Light UI, inter, #ec0853

Quick answers

What font does Clerk use?

clerk.com sets most of its text in geistNumbers (3,943 elements), with soehneMono alongside it. designlang read this from the computed styles of the live page on 25 June 2026.

What are Clerk's brand colors?

The brand roles on clerk.com are primary #6c47ff, secondary #1cc4ff and accent #5de3ff, on a #f7f7f8 background. The neutrals used most are #d9d9de, #000000 and #ffffff.

How do I use the Clerk design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang clerk.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from clerk.com's public pages on 25 June 2026, so it shows what the site renders, not Clerk's internal source files. Clerk is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of clerk.com on 25 June 2026. Clerk is a trademark of its owner; designlang is not affiliated with it. More: the full Clerk brand kit, the token extraction guide and the markdown version of this page.