glyph-ai 0.1.0

package/bundled/server/data/design-systems/notion-design-system.md

@@ -0,0 +1,866 @@
+# Notion.com Design System & Section Boilerplate
+
+> Source: https://www.notion.com/ (scraped 2026-03-22)
+
+---
+
+## Design System
+
+### Colors
+
+#### Primary
+| Token | Value | Usage |
+|-------|-------|-------|
+| Agents Blue 400 | `#455DD3` / `rgb(69, 93, 211)` | Primary CTA buttons, accent links |
+| Agents Blue 600 | `#213183` / `rgb(33, 49, 131)` | Secondary CTA buttons (dark variant) |
+| Agents Blue 900 | `#02093A` / `rgb(2, 9, 58)` | Hero background, dark sections |
+| Blue 500 | `#097FE8` | Text links, interactive elements |
+| Blue 600 | `#0075DE` | Link hover states |
+
+#### Secondary
+| Token | Value | Usage |
+|-------|-------|-------|
+| Gray 100 | `#F9F9F8` | Lightest background |
+| Gray 200 | `#F6F5F4` / `rgb(246, 245, 244)` | Alternating section background, nav text (dark mode) |
+| Gray 300 | `#DFDCD9` | Borders, dividers |
+| Gray 400 | `#A39E98` | Muted icons |
+| Gray 500 | `#78736F` | Placeholder text |
+
+#### Tertiary (Campaign Colors)
+| Token | Value | Usage |
+|-------|-------|-------|
+| Agents Yellow | `#FEFCD5` | Accent highlights |
+| Agents Blue 300 | `#607DF6` | Light accent |
+| Agents Blue 500 | `#394EA3` | Mid accent |
+
+#### Neutrals
+| Token | Value | Usage |
+|-------|-------|-------|
+| Black | `#000000` | — |
+| White | `#FFFFFF` | Page background, cards, dropdown panels |
+| Text Regular | `#040404` / `rgba(0,0,0,0.95)` | Primary body text |
+| Text Dark | `#111111` / `rgba(0,0,0,0.9)` | Headings, nav items |
+| Text Medium | `rgba(0,0,0,0.54)` | Subdued labels, meta |
+| Text Light | `rgba(0,0,0,0.3)` | Borders, extra-light text |
+| Text on Dark | `rgba(255,255,255,0.75)` | Body text on dark backgrounds |
+| Text on Dark Bright | `rgb(255,255,255)` | Headings on dark backgrounds |
+
+#### Semantic Palette (available as CSS vars)
+| Color | 100 | 400 | 700 |
+|-------|-----|-----|-----|
+| Red | `#FEF3F1` | `#F77463` | `#B01601` |
+| Orange | `#FFF5ED` | `#FF8A33` | `#AB4A00` |
+| Yellow | `#FFF5E0` | `#FFC95E` | `#C78600` |
+| Green | `#F0FAF2` | `#68CE7E` | `#0F6220` |
+| Teal | `#F2FAFA` | `#2A9D99` | `#126764` |
+| Blue | `#F2F9FF` | `#62AEF0` | `#005BAB` |
+| Purple | `#F8F5FC` | `#AD6DED` | `#562983` |
+| Pink | `#FFF5FC` | `#FF83DD` | `#9D2472` |
+| Brown | `#FCF8F5` | `#B18164` | `#744D2D` |
+
+### Typography
+
+#### Font Families
+| Role | Font Stack |
+|------|-----------|
+| Primary Sans | `NotionInter, Inter, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif` |
+| Primary Serif | `"Lyon Text", Georgia, YuMincho, serif` |
+| Mono | `"iA Writer Mono", Nitti, Menlo, Courier, monospace` |
+| Handwriting | `"Permanent Marker"` |
+
+#### Type Scale
+| Token | Size | Line Height | Letter Spacing (bold) | Usage |
+|-------|------|-------------|----------------------|-------|
+| 1000 | `4.75rem` (76px) | `5rem` (80px) | `-0.156rem` | — |
+| 900 | `4rem` (64px) | `4rem` (64px) | `-0.133rem` | Hero H1 |
+| 800 | `3.375rem` (54px) | `3.5rem` (56px) | `-0.117rem` | Section H2 (desktop) |
+| 700 | `2.625rem` (42px) | `3rem` (48px) | `-0.094rem` | Sub-section H2 |
+| 600 | `2rem` (32px) | `2.5rem` (40px) | `-0.047rem` | Blockquotes (serif) |
+| 500 | `1.625rem` (26px) | `2rem` (32px) | `-0.039rem` | Large subheads |
+| 400 | `1.375rem` (22px) | `1.75rem` (28px) | `-0.016rem` | Card titles |
+| 300 | `1.125rem` (18px) | `1.75rem` (28px) | `-0.008rem` | — |
+| 200 | `1rem` (16px) | `1.5rem` (24px) | `0` | Body, nav items, buttons |
+| 100 | `0.875rem` (14px) | `1.25rem` (20px) | `0` | Small text, labels |
+| 50 | `0.75rem` (12px) | `1rem` (16px) | `0.008rem` | Badges, captions, meta |
+
+#### Font Weights
+| Token | Value | CSS Var |
+|-------|-------|---------|
+| Regular | `400` | `--font-weight-regular` |
+| Medium | `500` | `--font-weight-medium` |
+| Semibold | `600` | `--font-weight-semibold` |
+| Bold | `700` | `--font-weight-bold` |
+
+#### Heading Styles (computed)
+| Element | Size | Weight | Line Height | Letter Spacing | Color |
+|---------|------|--------|-------------|----------------|-------|
+| Hero H1 | `64px` | `700` | `64px` | `-2.125px` | `#FFFFFF` |
+| Section H2 | `54px` | `700` | `56px` | `-1.875px` | `rgba(0,0,0,0.95)` |
+| Sub-section H2 | `42px` | `700` | `48px` | `-1.5px` | `rgba(0,0,0,0.95)` |
+| Card Title H2 | `22px` | `700` | `28px` | `-0.25px` | `#000000` |
+| Blockquote | `32px` | `400` | `40px` | `normal` | `rgba(0,0,0,0.95)` (serif) |
+
+### Buttons
+
+#### Primary Button ("Get Notion free")
+```
+background-color: #455DD3 (rgb(69, 93, 211))
+color: #FFFFFF
+font-size: 16px
+font-weight: 500
+line-height: 24px
+padding: 6px 15px
+height: 38px
+border-radius: 8px
+border: 1px solid transparent
+display: flex
+align-items: center
+justify-content: center
+gap: 12px
+cursor: pointer
+text-decoration: none
+```
+
+#### Secondary Button ("Request a demo" - dark bg)
+```
+background-color: #213183 (rgb(33, 49, 131))
+color: #FFFFFF
+font-size: 16px
+font-weight: 500
+padding: 6px 15px
+height: 38px
+border-radius: 8px
+border: 1px solid transparent
+```
+
+#### Outline / Ghost Button ("Download")
+```
+background-color: transparent
+color: rgba(0,0,0,0.95)
+font-size: 14px
+font-weight: 500
+padding: 4px 14px
+border-radius: 8px
+border: 1px solid rgba(0,0,0,0.08)
+```
+
+#### Text Link Button ("See pricing plans ->")
+```
+color: #0075DE (blue-600)
+font-size: 16px
+font-weight: 500
+text-decoration: none
+Arrow (->): inline, appended
+underline-offset: 0.1em
+underline-thickness: 1px
+```
+
+### Input Fields
+
+#### Checkbox
+```
+Custom styled labels with checkbox input
+Padding per label item: clickable area wraps label
+Labels: 16px regular, rgba(0,0,0,0.95)
+Price annotation: smaller text, muted
+```
+
+#### Number / Spinbutton ("Team size")
+```
+font-size: 32px (display)
+font-weight: 700
+background-color: white
+border-radius: 8px
+```
+
+### Spacing System (CSS Custom Properties)
+| Token | Value |
+|-------|-------|
+| `--spacing-4` | `0.25rem` (4px) |
+| `--spacing-8` | `0.5rem` (8px) |
+| `--spacing-12` | `0.75rem` (12px) |
+| `--spacing-16` | `1rem` (16px) |
+| `--spacing-20` | `1.25rem` (20px) |
+| `--spacing-24` | `1.5rem` (24px) |
+| `--spacing-32` | `2rem` (32px) |
+| `--spacing-40` | `2.5rem` (40px) |
+| `--spacing-48` | `3rem` (48px) |
+| `--spacing-64` | `4rem` (64px) |
+| `--spacing-80` | `5rem` (80px) |
+| `--spacing-96` | `6rem` (96px) |
+| `--spacing-128` | `8rem` (128px) |
+| `--spacing-160` | `10rem` (160px) |
+
+#### Section Spacing
+| Token | Value |
+|-------|-------|
+| `--spacing-block-s` | `20px` |
+| `--spacing-block-m` | `24px` |
+| `--spacing-block-l` | `32px` |
+| Section padding (desktop) | `64px 86.4px` |
+| `--global-navigation-height` | `64px` |
+| `--base-padding` | `20px` |
+
+### Border Radius
+| Token | Value |
+|-------|-------|
+| `--border-radius-200` | `0.25rem` (4px) |
+| `--border-radius-400` | `0.375rem` (6px) |
+| `--border-radius-500` | `0.5rem` (8px) |
+| `--border-radius-700` | `0.75rem` (12px) |
+| `--border-radius-900` | `1rem` (16px) |
+| `--border-radius-round` | `624.9375rem` (pill) |
+
+### Shadows
+| Token | Value |
+|-------|-------|
+| Level 100 | `0px 3px 9px rgba(0,0,0,0.03), 0px 0.7px 1.46px rgba(0,0,0,0.015)` |
+| Level 200 | `0px 4px 18px rgba(0,0,0,0.04), 0px 2px 7.8px rgba(0,0,0,0.027), 0px 0.8px 2.9px rgba(0,0,0,0.02)` |
+| Level 300 | `0px 20px 50px rgba(0,0,0,0.08), 0px 6px 16px rgba(0,0,0,0.04)` |
+| Dropdown | `0px 4px 18px rgba(0,0,0,0.04), 0px 2px 7.8px rgba(0,0,0,0.027), 0px 0.8px 2.9px rgba(0,0,0,0.02), 0px 0.175px 1px rgba(0,0,0,0.01)` |
+
+### Motion
+| Token | Value |
+|-------|-------|
+| Duration 100 | `100ms` |
+| Duration 200 | `200ms` |
+| Duration 300 | `300ms` |
+| Ease In Out Quart | `cubic-bezier(0.76, 0, 0.24, 1)` |
+| Ease In Out Cubic | `cubic-bezier(0.645, 0.045, 0.355, 1)` |
+
+### Grid
+| Token | Value |
+|-------|-------|
+| Columns | `12` |
+| Column Width | `1fr` |
+| Gutter | `28px` |
+| Small Gutter | `12px` |
+
+---
+
+## Section Boilerplate
+
+### Navigation
+
+**Background:** Transparent over hero (dark bg), becomes `#FFFFFF` on scroll with `shadow-level-200`
+**Height:** `64px` (`--global-navigation-height`)
+**Padding:** `14px 24px`
+**Layout:** CSS Grid, 3 columns — logo | nav links | actions
+**Position:** `sticky`, `z-index: 100`
+
+#### Structure
+```
+<nav aria-label="Main">
+  <div> <!-- grid container, height: 64px, padding: 14px 24px -->
+
+    <!-- Left: Logo -->
+    <a href="/product"> <!-- Notion "N" icon, ~32x32 -->
+
+    <!-- Center: Nav Items -->
+    <div> <!-- flex row, gap implicit -->
+      <button>Product <chevron-icon/></button>    <!-- dropdown trigger -->
+      <button>AI <chevron-icon/></button>          <!-- dropdown trigger -->
+      <button>Solutions <chevron-icon/></button>    <!-- dropdown trigger -->
+      <button>Resources <chevron-icon/></button>    <!-- dropdown trigger -->
+      <a href="/enterprise">Enterprise</a>         <!-- direct link -->
+      <a href="/pricing">Pricing</a>               <!-- direct link -->
+      <a href="/contact-sales">Request a demo</a>  <!-- direct link -->
+    </div>
+
+    <!-- Right: Actions -->
+    <div>
+      <a href="/signup" class="primary-btn">Get Notion free</a>
+      <a href="/login">Log in</a>
+    </div>
+
+  </div>
+</nav>
+```
+
+#### Nav Item Styling
+- Font: `16px`, weight `400`, color `rgb(246, 245, 244)` on dark / `rgba(0,0,0,0.9)` on light
+- Padding: `5px 10px`
+- Gap: `8px` (between text and chevron icon)
+- Chevron: small SVG, rotates on open
+- No visible border or background in default state
+
+#### Dropdown Interactions
+- **Trigger:** Click on button toggles dropdown; `aria-expanded` toggles between `true`/`false`
+- **Panel:** White card below nav, `border-radius: 16px`, `padding: 16px`, `background: #FFFFFF`
+- **Shadow:** Level 200 (`0px 4px 18px rgba(0,0,0,0.04), ...`)
+- **Width:** ~826px (centered under nav, not full-width)
+- **Close:** Click outside, press Escape, or click another dropdown
+- **Content:** Grid of links, each with icon (32x32) + title + description
+- **Link items:** `padding: 4px 16px 4px 8px`, `border-radius: 8px`, hover shows subtle bg
+- **Featured item (Notion):** Larger icon (48x48), `padding: 8px 16px 8px 8px`
+- **Footer bar:** Promo strip at bottom with "See what's new ->" and "Download Notion App ->"
+
+#### Product Dropdown Content
+```
+[Notion icon]  Notion — Your AI workspace     |  [Calendar icon]  Notion Calendar
+                                               |  [Mail icon]      Notion Mail
+─────────────────────────────────────────────────────────────────────────
+[AI icon]       Notion AI           [Wiki icon]    Knowledge Base     [Gear icon]    Integrations
+                AI tools for work                  Centralize...                     Connect your apps
+
+[Agent icon]    Agents  [New]       [Doc icon]     Docs               [Lock icon]    Security
+                Automate busywork                  Simple & powerful                  Safe and scalable
+
+[Mic icon]      AI Meeting Notes    [Board icon]   Projects
+                Perfectly written                  Manage any project
+
+[Search icon]   Enterprise Search
+                Find answers instantly
+─────────────────────────────────────────────────────────────────────────
+[sparkle icon] Custom skills for Notion AI. See what's new ->    Download the Notion App ->
+```
+
+#### Mobile Nav (< ~1024px)
+- Hamburger icon replaces center links
+- Logo left, "Get Notion free" + "Log in" + hamburger right
+- Dropdown opens as full-width overlay
+
+---
+
+### Hero
+
+**Background:** `#02093A` (deep navy)
+**Padding:** Section uses `display: contents`; inner content centered
+**Text Alignment:** Center
+
+#### Structure
+```
+<section style="background: #02093A">
+
+  <!-- Animated Background Layer -->
+  <div> <!-- absolute positioned animated illustrations/agents floating --> </div>
+
+  <!-- Content Layer -->
+  <div style="text-align: center; max-width: 600px; margin: auto">
+    <h1>Meet the night shift.</h1>
+    <!-- 64px, bold 700, white, line-height: 64px, letter-spacing: -2.125px -->
+
+    <p>Notion agents keep work moving 24/7. They capture knowledge,
+       answer questions, and push projects forward—all while you sleep.</p>
+    <!-- 16px, regular 400, rgba(255,255,255,0.75), line-height: 24px -->
+
+    <div> <!-- flex row, centered, gap between buttons -->
+      <a href="/signup" class="primary-btn">Get Notion free</a>
+      <!-- bg: #455DD3, white text, 16px medium, padding: 6px 15px, border-radius: 8px -->
+
+      <a href="/contact-sales" class="secondary-btn">Request a demo</a>
+      <!-- bg: #213183, white text, 16px medium, padding: 6px 15px, border-radius: 8px -->
+    </div>
+  </div>
+
+  <!-- Pause Animation Button -->
+  <button>Pause</button>
+  <!-- bottom-right positioned, controls background animation -->
+
+  <!-- Social Proof Bar -->
+  <p>Trusted by 98% of the Forbes Cloud 100</p>
+  <!-- 16px, rgba(255,255,255,0.75), centered -->
+
+  <!-- Logo Ticker -->
+  <div> <!-- horizontal scrolling row of company logos -->
+    <a href="/customers/openai"><img alt="OpenAI"/></a>
+    <a href="/customers/figma"><img alt="Figma"/></a>
+    <a href="/customers/ramp"><img alt="Ramp"/></a>
+    <!-- ... ~15 logos, some linked, some unlinked -->
+    <!-- Logos: white/monochrome on dark bg, auto-scrolling marquee -->
+  </div>
+
+</section>
+```
+
+#### Visual Notes
+- Hero has animated floating 3D agent illustrations in background (astronaut/bot characters)
+- Below main content: embedded Notion app screenshot (real product UI showing kanban board)
+- Logo ticker auto-scrolls horizontally, infinite loop
+
+---
+
+### Features (Bento Grid)
+
+**Background:** `#F6F5F4` (gray-200)
+**Padding:** `64px 86.4px`
+**Height:** ~2849px total (3 sub-sections)
+
+This section contains 3 grouped sub-sections, each with a section heading + bento card grid.
+
+#### Sub-section 1: "Meet your new 24/7 AI teammates."
+```
+<div style="padding: 64px 86.4px; background: #F6F5F4">
+
+  <!-- Section Heading -->
+  <h2>Meet your new 24/7 AI teammates.</h2>
+  <!-- 42px, bold 700, line-height: 48px, letter-spacing: -1.5px -->
+
+  <!-- Featured Card: Custom Agents -->
+  <div> <!-- large card, full-width, split layout -->
+    <a href="/product/agents">
+      <h3>Custom Agents <span class="badge">New</span></h3>
+      <!-- Badge: small rounded tag, blue text -->
+      <p>Automate repetitive work for your team. <span>-></span></p>
+    </a>
+
+    <!-- Right side: video/image carousel with tab controls -->
+    <div> <!-- carousel container -->
+      <button>next</button> <!-- arrow nav -->
+      <figure> <!-- video/image with pause control --> </figure>
+    </div>
+
+    <!-- Tab List below carousel -->
+    <div role="tablist">
+      <div role="tab" aria-selected="true">
+        <p><strong>Q&A agents</strong></p>
+        <p>Answers questions instantly using knowledge you already have.</p>
+      </div>
+      <div role="tab">Task routing agents</div>
+      <div role="tab">Reporting agents</div>
+      <div role="tab">Create your own</div>
+    </div>
+    <!-- Tab styling: padding 16px, border-radius 8px, 16px regular -->
+    <!-- Slide indicators: small dots, clickable -->
+  </div>
+
+  <!-- Use Case Links Grid -->
+  <h3>See what Custom Agents can do</h3>
+  <div> <!-- horizontal row of linked cards -->
+    <a href="/product/ai/use-cases/triage-product-feedback">
+      <img/> <!-- use case screenshot -->
+      <h3>Triage product feedback <span>-></span></h3>
+    </a>
+    <!-- Repeat for: Resolve support tickets, Respond to security alerts, Automate weekly reporting, Create your own -->
+    <!-- Cards: thumbnail + heading with arrow, ~5 columns -->
+  </div>
+
+</div>
+```
+
+#### Sub-section 2: "Ask your on-demand assistants."
+```
+<h2>Ask your on-demand assistants.</h2>
+<!-- 42px bold -->
+
+<div> <!-- Bento grid: 1 large + 2 medium cards -->
+
+  <!-- Large Card -->
+  <article style="border-radius: 12px; background: #FFF">
+    <a href="/product/agents">Try it</a>
+    <span>Notion Agent</span>
+    <h2>You assign the tasks. Notion Agent does the work.</h2>
+    <span>-></span>
+    <img alt="Agent UI screenshot"/>
+    <!-- Card has layered images: front, back, floating layer -->
+  </article>
+
+  <!-- Medium Card -->
+  <article>
+    <span>Enterprise Search</span>
+    <h2>One search for everything.</h2>
+    <img alt="Search UI"/>
+  </article>
+
+  <!-- Medium Card -->
+  <article>
+    <span>AI Meeting Notes</span>
+    <h2>Perfect notes, every time.</h2>
+    <img alt="Meeting notes UI"/>
+  </article>
+
+</div>
+```
+
+#### Sub-section 3: "Bring all your work together."
+```
+<h2>Bring all your work together.</h2>
+
+<div> <!-- Same bento pattern: 1 large + 2 medium -->
+  <article> <!-- Docs --> </article>
+  <article> <!-- Knowledge Base --> </article>
+  <article> <!-- Projects --> </article>
+</div>
+```
+
+#### Bento Card Styling
+- `border-radius: 12px`
+- `background: #FFFFFF`
+- Cards contain: label tag, heading, arrow icon, product screenshot
+- Label: small caps-style text, `12px` medium
+- Card heading: `22px` bold, `line-height: 28px`
+- Arrow: `->` icon, appears on right
+- Screenshots: overflow the card bounds slightly, layered depth effect
+- Hover: subtle lift/shadow transition
+
+#### Press Quote (between features and next section)
+```
+<figure aria-label="forbes">
+  <blockquote>"Your AI everything app."</blockquote>
+  <!-- Font: "Lyon Text" (serif), 32px, regular 400, line-height: 40px -->
+  <img alt="forbes" /> <!-- Forbes logo -->
+</figure>
+<!-- Centered, simple attribution -->
+```
+
+---
+
+### Comparison / Pricing Calculator
+
+**Background:** `#FFFFFF`
+**Padding:** `64px 86.4px`
+**Height:** ~700px
+
+#### Structure
+```
+<section style="background: #FFF; padding: 64px 86.4px">
+
+  <!-- Header Row: text left, illustration right -->
+  <div style="display: flex; justify-content: space-between">
+
+    <div>
+      <h2>More productivity. Fewer tools.</h2>
+      <!-- 54px, bold 700, line-height: 56px, letter-spacing: -1.875px -->
+
+      <p>Bring all your tools and teams under one roof. Calculate savings below.</p>
+      <!-- 16px, regular, rgba(0,0,0,0.54) -->
+
+      <a href="/pricing">See pricing plans <span>-></span></a>
+      <!-- Blue link with arrow -->
+    </div>
+
+    <img alt="tools illustration" />
+    <!-- Illustration of app icons being consolidated -->
+
+  </div>
+
+  <!-- Interactive Calculator -->
+  <form>
+    <div style="display: flex">
+
+      <!-- Left: Checkbox Grid -->
+      <fieldset> <!-- 4x3 grid of tool checkboxes -->
+        <label><input type="checkbox"/> AI Search</label>
+        <label><input type="checkbox" checked/> AI Chatbot <span>$20/user</span></label>
+        <label><input type="checkbox"/> AI Meeting Notes</label>
+        <label><input type="checkbox"/> AI Writing Assistant</label>
+        <label><input type="checkbox"/> AI Email App</label>
+        <label><input type="checkbox"/> AI Research</label>
+        <label><input type="checkbox"/> Calendar Scheduling</label>
+        <label><input type="checkbox" checked/> Team Wiki <span>$10/user</span></label>
+        <label><input type="checkbox" checked/> Project Management Tool <span>$24/user</span></label>
+        <label><input type="checkbox"/> Basic CRM</label>
+        <label><input type="checkbox"/> Site Builder</label>
+        <label><input type="checkbox"/> Forms</label>
+        <!-- Price tags: smaller text, muted color -->
+      </fieldset>
+
+      <!-- Right: Results -->
+      <div>
+        <div>
+          <span>Team size</span>
+          <input type="number" value="10" role="spinbutton"/>
+          <!-- Large display number: 32px bold -->
+        </div>
+        <div>
+          <span>Monthly savings</span>
+          <div role="status">$340</div>
+        </div>
+        <div>
+          <span>Annual savings</span>
+          <div role="status">$4,080</div>
+        </div>
+      </div>
+
+    </div>
+  </form>
+
+</section>
+```
+
+---
+
+### Social Proof / Testimonials
+
+**Background:** `#F6F5F4` (gray-200)
+**Padding:** `64px 86.4px`
+**Height:** ~874px
+
+#### Structure
+```
+<section style="background: #F6F5F4; padding: 64px 86.4px">
+
+  <h2>Trusted by teams that ship.</h2>
+  <!-- 54px bold, letter-spacing: -1.875px -->
+
+  <!-- Testimonial Grid: 3-column layout -->
+  <div>
+
+    <!-- Column 1: Featured (large) -->
+    <div>
+      <figure>
+        <img alt="OpenAI-Logo"/>
+        <blockquote>"There's power in a single platform where you can do all your work.
+                     Notion is that single place."</blockquote>
+        <!-- Serif font (Lyon Text), 32px regular -->
+        <a href="/customers/openai">Read the full story <span>-></span></a>
+      </figure>
+      <button>View the video</button>
+      <!-- Video thumbnail with play overlay -->
+    </div>
+
+    <!-- Column 2: 3 stacked quote cards -->
+    <div>
+      <a href="/customers/toyota">
+        Streamlined workflows to reduce timelines by 3x. ->
+      </a>
+      <a href="/customers/ramp">
+        "With Notion, every person at Ramp has an AI agent." ->
+      </a>
+      <a href="/customers/vercel">
+        "Notion understands that you can solve a lot of problems with one tool." ->
+      </a>
+      <!-- Each: text card, clickable, arrow on hover/right -->
+    </div>
+
+    <!-- Column 3: 3 stacked quote cards -->
+    <div>
+      <a href="/customers/match">...</a>
+      <a href="/customers/cursor">...</a>
+      <a href="/customers/figma">...</a>
+    </div>
+
+  </div>
+
+  <!-- Stats Marquee -->
+  <div> <!-- auto-scrolling horizontal ticker, duplicated for infinite scroll -->
+    <p><icon/> Over 100M users worldwide</p>
+    <p><icon/> #1 knowledge base 3 years running (G2)</p>
+    <p><icon/> #1 AI enterprise search (G2)</p>
+    <p><icon/> #1 rated AI writing (G2)</p>
+    <p><icon/> 62% of Fortune 100</p>
+    <p><icon/> Over 50% of YC companies</p>
+    <p><icon/> 1.4M+ community members</p>
+    <!-- Each stat has a small icon prefix -->
+    <!-- Row is duplicated 2-3x for seamless infinite scroll animation -->
+  </div>
+
+</section>
+```
+
+---
+
+### CTA / Downloads
+
+**Background:** `#FFFFFF`
+**Padding:** `64px 86.4px`
+**Height:** ~787px
+
+#### Structure
+```
+<section style="background: #FFF; padding: 64px 86.4px">
+
+  <h2>Try for free.</h2>
+  <!-- 54px bold -->
+
+  <!-- 3-column card grid -->
+  <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px">
+
+    <!-- Card 1: Notion (large) -->
+    <div style="background: #F6F5F4; border-radius: 12px; padding: 32px">
+      <img/> <!-- Notion icon -->
+      <h3>Get started on Notion</h3>
+      <!-- 22px bold -->
+      <p>Your AI workspace with built-in agents.</p>
+      <!-- 14px regular, muted -->
+      <a href="/desktop/.../download">
+        <img/> <!-- Apple icon -->
+        Download for Mac
+      </a>
+      <!-- Primary-style button with platform icon -->
+      <img alt="A preview image of the notion desktop app"/>
+      <!-- App screenshot below -->
+    </div>
+
+    <!-- Card 2: Notion Mail -->
+    <div style="background: #F6F5F4; border-radius: 12px">
+      <img/> <!-- Mail icon -->
+      <h3>Notion Mail</h3>
+      <p>The AI inbox that thinks like you.</p>
+      <a href="/product/mail/download">Download</a>
+      <img alt="mail app preview"/>
+    </div>
+
+    <!-- Card 3: Notion Calendar -->
+    <div style="background: #F6F5F4; border-radius: 12px">
+      <img/> <!-- Calendar icon -->
+      <h3>Notion Calendar</h3>
+      <p>Time, scheduling, tasks—all together.</p>
+      <a href="/product/calendar/download">Download</a>
+      <img alt="calendar app preview"/>
+    </div>
+
+  </div>
+
+  <p>Notion is always at home right <a href="/signup">in your browser</a>.</p>
+  <!-- 14px, muted, centered below cards -->
+  <!-- "in your browser" is underlined link -->
+
+</section>
+```
+
+---
+
+### Footer
+
+**Background:** `#FFFFFF`
+**Layout:** Two rows — top row (logo + social + meta) and bottom row (4 link columns)
+
+#### Structure
+```
+<footer role="contentinfo">
+  <nav aria-label="Footer">
+
+    <!-- Top Row -->
+    <div style="display: flex; justify-content: space-between">
+
+      <!-- Left: Logo + Social -->
+      <div>
+        <a href="/product"><img alt="Notion logo"/></a>
+        <!-- Full "Notion" wordmark, black -->
+
+        <ul aria-label="Social media" style="display: flex; gap: 16px">
+          <li><a href="https://instagram.com/notionhq"><img alt="Instagram"/></a></li>
+          <li><a href="https://twitter.com/NotionHQ"><img alt="X"/></a></li>
+          <li><a href="https://linkedin.com/company/notionhq"><img alt="LinkedIn"/></a></li>
+          <li><a href="https://facebook.com/NotionHQ"><img alt="Facebook"/></a></li>
+          <li><a href="https://youtube.com/..."><img alt="YouTube"/></a></li>
+        </ul>
+        <!-- Icons: ~20x20, black/dark gray -->
+
+        <button>English (US) <chevron/></button>
+        <!-- Language selector -->
+
+        <button>Do Not Sell or Share My Info</button>
+        <button>Cookie settings</button>
+        <span>&copy; 2026 Notion Labs, Inc.</span>
+      </div>
+
+    </div>
+
+    <!-- Bottom Row: 4 Link Columns -->
+    <div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr">
+
+      <!-- Column: Company -->
+      <ul>
+        <p><strong>Company</strong></p>
+        <li><a href="/about">About us</a></li>
+        <li><a href="/careers">Careers</a></li>
+        <li><a href="/security">Security</a></li>
+        <li><a href="https://notion-status.com">Status</a></li>
+        <li><a href="/terms">Terms & privacy</a></li>
+        <li><a href="/trust/privacy-policy#california">Your privacy rights</a></li>
+      </ul>
+
+      <!-- Column: Download -->
+      <ul>
+        <p><strong>Download</strong></p>
+        <li><a href="/mobile">iOS & Android</a></li>
+        <li><a href="/desktop">Mac & Windows</a></li>
+        <li><a href="/product/mail/download">Mail</a></li>
+        <li><a href="/product/calendar/download">Calendar</a></li>
+        <li><a href="/web-clipper">Web Clipper</a></li>
+      </ul>
+
+      <!-- Column: Resources -->
+      <ul>
+        <p><strong>Resources</strong></p>
+        <li><a href="/help">Help center</a></li>
+        <li><a href="/pricing">Pricing</a></li>
+        <li><a href="/blog">Blog</a></li>
+        <li><a href="/community">Community</a></li>
+        <li><a href="/integrations">Integrations</a></li>
+        <li><a href="/templates">Templates</a></li>
+        <li><a href="/partners">Partner programs</a></li>
+      </ul>
+
+      <!-- Column: Notion for -->
+      <ul>
+        <p><strong>Notion for</strong></p>
+        <li><a href="/enterprise">Enterprise</a></li>
+        <li><a href="/teams">Small business</a></li>
+        <li><a href="/personal">Personal</a></li>
+        <li><a href="/explore">Explore more <span>-></span></a></li>
+        <!-- Last item has arrow, bolder treatment -->
+      </ul>
+
+    </div>
+
+  </nav>
+</footer>
+```
+
+#### Footer Link Styling
+- Column headings: `16px`, weight `500` (medium), `rgba(0,0,0,0.95)`
+- Links: `14px`, weight `400`, `rgba(0,0,0,0.54)`
+- Link hover: color darkens
+- Vertical spacing between links: ~8px
+- Social icons: monochrome, ~20px
+
+---
+
+### Stats (Marquee Ticker)
+
+Included within the Social Proof section as a sub-component.
+
+**Layout:** Horizontal auto-scrolling marquee, duplicated rows for infinite loop
+
+#### Structure
+```
+<div style="overflow: hidden">
+  <div style="display: flex; gap: 32px; animation: scroll linear infinite">
+    <p><img/> Over 100M users worldwide</p>
+    <p><img/> #1 knowledge base 3 years running (G2)</p>
+    <p><img/> #1 AI enterprise search (G2)</p>
+    <p><img/> #1 rated AI writing (G2)</p>
+    <p><img/> 62% of Fortune 100</p>
+    <p><img/> Over 50% of YC companies</p>
+    <p><img/> 1.4M+ community members</p>
+  </div>
+  <!-- Duplicated 2-3x for seamless loop -->
+</div>
+```
+
+- Each stat: icon (emoji-style, ~16px) + text
+- Font: `14px` regular
+- Horizontally separated, continuous scroll animation
+
+---
+
+## Sections NOT present on the homepage
+
+The following requested sections do not appear on the Notion homepage. These would need to be scraped from their respective sub-pages:
+
+| Section | Where to find |
+|---------|---------------|
+| About | `/about` |
+| Blog | `/blog` |
+| Contact | `/contact-sales` |
+| FAQ | `/help` or product pages |
+| How It Works | Embedded within Features sections above |
+| Newsletter | Not present (Notion uses in-product onboarding) |
+| Pricing | `/pricing` |
+| Showcase | Embedded as bento cards within Features |
+| Store | Not applicable |
+
+---
+
+## General Layout Patterns
+
+- **Max content width:** Sections use `padding: 64px 86.4px` on desktop (no explicit max-width; content stretches)
+- **Section background alternation:** `#FFFFFF` and `#F6F5F4` alternate, with `#02093A` for the hero
+- **Card pattern:** `border-radius: 12px`, white bg, product screenshots overflowing bounds
+- **Arrow pattern:** `->` icon used universally for CTAs and links (not chevron)
+- **Bento grid:** Flexible grid with 1 large card + 2 medium cards, or 3 equal columns
+- **Typography hierarchy:** Tight letter-spacing on headings (negative), generous line-height on body
+- **Interactive elements:** Tabs, carousel with dot indicators, checkboxes with live calculation