Design teardown
Vercel
Black, white, and a 1px line. Geist for words, Geist Mono for anything exact.
vercel.com
Design character
Stark, and proud of the grid
Vercel’s site is a high-contrast monochrome system. The personality is the absence of a brand color doing the work: black type, white canvas, and hairline borders that draw every region. Geist Sans carries the interface. Geist Mono carries commands, paths, and labels. It feels like a developer tool that learned editorial restraint.
Typography
Two families, clearly split. Sans is the product voice, with tight tracking on display and neutral tracking on UI. Mono is not a vibe. It appears when the text is a command, a file, or a token.
Color system
The system is black and white with a small set of grays for secondary text and borders. A blue link color exists in docs, but the marketing surface can go entirely without it. Semantic color is rare and literal.
Spacing and geometry
An 8px grid with a strict sense of alignment. Gaps are even. Nothing is optically sloppy. Density is medium: clearer than a docs site, tighter than an editorial magazine.
Layout
A strict grid. Content aligns to columns, and hairlines often run to the edge of a region so you can see the structure. Prose sits in a narrow measure inside that grid. The page can invert a whole band to black without changing the rules.
Motion
Motion is minimal and quick. The interface should feel immediate. Decorative animation is limited to deploy graphics, and even those are linear and technical.
UI fingerprint
- The palette is essentially black and white. Color is not doing the branding. A single blue may appear for a link, and it is optional. The identity survives in grayscale. Introducing a signature gradient would break the system.
- Every region is drawn with a 1px border. Shadow is not part of the language. The grid is visible on purpose. Structure is a line, not a float. Soft shadows would make the same layout feel like a different company.
- Geist Sans and Geist Mono are a pair with different jobs. Sans is the voice. Mono appears when the string is exact: a command, a path, a key. Using mono for ordinary sentences, or sans for code, blurs the tell.
- Radius stays small and consistent. 6px controls and 8px frames feel like a tool. Full pills are the exception for a tag, not the button style.
- Prose sits in a narrow measure inside a strict grid. The page can be wide. The sentence cannot. Alignment to the grid matters more than centering everything.