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 서체(인터 기반)를 사용합니다. 즉, 다채로운 일러스트레이션과 자연스럽게 어울리는 인본주의적 기하학적 문자입니다. 버튼은 알약이 아닌 ``(8px) 직사각형입니다. 알약을 보편적으로 사용하는 경쟁업체와 Notion의 차분한 직사각형 형상을 구별합니다. 카드는 ``(12px)을 일관되게 사용합니다.

**주요 특성:**

• 점착 메모지가 흩어져 있고 메쉬 와이어 장식 일러스트가 있는 딥 네이비 영웅 밴드({colors.brand-navy})
• **시그니처 보라색 알약** ({colors.primary}) 기본 CTA — Notion의 인식 가능한 "Get Notion free" 버튼 색상
• 깊은 그림자가 있는 영웅에 삽입된 실제 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 Purple** ({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}): 연한 노란색
• **Tint Yellow Bold** ({colors.card-tint-yellow-bold}): 강조된 기능 배너를 위한 굵은 노란색("주문형 도우미에게 문의하세요")
• **틴트 크림** ({colors.card-tint-cream}): 크림 틴트
• **틴트 그레이**({colors.card-tint-gray}): 중립 표면

표면

• **캔버스 흰색**({colors.canvas}): 페이지 배경 및 기본 카드 표면
• **표면**({colors.surface}): 미묘한 섹션 배경, 검색 알약 나머지, 주요 가격 책정 계층
• **부드러운 표면**({colors.surface-soft}): 더 조용한 섹션 분할
• **가는 선** ({colors.hairline}): 1px 테두리 및 기본 구분선
• **헤어라인 소프트**({colors.hairline-soft}): 조용한 칸막이
• **가는 선 강력** ({colors.hairline-strong}): 입력에 대한 1px 테두리가 더 강력함

텍스트

• **잉크 깊이**({colors.ink-deep}): 강조를 위한 순수 검정색
• **잉크**({colors.ink}): 기본 헤드라인 및 본문 텍스트
• **차콜** ({colors.charcoal}): 바디 강조(노션의 시그니처 따뜻한 차콜)
• **슬레이트**({colors.slate}): 보조 텍스트
• **스틸**({colors.steel}): 3차, 바닥글 링크
• **스톤** ({colors.stone}): 음소거된 라벨
• **음소거됨**({colors.muted}): 비활성화됨, 자리 표시자
• **어두운 곳**({colors.on-dark}): 어두운 표면의 흰색 텍스트
• **어두운 음소거 시**({colors.on-dark-muted}): 불투명도가 감소된 흰색

의미

• **성공** ({colors.semantic-success}): 녹색 확인
• **경고** ({colors.semantic-warning}): 중간 우선순위 경고(주황색)
• **오류**({colors.semantic-error}): 유효성 검사 오류(빨간색)

타이포그래피___HTMLTAG _409___

글꼴군

**Notion Sans**(기본): Notion의 사용자 정의 Inter-based 변수 서체입니다. 폴백: Inter, -apple-system, system-ui, 'Segoe UI', Helvetica, sans-serif. 모든 UI 표면에 사용되는 인본주의적 기하학적 문자입니다.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

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

| _`` | 80px | 600 | 1.05 | -2px | 영웅("야근을 만나다") |

| _`` | 56px | 600 | 1.10 | -1픽셀 | 섹션 오프너 |

| _`` | 48px | 600 | 1.15 | -0.5px | 페이지 수준 헤드라인("무료로 사용해 보기") |

| _`` | 36px | 600 | 1.20 | -0.5px | 하위 섹션 헤드라인("연중무휴 24시간 작업 진행") |

| _`` | 28px | 600 | 1.25 | 0 | 카드 제목 |

| _`` | 22px | 600 | 1.30 | 0 | 기능 타일 제목 |

| _`` | 18px | 600 | 1.40 | 0 | FAQ 질문 |

| _`` | 18px | 400 | 1.50 | 0 | 영웅 부제 |

| _`` | 16px | 400 | 1.55 | 0 | 기본 본문 텍스트 |

| _`` | 16px | 500 | 1.55 | 0 | 본문 강조 |

| _`` | 14px | 400 | 1.50 | 0 | 보조 본문 |

| _`` | 14px | 500 | 1.50 | 0 | 활성 사이드바, 버튼 라벨 |

| _`` | 13px | 600 | 1.40 | 0 | 배지 라벨 |

| _`` | 14px | 500 | 1.30 | 0 | 버튼 라벨 |

원칙

• 80px 디스플레이에서 빡빡한 영웅 선도(1.05)
• 디스플레이 크기의 음수 문자 간격(-2px ~ -0.5px)
• 문서 가독성을 위한 넉넉한 본문 행간(1.55)
• 헤드라인 가중치 600 + 버튼 가중치 500; 400 본문

레이아웃

간격 시스템

• **기본 단위**: 4px(8px 기본 증분)
• **토큰**: ``(4px) ~ ``(120px)
• **섹션 리듬**: 마케팅 페이지에서는 ``(96px)을 사용합니다. 가격이 ``(64px)
으로 인하됩니다.

그리드 및 컨테이너

• _1280px 최대 너비(32px 거터 포함)
• 가격: 밀집된 비교표가 포함된 데스크탑의 4계층 카드 행
• 홈페이지: 버튼 아래에 작업 공간 모형이 있는 중앙 영웅; 다채로운 기능 카드 섹션을 번갈아 사용

공백 철학

마케팅 표면은 기능 카드 밴드 사이에 넉넉한 호흡 공간을 사용합니다. Hero의 작업공간 모형 카드는 깊은 그림자로 전체 너비를 처리합니다.

고도 및 깊이

| 레벨 | 치료 | |

사용

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

| 0(플랫) | 그림자가 없습니다. _`` 테두리 | 기본 카드, 테이블 행 |

| 1(미묘함) | _`rgba(15, 15, 15, 0.04) 0px 1px 2px 0px` | 마우스 오버 타일 |

| 2 (카드) | _`rgba(15, 15, 15, 0.08) 0px 4px 12px 0px` | 기능 카드 |

| 3 (모형) | _`rgba(15, 15, 15, 0.20) 0px 24px 48px -8px` | 히어로 작업공간 모형 카드 |

| 4(모달) | _`rgba(15, 15, 15, 0.16) 0px 16px 48px -8px` | 모달, 드롭다운 |

장식적 깊이

• Hero 작업 공간 모형 카드는 깊은 확산 그림자(레벨 3)를 사용합니다. — 해군 밴드에 비해 상당한 높이
• 파스텔 기능 카드는 색조 배경을 통해 고유한 시각적 무게를 전달합니다
• 점착 메모 일러스트와 메쉬 와이어가 해군 영웅에게 분위기 있는 장식을 더해줍니다

도형

테두리 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 4픽셀 | 태그 칩 |

| _`` | 6픽셀 | 배지 입력 |

| _`` | 8픽셀 | 버튼, 입력, 검색 알약 |

| _`` | 12px | 카드, 가격 책정 계층, 에이전트 타일, 작업 공간 모형 |

| _`` | 16px | 더 큰 기능 패널 |

| _`` | 20픽셀 | 주요 제품 쇼케이스 |

| _`` | 24px | 더 큰 기능 카드 |

| _`` | 9999px | 상태 배지, 알약 탭(일반 버튼 아님) |

Notion의 기하학은 냉정한 편집입니다. — ``(8px) 버튼은 모든 곳에 알약 버튼을 사용하는 브랜드와 구별됩니다.

구성요소

> 마우스 오버 금지 정책에 따라 마우스 오버 상태는 문서화되지 않습니다.

버튼

**`button-primary`** — 시그니처 보라색 직사각형 기본 CTA, 주요 액션.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `10px 18px`, 반올림 ``.
• 누른 상태 `button-primary-pressed`는 ``으로 깊어집니다.
• 비활성화 상태에서는 `` 배경을 사용합니다.

**`button-dark`** — 밝은 배경의 검은색 직사각형 CTA.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `10px 18px`, 반올림 ``.

**`button-secondary`** — 보조 작업을 위한 윤곽선이 있는 직사각형("데모 요청").

• 배경 투명, 텍스트 ``, 테두리 `1px solid `, 타이포그래피 ``, 패딩 `10px 18px`, 둥근 ``.

**`button-on-dark`** — 다크 히어로 밴드의 흰색 버튼.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `10px 18px`, 반올림 ``.

**`button-secondary-on-dark`** — 어두운 부분에 윤곽선이 있는 버튼.

• 배경 투명, 텍스트 ``, 테두리 `1px solid `, 타이포그래피 ``, 패딩 `10px 18px`, 둥근 ``.

**`button-ghost`** — 더 조용한 고스트 버튼.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 `8px 12px`, 반올림 ``.

**`button-link`** — 인라인 파란색 텍스트 링크(기본 보라색 아님).

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 `0`.___HTMLTAG_58 8___

카드 및 용기

**`card-base`** — 표준 콘텐츠 카드.

• 배경 ``, 반올림 ``, 패딩 ``, 테두리 `1px solid `.

**`card-feature`** — 패딩이 더 큰 기능 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`card-feature-yellow-bold`** — 강조가 높은 콘텐츠를 위한 굵은 노란색 기능 배너("주문형 도우미에게 문의하세요").

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.

**`card-feature-peach`** + **`card-feature-rose`** + **`card-feature-mint`** + **`card-feature-sky`** + **`card-feature-lavender`** + **`card-feature-yellow`** + **`card-feature-cream`** — 파스텔 색상의 기능 카드.

• 각 변형은 해당 `card-tint-*` 색상을 배경, 텍스트 ``, 반올림 ``, 패딩 ``으로 사용합니다.

**`card-agent-tile`** — 상담원 보조 타일.

• 배경 ``, 반올림 ``, 패딩 ``, 테두리 `1px solid `.

**`card-template`** — 템플릿 썸네일 카드.

• 배경 ``, 반올림 ``, 패딩 ``, 테두리 `1px solid `.

**`card-startup-perk`** — 시작 프로그램 혜택 그리드 항목.

• 배경 ``, 반올림 ``, 패딩 ``, 테두리 `1px solid `.

**`pricing-card`** — 표준 가격 등급 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`pricing-card-featured`** — 주요 가격 책정 계층(플러스 또는 비즈니스 — 보라색 테두리).

• 배경 ``, 반올림 ``, 패딩 ``, 테두리 `2px solid `.

입력 및 양식

**`text-input`** — 표준 텍스트 필드.

• 배경 ``, 텍스트 ``, 테두리 `1px solid `, 둥근 ``, 패딩 ` `, 높이 44px.

**`text-input-focused`** — 활성화된 상태.

• 경계는 `2px solid `(보라색)으로 전환됩니다.

**`search-pill`** — 검색창.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 높이 44px, 테두리 `1px solid `.

탭

**`pill-tab`** + **`pill-tab-active`** — 최상위 수준 전환을 위한 알약 스타일 탭 탐색

• 비활성: 텍스트 ``, 테두리 `1px solid `, 패딩 ` `, 반올림 ``.
• 활성: 배경 ``, 텍스트 ``.

**`segmented-tab`** + **`segmented-tab-active`** — 밑줄 스타일 탭 탐색.

• 비활성: 텍스트 ``, 테두리 없음. 활성: 텍스트 ``, ``.
의 2px 하단 테두리

배지 및 상태

**`badge-purple`** — 보라색 상태 배지(기본 CTA와 일치).

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.

**`badge-pink`** — 핑크색 액센트 배지.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.

**`badge-orange`** — 주황색 액센트 배지.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.

**`badge-tag-purple`** — 부드러운 보라색 기능 태그 칩.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `2px 8px`.

**`badge-tag-orange`** — 부드러운 주황색 기능 태그.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `2px 8px`.

**`badge-tag-green`** — 소프트 민트 기능 태그.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `2px 8px`.

**`badge-popular`** — "가장 인기 있는" 등급 표시기.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.

**`promo-banner`** — 상단 탐색 위의 밝은 표면 프로모션 스트립

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 ` `. ("개발자 여러분: 5월 13일에 새로운 개발자 플랫폼을 먼저 살펴보세요.")

테이블

**`comparison-table`** — 가격 기능 비교표.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 테두리 `1px solid `.

**`comparison-row`** — 개별 기능 행.

• 배경 ``, 텍스트 ``, 패딩 ` `, 하단 테두리 `1px solid `.

문서 구성요소

**`workspace-mockup-card`** — 히어로 밴드("Ramp HQ" 칸반 보드)에 내장된 Notion 작업 공간 UI 모형.

• 배경 ``, 둥근 ``, 테두리 `1px solid `, 깊은 그림자 `rgba(15, 15, 15, 0.20) 0px 24px 48px -8px`. 실제 Notion 제품 UI 모형을 전달합니다.

**`testimonial-card`** — 고객 추천 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`logo-wall-item`** — 고객 로고 워드마크 셀.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 ``.

**`faq-accordion-item`** — FAQ 패널.

• 배경 ``, 둥근 ``, 패딩 ``, 하단 테두리 `1px solid `.

**`stat-row`** — 막대 차트 시각화가 포함된 통계 스트립("생산성 향상. 도구 수가 적습니다.").

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.

**`cta-banner-light`** — 밝은 표면 CTA 배너.

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.

탐색

**상단 탐색(마케팅)** — 고정된 흰색 막대.

• 배경 ``, 높이 ~64px, 하단 테두리 `1px solid `.
• 왼쪽: Notion "N" 로고 + "제품/AI/솔루션/리소스/기업/가격/데모 요청" 링크.
• 오른쪽: "Notion 무료로 받기" 보라색 버튼 + "로그인" 링크.

서명 구성요소

**`hero-band-dark`** — 작업 공간 모형과 장식용 점/와이어가 내장된 딥 네이비 영웅 밴드.

• 배경 ``, 텍스트 ``, 패딩 ``.
• 레이아웃: 중앙 정렬 헤드라인 ``, 부제, 버튼 행(`button-primary` 보라색 + `button-secondary-on-dark`), 아래 `workspace-mockup-card`.
• 대기적인 장식: 히어로 콘텐츠 주위에 흩어져 있는 다채로운 스티커 메모 점과 메쉬 와이어 일러스트레이션(문자 그대로의 패턴 채우기가 아님 - SVG/일러스트를 통해 페이지별로 처리됨).

**`footer-region`** — 다중 열 간단한 바닥글.

• 배경 ``, 패딩 ` `, 위쪽 테두리 `1px solid `.
• 6열 링크 그리드(제품/다운로드/리소스/개념/회사/법률).

**`footer-link`** — 개별 바닥글 링크.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 ` 0`.

해야 할 일과 하지 말아야 할 일

Do

• ``(보라색)을 모든 표면에서 주요 CTA로 사용하세요. 이는 브랜드를 인식할 수 있는 신호입니다
• 딥 네이비 히어로 밴드({colors.brand-navy})를 보라색 버튼 + 장식 점착 메모장과 페어링하세요
• 파스텔 피처카드 틴트(복숭아, 장미, 민트, 라벤더, 하늘, 노랑)를 아낌없이 사용하세요
• 강조된 '어시스턴트에게 물어보기' 스타일 배너 카드에는 `` 사용
• 버튼에 ``(8px)을 일관되게 적용 — Notion은 알약이 아닌 직사각형을 사용합니다
• 모든 카드 계열에 ``(12px) 적용
• 모든 UI 표면에서 Notion-Sans를 유지합니다
• 히어로밴드의 작업공간 모형 카드를 사용하여 실제 제품 UI를 보여주세요

하지 마세요

• 본문 텍스트나 큰 배경 표면에 보라색을 사용하지 마세요
• 알약 모양의 버튼을 사용하지 마세요. Notion의 기하학은 직사각형입니다
• 링크 파란색({colors.link-blue})과 기본 보라색({colors.primary})을 혼합하지 마세요. 서로 다른 역할이 있습니다
• 평평한 문서 카드에는 두꺼운 그림자를 적용하지 마세요
• Notion-Sans를 일반 Inter
으로 교체하지 마세요.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

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

| 모바일(소형) | _< 480px | Single column. Hero 36px. Pricing 1-up. |

| 모바일(대형) | 480 – 767px | 기능 카드 2개. 영웅 48px. |

| 태블릿 | 768 – 1023px | 2열 특성 그리드. 영웅 56px. |

| 데스크탑 | 1024 – 1279px | 4계층 가격 카드 행. 영웅 72px. |

| 와이드 데스크탑 | ≥ 1280px | 전체 80px 영웅 프리젠테이션. |

터치 대상

• 버튼은 40~44픽셀 유효 높이로 렌더링됩니다
• 양식 입력은 44픽셀 높이로 렌더링됩니다
• 알약 탭은 모바일에서 ~32px → 44px

축소 전략

• **프로모션 배너**는 전체 너비로 유지됩니다. < 480px
에서 잘립니다.
• **1024px 미만의 상단 탐색**은 햄버거로 접힙니다.
• **히어로 밴드**: 작업 공간 모형 카드가 모바일의 텍스트/버튼 아래로 이동합니다
• **가격 책정 등급**: 4열 → 2열 태블릿 → 1열 모바일
• **기능 카드**: 3업 데스크톱 → 2업 태블릿 → 1업 모바일
• **히어로 타이포그래피**: 80px → 56px → 48px → 36px
• **바닥글**: 6열 데스크톱 → 3열 태블릿 → 아코디언 모바일

이미지 동작

• 작업 공간 모형 카드는 가로 세로 비율을 유지합니다
• 기능 카드 내부의 파스텔 그림은 비례적으로 확장됩니다
• 고객 로고 벽: 일관된 60~80픽셀 높이의 워드마크

반복 가이드

1. 한 번에 하나의 구성요소에만 집중하세요

2. 구성요소 이름 및 토큰을 직접 참조

3. 편집 후 _`npx @google/design.md lint DESIGN.md` 실행

4. 새 변형을 별도의 `components:` 항목

으로 추가합니다.

5. 본문

의 기본값은 ``입니다.

6. _``(보라색)을 기본 CTA로 유지합니다. 인라인 링크의 ``과 구별됩니다

7. 버튼(직사각형)에는 ``, 카드에는 ``, 알약 탭/배지에만 ``을 사용하세요.

알려진 격차

• 히어로 밴드 너머에는 표시되지 않는 특정 다크 모드 토큰 값
• 애니메이션/전환 타이밍이 추출되지 않았습니다. 150~200ms 용이성을 권장합니다
• 양식 유효성 검사 성공 상태가 명시적으로 캡처되지 않음
• 파스텔-색조 매핑(기능이 어떤 색조를 사용하는지)은 관찰 기반입니다. 실제 브랜드 라이브러리에는 더 많은 항목이 있을 수 있습니다

概要

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 ベース) を使用します。これは、カラフルなイラストと自然に組み合わされる人文主義的な幾何学的な文字です。ボタンは__CODEBCK_942___ (8px) の長方形であり、錠剤ではありません。Notion の地味な長方形のジオメトリは、錠剤を普遍的に使用する競合他社とは区別されます。カードは__CODEBCK_943___ (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.surface}): 微妙なセクションの背景、検索ピルの残り、注目の価格帯
• **Surface Soft** ({colors.surface-soft}): より静かなセクション分割
• **ヘアライン** ({colors.hairline}): 1 ピクセルの境界線と主分割線
• **ヘアライン ソフト** ({colors.hairline-soft}): 静かな仕切り
• **強いヘアライン** ({colors.hairline-strong}): 入力の 1 ピクセルの境界線を強化

テキスト

• **インクディープ** ({colors.ink-deep}): 強調のための純粋な黒
• **インク** ({colors.ink}): 主要な見出しと本文
• **炭** ({colors.charcoal}): ボディ強調 (Notion の特徴である温かい炭)
• **スレート** ({colors.slate}): 二次テキスト
• **スチール** ({colors.steel}): 三次、フッター リンク
• **ストーン** ({colors.stone}): ミュートされたラベル
• **ミュート** ({colors.muted}): 無効、プレースホルダー
• **ダーク上** ({colors.on-dark}): 暗い表面に白いテキスト
• **ダークミュート時** ({colors.on-dark-muted}): 不透明度を下げた白

セマンティック

• **成功** ({colors.semantic-success}): 緑色の確認
• **警告** ({colors.semantic-warning}): 中優先度のアラート (オレンジ)
• **エラー** ({colors.semantic-error}): 検証エラー (赤)

タイポグラフィ___HTMLTAG _409___

フォント ファミリー

**Notion Sans** (プライマリ): Notion のカスタム Inter ベース変数書体。 フォールバック: Inter、-apple-system、system-ui、「Segoe UI」、Helvetica、sans-serif。すべての UI サーフェスで使用される人文主義的な幾何学模様のキャラクター。

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

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

| `` | 80ピクセル | 600 | 1.05 | -2ピクセル |ヒーロー (「夜勤に会う」) |

| `` | 56ピクセル | 600 | 1.10 | -1ピクセル |セクション オープナー |

| `` | 48ピクセル | 600 | 1.15 | -0.5ピクセル |ページレベルの見出し (「無料で試す」) |

| `` | 36ピクセル | 600 | 1.20 | -0.5ピクセル |サブセクションの見出し (「24 時間年中無休で仕事を進め続ける」) |

| `` | 28ピクセル | 600 | 1.25 | 0 |カードのタイトル |

| `` | 22ピクセル | 600 | 1.30 | 0 |特集タイルのタイトル |

| `` | 18ピクセル | 600 | 1.40 | 0 |よくある質問 |

| `` | 18ピクセル | 400 | 1.50 | 0 |ヒーローのサブタイトル |

| `` | 16ピクセル | 400 | 1.55 | 0 |主要な本文テキスト |

| `` | 16ピクセル | 500 | 1.55 | 0 |体の強調 |

| `` | 14ピクセル | 400 | 1.50 | 0 |二次本文 |

| `` | 14ピクセル | 500 | 1.50 | 0 |アクティブなサイドバー、ボタンのラベル |

| `` | 13ピクセル | 600 | 1.40 | 0 |バッジのラベル |

| `` | 14ピクセル | 500 | 1.30 | 0 |ボタンのラベル |

原則

• 80 ピクセル表示でのタイトなヒーロー リード (1.05)
• 表示サイズでの負の文字間隔 (-2px ～ -0.5px)
• ドキュメントを読みやすくするための豊富な本文先頭 (1.55)
• 見出しのウェイトは 600 + ボタンのウェイトは 500。 400 本文

レイアウト

間隔システム

• **基本単位**: 4px (主増分 8px)
• **トークン**: `` (4px) ～ `` (120px)
• **セクションのリズム**: マーケティング ページでは `` (96 ピクセル) を使用します。価格が__CODEBCK_961___ (64px)
に引き下げられました

グリッドとコンテナ

• 最大幅 1280 ピクセル、余白 32 ピクセル
• 価格: デスクトップの 4 層カード列と緻密な比較表
• _ホームページ: ヒーローが中央に配置され、ボタンの下にワークスペースのモックアップが表示されます。交互のカラフルな機能カード セクション

ホワイトスペースの哲学

_マーケティング サーフェイスでは、フィーチャー カード バンド間に十分なスペースを確保しています。 ヒーローのワークスペース モックアップ カードは、深いドロップ シャドウで全幅処理されます。

標高と深さ

|レベル |治療 | |

を使用します

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

| 0 (フラット) |影はありません。 `` 境界線 |デフォルトのカード、テーブルの行 |

| 1 (微妙) | `rgba(15, 15, 15, 0.04) 0px 1px 2px 0px` |カーソルを合わせて高くしたタイル |

| 2 (カード) | `rgba(15, 15, 15, 0.08) 0px 4px 12px 0px` |フィーチャー カード |

| 3 (モックアップ) | `rgba(15, 15, 15, 0.20) 0px 24px 48px -8px` |ヒーロー ワークスペース モックアップ カード |

| 4 (モーダル) | `rgba(15, 15, 15, 0.16) 0px 16px 48px -8px` |モーダル、ドロップダウン |

装飾の深さ_

• ヒーロー ワークスペース モックアップ カードは深い拡散ドロップ シャドウ (レベル 3) を使用しています - ネイビー バンドに対して大幅な標高
• パステルのフィーチャ カードは、色合いの背景によって独自の視覚的な重みを持ちます
• 付箋のドットイラストとメッシュワイヤーがネイビーヒーローに雰囲気を与える

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 4ピクセル |タグチップ |

| `` | 6ピクセル |タイプバッジ |

| `` | 8ピクセル |ボタン、入力、検索ピル |

| `` | 12ピクセル |カード、価格帯、エージェント タイル、ワークスペース モックアップ |

| `` | 16ピクセル |大きな機能パネル |

| `` | 20ピクセル |注目の製品ショーケース |

| `` | 24ピクセル |大きな機能カード |

| `` | 9999ピクセル |ステータス バッジ、ピルタブ (通常のボタンではありません) |

Notion のジオメトリは地味な編集です — `` (8 ピクセル) ボタンは、どこにでもあるピルボタンのブランドとは区別されます。

コンポーネント

> ホバー禁止ポリシーにより、ホバー状態は文書化されません。

ボタン

**`button-primary`** — 署名の紫色の長方形のプライマリ CTA、主要なアクション。

• 背景__CODEBCK_977___、テキスト__CODEBCK_978___、タイポグラフィ__CODEBCK_979___、パディング__CODEBCK_980___、丸め__CODEBCK_981___.
• 押された状態__CODEBCK_982___は__CODEBCK_983___まで深くなります。
• 無効状態では `` 背景が使用されます。

**`button-dark`** — 明るい背景に黒い長方形の CTA。

• 背景__CODEBCK_986___、テキスト__CODEBCK_987___、タイポグラフィ__CODEBCK_988___、パディング__CODEBCK_989___、丸め__CODEBCK_990___.

**`button-secondary`** — 二次アクション (「デモをリクエスト」) 用の輪郭を描かれた長方形。

• 背景透明、テキスト__CODEBCK_992___、境界線__CODEBCK_993___、タイポグラフィ__CODEBCK_994___、パディング__CODEBCK_995___、角丸__CODEBCK_996___.

**`button-on-dark`** — ダーク ヒーロー バンドの白いボタン。

• 背景__CODEBCK_998___、テキスト__CODEBCK_999___、タイポグラフィ__CODEBCK_1000___、パディング__CODEBCK_1001___、丸め__CODEBCK_1002___.

**`button-secondary-on-dark`** — 暗い色の輪郭付きのボタン。

• 背景透明、テキスト__CODEBCK_1004___、境界線__CODEBCK_1005___、タイポグラフィ__CODEBCK_1006___、パディング__CODEBCK_1007___、丸め__CODEBCK_1008___.

**`button-ghost`** — 静かなゴースト ボタン。

• 背景透明、テキスト__CODEBCK_1010___、タイポグラフィ__CODEBCK_1011___、パディング__CODEBCK_1012___、丸め__CODEBCK_1013___.

**`button-link`** — インラインの青色のテキスト リンク (プライマリの紫色ではありません)。

• 背景透明、テキスト__CODEBCK_1015___、タイポグラフィ__CODEBCK_1016___、パディング__CODEBCK_1017___.___HTMLTAG_58 8___

カードとコンテナ

**`card-base`** — 標準コンテンツ カード。

• 背景__CODEBCK_1019___、角丸__CODEBCK_1020___、パディング__CODEBCK_1021___、境界線__CODEBCK_1022___.

**`card-feature`** — パディングが大きいフィーチャー カード。

• 背景__CODEBCK_1024___、角丸__CODEBCK_1025___、パディング__CODEBCK_1026___、境界線__CODEBCK_1027___.

_**`card-feature-yellow-bold`** — 強調度の高いコンテンツ用の太字の黄色の機能バナー (「オンデマンド アシスタントに質問する」)。

• 背景__CODEBCK_1029___、テキスト__CODEBCK_1030___、丸め__CODEBCK_1031___、パディング__CODEBCK_1032___.

**`card-feature-peach`** + **`card-feature-rose`** + **`card-feature-mint`** + **`card-feature-sky`** + **`card-feature-lavender`** + **`card-feature-yellow`** + **_`card-feature-cream`** — パステルカラーのフィーチャー カード。

• 各バリアントは、背景として対応する__CODEBCK_1040___色、テキスト__CODEBCK_1041___、丸められた__CODEBCK_1042___、パディング__CODEBCK_1043___.
を使用します。

**`card-agent-tile`** — エージェント アシスタント タイル。

• 背景__CODEBCK_1045___、角丸__CODEBCK_1046___、パディング__CODEBCK_1047___、境界線__CODEBCK_1048___.

**`card-template`** — テンプレート サムネイル カード。

• 背景__CODEBCK_1050___、角丸__CODEBCK_1051___、パディング__CODEBCK_1052___、境界線__CODEBCK_1053___.

_**`card-startup-perk`** — スタートアップ プログラム特典グリッド項目。

• 背景__CODEBCK_1055___、角丸__CODEBCK_1056___、パディング__CODEBCK_1057___、境界線__CODEBCK_1058___.

**`pricing-card`** — 標準価格帯カード。

• 背景__CODEBCK_1060___、角丸__CODEBCK_1061___、パディング__CODEBCK_1062___、境界線__CODEBCK_1063___.

**`pricing-card-featured`** — 注目の価格帯 (Plus または Business — 紫枠)。

• 背景__CODEBCK_1065___、角丸__CODEBCK_1066___、パディング__CODEBCK_1067___、境界線__CODEBCK_1068___.

入力とフォーム

**`text-input`** — 標準のテキスト フィールド。

• 背景__CODEBCK_1070___、テキスト__CODEBCK_1071___、境界線__CODEBCK_1072___、角丸__CODEBCK_1073___、パディング__CODEBCK_1074___、高さ44ピクセル

**`text-input-focused`** — アクティブ化された状態。

• 境界線が__CODEBCK_1076___ (紫)に切り替わります。

**`search-pill`** — 検索バー。

• 背景__CODEBCK_1078___、テキスト__CODEBCK_1079___、タイポグラフィ__CODEBCK_1080___、角丸__CODEBCK_1081___、高さ44ピクセル、境界線__CODEBCK_1082___.

タブ

_**`pill-tab`** + **`pill-tab-active`** — トップレベル切り替え用のピル スタイルのタブ ナビゲーション。

• 非アクティブ: テキスト__CODEBCK_1085___、境界線__CODEBCK_1086___、パディング__CODEBCK_1087___、丸め__CODEBCK_1088___.
• アクティブ: 背景__CODEBCK_1089___、テキスト__CODEBCK_1090___.

**`segmented-tab`** + **`segmented-tab-active`** — 下線スタイルのタブ ナビゲーション。

• 非アクティブ: テキスト__CODEBCK_1093___、境界線なし。 アクティブ: テキスト ``、__CODEBCK_1095___ の 2 ピクセルの下枠。

バッジとステータス

**`badge-purple`** — 紫色のステータス バッジ (プライマリ CTA と一致)。

• 背景__CODEBCK_1097___、テキスト__CODEBCK_1098___、タイポグラフィ__CODEBCK_1099___、角丸__CODEBCK_1100___、パディング__CODEBCK_1101___.

**`badge-pink`** — ピンクのアクセント バッジ。

• 背景__CODEBCK_1103___、テキスト__CODEBCK_1104___、タイポグラフィ__CODEBCK_1105___、角丸__CODEBCK_1106___、パディング__CODEBCK_1107___.

**`badge-orange`** — オレンジ色のアクセント バッジ。

• 背景__CODEBCK_1109___、テキスト__CODEBCK_1110___、タイポグラフィ__CODEBCK_1111___、角丸__CODEBCK_1112___、パディング__CODEBCK_1113___.

**`badge-tag-purple`** — ソフトパープルの機能タグ チップ。

• 背景__CODEBCK_1115___、テキスト__CODEBCK_1116___、タイポグラフィ__CODEBCK_1117___、角丸__CODEBCK_1118___、パディング__CODEBCK_1119___.

**`badge-tag-orange`** — ソフトオレンジ色の機能タグ。

• 背景__CODEBCK_1121___、テキスト__CODEBCK_1122___、タイポグラフィ__CODEBCK_1123___、角丸__CODEBCK_1124___、パディング__CODEBCK_1125___.

**`badge-tag-green`** — ソフトミント機能タグ。

• 背景__CODEBCK_1127___、テキスト__CODEBCK_1128___、タイポグラフィ__CODEBCK_1129___、角丸__CODEBCK_1130___、パディング__CODEBCK_1131___.

**`badge-popular`** — 「最も人気のある」層のインジケーター。

• 背景__CODEBCK_1133___、テキスト__CODEBCK_1134___、タイポグラフィ__CODEBCK_1135___、角丸__CODEBCK_1136___、パディング__CODEBCK_1137___.

**`promo-banner`** — 上部ナビゲーションの上の明るい表面のプロモーション ストリップ

• 背景__CODEBCK_1139___、テキスト__CODEBCK_1140___、タイポグラフィ__CODEBCK_1141___、パディング__CODEBCK_1142___。 (「開発者: 5 月 13 日に新しい開発者プラットフォームを初めてご覧ください。」)

テーブル

**`comparison-table`** — 価格機能の比較表。

• 背景__CODEBCK_1144___、テキスト__CODEBCK_1145___、タイポグラフィ__CODEBCK_1146___、角丸__CODEBCK_1147___、境界線__CODEBCK_1148___.

**`comparison-row`** — 個別の機能行。

• 背景__CODEBCK_1150___、テキスト__CODEBCK_1151___、パディング__CODEBCK_1152___、下枠__CODEBCK_1153___.

ドキュメント コンポーネント

**`workspace-mockup-card`** — ヒーロー バンド (「Ramp HQ」カンバン ボード) 上の Embedded Notion ワークスペース UI モックアップ。

• 背景__CODEBCK_1155___、丸い__CODEBCK_1156___、境界線__CODEBCK_1157___、濃い影__CODEBCK_1158___。実際の Notion 製品 UI モックを搭載しています。

_**`testimonial-card`** — お客様の声カード。

• 背景__CODEBCK_1160___、角丸__CODEBCK_1161___、パディング__CODEBCK_1162___、境界線__CODEBCK_1163___.

**`logo-wall-item`** — 顧客ロゴのワードマーク セル。

• 背景透明、テキスト__CODEBCK_1165___、タイポグラフィ__CODEBCK_1166___、パディング__CODEBCK_1167___.

**`faq-accordion-item`** — FAQ パネル。

• 背景__CODEBCK_1169___、角丸__CODEBCK_1170___、パディング__CODEBCK_1171___、下枠__CODEBCK_1172___.

**`stat-row`** — 棒グラフの視覚化を備えた統計ストリップ (「生産性の向上。 ツールが少なくなります。").

• 背景__CODEBCK_1174___、テキスト__CODEBCK_1175___、丸め__CODEBCK_1176___、パディング__CODEBCK_1177___.

**`cta-banner-light`** — ライト サーフェス CTA バナー。

• 背景__CODEBCK_1179___、テキスト__CODEBCK_1180___、丸め__CODEBCK_1181___、パディング__CODEBCK_1182___.

ナビゲーション

**トップ ナビゲーション (マーケティング)** — スティッキーな白いバー。

• 背景__CODEBCK_1183___、高さ~64ピクセル、下枠__CODEBCK_1184___.
• 左: Notion「N」ロゴ + 「製品 / AI / ソリューション / リソース / エンタープライズ / 価格設定 / デモのリクエスト」リンク。
• 右: 「Notion を無料で入手」紫色のボタン + 「ログイン」リンク。

署名コンポーネント

_**`hero-band-dark`** — 埋め込まれたワークスペースのモックアップと装飾的なドット/ワイヤーを備えたディープネイビーのヒーローバンド。

• 背景__CODEBCK_1186___、テキスト__CODEBCK_1187___、パディング__CODEBCK_1188___.
• レイアウト: 中央に見出し__CODEBCK_1189___、サブタイトル、ボタン行(`button-primary`紫色+__CODEBCK_1191___)、下に__CODEBCK_1192___。
• 雰囲気の装飾: ヒーロー コンテンツの周囲に散らばったカラフルな付箋のドットとメッシュ ワイヤーのイラスト (文字通りのパターン塗りつぶしではなく、SVG/イラストを介してページごとに処理されます)。

**`footer-region`** — 複数列のライト フッター。

• 背景__CODEBCK_1194___、パディング__CODEBCK_1195___、上枠__CODEBCK_1196___.
• 6 列のリンク グリッド (製品 / ダウンロード / リソース / 概念 / 会社 / 法務)。

_**`footer-link`** — 個別のフッター リンク。

• 背景透明、テキスト__CODEBCK_1198___、タイポグラフィ__CODEBCK_1199___、パディング__CODEBCK_1200___.

推奨事項と禁止事項

_実行

• __CODEBCK_1201___ (紫) をすべての面で主要な CTA として使用します。これはブランドの認識可能なシグナルです
• ディープ ネイビーのヒーロー バンド ({colors.brand-navy}) と紫色のボタン + 装飾的な付箋ドットを組み合わせます
• パステル フィーチャー カードの色合い (ピーチ、ローズ、ミント、ラベンダー、スカイ、イエロー) を惜しみなく使用
• 「アシスタントに質問する」スタイルのバナー カードを強調する場合は__CODEBCK_1202___を使用してください
• __CODEBCK_1203___ (8px) をボタンに一貫して適用します — Notion は錠剤ではなく長方形を使用します
• __CODEBCK_1204___ (12px) をすべてのカード ファミリに適用
• すべての UI サーフェスで Notion-San を維持
• ヒーロー バンドでワークスペース モックアップ カードを使用して、実際の製品 UI を表示

しないでください

• 本文テキストや大きな背景面には紫を使用しないでください
• 錠剤の形のボタンは使用しないでください。 Notion のジオメトリは長方形で地味です
• リンクブルー ({colors.link-blue}) とプライマリパープル ({colors.primary}) を混合しないでください。これらには異なる役割があります
• 平らなドキュメント カードには濃い影を適用しないでください
• Notion-Sans を汎用 Inter
に置き換えないでください

応答動作

ブレークポイント

|名前 |幅 |主な変更点 |

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

|モバイル（小） | < 480px | Single column. Hero 36px. Pricing 1-up. |

|モバイル（大） | 480 – 767ピクセル |フィーチャーカードは2アップ。ヒーロー48ピクセル。 |

|タブレット | 768 – 1023ピクセル | 2 列のフィーチャ グリッド。ヒーロー56ピクセル。 |

|デスクトップ | 1024 – 1279ピクセル | 4 層の価格カードの行。ヒーロー72ピクセル。 |

|ワイドデスクトップ | ≥ 1280 ピクセル |フル 80 ピクセルのヒーロー プレゼンテーション。 |

タッチターゲット

• ボタンは 40 ～ 44 ピクセルの有効高さでレンダリングされます
• フォーム入力は高さ 44 ピクセルでレンダリング
• モバイルではピルタブ ~32 ピクセル → 44 ピクセル

戦略の崩壊

• **プロモーション バナー** は全幅のままです。 < 480px
で切り捨てられます
• **1024 ピクセル未満のトップ ナビゲーション** はハンバーガーに折りたたまれます
• **ヒーロー バンド**: モバイルのテキスト/ボタンの下にワークスペースのモックアップ カードが移動
• **価格階層**: 4 列 → 2 列タブレット → 1 列モバイル
• **機能カード**: 3-up デスクトップ → 2-up タブレット → 1-up モバイル
• **ヒーローのタイポグラフィ**: 80px → 56px → 48px → 36px
• **フッター**: 6 列デスクトップ → 3 列タブレット → アコーディオン モバイル

画像の動作

• ワークスペースのモックアップ カードはアスペクト比を維持
• フィーチャー カード内のパステル イラストは比例して拡大縮小されます
• 顧客ロゴ ウォール: 一貫した 60 ～ 80 ピクセルの高さのワードマーク

反復ガイド

1.一度に 1 つのコンポーネントに注目

2.コンポーネント名とトークンを直接参照

3.

を編集した後、__CODEBCK_1205___ を実行します

4.新しいバリアントを個別の `components:` エントリ

として追加します

5.本文

のデフォルトは__CODEBCK_1207___

6. `` (紫) をプライマリ CTA として維持します。インライン リンク

の `` とは区別します。

7.ボタン (長方形) には ``、カードには ``、ピルタブ/バッジのみには `` を使用してください

既知のギャップ

• 特定のダークモード トークンの値はヒーロー バンド以外には表面化していない
• アニメーション/遷移のタイミングは抽出されません。 150 ～ 200 ミリ秒を推奨
• フォーム検証の成功状態が明示的に取得されていません
• パステル ティント マッピング (どの機能がどの色合いを使用するか) は観察に基づいています — 実際のブランド ライブラリにはさらに多くのエントリがある可能性があります

Accessibility Considerations

Notion's color system, anchored by #0a0a0a, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Notion's color system, anchored by #0a0a0a, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Notion's color system, anchored by #0a0a0a, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Related Design Systems

Explore similar design languages from the same category:

• Framer Design System
• Superhuman Design System
• Cal Design System
• Airbnb Design System