Vercel

---
version: alpha
name: "Vercel Agentic Infrastructure"
description: "Vercel's marketing site uses a strict monochromatic palette anchored in near-black (#171717) on off-white (#fafafa/#ebebeb) surfaces. The design is defined by Geist. Vercel's own typeface. deployed at extreme negative letter-spacing for display headings (−3.84px at 64px) and tight tracking for body copy. Elevation is expressed entirely through 1px border rings (box-shadow spread) rather than drop shadows, keeping the surface language flat and precise. The hero features a bold geometric black triangle as the brand symbol, and secondary labels use all-caps spaced Geist Mono for a developer-tool aesthetic. CTAs are pill-shaped with a filled black primary and a ghost outline secondary."
colors:
  gray-200: "#ebebeb"
  background-100: "#ffffff"
  background-200: "#fafafa"
  black: "#000000"
  blue-700: "#0070f3"
  gray-1000: "#171717"
  gray-600: "#8f8f8f"
  gray-700: "#666666"
  gray-900: "#4d4d4d"
typography:
  display-hero:
    fontFamily: "Geist"
    fontSize: "64px"
    fontWeight: "400"
    lineHeight: "64px"
    letterSpacing: "-3.84px"
  display-large:
    fontFamily: "Geist"
    fontSize: "56px"
    fontWeight: "450"
    lineHeight: "56px"
    letterSpacing: "-3.36px"
  heading-30:
    fontFamily: "Geist"
    fontSize: "30px"
    fontWeight: "400"
    lineHeight: "33px"
    letterSpacing: "-1.5px"
  heading-22:
    fontFamily: "Geist"
    fontSize: "22px"
    fontWeight: "400"
    lineHeight: "28px"
    letterSpacing: "-0.66px"
  body-default:
    fontFamily: "Geist"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  body-small:
    fontFamily: "Geist"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
  label-medium:
    fontFamily: "Geist"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "20px"
  mono-code:
    fontFamily: "Geist Mono"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
  mono-label-spaced:
    fontFamily: "Geist Mono"
    fontSize: "14px"
    fontWeight: "600"
    lineHeight: "20px"
    letterSpacing: "1px"
  mono-micro:
    fontFamily: "Geist Mono"
    fontSize: "8px"
    fontWeight: "600"
    lineHeight: "8px"
rounded:
  radius-sm: "2px"
  radius-md: "4px"
  radius-lg: "6px"
  radius-pill: "9999px"
spacing:
  space-1: "2px"
  space-2: "4px"
  space-3: "6px"
  space-4: "8px"
  space-5: "12px"
  space-6: "16px"
  space-7: "20px"
  space-8: "24px"
  space-9: "32px"
  space-10: "40px"
  space-11: "44px"
  space-12: "80px"
---

## Overview

Vercel's marketing site uses a strict monochromatic palette anchored in near-black (#171717) on off-white (#fafafa/#ebebeb) surfaces. The design is defined by Geist. Vercel's own typeface. deployed at extreme negative letter-spacing for display headings (−3.84px at 64px) and tight tracking for body copy. Elevation is expressed entirely through 1px border rings (box-shadow spread) rather than drop shadows, keeping the surface language flat and precise. The hero features a bold geometric black triangle as the brand symbol, and secondary labels use all-caps spaced Geist Mono for a developer-tool aesthetic. CTAs are pill-shaped with a filled black primary and a ghost outline secondary.

**Signature traits:**
- Dual typeface system: Pairs Geist and Geist Mono across the type hierarchy.
- Soft, rounded geometry: Generous corner rounding up to 9999px.
- Single-accent color discipline: A neutral-led palette reserves #0070f3 as the lone accent.

## Colors

The palette uses 9 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **action-text** maps to `gray-1000`: Role "text" is grounded by usage context "Primary text, headings, nav links, icon fills".
- **border-primary** maps to `gray-200`: Role "primary" is grounded by usage context "Dividers, card outlines, border rings used as elevation substitute".
- **surface-background** maps to `background-200`: Role "background" is grounded by usage context "Page surface, nav panel backgrounds, section fills".
- **content-text** maps to `gray-600`: Role "text" is grounded by usage context "Footer text, placeholder text, disabled states".

### Primary Brand
- **Gray 200** (#ebebeb): Dividers, card outlines, border rings used as elevation substitute. Role: primary. {authored: rgb(235, 235, 235), space: rgb}

### Text Scale
- **Gray 1000** (#171717): Primary text, headings, nav links, icon fills. Role: text. {authored: rgb(23, 23, 23), space: rgb}
- **Gray 600** (#8f8f8f): Footer text, placeholder text, disabled states. Role: text. {authored: rgb(143, 143, 143), space: rgb}
- **Gray 700** (#666666): Tertiary text, captions, subdued link states. Role: text. {authored: rgb(102, 102, 102), space: rgb}
- **Gray 900** (#4d4d4d): Secondary text, button labels, muted nav items. Role: text. {authored: rgb(77, 77, 77), space: rgb}

### Surface & Shadows
- **Background 100** (#ffffff): Card surfaces, modal backgrounds, inner surface layers. Role: background. {authored: rgb(255, 255, 255), space: rgb}
- **Background 200** (#fafafa): Page surface, nav panel backgrounds, section fills. Role: background. {authored: rgb(250, 250, 250), space: rgb}
- **Black** (#000000): Primary CTA button fill (Deploy Now), brand triangle symbol. Role: background. {authored: rgba(0, 0, 0, 0.08), space: rgb, alpha: 0.08}
- **Blue 700** (#0070f3): Focus ring accent, interactive highlight states. Role: background. {authored: rgb(0, 112, 243), space: rgb}

## Typography

Typography uses Geist, Geist Mono across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes Geist and Geist Mono for visual contrast. Weight range spans regular, medium, semi-bold. Sizes range from 8px to 64px.

### Font Roles
- **Headline Font**: Geist
- **Body Font**: Geist

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Hero headline — 'Agentic Infrastructure' | Geist | 64px | 400 | 64px | -3.84px | Geist, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; features: "calt" 0, "rlig" | Extracted token |
| Large section headings | Geist | 56px | 450 | 56px | -3.36px | Geist, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; features: "calt" 0, "rlig" | Extracted token |
| Section sub-headings | Geist | 30px | 400 | 33px | -1.5px | Geist, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; features: "calt" 0, "rlig" | Extracted token |
| Card titles, feature headings | Geist | 22px | 400 | 28px | -0.66px | Geist, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; features: "calt" 0, "rlig" | Extracted token |
| Primary body copy, nav links | Geist | 16px | 400 | 24px | normal | Geist, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; features: "calt" 0, "rlig" | Extracted token |
| Secondary body, captions, metadata | Geist | 14px | 400 | 20px | normal | Geist, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; features: "calt" 0, "rlig" | Extracted token |
| Button labels, interactive element text | Geist | 14px | 500 | 20px | normal | Geist, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; features: "calt" 0, "rlig" | Extracted token |
| Code snippets, terminal output | Geist Mono | 14px | 400 | 20px | normal | Geist Mono, ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; features: "calt" 0, "rlig" | Extracted token |
| Uppercase category labels (FOR CODING AGENTS, TO SHIP APPS AND AGENTS) | Geist Mono | 14px | 600 | 20px | 1px | Geist Mono, ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; features: "calt" 0, "rlig" | Extracted token |
| Badge micro-labels, status indicators | Geist Mono | 8px | 600 | 8px | normal | Geist Mono, ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; features: "calt" 0, "rlig" | Extracted token |

## Layout

Responsive system uses 4 breakpoint tier(s): mobile, tablet, desktop, wide.

This system uses a 4px base grid with scale values 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 44, 80.

### Responsive Strategy
- **mobile (470-1150px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **tablet (769-1200px)**: Increase spacing and column structure for medium-width viewports.
- **desktop (1036-1108px)**: Expand layout density and horizontal composition for wide viewports.
- **wide (>= 2300px)**: Stretch composition with generous gutters and wider layout spans.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| space-1 | 2px | 2 | Extracted spacing token |
| space-2 | 4px | 4 | Mapped to --geist-space |
| space-3 | 6px | 6 | Extracted spacing token |
| space-4 | 8px | 8 | Mapped to --geist-space-2x |
| space-5 | 12px | 12 | Mapped to --geist-space-3x |
| space-6 | 16px | 16 | Extracted spacing token |
| space-7 | 20px | 20 | Extracted spacing token |
| space-8 | 24px | 24 | Extracted spacing token |
| space-9 | 32px | 32 | Extracted spacing token |
| space-10 | 40px | 40 | Extracted spacing token |
| space-11 | 44px | 44 | Extracted spacing token |
| space-12 | 80px | 80 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| n/a | 0 | No validated shadow payload |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | outline-style | solid |
| Light | outline-color | rgb(23, 23, 23) ; rgb(77, 77, 77) ; rgb(0, 114, 245) |
| Light | outline-width | 3px ; 2px |
| Light | outline-offset | 0px ; 4px ; 2px |
| Light | transform | matrix(1, 0, 0, 1, 0, 0) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-sm | 2px | 2 | Hairline corner |
| radius-md | 4px | 4 | Subtle corner |
| radius-lg | 6px | 6 | Subtle corner |
| radius-pill | 9999px | 9999 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-sm | 2px | px |
| radius-md | 4px | px |
| radius-lg | 6px | px |
| radius-pill | 9999px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Dual typeface system, Soft, rounded geometry, Single-accent color discipline without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 370px | (max-width: 370px) |
| Mobile | <= 380px | screen and (max-width: 380px) |
| Mobile | <= 400px | (max-width: 400px) |
| Mobile | <= 440px | screen and (max-width: 440px) |
| Mobile | <= 450px | (max-width: 450px) |
| Mobile | <= 480px | screen and (max-width: 480px) |
| Mobile | <= 500px | (max-width: 500px) |
| Mobile | <= 600px | (max-width: 600px) |
| Mobile | <= 601px | (max-width: 601px) |
| Mobile | <= 640px | (max-width: 640px) |
| Breakpoint 11 | <= 768px | (max-width: 768px) |
| Breakpoint 12 | <= 800px | screen and (max-width: 800px) |
| Breakpoint 13 | <= 960px | (max-width: 960px) |
| Breakpoint 14 | <= 992px | (max-width: 992px) |
| Breakpoint 15 | <= 1024px | (max-width: 1024px) |
| Breakpoint 16 | <= 1080px | (max-width: 1080px) |
| Breakpoint 17 | <= 1150px | screen and (max-width: 1150px) |
| Mobile | 470-670px | (min-width: 470px) and (max-width: 670px) |
| Mobile | >= 600px | (min-width: 600px) |
| Mobile | 601-960px | (min-width: 601px) and (max-width: 960px) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.