vercel.com

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.

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.