# Notion design system: colors, fonts and tokens

> Notion's website (notion.so) uses a light interface with #455dd3 as its primary color and NotionInter as the main typeface, with Lyon Text alongside it. designlang measured 14 font sizes from 12px to 64px, 19 spacing values, 7 corner radii.

Source: https://notion.so, captured 21 May 2026. Page: https://designlang.app/design-system/notion

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#455dd3` | 2 |
| Secondary | `#0075de` | 31 |
| Accent | `#213183` | 1 |

Neutrals: `#000000`, `#f6f5f4`, `#a39e98`, `#ffffff`, `#615d59`, `#78736f`, `#191918`, `#c0c0c0`, `#dddddd`

Backgrounds: `#ffffff`, `#191918`, `#f6f5f4`, `#02093a`, `#ffc95e`, `#f77463`, `#62aef0`, `#2a9d99`

## Fonts

- NotionInter (sans), 1565 elements
- Lyon Text (serif), 2 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 64px | 700 | 64px | -2.125px | h1 |
| 54px | 700 | 56px | -1.875px | h2 |
| 48px | 400 | 72px | normal | span, svg, path, img |
| 42px | 700 | 48px | -1.5px | input, output |
| 40px | 400 | 60px | normal | span, img |
| 32px | 400 | 40px | normal | blockquote |
| 26px | 700 | 32px | -0.625px | h3 |
| 24px | 500 | 20px | normal | span, svg, path |
| 22px | 700 | 28px | -0.25px | span, h2, div, svg |
| 20px | 400 | 20px | normal | button, span, svg, path |
| 16px | 400 | 24px | normal | html, head, meta, script |
| 15px | 400 | 20px | normal | span, svg, path |
| 14px | 400 | 20px | normal | div, span, a, p |
| 12px | 600 | 16px | 0.125px | span, div, a, h2 |

## Spacing

2px, 20px, 24px, 28px, 32px, 40px, 44px, 48px, 56px, 60px, 64px, 78px, 93px, 125px, 167px, 177px, 186px, 225px, 316px

## Radii

4px, 8px, 12px, 16px, 50px, 100px, pill

## Motion

Feel: smooth. Durations: 75ms, 100ms, 200ms.

## Audit

Overall 84/100 (grade B).

- Color Discipline: 80/100
- Typography Consistency: 80/100
- Spacing System: 85/100
- Shadow Consistency: 90/100
- Border Radius Consistency: 90/100
- Accessibility: 92/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #455dd3;
  --color-secondary: #0075de;
  --color-accent: #213183;
  --color-background: #ffffff;
  --color-text: #000000;
  --color-neutral-1: #000000;
  --color-neutral-2: #f6f5f4;
  --color-neutral-3: #a39e98;
  --color-neutral-4: #ffffff;
  --font-primary: "NotionInter", sans-serif;
  --font-secondary: "Lyon Text", serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/notion-so/notion-so-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/notion-so/notion-so-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/notion-so/notion-so-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/notion-so/notion-so-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/notion-so/notion-so-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/notion-so/notion-so-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/notion-so/notion-so-DESIGN.md)
- [Brand book PDF](https://designlang.app/gallery/notion-so/notion-so.brand.pdf)

Regenerate: `npx designlang notion.so`