<!-- Generated: 2026-04-05 | Source: https://vercel.com | Pages: 3 | Framework: tailwind --> <!-- This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. -->

Design System: Vercel

1. Visual Theme & Atmosphere

Vercel's website is the visual thesis of developer infrastructure made invisible -- a design system so restrained it borders on philosophical. The page is overwhelmingly white (#ffffff) with near-black (#171717) text, creating a gallery-like emptiness where every element earns its pixel. This is not minimalism as decoration; it is minimalism as engineering principle. The Geist design system treats the interface like a compiler treats code -- every unnecessary token is stripped until only structure remains.

The custom Geist font family is the crown jewel. Geist Sans uses aggressive negative letter-spacing (-2.88px at 48px display, -2.4px at 40px) creating headlines that feel compressed, urgent, and engineered -- like code minified for production. At body sizes the tracking relaxes to normal, but the geometric precision persists. Geist Mono completes the system as the monospace companion for code blocks, terminal output, and technical labels. Both fonts enable OpenType "liga" globally, adding a layer of typographic sophistication that rewards close reading.

What distinguishes Vercel from other monochrome design systems is its shadow-as-border philosophy. Instead of traditional CSS borders, Vercel uses box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px -- a zero-offset, zero-blur, 1px-spread shadow that creates a border-like line without box model implications. This technique allows borders to exist in the shadow layer, enabling smoother transitions and subtler visual weight. The entire depth system is built on multi-value shadow stacks where each layer serves a distinct architectural purpose: one for the border, one for soft elevation, and an inner rgb(250, 250, 250) ring for the subtle glow that makes cards feel built from within.

Key Characteristics:

• Geist Sans with extreme negative letter-spacing (-2.88px at 48px, -2.4px at 40px) -- text as compressed infrastructure
• Geist Mono for code and technical labels with OpenType "liga" globally and uppercase at 12px for section markers
• Shadow-as-border technique: box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px replaces traditional borders throughout
• Multi-layer shadow stacks for nuanced depth (border + elevation + inner rgb(250, 250, 250) ring in single declarations)
• Near-pure white canvas with #171717 text -- not pure black, creating micro-contrast softness
• Workflow-specific accent colors: Ship Red (#e5484d), Preview Pink (#bd2864), Develop Blue (#0068d6)
• Status colors for dashboards: teal (#45dec5), amber (#ffb224), green (#297a3a), purple (#7820bc)
• Pill badges (9999px radius) with tinted blue backgrounds (#ebf5ff) for feature labels
• Three weights with strict roles: 400 (body), 500 (UI/interactive), 600 (headings) -- no bold except micro-badges

2. Color Palette & Roles

Primary

• Vercel Black (#171717): --ds-gray-1000. Primary text, headings, navigation, dark surface backgrounds. Not pure black -- the equal-channel warmth (RGB 23,23,23) prevents harshness and creates micro-contrast softness against white.
• Pure White (#ffffff): --ds-background-100. Page background, card surfaces, button text on dark. The dominant canvas color by area.
• True Black (#000000): --ds-black, --geist-foreground. Secondary use in console contexts and shadow layers (at 0.08 opacity for borders, 0.04 for elevation).

Workflow Accent Colors

• Develop Blue (#0068d6): The development workflow step -- a focused, saturated blue used for badge text and pipeline markers. Also appears as the badge text color on #ebf5ff pill backgrounds.
• Preview Pink (#bd2864): The preview deployment workflow -- a deep magenta-pink. Rich and vivid enough to read against white without competing with the Develop Blue.
• Ship Red (#e5484d): The production deployment step -- a warm coral-red. Used sparingly for text, borders, and gradient accents in the Ship pipeline stage.

Status & Data Colors

• Sky Blue (#52aeff): Status indicator, icon color, data visualization accent. A lighter, more approachable blue than Develop Blue.
• Teal (#45dec5): Success/positive status in dashboards and data displays. Bright and distinct from the greens.
• Amber (#ffb224): Warning/caution status. Used as text color and border accent in status contexts.
• Forest Green (#297a3a): Secondary success state. Darker and more muted than teal -- used for text labels rather than backgrounds.
• Violet (#7820bc): Tertiary accent for data categories and console syntax highlighting. Deep and saturated.

Neutral Scale

• Gray 1000 (#171717): --ds-gray-1000. Primary text, headings, navigation text. Frequency 13,325 -- the most-used color in the system.
• Gray 900 (#4d4d4d): --ds-gray-900. Secondary text, description copy, body paragraphs. Frequency 7,999.
• Gray 800 (#808080): --ds-gray-800. Placeholder text, disabled states, muted UI labels. Mid-gray.
• Gray 700 (#8f8f8f): --ds-gray-700. Tertiary text, subtle labels. Slightly lighter than Gray 800.
• Gray 600 (#a8a8a8): --ds-gray-600. Faint text, decorative borders. Approaching invisible.
• Gray 200 (#ebebeb): --ds-gray-200. Borders, card outlines, dividers, gradient stops. Frequency 4,753 -- the primary border color.
• Gray 100 (#666666): --accents-5. Tertiary text, muted interactive elements.

Surface & Badge

• Badge Blue Background (#ebf5ff): Tinted blue surface for pill badges. Soft enough to read dark blue text against.
• Badge Blue Text (#0068d6): Paired with #ebf5ff background for feature labels and status pills.
• Gradient Pastels: Soft atmospheric washes -- ice blue (#d4eef7), mint (#c7f5e2), warm cream (#f7ead4) -- used exclusively in hero gradient backgrounds.

Shadow Colors

• Border Shadow (rgba(0, 0, 0, 0.08)): The signature -- replaces traditional CSS borders throughout the system.
• Elevation Shadow (rgba(0, 0, 0, 0.04)): Minimal lift for cards and containers at 2px offset.
• Inner Ring (rgb(250, 250, 250)): The inner glow that distinguishes Vercel's card shadows from generic shadows.
• Light Ring (rgb(235, 235, 235)): Lighter border ring for buttons, tabs, and image containers.

3. Typography Rules

Font Family

• Primary: Geist, variable font (weight 100-900). Loaded as single woff2 file.
• Monospace: Geist Mono, variable font (weight 100-900). Used for code blocks, technical labels, and section markers.
• OpenType Features: "liga" enabled globally on all Geist text. "calt" 0, "rlig" on certain heading and UI variants.

Hierarchy

Principles

• Compression as identity: Geist at display sizes uses -2.88px letter-spacing at 48px and -2.4px at 40px -- among the most aggressive negative tracking in any major design system. The tracking progressively relaxes: -1.28px at 32px, -0.96px at 24px, and normal at 16px and below. Text tightens as it scales up; it loosens as it scales down.
• Ligatures everywhere: Every Geist text element enables OpenType "liga". Ligatures are structural, not decorative -- they create tighter, more efficient glyph combinations that reinforce the compressed aesthetic.
• Three weights, strict roles: 400 (body/reading), 500 (UI/interactive), 600 (headings/emphasis). Weight 700 appears only on 7px micro-badges. This narrow range creates hierarchy through size and tracking rather than weight.
• Mono for identity: Geist Mono in uppercase with "liga" serves as the developer console voice -- compact technical labels (12px weight 500) that bridge the marketing site and the product. The 8px/600 "New" badges are the smallest type in the system.

4. Component Stylings

Buttons

Ghost Button (Primary Variant)

• Background: transparent (rgba(0, 0, 0, 0))
• Text: #4d4d4d
• Padding: 8px 12px
• Radius: 9999px (full pill)
• Font: 14px Geist weight 400
• Transition: color, background-color
• Use: Secondary actions, filter buttons, navigation pills

Primary Dark (Inferred from Geist system)

• Background: #171717
• Text: #ffffff
• Padding: 8px 16px
• Radius: 6px
• Font: 16px Geist weight 500, "calt" 0, "rlig"
• Use: Primary CTA ("Start Deploying", "Get a Demo")

Shadow-Bordered White

• Background: #ffffff
• Text: #171717
• Shadow: rgb(235, 235, 235) 0px 0px 0px 1px (light ring border)
• Radius: 6px
• Padding: 0px 6px (minimal -- content-driven width)
• Use: Standard secondary button, link-like actions

Cards & Containers

Standard Card

• Background: #ffffff
• Border: none (via shadow)
• Shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px
• Radius: 8px
• Use: Feature cards, list items, content panels

Featured Card (Full Stack)

• Shadow: 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, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 8px -8px, rgb(250, 250, 250) 0px 0px 0px 1px
• Radius: 8px
• Use: Image cards, highlighted panels, product screenshots

Image Card

• Border: 1px solid #ebebeb
• Radius: 12px 12px 0px 0px (top-rounded only)
• Use: Dashboard screenshots, code preview images

Badges / Pills

Feature Badge

• Background: #ebf5ff
• Text: #0068d6
• Padding: 0px 10px
• Radius: 9999px
• Font: 12px Geist weight 500
• Use: Status badges, feature labels, product tags

Navigation

• White sticky header, horizontal layout
• Links: 16px Geist weight 400, #171717 text
• CTA: Dark pill ("Start Deploying") right-aligned, #171717 background
• Active: weight 500-600 or underline differentiation
• Mobile: hamburger collapse
• Shadow border on bottom: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px

Inputs & Forms

• Fieldset shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px
• Radio focus: rgb(235, 235, 235) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
• Border: via shadow technique, not traditional border

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4, 8, 12, 16, 20, 24, 32, 36, 40, 44, 48, 64, 96
• High-frequency values: 2px (freq 825), 8px (freq 503), 12px (freq 774), 4px (freq 425), 16px (freq 249)
• Section-level spacing: 48px, 90px, 96px, 135px, 165px -- gallery-level vertical rhythm

Grid & Container

• Max content width: full-width with internal containment
• Column system: 1, 2, 3, 6, 12 columns detected
• Hero: centered single-column with generous top padding
• Feature sections: 2-3 column card grids
• Full-width dividers using border-bottom: 1px solid #171717

Whitespace Philosophy

• Gallery emptiness: Section spacing reaches 90-165px between major content blocks. The white space IS the design -- it communicates that Vercel has nothing to prove and nothing to hide.
• Compressed text, expanded space: The aggressive negative letter-spacing on headlines (-2.88px at 48px) is counterbalanced by vast surrounding whitespace. Text is dense; space around it is expansive.
• Monochrome separation: White sections alternate with white sections. There is no background color variation. Separation comes from shadow-borders and spacing alone.

Border Radius Scale

• Micro (2px): Inline code snippets, small decorative elements
• Subtle (4px): Small containers, keyboard shortcuts, tags (freq 136)
• Standard (6px): Buttons, links, functional elements (freq 127)
• Comfortable (8px): Cards, list items, panels (freq 22)
• Image Top (12px 12px 0px 0px): Featured image containers, top-rounded
• Large (64px): Tab navigation pills (freq 12)
• XL (100px): Large navigation links (freq 22)
• Full Pill (9999px): Badges, status pills, button pills (freq 57)
• Circle (50%): Menu toggle, avatar containers (freq 28)

6. Depth & Elevation

Shadow Philosophy: Vercel uses multi-value shadow stacks where each layer has a distinct architectural purpose. The first layer creates the "border" (rgba(0, 0, 0, 0.08) at 1px spread). The second adds ambient softness (rgba(0, 0, 0, 0.04) at 2px blur). On featured cards, a third layer handles depth at distance (rgba(0, 0, 0, 0.04) at 8px blur with -8px negative spread). The inner ring (rgb(250, 250, 250)) creates a subtle highlight that makes cards glow from within. This layered approach means cards feel constructed, not floating -- depth is built architecturally, not applied as decoration.

Decorative Depth

• Hero gradient: soft pastel multi-color gradient wash behind hero content -- ice blue (#d4eef7), mint (#c7f5e2), warm cream (#f7ead4). Atmospheric, barely visible.
• Section borders: 1px solid #171717 (full dark line) between major sections
• No background color variation -- depth comes entirely from shadow layering and border contrast

6.5. Motion & Transitions

Duration Scale

Timing Functions

• Primary: ease (freq 157 -- dominant)
• Smooth decel: cubic-bezier(.4, 0, .2, 1) (freq 33) -- Material-style deceleration
• Exit: ease-out (freq 11)
• Balanced: ease-in-out (freq 6)

7. Do's and Don'ts

Do

• Use Geist Sans with aggressive negative letter-spacing at display sizes (-2.88px at 48px, -2.4px at 40px)
• Use shadow-as-border (rgba(0, 0, 0, 0.08) 0px 0px 0px 1px) instead of traditional CSS borders
• Enable "liga" on all Geist text -- ligatures are structural, not optional
• Use the three-weight system: 400 (body), 500 (UI), 600 (headings)
• Apply workflow accent colors (Red #e5484d / Pink #bd2864 / Blue #0068d6) only in their pipeline context
• Use multi-layer shadow stacks for cards -- border + elevation + inner rgb(250, 250, 250) ring
• Keep the color palette achromatic -- grays from #171717 to #ffffff are the system
• Use #171717 instead of #000000 for primary text -- the micro-warmth matters
• Use Geist Mono 12px weight 500 uppercase for technical section labels ("GET STARTED", "BUILD", "SCALE")
• Use 9999px radius for badges and pills with #ebf5ff background and #0068d6 text

Don't

• Don't use positive letter-spacing on Geist Sans -- it runs negative or normal, never positive
• Don't use weight 700 on body or heading text -- 600 is the maximum; 700 appears only on 7px micro-badges
• Don't use traditional CSS border on cards -- use the shadow-border technique throughout
• Don't introduce warm colors (oranges, yellows, greens) into UI chrome -- the system is achromatic with functional exceptions only
• Don't apply workflow accent colors (#e5484d, #bd2864, #0068d6) decoratively -- they mark pipeline stages exclusively
• Don't use heavy shadows (opacity > 0.08) -- the shadow system operates at whisper-level opacity (0.04-0.08)
• Don't increase body text letter-spacing -- Geist is designed to run at normal below 24px
• Don't use pill radius (9999px) on primary action buttons -- pills are for badges, tags, and filter controls
• Don't skip the inner rgb(250, 250, 250) ring in card shadows -- it is the glow that makes the elevation system work
• Don't mix "liga" and "calt" 0, "rlig" feature settings arbitrarily -- "liga" is for standard text; "calt" 0, "rlig" is for UI/heading variants

8. Responsive Behavior

Breakpoints

Touch Targets

• Ghost buttons use 8px 12px padding for comfortable tap targets
• Navigation links at 14-16px with adequate spacing
• Pill badges have 10px horizontal padding for touch accessibility
• Mobile menu toggle uses 50% radius circular button

Collapsing Strategy

• Hero: 48px display -> scales down proportionally, maintains negative tracking ratio
• Navigation: horizontal links + CTAs -> hamburger menu
• Feature cards: 3-column -> 2-column -> single column stacked
• Code screenshots: maintain aspect ratio, may horizontally scroll
• Trust bar logos: grid -> horizontal scroll
• Footer: multi-column -> stacked single column
• Section spacing: 90-165px -> condensed on mobile

Image Behavior

• Dashboard screenshots maintain 1px solid #ebebeb border at all sizes
• Hero gradient pastels (#d4eef7, #c7f5e2, #f7ead4) soften on mobile
• Product screenshots use 12px 12px 0px 0px top-rounded radius consistently
• Full-width sections maintain edge-to-edge treatment

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA background: Vercel Black (#171717)
• Page background: Pure White (#ffffff)
• Heading text: Vercel Black (#171717)
• Body text: Gray 900 (#4d4d4d)
• Muted text: Gray 800 (#808080)
• Border (shadow): rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
• Border (light): rgb(235, 235, 235) 0px 0px 0px 1px
• Badge background: #ebf5ff
• Badge text: #0068d6
• Develop Blue: #0068d6
• Preview Pink: #bd2864
• Ship Red: #e5484d

Example Component Prompts

• "Create a hero section on white (#ffffff) background. Headline at 48px Geist weight 600, line-height 56px, letter-spacing -2.88px, color #171717, font-feature-settings: "liga". Subtitle at 20px Geist weight 400, line-height 36px, color #4d4d4d. Dark CTA button (#171717 background, #ffffff text, 6px radius, 8px 16px padding, 16px weight 500) and ghost button (transparent background, #4d4d4d text, 9999px radius, 8px 12px padding)."
• "Design a card: white background, no CSS border. Use shadow stack: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px. Radius 8px. Title at 24px Geist weight 600, letter-spacing -0.96px, line-height 32px, color #171717. Body at 16px weight 400, color #4d4d4d, "liga" enabled."
• "Build a pill badge: #ebf5ff background, #0068d6 text, 9999px radius, 0px 10px padding, 12px Geist weight 500, line-height 16px, "liga" enabled."
• "Create navigation: white sticky header with rgba(0, 0, 0, 0.08) 0px 0px 0px 1px shadow-border on bottom. Links at 14px Geist weight 400, #171717 text, line-height 20px. Dark pill CTA 'Start Deploying' right-aligned: #171717 background, #ffffff text, 16px weight 500, 8px 16px padding, 9999px radius."
• "Design a workflow section showing three pipeline steps. Each step uses a Geist Mono 12px weight 500 uppercase label plus 24px Geist weight 600 title (letter-spacing -0.96px, line-height 32px) plus 16px weight 400 description in #4d4d4d. Step colors: Develop (#0068d6), Preview (#bd2864), Ship (#e5484d). Steps connected with lines on white background."
• "Build a featured image card: white background, full shadow stack 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, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 8px -8px, rgb(250, 250, 250) 0px 0px 0px 1px. Image container with 12px 12px 0px 0px top radius and 1px solid #ebebeb border. Title below at 24px Geist weight 600, -0.96px tracking."

Iteration Guide

1. Always use shadow-as-border instead of CSS border -- rgba(0, 0, 0, 0.08) 0px 0px 0px 1px is the foundation of every contained element
2. Letter-spacing scales with font size: -2.88px at 48px, -2.4px at 40px, -1.28px at 32px, -0.96px at 24px, normal at 16px and below
3. Three weights only: 400 (read), 500 (interact), 600 (announce) -- weight 700 is reserved for 7px micro-badges
4. Color is functional, never decorative -- workflow colors (#e5484d, #bd2864, #0068d6) mark pipeline stages only; the UI is achromatic
5. The inner rgb(250, 250, 250) ring in card shadows is what gives Vercel cards their distinctive inner glow -- never omit it
6. Geist Mono uppercase at 12px weight 500 is the developer console voice -- use for section markers and technical labels
7. Transitions use ease timing at 160ms for interactions and 350ms for content reveals -- no spring physics or bounce curves
8. Pastel gradient backgrounds (#d4eef7, #c7f5e2, #f7ead4) are atmospheric only -- they appear behind hero content and nowhere else