Design System Inspiration of Notion

Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice — anchored by a deep navy hero band with a signature purple pill primary CTA and a rich palette of pastel-tinted feature cards.

Ramp HQ

⏱ TO-DO 13

Review performance metrics

Respond to beta test questions

Plan upcoming sprint goals

Update onboarding

🟡 IN PROGRESS 4

Sales demo sync

Launch demo video

Headcount planning

Engineering sync

🔵 IN REVIEW 4

Weekly sales status report

Marketing campaign designs

Latest features customer emails

New features documentation

🟢 COMPLETE 34

Project onboarding

Finalize launch timeline

All hands alignment

Draft press release

Color Palette

Signature purple primary CTA anchored by deep navy hero bands. Rich pastel feature card palette and brand color spectrum echo the live product database properties.

Brand & Primary

Notion Purple

#5645d4

Primary CTA pill

Purple Pressed

#4534b3

Pressed-state purple

Purple Deep

#3a2a99

Deep emphasis

Brand Navy

#0a1530

Hero band background

Brand Navy Deep

#070f24

Promo banner deep

Link Blue

#0075de

Inline links (NOT CTA)

Brand Color Spectrum

Brand Pink

#ff64c8

Pink accent

Brand Orange

#dd5b00

Orange accent

Brand Purple

#7b3ff2

Purple variant

Brand Teal

#2a9d99

Teal accent

Brand Green

#1aae39

Green accent

Brand Yellow

#f5d75e

Yellow accent

Card Tints (Pastel Feature Cards)

Tint Yellow Bold

#f9e79f

High-emphasis banner

Tint Peach

#ffe8d4

Pastel feature card

Tint Rose

#fde0ec

Pastel feature card

Tint Mint

#d9f3e1

Pastel feature card

Tint Lavender

#e6e0f5

Pastel feature card

Tint Sky

#dcecfa

Pastel feature card

Tint Yellow

#fef7d6

Pale yellow card

Tint Cream

#f8f5e8

Cream card

Surface

Canvas White

#ffffff

Page + card background

Surface

#f6f5f4

Subtle background

Hairline

#e5e3df

Borders

Hairline Strong

#c8c4be

Input borders

Text

Ink Deep

#000000

Pure black emphasis

Ink

#1a1a1a

Headlines, body

Charcoal

#37352f

Body emphasis

Slate

#5d5b54

Secondary text

Steel

#787671

Tertiary, footer

Stone

#a4a097

Muted labels

Typography Scale

Notion-Sans (Inter-based) across every UI surface — humanist-geometric character.

hero-display80px / 600 / 1.05 / -2px

Meet the night shift

display-lg56px / 600 / 1.10 / -1px

Bring all your work together

heading-148px / 600 / 1.15 / -0.5px

Try for free

heading-236px / 600 / 1.20 / -0.5px

Keep work moving 24/7

heading-328px / 600 / 1.25

Card title

heading-518px / 600 / 1.40

Smaller card titles

subtitle18px / 400 / 1.50

Hero subtitle

body-md16px / 400 / 1.55

Primary body text used across documentation prose, marketing copy, and feature descriptions.

body-sm14px / 400 / 1.50

Secondary body, table cells

caption-bold13px / 600 / 1.40

BADGE / TAG

button-md14px / 500 / 1.30

BUTTON LABEL

Button Variants

Rectangular geometry — `rounded-md` (8px) buttons, NOT pills. Notion uses sober editorial corner softening.

button-primaryNotion purple CTA

button-darkBlack on light

button-secondaryOutlined secondary

button-on-darkWhite on dark

button-secondary-on-darkOutlined on dark

button-ghostQuieter ghost

button-linkInline blue link

button-primary-disabledDisabled state

Badges & Status

Pill-shaped status indicators alongside small rect category tag chips.

New Popular Beta Database Templates Active

promo-banner — light-surface strip with link-blue inline link

Pastel Feature Cards

Pastel-tinted feature cards echoing the live product database properties. Bold yellow for high-emphasis banner sections.

Ask your on-demand assistants

Bold yellow banner — high-emphasis feature section.

Templates

Get started with pre-built templates for your team.

Bring all your work together

Connect docs, projects, and knowledge in one workspace.

Notion AI

Smart writing assistance built into every page.

Databases

Powerful databases that turn information into action.

Sites

Publish polished sites from any Notion page.

Cards & Containers

White feature cards, agent tiles, startup perks, and template thumbnails.

Standard Card

White canvas with hairline border and 12px corners.

Feature Card

Larger feature card with 32px padding for grouped content.

🤖 Q&A Agent

On-demand assistants that capture knowledge and answer questions.

Startup Perk Grid

💰

Discounts and credits

Special savings on Notion Plus and partner services.

⚡

Priority support

Get expert help fast, when you need it most.

🎁

Startup pack

Access exclusive products from partners worth thousands.

🤝

Founder community

Connect with other early-stage founders building with Notion.

Pricing Tiers

4-tier comparison (Free / Plus / Business / Enterprise). Featured tier highlighted with surface background and Notion purple border.

Free

$0/mo

Unlimited pages
Basic blocks
Community support

Plus

$10/mo

Unlimited file uploads
Custom domains
Email support
Private team spaces

Business

$18/mo

SAML SSO
Private teamspaces
Bulk PDF export
Advanced analytics

Enterprise

Custom

User provisioning (SCIM)
Audit log
Customer success manager
Workspace analytics

Feature Comparison Table

Feature	Free	Plus	Business	Enterprise
CORE
Unlimited pages	✓	✓	✓	✓
File uploads	5 MB	Unlimited	Unlimited	Unlimited
TEAM
Custom workspace	—	✓	✓	✓
Private team spaces	—	—	✓	✓
SECURITY
SAML SSO	—	—	✓	✓
SCIM provisioning	—	—	—	✓
Audit log	—	—	—	✓

Customer Testimonials

White testimonial cards with quote + author + title.

"Notion saved our team from drowning in tools. Everything is connected, and our docs finally feel like part of the workflow."

Verified buyer

Engineering Lead

"The night-shift agents quietly handle our task routing and Q&A. We woke up to fewer open issues than we went to bed with."

Customer Success

Operations Manager

FAQ Accordion

Frequently-asked-questions panel. Collapsed by default; chevron toggle.

How does Notion pricing work? ⌃

Notion offers a Free tier, Plus at $10/month, Business at $18/month, and Custom enterprise plans. Annual billing saves 20%.

Can I migrate from another tool? ⌄

Yes — Notion provides import tools for Evernote, Google Docs, Confluence, and more.

Is Notion SOC 2 compliant? ⌄

Yes — Notion is SOC 2 Type II certified. Enterprise plans include additional security features.

Elevation & Depth

Predominantly flat. Strategic depth on workspace mockup card over hero band.

Level 0 — Flatborder + hairline

Level 1 — Subtlergba(15,15,15,0.04) 0 1px 2px

Level 2 — Cardrgba(15,15,15,0.08) 0 4px 12px

Level 3 — Mockuprgba(15,15,15,0.20) 0 24px 48px -8px

Level 4 — Modalrgba(15,15,15,0.16) 0 16px 48px -8px

Responsive Behavior

Hero scales from 80px → 36px on mobile. 4-tier pricing collapses to 1-up.

Breakpoint	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.

Device Ladder

375px

480px

768px

1024px

1280+

Touch Targets

Buttons render at 40–44px height — at WCAG AAA floor.
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 stacks below text on mobile; sidebar disappears in mockup.
Pricing tiers: 4-column → 2-column tablet → 1-column mobile.
Hero typography: 80px → 56px → 48px → 36px.
Footer: 6-column desktop → 3-column tablet → accordion mobile.

Design System Inspiration of Notion

Ramp HQ

Color Palette

Brand & Primary

Brand Color Spectrum

Card Tints (Pastel Feature Cards)

Surface

Text

Typography Scale

Button Variants

Badges & Status

Pastel Feature Cards

Ask your on-demand assistants

Templates

Bring all your work together

Notion AI

Databases

Sites

Cards & Containers

Standard Card

Feature Card

🤖 Q&A Agent

Startup Perk Grid

Discounts and credits

Priority support

Startup pack

Founder community

Pricing Tiers

Feature Comparison Table

Forms & Inputs

Tabs & Navigation

Segmented Tabs

Pill Tabs

Stat Row

Customer Testimonials

Logo Wall

FAQ Accordion

CTA Banner Light

Try for free

Spacing Scale

Border Radius Scale

Elevation & Depth

Responsive Behavior

Device Ladder

Touch Targets

Collapsing Strategy