notion.com

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: notion.com
description: "Light product system built on #ffffff with #455dd3 as the primary CTA accent. Type anchored in NotionInter at 54px / weight 700. Extracted automatically from https://notion.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  notion.com is built on a pure-white canvas (rgb(255, 255, 255)).
  The system uses rgb(69, 93, 211) as the accent for primary actions and brand signals.
  Crisp CTAs (4px radius) reinforce a precise, technical aesthetic alongside NotionInter as the primary typeface.
  NotionInter is paired with Inter for secondary roles.
  A layered elevation system (6 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 39 keyframe animations plus transition-driven interactions.

colors:
  background: "#ffffff"
  surface-1: "#f6f5f4"
  surface-2: "#fcf8f5"
  ink-subtle: "#615d59"
  primary: "#455dd3"
  on-primary: "#ffffff"
  primary-hover: "#f2f9ff"
  hairline: "rgba(255, 255, 255, 0)"
  primary-focus: "#0075de"
  semantic-error: "#f64932"
  semantic-success: "#14832b"
  semantic-warning: "#ff6d00"

typography:
  display-xl:
    fontFamily: "NotionInter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -2.125px
  display-md:
    fontFamily: "NotionInter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0
  body:
    fontFamily: "NotionInter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0.125px
  body-sm:
    fontFamily: "NotionInter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0.125px
  caption:
    fontFamily: "NotionInter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.27
    letterSpacing: -0.25px
  button:
    fontFamily: "NotionInter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 9999px

spacing:
  xxs: 2px
  xs: 12px
  sm: 16px
  md: 20px
  lg: 26px
  xl: 32px
  xxl: 64px

components:
  button-ghost:
    backgroundColor: "{colors.hairline}"
    textColor: "{colors.surface-1}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 5px 10px
  button-primary-brand:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 4px 14px
  button-primary-brand-2:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 6px 15px
  input-text-input:
    backgroundColor: "{colors.hairline}"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 7px 10px 7px 30px
  navigation-main-nav:
    backgroundColor: "{colors.hairline}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 80px 0px 0px
  testimonial-quote-card:
    backgroundColor: "{colors.surface-1}"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 24px
  tab-ghost-tab:
    backgroundColor: "{colors.hairline}"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 12px 16px

extracted_at: "2026-06-14T04:35:43.449Z"
completeness: 91
scoreVersion: "v2"

---

# Design System — notion.com
> Extracted automatically by Prism from https://notion.com/
> Date: 2026-06-14
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: moderate  |  **Motion**: expressive  |  **Weight**: heavy  |  **Aesthetic**: product-neutral

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (NotionInter) | "Ask your on-demand assistants." |
| Color assertion | dual-accent | #455dd3 |
| Whitespace | moderate | section rhythm 48px |
| Interaction | expressive | 39 keyframes, 19 transitions |
| Radius language | 8px-rounded | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · 8px-rounded · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(255, 255, 255)` is the page background. Every component composits against this.
> - **Accent**: `rgb(69, 93, 211)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 48px between major bands. Card padding: 26px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

notion.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight. 

Typography is anchored in **NotionInter**, deployed with OpenType features enabled globally (`"lnum", "locl" 0`). These aren't decorative — they're load-bearing: without them, the typeface reverts to its generic state and the design loses its specific texture. The weight scale rejects the standard 100/200/.../900 ladder in favor of custom values (max **700** in this system) — a deliberate signal that this design system is precisely tuned, not assembled from defaults. Negative letter-spacing at display sizes (-2.125px at 64px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Translucent Black (95%) (`rgba(0, 0, 0, 0.95)`) (contrast ratio 21.0:1, well above WCAG AA). **Royal Blue** (`#455dd3`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Elevation is built from multi-layer shadow stacks (6 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Banner (`#ffffff`)
- Primary typeface: NotionInter
- Accent: Royal Blue (`#455dd3`)
- Display: 64px weight 700, letter-spacing -2.125px
- Shadow system: 6 distinct elevation levels
- Custom fonts loaded: NotionInter, Lyon Text, iA Writer Mono, Permanent Marker

## 2. Color Palette & Roles

### Background & Surface
- **Banner** (`#ffffff`): Page background (primary)
- **Background Surface Accent Muted** (`#f2f9ff`): Surface / elevated background (CSS var)
- **Background Surface Accent Soft** (`#e6f3fe`): Surface / elevated background (CSS var)
- **Background Surface Neutral** (`#f6f5f4`): Surface / elevated background (CSS var)
- **Transparent** (`transparent`): Surface / elevated background

### Text & Content
- **Translucent Black (95%)** (`rgba(0, 0, 0, 0.95)`): Primary body text
- **Text Warning** (`#ff6d00`): Text (CSS var)
- **Text Error** (`#f64932`): Text (CSS var)
- **Text Color Regular** (`#040404`): Text (CSS var)
- **Text Color Dark** (`#111111`): Text (CSS var)

### Accent & Interactive
- **Background Surface Accent Soft Active** (`#93cdfe`): Accent / interactive (CSS var)
- **Background Surface Accent Focus** (`#0075de`): Accent / interactive (CSS var)
- **Background Surface Accent Hover** (`#097fe8`): Accent / interactive (CSS var)
- **Link Primary Text Active** (`#00396b`): Accent / interactive (CSS var)
- **Background Surface Accent Active** (`#005bab`): Accent / interactive (CSS var)
- **Accent** (`#62aef0`): Accent / interactive (CSS var)
- **#9c7054** (`#9c7054`): Interactive / accent

### Full Extracted Palette
**40 colors rendered on the page** + **70** more declared in design tokens (CSS custom properties — not necessarily painted). (17 categorized above + 93 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#191918` — Near-Black
- `#02093a` — Deep Navy
- `#fcf8f5` — Off-White
- `#fff5ed` — Warm Cream
- `#fef3f1` — Warm Cream
- `#f8f5fc` — Off-White
- `#9849e8` — Violet
- `#f2fafa` — Off-White
- `#27918d` — #27918d
- `#fff5e0` — Beige
- `#ffb110` — Amber
- `#f9f9f8` — Off-White
- `#78736f` — Slate Grey
- `#455dd3` — Royal Blue
- `#2537b1` — #2537b1
- `#ffc95e` — #ffc95e
- `#ff3b30` — Vermillion
- `#f77463` — Coral
- `#ad6ded` — #ad6ded
- `#ff8a33` — Coral
- `#ff83dd` — Magenta
- `#213183` — #213183
- `#31302e` — Charcoal
- `#2a9d99` — #2a9d99
- `#1aae39` — Success Green
- `#b18164` — #b18164
- `#615d59` — Slate Grey
- `#a39e98` — Cool Gray
- `#f7f7f5` — Off-White
- `#523410` — #523410 *(token)*
- `#ff64c8` — Hot Pink *(token)*
- `#dd5b00` — Bright Orange *(token)*
- *…+61 more in `raw-css.json` (`desktop.allColors`).*

### CSS Custom Properties (Design Tokens)

**Spacing Token**
- `--typography-article-body-letter-spacing`: `0`
- `--dimension-spacing-0`: `0`
- `--typography-serif-800-regular-letter-spacing`: `-0.125rem`
- `--typography-sans-600-bold-letter-spacing`: `-0.046875rem`

**Motion Token**
- `--motion-duration-300`: `300ms`
- `--motion-duration-250`: `250ms`
- `--motion-timing-function-ease-in`: `cubic-bezier(0.42,0,1,1)`

**Background**
- `--color-background-surface-neutral-focus`: `#dfdcd9`
- `--color-background-surface-accent-muted`: `#f2f9ff`
- `--color-background-surface-accent-soft`: `#e6f3fe`
- `--color-background-surface-accent-muted-focus`: `#e6f3fe`

**Success**
- `--color-green-500`: `#1aae39`
- `--color-green-900`: `#05210b`
- `--color-green-400`: `#68ce7e`
- `--color-green-100`: `#f0faf2`

**Font Family Token**
- `--font-family-fallback-mono`: `Nitti,Menlo,Courier,monospace`
- `--font-family-primary-serif-japanese`: `"Lyon Text"`
- `--font-family-primary-serif`: `"Lyon Text"`
- `--font-family-fallback-serif-japanese`: `Georgia,YuMincho,"Yu Mincho","Hiragino Mincho ProN",serif`

**Border Radius Token**
- `--border-radius-800`: `0.875rem`
- `--border-radius-400`: `0.375rem`
- `--border-radius-300`: `0.3125rem`
- `--border-radius-900`: `1rem`

**Border**
- `--color-border-base`: `#0000001a`

**Z-Index Token**
- `--z-index-banner`: `90`
- `--z-index-popup`: `500`
- `--z-index-mobile-nav`: `200`
- `--z-index-header`: `100`

**Font Size Token**
- `--font-size-350`: `1.25rem`
- `--font-size-700`: `2.625rem`
- `--font-size-600`: `2rem`
- `--font-size-500`: `1.625rem`

**Font Weight Token**
- `--font-weight-variable-semibold`: `620`
- `--font-weight-medium`: `500`
- `--font-weight-bold`: `700`
- `--font-weight-regular`: `400`

**Text Color**
- `--color-text-warning`: `#ff6d00`
- `--color-text-error`: `#f64932`
- `--color-text-disabled`: `#0000004d`
- `--color-text-muted`: `#0000008a`

**Primary Brand Color**
- `--color-accent-muted`: `#f2f9ff`
- `--color-accent`: `#62aef0`
- `--color-accent-strong`: `#097fe8`
- `--color-accent-soft`: `#e6f3fe`

**Warning**
- `--color-yellow-600`: `#e89d01`
- `--color-yellow-800`: `#a16c00`
- `--color-yellow-700`: `#c78600`
- `--color-yellow-500`: `#ffb110`

**Error / Destructive**
- `--color-red-800`: `#6f0d00`
- `--color-red-500`: `#f64932`
- `--color-red-700`: `#b01601`
- `--color-red-900`: `#4f0900`

**Shadow Token**
- `--shadow-100`: `0px 0.7px 1.462px rgba(0,0,0,.015),0px 3px 9px #00000008`

**Other tokens**
- `--color-card-accent`: `#097fe8`
- `--color-brown-900`: `#523410`
- `--color-pink-500`: `#ff64c8`
- `--color-orange-600`: `#dd5b00`
- `--color-button-primary-background-active`: `#005bab`
- `--color-orange-800`: `#793400`
- `--color-button-tertiary-text`: `#000000f2`
- `--color-teal-400`: `#2a9d99`

## 3. Typography Rules

### Font Families
- **Primary**: `NotionInter`
- **Secondary**: `Noto Sans Arabic`
- **Font 3**: `Noto Sans Hebrew`
- **Font 4**: `Lyon Text`
- **Font 5**: `iA Writer Mono`

### Custom Fonts Loaded
- **NotionInter** weight 400 (normal)
- **NotionInter** weight 500 (normal)
- **NotionInter** weight 600 (normal)
- **NotionInter** weight 700 (normal)
- **Noto Sans Arabic** weight 100 900 (normal)
- **Noto Sans Hebrew** weight 100 900 (normal)
- **Lyon Text** weight 400 (normal)
- **Lyon Text** weight 600 (normal)
- **iA Writer Mono** weight 400 (normal)
- **iA Writer Mono** weight 600 (normal)
- **Permanent Marker** weight 400 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | NotionInter | 64px | 700 | 1 | -2.125px | Main headline (h1) |
| Caption / Badge | NotionInter | 22px | 700 | 1.27 | -0.25px | small text (22px) |
| Card Title | NotionInter | 16px | 400 | 1.5 | normal | Card headings |
| Button Large | NotionInter | 16px | 500 | 1.5 | normal | Button label (16px) |
| Sub-heading | NotionInter | 14px | 400 | 1.43 | normal | Third-level heading (h3) |
| Caption / Badge | NotionInter | 14px | 500 | 1.43 | normal | small text (14px) |
| Link Small | NotionInter | 12px | 500 | 1.33 | 0.125px | Link (12px) — Decoration: none |

### Font Weight Scale

CSS custom properties define 8 explicit weight steps:
- `--font-weight-regular`: `400` — Regular
- `--font-weight-variable-regular`: `420` — Regular (custom, ~400)
- `--font-weight-medium`: `500` — Medium
- `--font-weight-variable-medium`: `520` — Medium (custom, ~500)
- `--font-weight-semibold`: `600` — SemiBold
- `--font-weight-variable-semibold`: `620` — SemiBold (custom, ~600)
- `--font-weight-variable-bold`: `680` — Bold (custom, ~700)
- `--font-weight-bold`: `700` — Bold

### Full Font Size Scale

Sizes detected in the design (descending): `64px`, `54px`, `48px`, `40px`, `32px`, `26px`, `24px`, `22px`, `20px`, `16px`, `14px`, `12px`

> 7 size(s) detected outside the sampled hierarchy (54px, 48px, 40px, 32px, 26px, 24px, 20px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **lining figures** (`lnum`) — full-height numbers, more authoritative than old-style
- **case-sensitive forms** (`case`) — punctuation height adjusted for uppercase contexts
- **capital spacing** (`cpsp`) — added tracking on uppercase for breathing room
- **localized forms** (`locl`) — glyphs swapped based on script/locale

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "lnum", "locl", "case", "cpsp";
}
```

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent` `{colors.hairline}`
- Text: `#f6f5f4` `{colors.surface-1}`
- Padding: 5px 10px
- Radius: 4px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button
- Focus: backgroundColor: `rgba(255, 255, 255, 0.008)`, outline: `rgb(0, 117, 222) solid 2px`

**Primary Brand**
- Background: `#455dd3` `{colors.primary}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 4px 14px
- Radius: 8px
- Border: 1px solid rgba(255, 255, 255, 0)
- Font: 16px weight 500
- Use: Primary CTA / brand action
- Focus: backgroundColor: `rgba(255, 255, 255, 0.008)`, outline: `rgb(0, 117, 222) solid 2px`

**Primary Brand**
- Background: `#455dd3` `{colors.primary}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 6px 15px
- Radius: 8px
- Border: 1px solid rgba(255, 255, 255, 0)
- Font: 16px weight 500
- Use: Primary CTA / brand action
- Focus: backgroundColor: `rgba(255, 255, 255, 0.008)`, outline: `rgb(0, 117, 222) solid 2px`

**Primary Brand**
- Background: `#213183`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 6px 15px
- Radius: 8px
- Border: 1px solid rgba(255, 255, 255, 0)
- Font: 16px weight 500
- Use: Primary CTA / brand action
- Focus: backgroundColor: `rgba(255, 255, 255, 0.008)`, outline: `rgb(0, 117, 222) solid 2px`

**Outline**
- Background: `transparent` `{colors.hairline}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 6px 15px
- Radius: 8px
- Border: 1px solid rgba(255, 255, 255, 0)
- Font: 16px weight 500
- Use: Secondary action with border
- Focus: backgroundColor: `rgba(255, 255, 255, 0.008)`, outline: `rgb(0, 117, 222) solid 2px`

**Ghost**
- Background: `transparent` `{colors.hairline}`
- Text: `rgba(0, 0, 0, 0.95)`
- Padding: 12px 16px
- Radius: 8px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button
- Focus: backgroundColor: `rgba(255, 255, 255, 0.008)`, outline: `rgb(0, 117, 222) solid 2px`

### Inputs & Forms

**Text Input**
- Background: `transparent` `{colors.hairline}`
- Text: `rgba(0, 0, 0, 0.95)`
- Padding: 7px 10px 7px 30px
- Radius: 5px
- Border: 1px solid rgba(0, 0, 0, 0.08)
- Font: 16px weight 400
- Use: Text fields, search inputs

### Navigation

**Main Nav**
- Background: `transparent` `{colors.hairline}`
- Padding: 80px 0px 0px
- Radius: none
- Font: 16px weight 400
- Use: Fixed/sticky grid nav — N/A items

### Testimonials

**Quote Card**
- Background: `#f6f5f4` `{colors.surface-1}`
- Text: `rgba(0, 0, 0, 0.95)`
- Padding: 24px
- Radius: 12px
- Font: 16px weight 400
- Use: Customer quote with avatar + company attribution

### Tabs

**Ghost Tab**
- Background: `transparent` `{colors.hairline}`
- Text: `rgba(0, 0, 0, 0.95)`
- Padding: 12px 16px
- Radius: 8px
- Font: 16px weight 400
- Use: Navigation tabs, filter tabs


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Button**:
  - **focus:** bg transparent → rgba(255, 255, 255, 0.008)
- **Badge**:
  - **hover:** text #a39e98 → #615d59, border changes

*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(246, 245, 244)"
    focus:
      bg: "rgba(255, 255, 255, 0.008)"
      fg: "inherit"
  input:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(0, 0, 0, 0.95)"
      border: "1px solid rgba(0, 0, 0, 0.08)"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(0, 0, 0, 0.95)"
  card:
    default:
      bg: "rgb(255, 255, 255)"
      fg: "rgba(0, 0, 0, 0.898)"
      border: "1px solid rgba(0, 0, 0, 0.1)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(0, 0, 0, 0.95)"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(0, 0, 0, 0.95)"
  badge:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(163, 158, 152)"
    hover:
      bg: "transparent"
      fg: "rgb(97, 93, 89)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(0, 0, 0, 0.95)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **3 shape(s)** in this system: `Ghost`, `Primary Brand`, `Outline`
- **DO NOT introduce new buttons variants** without justification

### Inputs & Forms
- **1 shape(s)** in this system: `Text Input`
- **DO NOT introduce new inputs & forms variants** without justification

### Navigation
- **1 shape(s)** in this system: `Main Nav`
- **DO NOT introduce new navigation variants** without justification

### Testimonials
- **1 shape(s)** in this system: `Quote Card`
- **DO NOT introduce new testimonials variants** without justification

### Tabs
- **1 shape(s)** in this system: `Ghost Tab`
- **DO NOT introduce new tabs variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
78.25rem

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 12px |
| sm | 16px |
| md | 20px |
| base | 24px |
| lg | 26px |
| xl | 32px |
| 2xl | 48px |
| 3xl | 64px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 12px | Cards, containers |
| Lg | 16px | Large rounded elements, pill segments |
| Xl | 9999px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `4px` |
| Inputs & Forms | `5px` |
| Navigation | `none` |
| Testimonials | `12px` |
| Tabs | `8px` |
| Page Body | `0px` |
| Primary Input | `5px` |

**Shape Personality**: Moderate Rounding — Medium corners (4–12px). Modern SaaS standard, neither sharp nor pill.

**Full Radius Spectrum**: 0px, 4px, 5px, 8px, 12px, 16px, full/pill (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~29px internal vertical padding (up to 80px) — **compact**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `64px` | Top/bottom of full-bleed hero sections |
| **section** | `32px` | Between major bands (color change, content shift) |
| **subsection** | `26px` | Within a section, between content groups |
| **card** | `20px` | Card padding, list-item spacing |
| **compact** | `16px` | Form fields, tight clusters, badge padding |
| **micro** | `12px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**6/8 structural patterns detected.**

### Hero Pattern

- **Composition:** centered — Centered composition — heading + subheading + CTAs stacked vertically, content centered horizontally. Common for SaaS marketing pages.
- **Viewport coverage:** 256px tall (not full-viewport)
- **Heading:** "Meet the night shift." — 64px center-aligned
- **Subheading:** "Notion agents keep work moving 24/7. They capture knowledge, answer questions, and push projects forward—all while you sleep."
- **CTAs:** 2 (primary: "Get Notion free")
- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 64px
- **Logo:** ✓ present
- **Nav links:** 5 primary items
- **CTAs in nav:** 1
- **Theme toggle:** ✓ dark/light mode switcher present
- **Clone instruction:** Build a static unknown navigation. Reserve 1 slot for primary CTA.

### Card Grid Pattern

- **Card count:** 3 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1229×978px (aspect 1.26:1)
- **Gap:** 80px between cards
- **Content:** ✓ image + CTA
- **Image position:** top
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~1.26:1 aspect ratio. Each card has an image at the top.

### Testimonial Pattern

- **Count:** 12 testimonial blocks
- **Layout:** grid
- **Avg quote length:** 81 chars (medium quote)
- **Includes:** ✓ avatars | ✓ company logos | ✓ star ratings
- **Clone instruction:** Build a grid of 12 testimonials. Each includes an avatar. Include source company logos. Display ratings prominently.

### CTA Banner Pattern

- **Banner count:** 1
- **Position:** mid-page
- **Visual treatment:** ✓ contrasting background
- **Primary CTA text:** "Q&A agentsAnswers questions instantly using knowledge you al"
- **Clone instruction:** Place a single CTA banner mid-page. Use contrasting solid background.

### Footer Pattern

- **Columns:** 1
- **Links:** 28 total
- **Height:** 418px
- **Includes:** ✗ no newsletter | ✓ social icons | ✓ language switcher ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~28 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px`,<br>`rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px`,<br>`rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px`,<br>`rgba(0, 0, 0, 0.04) 0px 4px 18px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(255, 255, 255, 0.2) 0px 0px 20px 5px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.01) 0px 0.667px 3.502px 0px`,<br>`rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px`,<br>`rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px`,<br>`rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px`,<br>`rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px`,<br>`rgba(0, 0, 0, 0.04) 0px 36px 89px 0px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(0, 0, 0, 0.016) 0px 0.7px 1.462px 0px`,<br>`rgba(0, 0, 0, 0.03) 0px 3px 9px 0px` | Cards, elevated surfaces |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Easing System

| CSS Variable | Curve | Semantic Name |
|--------------|-------|---------------|
| `--motion-timing-function-ease-in` | `cubic-bezier(0.42,0,1,1)` | Custom Ease — Balanced |
| `--motion-timing-function-ease-in-out-quint` | `cubic-bezier(0.86,0,0.07,1)` | Quint In-Out — Dramatic Symmetric |
| `--motion-timing-function-ease-in-out-cubic` | `cubic-bezier(0.645,0.045,0.355,1)` | Ease Out — Decelerating |
| `--motion-timing-function-ease-in-out-quad` | `cubic-bezier(0.45,0,0.55,1)` | Custom Ease — Balanced |
| `--motion-timing-function-ease-out` | `cubic-bezier(0,0,0.58,1)` | Custom Ease — Balanced |
| `--motion-timing-function-ease-in-out-linear` | `cubic-bezier(0.5,0,0.5,1)` | Custom Ease — Balanced |
| `--motion-timing-function-ease-in-out-quart` | `cubic-bezier(0.76,0,0.24,1)` | Ease Out — Decelerating |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--motion-duration-300` | `300ms` | Normal |
| `--motion-duration-250` | `250ms` | Normal |
| `--motion-duration-100` | `100ms` | Fast |
| `--motion-global-fade-out-duration` | `200ms` | Normal |
| `--motion-duration-200` | `200ms` | Normal |
| `--motion-duration-150` | `150ms` | Fast |
| `--motion-global-transform-duration` | `300ms` | Normal |
| `--motion-global-fade-in-duration` | `150ms` | Fast |

### Copy-Paste Transition Snippets

**Background**
```css
transition: background 0.075s linear;
```

**Shadow**
```css
transition: box-shadow 0.2s cubic-bezier(0.42, 0, 1, 1);
```

**Background**
```css
transition: background-color 0.15s;
```

**Background**
```css
transition: background-color 0.2s cubic-bezier(0.42, 0, 1, 1);
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `fadeIn` | Fade | opacity | Element entrance |
| `fadeOut` | Fade | opacity | Element exit |
| `scaleIn` | Scale | transform | Focus / emphasis |
| `scaleOut` | Scale | transform | Focus / emphasis |
| `popIn` | Fade + Move | opacity, transform | UI transition |
| `rotate` | Rotate / Spin | transform | Loading indicator |
| `loadingDots_pulse__d8LYi` | Fade | opacity | Loading indicator |
| `globalNavigation_navShadowScrolled__p...` | Custom | box-shadow | UI transition |
| `globalNavigation_fadeIn__BTvkx` | Fade | opacity | Element entrance |
| `globalNavigation_fadeOut__UET7A` | Fade | opacity | Element exit |
| `globalNavigation_slideDown__fiX_y` | Fade + Move | opacity, transform | Panel / drawer enter |
| `globalNavigation_navTokensHeroExit__n...` | Custom | --color-text-normal, --color-background-base-hover, --color-border-base, --color-button-primary-text, --color-button-primary-background, --color-button-primary-background-hover, --color-button-primary-background-focus, --color-button-primary-background-active, --color-button-ghost-text, --color-button-ghost-background-hover, --color-button-ghost-background-focus, --color-button-ghost-background-active, --color-text-muted | Element exit |
| `globalNavigation_navBgVarHeroExit__Kk6M2` | Custom | --campaign-nav-bg | Element exit |
| `globalNavigation_logoFillHeroExit__liWYo` | Custom | --notion-logo-fill | Element exit |
| `globalNavigation_navBgScrolled__qcb4e` | Custom | --campaign-nav-bg | UI transition |
| `globalNavigation_thinkTogetherNavToke...` | Custom | --color-text-normal, --color-text-muted, --color-background-base-hover, --color-border-base, --color-button-primary-text, --color-button-primary-background, --color-button-primary-background-hover, --color-button-primary-background-focus, --color-button-primary-background-active, --color-button-ghost-text, --color-button-ghost-background, --color-button-ghost-background-hover, --color-button-ghost-background-focus, --color-button-ghost-background-active | Element exit |
| `globalNavigation_thinkTogetherNavBgHe...` | Custom | --hero-nav-bg | Element exit |
| `globalNavigation_thinkTogetherLogoFil...` | Custom | --notion-logo-fill | Element exit |
| `globalNavigation_thinkTogetherNavBgSc...` | Custom | --hero-nav-bg | UI transition |
| `globalNavigation_devPlatformNavTokens...` | Custom | --color-interaction-focus-ring, --color-text-normal, --color-text-muted, --color-border-base, --color-background-base-hover, --color-button-primary-text, --color-button-primary-background, --color-button-primary-background-hover, --color-button-primary-background-focus, --color-button-primary-background-active, --color-button-ghost-text, --color-button-ghost-background-hover, --color-button-ghost-background-focus, --color-button-ghost-background-active, --color-nav-text, --color-nav-bracket, --color-nav-letter-hint | Element exit |

> *19 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `200ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 39 unique animations (39 total including variants)

> This design moves with balanced pacing timing using custom cubic-bezier curves, creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use NotionInter as the primary typeface — it defines the brand personality
- Use negative letter-spacing (-2.125px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use Royal Blue (`#455dd3`) as the primary accent — it's the brand's signature interactive color
- Use 8px border-radius on buttons — the standard corner rounding for interactive elements
- Style form inputs with a `1px solid rgba(0, 0, 0, 0.08)` border — use border-based inputs, not floating labels or underline-only
- Maintain nav height at 64px — consistent vertical space for the navigation bar
- Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Include a theme toggle in the nav — dark mode is a first-class feature
- Each card includes a top image — imagery is part of the card identity, not optional
- Show company logos with testimonials — social proof relies on brand recognition, not avatars
- Lay out testimonials in a grid (12+ items) — quantity signals scale and trust

### Don't
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- Don't invent new shadow values — use only the extracted shadow levels
- Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't remove the input border — the border is the primary affordance indicator for form fields
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(255, 255, 255)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(255, 255, 255)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(69, 93, 211)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(69, 93, 211)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 375px | Single column, compact spacing |
| Mobile Large | 640px | Expanded mobile layout |
| Tablet | 768px | Multi-column grids begin |
| Desktop | 1032px | Full feature layout |
| Desktop | 1120px | Full feature layout |
| Desktop | 1280px | Full feature layout |
| Large Desktop | 1440px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `64px` | `54px` |
| heading | line-height | `64px` | `56px` |
| heading | letter-spacing | `-2.125px` | `-1.875px` |
| button | width | `90.3906px` | `auto` |
| card | width | `436.062px` | `310px` |

### Collapsing Strategy
- Headlines: 64px → 54px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 5px 10px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Navigation collapses to hamburger** — 5 links visible on desktop, 0 on mobile (the rest hide behind a menu toggle).


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Glassmorphism** — 1 frosted/blur layer(s) (e.g. `blur(12px)`).
- **Clip-path shapes** — 4 non-rectangular cut(s).
- **Blend modes** — 2 mix-blend layer(s).
- **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands.
- **CSS-variable animations** (5) — animated custom properties.

> **Motion fingerprint**: glassmorphism (1 layers), non-rectangular shapes (4), blend modes, CSS scroll-driven animations

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- https://www.notion.com/front-static/meta/custom-agents-og.png
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 1.19:1 (landscape)
- Rendered size: 192×161px
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 6 (30%)
- Portrait (<0.87): 3 (15%)
- Square (0.87–1.15): 9 (45%)
- Ultra-wide (>2.3): 2 (10%)

**Media Format Mix:**
- SVG: 3 (icons, illustrations, decorative geometry)

**Average rendered image size:** 286×243px
**Above-fold image count:** 6 / 20

**Decorative Patterns Detected:**
- 1 multi-stop linear gradient (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 2 large decorative SVG shapes (≥200×200px, non-icon) — likely blob/illustration accents
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic

**Clone instruction for decorative work:** Glassmorphism is a brand signature — use `backdrop-filter: blur(20px)` on overlapping surfaces.

**Imagery Guidance for clones:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Banner (`#ffffff`)
- Primary text: Translucent Black (95%) (`rgba(0, 0, 0, 0.95)`)
- Accent: Royal Blue (`#455dd3`)
- Border: Transparent (`transparent`)
- Font: NotionInter
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Banner background (#ffffff). Headline at 64px NotionInter weight 700, line-height 1, letter-spacing -2.125px, color rgba(0, 0, 0, 0.95)."
- "Create the primary CTA button: `#455dd3` background, `#ffffff` text, 8px border-radius, 4px 14px padding, 500 weight, NotionInter font."
- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px."
- "Build navigation: relative on `#ffffff`. NotionInter 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Banner (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in NotionInter, weight range 400–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: Royal Blue (`#455dd3`) — one accent, applied consistently to CTAs, active states, and links. Never introduce a second saturated color.
4. **Motion**: All transitions use `cubic-bezier(0.42,0,1,1)`. Timing: 100ms for micro-interactions, 200ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `4px`, cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (12px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-on-primary: #ffffff;
  --ca-surface-1: #f6f5f4;
  --ca-surface-2: #fcf8f5;
  --ca-ink-subtle: #615d59;
  --ca-primary: #455dd3;
  --ca-primary-hover: #f2f9ff;
  --ca-hairline: transparent;
  --ca-primary-focus: #0075de;
  --ca-semantic-error: #f64932;
  --ca-semantic-success: #14832b;
  --ca-semantic-warning: #ff6d00;
}

/* Typography */
:root {
  --ca-font-primary: "NotionInter", system-ui, sans-serif;
  --ca-text-display: 64px;
  --ca-text-body: 12px;
  --ca-text-small: 12px;
  --ca-text-caption: 22px;
  --ca-text-button: 16px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 12px;
  --ca-space-sm: 16px;
  --ca-space-md: 20px;
  --ca-space-base: 24px;
  --ca-space-lg: 26px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 16px;
  --ca-radius-xl: 9999px;
  --ca-radius-full: 9999px;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: hero
    tag: div
    height: 6812px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: main
    height: 6394px
    width: full-bleed
    layout: block
    children: 4
    vertical-padding: ~64px (generous)
  - section: feature-section
    tag: div
    height: 1117px
    width: full-bleed
    layout: flex-column justify=normal
    children: 3
    vertical-padding: ~28px
  - section: feature-section
    tag: div
    classes: ["isCampaignAgentsHomepageHero"]
    height: 1149px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(2, 9, 58)"
    tone: dark
    padding: "0px 0px 32px"
  - section: gallery-grid
    tag: div
    height: 953px
    width: full-bleed
    layout: grid: 3-col gap=40px normal
    children: 5
    vertical-padding: ~28px
    padding: "56px 105.6px 0px"
  - section: header
    tag: header
    classes: ["flex", "flex-col", "items-stretch", "justify-start"]
    height: 256px
    width: 960px
    layout: flex-column justify=start
    children: 3
    vertical-padding: ~40px
    padding: "80px 0px 0px"
  - section: unknown
    tag: div
    height: 601px
    width: 960px
    layout: block
    children: 2
  - section: feature-section
    tag: section
    height: 647px
    width: 1229px
    layout: flex-column justify=normal
    children: 2
  - section: feature-section
    tag: div
    height: 3235px
    width: 1229px
    layout: flex-column justify=normal
    children: 2
  - section: content-section
    tag: section
    height: 559px
    width: 1229px
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
  - section: header
    tag: header
    height: 96px
    width: 436px
    layout: flex-column justify=normal
    children: 2
    bg: "rgb(255, 255, 255)"
  - section: logo-strip
    tag: section
    height: 182px
    width: 1229px
    layout: block
    children: 1
  - section: feature-section
    tag: section
    height: 1037px
    width: 1229px
    layout: flex-column justify=normal
    children: 2
  - section: header
    tag: header
    height: 366px
    width: 498px
    layout: flex-column justify=normal
    children: 2
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~24px
    padding: "24px"
  - section: header
    tag: header
    height: 108px
    width: 602px
    layout: flex-column justify=normal
    children: 2
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~24px
    padding: "24px"
  - section: header
    tag: header
    height: 108px
    width: 602px
    layout: flex-column justify=normal
    children: 2
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~24px
    padding: "24px"
  - section: feature-section
    tag: section
    height: 1037px
    width: 1229px
    layout: flex-column justify=normal
    children: 2
  - section: header
    tag: header
    height: 108px
    width: 602px
    layout: flex-column justify=normal
    children: 2
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~24px
    padding: "24px"
  - section: header
    tag: header
    height: 108px
    width: 602px
    layout: flex-column justify=normal
    children: 2
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~24px
    padding: "24px"
  - section: header
    tag: header
    height: 366px
    width: 498px
    layout: flex-column justify=normal
    children: 2
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~24px
    padding: "24px"
  - section: feature-section
    tag: section
    height: 787px
    width: 1229px
    layout: block
    children: 3
  - section: feature-section
    tag: div
    height: 787px
    width: 1229px
    layout: flex-column justify=normal
    children: 1
  - section: card-grid
    tag: div
    height: 659px
    width: 1229px
    layout: grid: 3-col gap=24px
    children: 3
    vertical-padding: ~29px
  - section: feature-section
    tag: section
    height: 839px
    width: 1229px
    layout: block
    children: 3
  - section: feature-section
    tag: div
    height: 839px
    width: 1229px
    layout: flex-column justify=normal
    children: 1
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "Keep work moving 24/7."
    - "Automate repetitive work for your team."
    - "You assign the tasks. Notion Agent does the work."
    - "One search for everything."
  sub-headings:
    - "See what Custom Agents can do"
    - "Triage product feedback→"
    - "Create your own Custom Agent→"
    - "Get started on Notion"
  ctas:
    - "Product"
    - "Get Notion free"
    - "Request a demo"
    - "Pause"
  navigation:
    - "Developers"
    - "Enterprise"
    - "Pricing"
    - "Request a demo"
    - "Get Notion free"
    - "Log in"
    - "About us"
    - "Careers"
    - "Security"
    - "Status"
  footer-links:
    - "About us"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  logo:
    count: 16
    avg-ratio: 3.43
    common-aspect: "~16:6 banner"
    sample-alts:
      - "OpenAI"
      - "Figma"
      - "Ramp"
  product:
    count: 3
    avg-ratio: 1.12
    common-aspect: "~1:1 square"
    sample-alts:
      - "Search results showing information from Slack, Google Drive,"
  thumbnail:
    count: 23
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Product
</button>
```
_Source pattern detected: padding `5px 10px` · radius `4px` · weight `400`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `24px` · radius `12px` · shadow `none`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 3 · **cta** 2 · **auth** 1 · **product** 16 · **pricing** 1 · **docs** 1 · **blog** 1 · **project** 17 · **social** 5 · **footer** 11 · **other** 2

**Primary actions (conversion path):**
- Primary call-to-action — "Get Notion free" (the conversion path) → `https://www.notion.com/signup?from=marketing&pathname=%2F&tid=w_6fb45fa6321d414abae8284735664e7c`
- Account access — "Log in" (login/signup) → `https://www.notion.com/login?from=marketing&pathname=%2F&tid=w_6fb45fa6321d414abae8284735664e7c`
- Primary call-to-action — "in your browser" (the conversion path) → `https://www.notion.com/signup`

**Projects / case studies detected** (clustered by URL + featured image):

*Customers* — high confidence, 10 items:

| Title | Featured image | Link |
|---|---|---|
| OpenAI | `Company_openai__Colorway_White.svg` (ar 2.75) | https://www.notion.com/customers/openai |
| Figma | `figma-white.svg` (ar 1.96) | https://www.notion.com/customers/figma |
| Ramp | `Company_Ramp__Colorway_White.svg` (ar 3.13) | https://www.notion.com/customers/ramp |
| Cursor | `Company_Cursor__Colorway_White.svg` (ar 3.42) | https://www.notion.com/customers/cursor |
| Vercel | `Company_Vercel__Colorway_White.svg` (ar 3.29) | https://www.notion.com/customers/vercel |
| Clay | `clay-mono.svg` (ar 2.83) | https://www.notion.com/customers/clay |
| Remote | `Company_Remote__Colorway_White.svg` (ar 3.24) | https://www.notion.com/customers/remote |
| Faire | `Company_faire__Colorway_White.svg` (ar 3.71) | https://www.notion.com/customers/faire |

**Signals:** 28/60 links carry a featured image · dominant link roles: content-card (31), footer-link (23), navigation (3).


---
## Coverage: 91% of dimensions extracted

> Coverage measures how much of the design we could read, **not** how pixel-faithful a clone is. For fidelity, see the SSIM/structure score.

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 24 | 25 | 17 named colors |
| Typography | 18 | 20 | 7 roles defined |
| Components | 20 | 20 | 5 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes, easing vars |
| CSS Custom Properties | 10 | 10 | 812 vars |
| Responsive Breakpoints | 5 | 5 | 7 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (NotionInter, Noto Sans Arabic, Noto Sans Hebrew)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).

*✅ No critical extraction gaps detected — high-confidence reproduction expected.*

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 812 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 7 typography roles inferred |
| §4 Components | High | 5 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 21 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 7 breakpoints detected |
| §9b Photography | High | 20 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

5 font file(s) captured (143KB total). When running `prism add`, fonts are saved to `extractions/notion.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'NotionInter';
  /* src: url('/fonts/NotionInter.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotionInter';
  /* src: url('/fonts/NotionInter.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotionInter';
  /* src: url('/fonts/NotionInter.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotionInter';
  /* src: url('/fonts/NotionInter.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  /* src: url('/fonts/Noto-Sans-Arabic.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Hebrew';
  /* src: url('/fonts/Noto-Sans-Hebrew.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotionInter';
  /* src: url('/fonts/NotionInter.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NotionInter';
  /* src: url('/fonts/NotionInter.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NotionInter';
  /* src: url('/fonts/NotionInter.woff2') format('woff2'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NotionInter';
  /* src: url('/fonts/NotionInter.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lyon Text';
  /* src: url('/fonts/Lyon-Text.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lyon Text';
  /* src: url('/fonts/Lyon-Text.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lyon Text';
  /* src: url('/fonts/Lyon-Text.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lyon Text';
  /* src: url('/fonts/Lyon-Text.woff2') format('woff2'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'iA Writer Mono';
  /* src: url('/fonts/iA-Writer-Mono.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'iA Writer Mono';
  /* src: url('/fonts/iA-Writer-Mono.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'iA Writer Mono';
  /* src: url('/fonts/iA-Writer-Mono.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'iA Writer Mono';
  /* src: url('/fonts/iA-Writer-Mono.woff2') format('woff2'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Permanent Marker';
  /* src: url('/fonts/Permanent-Marker.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**48 @keyframes found** — these are the real animation definitions:

```
@keyframes homepage_bodyBgHeroExit__Ur0t_ { ... }
@keyframes logoWallMarquee_detectOverflow__RQpt1 { ... }
@keyframes logoWallMarquee_marqueePolygon__N7Zak { ... }
@keyframes loadingDots_pulse__d8LYi { ... }
@keyframes homepageLogoWall_revealStickyBar__Glf7s { ... }
@keyframes Agent_agentEnter__D6zdB { ... }
@keyframes Agent_agentScroll__R_Ymn { ... }
@keyframes Agent_agentTaskEnter__ZpDY1 { ... }
@keyframes Agent_agentTaskScroll__bimxl { ... }
@keyframes Agent_agentMarkEnter__54wKq { ... }
@keyframes Agent_agentMarkScroll__8jDZS { ... }
@keyframes Agent_notifCountScroll__2TpV_ { ... }
@keyframes Agent_notifCountScrollFast__Ty0lv { ... }
@keyframes Illustrations_rotate__NJalO { ... }
@keyframes Illustrations_rotateEnter__XYlPM { ... }
@keyframes HomepageHeroAgents_flicker-on__xJ_1J { ... }
@keyframes HomepageHeroAgents_flicker__k9DWp { ... }
@keyframes HomepageHeroAgents_fade-in__HBybG { ... }
@keyframes modal_backgroundFadeOut__jw_M8 { ... }
@keyframes Marquee_marqueeFrames__WsEH6 { ... }
@keyframes popover_popoverFadeIn__WkJed { ... }
@keyframes popover_popoverSlideDown__bflEZ { ... }
@keyframes popover_popoverSlideUp__U5eiA { ... }
@keyframes globalNavigation_navShadowScrolled__pZKcg { ... }
@keyframes globalNavigation_fadeIn__BTvkx { ... }
@keyframes globalNavigation_fadeOut__UET7A { ... }
@keyframes globalNavigation_slideDown__fiX_y { ... }
@keyframes globalNavigation_navTokensHeroExit__nkR7m { ... }
@keyframes globalNavigation_navBgVarHeroExit__Kk6M2 { ... }
@keyframes globalNavigation_logoFillHeroExit__liWYo { ... }
@keyframes globalNavigation_navBgScrolled__qcb4e { ... }
@keyframes globalNavigation_thinkTogetherNavTokensHeroExit__P9vdt { ... }
@keyframes globalNavigation_thinkTogetherNavBgHeroExit__vSKro { ... }
@keyframes globalNavigation_thinkTogetherLogoFillHeroExit__33UgN { ... }
@keyframes globalNavigation_thinkTogetherNavBgScrolled__HeD6_ { ... }
@keyframes globalNavigation_devPlatformNavTokensHeroExit__wdo2n { ... }
@keyframes globalNavigation_devPlatformNavBgHeroExit__Pir6F { ... }
@keyframes globalNavigation_devPlatformNavBgScrolled__1YsK_ { ... }
@keyframes fadeIn { ... }
@keyframes fadeOut { ... }
@keyframes scaleIn { ... }
@keyframes scaleOut { ... }
@keyframes popIn { ... }
@keyframes rotate { ... }
@keyframes nds-shimmer-text { ... }
@keyframes spin { ... }
@keyframes TemplateModal_backgroundFadeOut__ny0kV { ... }
@keyframes AIAssistantChatbox_pulse__NBhWM { ... }
```

<details><summary>Full keyframes CSS (48 animations)</summary>

```css
@keyframes homepage_bodyBgHeroExit__Ur0t_{0%{background-color:var(--color-gray-900)}
@keyframes logoWallMarquee_detectOverflow__RQpt1{0%,to{--logo-wall-marquee-has-overflow:1}}
@keyframes logoWallMarquee_marqueePolygon__N7Zak{to{offset-distance:50%}}
@keyframes loadingDots_pulse__d8LYi{0%{opacity:.2}
@keyframes homepageLogoWall_revealStickyBar__Glf7s{0%{opacity:1}
@keyframes Agent_agentEnter__D6zdB{0%{translate:var(--translate-agent-start);transform:rotate(var(--rotate-agent-start))}
@keyframes Agent_agentScroll__R_Ymn{0%{translate:0 0;transform:rotate(0deg)}
@keyframes Agent_agentTaskEnter__ZpDY1{0%{translate:var(--translate-task-start);transform:rotate(var(--rotate-task-start))}
@keyframes Agent_agentTaskScroll__bimxl{0%{translate:0 0;transform:rotate(0deg)}
@keyframes Agent_agentMarkEnter__54wKq{0%{translate:var(--translate-mark-start);transform:rotate(var(--rotate-mark-start))}
@keyframes Agent_agentMarkScroll__8jDZS{0%{translate:0 0;transform:rotate(0deg)}
@keyframes Agent_notifCountScroll__2TpV_{0%{--notif-step:0}
@keyframes Agent_notifCountScrollFast__Ty0lv{0%{--notif-step:0}
@keyframes Illustrations_rotate__NJalO{0%{transform:rotate(0deg)}
@keyframes Illustrations_rotateEnter__XYlPM{0%{transform:rotate(var(--rotate-start))}
@keyframes HomepageHeroAgents_flicker-on__xJ_1J{0%{opacity:0}
@keyframes HomepageHeroAgents_flicker__k9DWp{0%,to{opacity:1}12%,13.2%{opacity:1}12.2%{opacity:.7}12.5%{opacity:.92}12.7%{opacity:.65}13%{opacity:.9}32%,32.8%{opacity:1}32.3%{opacity:.75}32.5%{opacity:.88}55%,56.5%{opacity:1}55.2%{opacity:.8}55.5%{opacity:.6}55.8%{opacity:.85}56%{opacity:.7}56.3%{opacity:.92}77%,77.6%{opacity:1}77.2%{opacity:.68}77.4%{opacity:.9}92%,92.5%{opacity:1}92.2%{opacity:.78}}
@keyframes HomepageHeroAgents_fade-in__HBybG{0%{opacity:var(--opacity-start)}
@keyframes modal_backgroundFadeOut__jw_M8{0%{opacity:1}
@keyframes Marquee_marqueeFrames__WsEH6{0%{transform:translateX(0)}
@keyframes popover_popoverFadeIn__WkJed{0%{opacity:0}}
@keyframes popover_popoverSlideDown__bflEZ{0%{opacity:0;translate:0 calc(-1*var(--dimension-spacing-8))}}
@keyframes popover_popoverSlideUp__U5eiA{0%{opacity:0;translate:0 var(--dimension-spacing-8)}}
@keyframes globalNavigation_navShadowScrolled__pZKcg{0%{box-shadow:0 1px #0000}
@keyframes globalNavigation_fadeIn__BTvkx{0%{opacity:0}
@keyframes globalNavigation_fadeOut__UET7A{0%{opacity:1}
@keyframes globalNavigation_slideDown__fiX_y{0%{opacity:0;transform:translateY(-10px)}
@keyframes globalNavigation_navTokensHeroExit__nkR7m{0%{--color-text-normal:var(--color-gray-200);--color-background-base-hover:var(--color-alpha-white-100);--color-border-base:var(--color-alpha-white-200);--color-button-primary-text:var(--color-white);--color-button-primary-background:var(--color-campaigns-agents-launch-blue-400);--color-button-primary-background-hover:var(--color-campaigns-agents-launch-blue-300);--color-button-primary-background-focus:var(--color-campaigns-agents-launch-blue-300);--color-button-primary-background-active:var(--color-campaigns-agents-launch-blue-300);--color-button-ghost-text:var(--color-white);--color-button-ghost-background-hover:var(--color-alpha-white-200);--color-button-ghost-background-focus:var(--color-alpha-white-200);--color-button-ghost-background-active:var(--color-alpha-white-200);--color-text-muted:var(--color-white)}
@keyframes globalNavigation_navBgVarHeroExit__Kk6M2{0%{--campaign-nav-bg:var(--color-campaigns-agents-launch-blue-900)}
@keyframes globalNavigation_logoFillHeroExit__liWYo{0%{--notion-logo-fill:var(--color-campaigns-agents-launch-blue-900)}
@keyframes globalNavigation_navBgScrolled__qcb4e{0%{--campaign-nav-bg:#0000}
@keyframes globalNavigation_thinkTogetherNavTokensHeroExit__P9vdt{0%{--color-text-normal:var(--color-gray-200);--color-text-muted:var(--color-alpha-white-700);--color-background-base-hover:var(--color-alpha-white-100);--color-border-base:var(--color-alpha-white-200);--color-button-primary-text:var(--color-white);--color-button-primary-background:var(--color-blue-500);--color-button-primary-background-hover:var(--color-blue-400);--color-button-primary-background-focus:var(--color-blue-400);--color-button-primary-background-active:var(--color-blue-400);--color-button-ghost-text:var(--color-white);--color-button-ghost-background:var(--color-transparent);--color-button-ghost-background-hover:var(--color-alpha-white-100);--color-button-ghost-background-focus:var(--color-alpha-white-100);--color-button-ghost-background-active:var(--color-alpha-white-200)}
@keyframes globalNavigation_thinkTogetherNavBgHeroExit__vSKro{0%{--hero-nav-bg:var(--color-gray-900)}
@keyframes globalNavigation_thinkTogetherLogoFillHeroExit__33UgN{0%{--notion-logo-fill:var(--color-gray-900)}
@keyframes globalNavigation_thinkTogetherNavBgScrolled__HeD6_{0%{--hero-nav-bg:#0000}
@keyframes globalNavigation_devPlatformNavTokensHeroExit__wdo2n{0%{--color-interaction-focus-ring:var(--color-campaigns-dev-platform-dos-alpha-white);--color-text-normal:var(--color-white);--color-text-muted:var(--color-alpha-white-700);--color-border-base:var(--color-alpha-white-200);--color-background-base-hover:var(--color-alpha-white-100);--color-button-primary-text:var(--color-campaigns-dev-platform-dos-blue);--color-button-primary-background:var(--color-campaigns-dev-platform-dos-white);--color-button-primary-background-hover:var(--color-campaigns-dev-platform-dos-alpha-white);--color-button-primary-background-focus:var(--color-campaigns-dev-platform-dos-alpha-white);--color-button-primary-background-active:var(--color-campaigns-dev-platform-dos-alpha-white);--color-button-ghost-text:var(--color-white);--color-button-ghost-background-hover:var(--color-alpha-white-200);--color-button-ghost-background-focus:var(--color-alpha-white-200);--color-button-ghost-background-active:var(--color-alpha-white-200);--color-nav-text:var(--color-white);--color-nav-bracket:var(--color-campaigns-dev-platform-dos-alpha-gray);--color-nav-letter-hint:var(--color-campaigns-dev-platform
```
</details>

### Brand Gradient Palette

**6 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: linear-gradient(to right,#0000,#000 var(--logo-wall-marquee-fade-width);

/* Gradient 2 */
background: linear-gradient(to left,#0000 0,var(--color-background-base);

/* Gradient 3 */
background: linear-gradient(to right,#0000 0,var(--color-background-base);

/* Gradient 4 */
background: linear-gradient(#091e4221,#091e4221 1px,#091e4214 0,#091e4200 4px);

/* Gradient 5 */
background: linear-gradient(to right,#0000,#000 var(--marquee-gradient-percent);

```

### Hover State CSS (Intercepted)

**22 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
.cardCompact_cardCompact__W2i4I:has(.cardCompact_cardCompactAnchor___7vu2):focus-within:after,.cardCompact_cardCompact__W2i4I:has(.cardCompact_cardCompactAnchor___7vu2):hover:after,.cardCompact_cardCompact__W2i4I:has(.cardCompact_cardCompactAnchor___7vu2:active):after{opacity:1;transition-timing-function:var(--motion-global-fade-in-timing-function);transition-duration:var(--motion-global-fade-in-duration)}

.cardCompact_cardCompactAnchor___7vu2:active,.cardCompact_cardCompactAnchor___7vu2:focus,.cardCompact_cardCompactAnchor___7vu2:hover,.cardCompact_cardCompactAnchor___7vu2:visited{text-decoration:none}

a.button_primary__k0d3I,a.button_primary__k0d3I:active,a.button_primary__k0d3I:focus,a.button_primary__k0d3I:hover,button.button_primary__k0d3I,button.button_primary__k0d3I:active,button.button_primary__k0d3I:focus,button.button_primary__k0d3I:hover{text-decoration:none;color:var(--color-button-primary-text)}

a.button_secondary__0_CV3:active,a.button_secondary__0_CV3:focus,a.button_secondary__0_CV3:hover,button.button_secondary__0_CV3:active,button.button_secondary__0_CV3:focus,button.button_secondary__0_CV3:hover{text-decoration:none;color:var(--color-button-secondary-text-interactive,var(--color-button-secondary-text))}

a.button_tertiary__cWWnA,a.button_tertiary__cWWnA:active,a.button_tertiary__cWWnA:focus,a.button_tertiary__cWWnA:hover,button.button_tertiary__cWWnA,button.button_tertiary__cWWnA:active,button.button_tertiary__cWWnA:focus,button.button_tertiary__cWWnA:hover{text-decoration:none;color:var(--color-button-tertiary-text)}

a.button_ghost__npAbk,a.button_ghost__npAbk:active,a.button_ghost__npAbk:focus,a.button_ghost__npAbk:hover,button.button_ghost__npAbk,button.button_ghost__npAbk:active,button.button_ghost__npAbk:focus,button.button_ghost__npAbk:hover{text-decoration:none;color:var(--color-button-ghost-text)}

.button_button__bge_I:focus-visible:not(:disabled),.button_button__bge_I:hover:not(:disabled){transition-property:background-color,color;transition-duration:var(--motion-global-fade-in-duration);transition-timing-function:var(--motion-global-fade-in-timing-function)}

.button_button__bge_I:active,.button_button__bge_I:focus,.button_button__bge_I:hover{text-decoration:none}

.button_primary__k0d3I:hover:not(:disabled){background-color:var(--color-button-primary-background-hover)}

.button_secondary__0_CV3:hover:not(:disabled){background-color:var(--color-button-secondary-background-hover)}

.button_tertiary__cWWnA:hover:not(:disabled){background-color:var(--color-button-tertiary-background-hover)}

.button_ghost__npAbk:hover:not(:disabled){background-color:var(--color-button-ghost-background-hover)}

.socialProof_videoButtonContainer___2Bfb:hover{opacity:.9}

.socialProof_testimonial__OAHXS:focus-within,.socialProof_testimonial__OAHXS:hover{box-shadow:var(--shadow-200)}

.socialProof_testimonial__OAHXS:hover{color:var(--color-text-normal)}

.logoWallMarquee_logoWallMarqueeItemDot__tx_vZ:hover:after{background-color:var(--color-blue-500);transition:background-color var(--motion-global-fade-in-duration) var(--motion-global-fade-in-timi}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 1339 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**24 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`375px` · `400px` · `410px` · `440px` · `599px` · `600px` · `640px` · `712px` · `768px` · `839px` · `840px` · `908px` · `919px` · `942px` … (+10 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×735 · `14px`×223 · `20px`×133 · `12px`×69 · `24px`×63 · `22px`×33 · `40px`×22 · `48px`×16

**Radius scale** (× = paint count): `8px`×98 · `12px`×77 · `9999px`×44 · `4px`×41 · `100%`×14 · `16px`×4 · `5px`×3 · `50%`×2

**Weights** (× = paint count): `400`×857 · `500`×386 · `700`×76 · `600`×18

**Layout gaps** (× = paint count): `0px 8px`×54 · `8px`×50 · `12px`×22 · `16px`×21 · `24px`×12 · `0px 16px`×8 · `32px`×5 · `0px 24px`×4

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px
rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px
rgba(255, 255, 255, 0.2) 0px 0px 20px 5px
rgba(0, 0, 0, 0.01) 0px 0.667px 3.502px 0px, rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px, rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px, rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px, rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px, rgba(0, 0, 0, 0.04) 0px 36px 89px 0px
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { font-size:16px; background:var(--color-background-base); color:var(--color-text-strong); font-family:var(--font-family-sans) }
body { background-color:var(--color-gray-900) }
header { gap:var(--dimension-spacing-24) }
@media (min-width: 840px) header { gap:var(--dimension-spacing-28) }
nav { background:var(--color-background-base); transition:box-shadow var(--motion-global-fade-out-duration) var(--motion-global-fade-out-timing-function); box-shadow:0 1px #0000 }
h1 { font-size:2em }
h1 { color:var(--color-text-strong) }
h2 { color:var(--color-text-strong) }
button { color:var(--color-text-normal); transition:background-color .15s ease; gap:8px; border-radius:4px }
button { gap:8px; background:none; color:var(--color-text-normal); background-color:initial; font-weight:inherit; font-size:inherit; font-family:inherit }
a { color:var(--color-text-strong) }
input { color:var(--color-text-strong); border-radius:var(--border-radius-300); background:var(--input-background-color) }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://notion.com/ | 2026-06-14T04:35:43.742Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*