# Vercel — Design Reference

> A black triangle on white paper, nothing else to distract

**Theme:** light · **Measured from:** vercel.com (English, 1440 px)

Vercel is black and white with nothing in between. The canvas is a soft off-white (`#fafafa`), type is near-black `#171717` set in Geist, and the only image in the hero is the brand's black triangle, rendered in 3D with a white halo behind it. Headings are large, light (weight 400–450) and pulled extremely tight (`-0.06em`), so words almost touch. Primary actions are black pills; secondary actions are white pills. There is no brand color on the page: proof comes from customer logos in black and from customers' real products shown in white frames that dissolve into the canvas at the bottom. Layout is airy and asymmetric, with headings and supporting text in opposite columns.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Ink | `#171717` | Headlines, primary text, primary button fill |
| Graphite | `#4d4d4d` | Body copy, nav links, gray half of two-tone sentences |
| Gray | `#666666` | Small labels ("Features"), captions |
| Canvas | `#fafafa` | Page background, quiet cards |
| White | `#ffffff` | Secondary buttons, product frames, text on Ink |
| Hairline | `#f2f2f2` | 1px frame borders and dividers |
| Black | `#000000` | Logo and hero triangle only |
| Blue | `#0072f5` | Rare accent (gradient from `#52aeff` with a 1px white grid); not visible in the capture |

**Fade-out frames:** product screenshots end in `linear-gradient(to top, #fafafa 0%, transparent 100%)` so they melt into the page instead of having a bottom edge.

## Typography

**Geist** for everything, **Geist Mono** for technical labels. Both are free on Google Fonts — no substitute needed. If the variable axis isn't available, use 500 for 450.

- Headings are **light**: 400 for the hero, 450 for section headings. Never bold.
- Tracking is extreme: `-0.06em` on 56–64px, `-0.04em` on 24px, `-0.02em` on 16px leads.
- Line height on big headings is exactly 1.0.
- Body and UI stay at 14px; the page has very little long text.

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display | 64px | 400 | 1 | -3.84px |
| Heading | 56px | 450 | 1 | -3.36px |
| Subheading | 24px | 450 | 1.33 | -0.96px |
| Body large | 16px | 450 | 1.5 | -0.32px |
| Button | 16px | 500 | 1.5 | 0 |
| Body | 14px | 400 | 1.43 | 0 |
| Button small | 14px | 500 | 1.43 | 0 |
| Small | 13px | 400 | 1.38 | 0 |
| Label | 11px | 500 | 1.82 | 0.2px |

**Two-tone sentence:** in feature sections, a 24px line where the claim is Ink and the rest is Graphite — "**Notion powers millions** of agent conversations daily on Vercel."

## Shape and spacing

- **Hero buttons:** full pill, 40px tall.
- **Nav buttons, cards, inputs:** 6px radius, 32px tall controls.
- **Product frames:** 4–6px radius with a 1px `#f2f2f2` border.
- **Base unit:** 4px. Scale: 4, 8, 12, 16, 20, 24, 48, 96, 240.
- **Content width:** full viewport with 24px side gutters (about 1392px at 1440).
- **Section gap:** very large, roughly 240px between sections (estimated from the screenshot).
- **Shadows:** none on components; depth comes only from the hero triangle's rendered halo.

## Components

### Primary button
Ink `#171717` fill, white text, full pill, padding `0 12px` (visually ~18px with the label), 40px tall, Geist 500 at 16px. No border, no shadow. Label: "Deploy now". In the nav, the same black at 6px radius and 32px tall: "Sign Up".

### Secondary button
White `#ffffff` fill, Ink text, same pill shape and size, with a very faint gray ring (drawn as a box-shadow). Label: "Talk to sales". In the nav: white, 6px radius, 32px tall — "Get a Demo", "Log In".

### Navigation
Transparent over Canvas, no border. Black triangle logo far left, then Products ⌄, Resources ⌄, Enterprise, Pricing in Graphite 14px. Right: two white 6px-radius buttons and the black "Sign Up".

### Hero triangle
A single large black 3D triangle centered on the page, with a soft white radial halo behind it and a blurred shadow beneath. It is the only illustration on the page.

### Customer showcase
Section heading (56px, two lines) on one side; on the other, a white product frame from a real customer (Notion chat, Zapier landing) that fades into Canvas at the bottom. Opposite column: a two-tone 24px sentence, then a "Features" label in Gray and a short list of 14px Ink product names. Alternates sides from section to section.

### Logo rail
Six customer logos in black, evenly spread across the full width, no caption.

## Do

- Keep the page strictly monochrome: Ink on off-white.
- Set headings light (400–450) with very tight tracking and line height 1.
- Use black pills for primary actions and white pills for secondary.
- Show customers' real products in frames that fade into the background.
- Leave large empty space between sections.
- Use Geist and Geist Mono only.

## Don't

- Don't introduce a brand color for buttons or headings.
- Don't bold headings.
- Don't add drop shadows to cards or buttons.
- Don't box sections in colored bands.
- Don't use pure black for text; reserve `#000000` for the triangle.
- Don't use illustrations or icons as decoration.

## Layout

Three-column hero: left, a two-line 64px headline with the button pair; center, the 3D triangle; right, three short 14–16px lines ("For coding agents / To ship apps and agents / Automated by agents"). A full-width logo rail, then alternating customer showcase sections whose headings switch between left and right columns. Everything aligns to 24px edge gutters rather than a narrow centered column.

## Agent prompt guide

- Text: `#171717` · Body: `#4d4d4d` · Labels: `#666666`
- Canvas: `#fafafa` · Frames: `#ffffff` · Borders: `#f2f2f2`
- Action: `#171717` pill with white text · Secondary: `#ffffff` pill with `#171717` text

Example prompts:

1. "Primary button: pill (9999px radius), background #171717, white text, Geist 500 16px, height 40px, horizontal padding 18px, no border, no shadow; next to it a white pill with #171717 text and a faint gray ring."
2. "Section heading: Geist 450 56px, line-height 1, letter-spacing -3.36px, color #171717, on #fafafa, broken over two lines, left column."
3. "Customer showcase: white product screenshot frame with 6px radius and 1px #f2f2f2 border, bottom fading into #fafafa; beside it a 24px Geist 450 sentence with the first clause in #171717 and the rest in #4d4d4d, then a 'Features' label in #666666 and four 14px items in #171717."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-ink: #171717;
  --color-graphite: #4d4d4d;
  --color-gray: #666666;
  --color-canvas: #fafafa;
  --color-white: #ffffff;
  --color-hairline: #f2f2f2;
  --color-black: #000000;
  --color-blue: #0072f5;

  /* Fonts */
  --font-sans: 'Geist', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'Geist Mono', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 64px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -3.84px;
  --text-display--font-weight: 400;
  --text-heading: 56px;
  --text-heading--line-height: 1;
  --text-heading--letter-spacing: -3.36px;
  --text-heading--font-weight: 450;
  --text-subheading: 24px;
  --text-subheading--line-height: 1.33;
  --text-subheading--letter-spacing: -0.96px;
  --text-subheading--font-weight: 450;
  --text-body-lg: 16px;
  --text-body-lg--line-height: 1.5;
  --text-body-lg--letter-spacing: -0.32px;
  --text-body-lg--font-weight: 450;
  --text-button: 16px;
  --text-button--line-height: 1.5;
  --text-button--font-weight: 500;
  --text-body: 14px;
  --text-body--line-height: 1.43;
  --text-body--font-weight: 400;
  --text-button-sm: 14px;
  --text-button-sm--line-height: 1.43;
  --text-button-sm--font-weight: 500;
  --text-small: 13px;
  --text-small--line-height: 1.38;
  --text-small--font-weight: 400;
  --text-label: 11px;
  --text-label--line-height: 1.82;
  --text-label--letter-spacing: 0.2px;
  --text-label--font-weight: 500;

  /* Radius */
  --radius-buttons: 9999px;
  --radius-inputs: 6px;
  --radius-cards: 6px;
  --radius-tags: 6px;

  /* Spacing */
  --spacing: 4px;

  /* Layout */
  --container-page: 1392px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink: #171717;
  --color-graphite: #4d4d4d;
  --color-gray: #666666;
  --color-canvas: #fafafa;
  --color-white: #ffffff;
  --color-hairline: #f2f2f2;
  --color-black: #000000;
  --color-blue: #0072f5;

  /* Fonts */
  --font-sans: 'Geist', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'Geist Mono', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 64px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -3.84px;
  --text-display--font-weight: 400;
  --text-heading: 56px;
  --text-heading--line-height: 1;
  --text-heading--letter-spacing: -3.36px;
  --text-heading--font-weight: 450;
  --text-subheading: 24px;
  --text-subheading--line-height: 1.33;
  --text-subheading--letter-spacing: -0.96px;
  --text-subheading--font-weight: 450;
  --text-body-lg: 16px;
  --text-body-lg--line-height: 1.5;
  --text-body-lg--letter-spacing: -0.32px;
  --text-body-lg--font-weight: 450;
  --text-button: 16px;
  --text-button--line-height: 1.5;
  --text-button--font-weight: 500;
  --text-body: 14px;
  --text-body--line-height: 1.43;
  --text-body--font-weight: 400;
  --text-button-sm: 14px;
  --text-button-sm--line-height: 1.43;
  --text-button-sm--font-weight: 500;
  --text-small: 13px;
  --text-small--line-height: 1.38;
  --text-small--font-weight: 400;
  --text-label: 11px;
  --text-label--line-height: 1.82;
  --text-label--letter-spacing: 0.2px;
  --text-label--font-weight: 500;

  /* Radius */
  --radius-buttons: 9999px;
  --radius-inputs: 6px;
  --radius-cards: 6px;
  --radius-tags: 6px;

  /* Spacing */
  --spacing: 4px;

  /* Layout */
  --container-page: 1392px;
}
```

---

*Measured from https://vercel.com/ on 2026-10-28 by Faundr. Inspired by Vercel; not its official design system and not affiliated with Vercel.*