Clerk

Clerk sets large geistNumbers headlines in a heavy weight with tight tracking on a light bone white canvas. Ash (#42434d) is reserved for actions, on buttons with 6px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 3.35544e+07px, with 6px and 8px on smaller elements.

clerk.com ↗

Colors

Ash

#42434d

Primary actions and links

Bone White

#ffffff

Secondary accent and highlights

Deep Bone White

#f7f7f8

Page canvas

Void

#000000

Headlines and body copy

Soft Void

#131316

Surface or divider

Graphite

#212126

Supporting colour

Soft Ash

#747686

Supporting colour

Ash 2

#5f5f6f

Supporting colour

Bone White 2

#f7f7f7

Surface or divider

Type scale

DisplayEverything you need for authenticationgeistNumbers · 56px · 700

HeadingAccountui-sans-serif · 17px · 700

SubheadingMultifactor AuthenticationgeistNumbers · 13px · 500

BodyMore than APIs. The complete user layer for modern apps.geistNumbers · 18px · 400

NavPricinggeistNumbers · 16px · 400

Buttons

Skip to main contentClerk raises $50m Series CLearNext.jsReact

Style reference measured from the public page at clerk.com on 2026-10-12 for design education. Clerk and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Clerk — Style Reference
> Clerk sets large geistNumbers headlines in a heavy weight with tight tracking on a light bone white canvas. Ash (#42434d) is reserved for actions, on buttons with 6px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 3.35544e+07px, with 6px and 8px on smaller elements.

**Theme:** light · **Source:** https://clerk.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ash | `#42434d` | `--color-accent` | Primary actions and links |
| Bone White | `#ffffff` | `--color-secondary` | Secondary accent and highlights |
| Deep Bone White | `#f7f7f8` | `--color-canvas` | Page canvas |
| Void | `#000000` | `--color-ink` | Headlines and body copy |
| Soft Void | `#131316` | `--color-surface-1` | Surface or divider |
| Graphite | `#212126` | `--color-surface-2` | Supporting colour |
| Soft Ash | `#747686` | `--color-surface-3` | Supporting colour |
| Ash 2 | `#5f5f6f` | `--color-surface-4` | Supporting colour |
| Bone White 2 | `#f7f7f7` | `--color-surface-5` | Surface or divider |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | geistNumbers | 56px | 700 | 1.14 | -0.035em |
| Heading | ui-sans-serif | 17px | 700 | 1.41 | -0.010em |
| Subheading | geistNumbers | 13px | 500 | 1.85 | 0 |
| Body | geistNumbers | 18px | 400 | 1.55 | 0 |
| Nav | geistNumbers | 16px | 400 | 1.50 | 0 |

Font families on the page: geistNumbers, soehneMono, ui-sans-serif. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 3.35544e+07px, 6px, 8px, 4px, 16px
- Primary button: background `#42434d`, text `#ffffff`, radius 6px, padding 0px 12px, 13px / 500

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer