The productivity-tool landing that treats the interface itself as the product — every surface feels like a well-crafted page in a well-crafted notebook. Notion carries paper-feel warmth on a warm off-white canvas, pairs a commissioned optical sans (NotionInter) with a serif (Lyon Text), a monospace (iA Writer Mono), and a sticker font (Permanent Marker), then cascades 4-5 soft shadow layers at sub-5% opacity to simulate ink on real paper. Rainbow accents are semantic vocabulary — link blue, editorial orange, citation brown — each tied to a specific content role.
This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Notion’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Paper-feel productivity identity where a warm off-white canvas, a custom optical sans paired with serif + mono + sticker accents, and a multi-layer soft shadow cascade carry the entire load of craft — no gradients, no atmospheric tricks. Rainbow accents are semantic vocabulary, not brand mood. The page reads as editorial software: marketing surface and writing surface speak the same visual language.
Main prompt
Design a paper-feel landing for a document or knowledge product where the interface itself is the product. Canvas is warm off-white #f6f5f4 (not cold SaaS white). Typography uses a custom optical sans as the single workhorse (NotionInter pattern — commission or adopt an optical-tuned Inter variant), paired with a book serif for pull quotes (Lyon Text), an editorial monospace for code and coordinates (iA Writer Mono), and a single sticker-hand font for callouts (Permanent Marker) — four families, four registers, no overlap. Text palette ladders through dark-ink #31302e for emphasis, neutral charcoal #000 for body (only 1352 occurrences in the extract — body reads as true ink), warm mid-grey #615d59 for secondary, soft grey #a39e98 for tertiary. Accent vocabulary is a semantic rainbow: #0075de link blue, #62aef0 info blue, #f64932 alert red, #ff6d00 editorial orange, #9c7054 citation warm-brown — each tone tied to an information role, never decorative. Elevation is the signature move: **multi-layer soft shadow cascade**, 4 to 5 stacked rgba declarations at 1-8% opacity. Border radius ladder 4 / 5 / 8 / 12 / 16px. Single 1px hairline border. Zero gradients. Spacing scale 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 20 / 24 / 28 / 32. Narrow containers 500-892 for reading, 1184-1252 for utility grids. Motion is CSS-only with two-tier timing: 0.15-0.2s for interactive feedback, 0.6-1s for editorial reveals; easings draw from ease / ease-in / ease-in-out / linear plus cubic-bezier(0.645, 0.045, 0.355, 1) and cubic-bezier(0.45, 0, 0.55, 1) — no motion library captured. Breakpoints sm 375 / md 712 / lg 908 / xl 1156 / 2xl 1440.
Layout
centered narrow column for reading (500-892 container), full-width utility grids (1184-1252) for feature matrices; sticky nav at z-100/1000
Content width
892px primary reading width, 500-600px for marketing callouts, 1252 max for product-tour grids
Framing
warm off-white #f6f5f4 canvas with content floating at narrow widths; multi-layer shadow elevation replaces decorative chrome
Warm off-white canvas, dark-ink text at four opacity tiers, and a semantic rainbow of accents where each tone is tied to a specific content role
Mode strategylight-first with a dark mode readable via CSS variable swap; the palette is engineered for a single surface tone with text-color opacity ladder (--text-color-extra-light through --text-color-dark)
bg #f6f5f4 (warm ivory — replaces cold SaaS white everywhere)
text #000 body (optical black, 1352 occurrences — true ink feel)
text #31302e emphasis (slightly warmed dark charcoal)
text #615d59 secondary (warm mid-grey)
text #a39e98 tertiary (soft grey — metadata, timestamps)
#0075de link + primary CTA (functional blue)
#62aef0 info / tip blocks (lighter blue for callouts)
#f64932 alert / destructive (saturated red-orange — only for error semantics)
Single workhorse sans: NotionInter (a commissioned optical cut of Inter). Pair it with a serif, a mono, and one sticker font — do not exceed four families
Preload the four hero weights: NotionInter-Regular / Medium / SemiBold / Bold (local woff2)
Body paragraph 16px / 24 line-height at weight 400 is the comfortable reading size
Utility text 14px / 20 at weight 400-500, captions 12px / 16 at weight 500
Display headlines up to 40px / 60 or 48px / 72 at weight 400-500 — serif or sans acceptable, never bold
Serif (Lyon Text pattern) appears only for pull quotes and longer-form editorial moments
Mono (iA Writer Mono pattern) appears only for code, coordinates, API signatures, and citation references
Sticker font (Permanent Marker pattern) appears only for callout stickers and annotation accents — never in prose
Letter-spacing stays 'normal' — do not track-open for atmosphere
Base unit 2px — scale is 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 20 / 24 / 28 / 32
24-32 for section padding, 12-20 for component internal rhythm, 2-8 for inline token micro-spacing
No value above 32px in a single gap — larger vertical distance comes from section height, not margin
Surface stylepaper-like — zero gradients, a single 1px solid hairline border, multi-layer soft shadow cascade for elevation
Signature shadow-xs: 4 stacked shadow declarations at 1-4% opacity — the 'paper-on-paper' feel
shadow-sm: 5 stacked layers, opacity 1-5%, for modal surfaces
shadow-xl: 2-layer modest, for card hover elevation
Hoverbackground-color 0.2s ease-in for buttons and nav items, outline-color 0.2s ease-in for focus states, box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) for card hover lift
Scroll patterns
sticky nav pins at z-100 with hairline appearing on scroll
section fade-ins via IntersectionObserver — captured timings 0.6 s and 1 s on cubic-bezier(0.45, 0, 0.55, 1) for editorial pacing
Two-tier timing: interactive feedback at 0.15-0.2s (background, outline, shadow lift) and longer reveals at 0.6-1s (section fade-ins, atmospheric beats).
No motion library — CSS transitions only.
Easing palette: cubic-bezier(0.645, 0.045, 0.355, 1) for elevation changes (Material standard quart), cubic-bezier(0.45, 0, 0.55, 1) for editorial reveals, plus CSS keywords ease / ease-in / ease-in-out / linear for simpler transitions.
Gate all transitions on prefers-reduced-motion: reduce.
Hover on link: background-color fades in at 8% opacity wash of the link color
Button press: subtle scale or translate shift, never a heavy shadow-lift
Focus: outline-color transition, color-matched to the semantic role (blue for primary, red for destructive)
Card hover: shadow cascade deepens by one opacity tier
Paragraph links adopt #0075de with underline-offset for editorial readability
Approachdesktop-first
sm 375 / md 712 / lg 908 / xl 1156 / 2xl 1440 — deliberately non-standard sm (iPhone SE), md below conventional 768 to catch narrow tablets early
Below md (712) single column, container 500-600, section padding halves
md-lg utility grids collapse to 2-col
xl (1156) unlocks 3-col feature matrices
2xl (1440) max container 1252 — never edge-to-edge marketing copy
Body #000 on #f6f5f4 = ~20:1 contrast — AAA
Secondary text #615d59 on #f6f5f4 = ~6:1 — AAA body, AA for large text
Tertiary #a39e98 reserved for timestamps and metadata — AA large text only
Link #0075de on canvas = ~4.8:1 — AA minimum
All interactive elements keyboard reachable; focus state via outline-color transition (no ring removal)
Motion durations 0.15-0.2s fit prefers-reduced-motion tolerance — gate transitions accordingly
Next.js Image with lazy loading (100% lazy usage across the page's 30+ images)Custom SVG illustrations (no third-party icon library)AI-related imagery suggesting agent-workspace positioning (ai_group.png hero asset)
Illustrations are hand-crafted warm-line sketches rather than abstract gradients or 3D renders — the visual language stays paper-native throughout
Lazy-load all images below the first viewport
Provide explicit width/height to prevent CLS
Serve 2x densities via srcset for retina displays
Warm the canvas to off-white (#f6f5f4 or neighbor) instead of cold #ffffff — the whole identity hangs on this one choice
Commission or adopt an optical-tuned sans for body — stock Inter reads as template-tier at density
Use the multi-layer shadow cascade religiously — one harsh shadow kills the paper illusion
Assign semantic roles to accent colors before painting anything — rainbow-as-vocabulary only works with discipline
Expose tokens as CSS variables with a semantic ladder (text-color-*, border-radius-*) — lets designers inspect and agents read
Don't add gradients for atmosphere — Notion is gradient-free by design, and the paper illusion breaks instantly
Don't use a single harsh box-shadow — always cascade 4-5 layers at sub-5% opacity
Don't mix the rainbow accents on the same component — one concept = one color, never stacked
Don't replace the mono or serif with generics — iA Writer Mono and Lyon Text carry editorial signal that helvetica-mono and Times cannot
Don't exceed 32px in a single gap — section rhythm is carried by height, not margin
No gradient tokens in the system (0 linear, 0 radial)
Exactly four font families (sans + serif + mono + sticker), each tied to a register
background-color of root <body> resolves to #f6f5f4 (not #ffffff)
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 2 nodes across 2 levels, shallow to deep by color.
body1
div (×2)
Accessibility
Contrast matrix
278 combinations - 78 pass AA - 38 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox19.29
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#F6F5F4
APCA Lc
+100
Use
foreground on background
AaThe quick brown fox19.29
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#F6F5F4
bg
#000000
APCA Lc
-101
Use
background on foreground
AaThe quick brown fox17.49
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#F6F5F4
bg
#02093A
APCA Lc
-101
Use
background on accent
AaThe quick brown fox17.49
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#02093A
bg
#F6F5F4
APCA Lc
+99
Use
accent on background
AaThe quick brown fox16.16
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#F6F5F4
bg
#191918
APCA Lc
-100
Use
background on foreground
AaThe quick brown fox16.16
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#191918
bg
#F6F5F4
APCA Lc
+99
Use
foreground on background
AaThe quick brown fox13.77
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFC95E
APCA Lc
+80
Use
foreground on accent
AaThe quick brown fox13.77
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFC95E
bg
#000000
APCA Lc
-79
Use
accent on foreground
AaThe quick brown fox12.49
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#02093A
bg
#FFC95E
APCA Lc
+79
Use
accent on accent
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
