Notion

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

개요

Notion은 자신감 있고 일러스트레이션이 풍부한 브랜드 목소리를 통해 올인원 작업 공간을 선보입니다. 홈페이지는 **"야근 근무를 만나보세요."**로 열립니다. 딥 네이비 히어로 밴드({colors.brand-navy})를 중심으로 렌더링되고 브랜드 색상의 점착 메모지 점과 헤드라인 주위에 흩어져 있는 메시 와이어 일러스트레이션으로 장식되어 있습니다. 시그니처 **보라색 알약 기본 CTA** ({colors.primary}) "Get Notion free"는 시각적 중앙에 위치하며 윤곽이 잡힌 "데모 요청" 보조 메시지와 쌍을 이룹니다. 버튼 아래에는 실제 Notion 작업 공간 UI 모형 카드("Ramp HQ" 칸반 보드)가 깊은 확산 그림자와 함께 영웅 밴드에서 나옵니다.

히어로 아래에 있는 페이지는 기능 섹션의 독특한 순서를 순환합니다. 빨간색/파란색/녹색/보라색/청록색 상태 아이콘이 있는 조밀한 스티커 메모 "연중무휴 24시간 작업 유지" 패널; **굵은 노란색** ({colors.card-tint-yellow-bold}) "주문형 도우미에게 물어보세요" 배너 카드 옆에는 보조 UI 모형을 보여주는 오렌지/로즈/민트 파스텔 기능 타일이 있습니다. 브랜드 색상 모형(하늘색 튜토리얼 카드, 밝은 Notion 달력, 갈색/녹슨 추천 슬레이트)이 포함된 "모든 작업을 함께 가져옵니다" 3열 그리드. 가격 페이지에는 4개 계층(무료/플러스/비즈니스/엔터프라이즈)이 수평으로 표시되며, 한 계층(보라색 테두리)이 표시되고 아래에는 밀집된 기능 비교 표가 표시됩니다.

이 시스템은 모든 UI 표면에 걸쳐 Notion-Sans 서체(인터 기반)를 사용합니다. 즉, 다채로운 일러스트레이션과 자연스럽게 어울리는 인본주의적 기하학적 문자입니다. 버튼은 알약이 아닌 `{rounded.md}`(8px) 직사각형입니다. 이는 알약을 보편적으로 사용하는 경쟁사와 Notion의 차분한 직사각형 형상을 구별합니다. 카드는 `{rounded.lg}`(12px)를 일관되게 사용합니다.

**주요 특징:**

• 점착 메모지가 흩어져 있고 메쉬 와이어 장식 일러스트가 있는 딥 네이비 히어로 밴드({colors.brand-navy})
• **시그니처 보라색 알약** ({colors.primary}) 기본 CTA — Notion의 인식 가능한 "Get Notion free" 버튼 색상
• 깊은 그림자가 있는 영웅에 내장된 Real Notion 작업 공간 UI 모형 카드
• 강조된 콘텐츠 섹션을 위한 굵은 노란색 기능 배너({colors.card-tint-yellow-bold})
• 실제 제품 데이터베이스 속성을 반영하는 파스텔 기능 카드 팔레트(복숭아, 장미, 민트, 라벤더, 하늘, 노란색)
• 모든 UI 표면에 걸친 Notion-Sans(인터 기반)
• 8px 둥근 버튼(알약 아님), 12px 둥근 카드 — 차분한 편집 기하학
• 밀집된 특성 테이블을 통한 4계층 가격 비교
• 중앙 영웅 레이아웃(대부분의 B2B SaaS의 왼쪽 정렬 표준과 다름)

색상

> 소스 페이지: notion.com/(홈페이지), /enterprise, /product/ai, /product/agents, /startups, /pricing. 토큰 적용 범위는 6개 페이지 모두에서 동일했습니다.

브랜드 및 기본

• **Notion Purple** ({colors.primary}): 시그니처 기본 CTA 색상 — 틀림없는 "Get Notion free" 알약 버튼입니다. 주요 CTA에만 예약되어 있습니다.
• **보라색 누름** ({colors.primary-pressed}): 누름 상태 변형
• **Purple Deep** ({colors.primary-deep}): 강조를 위한 더 깊은 변형
• **브랜드 네이비** ({colors.brand-navy}): 히어로 밴드 배경 — 딥 네이비
• **Brand Navy Deep** ({colors.brand-navy-deep}): 프로모션 배너를 위한 더 깊은 네이비
• **Brand Navy Mid** ({colors.brand-navy-mid}): 미드스펙트럼 네이비
• **링크 파란색**({colors.link-blue}): 인라인 텍스트 링크 파란색(기본 CTA 아님)
• **링크 파란색 누름** ({colors.link-blue-pressed}): 누른 상태의 링크 파란색

브랜드 색상 스펙트럼(실제 제품 데이터베이스 속성과 동일)

• **브랜드 핑크** ({colors.brand-pink}): 핑크 액센트
• **브랜드 핑크 딥** ({colors.brand-pink-deep}): 좀 더 진한 핑크색
• **브랜드 오렌지** ({colors.brand-orange}): 오렌지 액센트
• **브랜드 오렌지 딥** ({colors.brand-orange-deep}): 더 진한 오렌지-러스트
• **브랜드 퍼플** ({colors.brand-purple}): 보라색 액센트 변형
• **브랜드 퍼플 300** ({colors.brand-purple-300}): 라이트 퍼플
• **Brand Purple 800** ({colors.brand-purple-800}): 태그 텍스트의 진한 보라색
• **Brand Teal** ({colors.brand-teal}): 청록색 액센트
• **브랜드 그린** ({colors.brand-green}): 밝은 녹색
• **브랜드 옐로우** ({colors.brand-yellow}): 소프트 옐로우
• **브랜드 브라운** ({colors.brand-brown}): "흙 같은" 색조를 위한 브랜드 브라운

카드 색조(파스텔 기능 카드 배경)

• **틴트 피치** ({colors.card-tint-peach}): 페일 피치
• **틴트 로즈** ({colors.card-tint-rose}): 페일 로즈 핑크
• **틴트 민트** ({colors.card-tint-mint}): 페일 민트 그린
• **틴트 라벤더** ({colors.card-tint-lavender}): 페일 라벤더
• **Tint Sky** ({colors.card-tint-sky}): 연한 하늘색
• **틴트 옐로우** ({colors.card-tint-yellow}): 연한 노란색
• **Tint Yellow Bold** ({colors.card-tint-yellow-bold}): 강조된 기능 배너를 위한 굵은 노란색("주문형 보조자에게 문의하세요")
• **틴트 크림** ({colors.card-tint-cream}): 크림 틴트
• **틴트 그레이** ({colors.card-tint-gray}): 뉴트럴 표면

표면

• **캔버스 흰색** ({colors.canvas}): 페이지 배경 및 기본 카드 표면
• **표면** ({colors.su

概要

Notion は、自信に満ちたイラストを豊富に使ったブランド ボイスを通じて、オールインワン ワークスペースとしての地位を確立しています。ホームページは、濃いネイビーのヒーロー バンド ({colors.brand-navy}) の中央に表示された **「夜勤に会う。」** で始まり、見出しの周りに散りばめられたブランド カラーの付箋のドットとメッシュ ワイヤーのイラストで装飾されています。特徴的な **紫色の錠剤のプライマリ CTA** ({colors.primary})「Notion を無料で入手」がビジュアルの中心に位置し、輪郭が描かれた「デモをリクエスト」のセカンダリ CTA と組み合わされています。ボタンの下には、実際の Notion ワークスペース UI モックアップ カード (「Ramp HQ」カンバン ボード) が、深い拡散ドロップ シャドウでヒーロー バンドから抜け出ています。

ヒーローの下では、ページは特徴的な一連の機能セクションを循環します。つまり、赤/青/緑/紫/青緑のステータス アイコンが付いている高密度の付箋紙「24 時間 365 日仕事を進め続ける」パネル。 **太字の黄色** ({colors.card-tint- yellow-bold}) 「オンデマンド アシスタントに質問する」バナー カードの両側に、アシスタント UI のモックアップを示すオレンジ/ローズ/ミントのパステル タイルが配置されています。そして、ブランドカラーのモックアップを備えた「すべての作品をまとめて」3 列グリッド (スカイブルーのチュートリアル カード、明るい Notion カレンダー、茶色/錆びた証言のスレート)。価格ページには 4 つの階層 (Free / Plus / Business / Enterprise) が水平に表示され、1 つの階層 (紫色の枠線) とその下に詳細な機能比較表が表示されます。

このシステムは、すべての UI サーフェスで Notion-Sans 書体 (Inter ベース) を使用します。これは、カラフルなイラストと自然に組み合わされる人文主義的な幾何学的な文字です。ボタンは錠剤ではなく `{rounded.md}` (8px) の長方形です。Notion の地味な長方形のジオメトリは、錠剤を普遍的に使用する競合他社とは区別されます。カードは一貫して `{rounded.lg}` (12px) を使用します。

**主な特徴:**

• 付箋ドットを散りばめたディープネイビーのヒーローバンド ({colors.brand-navy}) + メッシュワイヤーの装飾イラスト
• **署名の紫色の錠剤** ({colors.primary}) プライマリ CTA — Notion の認識可能な「Notion を無料で入手」ボタンの色
• 深いドロップ シャドウを備えたヒーローに埋め込まれた Real Notion ワークスペース UI モックアップ カード
• 強調度の高いコンテンツ セクションの太字の黄色の機能バナー ({colors.card-tint- yellow-bold})
• ライブ製品データベースのプロパティをエコーするパステル フィーチャー カード パレット (ピーチ、ローズ、ミント、ラベンダー、スカイ、イエロー)
• すべての UI サーフェスにわたる Notion-Sans (インターベース)
• 8 ピクセルの丸いボタン (錠剤ではありません)、12 ピクセルの丸いカード — 地味な編集ジオメトリ
• 高密度機能テーブルによる 4 層の価格比較
• 中央揃えのヒーロー レイアウト (ほとんどの B2B SaaS の左揃え標準とは異なります)

色

> ソース ページ: notion.com/ (ホームページ)、/enterprise、/product/ai、/product/agents、/startups、/pricing。トークンの適用範囲は 6 ページすべてで同一でした。

ブランドとメイン

• **Notion パープル** ({colors.primary}): 特徴的なプライマリ CTA カラー — 紛れもない「Notion を無料で入手」ピル ボタン。支配的な CTA 専用に予約されています。
• **紫色の押下** ({colors.primary-pressed}): 押された状態のバリアント
• **パープル ディープ** ({colors.primary-deep}): 強調のためのより深いバリアント
• **ブランド ネイビー** ({colors.brand-navy}): ヒーロー バンドの背景 — 深いネイビー
• **ブランド ネイビー ディープ** ({colors.brand-navy-deep}): プロモーション バナー用の濃いネイビー
• **ブランド ネイビー ミッド** ({colors.brand-navy-mid}): ミッドスペクトル ネイビー
• **リンク ブルー** ({colors.link-blue}): インライン テキスト リンク ブルー (プライマリ CTA ではありません)
• **押された状態のリンク青** ({colors.link-blue-pressed}): 押された状態のリンク青

ブランド カラー スペクトル (ライブ製品データベース プロパティをエコー)

• **ブランド ピンク** ({colors.brand-pink}): ピンクのアクセント
• **ブランド ピンク ディープ** ({colors.brand-pink-deep}): より深いピンク
• **ブランド オレンジ** ({colors.brand-orange}): オレンジのアクセント
• **ブランド オレンジ ディープ** ({colors.brand-orange-deep}): より深いオレンジ ラスト
• **ブランド パープル** ({colors.brand-purple}): パープルのアクセントのバリエーション
• **ブランド パープル 300** ({colors.brand-purple-300}): ライトパープル
• **ブランド パープル 800** ({colors.brand-purple-800}): タグ テキストの濃い紫
• **ブランド ティール** ({colors.brand-teal}): ティール アクセント
• **ブランド グリーン** ({colors.brand-green}): 明るい緑色
• **ブランド イエロー** ({colors.brand- yellow}): ソフト イエロー
• **ブランド ブラウン** ({colors.brand-brown}): 「素朴な」色合いのブランド ブラウン

カードの色合い (パステルのフィーチャーカードの背景)

• **ティントピーチ** ({colors.card-tint-peach}): 淡いピーチ
• **ティント ローズ** ({colors.card-tint-rose}): 淡いローズピンク
• **ティントミント** ({colors.card-tint-mint}): 淡いミントグリーン
• **ティント ラベンダー** ({colors.card-tint-lavender}): 淡いラベンダー
• **ティント スカイ** ({colors.card-tint-sky}): 淡いスカイブルー
• **ティントイエロー** ({colors.card-tint- yellow}): 淡い黄色
• **ティントイエロー太字** ({colors.card-tint- yellow-bold}): 強調度の高い機能バナー用の太字黄色 (「オンデマンド アシスタントに質問する」)
• **ティント クリーム** ({colors.card-tint-cream}): クリームの色合い
• **ティント グレー** ({colors.card-tint-gray}): ニュートラルな表面

表面

• **キャンバス ホワイト** ({colors.canvas}): ページの背景とカードの主表面
• **表面** ({colors.su