# Clerk design system: colors, fonts and tokens

> 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.

Source: https://clerk.com, captured 25 June 2026. Page: https://designlang.app/design-system/clerk

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#6c47ff` | 5 |
| Secondary | `#1cc4ff` | 2 |
| Accent | `#5de3ff` | 2 |

Neutrals: `#d9d9de`, `#000000`, `#ffffff`, `#131316`, `#747686`, `#5e5f6e`, `#2f3037`, `#9394a1`, `#696a78`, `#eeeef0`

Backgrounds: `#f7f7f8`, `#f8f8f8`, `#131316`, `#ffffff`, `#212126`, `#2d2e3d`, `#29292e`, `#25252a`

## Fonts

- geistNumbers (sans), 3943 elements
- soehneMono (mono), 51 elements

## 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 |
| 9px | 500 | 12px | normal | p |

## Spacing

1px, 46px, 56px, 76px, 94px, 128px, 140px, 151px, 158px, 167px, 172px, 192px, 220px, 259px, 272px, 302px, 320px

## Radii

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

## Motion

Feel: mixed. Durations: 150ms, 200ms, 300ms, 450ms, 1000ms.

## Audit

Overall 85/100 (grade B).

- 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

## CSS variables

```css
: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;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/clerk-com/clerk-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/clerk-com/clerk-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/clerk-com/clerk-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/clerk-com/clerk-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/clerk-com/clerk-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/clerk-com/clerk-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/clerk-com/clerk-com-DESIGN.md)

Regenerate: `npx designlang clerk.com`