skills/creative/popular-web-designs/templates/notion.md
Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:
- Primary:
Inter| Mono:system monospace stack- Font stack (CSS):
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">Use
write_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Notion's website embodies the philosophy of the tool itself: a blank canvas that gets out of your way. The design system is built on warm neutrals rather than cold grays, creating a distinctly approachable minimalism that feels like quality paper rather than sterile glass. The page canvas is pure white (#ffffff) but the text isn't pure black -- it's a warm near-black (rgba(0,0,0,0.95)) that softens the reading experience imperceptibly. The warm gray scale (#f6f5f4, #31302e, #615d59, #a39e98) carries subtle yellow-brown undertones, giving the interface a tactile, almost analog warmth.
The custom NotionInter font (a modified Inter) is the backbone of the system. At display sizes (64px), it uses aggressive negative letter-spacing (-2.125px), creating headlines that feel compressed and precise. The weight range is broader than typical systems: 400 for body, 500 for UI elements, 600 for semi-bold labels, and 700 for display headings. OpenType features "lnum" (lining numerals) and "locl" (localized forms) are enabled on larger text, adding typographic sophistication that rewards close reading.
What makes Notion's visual language distinctive is its border philosophy. Rather than heavy borders or shadows, Notion uses ultra-thin 1px solid rgba(0,0,0,0.1) borders -- borders that exist as whispers, barely perceptible division lines that create structure without weight. The shadow system is equally restrained: multi-layer stacks with cumulative opacity never exceeding 0.05, creating depth that's felt rather than seen.
Key Characteristics:
#f6f5f4 warm white, #31302e warm dark)rgba(0,0,0,0.95) -- not pure black, creating micro-warmth1px solid rgba(0,0,0,0.1) throughout -- whisper-weight division#0075de) as the singular accent color for CTAs and interactive elementsrgba(0,0,0,0.95) / #000000f2): Primary text, headings, body copy. The 95% opacity softens pure black without sacrificing readability.#ffffff): Page background, card surfaces, button text on blue.#0075de): Primary CTA, link color, interactive accent -- the only saturated color in the core UI chrome.#213183): Secondary brand color, used sparingly for emphasis and dark feature sections.#005bab): Button active/pressed state -- darker variant of Notion Blue.#f6f5f4): Background surface tint, section alternation, subtle card fill. The yellow undertone is key.#31302e): Dark surface background, dark section text. Warmer than standard grays.#615d59): Secondary text, descriptions, muted labels.#a39e98): Placeholder text, disabled states, caption text.#2a9d99): Success states, positive indicators.#1aae39): Confirmation, completion badges.#dd5b00): Warning states, attention indicators.#ff64c8): Decorative accent, feature highlights.#391c57): Premium features, deep accents.#523410): Earthy accent, warm feature sections.#0075de): Primary link color with underline-on-hover.#62aef0): Lighter link variant for dark backgrounds.#097fe8): Focus ring on interactive elements.#f2f9ff): Pill badge background, tinted blue surface.#097fe8): Pill badge text, darker blue for readability.rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px): Multi-layer card elevation.rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px): Five-layer deep elevation for modals and featured content.1px solid rgba(0,0,0,0.1)): Standard division border -- cards, dividers, sections.NotionInter, with fallbacks: Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol"lnum" (lining numerals) and "locl" (localized forms) enabled on display and heading text.| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Hero | NotionInter | 64px (4.00rem) | 700 | 1.00 (tight) | -2.125px | Maximum compression, billboard headlines |
| Display Secondary | NotionInter | 54px (3.38rem) | 700 | 1.04 (tight) | -1.875px | Secondary hero, feature headlines |
| Section Heading | NotionInter | 48px (3.00rem) | 700 | 1.00 (tight) | -1.5px | Feature section titles, with "lnum" |
| Sub-heading Large | NotionInter | 40px (2.50rem) | 700 | 1.50 | normal | Card headings, feature sub-sections |
| Sub-heading | NotionInter | 26px (1.63rem) | 700 | 1.23 (tight) | -0.625px | Section sub-titles, content headers |
| Card Title | NotionInter | 22px (1.38rem) | 700 | 1.27 (tight) | -0.25px | Feature cards, list titles |
| Body Large | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | Introductions, feature descriptions |
| Body | NotionInter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
| Body Medium | NotionInter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized UI text |
| Body Semibold | NotionInter | 16px (1.00rem) | 600 | 1.50 | normal | Strong labels, active states |
| Body Bold | NotionInter | 16px (1.00rem) | 700 | 1.50 | normal | Headlines at body size |
| Nav / Button | NotionInter | 15px (0.94rem) | 600 | 1.33 | normal | Navigation links, button text |
| Caption | NotionInter | 14px (0.88rem) | 500 | 1.43 | normal | Metadata, secondary labels |
| Caption Light | NotionInter | 14px (0.88rem) | 400 | 1.43 | normal | Body captions, descriptions |
| Badge | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | Pill badges, tags, status labels |
| Micro Label | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | Small metadata, timestamps |
Primary Blue
#0075de (Notion Blue)#ffffff1px solid transparent#005bab2px solid focus outline, var(--shadow-level-200) shadowSecondary / Tertiary
rgba(0,0,0,0.05) (translucent warm gray)#000000 (near-black)Ghost / Link Button
rgba(0,0,0,0.95)Pill Badge Button
#f2f9ff (tinted blue)#097fe8#ffffff1px solid rgba(0,0,0,0.1) (whisper border)rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px#ffffffrgba(0,0,0,0.9)1px solid #dddddd#a39e98var(--color-link-primary-text-hover)1px solid rgba(0,0,0,0.1) border12px 12px 0px 0px radiusFeature Cards with Illustrations
#f6f5f4) background variant for alternating sectionsTrust Bar / Logo Grid
Metric Cards
#f6f5f4) section backgrounds for alternation#f6f5f4) sections, creating gentle visual rhythm without harsh color breaks.| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page background, text blocks |
| Whisper (Level 1) | 1px solid rgba(0,0,0,0.1) | Standard borders, card outlines, dividers |
| Soft Card (Level 2) | 4-layer shadow stack (max opacity 0.04) | Content cards, feature blocks |
| Deep Card (Level 3) | 5-layer shadow stack (max opacity 0.05, 52px blur) | Modals, featured panels, hero elements |
| Focus (Accessibility) | 2px solid var(--focus-color) outline | Keyboard focus on all interactive elements |
Shadow Philosophy: Notion's shadow system uses multiple layers with extremely low individual opacity (0.01 to 0.05) that accumulate into soft, natural-looking elevation. The 4-layer card shadow spans from 1.04px to 18px blur, creating a gradient of depth rather than a single hard shadow. The 5-layer deep shadow extends to 52px blur at 0.05 opacity, producing ambient occlusion that feels like natural light rather than computer-generated depth. This layered approach makes elements feel embedded in the page rather than floating above it.
#f6f5f4) background shifts| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Tight single column, minimal padding |
| Mobile | 400-600px | Standard mobile, stacked layout |
| Tablet Small | 600-768px | 2-column grids begin |
| Tablet | 768-1080px | Full card grids, expanded padding |
| Desktop Small | 1080-1200px | Standard desktop layout |
| Desktop | 1200-1440px | Full layout, maximum content width |
| Large Desktop | >1440px | Centered, generous margins |
2px solid with focus color + shadow level 200#a39e98) text, reduced opacity#0075de)#ffffff)#f6f5f4)rgba(0,0,0,0.95))rgba(0,0,0,0.95))#615d59)#a39e98)1px solid rgba(0,0,0,0.1)#0075de)#097fe8)