Typography
scale ratio 1.228- system-uibody400 50053%
- Geistcss: GeistSansdisplay400 500 60046%
- Geist Monocss: GeistMonomono4001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Geist | 32px | 600 | 1.25 | -0.04em |
| headline | Geist | 14px | 500 | 1.429 | 0em |
| title | Geist | 20px | 600 | 1.3 | -0.02em |
| body | system-ui | 14px | 500 | 1 | 0em |
| mono | Geist Mono | 10px | 400 | 1.5 | 0em |
Type scale
Aa10Aa13Aa14Aa16Aa18Aa20Aa24Aa32Aa48
- Body size
- 14px / 1
- Display size
- 32px
- Display tracking
- -0.04em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.18:1
- Muted on bg
- 8.10:1
- Dark mode
- follows system
Space, shape & depth
Spacing scale
- 2
- 4
- 6
- 8
- 12
- 16
- 24
- 32
- 48
- 64
Corner radii
481216pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
Sign Up
- backgroundColor
- #171717
- textColor
- #FFFFFF
- rounded
- 6px
- padding
- 0px 12px
- height
- 32px
- fontFamily
- system-ui
- fontSize
- 14px
- fontWeight
- 500
- border
- 1px solid #171717
button-secondary
Use your in v0
- textColor
- #171717
- rounded
- 9999px
- padding
- 0px 8px
- height
- 32px
- fontFamily
- system-ui
- fontSize
- 14px
- fontWeight
- 400
- border
- 1px solid #00000014
card
- rounded
- 8px
- padding
- 0px
- backgroundColor
- #FAFAFA
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0
Layout & motion
- Container
- 1264px
- Grid columns
- 3
- Hero
- centered
- Navigation
- top-sticky
- Page height
- 900px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 600ms
- Transitions
- 55
- Keyframes
- 1
- Stack
- next.js, tailwind, radix-ui, shadcn/ui, vercel
Page sections (2)
section labels are heuristic
01nav
02footerSocial
How V0 compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 32px: smaller than 85% of indexed sites (median 60px).
- Type scale
- 1.23×: flatter than 72% of indexed sites (median 1.28×).
- Container
- 1264px: wider than 54% of indexed sites (median 1242px).
- Text contrast
- 17.2:1: lower than 55% of indexed sites (median 17.6:1).
- Page length
- 900px: shorter than 93% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- 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 V0 use?
V0 uses system-ui for body text. Geist (loaded as "GeistSans") is used for headings. Geist Mono (loaded as "GeistMono") is used for code.
What are V0's brand colors?
V0's website uses a light scheme: background #FAFAFA, text #171717, muted text #4D4D4D and borders #EBEBEB.
How is V0's website laid out?
The most common corner radius is fully rounded (pill), body text is 14px with 1 line height, and the page container is 1264px wide.
