# Notion — Marketing Site Design Spec

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

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Ink & neutrals (warm)
| 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 |

### Accent (calm blue)
| 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 |

### Playful highlight pops (sparing, on words / doodles only)
| 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.

## 3. Typography Rules

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.

## 4. Component Stylings

### Buttons
- **Primary**: bg `#0075de`, text white, radius 8, h38, 16px/500, padding `6px 15px`. Hover: `#005bab`.
- **Secondary**: bg `#eaf1f8` (pale blue), text `#0075de`, radius 8, h38. Hover: slightly deeper tint.
- **Ghost / nav**: transparent, text `rgba(0,0,0,.898/.95)`, radius 8, hover pale-gray fill; dropdown carets on Product/Solutions/Resources.

### Inputs (workspace)
- White bg, 1px `rgba(0,0,0,.1)` border, radius 6–8, ink text, muted placeholder. Focus: blue border + soft blue ring.

### Cards / panels
- bg white, radius 12, hairline border or soft low shadow, padding 16–24. Content-first, airy.

### Highlight pill (headline device)
- Inline rounded-full background (lavender/green/amber tint) wrapping a word, with a small leading colored dot; the color cycles for playfulness.

### Workspace shell (from embedded mock)
- Left sidebar: white/paper, small icon+label rows (Home, Inbox, pages), ~28px tall, hover pale-gray `rgba(0,0,0,.04)`, radius 6. Top bar: breadcrumb + Share button + star/• menu. Page: large emoji + title, block-based body with generous line-height.

### Nav
- White, logo left (rounded-square N mark), center dropdown links (16px ink), right: blue "Get Notion free" primary + text "Log in".

## 5. Layout Principles

- Spacing: 4px base grid; generous editorial whitespace; section rhythm 96–160px.
- Nav: white, ~72px tall, hairline bottom border; center links, right CTAs.
- Hero: centered; row of illustrated circular avatars → 96px display headline with a highlighted word → 20px warm-gray subhead → dual CTA (blue primary + pale-blue secondary), framed by hand-drawn doodles and a workspace screenshot below.
- Sections alternate white and warm `#f6f5f4`; grayscale logo wall; content in wide centered columns.

## 6. Depth & Elevation

- Radii: buttons `8px`, nav items `8px`, small controls `4px`, cards/panels `12px`, highlight pills `999px`, illustrated avatars full.
- Control heights: primary button `38px`; nav items ~`30px`. Button padding `6–7px 15px`.
- Shadows — soft and subtle, layered low-alpha: `0 0.2px 1px rgba(0,0,0,.01), 0 2px 8px rgba(0,0,0,.05)`.
- Border-vs-shadow philosophy: panels favor a hairline `rgba(0,0,0,.1)` border over heavy shadow.

## 7. Motion

Restrained, CSS-native, and calm — nothing sharp or fast. Transition census (live): dominant `background-color 0.2s cubic-bezier(…)`, plus `color`, `text-decoration-color` and `outline-color` at 0.2s and `background-color 0.15s ease` — uniform 150–200ms eased micro-transitions, almost entirely color/underline. Dropdown carets rotate at 0.3s.

- Keyframe animations observed: `navShadowScrolled` (nav gains a shadow on scroll), popover `fadeIn`/`slideDown` at 0.15s, and a staged "Agent" hero entrance sequence — `agentMarkEnter`/`agentTaskEnter`/`agentEnter` 0.6s, `agentMarkScroll`/`agentTaskScroll` 1s (product-demo entrances). Also defined: fadeIn/fadeOut, scaleIn/scaleOut, popIn, rotate, loadingDots_pulse.
- The headline highlight word swaps color/label on a timer; one looping demo video is click-to-play (958px wide), not an autoplay background.
- No animation library detected (no GSAP/Three/Lottie globals) — plain CSS transitions and keyframes.

## 8. Backgrounds, Effects & WebGL

Essentially flat paper-white; the warmth comes from content (doodles, photos, avatars), not effects. No decorative gradients, no canvas/WebGL. Observed effects, all functional:

- White fade scrim at section bottoms: `linear-gradient(rgba(255,255,255,0), #fff)`.
- Dark photo overlay for text-on-image legibility: `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.55))`.
- Glass nav: `backdrop-filter: blur(12px)`.
- Signature very-low-alpha multi-layer diffuse shadows, e.g. `0 0.175px 1.041px rgba(0,0,0,.01), 0 0.8px 2.925px rgba(0,0,0,.02), …` and `0 0.667px 3.502px rgba(0,0,0,.008), 0 2.933px 7.252px rgba(0,0,0,.016), …` (soft card elevation).

## 9. Do's and Don'ts

### Do
- Keep chrome warm-black on white/paper with a single blue accent (`#0075de`).
- Confine bright hues (amber, lavender, green, sky) to highlight pills behind a single word, illustrated avatars, or hand-drawn doodles.
- Set display type huge with dramatic negative tracking (96px, weight 600, ≈ -4.8%); keep body a comfortable 16px/24 weight 400.
- Embed one highlighted word in headlines (rounded-full tint + small leading colored dot) and let its color cycle.
- Prefer a hairline `rgba(0,0,0,.1)` border on panels; when shadowing, use soft multi-layer very-low-alpha shadows.
- Alternate sections between white and warm paper `#f6f5f4`.
- Use the 4px base grid with generous editorial whitespace and 96–160px section rhythm.
- Keep motion to uniform 150–200ms eased micro-transitions on color/underline; reserve longer 0.6–1s staged entrances for hero product demos.
- Use gradients only functionally: white fade scrims and dark overlays for text-on-photo legibility.

### Don't
- Don't use bright hues as UI fills — they are highlight/illustration colors only.
- Don't use display weights of 700+ — the ceiling is 600.
- Don't put heavy shadows on panels — the hairline border is preferred.
- Don't make motion sharp or fast — it should feel hand-made and calm.
- Don't add decorative gradients, canvas, or WebGL — surfaces stay flat; warmth comes from content.

## 10. Responsive Behavior

Breakpoints (from the site's media queries): `600`, `840` (max 839), `1080`, `1280`, `1440`. Mobile rendering not verified in this pass.

## 11. Agent Prompt Guide

- Canvas `#ffffff` (+ paper `#f6f5f4`) · Text `rgba(0,0,0,.898)` · Muted `rgba(0,0,0,.54)` · Border `rgba(0,0,0,.1)` · Accent `#0075de`
- Font: `NotionInter, Inter, -apple-system, "Segoe UI", Helvetica, sans-serif` · Body: 16px · Radius: 8px control / 12px card · Control height: 38px
- Focus: blue border + soft blue ring on inputs (site-wide focus is outline-based; exact ring recipe not captured) · Hover fill: `rgba(0,0,0,.04)` pale gray

<notion_design_language>
Use the Notion design language: warm near-white canvas (white + paper #f6f5f4), warm-black ink rgba(0,0,0,.898) body / .95 headings / .54 secondary and warm gray #615d59. One calm blue accent #0075de (hover #005bab) for buttons and links. Bright hues — amber #ffb110, lavender, green — appear ONLY as playful highlight pills behind a single word (rounded-full tint + small colored dot) or in illustrated avatars and hand-drawn doodles, never as UI fills. Type is NotionInter / Inter: display is HUGE and very tightly tracked (96px, weight 600, ~-4.8% letter-spacing, never 700+); body a comfortable 16px/24 weight 400. Radii: buttons and nav items 8px, cards 12px, highlight pills full. Primary button blue, 38px, radius 8; secondary is a pale-blue #eaf1f8 fill with blue text. Surfaces are flat — no gradients-as-decoration or WebGL; elevation is soft multi-layer very-low-alpha shadow, panels prefer a rgba(0,0,0,.1) hairline. Airy editorial whitespace, block-based content. Motion is restrained: 150–200ms eased micro-transitions on color/underline, CSS-native. Feels: approachable, human, calm, document-first. Avoid: bright hues as UI fills, display weights of 700+, heavy shadows, decorative gradients, and sharp or fast motion.
</notion_design_language>