v0 design system
v0's website (v0.dev) uses a light interface and GeistSans as the main typeface, with GeistMono alongside it. designlang measured 9 font sizes from 10px to 48px, 7 spacing values, 5 corner radii.
v0 colors
The brand roles and neutrals v0.dev renders, with how many elements use each one.
Neutrals
#d2d2d22,468 uses#0202021,695 uses#222222839 uses#ffffff160 uses#f4f4f478 uses#34343462 uses#6464646 uses#e2e2e23 uses#9595952 uses
Backgrounds
#f4f4f4#ffffff#e2e2e2
Text colors
#00000019.09:1 on #f4f4f4#02020218.86:1 on #f4f4f4#22222214.47:1 on #f4f4f4#ffffff1.1:1 on #f4f4f4#6464645.38:1 on #f4f4f4#34343411.32:1 on #f4f4f4
Contrast checks (WCAG 2.1)
Text and background pairs found together on the page; 100% of them pass.
| Text | Background | Ratio | Result |
|---|---|---|---|
#ffffff | #020202 | 20.75:1 | AAA |
#222222 | #ffffff | 15.91:1 | AAA |
#020202 | #ffffff | 20.75:1 | AAA |
v0 fonts and type scale
Every font family and size in use, read from computed styles rather than the CSS source.
Font families
- GeistSans: sans, most text (2,368 elements)
- GeistMono: mono, body (6 elements)
Body text: 13px at weight 500, line height 19.5px.
Weights in use: 400, 500, 600.
Type scale
| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 48px | 600 | 56px | -2.88px | h3, br, h2, span |
| 32px | 600 | 40px | -1.28px | h1, h2 |
| 24px | 600 | 32px | -0.96px | h2 |
| 20px | 600 | 26px | -0.4px | h3 |
| 18px | 400 | 28px | normal | p |
| 16px | 400 | 24px | normal | html, head, meta, link |
| 14px | 500 | 20px | normal | a, svg, path, span |
| 13px | 500 | 19.5px | normal | button, div, span, svg |
| 10px | 400 | 15px | normal | span |
Spacing and radii
Spacing scale
Corner radii
- 4px
- 8px
- 12px
- 16px
- 35px
Medium radii lead, with a few larger ones. 5 distinct box shadows.
Motion
The motion reads as springy.
Durations
xs: 100mssm: 200msmd: 300mslg: 500msxl: 1000ms
Easing
- custom (184 uses):
cubic-bezier(0.4, 0, 0.2, 1) - spring (2 uses):
cubic-bezier(0.34, 1.56, 0.64, 1) - ease-out (12 uses):
cubic-bezier(0, 0, 0.2, 1)
Design system audit
designlang scores how consistently a site uses its own values. How the audit works.
Overall
Components found: buttons (75), cards (131), links (319), navigation (2), footer (2), dropdowns (2).
By category
| Color Discipline | 85/100 |
|---|---|
| Typography Consistency | 80/100 |
| Spacing System | 100/100 |
| Shadow Consistency | 100/100 |
| Border Radius Consistency | 90/100 |
| Accessibility | 100/100 |
| CSS Tokenization | 100/100 |
- No clear primary brand color detected
- 300 !important rules — prefer specificity over overrides
- 5442 duplicate CSS declarations
Download the tokens
The files designlang wrote for v0.dev. Run it yourself for a fresh read: npx designlang v0.dev.
The core values as CSS variables
:root {
--color-background: #f4f4f4;
--color-text: #000000;
--color-neutral-1: #d2d2d2;
--color-neutral-2: #020202;
--color-neutral-3: #222222;
--color-neutral-4: #ffffff;
--font-primary: "GeistSans", sans-serif;
--font-secondary: "GeistMono", monospace;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
}Read v0.dev yourself
Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.
Quick answers
What font does v0 use?
How do I use the v0 design system in my own app?
Is this the official design system?
Measured from the public pages of v0.dev on 25 June 2026. v0 is a trademark of its owner; designlang is not affiliated with it. More: the full v0 brand kit, the token extraction guide and the markdown version of this page.