01
Visual Theme & Atmosphere
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.
...
Key Characteristics:
- Deep navy hero band ({colors.brand-navy}) with scattered sticky-note dots + mesh wire decorative illustrations
- ...
Live Visual Theme Representation:
Visual Theme Example
02
Color Palette & Roles
> 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
- ...
Brand Color Spectrum (echoes live product database properties)
- Brand Pink ({colors.brand-pink}): Pink accent
- Brand Pink Deep ({colors.brand-pink-deep}): Deeper pink
- ...
Card Tints (Pastel Feature Card Backgrounds)
- Tint Peach ({colors.card-tint-peach}): Pale peach
- Tint Rose ({colors.card-tint-rose}): Pale rose-pink
- ...
Surface
- Canvas White ({colors.canvas}): Page background and primary card surface
- Surface ({colors.surface}): Subtle section backgrounds, search-pill rest, featured pricing tier
- ...
Text
- Ink Deep ({colors.ink-deep}): Pure black for emphasis
- Ink ({colors.ink}): Primary headlines and body text
- ...
Semantic
- Success ({colors.semantic-success}): Confirmation green
- Warning ({colors.semantic-warning}): Mid-priority alerts (orange)
- ...
primary
#5645d4
primary-pressed
#4534b3
primary-deep
#3a2a99
on-primary
#ffffff
brand-navy
#0a1530
brand-navy-deep
#070f24
brand-navy-mid
#1a2a52
link-blue
#0075de
link-blue-pressed
#005bab
brand-orange
#dd5b00
brand-orange-deep
#793400
brand-pink
#ff64c8
brand-pink-deep
#a02e6d
brand-purple
#7b3ff2
brand-purple-300
#d6b6f6
brand-purple-800
#391c57
brand-teal
#2a9d99
brand-green
#1aae39
brand-yellow
#f5d75e
brand-brown
#523410
card-tint-peach
#ffe8d4
card-tint-rose
#fde0ec
card-tint-mint
#d9f3e1
card-tint-lavender
#e6e0f5
card-tint-sky
#dcecfa
card-tint-yellow
#fef7d6
card-tint-yellow-bold
#f9e79f
card-tint-cream
#f8f5e8
card-tint-gray
#f0eeec
canvas
#ffffff
surface
#f6f5f4
surface-soft
#fafaf9
hairline
#e5e3df
hairline-soft
#ede9e4
hairline-strong
#c8c4be
ink-deep
#000000
ink
#1a1a1a
charcoal
#37352f
slate
#5d5b54
steel
#787671
stone
#a4a097
muted
#bbb8b1
on-dark
#ffffff
on-dark-muted
#a4a097
semantic-success
#1aae39
semantic-warning
#dd5b00
semantic-error
#e03131
03
Typography Rules
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 |
|---|---|---|---|---|---|
| ... | ... | ... | ... | ... | ... |
Principles
- Tight hero leading (1.05) on 80px display
- Negative letter-spacing on display sizes (-2px to -0.5px)
- ...
Dynamic Preview:
hero-display
size: 80px | weight: 600 | height: 1.05 | spacing: -2px
The quick brown fox jumps over the lazy dog
display-lg
size: 56px | weight: 600 | height: 1.10 | spacing: -1px
The quick brown fox jumps over the lazy dog
heading-1
size: 48px | weight: 600 | height: 1.15 | spacing: -0.5px
The quick brown fox jumps over the lazy dog
heading-2
size: 36px | weight: 600 | height: 1.20 | spacing: -0.5px
The quick brown fox jumps over the lazy dog
heading-3
size: 28px | weight: 600 | height: 1.25 | spacing: 0
The quick brown fox jumps over the lazy dog
heading-4
size: 22px | weight: 600 | height: 1.30 | spacing: 0
The quick brown fox jumps over the lazy dog
heading-5
size: 18px | weight: 600 | height: 1.40 | spacing: 0
The quick brown fox jumps over the lazy dog
subtitle
size: 18px | weight: 400 | height: 1.50 | spacing: 0
The quick brown fox jumps over the lazy dog
body-md
size: 16px | weight: 400 | height: 1.55 | spacing: 0
The quick brown fox jumps over the lazy dog
body-md-medium
size: 16px | weight: 500 | height: 1.55 | spacing: 0
The quick brown fox jumps over the lazy dog
body-sm
size: 14px | weight: 400 | height: 1.50 | spacing: 0
The quick brown fox jumps over the lazy dog
body-sm-medium
size: 14px | weight: 500 | height: 1.50 | spacing: 0
The quick brown fox jumps over the lazy dog
caption
size: 13px | weight: 400 | height: 1.40 | spacing: 0
The quick brown fox jumps over the lazy dog
caption-bold
size: 13px | weight: 600 | height: 1.40 | spacing: 0
The quick brown fox jumps over the lazy dog
micro
size: 12px | weight: 500 | height: 1.40 | spacing: 0
The quick brown fox jumps over the lazy dog
micro-uppercase
size: 11px | weight: 600 | height: 1.40 | spacing: 1px
The quick brown fox jumps over the lazy dog
button-md
size: 14px | weight: 500 | height: 1.30 | spacing: 0
The quick brown fox jumps over the lazy dog
04
Layout Principles
Spacing System
- Base unit: 4px (8px primary increment)
- Tokens:
{spacing.xxs}(4px) through{spacing.hero}(120px) - ...
Grid & Container
- 1280px max-width with 32px gutters
- Pricing: 4-tier card row at desktop with dense comparison table
- ...
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.Grid Layout Wireframe Mockup:
Layout Grid Example
05
Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| ... | ... | ... |
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
- ...
Elevation Level Showcase:
Elevation Level Example
Flat Surface (Level 0)
Used for background layers, sidebar headers, or baseline borders.
Low Elevation (Level 1 / Card)
Used for floating product elements, cards, and hover states.
High Elevation (Level 2 / Popover & Dropdown)
Used for modals, select menus, code editor tooltips, and overlay headers.
Border Radius & Shape Scale:
radius-sm
4px
radius-md
6px
radius-lg
8px
radius-pill
Pill / Tag
06
Component Stylings
Border Radius Scale
| Token | Value | Use |
|---|---|---|
| ... | ... | ... |
{rounded.md} (8px) buttons distinguish it from pill-button-everywhere brands.
> 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}, padding10px 18px, rounded{rounded.md}. - ...
button-dark — Black rectangular CTA on light backgrounds.
- Background
{colors.ink-deep}, text{colors.on-dark}, typography{typography.button-md}, padding10px 18px, rounded{rounded.md}.
button-secondary — Outlined rectangular for secondary actions ("Request a demo").
- Background transparent, text
{colors.ink}, border1px solid {colors.hairline-strong}, typography{typography.button-md}, padding10px 18px, rounded{rounded.md}.
button-on-dark — White button on dark hero bands.
- Background
{colors.on-dark}, text{colors.ink}, typography{typography.button-md}, padding10px 18px, rounded{rounded.md}.
button-secondary-on-dark — Outlined button on dark.
- Background transparent, text
{colors.on-dark}, border1px solid {colors.on-dark-muted}, typography{typography.button-md}, padding10px 18px, rounded{rounded.md}.
button-ghost — Quieter ghost button.
- Background transparent, text
{colors.ink}, typography{typography.button-md}, padding8px 12px, rounded{rounded.sm}.
button-link — Inline blue text link (NOT primary purple).
- Background transparent, text
{colors.link-blue}, typography{typography.body-sm-medium}, padding0.
Cards & Containers
card-base — Standard content card.
- Background
{colors.canvas}, rounded{rounded.lg}, padding{spacing.xl}, border1px solid {colors.hairline}.
card-feature — Feature card with larger padding.
- Background
{colors.canvas}, rounded{rounded.lg}, padding{spacing.xxl}, border1px 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}, border1px solid {colors.hairline}.
card-template — Template thumbnail card.
- Background
{colors.canvas}, rounded{rounded.lg}, padding{spacing.lg}, border1px solid {colors.hairline}.
card-startup-perk — Startup-program perk grid item.
- Background
{colors.canvas}, rounded{rounded.lg}, padding{spacing.xl}, border1px solid {colors.hairline}.
pricing-card — Standard pricing tier card.
- Background
{colors.canvas}, rounded{rounded.lg}, padding{spacing.xxl}, border1px solid {colors.hairline}.
pricing-card-featured — Featured pricing tier (Plus or Business — purple-bordered).
- Background
{colors.surface}, rounded{rounded.lg}, padding{spacing.xxl}, border2px solid {colors.primary}.
Inputs & Forms
text-input — Standard text field.
- Background
{colors.canvas}, text{colors.ink}, border1px 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, border1px solid {colors.hairline}.
Tabs
pill-tab + pill-tab-active — Pill-style tab nav for top-level switching.
- Inactive: text
{colors.steel}, border1px solid {colors.hairline}, padding{spacing.xs} {spacing.md}, rounded{rounded.full}. - ...
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}, padding4px 10px.
badge-pink — Pink accent badge.
- Background
{colors.brand-pink}, text{colors.on-primary}, typography{typography.caption-bold}, rounded{rounded.full}, padding4px 10px.
badge-orange — Orange accent badge.
- Background
{colors.brand-orange}, text{colors.on-primary}, typography{typography.caption-bold}, rounded{rounded.full}, padding4px 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}, padding2px 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}, padding2px 8px.
badge-tag-green — Soft-mint feature tag.
- Background
{colors.card-tint-mint}, text{colors.brand-green}, typography{typography.caption-bold}, rounded{rounded.sm}, padding2px 8px.
badge-popular — "Most Popular" tier indicator.
- Background
{colors.primary}, text{colors.on-primary}, typography{typography.caption-bold}, rounded{rounded.full}, padding4px 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}, border1px solid {colors.hairline}.
comparison-row — Individual feature row.
- Background
{colors.canvas}, text{colors.ink}, padding{spacing.md} {spacing.lg}, bottom border1px 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}, border1px solid {colors.hairline}, deep shadowrgba(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}, border1px 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 border1px 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 border1px solid {colors.hairline}. - ...
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}. - ...
footer-region — Multi-column light footer.
- Background
{colors.canvas}, padding{spacing.section} {spacing.xxl}, top border1px solid {colors.hairline}. - ...
footer-link — Individual footer link.
- Background transparent, text
{colors.steel}, typography{typography.body-sm}, padding{spacing.xxs} 0.
Interactive Component Demonstrations:
Component Interactive Example
07
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
✅ Recommended / 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
❌ Discouraged / 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
08
Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| ... | ... | ... |
Touch Targets
- Buttons render at 40–44px effective height
- Form inputs render at 44px height
- ...
Collapsing Strategy
- Promo banner stays full-width; truncates at < 480px
- Top nav below 1024px collapses to hamburger
- ...
Image Behavior
- Workspace mockup card maintains aspect ratio
- Pastel illustrations inside feature cards scale proportionally
- ...
Responsive Adaptation Note:
Responsive Behavior Example
09
Agent Prompt Guide
1. Focus on ONE component at a time 2. Reference component names and tokens directly
- ...
Copyable Agent Integration Prompt:
Prompt Guide Copy Box
10
Full System Design Tokens
The parsed design tokens extracted from the core stylesheet of this design system:
| Design Token | Hex Value | System Palette Role |
|---|---|---|
| --primary | #5645d4 | System color representation for primary |
| --primary-pressed | #4534b3 | System color representation for primary-pressed |
| --primary-deep | #3a2a99 | System color representation for primary-deep |
| --on-primary | #ffffff | System color representation for on-primary |
| --brand-navy | #0a1530 | System color representation for brand-navy |
| --brand-navy-deep | #070f24 | System color representation for brand-navy-deep |
| --brand-navy-mid | #1a2a52 | System color representation for brand-navy-mid |
| --link-blue | #0075de | System color representation for link-blue |
| --link-blue-pressed | #005bab | System color representation for link-blue-pressed |
| --brand-orange | #dd5b00 | System color representation for brand-orange |
| --brand-orange-deep | #793400 | System color representation for brand-orange-deep |
| --brand-pink | #ff64c8 | System color representation for brand-pink |
| --brand-pink-deep | #a02e6d | System color representation for brand-pink-deep |
| --brand-purple | #7b3ff2 | System color representation for brand-purple |
| --brand-purple-300 | #d6b6f6 | System color representation for brand-purple-300 |
| --brand-purple-800 | #391c57 | System color representation for brand-purple-800 |
| --brand-teal | #2a9d99 | System color representation for brand-teal |
| --brand-green | #1aae39 | System color representation for brand-green |
| --brand-yellow | #f5d75e | System color representation for brand-yellow |
| --brand-brown | #523410 | System color representation for brand-brown |
| --card-tint-peach | #ffe8d4 | System color representation for card-tint-peach |
| --card-tint-rose | #fde0ec | System color representation for card-tint-rose |
| --card-tint-mint | #d9f3e1 | System color representation for card-tint-mint |
| --card-tint-lavender | #e6e0f5 | System color representation for card-tint-lavender |
| --card-tint-sky | #dcecfa | System color representation for card-tint-sky |
| --card-tint-yellow | #fef7d6 | System color representation for card-tint-yellow |
| --card-tint-yellow-bold | #f9e79f | System color representation for card-tint-yellow-bold |
| --card-tint-cream | #f8f5e8 | System color representation for card-tint-cream |
| --card-tint-gray | #f0eeec | System color representation for card-tint-gray |
| --canvas | #ffffff | System color representation for canvas |
| --surface | #f6f5f4 | System color representation for surface |
| --surface-soft | #fafaf9 | System color representation for surface-soft |
| --hairline | #e5e3df | System color representation for hairline |
| --hairline-soft | #ede9e4 | System color representation for hairline-soft |
| --hairline-strong | #c8c4be | System color representation for hairline-strong |
| --ink-deep | #000000 | System color representation for ink-deep |
| --ink | #1a1a1a | System color representation for ink |
| --charcoal | #37352f | System color representation for charcoal |
| --slate | #5d5b54 | System color representation for slate |
| --steel | #787671 | System color representation for steel |
| --stone | #a4a097 | System color representation for stone |
| --muted | #bbb8b1 | System color representation for muted |
| --on-dark | #ffffff | System color representation for on-dark |
| --on-dark-muted | #a4a097 | System color representation for on-dark-muted |
| --semantic-success | #1aae39 | System color representation for semantic-success |
| --semantic-warning | #dd5b00 | System color representation for semantic-warning |
| --semantic-error | #e03131 | System color representation for semantic-error |