Skip to content
DesignMunkDesignMunk Submit a site

Vercel

vercel.com
Software Technology Homepage Geist Sans
Share Visit site
vercel.com DESKTOP · 1440
Vercel

AI Breakdown

Design export

---
version: alpha
name: Vercel
description: The platform where humans and AI agents build, ship, and scale software.
colors:
  primary: "#171717"
  secondary: "#7c7c7c"
  neutral: "#fafafa"
  brand-compact-disc-grey: "#cdcdcd"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: GeistSans
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.06em
  headline-md:
    fontFamily: GeistSans
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.058em
  headline-sm:
    fontFamily: GeistSans
    fontSize: 39px
    fontWeight: 400
    lineHeight: 1.21
  headline-xs:
    fontFamily: GeistSans
    fontSize: 31px
    fontWeight: 400
    lineHeight: 1.19
  body-md:
    fontFamily: GeistSans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.05em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    rounded: "{rounded.full}"
    padding: 13px 12px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 13px 12px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Vercel: Agentic Infrastructure

## Overview

Vercel's system reads as engineering-native minimalism: near-black text on near-white surfaces, no gradients, no drop shadows, and typography carrying almost all of the visual weight. The tone is confident and technical rather than playful — built for a developer and increasingly an AI-agent audience, so density is low, whitespace is generous, and nothing competes with the copy or the CLI-style code blocks. An agent extending this system should default to restraint: black, white, one grey, and Geist.

## Colors

- **Primary (#171717):** Near-black. Body copy, headline text, button fills, and the on-surface color for all default text.
- **Secondary (#7c7c7c):** Mid-grey for de-emphasized copy, secondary labels, and supporting eyebrow text.
- **Neutral (#fafafa):** Off-white base for the page background and card surfaces (same value as surface).
- **Surface (#fafafa):** Background for cards and panels; identical to neutral, used to keep components visually flush with the page.
- **On-surface (#171717):** Text color applied on top of surface/neutral backgrounds; identical to primary.
- **Brand Compact Disc Grey (#cdcdcd):** A light steel grey reserved for subtle dividers, disabled states, or decorative accents distinct from the primary text grey.

## Typography

GeistSans is the sole family across every level (headline-lg 64px, headline-md 50px, headline-sm 39px, headline-xs 31px, body-md 24px), all weight 400 with tightening negative letter-spacing as size increases — this is what gives the large headlines their dense, almost architectural feel. GeistSans is NOT distributed via Google Fonts and is self-hosted by Vercel as a proprietary variable font; an agent without access to it should substitute Inter, Söhne, or Suisse Int'l for a comparable geometric-grotesk feel. Geist Mono and Roboto Mono are both available via Google Fonts and are the correct choice for any code-block, CLI-output, or terminal-style UI (as seen in the 'vercel deploy' snippet on this page) — do not substitute a serif or humanist font into monospace contexts.

## Layout

Spacing runs on a compact geometric scale (6px, 16px, 24px, 40px, 80px) that roughly doubles at each step, which keeps small UI details (button padding, icon gaps) tight while allowing full sections to breathe at the 80px xl step. Content sits in a wide, centered column with heavy top-of-section whitespace before any headline — use xl (80px) between major page sections and sm/md (16-24px) inside components.

## Elevation & Depth

There is effectively no shadow system: md, lg, and xl shadows all measure 'none,' and the only real elevation cue is the sm token — a 1px hairline border in rgba(0,0,0,0.08) paired with a 1px light ring, plus an inner shadow for pressed/inset states. Hierarchy is instead built through tonal contrast (near-black on near-white), whitespace, and typographic scale rather than any sense of floating cards or drop shadows.

## Shapes

Two radii only: sm (8px) for cards and contained content blocks, and full (9999px) for every button, giving a hard split between rectangular, workmanlike surfaces and fully rounded, pill-shaped actions. This signals informality in calls-to-action against otherwise square, technical content blocks.

## Components

- **button-primary:** #171717 fill, white text, fully rounded (9999px), 40px height, 13px/12px padding — the default CTA (e.g. 'Deploy now').
- **button-secondary:** transparent/light fill, #171717 text, same full radius and 40px height — used for lower-emphasis actions like 'Talk to sales' or 'Log In'.
- **button-link:** #171717 text, 0px radius, no fill — plain in-line navigation links such as footer and nav items.
- **card:** #fafafa background, #171717 text, 8px radius, 16px padding — flat panel with only the hairline border for edge definition, used across the three-column feature grid.

### Logo Hero Mark
A single black triangle rendered large and centered with a soft drop-glow, floating with no container — the entire visual weight of the hero section rests on this one glyph plus the wordmark headline beside it.

### Feature Trio Blocks
Three stacked sections ('Build agents on infrastructure that thinks like them,' 'Ship apps that scale from zero to millions instantly,' 'Host platforms that serve every customer'), each pairing a customer-proof line ('Notion powers millions of agent conversations daily on Vercel') with a four-item feature list — a repeating rhythm of headline + social proof + capability list.

### Logo Strip
A horizontal row of monochrome customer wordmarks (BLACKBOX.AI, Charles Schwab, DoorDash, OpenAI, Supreme, The Weather Company, Polymarket) rendered flat in dark grey/black with no card container, sitting directly on the page background.

### CLI Snippet Block
A dark, monospace-set code panel showing 'vercel deploy' output with checkmarked build steps and a production URL — the clearest signal that Geist Mono/Roboto Mono is the intended face for any terminal or command content.

### Recently Shipped Cards
A row of product-announcement cards (Passport, eve, Containers) each with a short headline and one-line description, using the 8px card radius and hairline border rather than any shadow to separate them from the page.

## Do's and Don'ts

- Do keep buttons fully pilled (9999px) and cards at 8px — never mix the two radii on the same element.
- Do reserve #7c7c7c for secondary text only; don't use it for primary CTAs or headlines, which must stay #171717.
- Do set monospace content (CLI output, code) in Geist Mono or Roboto Mono, never in GeistSans.
- Don't add drop shadows for card elevation — the system uses a 1px hairline border instead; introducing soft shadows breaks the flat language.
- Do lean on negative letter-spacing (-0.06em to -0.05em) at large sizes to keep GeistSans headlines dense rather than airy.
- Don't overload the hero with imagery — this system's hero pattern is typography plus a single graphic mark, not product screenshots.

## Agent Prompt Guide

Quick reference — Text: #171717 (primary) / #7c7c7c (secondary). Background: #fafafa (neutral/surface). Border: rgba(0,0,0,0.08) 1px hairline. Accent/CTA fill: #171717 with white text. Divider/muted accent: #cdcdcd.

1. Build a hero with a centered headline in GeistSans (or Inter as substitute) at 64px, weight 400, letter-spacing -0.06em, color #171717, on a #fafafa background, with a fully-rounded (9999px) black primary button reading 'Deploy now' and a white secondary button reading 'Talk to sales' beside it.
2. Create a three-column feature card row using #fafafa card backgrounds, 8px corner radius, 16px padding, #171717 text, separated only by a 1px rgba(0,0,0,0.08) border — no drop shadow.
3. Set a terminal/CLI output block in Geist Mono, dark background, light monospace text, showing sequential checkmarked build steps ending in a production URL.
4. Style a logo/customer strip as flat monochrome wordmarks in #171717 or #7c7c7c, evenly spaced, no containers, sitting directly on the #fafafa page background.
5. Write a body paragraph at 24px GeistSans, weight 400, letter-spacing -0.05em, line-height 1.5, color #171717, to sit beneath a headline-sm (39px) section title.

## Similar Brands

- **Linear:** Shares the flat, borderless, high-contrast black-on-white system with a similarly restrained type-first hero, though Linear leans more purple-tinted than pure neutral grey.
- **Stripe:** Similar developer-facing confidence and generous whitespace, but Stripe uses more color and illustrative gradients where Vercel stays strictly monochrome.
- **Raycast:** Comparable dark-UI, monospace-accented aesthetic for a technical audience, though Raycast's marketing site sits on dark backgrounds rather than Vercel's light neutral.
- **Supabase:** Same open-source-developer tone and pill-button/hairline-border language, distinguished by Supabase's signature green accent versus Vercel's pure black-and-white palette.

More like this

Browse Software →
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 1 hour ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 2 hours ago
glideapps.com
Glide Blog Developer Tools
Glide Blog
A bold masthead titled The Column and an above-the-fold email capture lead into a clean two-column layout: a large, image-led feature on…
Blog · 14 hours ago
modulify.ai
Modulify AI
Modulify
Turn a prompt into a real website or web app—edit, refine, publish.
Homepage · 19 hours ago