Typography
scale ratio 1.147- Interdisplay + body400 50086%
- Geist Monocss: GeistMonomono400 500 60014%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 56px | 400 | 1.125 | -0.04em |
| headline | Inter | 44px | 400 | 1.125 | -0.04em |
| title | Inter | 28px | 400 | 1.25 | -0.02em |
| body | Inter | 16px | 400 | 1.25 | -0.02em |
| body-sm | Inter | 13px | 400 | 1 | -0.02em |
| label | Inter | 15px | 400 | 1.5 | -0.01em |
| mono | Geist Mono | 20px | 400 | 1.125 | 0em |
Type scale
Aa12Aa13Aa14Aa15Aa16Aa18Aa20Aa24Aa28Aa32Aa36Aa44Aa52Aa56Aa64Aa72
- Body size
- 16px / 1.375
- Display size
- 56px
- Display tracking
- -0.04em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 5.09:1
- Accent on bg
- 21.00:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 14
- 16
- 18
- 20
- 28
- 32
- 40
- 48
- 64
Corner radii
10pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 70px
Components
exact computed valuesbutton-primary
Sign up
- backgroundColor
- #FFFFFF
- textColor
- #000000
- rounded
- 9999px
- padding
- 0px 18px
- height
- 36px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 500
button-secondary
Read the docs
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 0px 28px
- height
- 44px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 400
- border
- 1px solid #61646B
Layout & motion
- Container
- 1376px
- Grid columns
- 2
- Hero
- left-aligned
- Navigation
- top-sticky
- Page height
- 11,039px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms
- Transitions
- 71
- Keyframes
- 1
- Stack
- next.js, tailwind, shadcn/ui, vercel
Page sections (12)
section labels are heuristic
01nav
02heroThe backend for apps and agents, built to scale on Postgres.
03features?Neon is a complete backend platform with Authentication, Object Storage, Functio Not just a Database.
04feature detail?Create and branch environments the way you work with PRs, with full access via M
05feature detail?Startups ship on the same Neon primitives that enterprise teams run in productio
06feature detail?PLATFORMS DEPLOY WHERE AGENT
07gallery?
08feature detail?The way we build software is changing, but the fundamentals remain the same: and
09feature detail?Optimized cost-performance, without capacity planning.
10feature detail?First founded by Postgres hackers with decades of expertise, Neon is now part of
11cta?The world's most advanced backend platform.
12footer
How Neon compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 56px: smaller than 53% of indexed sites (median 60px).
- Type scale
- 1.15×: flatter than 97% of indexed sites (median 1.28×).
- Container
- 1376px: wider than 96% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 11,039px: longer than 75% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Geist Mono
- One of 14 indexed sites that load Geist Mono (5%).
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Neon use?
Neon uses Inter for headings and body text. Geist Mono (loaded as "GeistMono") is used for code.
What are Neon's brand colors?
Neon's website uses a dark scheme: background #000000, text #FFFFFF, muted text #797D86 and borders #242628.
How is Neon's website laid out?
The most common corner radius is 0px, body text is 16px with 1.375 line height, and the page container is 1376px wide.
