Developers: Get a first look at our new Developer Platform on May 13. Register today →

# 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
Developers: Get a first look at our new Developer Platform on May 13. Register today →

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 | — | — | — | ✓

## Forms & Inputs

44px-tall inputs with 8px rounded corners. Focus shifts to a 2px Notion purple border.

Email
Workspace name
Team size
search-pill — 44px height

## Tabs & Navigation

Underline-style segmented tabs and pill tabs for top-level switching.

### Segmented Tabs

### Pill Tabs

## Stat Row

"More productivity. Fewer tools." stat callout strip on the surface background.

10Tools replaced
$340Saved per user/year
$4,080Total annual savings

## 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

## Logo Wall

Customer logo grid — wordmark presentation in trust-row sections.

OpenAI
Figma
Ramp
Cursor
Vercel
NVIDIA

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

## CTA Banner Light

Page-bottom light surface CTA banner with Notion purple primary CTA.

#### Try for free

Get started with Notion. Connect your team, AI agents, and tools in one workspace.

## Spacing Scale

4px base unit, 8px primary increment. Section rhythm runs from 48px to 120px.

4xxs
8xs
12sm
16md
20lg
24xl
32xxl
40xxxl
48section-sm
64section
96section-lg
120hero

## Border Radius Scale

Rectangular geometry — 8px buttons, 12px cards. Pills (9999px) reserved for status badges only.

4pxxs
6pxsm
8pxmd
12pxlg
16pxxl
20pxxxl
24pxxxxl
pillfull

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