Typography
scale ratio 1.462- Geistcss: GeistSansdisplay + body400 450 50099%
- Geist Monomono400 5001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Geist | 64px | 400 | 1 | -0.06em |
| headline | Geist | 56px | 450 | 1 | -0.06em |
| body | Geist | 14px | 400 | 1.429 | 0em |
| body-sm | Geist | 13px | 400 | 1.385 | 0em |
| mono | Geist Mono | 12px | 500 | 1.667 | 0em |
Type scale
Aa11Aa12Aa13Aa14Aa16Aa24Aa56Aa64
- Body size
- 14px / 1.429
- Display size
- 64px
- Display tracking
- -0.06em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.18:1
- Muted on bg
- 8.10:1
- Accent on bg
- 17.18:1
- Dark mode
- follows system
Space, shape & depth
Spacing scale
- 2
- 4
- 6
- 8
- 12
- 16
- 20
- 24
- 40
Corner radii
67820pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 256px
Components
exact computed valuesbutton-primary
Deploy now
- backgroundColor
- #171717
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 0px 12px
- height
- 40px
- fontFamily
- Geist
- fontSize
- 16px
- fontWeight
- 500
card
- rounded
- 6px
- padding
- 20px
- backgroundColor
- #FAFAFA
Layout & motion
- Container
- 1080px
- Grid columns
- 12
- Hero
- left-aligned
- Navigation
- top-sticky+transparent
- Page height
- 5,930px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 100ms 150ms 200ms 300ms
- Transitions
- 104
- Keyframes
- 0
- Stack
- next.js, tailwind, shadcn/ui, mintlify, vercel
Page sections (9)
section labels are heuristic
01nav
02content?
03heroAgentic Infrastructure
04features?Build agents on infrastructure that thinks like them
05features?Ship apps that scale from zero to millions instantly
06features?Host platforms that serve every customer
07feature detail?Recently shipped
08cta?Built by you, or your agents
09footerSocial
How Vercel compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 64px: larger than 56% of indexed sites (median 60px).
- Type scale
- 1.46×: steeper than 86% of indexed sites (median 1.28×).
- Container
- 1080px: narrower than 78% of indexed sites (median 1242px).
- Text contrast
- 17.2:1: lower than 55% of indexed sites (median 17.6:1).
- Page length
- 5,930px: shorter than 73% of indexed sites (median 8,217px).
- Corner radius
- Mostly 6px, shared by 14 of 274 indexed sites (5%).
- Geist
- One of 11 indexed sites that load Geist (4%).
- Geist Mono
- One of 14 indexed sites that load Geist Mono (5%).
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Vercel use?
Vercel uses Geist (loaded as "GeistSans") for headings and body text. Geist Mono is used for code.
What are Vercel's brand colors?
Vercel's website uses a light scheme: background #FAFAFA, text #171717, muted text #4D4D4D.
How is Vercel's website laid out?
The most common corner radius is 6px, body text is 14px with 1.429 line height, and the page container is 1080px wide.
