glyph-ai 0.1.0

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

@@ -0,0 +1,824 @@
+# Vercel.com Design System & Section Boilerplate
+
+---
+
+## Design System
+
+### Colors
+
+| Role | Value | RGB | Notes |
+|------|-------|-----|-------|
+| **Primary (Foreground)** | `#171717` | `rgb(23, 23, 23)` | Near-black. Headlines, primary buttons, body text |
+| **Secondary (Background)** | `#FAFAFA` | `rgb(250, 250, 250)` | Off-white. Page background |
+| **Tertiary (Accent Blue)** | `#0070F3` | `rgb(0, 112, 243)` | Vercel blue. Links, focus states, interactive accents |
+| **Surface White** | `#FFFFFF` | `rgb(255, 255, 255)` | Cards, secondary buttons, input backgrounds |
+| **Gray 100** | `hsl(0, 0%, 95%)` | `rgb(242, 242, 242)` | Lightest gray. Hover states on nav items |
+| **Gray 200** | `hsl(0, 0%, 92%)` | `rgb(235, 235, 235)` | Active nav item bg, subtle borders |
+| **Gray 300** | `hsl(0, 0%, 90%)` | `rgb(230, 230, 230)` | Dividers |
+| **Gray 400** | `hsl(0, 0%, 92%)` | `rgb(235, 235, 235)` | Input borders |
+| **Gray 500** | `hsl(0, 0%, 79%)` | `rgb(201, 201, 201)` | Disabled elements |
+| **Gray 600** | `hsl(0, 0%, 66%)` | `rgb(168, 168, 168)` | Placeholder text |
+| **Gray 700** | `hsl(0, 0%, 56%)` | `rgb(143, 143, 143)` | Muted icons |
+| **Gray 800** | `hsl(0, 0%, 49%)` | `rgb(125, 125, 125)` | Secondary text |
+| **Gray 900** | `hsl(0, 0%, 30%)` | `rgb(77, 77, 77)` | Nav links, tertiary text |
+| **Gray 1000** | `hsl(0, 0%, 9%)` | `rgb(23, 23, 23)` | Primary text (matches foreground) |
+| **Blue 700** | `hsl(212, 100%, 48%)` | `rgb(0, 112, 243)` | Links, focus color |
+| **Success** | `#0070F3` | `rgb(0, 112, 243)` | Success states |
+| **Error** | `#EE0000` | `rgb(238, 0, 0)` | Error states |
+| **Warning** | `#F5A623` | `rgb(245, 166, 35)` | Warning states |
+| **Alpha 100** | `#0000000D` | `rgba(0,0,0,0.05)` | Subtle overlays |
+| **Alpha 400** | `#00000014` | `rgba(0,0,0,0.08)` | Border shadows |
+| **Alpha 600** | `#00000057` | `rgba(0,0,0,0.34)` | Focus ring inner |
+| **Alpha 900** | `#000000B3` | `rgba(0,0,0,0.70)` | Heavy overlays |
+| **Footer Link** | `#666666` | `rgb(102, 102, 102)` | Footer link text |
+
+### Typography
+
+#### Font Families
+
+| Role | Font | Fallback | Usage |
+|------|------|----------|-------|
+| **Sans (Primary)** | `Geist` | `Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif` | All headings, body, UI elements |
+| **Sans Fallback** | `Inter` | `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` | CSS var `--font-sans-fallback` |
+| **Mono** | `Geist Mono` | `ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, monospace` | Footer section headers, code, badges |
+| **Display** | `Space Grotesk` | `var(--font-sans)` | Special display elements |
+
+#### Type Scale
+
+| Element | Font | Size | Weight | Line Height | Letter Spacing | Color |
+|---------|------|------|--------|-------------|----------------|-------|
+| **H1 (Hero)** | Geist | 44px | 600 (Semi) | 44px (1:1) | -2.18px | `#171717` |
+| **H2 (Section)** | Geist | 14px | 500 | 20px | -0.28px | `#4D4D4D` |
+| **H3 (Card Title)** | Geist | 32px | 600 | 40px | -1.28px | `#171717` |
+| **Body** | Geist | 14px | 400 | 20px | normal | `#171717` |
+| **Body (Hero)** | Geist | 16px | 400 | 24px | normal | `#171717` |
+| **Nav Link** | Geist | 14px | 400 | 14px | normal | `#4D4D4D` |
+| **Nav CTA** | Geist | 14px | 500 | normal | normal | `#171717` |
+| **Tab Label** | Geist | 14px | 400 | normal | normal | `#000000` |
+| **Footer Header** | Geist Mono | 12px | 500 | normal | normal | `#171717` (uppercase) |
+| **Footer Link** | Geist | 14px | 400 | 20px | normal | `#666666` |
+| **Button (Hero)** | Geist | 16px | 500 | 24px | normal | white / `#171717` |
+
+### Buttons
+
+#### Primary Button (Hero CTA)
+
+```
+Background:   #171717 (rgb(23, 23, 23))
+Text:          #FFFFFF
+Font:          Geist, 16px, weight 500
+Padding:       0 14px
+Height:        ~44px (inferred from line-height + padding)
+Border Radius: 100px (fully rounded / pill)
+Border:        none
+Icon:          Vercel triangle logo, left of text
+```
+
+#### Secondary Button (Hero CTA)
+
+```
+Background:   #FFFFFF
+Text:          #171717
+Font:          Geist, 16px, weight 500
+Padding:       0 14px
+Height:        ~44px
+Border Radius: 100px (pill)
+Border:        none
+Box Shadow:    inset border via shadow (subtle gray ring)
+```
+
+#### Nav Button - Sign Up
+
+```
+Background:   #171717
+Text:          #FFFFFF
+Font:          Geist, 14px, weight 500
+Padding:       0 6px
+Height:        32px
+Border Radius: 6px
+Border:        none
+```
+
+#### Nav Button - Log In
+
+```
+Background:   #FFFFFF
+Text:          #171717
+Font:          Geist, 14px, weight 500
+Padding:       0 6px
+Height:        32px
+Border Radius: 6px
+Box Shadow:    rgb(235, 235, 235) 0px 0px 0px 1px (1px gray ring)
+```
+
+#### Nav Button - Ask AI
+
+```
+Background:   #FFFFFF
+Text:          #171717
+Font:          Geist, 14px, weight 500
+Padding:       0 6px
+Height:        32px
+Border Radius: 6px
+Box Shadow:    rgb(235, 235, 235) 0px 0px 0px 1px
+```
+
+#### Footer CTA - "Start Deploying" (large)
+
+```
+Background:   #F5F5F5 (light gray card)
+Text:          #000000
+Font:          Geist, ~40px, weight 600
+Layout:        Full-width card with arrow icon right-aligned
+Border Radius: 12px
+Padding:       ~32px
+```
+
+#### Footer CTA - "Talk to an Expert"
+
+```
+Background:   #171717
+Text:          #FFFFFF
+Font:          Geist, 14px, weight 500
+Height:        48px
+Border Radius: 8px
+Icon:          Circle arrow right, right-aligned
+```
+
+### Input Fields
+
+```
+Font:          Geist, 14px, weight 400
+Background:   transparent (inherits)
+Border:        none visible (styled via shadow)
+Border Radius: 6px (--geist-radius)
+Height:        40px (--geist-space-medium)
+Focus Ring:    0 0 0 1px var(--ds-gray-alpha-600), 0px 0px 0px 4px rgba(0,0,0,0.16)
+```
+
+### Spacing System
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--geist-space` | `4px` | Base unit |
+| `--geist-space-2x` | `8px` | Tight spacing |
+| `--geist-space-3x` | `12px` | Nav item padding, small gaps |
+| `--geist-space-4x` | `16px` | Standard element spacing |
+| `--geist-space-6x` | `24px` | Page margin, gap, section padding |
+| `--geist-space-8x` | `32px` | Section gap (small) |
+| `--geist-space-10x` | `40px` | Medium spacing, footer padding |
+| `--geist-space-16x` | `64px` | Large section spacing |
+| `--geist-space-24x` | `96px` | Section vertical padding |
+| `--geist-space-32x` | `128px` | Major section breaks |
+| `--geist-space-48x` | `192px` | Hero-level spacing |
+| `--geist-space-64x` | `256px` | Maximum spacing |
+| **Page Width** | `1200px` | `--geist-page-width` (content max) |
+| **DS Page Width** | `1400px` | `--ds-page-width` (wider sections) |
+| **Page Margin** | `24px` | `--geist-page-margin` |
+| **Header Height** | `64px` | Fixed nav bar height |
+
+### Shadows
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| **Border** | `0 0 0 1px #00000014` | Subtle card borders |
+| **Small** | `0px 2px 2px rgba(0,0,0,0.04)` | Cards, inputs |
+| **Medium** | `0px 2px 2px rgba(0,0,0,0.04), 0px 8px 8px -8px rgba(0,0,0,0.04)` | Elevated cards |
+| **Large** | `0px 2px 2px rgba(0,0,0,0.04), 0px 8px 16px -4px rgba(0,0,0,0.04)` | Modals, popovers |
+| **Menu** | `0 0 0 1px #00000014, 0px 1px 1px rgba(0,0,0,0.02), 0px 4px 8px -4px rgba(0,0,0,0.04), 0px 16px 24px -8px rgba(0,0,0,0.06)` | Dropdown menus |
+
+### Border Radius
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--geist-radius` | `6px` | Default radius (inputs, small cards, nav buttons) |
+| `--geist-marketing-radius` | `8px` | Marketing cards, CTA cards |
+| **Pill** | `9999px` / `100px` | Nav items, hero buttons, tabs |
+| **Tab** | `64px` | Tab pill buttons |
+
+---
+
+## Section Boilerplates
+
+### Navigation
+
+```
+STRUCTURE:
+  <header> height: 64px, padding: 0 24px, sticky top, z-index: 75
+    <div> (container, centered)
+      <a> Logo (VercelLogotype SVG, links to /home)
+      <nav aria-label="Main">
+        <ul> (flex, gap: 0)
+          <li> <button> "Products" (dropdown trigger) — chevron icon right
+          <li> <button> "Resources" (dropdown trigger) — chevron icon right
+          <li> <button> "Solutions" (dropdown trigger) — chevron icon right
+          <li> <a> "Enterprise" (plain link)
+          <li> <a> "Pricing" (plain link)
+      <div> (right-side CTAs, flex, gap: 8px)
+        <button> "Ask AI" — outlined style
+        <a> "Log In" — outlined style
+        <a> "Sign Up" — filled dark style
+
+INTERACTIONS:
+  Nav Items (Products, Resources, Solutions):
+    - Default: text #4D4D4D, bg transparent, font 14px/400, padding 8px 12px, border-radius 9999px
+    - Hover: bg #F5F5F5 (gray-100), text darkens
+    - Active/Open: bg #EBEBEB (gray-200), text #171717
+    - Click toggles a mega-dropdown panel
+
+  Dropdown Panel (Products):
+    - Position: absolute, below header, full-width aligned to nav
+    - Background: white
+    - Shadow: menu shadow (multi-layer)
+    - Border-radius: 12px
+    - Layout: 3-column grid
+      - Column 1: "AI Cloud" heading (h5, linked) + 5 items
+      - Column 2: "Core Platform" heading (h5, plain) + 4 items
+      - Column 3: "Security" heading (h5, linked) + 4 items
+    - Each item: icon (24x24, gray stroke) + title (14px/500, #171717) + description (14px/400, #4D4D4D)
+    - Item padding: 12px, border-radius: 6px
+    - Item hover: bg gray-100
+
+  Dropdown Panel (Resources):
+    - 3 columns: Company (5 items), Learn (4 items), Open Source (4 items w/ dual icons)
+
+  Dropdown Panel (Solutions):
+    - 3 columns: Use Cases (5 items), Tools (3 items), Users (2 items)
+
+  Right CTAs:
+    - "Ask AI": white bg, 1px gray ring, 32px height, 6px radius
+    - "Log In": white bg, 1px gray ring, 32px height, 6px radius
+    - "Sign Up": #171717 bg, white text, 32px height, 6px radius
+
+SPACING:
+  - Header height: 64px
+  - Horizontal padding: 24px
+  - Nav items gap: 0 (items self-padded 8px 12px)
+  - Right CTAs gap: 8px
+  - Logo to nav gap: ~24px
+```
+
+### Hero
+
+```
+STRUCTURE:
+  <section>
+    <div> (announcement banner, centered)
+      <span> "Events" label
+      <p> "Ship 26 is coming to 5 cities"
+      <a> "Save the date" + arrow icon
+    <div> (hero visual area)
+      <img> Background gradient/generative art (full-width, abstract rainbow light rays with Vercel triangle centered)
+      <div> (text overlay, centered)
+        <h1> "Build and deploy on the AI Cloud."
+        <p> "Vercel provides the developer tools and cloud infrastructure to build, scale, and secure a faster, more personalized web."
+      <div> (CTA buttons, flex, centered, gap 12px)
+        <a> "Start Deploying" — primary pill button, Vercel icon left
+        <a> "Get a Demo" — secondary pill button (white, border ring)
+
+STYLING:
+  Announcement Banner:
+    - Inline flex, gap 8px, centered
+    - "Events" label: small badge/tag
+    - Link with arrow icon
+
+  Hero Heading:
+    - Font: Geist, 44px, weight 600
+    - Line height: 1:1 (44px)
+    - Letter spacing: -2.18px (very tight)
+    - Color: #171717
+    - Max-width: ~680px, centered
+
+  Hero Body:
+    - Font: Geist, 16px, weight 400
+    - Line height: 24px
+    - Color: #171717
+    - Max-width: ~580px, centered
+
+  CTA Buttons:
+    - Primary: #171717 bg, white text, pill (100px radius), 16px font, icon + text
+    - Secondary: white bg, #171717 text, pill, subtle border ring
+
+SPACING:
+  - Banner to hero art: 24px
+  - Art to heading: 32px
+  - Heading to body: 16px
+  - Body to CTAs: 24px
+  - CTA gap: 12px
+  - Section padding-bottom: 64px
+```
+
+### Social Proof
+
+```
+STRUCTURE:
+  <section>
+    <div> (logo ticker / proof strip, horizontal scroll)
+      <div> Logo + stat pair (repeating):
+        <img> Company logo (e.g., Runway, LeonardoAi, Zapier)
+        <span> Stat text (e.g., "build times went from 7m to 40s.")
+    <div> (tabbed use-case selector)
+      <div role="tablist"> (pill tabs, horizontal)
+        <button role="tab"> "AI Apps" (active)
+        <button role="tab"> "Web Apps"
+        <button role="tab"> "Ecommerce"
+        <button role="tab"> "Marketing"
+        <button role="tab"> "Platforms"
+    <div> (tab content)
+      <p> Description text
+      <a> CTA link with arrow ("Deploy AI Apps in seconds")
+
+STYLING:
+  Logo + Stat:
+    - Logo: grayscale, ~20px height
+    - Stat text: 14px, #171717, bold company name
+    - Horizontal layout, gap 24px between pairs
+
+  Tabs:
+    - Pill style: border-radius 64px, height 40px, padding 0 16px
+    - Active tab: bg white, text #000, subtle shadow
+    - Inactive tab: bg transparent, text #666
+    - Tab bar: bg #F5F5F5, border-radius 64px, padding 4px
+
+  Tab Content:
+    - Body text: 14px/20px, #4D4D4D
+    - CTA link: 14px, #171717, flex with arrow icon, hover underline
+
+SPACING:
+  - Logo strip vertical padding: 32px
+  - Tabs to content: 32px
+  - Section padding: 64px 0
+```
+
+### Features
+
+```
+STRUCTURE:
+  <section>
+    <div> (section header)
+      <h3> "Your product, delivered."
+      <p> "Security, speed, and AI included, so you can focus on your user."
+    <div> (feature cards grid — 2x3 bento-style)
+      <div> (feature card, large or standard):
+        <div> (text content)
+          <h3> Feature title (e.g., "Agents")
+          <p> Description
+          <a> Arrow link to detail page
+        <div> (visual/illustration area)
+          <img> or animated graphic
+
+STYLING:
+  Section Header:
+    - H3: Geist, 32px, weight 600, line-height 40px, letter-spacing -1.28px, #171717
+    - P: Geist, 14px, weight 400, #4D4D4D
+    - Margin-bottom: 8px between H3 and P
+
+  Feature Cards:
+    - Background: white
+    - Border: 1px solid rgba(0,0,0,0.08)
+    - Border-radius: 8px (marketing radius)
+    - Padding: 24px
+    - Grid: 2-column layout, some cards span full width
+    - Card title: 18-20px, weight 600, #171717
+    - Card description: 14px, weight 400, #4D4D4D
+    - Arrow link: 16px icon, #171717, circle bg on hover
+
+  Visual Area:
+    - Right-aligned or bottom-aligned in card
+    - Contains product screenshots, diagrams, or animated elements
+
+SPACING:
+  - Section padding: 96px 0
+  - Header to grid: 48px
+  - Card gap: 16px
+  - Card internal padding: 24px
+  - Title to description: 8px
+  - Description to link: 16px
+```
+
+### How It Works
+
+```
+STRUCTURE:
+  <section>
+    <div> (section header)
+      <p> Descriptive intro text (centered)
+    <div> (visual: infrastructure diagram / globe visualization)
+    <div> (sub-features, horizontal layout)
+      <div> (feature block):
+        <h3> Title
+        <p> Description
+        <a> CTA link
+
+  NOTE: Vercel uses a split approach:
+    1. "From code to infrastructure in one git push" — with globe/CDN visual
+    2. "A compute model for all workloads" — with pricing diagram
+    3. "The AI Gateway for Developers" — with model provider logos grid
+
+STYLING:
+  Section Text:
+    - Body: Geist, 16px, weight 400, max-width ~800px, centered
+    - CTA buttons: pill style, outlined or filled
+
+  Infrastructure Diagram:
+    - Pill buttons: "Deploy at every push" / "Visit all 18 Regions"
+    - Pill bg: #171717, text: white, radius 100px
+    - Secondary pill: white bg, border ring
+
+  AI Gateway Grid:
+    - Provider cards: small tiles with logo icons
+    - Grid layout: 6-8 columns
+    - Card: white bg, subtle border, 6px radius
+
+SPACING:
+  - Section padding: 96px 0
+  - Text to visual: 48px
+  - Between sub-sections: 96px
+```
+
+### Showcase (Deploy Templates)
+
+```
+STRUCTURE:
+  <section>
+    <div> (left column — text)
+      <h2> "Deploy your first app in seconds."
+      <ul> (feature list with icons):
+        <li> Icon + "Deploy automatically from git or with our CLI"
+        <li> Icon + "Wide range support for the most popular frameworks"
+        <li> Icon + "Previews for every push"
+        <li> Icon + "Automatic HTTPS for all your domains"
+    <div> (right column — template cards grid, 2-column)
+      <a> Template card:
+        <div> Colored gradient background (unique per framework)
+        <img> Framework logo (centered)
+        <span> "Next.js Templates" / "Svelte Templates" / etc.
+
+STYLING:
+  Heading:
+    - Geist, 32px, weight 600, line-height 40px, letter-spacing -1.28px
+
+  Feature List:
+    - Icon: 16px, monochrome, left-aligned
+    - Text: 14px, weight 400, #171717
+    - Bold keywords within text (e.g., "Deploy automatically")
+    - Gap between items: 24px
+
+  Template Cards:
+    - Gradient background: unique pastel per framework (pink for Svelte, green for Nuxt, blue for React, etc.)
+    - Border-radius: 8px
+    - Logo: 40px, centered in gradient area
+    - Label: 14px, weight 500, below gradient, padding 16px
+    - Border: 1px solid rgba(0,0,0,0.08)
+
+SPACING:
+  - Section layout: 2-column, left text ~33%, right cards ~67%
+  - Section padding: 96px 24px
+  - Card grid gap: 16px
+  - Left text to right grid: 48px
+```
+
+### CTA (Bottom)
+
+```
+STRUCTURE:
+  <section>
+    <div> (3-column grid)
+      <a> "Start Deploying" — large card CTA
+        <span> Large text
+        <div> Circle arrow icon (right-aligned)
+      <div> (stacked CTAs)
+        <a> "Talk to an Expert" — dark button, full-width, arrow icon right
+        <a> "Get an Enterprise Trial" — outlined button, full-width, arrow icon right
+
+STYLING:
+  "Start Deploying" Card:
+    - Background: #F5F5F5
+    - Text: #000, Geist ~40px, weight 600, letter-spacing tight
+    - Arrow: 48px circle, #171717 bg, white arrow icon
+    - Border-radius: 12px
+    - Padding: 32px
+    - Spans 2 columns of the 3-column grid
+
+  "Talk to an Expert":
+    - Background: #171717
+    - Text: white, 14px, weight 500
+    - Height: 48px
+    - Border-radius: 8px
+    - Arrow: white circle outline, right-aligned
+    - Full-width within its column
+
+  "Get an Enterprise Trial":
+    - Background: white
+    - Text: #171717, 14px, weight 500
+    - Height: 48px
+    - Border-radius: 8px
+    - Border: 1px solid #EBEBEB
+    - Arrow: dark circle outline, right-aligned
+
+SPACING:
+  - Section padding: 32px 0 64px
+  - Grid gap: 16px
+  - Stacked CTA gap: 8px
+```
+
+### Footer
+
+```
+STRUCTURE:
+  <footer> max-width: 1448px, padding: 40px 24px, centered
+    <div> (upper footer — 4-column grid, 2 rows)
+      Row 1:
+        <div> "GET STARTED" — Templates, Supported frameworks, Marketplace, Domains
+        <div> "BUILD" — Next.js on Vercel, Turborepo, v0
+        <div> "SCALE" — Content delivery network, Fluid compute, CI/CD, Observability, AI Gateway (NEW), Vercel Agent (NEW)
+        <div> "SECURE" — Platform security, Web Application Firewall, Bot management, BotID, Sandbox (NEW)
+      Row 2:
+        <div> "RESOURCES" — Pricing, Customers, Enterprise, Articles, Startups, Solution partners
+        <div> "LEARN" — Docs, Blog, Changelog, Knowledge Base, Academy, Community
+        <div> "FRAMEWORKS" — Next.js, Nuxt, Svelte, Nitro, Turbo
+        <div> "SDKS" — AI SDK, Workflow DevKit (NEW), Flags SDK, Chat SDK, Streamdown AI (NEW)
+    <div> (lower footer — 3-column + logo)
+      <div> "USE CASES" — Composable commerce, Multi-tenant platforms, Web apps, Marketing sites, Platform engineers, Design engineers
+      <div> "COMPANY" — About, Careers, Help, Press, Legal, Privacy Policy
+      <div> "COMMUNITY" — Open source program, Events, Shipped on Vercel, GitHub (icon), LinkedIn (icon), X (icon), YouTube (icon)
+      <div> Vercel triangle logo (large, top-right)
+    <div> (status bar, bottom)
+      <span> Status indicator dot + "NO STATUS AVAILABLE." (monospace)
+      <div> Theme toggle: System / Light / Dark icons
+
+STYLING:
+  Section Headers:
+    - Font: Geist Mono, 12px, weight 500, uppercase
+    - Color: #171717
+    - Margin-bottom: 16px
+
+  Links:
+    - Font: Geist, 14px, weight 400
+    - Color: #666666
+    - Line height: 20px
+    - No underline, hover: underline or color darken
+    - Vertical gap between links: 8px
+
+  "NEW" Badge:
+    - Small pill tag next to link text
+    - Background: #F5F5F5
+    - Text: 11px, weight 500, uppercase
+    - Border-radius: 4px
+    - Padding: 2px 6px
+
+  Status Bar:
+    - Font: Geist Mono, 12px
+    - Color: #666666
+    - Status dot: 8px circle (color indicates status)
+
+  Theme Toggle:
+    - 3 icon buttons: Monitor / Sun / Moon
+    - Active: subtle bg highlight
+    - Size: 24px icons
+
+SPACING:
+  - Footer padding: 40px 24px
+  - Row gap (upper to lower): 64px
+  - Column gap: ~48px (fluid 4-col grid)
+  - Link vertical gap: 8px
+  - Header to first link: 16px
+  - Lower footer to status bar: 48px
+```
+
+### Pricing
+
+```
+NOTE: Pricing lives at /pricing. Structure inferred from nav and common Vercel patterns.
+
+STRUCTURE:
+  <section>
+    <div> (header, centered)
+      <h1> "Pricing"
+      <p> Subtitle text
+    <div> (pricing cards — 3-4 column grid)
+      <div> (pricing card):
+        <h3> Plan name (Hobby / Pro / Enterprise)
+        <p> Plan description
+        <div> Price display
+          <span> "$X" (large)
+          <span> "/month" (small)
+        <ul> Feature list with check icons
+        <a> CTA button
+
+STYLING:
+  Cards follow standard Vercel card pattern:
+    - Background: white
+    - Border: 1px solid rgba(0,0,0,0.08)
+    - Border-radius: 8px
+    - Padding: 24px
+    - Featured/Pro card may have dark (#171717) background with white text
+
+SPACING:
+  - Section padding: 96px 0
+  - Card gap: 16px
+  - Card internal: 24px padding
+  - Price to features: 24px
+  - Feature list gap: 12px
+```
+
+### Blog
+
+```
+STRUCTURE:
+  <section>
+    <div> (section header)
+      <h2> Section title
+    <div> (blog cards grid — 3-column)
+      <a> (blog card):
+        <div> Image/thumbnail (aspect ratio 16:9)
+        <div> Content:
+          <span> Category tag
+          <h3> Post title
+          <p> Excerpt
+          <span> Date + read time
+
+STYLING:
+  Blog Cards:
+    - Background: white
+    - Border: 1px solid rgba(0,0,0,0.08)
+    - Border-radius: 8px
+    - Image: border-radius 8px 8px 0 0 (top rounded)
+    - Title: 18px, weight 600, #171717
+    - Excerpt: 14px, weight 400, #4D4D4D
+    - Category: 12px, weight 500, uppercase, #666
+
+SPACING:
+  - Card gap: 16px
+  - Image to content: 0 (flush)
+  - Content padding: 24px
+  - Title to excerpt: 8px
+```
+
+### FAQ
+
+```
+STRUCTURE:
+  <section>
+    <h2> "Frequently Asked Questions"
+    <div> (accordion list)
+      <details> (or custom accordion):
+        <summary> Question text + expand/collapse chevron
+        <div> Answer content (paragraphs, links)
+
+STYLING:
+  Accordion Items:
+    - Border-bottom: 1px solid rgba(0,0,0,0.08)
+    - Padding: 20px 0
+    - Question: 16px, weight 500, #171717
+    - Answer: 14px, weight 400, #4D4D4D, line-height 24px
+    - Chevron: 16px, rotates 180deg on open, transition 200ms
+
+SPACING:
+  - Section padding: 96px 0
+  - Max-width: 768px, centered
+  - Item padding: 20px 0
+```
+
+### Stats
+
+```
+STRUCTURE:
+  <section>
+    <div> (stats grid — 3 or 4 columns)
+      <div> (stat block):
+        <span> Large number (e.g., "95%", "24x", "6×")
+        <p> Description text
+
+STYLING:
+  Stat Number:
+    - Font: Geist, 48px, weight 600
+    - Color: #171717
+    - Letter-spacing: -2px
+
+  Description:
+    - Font: Geist, 14px, weight 400
+    - Color: #4D4D4D
+
+  Layout:
+    - Centered text within each column
+    - Divider between columns (1px vertical line, #EBEBEB) or none
+
+SPACING:
+  - Section padding: 64px 0
+  - Stat gap: 48px
+  - Number to description: 8px
+```
+
+### Newsletter
+
+```
+STRUCTURE:
+  <section>
+    <div> (centered, max-width ~600px)
+      <h3> "Subscribe to our newsletter"
+      <p> Description
+      <form>
+        <div> (input group, flex)
+          <input type="email" placeholder="you@example.com">
+          <button type="submit"> "Subscribe"
+
+STYLING:
+  Input:
+    - Height: 40px
+    - Border: 1px solid #EBEBEB
+    - Border-radius: 6px
+    - Padding: 0 12px
+    - Font: Geist, 14px
+    - Focus: blue ring (--ds-focus-border)
+
+  Submit Button:
+    - Background: #171717
+    - Text: white, 14px, weight 500
+    - Height: 40px
+    - Border-radius: 6px
+    - Padding: 0 16px
+
+SPACING:
+  - Section padding: 64px 0
+  - Heading to description: 8px
+  - Description to form: 24px
+  - Input to button gap: 8px
+```
+
+### Contact
+
+```
+STRUCTURE:
+  <section>
+    <div> (2-column layout)
+      <div> (left — info):
+        <h2> "Contact Sales"
+        <p> Description
+        <ul> Contact benefits list
+      <div> (right — form):
+        <form>
+          <div> (form fields, vertical stack)
+            <label> + <input> (First name, Last name, Email, Company, etc.)
+            <label> + <textarea> Message
+          <button type="submit"> "Submit"
+
+STYLING:
+  Form fields follow standard input pattern:
+    - Height: 40px
+    - Border: 1px solid #EBEBEB
+    - Border-radius: 6px
+    - Label: 14px, weight 500, #171717, margin-bottom 6px
+    - Textarea: min-height 120px
+
+SPACING:
+  - Section padding: 96px 0
+  - Column gap: 64px
+  - Field gap: 16px
+  - Label to input: 6px
+```
+
+### Comparison
+
+```
+STRUCTURE:
+  <section>
+    <h2> Section heading
+    <div> (comparison table or card grid)
+      <table> or <div grid>:
+        <thead> Feature headers
+        <tbody> Feature rows with check/x icons per column
+
+STYLING:
+  Table:
+    - Header: 14px, weight 500, #171717
+    - Cells: 14px, weight 400, #4D4D4D
+    - Check icon: #0070F3 (blue) or #171717
+    - X / dash icon: #CCCCCC
+    - Row border-bottom: 1px solid rgba(0,0,0,0.08)
+    - Cell padding: 16px
+
+SPACING:
+  - Section padding: 96px 0
+  - Table max-width: 900px, centered
+```
+
+### Downloads / Store / About
+
+```
+NOTE: Vercel does not have dedicated Downloads, Store, or About sections
+on the homepage. These would follow the standard Vercel card pattern:
+
+Card Pattern:
+  - Background: white
+  - Border: 1px solid rgba(0,0,0,0.08)
+  - Border-radius: 8px
+  - Padding: 24px
+  - Shadow: var(--ds-shadow-border-small)
+  - Hover: shadow elevates to var(--ds-shadow-border-medium)
+
+Page-level layout:
+  - Max-width: 1200px (--geist-page-width)
+  - Page margin: 24px
+  - Section padding: 96px 0
+```