Vercel

---
version: alpha
name: "Agentic Infrastructure – Vercel Light"
description: "Vercel's marketing homepage employs a near-monochromatic design system anchored in a deep near-black (#171717) and an off-white background (#fafafa / #ffffff). The proprietary GeistSans typeface carries all hierarchy. from a massive 64px display heading with −3.84px letter-spacing down to 14px body copy. Elevation is expressed exclusively through 1px border rings (box-shadow spread) using #ebebeb, with no traditional drop shadows. Buttons use fully-rounded pill shapes for primary CTAs and outlined pill shapes for secondary actions. The overall aesthetic is confident, minimal-radius-language, and developer-focused."
colors:
  gray-200: "#ebebeb"
  background-100: "#ffffff"
  background-200: "#fafafa"
  black: "#000000"
  gray-1000: "#171717"
  gray-700: "#8f8f8f"
  gray-900: "#4d4d4d"
  white: "#ffffff"
typography:
  display-hero:
    fontFamily: "GeistSans"
    fontSize: "64px"
    fontWeight: "400"
    lineHeight: "64px"
    letterSpacing: "-3.84px"
  display-large:
    fontFamily: "GeistSans"
    fontSize: "56px"
    fontWeight: "450"
    lineHeight: "56px"
    letterSpacing: "-3.36px"
  heading-1:
    fontFamily: "GeistSans"
    fontSize: "24px"
    fontWeight: "450"
    lineHeight: "32px"
    letterSpacing: "-0.96px"
  heading-2:
    fontFamily: "GeistSans"
    fontSize: "24px"
    fontWeight: "450"
    lineHeight: "26.4px"
    letterSpacing: "-1.2px"
  heading-3:
    fontFamily: "GeistSans"
    fontSize: "22px"
    fontWeight: "400"
    lineHeight: "33px"
  heading-4:
    fontFamily: "GeistSans"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "32px"
  body-large:
    fontFamily: "GeistSans"
    fontSize: "18px"
    fontWeight: "400"
    lineHeight: "28px"
  body-default:
    fontFamily: "GeistSans"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  body-medium:
    fontFamily: "GeistSans"
    fontSize: "16px"
    fontWeight: "500"
    lineHeight: "24px"
  body-small:
    fontFamily: "GeistSans"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
  label:
    fontFamily: "GeistSans"
    fontSize: "11px"
    fontWeight: "500"
    lineHeight: "20px"
    letterSpacing: "0.2px"
  code-default:
    fontFamily: "Geist Mono"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
rounded:
  radius-sm: "6px"
  radius-md: "8px"
  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"
---

## Overview

Vercel's marketing homepage employs a near-monochromatic design system anchored in a deep near-black (#171717) and an off-white background (#fafafa / #ffffff). The proprietary GeistSans typeface carries all hierarchy. from a massive 64px display heading with −3.84px letter-spacing down to 14px body copy. Elevation is expressed exclusively through 1px border rings (box-shadow spread) using #ebebeb, with no traditional drop shadows. Buttons use fully-rounded pill shapes for primary CTAs and outlined pill shapes for secondary actions. The overall aesthetic is confident, minimal-radius-language, and developer-focused.

**Signature traits:**
- Dual typeface system: Pairs GeistSans and Geist Mono across the type hierarchy.
- Soft, rounded geometry: Generous corner rounding up to 9999px.
- Monochrome palette: Relies entirely on neutral tones with no chromatic accent.

## Colors

The palette uses 8 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 — the dominant foreground color across all zones".
- **border-primary** maps to `gray-200`: Role "primary" is grounded by usage context "Dividers, 1px border rings on cards and nav panels, hairline separators".
- **surface-background** maps to `background-100`: Role "background" is grounded by usage context "Primary page surface, card fills, nav background".
- **content-text** maps to `gray-700`: Role "text" is grounded by usage context "Tertiary/muted text, footer labels, placeholder text".

### Primary Brand
- **Gray 200** (#ebebeb): Dividers, 1px border rings on cards and nav panels, hairline separators. Role: primary. {authored: rgb(235, 235, 235), space: rgb}

### Text Scale
- **Gray 1000** (#171717): Primary text, headings, nav links, icon fills — the dominant foreground color across all zones. Role: text. {authored: rgb(23, 23, 23), space: rgb}
- **Gray 700** (#8f8f8f): Tertiary/muted text, footer labels, placeholder text. Role: text. {authored: rgb(143, 143, 143), space: rgb}
- **Gray 900** (#4d4d4d): Secondary text, subheadings, button labels in outlined state. Role: text. {authored: rgb(77, 77, 77), space: rgb}
- **White** (#ffffff): Text on dark/black button fills (Sign Up, Deploy now CTA labels). Role: text. {authored: rgb(255, 255, 255), space: rgb}

### Surface & Shadows
- **Background 100** (#ffffff): Primary page surface, card fills, nav background. Role: background. {authored: rgb(255, 255, 255), space: rgb}
- **Background 200** (#fafafa): Secondary surface, nav panel dropdown background, subtle section fills. Role: background. {authored: rgb(250, 250, 250), space: rgb}
- **Black** (#000000): Primary CTA button fill (Deploy now), brand logo triangle, high-emphasis interactive elements. Role: background. {authored: rgba(0, 0, 0, 0.08), space: rgb, alpha: 0.08}

## Typography

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

Mixes GeistSans and Geist Mono for visual contrast. Weight range spans regular, medium. Sizes range from 11px to 64px.

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Hero headline — 'Agentic Infrastructure' large display text | GeistSans | 64px | 400 | 64px | -3.84px | GeistSans, GeistSans Fallback; features: "calt" 0, "rlig", "ss11" | Extracted token |
| Section display headings, major marketing statements | GeistSans | 56px | 450 | 56px | -3.36px | GeistSans, GeistSans Fallback; features: "calt" 0, "rlig", "ss11" | Extracted token |
| Card and section headings | GeistSans | 24px | 450 | 32px | -0.96px | GeistSans, GeistSans Fallback; features: "calt" 0, "rlig", "ss11" | Extracted token |
| Tighter heading variant for compact sections | GeistSans | 24px | 450 | 26.4px | -1.2px | GeistSans, GeistSans Fallback; features: "calt" 0, "rlig", "ss11" | Extracted token |
| Sub-section headings | GeistSans | 22px | 400 | 33px | normal | GeistSans, GeistSans Fallback; features: "calt" 0, "rlig", "ss11" | Extracted token |
| Feature list headings, card titles | GeistSans | 20px | 400 | 32px | normal | GeistSans, GeistSans Fallback; features: "calt" 0, "rlig", "ss11" | Extracted token |
| Lead body copy, feature descriptions | GeistSans | 18px | 400 | 28px | normal | GeistSans, GeistSans Fallback; features: "calt" 0, "rlig", "ss11" | Extracted token |
| Primary body text, nav links, general UI copy | GeistSans | 16px | 400 | 24px | normal | GeistSans, GeistSans Fallback; features: "calt" 0, "rlig", "ss11" | Extracted token |
| Emphasized body text, button labels | GeistSans | 16px | 500 | 24px | normal | GeistSans, GeistSans Fallback; features: "calt" 0, "rlig", "ss11" | Extracted token |
| Secondary body text, metadata, descriptions | GeistSans | 14px | 400 | 20px | normal | GeistSans, GeistSans Fallback; features: "calt" 0, "rlig", "ss11" | Extracted token |
| Badges, tags, small labels, status indicators | GeistSans | 11px | 500 | 20px | 0.2px | GeistSans, GeistSans Fallback; features: "calt" 0, "rlig", "ss11" | Extracted token |
| Inline code, code snippets, terminal output | Geist Mono | 14px | 400 | 20px | normal | Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; features: "calt" 0, "rlig", "ss11" | 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.

### Responsive Strategy
- **mobile (470-1080px)**: 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 |

## 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-color | rgb(23, 23, 23) ; rgb(0, 114, 245) ; rgb(77, 77, 77) |
| Light | outline-width | 3px |
| Light | outline-offset | 0px ; 4px |
| Light | transform | matrix(-1, 0, 0, -1, 0, 0) ; matrix(-1, 0, 0, 1, 0, 0) ; matrix(0.532096, 0.0203936, -0.00639947, 0.166969, 310.803, 97.5283) |

## 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 | 6px | 6 | Subtle corner |
| radius-md | 8px | 8 | Control corner |
| radius-pill | 9999px | 9999 | Large surface corner |

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

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Dual typeface system, Soft, rounded geometry, Monochrome palette 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 | <= 383px | (max-width: 383px) |
| Mobile | <= 400px | (max-width: 400px) |
| 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 10 | <= 768px | (max-width: 768px) |
| Breakpoint 11 | <= 960px | (max-width: 960px) |
| Breakpoint 12 | <= 1024px | (max-width: 1024px) |
| Breakpoint 13 | <= 1080px | (max-width: 1080px) |
| 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) |
| Mobile | >= 601px | (min-width: 601px) |
| Tablet | 769-960px | (min-width: 769px) and (max-width: 960px) |
| Tablet | >= 769px | (min-width: 769px) |
| Tablet | >= 960px | (min-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.