# Vercel design system: colors, fonts and tokens

> Vercel's website (vercel.com) uses a light interface with #0068d6 as its primary color and Geist as the main typeface, with Geist Mono alongside it. designlang measured 15 font sizes from 6px to 48px, 13 spacing values, 9 corner radii.

Source: https://vercel.com, captured 21 May 2026. Page: https://designlang.app/design-system/vercel

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#0068d6` | 4 |
| Secondary | `#52aeff` | 4 |
| Accent | `#0070f3` | 3 |

Neutrals: `#171717`, `#ebebeb`, `#4d4d4d`, `#ffffff`, `#666666`, `#000000`, `#7d7d7d`, `#a8a8a8`, `#8f8f8f`, `#ebf5ff`

Backgrounds: `#fafafa`, `#ffffff`

## Fonts

- Geist (sans), 2877 elements
- Geist Mono (mono), 240 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 48px | 600 | 48px | -2.28px | h1, h3, span, div |
| 40px | 600 | 48px | -2.4px | h2 |
| 32px | 400 | 48px | -1.28px | span, img, h3, p |
| 24px | 600 | 32px | -0.96px | h3, p, span, div |
| 20px | 400 | 36px | normal | p |
| 18px | 400 | 28px | normal | div, p, li, span |
| 16px | 400 | 24px | normal | html, head, style, meta |
| 14px | 400 | 14px | normal | button, span, svg, path |
| 13px | 500 | 20px | normal | div, ul, li, pre |
| 12px | 400 | 16px | normal | p, span, li, svg |
| 9.5px | 400 | 14.25px | normal | span |
| 8px | 600 | 8px | normal | span |
| 7.75px | 400 | 11.625px | normal | span |
| 7px | 700 | 7px | normal | span |
| 6px | 400 | 9px | normal | span |

## Spacing

1px, 24px, 32px, 36px, 40px, 44px, 48px, 85px, 90px, 96px, 135px, 144px, 161px

## Radii

2px, 5px, 8px, 16px, 32px, 50px, 64px, 99px, pill

## Motion

Feel: springy. Durations: 90ms, 160ms, 300ms.

## Audit

Overall 78/100 (grade C).

- Color Discipline: 80/100
- Typography Consistency: 82/100
- Spacing System: 85/100
- Shadow Consistency: 78/100
- Border Radius Consistency: 80/100
- Accessibility: 67/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #0068d6;
  --color-secondary: #52aeff;
  --color-accent: #0070f3;
  --color-background: #fafafa;
  --color-text: #171717;
  --color-neutral-1: #171717;
  --color-neutral-2: #ebebeb;
  --color-neutral-3: #4d4d4d;
  --color-neutral-4: #ffffff;
  --font-primary: "Geist", sans-serif;
  --font-secondary: "Geist Mono", monospace;
  --radius-sm: 2px;
  --radius-md: 5px;
  --radius-lg: 8px;
}
```

## Downloads

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

Regenerate: `npx designlang vercel.com`