LANDING PAGE TEARDOWN
What makes Notion's landing page work — and how to build yours like it.
Framework
Next.js (React)
CSS approach
CSS Modules + custom properties
Page load time
2.1s
Sections
9 sections
CTA count
5 CTAs
Mobile responsive
Yes
What it does
Position Notion as the all-in-one workspace with a playful, approachable tone.
Why it works
Light background with hand-drawn-style illustrations feels friendly and non-technical. The headline appeals to all personas. A single 'Get Notion free' CTA removes friction.
Design tokens
Colors
#FFFFFF (bg)
#37352F (text)
#2EAADC (accent blue)
Fonts
Notion Sans (custom heading)
Notion Sans (body)
Spacing
96px top padding
32px CTA gap
48px bottom padding
What it does
Show the product in action with an embedded video or animated preview.
Why it works
A self-playing product video replaces a thousand words. Positioned immediately below the hero. Rounded corners and subtle shadow create a floating-window effect.
Design tokens
Colors
#FBFBFA (bg)
#37352F (shadow)
Spacing
64px section padding
32px video border-radius
What it does
Show different use cases (Engineering, Design, Product, Marketing) with dedicated views.
Why it works
Horizontal tab bar lets visitors self-select their persona. Each tab reveals a tailored screenshot and description. Reduces cognitive load.
Design tokens
Colors
#FFFFFF (bg)
#37352F (active tab)
#999 (inactive tab)
#2EAADC (hover)
Fonts
Notion Sans 600 (tab label)
Notion Sans 400 (description)
Spacing
16px tab padding
32px content gap
What it does
Highlight core features (Docs, Wikis, Projects, AI) with dedicated sections.
Why it works
Each feature gets a full-width section with illustration + text. Playful illustrations with soft colors match the brand personality. Short, benefit-focused copy.
Design tokens
Colors
#FFFFFF (bg)
#37352F (heading)
#787774 (body)
Pastel accents per feature
Fonts
Notion Sans 700 (feature heading)
Notion Sans 400 (body)
Spacing
120px between features
48px text-to-illustration gap
What it does
Trust indicators with major company logos.
Why it works
Clean logo bar with uniform sizing. Mix of tech and non-tech companies shows broad adoption. Positioned mid-page to reinforce trust.
Design tokens
Colors
#FFFFFF (bg)
#37352F (logos at low opacity)
Spacing
48px vertical padding
24px between logos
What it does
Highlight Notion AI as a differentiator.
Why it works
Dedicated section with a distinct gradient background signals 'new and important.' Demo-style animation shows AI in action. Separate CTA for AI-specific conversion.
Design tokens
Colors
Linear gradient (purple to blue)
#FFFFFF (text on gradient)
Fonts
Notion Sans 700 (heading)
Notion Sans 400 (body)
Spacing
96px section padding
32px content gap
What it does
Customer quotes organized by use case.
Why it works
Cards with customer photo, name, title, and quote. Organized by team type. Each quote mentions a specific outcome.
Design tokens
Colors
#FBFBFA (bg)
#37352F (quote)
#787774 (name)
Fonts
Notion Sans 400 italic (quote)
Notion Sans 500 (name)
Spacing
24px card padding
16px gap between cards
What it does
Surface free tier prominently to reduce conversion friction.
Why it works
Free tier is the visual default — highlighted and leftmost. Simple 3-tier layout. 'Get started' instead of 'Buy now' language.
Design tokens
Colors
#FFFFFF (bg)
#2EAADC (free CTA)
#37352F (pricing text)
Fonts
Notion Sans 700 (price)
Notion Sans 400 (features)
Spacing
32px card padding
16px feature gap
What it does
Last conversion opportunity with minimal friction.
Why it works
Simple centered section: headline + single CTA. 'Get Notion free' reinforces free tier. No email field — just a direct link to signup.
Design tokens
Colors
#FFFFFF (bg)
#37352F (text)
#2EAADC (CTA)
Fonts
Notion Sans 700 (headline)
Notion Sans 600 (button)
Spacing
96px vertical padding
24px headline-to-CTA gap
Hand-drawn-style illustrations with soft colors create an approachable, non-intimidating feel. Stands out from the typical SaaS dark-mode aesthetic.
Horizontal tabs let visitors self-select their role and see tailored content. Reduces cognitive load by showing only relevant information.
Free tier is visually highlighted and positioned first. Copy uses 'Get started' instead of 'Buy.' Reduces conversion anxiety.
Generous whitespace, light backgrounds, and soft shadows create a clean, uncluttered feel.
Playful illustrations make software feel approachable to non-technical audiences.
Persona-based tabs let visitors self-select, reducing cognitive load and increasing relevance.
Lead with the free tier in pricing to reduce conversion anxiety.
Generous whitespace signals quality and makes content more scannable.
A single, clear CTA ('Get Notion free') is more effective than multiple competing actions.
Clone Notion with ui.rip. Get the component structure, design tokens, and layout as a Next.js project.
Free to inspect · Pay only when you download