Warm editorial-minimal: paper-white canvas, warm-black ink, one calm blue, huge tight headlines, hand-drawn doodles.
Browse Notion in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: notion.com (live DOM, computed styles + color census), 2026-07-06; motion/effects/responsive re-capture 2026-07-07. Coverage: marketing site + embedded workspace mock. Full dashboard: needs-dashboard (web app opens via app-link). Responsive: breakpoints captured; mobile rendering not verified.
Warm, friendly, and editorial-minimal: a near-white paper canvas carrying warm-black ink, with one calm blue accent doing all the interactive work. Huge, tightly-tracked display headlines sit over hand-drawn doodles and illustrated avatars, giving the page a hand-made, human character. Playful multi-color highlight pops appear only in small doses — a tinted pill behind a single word, a doodle, an avatar — never as UI chrome. The overall effect is quietly premium and content-first: a document, not a dashboard. Feels: approachable, human, calm, quietly premium.
| Token | Hex | Role / usage |
|---|---|---|
| ink-strong | rgba(0,0,0,.95) | Headings, high-emphasis text |
| ink | rgba(0,0,0,.898) | Body text, nav (the default ink) |
| ink-muted | rgba(0,0,0,.54) | Secondary text |
| warm-gray | #615d59 | Captions, warm secondary text |
| border | rgba(0,0,0,.1) | Hairline dividers, panel borders |
| paper | #f6f5f4 | Warm off-white section bg (signature) |
| white | #ffffff | Page bg, cards |
| Token | Hex | Role / usage |
|---|---|---|
| blue | #0075de | Primary button, links, active states |
| blue-hover | #005bab | Hover / pressed |
| blue-bright | #097fe8 | Brighter links |
| blue-tint | #eaf1f8 | Secondary-button fill |
| Token | Hex |
|---|---|
| amber | #ffb110 |
| lavender-hl | #e9ddfb (bg) + purple dot #8b5cf6 |
| green-hl | #d7efdb (bg) + green dot #2eae4e |
| sky | #62aef0 |
Rule: chrome is warm-black on white/paper with a single blue accent. Bright hues appear only as highlight backgrounds behind a word, in illustrated avatars, or in hand-drawn doodles — never as UI fills.
Font stack: NotionInter, Inter, -apple-system, "Segoe UI", Helvetica, sans-serif. NotionInter is Notion's tuned Inter; fall back to Inter.
| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | 96 / 100 | 600 | -4.6px (≈ -4.8%) |
| Section (h2) | 40–48 | 600 | -2 to -3% |
| Subhead | 20–24 | 400 | -1% |
| Body | 16 / 24 | 400 | 0 |
| UI / nav | 16 | 400–500 | 0 |
| Caption | 14 | 400 | 0 |
Patterns: display is huge and VERY tightly tracked — the Notion signature. Display weight is 600 (never 700+) with dramatic negative tracking; body stays a comfortable 16px/24 weight 400 in rgba(0,0,0,.898). Headlines often embed a highlighted word (colored pill + dot) that cycles color.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.