Vercel PlatformSolutionsUse CasesResources Schedule a Demo

Typeset terminal on white

#ffffff

Paper

#000000

Ink

#666666

Ash

Vercel

Visit ↗

Typeset terminal on white paper

A developer marketing site that reads like a well-printed technical journal: pure white paper, geometric grotesque, jet-black type, and a single black CTA. Diagrams and code blocks are the decoration. No brand color — the brand is the discipline.

https://vercel.com

Color Palette

NEUTRALS

Paper

#ffffff

--color-paper

Page background

Ink

#000000

--color-ink

Text, primary CTA

Ash

#666666

--color-ash

Secondary text

Hairline

#eaeaea

--color-hairline

Border, divider

Fog

#fafafa

--color-fog

Code block background

Typography

Type Scale

Minor Third (1.2) from 16px base

display

72px · 600 · 1.05

The quick brown fox jumps

heading-lg

48px · 600 · 1.1

The quick brown fox jumps

heading

32px · 600 · 1.2

The quick brown fox jumps

subheading

20px · 500 · 1.35

The quick brown fox jumps

body

16px · 400 · 1.55

The quick brown fox jumps

code

14px · 400 · 1.5

The quick brown fox jumps

Fonts

display Geist Sans

Weights 500, 600, 700

Sizes 20–72px

Line-height 1.05–1.35

Letter-spacing -0.03em

Fallback Inter, -apple-system, Söhne

Geometric grotesque tuned for tight tracking.

body Geist Sans

Weights 400, 500

Sizes 14–18px

Line-height 1.5–1.6

Letter-spacing -0.01em

Fallback Inter, -apple-system

Same family, tighter grades.

code Geist Mono

Weights 400

Sizes 13–14px

Line-height 1.5

Letter-spacing 0

Fallback JetBrains Mono, ui-monospace

Code blocks and inline snippets.

Spacing & Shape

Spacing

space-2

8px

Inline gap

space-4

16px

Component padding

space-6

24px

Card padding

space-12

48px

Block gap

space-24

96px

Section gap

Radii

radius-sm

6px

Buttons, inputs

radius-md

8px

Cards, code blocks

Guidelines

The interface is monochrome. Any color introduced is treated as data, not brand.
Body copy sits at 16px/1.55 minimum. Never smaller.
Diagrams use black lines on white — no fills, no gradients.
CTA is a solid black pill on white. Ghost variant is white on black.

More like this

AI for Business

Brutalist editorial showroom on warm gray

Reflect Notes

Starlit violet cosmos — a dark editorial notebook

dope.security

Midnight terminal with violet phosphor accents

Hungry Tiger

Turmeric-bright graffiti on a warm cream wall

Apple

White room with a single blue accent

Notion

Warm paper notebook under morning light

# Vercel — Style Reference
> Typeset terminal on white paper

**Theme:** light

A developer marketing site that reads like a well-printed technical journal: pure white paper, geometric grotesque, jet-black type, and a single black CTA. Diagrams and code blocks are the decoration. No brand color — the brand is the discipline.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Paper | `#ffffff` | `--color-paper` | Page background |
| Ink | `#000000` | `--color-ink` | Text, primary CTA |
| Ash | `#666666` | `--color-ash` | Secondary text |
| Hairline | `#eaeaea` | `--color-hairline` | Border, divider |
| Fog | `#fafafa` | `--color-fog` | Code block background |

## Tokens — Typography

**Scale:** Minor Third (1.2), base 16px

| Step | Size | Weight | Line-height |
|------|-----:|-------:|------------:|
| display | 72px | 600 | 1.05 |
| heading-lg | 48px | 600 | 1.1 |
| heading | 32px | 600 | 1.2 |
| subheading | 20px | 500 | 1.35 |
| body | 16px | 400 | 1.55 |
| code | 14px | 400 | 1.5 |

### Fonts
- **DISPLAY — Geist Sans** · weights 500, 600, 700 · sizes 20–72px · line-height 1.05–1.35 · letter-spacing -0.03em
  - Fallback: Inter, -apple-system, Söhne
  - Geometric grotesque tuned for tight tracking.
- **BODY — Geist Sans** · weights 400, 500 · sizes 14–18px · line-height 1.5–1.6 · letter-spacing -0.01em
  - Fallback: Inter, -apple-system
  - Same family, tighter grades.
- **CODE — Geist Mono** · weights 400 · sizes 13–14px · line-height 1.5 · letter-spacing 0
  - Fallback: JetBrains Mono, ui-monospace
  - Code blocks and inline snippets.

## Tokens — Spacing & Shape

| Name | Value | Role |
|------|-------|------|
| `space-2` | 8px | Inline gap |
| `space-4` | 16px | Component padding |
| `space-6` | 24px | Card padding |
| `space-12` | 48px | Block gap |
| `space-24` | 96px | Section gap |
| `radius-sm` | 6px | Buttons, inputs |
| `radius-md` | 8px | Cards, code blocks |

## Guidelines

- The interface is monochrome. Any color introduced is treated as data, not brand.
- Body copy sits at 16px/1.55 minimum. Never smaller.
- Diagrams use black lines on white — no fills, no gradients.
- CTA is a solid black pill on white. Ghost variant is white on black.