# vercel.com

Source: https://vercel.com/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, swiss, confident, serious, technical, calm, premium
Colors: #fafafa, #cfcfcf, #afafaf, #060606, #919191, #717171, #515151, #2d2d2d
Type (h1): GeistSans · 64px/64px · 400 · tracking -3.84px — "Agentic Infrastructure"
Type (h2): GeistSans · 56px/56px · 450 · tracking -3.36px — "Build agents on infrastructure that thinks like them"
Type (body): GeistSans · 24px/32px · 450 · tracking -0.96px — "Notion powers millions of agent conversations daily on Vercel."
Type (button): GeistSans · 14px/21px · 500 — "Get a Demo"
Button (primary): "Get a Demo" — fill #ffffff, text #171717, radius 6px, border 0px, padding 0px 6px, height 32px, type 14px/500
Button (secondary): "Products" — text #4d4d4d, radius 0px, border 0px, padding 0px 0px, height 32px, type 14px/400
Radii: 6px (9), 9999px (5), 100% (1), 4px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/vercel-com/hero.webp?v=4eea2bc5
- Page crop (mid-1): https://media.lvly.design/library/vercel-com/mid-1.webp?v=c090e938
- Page crop (mid-2): https://media.lvly.design/library/vercel-com/mid-2.webp?v=5116c1c2
- Hero (mobile): https://media.lvly.design/library/vercel-com/mobile-hero.webp?v=75c06fe8
- Full page (desktop): https://media.lvly.design/library/vercel-com/full.jpg?v=b890be19
- Full page (mobile): https://media.lvly.design/library/vercel-com/mobile-full.jpg?v=54f2c4e7
- Clip preview (mp4): https://media.lvly.design/library/vercel-com/video-nx7m4l.preview.mp4?v=947dddf0

Vercel's "Agentic Infrastructure" home page is monochrome to the point of austerity: a near-white `#fafafa` ground, a single black triangle standing in for a hero illustration, and Geist Sans at 64px with −3.84px tracking doing all the work a gradient would do elsewhere. The hero is a three-column typographic layout — headline and two pill buttons at the left margin, the logomark centered, three short benefit lines hanging at the right — with a hairline logo row of customers underneath, every mark rendered in flat black. Further down, sections open with an enormous left-aligned or centered sentence ("Ship apps that scale from zero to millions instantly") above a full-bleed customer screenshot, while a small caption block in the left gutter carries a stat and a plain-text feature list. Nothing is coloured, nothing is shadowed, and the only two radii in play are the 6px card/button corner and the fully-round pill; the result reads as an infrastructure company that wants to look inevitable rather than exciting.

## Steal-worthy details

- The hero illustration is the logomark itself, scaled up and centered — a single solid black triangle on `#fafafa` — instead of a product screenshot or 3D render; it turns brand geometry into the page's only "image".
- Three-column hero grid with asymmetric weight: 64px/400 headline flush left, mark in the middle column, and a stack of three 16px one-liners ("For coding agents / To ship apps and agents / Automated by agents") sitting mid-height on the right as a quiet counterweight.
- Display type at weight 400, not 600–700: Geist Sans at 64px with −3.84px letter-spacing (−0.06em) and a line-height of exactly 1.0 gives mass through tightness rather than boldness; body copy is 24px at weight 450 with −0.96px tracking.
- Button pairing: a black pill "Deploy now" beside a white pill "Talk to sales" with a hairline border — same height, same radius, solid vs. outline, zero color.
- Nav CTAs at the right use the 6px radius (Get a Demo outline, Log In outline, Sign Up solid black) while hero buttons are 9999px pills — the site keeps two radii and assigns them by role (chrome = 6px, hero action = pill).
- A one-line announcement strip ("Ship 26 is coming to SF · Get your ticket ›") sits as plain text under the nav with no background bar, no badge, no icon beyond a chevron.
- Customer logo row rendered entirely in flat black with generous spacing and no "Trusted by" label — the wordmarks (Charles Schwab in serif, Supreme in italic) are left in their own typefaces, so the row has texture without color.
- Section pattern: an oversized centered sentence, then a full-width, card-cornered (6px) screenshot of a *customer's* site rather than Vercel's dashboard; a left-gutter caption pairs a stat ("Zapier serves over 100 million monthly website visits on Vercel", second line in gray) with a tiny labelled list ("Features / Global Delivery / Deployment Environments / …") set in the base text size.
- Muted hierarchy done with one gray: the palette is white, `#060606`, and a ramp of neutral grays (`#717171`, `#919191`, `#afafaf`, `#cfcfcf`) — secondary text is simply the same size in mid-gray, never smaller and never coloured.

## Style recipe

Build the page on a near-white ground (`#fafafa`) with pure near-black ink (`#060606`) and a neutral gray ramp (`#515151`, `#717171`, `#919191`, `#afafaf`, `#cfcfcf`) for secondary text and hairlines; use no hue anywhere — no accent color, no gradient, no tinted surface. Set everything in Geist Sans (fallback Inter / system sans). Display type is 64px, weight 400, line-height 1.0, letter-spacing −0.06em; section headlines follow the same weight-400 tight-tracked treatment at 48–64px; lead copy is 24px/32px at weight 450 with −0.04em tracking; UI and caption text is 14–16px at weight 500 with −0.01em. Never bold a headline — get weight from tight tracking and size. Use exactly two radii: 6px for chrome (nav buttons, cards, screenshots) and 9999px for hero-level actions; 32px-tall buttons with 6px horizontal padding-per-side beyond the label, solid black with white text for the primary, white with a 1px `#cfcfcf` hairline and `#171717` text for the secondary. No box-shadows; separate regions with whitespace or a single 1px hairline. Lay heroes out on a three-column grid with a left-flush headline, a single flat black brand glyph as the center "illustration", and a short right-hand stack of benefit lines; below, alternate an oversized centered sentence with a full-bleed customer screenshot, and place small stat + feature-list captions in the left gutter set in body size with the second line greyed. Render partner or customer logos in flat black at generous spacing without a caption. Keep motion to subtle load-in fades; the page should feel like a typeset document, not a product tour.