Vercel Web Interface & Design System Guidelines
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 isn't minimalism as decoration; it's minimalism as engineering principle.
Color Palette
Primary & Backgrounds
Workflow & Console Colors
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
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 isn't minimalism as decoration; it's minimalism as engineering principle.
Components
Buttons
Inputs
Elevation & Depth
Do's & Don'ts
Do
Don't
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 isn't minimalism as decoration; it's minimalism as engineering principle.
The custom Geist font family is the crown jewel. Geist Sans uses aggressive negative letter-spacing, creating headlines that feel compressed, urgent, and engineered — like code that's been minified for production.
What distinguishes Vercel from other monochrome design systems is its shadow-as-border philosophy. Vercel uses semi-transparent shadows (e.g., box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)) combined with nested radii. This technique allows borders to exist in the shadow layer, improving edge clarity, enabling smoother transitions, and establishing a subtler visual weight than traditional borders.
Key Characteristics:
• Geist Sans with extreme negative letter-spacing (-2.4px to -2.88px at display) — text as compressed infrastructure.
• Shadow-as-border technique: Replaces traditional borders to maintain crisp edges and multi-layered depth.
• Optical alignment: Adjust ±1px when perception beats geometry. No accidental positioning.
• Near-pure white canvas with #171717 text — creating micro-contrast softness.
• Workflow-specific accent colors: Ship Red (#ff5b4f), Preview Pink (#de1d8d), Develop Blue (#0a72ef).
6. Layout & Performance
• Let Browser Size Things: Prefer Flex/Grid over JS measurement. Avoid layout reads in render (getBoundingClientRect, offsetHeight).
• Safe Areas: Full-bleed layouts must account for notches using env(safe-area-inset-*).
• URL as State: Persist UI state (filters, tabs, expanded panels, pagination) in the URL (nuqs) so refresh, sharing, and Back/Forward work perfectly.
• Scrollbars: Only render useful scrollbars. Use overflow-x-hidden on containers to fix unwanted horizontal scroll. Set overscroll-behavior: contain in modals/drawers.
• Virtualization: Large lists (>50 items) must be virtualized (virtua or content-visibility: auto).
• Preloading: Preload critical above-fold images (priority) and fonts (rel="preload" as="font" font-display="swap").
7. Animation & Motion
• Honor Preferences: Always check prefers-reduced-motion and provide a fallback.
• Compositor-friendly: Only animate transform and opacity. Avoid layout-affecting properties (width, height, top).
• Never `transition: all`: Explicitly list properties. all causes jank.
• Interruptible: Animations must be cancelable and respond to user input mid-animation. Avoid autoplay.
• SVG Transforms: Apply CSS transforms to ` wrappers and set transform-box: fill-box; transform-origin: center;` to avoid Safari bugs.
8. Accessibility (A11y)
• Keyboard Focus: focus-visible:ring-* is mandatory. Never use outline-none without a visual focus replacement. Group focus with :focus-within.
• ARIA Labeling: Icon-only buttons must have aria-label. Images need alt (or alt="" if decorative). Decorative icons need aria-hidden="true".
• Async Updates: Use aria-live="polite" for toasts, loading states, and inline validations.
• Locale & i18n: Wrap brand names and code tokens in translate="no" to prevent garbled auto-translation. Format dates/numbers using Intl.DateTimeFormat / Intl.NumberFormat, not hardcoded formats.
10. Agent Prompt Guide (For AI Coding Agents)
When instructing AI (Cursor, Claude, Windsurf) to generate Vercel-styled UI, include this context:
### Quick Tech Stack & Rules
• Framework: React / Next.js / Tailwind CSS
• Typography: Geist Sans/Mono, "liga" enabled, tabular nums for data.
• Spacing/Layout: Tailored Flex/Grid, min-w-0 on flex children for text truncation.
• State: URL-driven state over useState for UI configuration.
### Example Prompts
• "Create a hero section. Headline 48px Geist weight 600, tracking-tight (-2.4px), text-wrap: balance. CTA button is native ``, keeps label but shows spinner on submit, enabled until flight. Uses purely shadow-border `box-shadow: 0 0 0 1px rgba(0,0,0,0.08)`."
• "Build a form input for an API key. Must have explicit ``, input font-size 16px (mobile safe), autocomplete='off', placeholder ending in '…', allows paste, validates on submit. Focus state uses ring-blue-500, no outline-none."
• "Design a 3-column card grid. Cards use multi-layer shadows (ring + 2px ambient + inner white ring). Titles use Title Case. Images have explicit width/height to prevent CLS. Wrap entire card in `` for routing."
Use with MCP
Don't have the MCP? Install it here