Notion

设计要点

颜色

• primary#5645d4主按钮，全站统一
• primary-pressed#4534b3主按钮按下
• brand-navy#0a1530首屏深色色带
• brand-navy-mid#1a2a52色带的中间层
• link-blue#0075de文字链接，和紫色分开用
• brand-orange#dd5b00圆点装饰，橙
• brand-pink#ff64c8圆点装饰，粉
• brand-purple#7b3ff2圆点装饰，紫
• brand-teal#2a9d99圆点装饰，青
• brand-yellow#f5d75e高亮
• card-tint-peach#ffe8d4功能卡底色，桃
• card-tint-rose#fde0ec功能卡底色，玫瑰
• card-tint-mint#d9f3e1功能卡底色，薄荷

字体

品牌自己的专有字体，这里用系统字体近似显示。

该做和别做

DESIGN.md 原文

notion/DESIGN.md，881 行。放进项目根目录，Claude Code 和 Cursor 会照着它写界面。

---
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'
---

## Overview

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:**

- Deep navy hero band ({colors.brand-navy}) with scattered sticky-note dots + mesh wire decorative illustrations
- **Signature purple pill** ({colors.primary}) primary CTA — Notion's recognizable "Get Notion free" button color
- Real Notion workspace UI mockup card embedded in the hero with deep drop shadow
- Bold yellow feature banner ({colors.card-tint-yellow-bold}) for high-emphasis content sections
- Pastel feature card palette (peach, rose, mint, lavender, sky, yellow) echoing the live product database properties
- Notion-Sans (Inter-based) across every UI surface
- 8px-rounded buttons (NOT pills), 12px-rounded cards — sober editorial geometry
- 4-tier pricing comparison with dense feature table
- Centered hero layout (different from the left-aligned norm of most B2B SaaS)

## Colors

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

### Brand & Primary

- **Notion Purple** ({colors.primary}): Signature primary CTA color — the unmistakable "Get Notion free" pill button. Reserved for the dominant CTA only.
- **Purple Pressed** ({colors.primary-pressed}): Pressed-state variant
- **Purple Deep** ({colors.primary-deep}): Deeper variant for emphasis
- **Brand Navy** ({colors.brand-navy}): Hero band background — deep navy
- **Brand Navy Deep** ({colors.brand-navy-deep}): Deeper navy for promo banner
- **Brand Navy Mid** ({colors.brand-navy-mid}): Mid-spectrum navy
- **Link Blue** ({colors.link-blue}): Inline text link blue (NOT primary CTA)
- **Link Blue Pressed** ({colors.link-blue-pressed}): Pressed-state link blue

### Brand Color Spectrum (echoes live product database properties)

- **Brand Pink** ({colors.brand-pink}): Pink accent
- **Brand Pink Deep** ({colors.brand-pink-deep}): Deeper pink
- **Brand Orange** ({colors.brand-orange}): Orange accent
- **Brand Orange Deep** ({colors.brand-orange-deep}): Deeper orange-rust
- **Brand Purple** ({colors.brand-purple}): Purple accent variant
- **Brand Purple 300** ({colors.brand-purple-300}): Light purple
- **Brand Purple 800** ({colors.brand-purple-800}): Deep purple for tag text
- **Brand Teal** ({colors.brand-teal}): Teal accent
- **Brand Green** ({colors.brand-green}): Bright green
- **Brand Yellow** ({colors.brand-yellow}): Soft yellow
- **Brand Brown** ({colors.brand-brown}): Brand brown for "earthy" tints

### Card Tints (Pastel Feature Card Backgrounds)

- **Tint Peach** ({colors.card-tint-peach}): Pale peach
- **Tint Rose** ({colors.card-tint-rose}): Pale rose-pink
- **Tint Mint** ({colors.card-tint-mint}): Pale mint-green
- **Tint Lavender** ({colors.card-tint-lavender}): Pale lavender
- **Tint Sky** ({colors.card-tint-sky}): Pale sky-blue
- **Tint Yellow** ({colors.card-tint-yellow}): Pale yellow
- **Tint Yellow Bold** ({colors.card-tint-yellow-bold}): Bold yellow for high-emphasis feature banners ("Ask your on-demand assistants")
- **Tint Cream** ({colors.card-tint-cream}): Cream tint
- **Tint Gray** ({colors.card-tint-gray}): Neutral surface

### Surface

- **Canvas White** ({colors.canvas}): Page background and primary card surface
- **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest, featured pricing tier
- **Surface Soft** ({colors.surface-soft}): Quieter section divisions
- **Hairline** ({colors.hairline}): 1px borders and primary dividers
- **Hairline Soft** ({colors.hairline-soft}): Quieter dividers
- **Hairline Strong** ({colors.hairline-strong}): Stronger 1px border for inputs

### Text

- **Ink Deep** ({colors.ink-deep}): Pure black for emphasis
- **Ink** ({colors.ink}): Primary headlines and body text
- **Charcoal** ({colors.charcoal}): Body emphasis (Notion's signature warm-charcoal)
- **Slate** ({colors.slate}): Secondary text
- **Steel** ({colors.steel}): Tertiary, footer links
- **Stone** ({colors.stone}): Muted labels
- **Muted** ({colors.muted}): Disabled, placeholders
- **On Dark** ({colors.on-dark}): White text on dark surfaces
- **On Dark Muted** ({colors.on-dark-muted}): Reduced-opacity white

### Semantic

- **Success** ({colors.semantic-success}): Confirmation green
- **Warning** ({colors.semantic-warning}): Mid-priority alerts (orange)
- **Error** ({colors.semantic-error}): Validation errors (red)

## Typography

### Font Family

**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.

### Hierarchy

| 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                                  |

### Principles

- Tight hero leading (1.05) on 80px display
- Negative letter-spacing on display sizes (-2px to -0.5px)
- Generous body leading (1.55) for documentation readability
- 600 weight for headlines + 500 for buttons; 400 body

## Layout

### Spacing System

- **Base unit**: 4px (8px primary increment)
- **Tokens**: `{spacing.xxs}` (4px) through `{spacing.hero}` (120px)
- **Section rhythm**: Marketing pages use `{spacing.section-lg}` (96px); pricing tightens to `{spacing.section}` (64px)

### Grid & Container

- 1280px max-width with 32px gutters
- Pricing: 4-tier card row at desktop with dense comparison table
- Homepage: centered hero with workspace mockup below buttons; alternating colorful feature card sections

### Whitespace Philosophy

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

## Elevation & Depth

| 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          |

### Decorative Depth

- Hero workspace mockup card uses deep diffuse drop shadow (Level 3) — significant elevation against the navy band
- Pastel feature cards carry their own visual weight via tint backgrounds
- Sticky-note dot illustrations and mesh wires add atmospheric decoration to navy hero

## Shapes

### Border Radius Scale

| 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.

## Components

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

### Buttons

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

- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.
- Pressed state `button-primary-pressed` deepens to `{colors.primary-pressed}`.
- Disabled state uses `{colors.hairline}` background.

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

- Background `{colors.ink-deep}`, text `{colors.on-dark}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.

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

- Background transparent, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.

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

- Background `{colors.on-dark}`, text `{colors.ink}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.

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

- Background transparent, text `{colors.on-dark}`, border `1px solid {colors.on-dark-muted}`, typography `{typography.button-md}`, padding `10px 18px`, rounded `{rounded.md}`.

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

- Background transparent, text `{colors.ink}`, typography `{typography.button-md}`, padding `8px 12px`, rounded `{rounded.sm}`.

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

- Background transparent, text `{colors.link-blue}`, typography `{typography.body-sm-medium}`, padding `0`.

### Cards & Containers

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

- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.

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

- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.

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

- Background `{colors.card-tint-yellow-bold}`, text `{colors.charcoal}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`.

**`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.

- Each variant uses its corresponding `card-tint-*` color as background, text `{colors.charcoal}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`.

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

- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.

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

- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg}`, border `1px solid {colors.hairline}`.

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

- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.

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

- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.

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

- Background `{colors.surface}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `2px solid {colors.primary}`.

### Inputs & Forms

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

- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px.

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

- Border switches to `2px solid {colors.primary}` (purple).

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

- Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.body-md}`, rounded `{rounded.md}`, height 44px, border `1px solid {colors.hairline}`.

### Tabs

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

- Inactive: text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
- Active: background `{colors.ink-deep}`, text `{colors.on-dark}`.

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

- Inactive: text `{colors.steel}`, no border. Active: text `{colors.ink}`, 2px bottom border in `{colors.ink}`.

### Badges & Status

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

- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

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

- Background `{colors.brand-pink}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

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

- Background `{colors.brand-orange}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

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

- Background `{colors.card-tint-lavender}`, text `{colors.brand-purple-800}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.

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

- Background `{colors.card-tint-peach}`, text `{colors.brand-orange-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.

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

- Background `{colors.card-tint-mint}`, text `{colors.brand-green}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.

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

- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

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

- Background `{colors.surface}`, text `{colors.ink}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.md}`. ("Developers: Get a first look at our new Developer Platform on May 13.")

### Tables

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

- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, border `1px solid {colors.hairline}`.

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

- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.lg}`, bottom border `1px solid {colors.hairline-soft}`.

### Documentation Components

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

- Background `{colors.canvas}`, rounded `{rounded.lg}`, border `1px solid {colors.hairline}`, deep shadow `rgba(15, 15, 15, 0.20) 0px 24px 48px -8px`. Carries actual Notion product UI mock.

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

- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.

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

- Background transparent, text `{colors.steel}`, typography `{typography.body-md-medium}`, padding `{spacing.lg}`.

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

- Background `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.xl}`, bottom border `1px solid {colors.hairline}`.

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

- Background `{colors.surface}`, text `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.section-sm}`.

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

- Background `{colors.surface}`, text `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.section}`.

### Navigation

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

- Background `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline}`.
- Left: Notion "N" logo + "Product / AI / Solutions / Resources / Enterprise / Pricing / Request a demo" links.
- Right: "Get Notion free" purple button + "Log in" link.

### Signature Components

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

- Background `{colors.brand-navy}`, text `{colors.on-dark}`, padding `{spacing.hero}`.
- Layout: centered headline `{typography.hero-display}`, subtitle, button row (`button-primary` purple + `button-secondary-on-dark`), `workspace-mockup-card` below.
- Atmospheric decoration: scattered colorful sticky-note dots and mesh wire illustrations around the hero content (NOT a literal pattern fill — handled per-page via SVG/illustration).

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

- Background `{colors.canvas}`, padding `{spacing.section} {spacing.xxl}`, top border `1px solid {colors.hairline}`.
- 6-column link grid (Product / Download / Resources / Notion for / Company / Legal).

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

- Background transparent, text `{colors.steel}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.

## Do's and Don'ts

### Do

- Use `{colors.primary}` (purple) as the dominant CTA across all surfaces — it's the brand's recognizable signal
- Pair deep navy hero bands ({colors.brand-navy}) with the purple button + decorative sticky-note dots
- Use pastel feature card tints (peach, rose, mint, lavender, sky, yellow) generously
- Use `{colors.card-tint-yellow-bold}` for high-emphasis "Ask the assistant"-style banner cards
- Apply `{rounded.md}` (8px) to buttons consistently — Notion uses rectangles, not pills
- Apply `{rounded.lg}` (12px) to all card families
- Maintain Notion-Sans across every UI surface
- Use the workspace mockup card on hero bands to show actual product UI

### Don't

- Don't use the purple for body text or large background surfaces
- Don't use pill-shaped buttons; Notion's geometry is rectangular-sober
- Don't mix link-blue ({colors.link-blue}) with primary-purple ({colors.primary}) — they have distinct roles
- Don't apply heavy shadows on flat documentation cards
- Don't replace Notion-Sans with a generic Inter

## Responsive Behavior

### Breakpoints

| 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.            |

### Touch Targets

- Buttons render at 40–44px effective height
- Form inputs render at 44px height
- Pill tabs ~32px → 44px on mobile

### Collapsing Strategy

- **Promo banner** stays full-width; truncates at < 480px
- **Top nav** below 1024px collapses to hamburger
- **Hero band**: workspace mockup card moves below text/buttons on mobile
- **Pricing tiers**: 4-column → 2-column tablet → 1-column mobile
- **Feature cards**: 3-up desktop → 2-up tablet → 1-up mobile
- **Hero typography**: 80px → 56px → 48px → 36px
- **Footer**: 6-column desktop → 3-column tablet → accordion mobile

### Image Behavior

- Workspace mockup card maintains aspect ratio
- Pastel illustrations inside feature cards scale proportionally
- Customer logo wall: wordmarks at consistent 60–80px height

## Iteration Guide

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

## Known Gaps

- Specific dark-mode token values not surfaced beyond hero bands
- Animation/transition timings not extracted; recommend 150–200ms ease
- Form validation success state not explicitly captured
- Pastel-tint mapping (which feature uses which tint) is observation-based — the actual brand library may have more entries

原文来自社区项目 awesome-design-md（VoltAgent，MIT 协议），是对品牌公开页面的第三方分析，不是官方资料，原文里的品牌名故意写成了变体。本页的中文说明是原创的。