yaclty/awesome-design-md
1
0
Fork 0
mirror of https://github.com/VoltAgent/awesome-design-md.git synced 2026-05-14 13:06:57 +08:00
Code Issues Packages Projects Releases Wiki Activity
awesome-design-md/design-md/notion/DESIGN.md
necatiozmen 863444e92f update design md v2
2026-05-02 09:33:09 +03:00

34 KiB
Raw Blame History

version name description colors typography rounded spacing components
alpha Notion Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice — anchored by a deep navy hero band ({colors.brand-navy}) decorated with brand-colored sticky-note dots and mesh wire illustrations, a signature purple pill primary CTA ({colors.primary}), and a rich palette of pastel-tinted feature cards that echo the colorful database properties of the live product. The system uses a Notion-Sans (Inter-based) typeface across every UI surface, anchors a 4-tier pricing comparison (Free / Plus / Business / Enterprise), and presents the live workspace UI mockup directly inside the hero band. Coverage spans homepage, Enterprise, Product AI, Product Agents, Startups, and Pricing surfaces.
primary primary-pressed primary-deep on-primary brand-navy brand-navy-deep brand-navy-mid link-blue link-blue-pressed brand-orange brand-orange-deep brand-pink brand-pink-deep brand-purple brand-purple-300 brand-purple-800 brand-teal brand-green brand-yellow brand-brown card-tint-peach card-tint-rose card-tint-mint card-tint-lavender card-tint-sky card-tint-yellow card-tint-yellow-bold card-tint-cream card-tint-gray canvas surface surface-soft hairline hairline-soft hairline-strong ink-deep ink charcoal slate steel stone muted on-dark on-dark-muted semantic-success semantic-warning semantic-error
#5645d4 #4534b3 #3a2a99 #ffffff #0a1530 #070f24 #1a2a52 #0075de #005bab #dd5b00 #793400 #ff64c8 #a02e6d #7b3ff2 #d6b6f6 #391c57 #2a9d99 #1aae39 #f5d75e #523410 #ffe8d4 #fde0ec #d9f3e1 #e6e0f5 #dcecfa #fef7d6 #f9e79f #f8f5e8 #f0eeec #ffffff #f6f5f4 #fafaf9 #e5e3df #ede9e4 #c8c4be #000000 #1a1a1a #37352f #5d5b54 #787671 #a4a097 #bbb8b1 #ffffff #a4a097 #1aae39 #dd5b00 #e03131
hero-display display-lg heading-1 heading-2 heading-3 heading-4 heading-5 subtitle body-md body-md-medium body-sm body-sm-medium caption caption-bold micro micro-uppercase button-md
fontFamily fontSize fontWeight lineHeight letterSpacing
Notion Sans 80px 600 1.05 -2px
fontFamily fontSize fontWeight lineHeight letterSpacing
Notion Sans 56px 600 1.10 -1px
fontFamily fontSize fontWeight lineHeight letterSpacing
Notion Sans 48px 600 1.15 -0.5px
fontFamily fontSize fontWeight lineHeight letterSpacing
Notion Sans 36px 600 1.20 -0.5px
fontFamily fontSize fontWeight lineHeight
Notion Sans 28px 600 1.25
fontFamily fontSize fontWeight lineHeight
Notion Sans 22px 600 1.30
fontFamily fontSize fontWeight lineHeight
Notion Sans 18px 600 1.40
fontFamily fontSize fontWeight lineHeight
Notion Sans 18px 400 1.50
fontFamily fontSize fontWeight lineHeight
Notion Sans 16px 400 1.55
fontFamily fontSize fontWeight lineHeight
Notion Sans 16px 500 1.55
fontFamily fontSize fontWeight lineHeight
Notion Sans 14px 400 1.50
fontFamily fontSize fontWeight lineHeight
Notion Sans 14px 500 1.50
fontFamily fontSize fontWeight lineHeight
Notion Sans 13px 400 1.40
fontFamily fontSize fontWeight lineHeight
Notion Sans 13px 600 1.40
fontFamily fontSize fontWeight lineHeight
Notion Sans 12px 500 1.40
fontFamily fontSize fontWeight lineHeight letterSpacing
Notion Sans 11px 600 1.40 1px
fontFamily fontSize fontWeight lineHeight
Notion Sans 14px 500 1.30
xs sm md lg xl xxl xxxl full
4px 6px 8px 12px 16px 20px 24px 9999px
xxs xs sm md lg xl xxl xxxl section-sm section section-lg hero
4px 8px 12px 16px 20px 24px 32px 40px 48px 64px 96px 120px
button-primary button-primary-pressed button-primary-disabled button-dark button-secondary button-on-dark button-secondary-on-dark button-ghost button-link card-base card-feature 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-agent-tile card-template card-startup-perk pricing-card pricing-card-featured text-input text-input-focused search-pill pill-tab pill-tab-active segmented-tab segmented-tab-active badge-purple badge-pink badge-orange badge-tag-purple badge-tag-orange badge-tag-green badge-popular promo-banner hero-band-dark workspace-mockup-card cta-banner-light comparison-table comparison-row testimonial-card logo-wall-item faq-accordion-item stat-row footer-region footer-link
backgroundColor textColor typography rounded padding
{colors.primary} {colors.on-primary} {typography.button-md} {rounded.md} 10px 18px
backgroundColor textColor
{colors.primary-pressed} {colors.on-primary}
backgroundColor textColor
{colors.hairline} {colors.muted}
backgroundColor textColor typography rounded padding
{colors.ink-deep} {colors.on-dark} {typography.button-md} {rounded.md} 10px 18px
backgroundColor textColor typography rounded padding border
transparent {colors.ink} {typography.button-md} {rounded.md} 10px 18px 1px solid {colors.hairline-strong}
backgroundColor textColor typography rounded padding
{colors.on-dark} {colors.ink} {typography.button-md} {rounded.md} 10px 18px
backgroundColor textColor typography rounded padding border
transparent {colors.on-dark} {typography.button-md} {rounded.md} 10px 18px 1px solid {colors.on-dark-muted}
backgroundColor textColor typography rounded padding
transparent {colors.ink} {typography.button-md} {rounded.sm} 8px 12px
backgroundColor textColor typography padding
transparent {colors.link-blue} {typography.body-sm-medium} 0
backgroundColor rounded padding border
{colors.canvas} {rounded.lg} {spacing.xl} 1px solid {colors.hairline}
backgroundColor rounded padding border
{colors.canvas} {rounded.lg} {spacing.xxl} 1px solid {colors.hairline}
backgroundColor textColor rounded padding
{colors.card-tint-yellow-bold} {colors.charcoal} {rounded.lg} {spacing.xxl}
backgroundColor textColor rounded padding
{colors.card-tint-peach} {colors.charcoal} {rounded.lg} {spacing.xxl}
backgroundColor textColor rounded padding
{colors.card-tint-rose} {colors.charcoal} {rounded.lg} {spacing.xxl}
backgroundColor textColor rounded padding
{colors.card-tint-mint} {colors.charcoal} {rounded.lg} {spacing.xxl}
backgroundColor textColor rounded padding
{colors.card-tint-sky} {colors.charcoal} {rounded.lg} {spacing.xxl}
backgroundColor textColor rounded padding
{colors.card-tint-lavender} {colors.charcoal} {rounded.lg} {spacing.xxl}
backgroundColor textColor rounded padding
{colors.card-tint-yellow} {colors.charcoal} {rounded.lg} {spacing.xxl}
backgroundColor textColor rounded padding
{colors.card-tint-cream} {colors.charcoal} {rounded.lg} {spacing.xxl}
backgroundColor rounded padding border
{colors.canvas} {rounded.lg} {spacing.xl} 1px solid {colors.hairline}
backgroundColor rounded padding border
{colors.canvas} {rounded.lg} {spacing.lg} 1px solid {colors.hairline}
backgroundColor rounded padding border
{colors.canvas} {rounded.lg} {spacing.xl} 1px solid {colors.hairline}
backgroundColor rounded padding border
{colors.canvas} {rounded.lg} {spacing.xxl} 1px solid {colors.hairline}
backgroundColor rounded padding border
{colors.surface} {rounded.lg} {spacing.xxl} 2px solid {colors.primary}
backgroundColor textColor typography rounded padding border height
{colors.canvas} {colors.ink} {typography.body-md} {rounded.md} {spacing.sm} {spacing.md} 1px solid {colors.hairline-strong} 44px
backgroundColor textColor border
{colors.canvas} {colors.ink} 2px solid {colors.primary}
backgroundColor textColor typography rounded padding height border
{colors.surface} {colors.steel} {typography.body-md} {rounded.md} {spacing.sm} {spacing.md} 44px 1px solid {colors.hairline}
backgroundColor textColor typography rounded padding border
transparent {colors.steel} {typography.body-sm-medium} {rounded.full} {spacing.xs} {spacing.md} 1px solid {colors.hairline}
backgroundColor textColor rounded border
{colors.ink-deep} {colors.on-dark} {rounded.full} 1px solid {colors.ink-deep}
backgroundColor textColor typography padding border
transparent {colors.steel} {typography.body-sm-medium} {spacing.sm} {spacing.md} 0 0 2px transparent solid
backgroundColor textColor typography border
transparent {colors.ink} {typography.body-sm-medium} 0 0 2px {colors.ink} solid
backgroundColor textColor typography rounded padding
{colors.primary} {colors.on-primary} {typography.caption-bold} {rounded.full} 4px 10px
backgroundColor textColor typography rounded padding
{colors.brand-pink} {colors.on-primary} {typography.caption-bold} {rounded.full} 4px 10px
backgroundColor textColor typography rounded padding
{colors.brand-orange} {colors.on-primary} {typography.caption-bold} {rounded.full} 4px 10px
backgroundColor textColor typography rounded padding
{colors.card-tint-lavender} {colors.brand-purple-800} {typography.caption-bold} {rounded.sm} 2px 8px
backgroundColor textColor typography rounded padding
{colors.card-tint-peach} {colors.brand-orange-deep} {typography.caption-bold} {rounded.sm} 2px 8px
backgroundColor textColor typography rounded padding
{colors.card-tint-mint} {colors.brand-green} {typography.caption-bold} {rounded.sm} 2px 8px
backgroundColor textColor typography rounded padding
{colors.primary} {colors.on-primary} {typography.caption-bold} {rounded.full} 4px 10px
backgroundColor textColor typography padding
{colors.surface} {colors.ink} {typography.body-sm-medium} {spacing.sm} {spacing.md}
backgroundColor textColor rounded padding
{colors.brand-navy} {colors.on-dark} 0 {spacing.hero}
backgroundColor rounded padding border shadow
{colors.canvas} {rounded.lg} 0 1px solid {colors.hairline} rgba(15, 15, 15, 0.2) 0px 24px 48px -8px
backgroundColor textColor rounded padding
{colors.surface} {colors.ink} {rounded.lg} {spacing.section}
backgroundColor textColor typography rounded border
{colors.canvas} {colors.ink} {typography.body-sm} {rounded.md} 1px solid {colors.hairline}
backgroundColor textColor padding border
{colors.canvas} {colors.ink} {spacing.md} {spacing.lg} 0 0 1px {colors.hairline-soft} solid
backgroundColor rounded padding border
{colors.canvas} {rounded.lg} {spacing.xxl} 1px solid {colors.hairline}
backgroundColor textColor typography padding
transparent {colors.steel} {typography.body-md-medium} {spacing.lg}
backgroundColor rounded padding border
{colors.canvas} {rounded.md} {spacing.xl} 0 0 1px {colors.hairline} solid
backgroundColor textColor rounded padding
{colors.surface} {colors.ink} {rounded.lg} {spacing.section-sm}
backgroundColor textColor typography padding border
{colors.canvas} {colors.charcoal} {typography.body-sm} {spacing.section} {spacing.xxl} 1px solid {colors.hairline}
backgroundColor textColor typography padding
transparent {colors.steel} {typography.body-sm} {spacing.xxs} 0

Overview

Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice. The homepage opens with "Meet the night shift." rendered centered over a deep navy hero band ({colors.brand-navy}), decorated with brand-colored sticky-note dots and mesh wire illustrations scattered around the headline. The signature purple pill primary CTA ({colors.primary}) "Get Notion free" sits at the visual center, paired with an outlined "Request a demo" secondary. Below the buttons, a real Notion workspace UI mockup card (the "Ramp HQ" kanban board) breaks out of the hero band with a deep diffuse drop shadow.

Below the hero, the page cycles through a distinctive sequence of feature sections: a dense sticky-note "Keep work moving 24/7" panel with red/blue/green/purple/teal status icons; a bold yellow ({colors.card-tint-yellow-bold}) "Ask your on-demand assistants" banner card flanked by orange/rose/mint pastel feature tiles showing assistant UI mockups; and a "Bring all your work together" 3-column grid with brand-colored mockups (sky-blue tutorial card, light Notion calendar, brown/rust testimonial slate). The pricing page renders 4 tiers (Free / Plus / Business / Enterprise) horizontally with one tier featured (purple-bordered) and a dense feature comparison table running below.

The system uses a Notion-Sans typeface (Inter-based) across every UI surface — humanist-geometric character that pairs naturally with the colorful illustrations. Buttons are {rounded.md} (8px) rectangles, NOT pills — distinguishing Notion's sober rectangular geometry from competitors that use pills universally. Cards use {rounded.lg} (12px) consistently.

Key Characteristics:

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

Colors

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

Brand & Primary

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

Brand Color Spectrum (echoes live product database properties)

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

Card Tints (Pastel Feature Card Backgrounds)

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

Surface

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

Text

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

Semantic

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

Typography

Font Family

Notion Sans (primary): Notion's custom Inter-based variable typeface. Fallbacks: Inter, -apple-system, system-ui, 'Segoe UI', Helvetica, sans-serif. Humanist-geometric character used across every UI surface.

Hierarchy

Token Size Weight Line Height Letter Spacing Use
{typography.hero-display} 80px 600 1.05 -2px Hero ("Meet the night shift")
{typography.display-lg} 56px 600 1.10 -1px Section openers
{typography.heading-1} 48px 600 1.15 -0.5px Page-level headlines ("Try for free")
{typography.heading-2} 36px 600 1.20 -0.5px Subsection headlines ("Keep work moving 24/7")
{typography.heading-3} 28px 600 1.25 0 Card titles
{typography.heading-4} 22px 600 1.30 0 Feature tile titles
{typography.heading-5} 18px 600 1.40 0 FAQ questions
{typography.subtitle} 18px 400 1.50 0 Hero subtitle
{typography.body-md} 16px 400 1.55 0 Primary body text
{typography.body-md-medium} 16px 500 1.55 0 Body emphasis
{typography.body-sm} 14px 400 1.50 0 Secondary body
{typography.body-sm-medium} 14px 500 1.50 0 Active sidebar, button labels
{typography.caption-bold} 13px 600 1.40 0 Badge labels
{typography.button-md} 14px 500 1.30 0 Button labels

Principles

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

Layout

Spacing System

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

Grid & Container

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

Whitespace Philosophy

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

Elevation & Depth

Level Treatment Use
0 (flat) No shadow; {colors.hairline} border Default cards, table rows
1 (subtle) rgba(15, 15, 15, 0.04) 0px 1px 2px 0px Hover-elevated tiles
2 (card) rgba(15, 15, 15, 0.08) 0px 4px 12px 0px Feature cards
3 (mockup) rgba(15, 15, 15, 0.20) 0px 24px 48px -8px Hero workspace mockup card
4 (modal) rgba(15, 15, 15, 0.16) 0px 16px 48px -8px Modals, dropdowns

Decorative Depth

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

Shapes

Border Radius Scale

Token Value Use
{rounded.xs} 4px Tag chips
{rounded.sm} 6px Type badges
{rounded.md} 8px Buttons, inputs, search-pill
{rounded.lg} 12px Cards, pricing tiers, agent tiles, workspace mockup
{rounded.xl} 16px Larger feature panels
{rounded.xxl} 20px Featured product showcases
{rounded.xxxl} 24px Larger feature cards
{rounded.full} 9999px Status badges, pill tabs (NOT regular buttons)

Notion's geometry is sober-editorial — {rounded.md} (8px) buttons distinguish it from pill-button-everywhere brands.

Components

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

Buttons

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

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

button-dark — Black rectangular CTA on light backgrounds.

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

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

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

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

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

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

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

button-ghost — Quieter ghost button.

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

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

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

Cards & Containers

card-base — Standard content card.

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

card-feature — Feature card with larger padding.

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

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

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

card-feature-peach + card-feature-rose + card-feature-mint + card-feature-sky + card-feature-lavender + card-feature-yellow + card-feature-cream — Pastel-tinted feature cards.

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

card-agent-tile — Agent assistant tile.

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

card-template — Template thumbnail card.

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

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

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

pricing-card — Standard pricing tier card.

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

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

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

Inputs & Forms

text-input — Standard text field.

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

text-input-focused — Activated state.

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

search-pill — Search bar.

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

Tabs

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

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

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

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

Badges & Status

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

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

badge-pink — Pink accent badge.

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

badge-orange — Orange accent badge.

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

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

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

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

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

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

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

badge-popular — "Most Popular" tier indicator.

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

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

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

Tables

comparison-table — Pricing feature comparison table.

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

comparison-row — Individual feature row.

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

Documentation Components

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

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

testimonial-card — Customer testimonial card.

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

logo-wall-item — Customer logo wordmark cell.

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

faq-accordion-item — FAQ panel.

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

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

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

cta-banner-light — Light surface CTA banner.

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

Navigation

Top Navigation (Marketing) — Sticky white bar.

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

Signature Components

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

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

footer-region — Multi-column light footer.

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

footer-link — Individual footer link.

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

Do's and Don'ts

Do

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

Don't

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

Responsive Behavior

Breakpoints

Name Width Key Changes
Mobile (small) < 480px Single column. Hero 36px. Pricing 1-up.
Mobile (large) 480 – 767px Feature cards 2-up. Hero 48px.
Tablet 768 – 1023px 2-column feature grids. Hero 56px.
Desktop 1024 – 1279px 4-tier pricing card row. Hero 72px.
Wide Desktop ≥ 1280px Full 80px hero presentation.

Touch Targets

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

Collapsing Strategy

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

Image Behavior

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

Iteration Guide

  1. Focus on ONE component at a time
  2. Reference component names and tokens directly
  3. Run npx @google/design.md lint DESIGN.md after edits
  4. Add new variants as separate components: entries
  5. Default to {typography.body-md} for body
  6. Keep {colors.primary} (purple) as the primary CTA — distinct from {colors.link-blue} for inline links
  7. Use {rounded.md} for buttons (rectangles), {rounded.lg} for cards, {rounded.full} for pill tabs/badges only

Known Gaps

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