Typography
scale ratio 1.320- Geistcss: GeistSansdisplay + body400 450 500 550 600100%
- Geist Monomono4000%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Geist | 64px | 450 | 1 | -0.06em |
| headline | Geist | 56px | 450 | 1 | -0.06em |
| body | Geist | 16px | 400 | 1.5 | 0em |
| body-sm | Geist | 14px | 500 | 1.429 | 0em |
| label | Geist | 14px | 400 | 1.429 | 0em |
| mono | Geist Mono | 14px | 400 | 1.429 | 0em |
Type scale
Aa14Aa16Aa18Aa24Aa32Aa56Aa64
- Body size
- 16px / 1.5
- 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
- 5.28:1
- Dark mode
- follows system
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 14
- 16
- 24
- 32
- 40
- 72
- 144
Corner radii
246pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 144px
Components
exact computed valuescard
- rounded
- 2px
- padding
- 0px
- border
- 1px solid #E6E6E6
input
- rounded
- 0px
- height
- 32px
- padding
- 0px 12px
- backgroundColor
- #FFFFFF
Layout & motion
- Container
- 648px
- Grid columns
- 12
- Hero
- centered
- Navigation
- top-sticky
- Page height
- 6,321px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 100ms 150ms 200ms 400ms
- Transitions
- 85
- Keyframes
- 1
- Stack
- next.js, tailwind, radix-ui, shadcn/ui, vercel
Page sections (10)
section labels are heuristic
01nav
02logos
03heroThe React Framework for the Web
04features?Everything you need to build great products on the web
05feature detail?Built on a foundation of fast, production-grade tooling
06gallery?The framework of choice when it matters
07testimonials
08features?Get started in seconds
09feature detail?Ready to deploy?
10footerLegal
How Nextjs compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 64px: larger than 56% of indexed sites (median 60px).
- Type scale
- 1.32×: steeper than 59% of indexed sites (median 1.28×).
- Container
- 648px: narrower than 96% of indexed sites (median 1242px).
- Text contrast
- 17.2:1: lower than 55% of indexed sites (median 17.6:1).
- Page length
- 6,321px: shorter than 67% of indexed sites (median 8,217px).
- Corner radius
- Mostly 2px, shared by 10 of 274 indexed sites (4%).
- 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 Nextjs use?
Nextjs uses Geist (loaded as "GeistSans") for headings and body text. Geist Mono is used for code.
What are Nextjs's brand colors?
Nextjs's website uses a light scheme: background #FAFAFA, surface #E6E6E6, text #171717, muted text #4D4D4D and borders #E6E6E6.
How is Nextjs's website laid out?
The most common corner radius is 2px, body text is 16px with 1.5 line height, and the page container is 648px wide.
