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">Usewrite_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:
- NotionInter (modified Inter) with negative letter-spacing at display sizes (-2.125px at 64px)
- Warm neutral palette: grays carry yellow-brown undertones (#f6f5f4 warm white, #31302e warm dark)
- Near-black text via rgba(0,0,0,0.95) -- not pure black, creating micro-warmth
- Ultra-thin borders: 1px solid rgba(0,0,0,0.1) throughout -- whisper-weight division
- Multi-layer shadow stacks with sub-0.05 opacity for barely-there depth
- Notion Blue (#0075de) as the singular accent color for CTAs and interactive elements
- Pill badges (9999px radius) with tinted blue backgrounds for status indicators
- 8px base spacing unit with an organic, non-rigid scale
rgba(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
- Background: #0075de (Notion Blue)
- Text: #ffffff
- Padding: 8px 16px
- Radius: 4px (subtle)
- Border: 1px solid transparent
- Hover: background darkens to #005bab
- Active: scale(0.9) transform
- Focus: 2px solid focus outline, var(--shadow-level-200) shadow
- Use: Primary CTA ("Get Notion free", "Try it")
Secondary / Tertiary
- Background: rgba(0,0,0,0.05) (translucent warm gray)
- Text: #000000 (near-black)
- Padding: 8px 16px
- Radius: 4px
- Hover: text color shifts, scale(1.05)
- Active: scale(0.9) transform
- Use: Secondary actions, form submissions
Ghost / Link Button
- Background: transparent
- Text: rgba(0,0,0,0.95)
- Decoration: underline on hover
- Use: Tertiary actions, inline links
Pill Badge Button
- Background: #f2f9ff (tinted blue)
- Text: #097fe8
- Padding: 4px 8px
- Radius: 9999px (full pill)
- Font: 12px weight 600
- Use: Status badges, feature labels, "New" tags
#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
- Large illustrative headers (The Great Wave, product UI screenshots)
- 12px radius card with whisper border
- Title at 22px weight 700, description at 16px weight 400
- Warm white (#f6f5f4) background variant for alternating sections
Trust Bar / Logo Grid - Company logos (trusted teams section) in their brand colors - Horizontal scroll or grid layout with team counts - Metric display: large number + description pattern
Metric Cards - Large number display (e.g., "$4,200 ROI") - NotionInter 40px+ weight 700 for the metric - Description below in warm gray body text - Whisper-bordered card container
#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)