# v0 design system: colors, fonts and tokens

> 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.

Source: https://v0.dev, captured 25 June 2026. Page: https://designlang.app/design-system/v0

Neutrals: `#d2d2d2`, `#020202`, `#222222`, `#ffffff`, `#f4f4f4`, `#343434`, `#646464`, `#e2e2e2`, `#959595`

Backgrounds: `#f4f4f4`, `#ffffff`, `#e2e2e2`

## Fonts

- GeistSans (sans), 2368 elements
- GeistMono (mono), 6 elements

## 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

1px, 64px, 96px, 108px, 128px, 192px, 208px

## Radii

4px, 8px, 12px, 16px, 35px

## Motion

Feel: springy. Durations: 100ms, 200ms, 300ms, 500ms, 1000ms.

## Audit

Overall 90/100 (grade A).

- 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

## CSS variables

```css
: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;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/v0-dev/v0-dev-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/v0-dev/v0-dev-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/v0-dev/v0-dev-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/v0-dev/v0-dev-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/v0-dev/v0-dev-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/v0-dev/v0-dev-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/v0-dev/v0-dev-DESIGN.md)

Regenerate: `npx designlang v0.dev`