Terminal Green
#297a3aGreen text accent for links, tags, and emphasized short phrases. Use as a supporting accent, not as a status color
Vercel
vercel.comWebsite preview
The design language
Vercel's design system is an exercise in disciplined monochrome: a near-white canvas (#fafafa), black typography, hairline borders, and the complete absence of decorative color. The visual language reads like a developer terminal rendered in print — Geist Sans whispers at hero scale with weight 400-450 and -0.06em tracking, while Geist Mono stamps labels, metadata, and code samples in 11-13px caps. Buttons are sharp 6px-radius pills or rectangles in pure black-on-white or white-on-black. The system trusts contrast and typography hierarchy over color, using the triangle mark (▲) and a two-line wordmark as the only brand ornament. Surfaces stack as #fafafa → #ebebeb → #171717, creating depth through tonal value shifts rather than shadow or color. Every element is built on a 4px grid with compact density, producing an interface that feels like an engineer's notebook — precise, functional, and unafraid of empty space.
Color palette
accent
Spectrum Gradient
#ff1744Decorative gradient sweep for marketing hero accents — the only place color is permitted to exist
Solar Edge
#ffdc30Decorative two-stop gradient for feature callouts — yellow-to-blue sweep
neutral
Paper White
#fafafaPage canvas, card surfaces, light button fills — the default background that everything else sits on
Pure White
#ffffffElevated card surfaces, inset highlights, input fields
Hairline
#ebebeb1px borders on buttons, links, and cards — visible at high zoom, invisible at speed
Ash
#c9c9c9Disabled text, muted labels, brand name watermarks in customer logos
Smoke
#a8a8a8Tertiary text, placeholder copy, subtle icon fills
Graphite
#8f8f8fFooter micro-copy, secondary metadata
Slate
#7d7d7dCustomer brand names in logo strips, muted heading variants
Stone
#666666Muted captions, helper text, and de-emphasized UI labels.
Charcoal
#4d4d4dBody paragraph text, card descriptions, button secondary labels — where reading weight lives
Obsidian
#171717Primary headings, nav borders, dark button fills, list markers — near-black that avoids pure #000 harshness
Carbon
#000000SVG icon fills, logo marks, the triangle brand glyph — pure black reserved for graphic elements only
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
64px · 400 · 1 · -3.84px trackingThe quick brown fox jumps
heading-lg
56px · 450 · 1 · -3.36px trackingThe quick brown fox jumps
heading
30px · 400 · 1.1 · -1.5px trackingThe quick brown fox jumps
body
16px · 400 · 1.5The quick brown fox jumps
text-14
14px · 400 · 1.43The quick brown fox jumps
caption
13px · 400 · 1.54The quick brown fox jumps
text-12
12px · 400 · 1.33The quick brown fox jumps
eyebrow
11px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Geist Sans
- Weights
- 400, 450, 500
- Sizes
- 14, 16, 30, 56, 64
- Line height
- 1.00, 1.10, 1.43, 1.50
- Letter spacing
- -3.84px at 64px, -3.36px at 56px, -1.5px at 30px, normal at body sizes
- Fallback
- Inter
- Features
- "calt" 0, "rlig", "ss11"
Primary interface and display typeface — custom geometric sans from Vercel with tight tracking on large sizes (-0.06em at 56-64px, -0.05em at 30px). Weight 450 for hero headlines is the signature choice: heavier than a light but lighter than a semibold, producing a tone that is confident without shouting.
Additional typeface
Geist Mono
- Weights
- 400, 500, 600
- Sizes
- 8, 11, 12, 13, 14
- Line height
- 1.00, 1.33, 1.43, 1.50, 1.54, 1.60, 1.67
- Letter spacing
- 0.071em for mono at 11-12px
- Fallback
- JetBrains Mono
- Features
- "calt" 0, "rlig", "ss11"
Monospace secondary typeface for labels, code blocks, CLI output panels, metadata tags, and uppercase eyebrows. The 8px/600/uppercase combination stamps tiny wordmarks with mechanical precision. Wide letter-spacing (0.071em) in mono gives uppercase labels breathing room.
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1280px
- Section gap
- 96-128px
- Card padding
- 16px
- Element gap
- 12px
Border radius
nav
2pxcards
6pxpills
9999pxbuttons
6pxSpacing scale
1px2px3px4px6px8px12px14px16px20px24px32px40px44px208px256px276pxGuidelines
Do
- Use #171717 for all primary text and filled buttons — never pure #000000 for text or #ffffff for dark surfaces
- Apply 6px radius to all cards, buttons, and bordered containers (--geist-radius) — use 9999px only for pill-shaped nav actions
- Set headlines at weight 400-450 with -0.06em letter-spacing at 56-64px — never bold headlines over 700
- Use Geist Mono 11-12px uppercase with 0.071em tracking for all eyebrows, labels, and metadata stamps
- Build depth with hairline borders via stacked box-shadows (0 0 0 1px rgba(0,0,0,0.08), 0 0 0 2px #fafafa) — never with drop-shadow
- Space sections at 96-128px vertical gaps with no background shifts or dividers between bands
- Prefix CLI commands with ▲ and confirmations with ✓ in #297a3a — the terminal pattern is the product demo
Don’t
- Never introduce a chromatic color outside the Terminal Green (#297a3a) success indicator and the spectrum gradient — 0% colorfulness is the rule
- Never use border-radius larger than 6px on cards or rectangular buttons — the sharpness is the point
- Never set body or heading type in any color other than the #171717 / #4d4d4d / #666666 scale
- Never use drop-shadows for elevation — hairline rings only, or no depth at all
- Never use light or semibold (300 or 600-700) weights for headlines — the system speaks at 400-450 maximum
- Never set line-height above 1.0 for display sizes (56-64px) — the tight leading is what makes the type feel architectural
- Never use Geist Sans for labels, metadata, or code — Geist Mono owns that space exclusively
Components
Filled Black Button
Primary action — the strongest visual weight in the systemBackground #171717, text #ffffff, 6px radius, 12px horizontal padding, Geist Sans 14px/400. Used for Deploy Now, Sign Up. The only element that reaches 'Obsidian' black, making it unmistakable as the page's primary call.
Ghost Outline Button
Secondary action — present but not competing with primaryBackground transparent, text #4d4d4d, 1px border #ebebeb (rendered via box-shadow ring), 6px radius, 20px all padding, Geist Sans 14px/400. Used for Talk to Sales, Get a Demo. Reads as 'available' without asserting hierarchy.
Pill Button
Compact action in dense contexts (nav, header right cluster)Background #171717 or #ffffff, text contrasting, 9999px radius (full pill), 12px horizontal padding, 0 vertical padding for tight header use.
Text Link Button
Lowest-weight interactive — pure underline or color shift on textNo background, no border, 0px radius, color #171717 or #4d4d4d, 14-16px Geist Sans. Used for nav items and inline references.
Bordered Card
Feature/content container — depth via hairline border, never shadowBackground #ffffff, 6px radius, 1px border via stacked box-shadows: inset ring rgba(0,0,0,0.08) + outer ring #fafafa, 16px padding. The double-ring technique creates a border that survives any background — a signature Vercel trick.
Inverted Card
Visual punctuation in a grid — flips the value scaleBackground #171717, white text, 6px radius. Used sparingly (e.g., the Passport card) to break the monotony of an all-light layout.
CLI Output Panel
Demonstrates the product in its native environment — a terminal screenshot embedded as UILight background with Geist Mono 12-13px text in #171717, prefixed with ▲ triangle marker in #171717 for commands, ✓ checkmark in #297a3a for confirmations. The terminal IS the marketing.
Logo Strip Row
Social proof — customer brand names in a single horizontal line7+ logos in a row with 24-32px gaps. Customer names render in Geist Sans at the customer's actual brand treatment, faded to #7d7d7d for the page's neutral context.
Eyebrow Label
Tiny uppercase section markers — the monospace 'stamp'Geist Mono 11px/400, 0.071em letter-spacing, uppercase, color #171717. Pairs with a 12px gap before the heading it announces. Examples: 'FOR CODING AGENTS', 'TO SHIP APPS AND AGENTS'.
Top Nav Bar
Global navigation — minimal, horizontal, no shadowHeight 64px, sticky, background #fafafa with backdrop-blur (20-48px), wordmark left (▲ + Vercel), nav items center-left at 14px Geist Sans #171717, action cluster right (Get a Demo ghost, Log In ghost, Sign Up filled). No bottom border — separation comes from spacing alone.
Hero Composition
First screen — oversized type on left, brand mark on right, supporting text far rightThree-column asymmetric layout: headline (56-64px, -0.06em tracking, weight 450) left, black triangle glyph center, eyebrow stack right. No background image. The triangle floats with no border or fill — pure black silhouette.
Feature Card Grid
2-up product showcase cards with mini product UI embeddedLarge cards with the Bordered Card treatment, 16-24px padding, title at 30px heading weight, description at 14-16px body in #4d4d4d. Each card contains a small product mockup (CLI output, passport, framework logo) as visual evidence.
Surfaces & elevation
Level 0
Page Canvas
#fafafaDefault page background — the warm off-white that makes the system feel paper-like rather than screen-like
Level 1
Card Surface
#ffffffElevated cards sit one step above canvas in brightness, distinguished by hairline border not shadow
Level 2
Inverted Surface
#171717Dark inverted panels (e.g., Passport card) flip the value scale for visual punctuation in a grid
Vercel deliberately avoids drop shadows as a depth mechanism. Elevation is communicated through a hairline-border system: a 1px ring of rgba(0,0,0,0.08) wrapped in a 1px ring of canvas color (#fafafa) creates borders that survive any background without darkening the content beneath. This produces a flat, print-like aesthetic where 'above the surface' means 'outlined', never 'shadowed'.
Bordered Card
0 0 0 1px rgba(0,0,0,0.08), 0 0 0 2px #fafafa
Ghost Button / Link
0 0 0 1px #ebebeb
Layout & imagery
Layout
Max-width 1280px centered container with generous horizontal padding (24-48px). The hero uses an asymmetric three-zone composition: oversized headline left, brand glyph center, eyebrow stack right. Below the hero, content flows in alternating bands: a full-width customer logo strip, then a two-column 'build agents' section with heading left and product mockup right, then a three-up feature card grid. Sections are separated by 96-128px vertical gaps with no dividers or background shifts. The nav is a single 64px sticky bar with backdrop blur. Card grids consistently use a 2-column or 3-column layout with 16-24px gaps. The overall density is compact — text is comfortable to read, whitespace is generous, but the type scale and component sizing keep the page from feeling airy.
Imagery
Imagery is sparse and always functional. The primary visual element is the black triangle (▲) — a geometric brand mark that appears at hero scale as a floating silhouette. Customer logos in the social-proof strip use each brand's actual wordmark in grayscale. Product mockups (Notion chat UI, CLI terminal output, passport card) are embedded as light-mode screenshots within bordered cards. There is no photography, no illustration, no 3D — the system is pure typography and geometric shapes on white paper.
Design notes
Agent Guide
**Quick Color Reference** - Background: #fafafa - Text: #171717 - Border: #ebebeb - Accent: #000000 (triangle mark only) - primary action: #171717 (filled action) **Example Component Prompts** 1. Create a hero headline: Geist Sans 56px weight 450, color #171717, letter-spacing -3.36px, line-height 1.0. Below it, a filled black button (background #171717, text #ffffff, 6px radius, 12px 20px padding, Geist Sans 14px weight 400) and a ghost button beside it (background transparent, text #4d4d4d, 1px border #ebebeb, 6px radius, 20px padding). 2. Create a feature card: background #ffffff, 6px radius, border via stacked box-shadows (0 0 0 1px rgba(0,0,0,0.08), 0 0 0 2px #fafafa), 16px padding. Title in Geist Sans 30px weight 400 with -1.5px tracking, color #171717. Description in Geist Sans 14px weight 400, color #4d4d4d. 3. Create an eyebrow label: Geist Mono 11px weight 400, 0.071em letter-spacing, uppercase, color #171717. Pair with 12px margin-bottom before the heading it introduces. 4. Create a CLI output panel: background #ffffff with 1px border #ebebeb, 6px radius, 16px padding. Commands prefixed with ▲ in #171717, confirmations prefixed with ✓ in #297a3a, all text in Geist Mono 12px weight 400, color #171717. 5. Create a top nav bar: height 64px, background #fafafa with backdrop-filter blur(20px), flex row. Left: ▲ glyph in #000000 + 'Vercel' in Geist Sans 14px weight 500. Center-left: nav items in Geist Sans 14px weight 400, color #171717, 24px gaps. Right: ghost button (border #ebebeb, text #4d4d4d, 6px radius) + filled button (background #171717, text #ffffff, 6px radius, pill-shaped at 9999px radius for tight header use).
Typographic Discipline
The type system has only two families and 8 sizes. Headlines are weight 400-450 (not 700), tracking tight at -0.06em, line-height 1.0 — they sit on a single line, dense and confident. Body is 14-16px weight 400 at 1.43-1.5 line-height. The only color in the type system is the value shift from #171717 to #4d4d4d to #666666 — never a chromatic tint. Labels and metadata are ALWAYS monospace, ALWAYS uppercase, ALWAYS small (8-12px). This binary — Geist Sans for reading, Geist Mono for stamping — is the system's most recognizable rule.
The Triangle Protocol
The ▲ glyph is the brand's most deployed element. It appears as: the wordmark icon, the CLI command prefix, a decorative hero silhouette, a loading indicator, and an interactive collapse marker. Always rendered in #000000 at 1:1 aspect ratio, never with a border, never with a fill other than black. It is the only element in the system permitted to be pure #000000 — everything else is #171717 or lighter.
Similar brands
Linear
Same sharp 6-8px radii, monochromatic light canvas, and tight-tracking geometric sans-serif headlines — Linear and Vercel share a print-engineering aesthetic
Railway
Similar near-black on warm-white palette, monospace CLI panels, and the discipline of using one accent color (or none) across an entire interface
Stripe
Hairline borders, generous whitespace, and the trust that typography hierarchy alone can carry a page without decorative color or imagery
Resend
Developer-marketing approach: terminal output as hero, monospace labels, the same paper-white canvas and pure-black wordmark
Plaid
High-contrast achromatic system with a single chromatic note for state, trusting typographic weight and spacing to create hierarchy
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
