Notion — Pricing

PricingSee it livenotion.com

Four plans compressed into a two-card decision: pricing tiers grouped into narrative pairs, with a blue tint and Recommended badge steering the whole page toward one card.

Notion — Pricing — captured interface — Page excerpt · scroll inside to explore

Source capture · 2026-08-09Open full image ↗

Commerce

Why this pattern works

Tier GROUPING. Instead of four sibling columns, Notion wraps Free+Plus in one white card headlined 'Essentials for staying organized.' and Business+Enterprise in a second, blue-tinted card headlined 'The AI workspace for work that matters.' The buyer's first decision becomes a story choice between two cards, not a spec comparison across four columns — and the tinted card plus the single solid-blue CTA and 'Recommended' badge pre-answers it. Steal this whenever you have 4+ plans: group them by audience narrative, headline each group, and tint exactly one group. The per-plan columns inside each card stay conventional (price, blurb, CTA, checklist), so nothing else has to be reinvented.

Design notes

Surface: Full pricing page: nav, headline with logo strip, billing toggle row, and the two grouped plan cards
Navigation: One white bar: N logomark left, centred text links (Product ⌄, Resources ⌄, Developers, Enterprise, Pricing, Request a demo), right-aligned quiet 'Log in' text plus a solid-blue 'Get Notion free' pill — the nav CTA already matches the page's accent.
Layout: Centred column. Headline, then a greyscale trusted-by logo row, then a control row (segmented billing toggle left, 'Price in USD' right), then two side-by-side rounded cards — the left slightly narrower — each internally split into two plan columns.
Density: Comfortable. Big open hero, roomy card padding (~32px), checklists at ~30px line height. Four plans' worth of content fits without feeling like a matrix because the grouping halves the perceived width.
Color: White canvas, near-black text. Blue is the only accent and it's spent as a gradient of commitment: pale-blue button fills on Free/Plus, a pale-blue tint over the entire right card, the blue 'Recommended' badge, and one solid-blue 'Get started' on Business. Grey checkmarks, greyscale partner logos, one playful face-doodle illustration in the tinted card.
Type: One geometric sans. Page headline ~64px bold ending in a period; group headlines ~28px bold inside the cards (also ending in periods); plan names ~20px bold; prices ~24px bold with 'per member / month' at ~13px grey beside them; checklist items ~14px.
Pattern: Grouped tiers: each card = a headline naming the audience story + two plan columns sharing that frame. Inheritance lines ('Everything in Free, and:', 'Everything in Plus, and:') chain ACROSS the cards, so the four plans still read as one ladder even though they're visually paired.
States: 'Pay yearly' is the active segment — a white pill inside the grey capsule — with a blue 'Save up to 20% with yearly' note beside it. Business carries the blue 'Recommended' badge; asterisks on Plus and Enterprise flag footnoted terms. Enterprise shows 'Custom pricing' where a number would go, keeping column alignment.
Don't: Don't tint both cards or give every plan a filled CTA. The funnel works because exactly one card is tinted and exactly one button is solid blue; equal treatment turns the story back into a four-column spec sheet.

Make it your own

Turn this reference into a useful brief for your project. Copy it into the AI tool you already use.

Your project

Use withI want to

Tech stack

Add constraints

What should the tool respect?

Preview & edit prompt

Prompt text

# My project
[Describe the product, audience, and screen you want to improve]

Stack: Use the existing project stack
Task: Implement the interface and verify the result in the existing project.

## Tool guidance (Any AI tool)
Use available project tools to inspect, implement, and test. State any unavailable capabilities.

# Design reference: Notion — Pricing
Source: https://www.notion.com/pricing
Swipefile reference: https://swipefile.design/ref/notion-pricing/
Captured: 2026-08-09. This is a dated reference, not a claim about the current live product.
Capture scope: a page excerpt. Do not infer unseen sections or interactions.

## Objective
Adapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- surface: Full pricing page: nav, headline with logo strip, billing toggle row, and the two grouped plan cards
- nav: One white bar: N logomark left, centred text links (Product ⌄, Resources ⌄, Developers, Enterprise, Pricing, Request a demo), right-aligned quiet 'Log in' text plus a solid-blue 'Get Notion free' pill — the nav CTA already matches the page's accent.
- layout: Centred column. Headline, then a greyscale trusted-by logo row, then a control row (segmented billing toggle left, 'Price in USD' right), then two side-by-side rounded cards — the left slightly narrower — each internally split into two plan columns.
- density: Comfortable. Big open hero, roomy card padding (~32px), checklists at ~30px line height. Four plans' worth of content fits without feeling like a matrix because the grouping halves the perceived width.
- color: White canvas, near-black text. Blue is the only accent and it's spent as a gradient of commitment: pale-blue button fills on Free/Plus, a pale-blue tint over the entire right card, the blue 'Recommended' badge, and one solid-blue 'Get started' on Business. Grey checkmarks, greyscale partner logos, one playful face-doodle illustration in the tinted card.
- typography: One geometric sans. Page headline ~64px bold ending in a period; group headlines ~28px bold inside the cards (also ending in periods); plan names ~20px bold; prices ~24px bold with 'per member / month' at ~13px grey beside them; checklist items ~14px.
- pattern: Grouped tiers: each card = a headline naming the audience story + two plan columns sharing that frame. Inheritance lines ('Everything in Free, and:', 'Everything in Plus, and:') chain ACROSS the cards, so the four plans still read as one ladder even though they're visually paired.
- states: 'Pay yearly' is the active segment — a white pill inside the grey capsule — with a blue 'Save up to 20% with yearly' note beside it. Business carries the blue 'Recommended' badge; asterisks on Plus and Enterprise flag footnoted terms. Enterprise shows 'Custom pricing' where a number would go, keeping column alignment.
- dont: Don't tint both cards or give every plan a filled CTA. The funnel works because exactly one card is tinted and exactly one button is solid blue; equal treatment turns the story back into a four-column spec sheet.

Useful for: Tier GROUPING. Instead of four sibling columns, Notion wraps Free+Plus in one white card headlined 'Essentials for staying organized.' and Business+Enterprise in a second, blue-tinted card headlined 'The AI workspace for work that matters.' The buyer's first decision becomes a story choice between two cards, not a spec comparison across four columns — and the tinted card plus the single solid-blue CTA and 'Recommended' badge pre-answers it. Steal this whenever you have 4+ plans: group them by audience narrative, headline each group, and tint exactly one group. The per-plan columns inside each card stay conventional (price, blurb, CTA, checklist), so nothing else has to be reinvented.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.

Assembled in your browser. No API key or AI request needed. Changing the fields refreshes the preview.

## Objective
Adapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

Notion — Pricing

Make it your own

Keep exploring