Notion-design-analysis

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

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

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

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

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