Notion Design System

---

version: alpha

name: Notion-design-analysis

description: Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice — anchored by a deep navy hero band ({colors.brand-navy}) decorated with brand-colored sticky-note dots and mesh wire illustrations, a signature purple pill primary CTA ({colors.primary}), and a rich palette of pastel-tinted feature cards that echo the colorful database properties of the live product. The system uses a Notion-Sans (Inter-based) typeface across every UI surface, anchors a 4-tier pricing comparison (Free / Plus / Business / Enterprise), and presents the live workspace UI mockup directly inside the hero band. Coverage spans homepage, Enterprise, Product AI, Product Agents, Startups, and Pricing surfaces.

colors:

primary: "#5645d4"

primary-pressed: "#4534b3"

primary-deep: "#3a2a99"

on-primary: "#ffffff"

brand-navy: "#0a1530"

brand-navy-deep: "#070f24"

brand-navy-mid: "#1a2a52"

link-blue: "#0075de"

link-blue-pressed: "#005bab"

brand-orange: "#dd5b00"

brand-orange-deep: "#793400"

brand-pink: "#ff64c8"

brand-pink-deep: "#a02e6d"

brand-purple: "#7b3ff2"

brand-purple-300: "#d6b6f6"

brand-purple-800: "#391c57"

brand-teal: "#2a9d99"

brand-green: "#1aae39"

brand-yellow: "#f5d75e"

brand-brown: "#523410"

card-tint-peach: "#ffe8d4"

card-tint-rose: "#fde0ec"

card-tint-mint: "#d9f3e1"

card-tint-lavender: "#e6e0f5"

card-tint-sky: "#dcecfa"

card-tint-yellow: "#fef7d6"

card-tint-yellow-bold: "#f9e79f"

card-tint-cream: "#f8f5e8"

card-tint-gray: "#f0eeec"

canvas: "#ffffff"

surface: "#f6f5f4"

surface-soft: "#fafaf9"

hairline: "#e5e3df"

hairline-soft: "#ede9e4"

hairline-strong: "#c8c4be"

ink-deep: "#000000"

ink: "#1a1a1a"

charcoal: "#37352f"

slate: "#5d5b54"

steel: "#787671"

stone: "#a4a097"

muted: "#bbb8b1"

on-dark: "#ffffff"

on-dark-muted: "#a4a097"

semantic-success: "#1aae39"

semantic-warning: "#dd5b00"

semantic-error: "#e03131"

typography:

hero-display:

fontFamily: Notion Sans

fontSize: 80px

fontWeight: 600

lineHeight: 1.05

letterSpacing: -2px

display-lg:

fontFamily: Notion Sans

fontSize: 56px

fontWeight: 600

lineHeight: 1.10

letterSpacing: -1px

heading-1:

fontFamily: Notion Sans

fontSize: 48px

fontWeight: 600

lineHeight: 1.15

letterSpacing: -0.5px

heading-2:

fontFamily: Notion Sans

fontSize: 36px

fontWeight: 600

lineHeight: 1.20

letterSpacing: -0.5px

heading-3:

fontFamily: Notion Sans

fontSize: 28px

fontWeight: 600

lineHeight: 1.25

heading-4:

fontFamily: Notion Sans

fontSize: 22px

fontWeight: 600

lineHeight: 1.30

heading-5:

fontFamily: Notion Sans

fontSize: 18px

fontWeight: 600

lineHeight: 1.40

subtitle:

fontFamily: Notion Sans

fontSize: 18px

fontWeight: 400

lineHeight: 1.50

body-md:

fontFamily: Notion Sans

fontSize: 16px

fontWeight: 400

lineHeight: 1.55

body-md-medium:

fontFamily: Notion Sans

fontSize: 16px

fontWeight: 500

lineHeight: 1.55

body-sm:

fontFamily: Notion Sans

fontSize: 14px

fontWeight: 400

lineHeight: 1.50

body-sm-medium:

fontFamily: Notion Sans

fontSize: 14px

fontWeight: 500

lineHeight: 1.50

caption:

fontFamily: Notion Sans

fontSize: 13px

fontWeight: 400

lineHeight: 1.40

caption-bold:

fontFamily: Notion Sans

fontSize: 13px

fontWeight: 600

lineHeight: 1.40

micro:

fontFamily: Notion Sans

fontSize: 12px

fontWeight: 500

lineHeight: 1.40

micro-uppercase:

fontFamily: Notion Sans

fontSize: 11px

fontWeight: 600

lineHeight: 1.40

letterSpacing: 1px

button-md:

fontFamily: Notion Sans

fontSize: 14px

fontWeight: 500

lineHeight: 1.30

rounded:

xs: 4px

sm: 6px

md: 8px

lg: 12px

xl: 16px

xxl: 20px

xxxl: 24px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 20px

xl: 24px

xxl: 32px

xxxl: 40px

section-sm: 48px

section: 64px

section-lg: 96px

hero: 120px

components:

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: "10px 18px"

button-primary-pressed:

backgroundColor: "{colors.primary-pressed}"

textColor: "{colors.on-primary}"

button-primary-disabled:

backgroundColor: "{colors.hairline}"

textColor: "{colors.muted}"

button-dark:

backgroundColor: "{colors.ink-deep}"

textColor: "{colors.on-dark}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: "10px 18px"

button-secondary:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: "10px 18px"

border: "1px solid {colors.hairline-strong}"

button-on-dark:

backgroundColor: "{colors.on-dark}"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: "10px 18px"

button-secondary-on-dark:

backgroundColor: "transparent"

textColor: "{colors.on-dark}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: "10px 18px"

border: "1px solid {colors.on-dark-muted}"

button-ghost:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.sm}"

padding: "8px 12px"

button-link:

backgroundColor: "transparent"

textColor: "{colors.link-blue}"

typography: "{typography.body-sm-medium}"

padding: "0"

card-base:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline}"

card-feature:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline}"

card-feature-yellow-bold:

backgroundColor: "{colors.card-tint-yellow-bold}"

textColor: "{colors.charcoal}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

card-feature-peach:

backgroundColor: "{colors.card-tint-peach}"

textColor: "{colors.charcoal}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

card-feature-rose:

backgroundColor: "{colors.card-tint-rose}"

textColor: "{colors.charcoal}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

card-feature-mint:

backgroundColor: "{colors.card-tint-mint}"

textColor: "{colors.charcoal}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

card-feature-sky:

backgroundColor: "{colors.card-tint-sky}"

textColor: "{colors.charcoal}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

card-feature-lavender:

backgroundColor: "{colors.card-tint-lavender}"

textColor: "{colors.charcoal}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

card-feature-yellow:

backgroundColor: "{colors.card-tint-yellow}"

textColor: "{colors.charcoal}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

card-feature-cream:

backgroundColor: "{colors.card-tint-cream}"

textColor: "{colors.charcoal}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

card-agent-tile:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline}"

card-template:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.lg}"

border: "1px solid {colors.hairline}"

card-startup-perk:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline}"

pricing-card:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline}"

pricing-card-featured:

backgroundColor: "{colors.surface}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "2px solid {colors.primary}"

text-input:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: "{spacing.sm} {spacing.md}"

border: "1px solid {colors.hairline-strong}"

height: 44px

text-input-focused:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

border: "2px solid {colors.primary}"

search-pill:

backgroundColor: "{colors.surface}"

textColor: "{colors.steel}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: "{spacing.sm} {spacing.md}"

height: 44px

border: "1px solid {colors.hairline}"

pill-tab:

backgroundColor: "transparent"

textColor: "{colors.steel}"

typography: "{typography.body-sm-medium}"

rounded: "{rounded.full}"

padding: "{spacing.xs} {spacing.md}"

border: "1px solid {colors.hairline}"

pill-tab-active:

backgroundColor: "{colors.ink-deep}"

textColor: "{colors.on-dark}"

rounded: "{rounded.full}"

border: "1px solid {colors.ink-deep}"

segmented-tab:

backgroundColor: "transparent"

textColor: "{colors.steel}"

typography: "{typography.body-sm-medium}"

padding: "{spacing.sm} {spacing.md}"

border: "0 0 2px transparent solid"

segmented-tab-active:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.body-sm-medium}"

border: "0 0 2px {colors.ink} solid"

badge-purple:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-pink:

backgroundColor: "{colors.brand-pink}"

textColor: "{colors.on-primary}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-orange:

backgroundColor: "{colors.brand-orange}"

textColor: "{colors.on-primary}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-tag-purple:

backgroundColor: "{colors.card-tint-lavender}"

textColor: "{colors.brand-purple-800}"

typography: "{typography.caption-bold}"

rounded: "{rounded.sm}"

padding: "2px 8px"

badge-tag-orange:

backgroundColor: "{colors.card-tint-peach}"

textColor: "{colors.brand-orange-deep}"

typography: "{typography.caption-bold}"

rounded: "{rounded.sm}"

padding: "2px 8px"

badge-tag-green:

backgroundColor: "{colors.card-tint-mint}"

textColor: "{colors.brand-green}"

typography: "{typography.caption-bold}"

rounded: "{rounded.sm}"

padding: "2px 8px"

badge-popular:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

promo-banner:

backgroundColor: "{colors.surface}"

textColor: "{colors.ink}"

typography: "{typography.body-sm-medium}"

padding: "{spacing.sm} {spacing.md}"

hero-band-dark:

backgroundColor: "{colors.brand-navy}"

textColor: "{colors.on-dark}"

rounded: "0"

padding: "{spacing.hero}"

workspace-mockup-card:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "0"

border: "1px solid {colors.hairline}"

shadow: "rgba(15, 15, 15, 0.2) 0px 24px 48px -8px"

cta-banner-light:

backgroundColor: "{colors.surface}"

textColor: "{colors.ink}"

rounded: "{rounded.lg}"

padding: "{spacing.section}"

comparison-table:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.md}"

border: "1px solid {colors.hairline}"

comparison-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

padding: "{spacing.md} {spacing.lg}"

border: "0 0 1px {colors.hairline-soft} solid"

testimonial-card:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline}"

logo-wall-item:

backgroundColor: "transparent"

textColor: "{colors.steel}"

typography: "{typography.body-md-medium}"

padding: "{spacing.lg}"

faq-accordion-item:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.md}"

padding: "{spacing.xl}"

border: "0 0 1px {colors.hairline} solid"

stat-row:

backgroundColor: "{colors.surface}"

textColor: "{colors.ink}"

rounded: "{rounded.lg}"

padding: "{spacing.section-sm}"

footer-region:

backgroundColor: "{colors.canvas}"

textColor: "{colors.charcoal}"

typography: "{typography.body-sm}"

padding: "{spacing.section} {spacing.xxl}"

border: "1px solid {colors.hairline}"

footer-link:

backgroundColor: "transparent"

textColor: "{colors.steel}"

typography: "{typography.body-sm}"

padding: "{spacing.xxs} 0"

---

Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice. The homepage opens with **"Meet the night shift."** rendered centered over a deep navy hero band ({colors.brand-navy}), decorated with brand-colored sticky-note dots and mesh wire illustrations scattered around the headline. The signature **purple pill primary CTA** ({colors.primary}) "Get Notion free" sits at the visual center, paired with an outlined "Request a demo" secondary. Below the buttons, a real Notion workspace UI mockup card (the "Ramp HQ" kanban board) breaks out of the hero band with a deep diffuse drop shadow.

Below the hero, the page cycles through a distinctive sequence of feature sections: a dense sticky-note "Keep work moving 24/7" panel with red/blue/green/purple/teal status icons; a **bold yellow** ({colors.card-tint-yellow-bold}) "Ask your on-demand assistants" banner card flanked by orange/rose/mint pastel feature tiles showing assistant UI mockups; and a "Bring all your work together" 3-column grid with brand-colored mockups (sky-blue tutorial card, light Notion calendar, brown/rust testimonial slate). The pricing page renders 4 tiers (Free / Plus / Business / Enterprise) horizontally with one tier featured (purple-bordered) and a dense feature comparison table running below.

The system uses a Notion-Sans typeface (Inter-based) across every UI surface — humanist-geometric character that pairs naturally with the colorful illustrations. Buttons are `{rounded.md}` (8px) rectangles, NOT pills — distinguishing Notion's sober rectangular geometry from competitors that use pills universally. Cards use `{rounded.lg}` (12px) consistently.

**Key Characteristics:**

> Source pages: notion.com/ (homepage), /enterprise, /product/ai, /product/agents, /startups, /pricing. Token coverage was identical across all six pages.

**Notion Sans** (primary): Notion's custom Inter-based variable typeface. Fallbacks: Inter, -apple-system, system-ui, 'Segoe UI', Helvetica, sans-serif. Humanist-geometric character used across every UI surface.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.hero-display}` | 80px | 600 | 1.05 | -2px | Hero ("Meet the night shift") |

| `{typography.display-lg}` | 56px | 600 | 1.10 | -1px | Section openers |

| `{typography.heading-1}` | 48px | 600 | 1.15 | -0.5px | Page-level headlines ("Try for free") |

| `{typography.heading-2}` | 36px | 600 | 1.20 | -0.5px | Subsection headlines ("Keep work moving 24/7") |

| `{typography.heading-3}` | 28px | 600 | 1.25 | 0 | Card titles |

| `{typography.heading-4}` | 22px | 600 | 1.30 | 0 | Feature tile titles |

| `{typography.heading-5}` | 18px | 600 | 1.40 | 0 | FAQ questions |

| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle |

| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Primary body text |

| `{typography.body-md-medium}` | 16px | 500 | 1.55 | 0 | Body emphasis |

| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body |

| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Active sidebar, button labels |

| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Badge labels |

| `{typography.button-md}` | 14px | 500 | 1.30 | 0 | Button labels |

Marketing surfaces use generous breathing room between feature card bands. Workspace mockup card on hero gets full-width treatment with deep drop shadow.

| Level | Treatment | Use |

|---|---|---|

| 0 (flat) | No shadow; `{colors.hairline}` border | Default cards, table rows |

| 1 (subtle) | `rgba(15, 15, 15, 0.04) 0px 1px 2px 0px` | Hover-elevated tiles |

| 2 (card) | `rgba(15, 15, 15, 0.08) 0px 4px 12px 0px` | Feature cards |

| 3 (mockup) | `rgba(15, 15, 15, 0.20) 0px 24px 48px -8px` | Hero workspace mockup card |

| 4 (modal) | `rgba(15, 15, 15, 0.16) 0px 16px 48px -8px` | Modals, dropdowns |

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Tag chips |

| `{rounded.sm}` | 6px | Type badges |

| `{rounded.md}` | 8px | Buttons, inputs, search-pill |

| `{rounded.lg}` | 12px | Cards, pricing tiers, agent tiles, workspace mockup |

| `{rounded.xl}` | 16px | Larger feature panels |

| `{rounded.xxl}` | 20px | Featured product showcases |

| `{rounded.xxxl}` | 24px | Larger feature cards |

| `{rounded.full}` | 9999px | Status badges, pill tabs (NOT regular buttons) |

Notion's geometry is sober-editorial — `{rounded.md}` (8px) buttons distinguish it from pill-button-everywhere brands.

> Per the no-hover policy, hover states are NOT documented.

**`button-primary`** — Signature purple rectangular primary CTA, the dominant action.

**`button-dark`** — Black rectangular CTA on light backgrounds.

**`button-secondary`** — Outlined rectangular for secondary actions ("Request a demo").

**`button-on-dark`** — White button on dark hero bands.

**`button-secondary-on-dark`** — Outlined button on dark.

**`button-ghost`** — Quieter ghost button.

**`button-link`** — Inline blue text link (NOT primary purple).

**`card-base`** — Standard content card.

**`card-feature`** — Feature card with larger padding.

**`card-feature-yellow-bold`** — Bold yellow feature banner for high-emphasis content ("Ask your on-demand assistants").

**`card-feature-peach`** + **`card-feature-rose`** + **`card-feature-mint`** + **`card-feature-sky`** + **`card-feature-lavender`** + **`card-feature-yellow`** + **`card-feature-cream`** — Pastel-tinted feature cards.

**`card-agent-tile`** — Agent assistant tile.

**`card-template`** — Template thumbnail card.

**`card-startup-perk`** — Startup-program perk grid item.

**`pricing-card`** — Standard pricing tier card.

**`pricing-card-featured`** — Featured pricing tier (Plus or Business — purple-bordered).

**`text-input`** — Standard text field.

**`text-input-focused`** — Activated state.

**`search-pill`** — Search bar.

**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav for top-level switching.

**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation.

**`badge-purple`** — Purple status badge (matches primary CTA).

**`badge-pink`** — Pink accent badge.

**`badge-orange`** — Orange accent badge.

**`badge-tag-purple`** — Soft-purple feature tag chip.

**`badge-tag-orange`** — Soft-orange feature tag.

**`badge-tag-green`** — Soft-mint feature tag.

**`badge-popular`** — "Most Popular" tier indicator.

**`promo-banner`** — Light surface promo strip ABOVE the top nav.

**`comparison-table`** — Pricing feature comparison table.

**`comparison-row`** — Individual feature row.

**`workspace-mockup-card`** — Embedded Notion workspace UI mockup on hero band ("Ramp HQ" kanban board).

**`testimonial-card`** — Customer testimonial card.

**`logo-wall-item`** — Customer logo wordmark cell.

**`faq-accordion-item`** — FAQ panel.

**`stat-row`** — Stats strip with bar chart visualization ("More productivity. Fewer tools.").

**`cta-banner-light`** — Light surface CTA banner.

**Top Navigation (Marketing)** — Sticky white bar.

**`hero-band-dark`** — Deep navy hero band with embedded workspace mockup and decorative dots/wires.

**`footer-region`** — Multi-column light footer.

**`footer-link`** — Individual footer link.

| Name | Width | Key Changes |

|---|---|---|

| Mobile (small) | < 480px | Single column. Hero 36px. Pricing 1-up. |

| Mobile (large) | 480 – 767px | Feature cards 2-up. Hero 48px. |

| Tablet | 768 – 1023px | 2-column feature grids. Hero 56px. |

| Desktop | 1024 – 1279px | 4-tier pricing card row. Hero 72px. |

| Wide Desktop | ≥ 1280px | Full 80px hero presentation. |

1. Focus on ONE component at a time

2. Reference component names and tokens directly

3. Run `npx @google/design.md lint DESIGN.md` after edits

4. Add new variants as separate `components:` entries

5. Default to `{typography.body-md}` for body

6. Keep `{colors.primary}` (purple) as the primary CTA — distinct from `{colors.link-blue}` for inline links

7. Use `{rounded.md}` for buttons (rectangles), `{rounded.lg}` for cards, `{rounded.full}` for pill tabs/badges only