# Vercel design system

> Captured from https://vercel.com/ on 2026-10-05 by Brooks New Media (https://design.brooksnewmedia.com/styles/vercel/). An independent analysis for reference: Vercel and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

Vercel's page is grayscale end to end: a #fafafa ground, #171717 ink, a #4d4d4d secondary grey, and no brand hue at all. Headlines in Geist run large at 64px and regular weight with tight tracking, while interface copy sits at 14px. Primary actions are black, secondary ones are white with a 1px grey ring drawn as a box shadow, and a single black triangle anchors the hero.

- Theme: light
- Mood: light, monochrome, developer
- Category: Developer platform

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#fafafa` | The page ground |
| Text | `#171717` | Primary ink, 17.2:1 on the background |
| Muted text | `#4d4d4d` | Supporting copy, 8.1:1 on the background |
| Accent | `#171717` | Primary actions; this system has no brand hue in its controls |

Full palette, most used first: `#fafafa`, `#171717`, `#4d4d4d`.

## Typography

- **GeistSans**: display and body, 100% of the text. Use Geist. Geist is free under the SIL Open Font License, so use it directly.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | GeistSans | 64px | 400 | 1 | -0.06em |
| Heading | GeistSans | 56px | 450 | 1 | -0.06em |
| Subheading | GeistSans | 24px | 450 | 1.33 | -0.04em |
| Body | GeistSans | 14px | 500 | 1.43 | 0 |

Sizes in use, largest first: 64px, 56px, 24px, 16px, 14px.

## Spacing

Values sit on a 4px grid.
Values in use: 3px, 6px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 44px.

## Shape

Corner radii, smallest first: 6px, pill (9999px).

Shadows, most used first:

- `rgb(235, 235, 235) 0px 0px 0px 1px`

## Components

### Primary button ("Sign Up")

- Fill: #171717
- Text: #ffffff, 14px at weight 500
- Border: none
- Corner: 6px
- Height: 32px, padding 0px 6px

### Secondary button ("Get a Demo")

- Fill: #ffffff
- Text: #171717, 14px at weight 500
- Border: none
- Ring or shadow: `rgb(235, 235, 235) 0px 0px 0px 1px`
- Corner: 6px
- Height: 32px, padding 0px 6px

## Do

- Stay in grayscale and let black be the action color.
- Draw outline buttons with a 1px ring rather than a border.
- Keep headlines at regular weight and track them tight.

## Don't

- Introduce a brand hue for buttons or links.
- Use pure white for the page: it sits at #fafafa.
- Reach for heavy weights to make a headline land.

## CSS variables

```css
:root {
  --color-background: #fafafa;
  --color-text: #171717;
  --color-text-muted: #4d4d4d;
  --color-accent: #171717;
  --font-display: "GeistSans", "Geist", system-ui, sans-serif;
  --text-display: 64px;
  --weight-display: 400;
  --font-heading: "GeistSans", "Geist", system-ui, sans-serif;
  --text-heading: 56px;
  --weight-heading: 450;
  --font-subheading: "GeistSans", "Geist", system-ui, sans-serif;
  --text-subheading: 24px;
  --weight-subheading: 450;
  --font-body: "GeistSans", "Geist", system-ui, sans-serif;
  --text-body: 14px;
  --weight-body: 500;
  --space-1: 3px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 44px;
  --radius-1: 6px;
  --radius-2: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-05.