---
title: "Vercel design system"
variant: extended
source: https://vercel.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/vercel-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Vercel · Design System

> Quiet monochrome, unmistakable infrastructure.

**Theme:** light · **Industry:** devtools · **Source:** https://vercel.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Vercel’s homepage pairs a restrained monochrome interface with oversized typography and generous negative space. A minimal hero and customer product showcases frame the platform as infrastructure for agents and scalable applications.

## North star

Keep the canvas quiet and let tightly tracked typography, black actions, and real product interfaces carry the story.

## Overview

The page is built on a near-white canvas (#fafafa), with dark ink (#171717) carrying the headline, primary actions, logo mark, and key navigation. Muted gray (#4d4d4d) softens secondary navigation and supporting text; the measured pale gray (#c9c9c9) is a minor text detail rather than a defining surface color. There are no broad colored section bands: the long page reads as one continuous light field. Geist Sans provides compact interface text and tightly tracked, large display headlines, while Geist Mono is reserved for small technical labels and code-like details. The hero uses an asymmetric three-part composition—headline and actions, a central black triangle, and brief supporting statements—followed by a customer logo row. Lower sections alternate two-column product evidence and customer context, with screenshots supplying most of the visual variety. Keep components crisp, restrained, and spacious; use subtle hairline edges instead of prominent shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cloud Canvas | `#fafafa` | `--color-cloud-canvas` | surface | Continuous page canvas and the pale backdrop behind content and product showcases. |
| Soft Graphite | `#4d4d4d` | `--color-soft-graphite` | neutral | Secondary navigation and subdued supporting text. |
| Vercel Ink | `#171717` | `--color-vercel-ink` | brand | Headlines, primary navigation, logo mark, and dark primary actions. |
| Pale Alloy | `#c9c9c9` | `--color-pale-alloy` | neutral | Minor measured text detail; not a defining page surface or brand accent. |

### Semantic aliases

`--color-canvas` → `#fafafa` (Cloud Canvas) · `--color-surface` → `#171717` (Vercel Ink) · `--color-text` → `#171717` (Vercel Ink) · `--color-text-muted` → `#4d4d4d` (Soft Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171717` | `#fafafa` | 17.18:1 | AAA |
| `#4d4d4d` | `#fafafa` | 8.1:1 | AAA |
| `#4d4d4d` | `#171717` | 2.12:1 | fail |

### Gradients

- `linear-gradient(to top in oklab, rgb(250, 250, 250) 0%, rgba(0, 0, 0, 0) 100%)`
- `radial-gradient(circle at 0% 0%, rgb(250, 250, 250) 0%, rgba(0, 0, 0, 0) 30%), radial-gradient(circle at 100% 0%, rgb(250, 250, 250) 0%, rgba(0, 0, 0, 0) 30%), radial-gradient(circle at 100% 100%, rgb(250, 250, 250) 0%, `
- `linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, lab(100 0 0) 100%)`
- `linear-gradient(rgb(0, 255, 149) 0%, rgb(255, 208, 0) 25%, rgb(255, 23, 68) 50%, rgb(149, 0, 255) 75%, rgb(0, 229, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GeistSans | `--font-body` | webfont | 400, 450, 500 | Display and heading text, body copy, navigation, and buttons. | Inter |
| Geist Mono | `--font-mono` | webfont | 400, 500 | Captions and code-like technical labels. | Roboto Mono |

- **GeistSans:** Use compact interface copy and large headlines with tight negative tracking; weights range from regular to medium.
- **Geist Mono:** Keep small technical text regular-weight, understated, and clearly distinct from sans-serif interface copy.

### Type scale — Golden Ratio (ratio ≈ 1.66, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1 | -0.06em | — | GeistSans | Oversized hero headline and high-impact display messaging. |
| h1 | 56px | 450 | 1 | -0.06em | — | GeistSans | Primary page or section headlines, including the hero title. |
| h2 | 24px | 450 | 1.33 | -0.04em | — | GeistSans | Supporting feature section headings. |
| body | 14px | 500 | 1.43 | 0 | — | GeistSans | Feature descriptions, compact copy, and button labels. |
| caption | 12px | 400 | 1.33 | 0 | — | Geist Mono | Small technical labels and metadata. |
| nav | 14px | 400 | 1.43 | 0 | — | GeistSans | Header navigation and secondary menu items. |
| code | 12px | 400 | 1.33 | 0 | — | Geist Mono | Code-style or technical interface details. |

OpenType features in use: `"calt" 0, "rlig", "ss11"`.

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 2, 4, 6, 8, 12, 16, 20, 40 px.
- Section rhythm 40px · element gap 6px · card padding — · max content width 1392px.

Use a centered page frame with a measured maximum width of 1392px and a compact underlying spacing scale. The first screen leaves substantial open space around a low, horizontally arranged hero: headline and actions at left, a centered geometric mark, and supporting lines at right. A customer logo row anchors the bottom. Subsequent sections use two-column splits, alternating heading, product imagery, and customer context. Keep alignment deliberate and section transitions calm; the measured page remains a continuous light canvas rather than using contrasting bands.

## Shape & elevation

- Radius: button `9999px` · card `6px` · link `6px` · xs `6px` · pill `9999px`
- Shadow `hairline` (link, card, footer): `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(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px `
- Shadow `hairline-2` (button): `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(235, 235, 235) 0px 0px 0px 1px`
- Shadow `inset` (other): `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(235, 235, 235) 0px 0px 0px 1px inset`
- Motion: standard transition `0.1s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is predominantly flat, with no heavy card shadows or colored section layers. Use subtle hairline outlines for contained controls and panels, and reserve a soft shadow for the hero’s geometric mark or similarly isolated focal imagery. Rounded buttons contrast with lightly rounded interface cards.

## Imagery

Use product-interface screenshots and customer marks as evidence, not decorative stock photography. Frame interfaces as clean rectangular panels with readable UI detail against the page canvas. The hero’s central black triangular mark is a simple geometric focal point with a faint soft shadow. Keep imagery sparse and largely monochrome; avoid introducing colorful illustration when it is not present in the measured page.

## Components

### Top navigation

A compact horizontal header with the Vercel mark, product and resource links, and right-aligned account actions; use dark ink and muted secondary navigation.

### Announcement link

A small centered event message paired with a ticket link below the main navigation, visually quiet on the canvas.

### Hero actions

Pair a dark pill-shaped Deploy now action with a light secondary sales action; keep labels short and the primary button high contrast.

### Geometric hero mark

Center a solid dark triangular Vercel mark between the hero headline and brief right-side positioning statements.

### Customer logo row

Present customer marks in a single widely distributed horizontal row near the hero’s lower edge, without enclosing cards.

### Feature split

Combine a concise section heading and large customer product screenshot with a compact customer result and feature list in a two-column composition.

### Product interface panel

Show a customer product UI in a clean rectangular image area, retaining its native detail and separating it from surrounding copy with whitespace.

### Measured component styles

- **Primary button** (“Get a Demo”): background #ffffff · text #171717 · radius 6px · padding 0px 6px · 500 14px GeistSans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Deploy now”): background #171717 · text #ffffff · radius 3.35544e+07px · padding 0px 12px · 500 16px GeistSans
- **Link** (“Get your ticket”): transparent background · text #171717 · radius 3.35544e+07px · padding 0px 12px · 500 14px GeistSans
- **Card**: background #171717 · text #171717 · radius 0px · padding 0px · 400 16px GeistSans
- **Navigation item** (“Products Resources Enterprise Pricing Ge”): transparent background · text #171717 · radius 0px · padding 0px · 400 16px GeistSans

## Do

- Keep the page canvas near-white and continuous.
- Use Vercel Ink for primary headlines and calls to action.
- Reserve muted gray for secondary navigation and supporting copy.
- Use large, tightly tracked sans-serif headlines.
- Use product screenshots as concrete proof of platform capabilities.
- Preserve generous negative space around the hero and section content.

## Don't

- Do not add broad saturated color bands.
- Do not turn product screenshots into decorative mockup collages.
- Do not add heavy shadows or thick borders to every panel.
- Do not center every section; retain the page’s split alignments.
- Do not treat minor palette colors as primary brand accents.
- Do not compress the long-page sections into a dense dashboard.

## Agent prompt

Build a new Vercel-style page on a continuous Cloud Canvas (#fafafa). Use Vercel Ink (#171717) for high-contrast headlines, navigation, and primary actions, with Soft Graphite (#4d4d4d) for secondary copy; treat Pale Alloy (#c9c9c9) only as a minor detail. Set large, tightly tracked headlines in Geist Sans or a close substitute, and use Geist Mono for technical captions. Create a quiet header, spacious asymmetric hero, concise paired actions, and a simple geometric focal mark. Follow with customer logos and two-column sections that combine product screenshots with short supporting copy and feature lists. Keep controls crisp, edges subtle, and imagery documentary. Match the measured 1392px maximum content width without inventing other measured dimensions.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | A spacious three-part hero with left-aligned title and actions, central mark, and right-side supporting statements. | Primary and secondary actions, Positioning statements | Oversized headline, Black geometric mark, Pill-shaped primary CTA |
| 2 | feature-split | Two-column feature section with a heading and product interface imagery opposite customer context and a short capability list. | Customer proof, Capability list | Product screenshot, Split columns, Compact feature labels |
| 3 | feature-split | Two-column customer story with product interface imagery and a compact supporting feature list. | Scale-focused proof point, Feature overview | Customer interface screenshot, Asymmetric split, Text-led section heading |
| 4 | product-showcase | Sparse continuation of the feature showcase using a two-column composition and product imagery. | Product exploration, Visual evidence | Interface imagery, Open whitespace |
| 5 | integrations | Two-column section combining interface or brand imagery with links and feature content. | Explore related features, Follow links | Brand or product imagery, Linked content, Open layout |
| 6 | cta | Centered call-to-action section with a small number of actions and graphic accents. | Conversion action, Sales contact | Dark primary button, Centered alignment, Minimal supporting graphics |
| 7 | footer | Dense multi-column footer organized into six navigation columns. | Grouped navigation, Footer search or input controls | Multi-column link lists, Compact headings, Minimal controls |

## Source CSS custom properties (selected)

```css
--geist-space: 4px;
--geist-space-2x: 8px;
--geist-space-3x: 12px;
--geist-space-4x: 16px;
--geist-space-6x: 24px;
--geist-space-8x: 32px;
--geist-space-10x: 40px;
--geist-space-16x: 64px;
--geist-space-24x: 96px;
--geist-space-32x: 128px;
--geist-space-48x: 192px;
--geist-space-64x: 256px;
--geist-space-small: 32px;
--geist-space-medium: 36px;
--geist-space-large: 40px;
--geist-space-gap: 24px;
--geist-space-gap-half: 12px;
--geist-space-gap-quarter: 8px;
--geist-gap: 24px;
--geist-gap-half: 12px;
--geist-gap-quarter: 8px;
--geist-gap-double: 40px;
--geist-gap-section: 32px;
--geist-space-negative: -4px;
--geist-space-2x-negative: -8px;
--geist-space-4x-negative: -16px;
--geist-space-8x-negative: -32px;
--geist-space-16x-negative: -64px;
--geist-space-24x-negative: -96px;
--geist-space-32x-negative: -128px;
--geist-space-48x-negative: -192px;
--geist-space-64x-negative: -256px;
--geist-space-small-negative: -32px;
--geist-space-medium-negative: -36px;
--geist-space-large-negative: -40px;
--geist-space-gap-negative: -24px;
--geist-space-gap-half-negative: -12px;
--geist-space-gap-quarter-negative: -8px;
--geist-gap-negative: -24px;
--geist-gap-half-negative: -12px;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/vercel-com