Notion Design System

---
name: Notion
url: https://notion.so
version: 2.8.0
tokens:
  colors:
    primary: "#2537b1"
    hero-bg: "#02093a"
    body-bg: "#f6f5f4"
    surface: "#ffffff"
    text-primary: "#37352f"
    text-secondary: "#6b6b6b"
    accent: "#0075de"
    border: "rgba(55, 53, 47, 0.16)"
  typography:
    font-sans: "NotionInter, Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    scale:
      - { name: display, size: "72px", weight: 700, lineHeight: 1.1, letterSpacing: "-0.04em" }
      - { name: heading-1, size: "40px", weight: 700, lineHeight: 1.2, letterSpacing: "-0.02em" }
      - { name: heading-2, size: "28px", weight: 600, lineHeight: 1.25, letterSpacing: "-0.01em" }
      - { name: body, size: "16px", weight: 400, lineHeight: 1.6, letterSpacing: "0" }
  spacing:
    base: "4px"
    scale:
      space-1: "4px"
      space-2: "8px"
      space-4: "16px"
      space-6: "24px"
      space-8: "32px"
  radius:
    card: "8px"
    button: "6px"
    pill: "9999px"
  shadows:
    card: "0 1px 2px rgba(0,0,0,0.05)"
    hover: "0 4px 12px rgba(0,0,0,0.1)"
  breakpoints:
    sm: "640px"
    md: "768px"
    lg: "1024px"
---

# Notion — Design System Specification

## 1. Overview & Visual Rationale
Notion's visual language combines a high-contrast dark navy hero section (`#02093a`) with clean workspace ivory surfaces (`#f6f5f4`).

## 2. Color Palette
- **Hero Navy (`#02093a`):** High-impact top section background.
- **Brand Blue (`#2537b1`):** Primary action buttons and selected states.

## 3. Typography Scale
- Display: 72px / Weight 700
- Heading 1: 40px / Weight 700

## 4. Button Variants
- Primary Button: `background: #2537b1`, `color: #ffffff`, `border-radius: 6px`

## 5. Card Examples
- Content Block Card: `background: #ffffff`, `border: 1px solid rgba(55,53,47,0.16)`

## 6. Form Elements
- Workspace Search Input: `border-radius: 8px`

## 7. Spacing Scale
- 4px, 8px, 12px, 16px, 24px, 32px, 48px

## 8. Border Radius Scale
- `card: 8px`, `button: 6px`, `pill: 9999px`

## 9. Elevation & Depth
- `shadow-card: 0 1px 2px rgba(0,0,0,0.05)`

## 10. Responsive Behavior
- `sm: 640px`, `md: 768px`, `lg: 1024px`