# Notion design system

> Captured from https://www.notion.com/ on 2026-10-05 by Brooks New Media (https://design.brooksnewmedia.com/styles/notion/). An independent analysis for reference: Notion and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

Notion leads with a 96px headline in its own cut of Inter at weight 600, set on plain white. The primary button is a saturated blue (#0075de) beside a pale blue secondary, corners stay near 8px, and a warm highlight chip sits inside the headline. Black line drawings of people sit beside the product shot and add no new colors.

- Theme: light
- Mood: light, friendly, illustrated
- Category: Productivity

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#ffffff` | The page ground |
| Surface | `#f9f9f8` | Raised panels, bands and cards |
| Text | `#000000` | Primary ink, 21.0:1 on the background |
| Muted text | `#757575` | Supporting copy, 4.6:1 on the background |
| Accent | `#0075de` | Primary actions |
| Border | `#e5e5e5` | Hairlines and dividers |

Full palette, most used first: `#ffffff`, `#000000`, `#1a1a1a`, `#0075de`, `#757575`, `#0d0d0d`, `#005bab`, `#404040`.

## Typography

- **NotionInter**: display and body, 100% of the text. Use Inter. Notion's face is a customized Inter. Stock Inter is very close.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | NotionInter | 96px | 600 | 1.04 | -0.048em |
| Heading | NotionInter | 22px | 700 | 1.27 | -0.011em |
| Subheading | NotionInter | 16px | 700 | 1.5 | 0 |
| Body | NotionInter | 20px | 400 | 1.4 | -0.006em |
| Small | NotionInter | 16px | 700 | 1.5 | 0 |

Sizes in use, largest first: 96px, 72px, 54px, 22px, 20px, 16px, 14px.

## Spacing

Values sit on a 4px grid.
Values in use: 4px, 8px, 10px, 12px, 14px, 24px, 32px.

## Shape

Corner radii, smallest first: 4px, 8px, 12px, pill (9999px).

Shadows, most used first:

- `rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px`
- `rgba(0, 0, 0, 0.008) 0px 0.667px 3.502px 0px, rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px, rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px, rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px, rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px, rgba(0, 0, 0, 0.04) 0px 36px 89px 0px`

## Components

### Primary button ("Get Notion free")

- Fill: #0075de
- Text: #ffffff, 16px at weight 500
- Border: none
- Corner: 8px
- Height: 36px, padding 4px 14px

### Secondary button ("Request a demo")

- Fill: #e6f3fe
- Text: #005bab, 16px at weight 500
- Border: none
- Corner: 8px
- Height: 38px, padding 6px 15px

### Card

- Fill: #ffffff
- Border: 1px solid #e5e5e5
- Corner: 12px
- Shadow: none

## Do

- Set the hero headline at 96px and weight 600, black on white.
- Pair the blue primary with a tinted blue secondary instead of an outline.
- Use simple line illustrations for personality.

## Don't

- Put gradients or dark sections behind the hero.
- Round buttons into pills: they keep an 8px corner.
- Add a second action color.

## CSS variables

```css
:root {
  --color-background: #ffffff;
  --color-surface: #f9f9f8;
  --color-text: #000000;
  --color-text-muted: #757575;
  --color-accent: #0075de;
  --color-border: #e5e5e5;
  --font-display: "NotionInter", "Inter", system-ui, sans-serif;
  --text-display: 96px;
  --weight-display: 600;
  --font-heading: "NotionInter", "Inter", system-ui, sans-serif;
  --text-heading: 22px;
  --weight-heading: 700;
  --font-subheading: "NotionInter", "Inter", system-ui, sans-serif;
  --text-subheading: 16px;
  --weight-subheading: 700;
  --font-body: "NotionInter", "Inter", system-ui, sans-serif;
  --text-body: 20px;
  --weight-body: 400;
  --font-small: "NotionInter", "Inter", system-ui, sans-serif;
  --text-small: 16px;
  --weight-small: 700;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 24px;
  --space-7: 32px;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-05.