# Notion.so Design System

> A crisp, monochrome canvas punctuated by electric blue actions and playful hand-drawn illustrations.

**Source:** https://notion.so | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Notion.so employs a high-contrast "monochrome-plus-one" aesthetic. The interface is built on a foundation of pure white `#ffffff` and deep black `#000000`, using electric blue `#0075de` as the exclusive signal for primary interactions and links. Typography is strictly functional, pairing the geometric **NotionInter** for structural clarity with the occasional warmth of **Lyon Text** for long-form quotes. Layouts are characterized by generous whitespace, 12px card radii, and a distinct lack of heavy elevation, relying instead on 1px borders and subtle inset shadows to define hierarchy.

## Signature DNA
1. **The Blue Signal** (Electric blue `#0075de` is used strictly for primary CTAs and text links, creating a high-confidence interaction path against the achromatic base.)
2. **Geometric Rigidity** (A consistent 12px border radius on cards and 8px on buttons creates a structured, modular feel that mirrors the product's "building block" nature.)
3. **Illustrative Warmth** (Hand-drawn, low-fidelity black and white illustrations break the digital grid, providing human character without introducing complex color palettes.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary surface, button text | 83 | 1 | `css_variable:--color-background-base` |
| `{color.black}` | `#000000` | Primary text, borders, secondary button backgrounds | 1008 | 1 | `css_variable:--color-text-normal` |
| `{color.gray-100}` | `#f6f5f4` | Neutral surfaces, hover states, muted backgrounds | 39 | 1 | `css_variable:--color-background-surface-neutral` |
| `{color.gray-600}` | `#615d59` | Muted icons, secondary UI elements | 22 | 1 | `css_variable:--color-gray-600` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.blue-600}` | `#0075de` | Primary CTA background, active links | 15 | 1 | `css_variable:--color-button-primary-background` |
| `{color.blue-500}` | `#097fe8` | Accent surfaces, hover states for blue elements | 13 | 1 | `css_variable:--color-accent-strong` |
| `{color.blue-200}` | `#e6f3fe` | Secondary button backgrounds, soft highlights | 2 | 1 | `css_variable:--color-blue-200` |
| `{color.yellow-400}` | `#ffc95e` | Decorative only (Bento backgrounds) | 2 | 1 | `css_variable:--color-yellow-400` |
| `{color.red-400}` | `#f77463` | Decorative only (Bento backgrounds) | 2 | 1 | `css_variable:--color-red-400` |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.success}` | `#14832b` | Success states and code strings |
| `{color.error}` | `#f64932` | Error text and validation |
| `{color.warning}` | `#ff6d00` | Warning indicators |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **NotionInter** | 400, 500, 600, 700 | Display, Heading, Body, UI | Inter | Proprietary |
| **Lyon Text** | 400 | Editorial quotes, blockquotes | Times New Roman | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display-lg}` | 64px | 64px | -2.125px | 700 | Hero H1 | `h1.semanticTypography` |
| `{text.display-md}` | 54px | 56px | -1.875px | 700 | Section Headers | `h2.sectionHeader_heading` |
| `{text.heading-lg}` | 32px | 40px | -0.75px | 700 | Card Titles | `h2.variantCardTi` |
| `{text.heading-md}` | 26px | 32px | -0.625px | 700 | Small Headings | `h3.downloadApps_appName` |
| `{text.heading-sm}` | 22px | 28px | -0.25px | 700 | Sub-headings | `h2.variantCardTi` |
| `{text.body-lg}` | 16px | 24px | normal | 400 | Primary Body | `div.homepage_main` |
| `{text.body-md}` | 15px | 20px | normal | 400 | Secondary Body | `span.typography_Exx2D` |
| `{text.body-sm}` | 14px | 20px | normal | 400 | Captions/Muted | `p.variantGlobalC` |
| `{text.caption}` | 12px | 16px | 0.125px | 600 | Badges/Labels | `span.badge_badge` |

### Principles
1. **Tight Display Tracking:** Large headlines (42px+) use aggressive negative letter-spacing (-1.5px to -2.125px) to maintain visual density.
2. **Achromatic Body:** All running text is strictly `#000000` or `#ffffff` depending on the canvas; gray is reserved for metadata only.
3. **Weight for Hierarchy:** Notion uses weight (700 vs 400) rather than color to distinguish headings from body text.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.1}` | 4px | 91 |
| `{space.2}` | 8px | 70 |
| `{space.2.5}` | 10px | 95 |
| `{space.4}` | 16px | 36 |
| `{space.6}` | 24px | 24 |
| `{space.16}` | 64px | 13 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sm}` | 5px | Input fields | 25 occurrences |
| `{radius.md}` | 8px | Primary/Secondary Buttons | 41 occurrences |
| `{radius.lg}` | 12px | Content Cards | 54 occurrences |
| `{radius.pill}` | 9999px | Badges, specific CTAs | 25 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(0,0,0,0.04) 0px 4px 18px` | Hovered cards, dropdowns | 11 occurrences |
| `{shadow.deep}` | `rgba(0,0,0,0.05) 0px 23px 52px` | Modals, floating panels | 3 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Get Notion free")
**Pages observed:** 3
**Spec:** Background `{color.blue-600}` (#0075de) | Text `{color.white}` (#ffffff) | Radius `{radius.md}` (8px) | Padding 12px 16px | Typography `{text.body-lg}` (16px/500)
**States observed:** Default | Hover: `{color.blue-700}` (#005bab) | Active: Captured

#### Secondary Button
**Role:** Alternative actions (e.g., "Request a demo")
**Pages observed:** 3
**Spec:** Background `{color.white}` (#ffffff) | Text `{color.black}` (#000000) | Border 1px `{color.black}` | Radius `{radius.md}` (8px) | Padding 12px 16px
**States observed:** Default | Hover: `{color.gray-100}` (#f6f5f4) | Active: Captured

### Tier 2: Patterns

#### Content Card
**Role:** Feature highlights and pricing tiers
**Pages observed:** 2
**Spec:** Background `{color.white}` (#ffffff) | Border 1px `rgba(0,0,0,0.1)` | Radius `{radius.lg}` (12px) | Padding 24px
**States observed:** Default | Hover: `{shadow.subtle}` | Active: Not captured

#### Pricing Toggle
**Role:** Switching between monthly/yearly billing
**Pages observed:** 1
**Spec:** Background `{color.gray-100}` (#f6f5f4) | Radius `{radius.pill}` (9999px) | Padding 4px | Active State: White background with `{shadow.subtle}`
**States observed:** Default | Active: Captured

### Tier 3: Surface-specific

#### Bento Grid Item
**Role:** Complex feature layouts
**Pages observed:** 1
**Spec:** Background `{color.white}` (#ffffff) or Decorative Accents (e.g., `#ffc95e`) | Radius `{radius.lg}` (12px) | Border 1px `{color.black}`
**States observed:** Default | Hover: Not captured

#### Navigation Bar
**Role:** Global header
**Pages observed:** 3
**Spec:** Background `{color.white}` (#ffffff) | Text `{color.black}` (#000000) | Height 64px | Border-bottom 1px `{color.gray-100}`
**States observed:** Default | Hover: `{color.blue-600}` for links

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Gap | 80px - 120px |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked bento cards, hidden top-nav links (hamburger menu) |
| Tablet | 768px | 2-column card grids |
| Desktop | 1440px | Full 12-column layout, 64px horizontal padding |

## Do's
- Use `#0075de` exclusively for interactive elements.
- Apply `-2.125px` letter-spacing to H1 headlines.
- Use 12px border radius for all content containers.
- Pair geometric UI with hand-drawn black/white illustrations.
- Maintain a 4.6:1 contrast ratio for blue text on white.

## Don'ts
- Do not use gray for primary body text; use `#000000`.
- Do not use gradients for button backgrounds.
- Do not use sub-brand decorative colors (like `#ffc95e`) for UI controls.
- Do not exceed 8px radius on primary buttons.
- **Wrong:** Using `#097fe8` as a primary button background. **Right:** Use `#0075de`. **Reason:** `#097fe8` is an accent/hover token, not the primary brand action color.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --notion-blue: #0075de;
  --notion-black: #000000;
  --notion-white: #ffffff;
  --notion-gray-soft: #f6f5f4;
  --radius-card: 12px;
  --radius-button: 8px;
  --shadow-subtle: 0px 4px 18px rgba(0, 0, 0, 0.04);
}
```

## Agent prompt examples
- "Generate a pricing card using a white background, 1px border at rgba(0,0,0,0.1), and a 12px border radius. The primary button should be #0075de with 8px radius."
- "Create a hero section with a 64px bold headline using -2.125px letter spacing and a primary CTA in electric blue."

## Known gaps
- Detailed hover states for decorative bento cards were not captured in source.
- Mobile navigation transition animations were not sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://notion.so | 1440x900 | 2026-06-06 |
| Pricing | https://notion.so/pricing | 1440x900 | 2026-06-06 |
| Mobile Home | https://notion.so | 390x844 | 2026-06-06 |