Vercel design.md
A black triangle on white paper, nothing else to distract
Strict black-and-white minimalism: off-white canvas, near-black Geist type at a precise 450 weight with very tight tracking, black pill buttons, a single 3D black triangle as the hero image and customer products shown in frames that fade into the page.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/vercel/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by Vercel, measured from their site: follow its colors, fonts, corners and components on every screen you create or change. Where it calls for a paid font, use the free alternative the file names.
The real page
Captured from vercel.com in English, at 1440 px wide.
Colors
Click a color to copy it. Roles are in English, as in the file.
Type and shape
Geist
Free substitute: Geist 400/500/600 (free on Google Fonts); use 500 for 450 if the variable axis is unavailable
Geist Mono
Free substitute: Geist Mono 400/500 (free on Google Fonts)
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display | 64px | 400 | -3.84px |
| heading | 56px | 450 | -3.36px |
| subheading | 24px | 450 | -0.96px |
| body-lg | 16px | 450 | -0.32px |
| button | 16px | 500 | 0 |
| body | 14px | 400 | 0 |
| button-sm | 14px | 500 | 0 |
| small | 13px | 400 | 0 |
| label | 11px | 500 | 0.2px |
- tags
- 6px
- cards
- 6px
- inputs
- 6px
- buttons
- 9999px
The files
Loading…
Screenshots and measurements taken by Faundr from vercel.com for reference. Inspired by Vercel, not its official design system; Faundr isn’t affiliated with Vercel, and the name and marks belong to it.
Faundr
A design.md only works if someone checks it.
Faundr reads your design.md and checks every screen your AI touches: colors off the guide, rebuilt components, clipped menus, broken mobile.
