Clerk
clerk.comThe reference for auth-platform / dev-tools at peak monochrome restraint — pure black on white, Suisse + Geist Numbers + Söhne Mono, letter-reveal hero animation.
Design tokens
- display
- ui-sans-serif, system-ui, sans-serif
- body
- geistNumbers, suisse, 'suisse Fallback'
- mono
- soehneMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas
Do / Don't
Reference it for
- Pure black + pure white extreme monochrome for dev-tools
- Three premium foundries: Suisse Int'l + Geist Numbers + Söhne Mono
- Geist Numbers as tabular-numeral font for technical accuracy (pricing, code, IDs)
- 5 weights including 450 (unusual intermediate weight on variable axis)
- 5 keyframes including letter-reveal — distinctive hero text animation
- 22-property Tailwind transition for catch-all hover at 0.5s
- Smooth out-cubic curve cubic-bezier(0.33, 1, 0.68, 1) at 0.45s as workhorse
- Max-rounded pill workhorse (106 hits) — dominant radius pattern
Do not copy
- The Suisse Int'l / Geist Numbers / Söhne Mono licences (three paid foundries)
- The Clerk logotype
- The "More than authentication" copy
- The OneTrust cookie consent modal — Clerk-blocked first interaction
- The Tailwind 22-property transition: all pattern — too broad
Signature moves
extreme black-on-white monochrome with dark-flip cards
pure black on white at peak restraint, punctuated by dark-mode-flip cards (in #2f3037 / #131316 / #212126) sitting on the white page for contrast, within a 1280px container.
letter-reveal hero animation
a distinctive letter-reveal keyframe animates the hero headline (one of 5 keyframes), giving the headline a signature arrival.
max-pill workhorse radius with smooth out-cubic hovers
a max-rounded pill is the dominant radius (106 hits) with 6px and 8px secondary radii, and hovers run a smooth out-cubic curve (cubic-bezier(0.33,1,0.68,1)) at 0.45s, three premium foundries (Suisse + Geist Numbers + Söhne Mono) carrying type with Geist Numbers for tabular figures.
Related references
Clickup
strongSaas Product
The reference for a saturated-purple SaaS AI agent platform: 76px Plus Jakarta Sans display, 60 CSS keyframes, rotating gradient borders, and elastic overshoot motion.
Adaline
strongDeveloper Tool
an AI-infra product site that swaps the genre's default dark-neon for a hand-built 3D Japanese-garden world, then runs warm earth tones, a grotesque/mono type pair and patient scroll-reveal motion over the top so a developer tool feels like a calm place.
Cal Com
strongDeveloper Tool
The reference for open-source dev-tools brand at peak typographic confidence — Cal Sans 64px H1 on pure white, real booking widget in hero, prestige customer logos.
Dub
strongDeveloper Tool
The reference for open-source link-attribution platform — pure black/white monochrome with Satoshi + Inter, real dashboard hero, dotted-grid integration map, 48-keyframe motion library.