DESIGN.md · measured October 21, 2026

Vercel design system

Dark monochrome interface measured from vercel.com: GeistSans type, tonal surfaces and 6px corners.

Background: #000000
Primary: #EDEDED
Type: GeistSans
Corners: 6px

Download DESIGN.md

From vercel.com ↗ · 360 elements at 1440×900 and 390×844 · Independent analysis, not affiliated with Vercel

Vercel colors

9 roles measured on the page, grouped by where each color is used.

Surfaces

Near Black#000000background · --tw-mask-bottom-from-colorPage background · 5×

Near Black#0A0A0Asurface-container-lowRaised areas one step from the page · 11×

Graphite#262626surface-containerCards and panels · 4×

Text

Mist#EDEDEDon-surfacePrimary text and headings · 51×

White#FFFFFFon-surface-strongHeadings and emphasis · 3×

Gray#A1A1A1on-surface-variantSecondary text · 92×

Gray#8F8F8Fon-surface-mutedMuted text and metadata · 3×

Near Black#0A0A0Aon-primaryText and icons on primary

Accents

Mist#EDEDEDprimaryPrimary buttons and calls to action · 68×

Vercel fonts

2 families.

AaGeistSansWeights 400, 450, 500GeistSans, GeistSans Fallback

AaGeist MonoMonospace · Weights 500Geist Mono, ui-monospace, SFMono-Regular, Menlo

headline-displayPage title (h1)Vercel64px · 400 · 1 · -0.06em
mobile 48px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog56px · 450 · 1 · -0.06em

body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1.5

body-lgLead paragraphsThe quick brown fox jumps over the lazy dog24px · 450 · 1.33 · -0.04em

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog16px · 500 · 1.5

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog14px · 400 · 1.43

codeCode and technical valuesconst ready = true;12px · 500 · 1.67

Contrast

Text on #000000

AaAAA17.9:1

AaAAA21.0:1

AaAAA8.1:1

AaAA6.5:1

Spacing

No strict grid · 15% are multiples of 4px

xs2px

sm6px

md12px

lg20px

xl40px

gutter20px

Breakpoints: 401px 600px 601px 880px 960px 961px 992px 1024px 1200px 1400px 1600px

Shapes

Corner radii, most used first.

md6px · 24×

lg20px · 24×

sm4px · 4×

Depth

Shadow

Ring

Inset

Ring

Components

Rebuilt from the measured CSS.

button-primaryFilled button · hover to see the measured hover state

Get a Demo

button-outlineOutlined button · hover to see the measured hover state

Products

button-ghostText button

Inline link

linkInline link

Motion

Interface transitions

0.1s0.15s0.2s0.5s

cubic-bezier(0.4, 0, 0.2, 1)ease

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

Use #000000 for the page and lift surfaces in small steps: #0A0A0A, #262626.
Keep text in 4 levels: #EDEDED, #FFFFFF, #A1A1A1, #8F8F8F.
Let contrast carry emphasis; primary actions use #EDEDED on #000000.
Set headlines in GeistSans with tight tracking (-0.06em).
Reuse the measured spacing steps (6px, 12px, 20px).
Use 6px corners on most elements; larger surfaces also use 20px and 4px.
Use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
Introduce new font families beyond GeistSans and Geist Mono.
Add saturated accent colors; the measured palette is almost entirely neutral.
Make interface transitions slower than 0.5s.

DESIGN.md195 lines

---
version: alpha
name: Vercel
description: "Dark monochrome interface measured from vercel.com: GeistSans type, tonal surfaces and 6px corners."
colors:
  background: "#000000"
  surface: "#000000"
  on-surface: "#EDEDED"
  on-background: "#EDEDED"
  on-surface-strong: "#FFFFFF"
  on-surface-variant: "#A1A1A1"
  on-surface-muted: "#8F8F8F"
  surface-container-low: "#0A0A0A"
  surface-container: "#262626"
  primary: "#EDEDED"
  on-primary: "#0A0A0A"
typography:
  headline-display:
    fontFamily: GeistSans
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.06em
  headline-lg:
    fontFamily: GeistSans
    fontSize: 56px
    fontWeight: 450
    lineHeight: 1
    letterSpacing: -0.06em
  body-md:
    fontFamily: GeistSans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: GeistSans
    fontSize: 24px
    fontWeight: 450
    lineHeight: 1.33
    letterSpacing: -0.04em
  label-md:
    fontFamily: GeistSans
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
  label-sm:
    fontFamily: GeistSans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  code:
    fontFamily: Geist Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.67
  headline-display-mobile:
    fontFamily: GeistSans
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: -0.06em
rounded:
  sm: 4px
  md: 6px
  lg: 20px
spacing:
  xs: 2px
  sm: 6px
  md: 12px
  lg: 20px
  xl: 40px
  gutter: 20px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 0px 6px
    height: 32px
  button-primary-hover:
    backgroundColor: "#CCCCCC"
  button-outline:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 0px 6px
    height: 32px
  button-outline-hover:
    backgroundColor: "#1F1F1F"
  button-ghost:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-sm}"
    rounded: 0px
    padding: 0px
  link:
    textColor: "{colors.on-surface-variant}"
---

# Vercel Design System

## Overview

Vercel describes itself as: “The autonomous stack for every app and agent.” The interface is dark, built on **Near Black (#000000)** with **Mist (#EDEDED)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **GeistSans**, with **Geist Mono** for code. Headlines run large with tight negative tracking; body text is 16px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 6px.

Measured from [vercel.com](https://vercel.com/) on October 21, 2026 at 1440×900 and 390×844 from 360 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 9 roles.

- **Near Black (#000000):** Page background, seen 5 times. Token `background`, CSS `--tw-mask-bottom-from-color`.
- **Mist (#EDEDED):** Primary text and headings, seen 51 times. Token `on-surface`.
- **White (#FFFFFF):** Headings and emphasis, seen 3 times. Token `on-surface-strong`.
- **Gray (#A1A1A1):** Secondary text, seen 92 times. Token `on-surface-variant`.
- **Gray (#8F8F8F):** Muted text and metadata, seen 3 times. Token `on-surface-muted`.
- **Near Black (#0A0A0A):** Raised areas one step from the page, seen 11 times. Token `surface-container-low`.
- **Graphite (#262626):** Cards and panels, seen 4 times. Token `surface-container`.
- **Mist (#EDEDED):** Primary buttons and calls to action, seen 68 times. Token `primary`.
- **Near Black (#0A0A0A):** Text and icons on primary. Token `on-primary`.

## Typography

**GeistSans** and **Geist Mono** (monospace) share the interface. Fallback stack: `GeistSans, GeistSans Fallback`.

- **headline-display:** GeistSans 64px at weight 400, line height 1, tracking -0.06em (48px on mobile). Page title (h1).
- **headline-lg:** GeistSans 56px at weight 450, line height 1, tracking -0.06em. Section headings (h2).
- **body-md:** GeistSans 16px at weight 400, line height 1.5. Body text.
- **body-lg:** GeistSans 24px at weight 450, line height 1.33, tracking -0.04em. Lead paragraphs.
- **label-md:** GeistSans 16px at weight 500, line height 1.5. Buttons, navigation and labels.
- **label-sm:** GeistSans 14px at weight 400, line height 1.43. Small labels and badges.
- **code:** Geist Mono 12px at weight 500, line height 1.67, uppercase. Code and technical values.

## Layout

Spacing does not follow a strict grid: 15% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 2px, sm 6px, md 12px, lg 20px, xl 40px.
- **Gaps:** 20px is the most common gap in flex and grid layouts.
- **Breakpoints:** 401px, 600px, 601px, 880px, 960px, 961px, 992px, 1024px, 1200px, 1400px, 1600px.

## Elevation & Depth

Depth comes mostly from hairline rings and inset highlights on tonal surfaces (#0A0A0A → #262626):

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(46, 46, 46) 0px 0px 0px 1px`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(46, 46, 46) 0px 0px 0px 1px inset`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.145) 0px 0px 0px 1px, rgb(0, 0, 0) 0px 0px 0px 1px`

A few raised panels add a soft drop shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.145) 0px 0px 0px 1px, rgba(0, 0, 0, 0.16) 0px 1px 2px 0px, rgb(0, 0, 0) 0px 0px 0px 1px`.

## Shapes

Most elements use 6px corners. Measured radii, most used first:

- **md (6px):** 24 elements.
- **lg (20px):** 24 elements.
- **sm (4px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Sign Up”):** #EDEDED fill, #0A0A0A text, 14px/500, 6px radius, padding 0px 6px.
- **button-primary-hover:** background #CCCCCC, text #0A0A0A on hover.
- **button-outline (“Get a Demo”):** #0A0A0A fill, #EDEDED text, 14px/500, 6px radius, padding 0px 6px, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(46, 46, 46) 0px 0px 0px 1px`.
- **button-outline-hover:** background #1F1F1F, text #EDEDED on hover.
- **button-ghost (“Products”):** transparent fill, #A1A1A1 text, 14px/400, padding 0px.
- **link:** transparent fill, #A1A1A1 text, padding 0px.

## Do's and Don'ts

- Do use #000000 for the page and lift surfaces in small steps: #0A0A0A, #262626.
- Do keep text in 4 levels: #EDEDED, #FFFFFF, #A1A1A1, #8F8F8F.
- Do let contrast carry emphasis; primary actions use #EDEDED on #000000.
- Do set headlines in GeistSans with tight tracking (-0.06em).
- Do reuse the measured spacing steps (6px, 12px, 20px).
- Do use 6px corners on most elements; larger surfaces also use 20px and 4px.
- Don't use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
- Don't introduce new font families beyond GeistSans and Geist Mono.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.1s, 0.15s, 0.2s, 0.5s. Longer ambient animations run 0.95s, 1s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `ease`, `cubic-bezier(0, 0, 0.2, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/vercel.com/), the free DESIGN.md generator.

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need more than one page?

Design MD in the Sitepeel tools for Chrome measures pages behind a login, combines several pages into one file and works on any site you open.

Explore the tool

More designs

See all →

GrammarlyBrand grammarly.com · matter

HootsuiteBrand hootsuite.com · Montserrat

SmartSkill smartskill.shop · IRANYekanX

Just Falafel jfvegancafe.com · Bodoni Moda

Greenpaktourism greenpaktourism.com/destinations · Poppins

Pusho pusho.fun · Yatra One

FAQ

Questions

What can I build with the Vercel DESIGN.md?

Any page or component in this style: a landing page, pricing table, dashboard or sign-up form. Your AI coding agent uses the measured colors, GeistSans type, spacing, corners and buttons instead of its own defaults.

How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

Is this Vercel’s official design system?

No. Sitepeel measured it from vercel.com’s public page on October 21, 2026. It is an independent analysis, not made or approved by Vercel.

Can I use Vercel’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Vercel’s logo, name, pictures or text.

How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.