Notion Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

12type steps

7radius steps

2pxspacing base

Notion, in one page

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)

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

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Notion design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #5645d4
- primary-pressed: #4534b3
- primary-deep: #3a2a99
- on-primary: #ffffff
- brand-navy: #0a1530
- brand-navy-deep: #070f24
- brand-navy-mid: #1a2a52
- link-blue: #0075de
- link-blue-pressed: #005bab
- brand-orange: #dd5b00

Type:
- families: Notion Sans
- scale: 11, 12, 13, 14, 16, 18, 22, 28, 36
- weights: 400, 500, 600

Shape:
- radius: 4, 6, 8, 12, 16, 20, 24
- elevation: "rgba(15, 15, 15, 0.2) 0px 24px 48px -8px" | Real Notion workspace UI mockup card embedded in the hero with deep drop shadow

Spacing: 2, 4, 8, 10, 12, 16, 20, 24, 32, 40

Rules:
- 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

Avoid:
- 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

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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)

Type scaleRead the full spec

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

Components and layoutRead the full spec

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

Responsive behaviourRead the full spec

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

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-notion {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #1a1a1a;
  --heading-color: #1a1a1a;
  --link-color: #5645d4;
  --link-hover-color: #3c2bbb;
  --border-color: #d6d6d6;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(26,26,26,0.06);
  --card-hover-shadow: 0 6px 18px rgba(26,26,26,0.12);
  --header-bg: #1a1a1a;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #6a6a6a;
  --button-bg: #5645d4;
  --button-text-color: #ffffff;
  --button-hover-bg: #3c2bbb;
  --button-border: none;
  --button-border-radius: 12px;
  --button-secondary-bg: #f1f1f1;
  --button-secondary-text-color: #1a1a1a;
  --button-secondary-hover-bg: #e4e4e4;
  --button-secondary-border: 1px solid #d6d6d6;
  --prompt-bg: #f4f4f4;
  --prompt-text-color: #1a1a1a;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 12px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

mongodb 85.1%
miro 84.0%
mintlify 83.6%
minimax 82.3%
resend 80.1%

Where this came from

Source document: volt/design-md/notion/DESIGN.md · 34.2 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.