glyph-ai 0.1.0

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

@@ -0,0 +1,592 @@
+# Stripe.com Design System & Section Boilerplate
+
+---
+
+## Design System
+
+### Colors
+
+| Role | Value | RGB | Notes |
+|------|-------|-----|-------|
+| **Primary** | `#533AFD` | `rgb(83, 58, 253)` | Stripe purple/indigo. Primary CTA, links, interactive elements |
+| **Secondary** | `#061B31` | `rgb(6, 27, 49)` | Dark navy. Headings, body text, nav text |
+| **Tertiary (Accent)** | `#FF6118` | `rgb(255, 97, 24)` | Warm orange. Accent highlights, decorative elements |
+| **Neutral 100** | `#FFFFFF` | `rgb(255, 255, 255)` | Pure white. Page background, card surfaces |
+| **Neutral 200** | `#F8FAFD` | `rgb(248, 250, 253)` | Off-white/ice blue. Alternate section backgrounds, footer |
+| **Neutral 300** | `#ECF0F4` | `rgb(236, 240, 244)` | Light cool gray. Subtle borders, dividers |
+| **Neutral 400** | `#E5EDF5` | `rgb(229, 237, 245)` | Light blue-gray. Card backgrounds |
+| **Neutral 500** | `#7D8BA4` | `rgb(125, 139, 164)` | Mid gray. Muted text, captions |
+| **Neutral 600** | `#64748D` | `rgb(100, 116, 141)` | Body secondary text |
+| **Neutral 700** | `#50617A` | `rgb(80, 97, 122)` | Body text (muted) |
+| **Neutral 800** | `#3C4F69` | `rgb(60, 79, 105)` | Dark secondary text |
+| **Neutral 900** | `#1A2C44` | `rgb(26, 44, 68)` | Near-black text |
+| **Purple Light** | `#E8E9FF` | `rgb(232, 233, 255)` | Light purple. Toggle background, pill badges |
+| **Purple Mid** | `#7F7DFC` | `rgb(127, 125, 252)` | Mid purple. Accent borders, decorative |
+| **Purple Border** | `#D6D9FC` | `rgb(214, 217, 252)` | Light purple border for outline buttons |
+| **Purple Hover** | `#B9B9F9` | `rgb(185, 185, 249)` | Outline button hover/active border |
+| **Dark Section** | `#0D1738` | `rgb(13, 23, 56)` | Deep navy. Dark section background |
+| **Dark Section Alt** | `#322A42` | `rgb(50, 42, 66)` | Dark purple-gray. Code section accents |
+| **Green Accent** | `#00D66F` | `rgb(0, 214, 111)` | Success/positive indicators |
+| **Blue Link (Dark)** | `#7389FF` | `rgb(115, 137, 255)` | Links on dark backgrounds |
+| **Blue Accent** | `#2863B1` | `rgb(40, 99, 177)` | Informational blue accents |
+| **Hero Gradient** | Multi-stop | — | Vivid gradient: orange, pink, magenta, purple wash over white. Creates distinctive brand warmth. Top-right corner of hero |
+
+### Typography
+
+#### Font Families
+
+| Role | Font | Fallback | Usage |
+|------|------|----------|-------|
+| **Primary** | `sohne-var` | `"SF Pro Display", sans-serif` | All headings, body text, buttons, labels, nav — single font system |
+
+#### Type Scale
+
+| Element | Size | Weight | Line Height | Letter Spacing | Color |
+|---------|------|--------|-------------|----------------|-------|
+| **H1 (Hero)** | 48px | 300 (Light) | 55.2px (1.15) | -0.96px | `#061B31` (dark navy) |
+| **H2 (Display)** | 56px | 300 (Light) | 57.68px (1.03) | -1.4px | `#061B31` |
+| **H2 (Section)** | 32px | 300 (Light) | 35.2px (1.1) | -0.64px | `#061B31` |
+| **H3 (Card)** | 25px | 300 (Light) | 27.8px (1.12) | -0.25px | `#061B31` |
+| **H4 (Stat/Small)** | 22px | 300 (Light) | — | — | `#061B31` |
+| **Body (Default)** | 16px | 400 (Regular) | 16px | 0px | `#061B31` |
+| **Body (Small)** | 14px | 400 (Regular) | 14px | 0px | `#061B31` |
+| **Label / Nav** | 14px | 400 (Regular) | 14px | 0px | `#061B31` |
+| **Caption** | 12px | 400 (Regular) | — | — | `#64748D` |
+| **Overline** | 11px | 400 (Regular) | — | — | `#64748D` |
+
+**Key pattern:** Stripe uses exclusively `font-weight: 300` (Light) for all headings — never bold. Body text uses `400` (Regular). The overall feel is airy and refined.
+
+### Buttons
+
+#### Primary Button (CTA)
+
+```
+Background:    #533AFD (Stripe purple)
+Text color:    #FFFFFF (white)
+Font:          sohne-var, 16px, weight 400
+Padding:       15.5px 24px 16.5px (slightly asymmetric vertical)
+Border radius: 4px (subtle rounding — NOT pill)
+Border:        none
+Hover:         Slight darkening of background
+Icon:          Right-pointing chevron/arrow (›) appended inline
+```
+
+#### Secondary Button (Outline)
+
+```
+Background:    transparent (rgba(255,255,255,0))
+Text color:    #533AFD (Stripe purple)
+Font:          sohne-var, 16px, weight 400
+Padding:       14.5px 24px 15.5px
+Border radius: 4px
+Border:        1px solid #B9B9F9 (light purple)
+Hover:         Border darkens to #D6D9FC, subtle bg fill
+```
+
+#### Ghost/Text Link Button
+
+```
+Background:    transparent
+Text color:    #533AFD (Stripe purple)
+Font:          sohne-var, 16px, weight 400
+Padding:       0
+Border:        none
+Decoration:    Arrow icon (→) appended on hover
+Hover:         Underline or arrow animation
+```
+
+#### Nav Button (Contact sales — header)
+
+```
+Background:    #533AFD (Stripe purple)
+Text color:    #FFFFFF (white)
+Font:          sohne-var, 14px, weight 400
+Padding:       ~12px 20px
+Border radius: 4px
+```
+
+#### Nav Button (Sign in — header)
+
+```
+Background:    transparent
+Text color:    #533AFD (Stripe purple)
+Font:          sohne-var, 14px, weight 400
+Padding:       ~12px 20px
+Border:        1px solid #D6D9FC (light purple border)
+Border radius: 4px
+```
+
+#### Dark Section Primary Button
+
+```
+Background:    #533AFD (Stripe purple)
+Text color:    #FFFFFF (white)
+Padding:       15.5px 24px 16.5px
+Border radius: 4px
+```
+
+#### Dark Section Secondary Button
+
+```
+Background:    transparent
+Text color:    #FFFFFF (white)
+Border:        1px solid rgba(83, 58, 253, 0.7)
+Padding:       14.5px 24px 15.5px
+Border radius: 4px
+```
+
+### Input Fields
+
+```
+Background:    #FFFFFF
+Border:        1px solid #ECF0F4
+Border radius: 4px
+Padding:       12px 16px
+Font:          sohne-var, 16px, weight 400
+Color:         #061B31
+Placeholder:   #7D8BA4
+Focus border:  #533AFD
+```
+
+### Spacing
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| **Container max-width** | 1266px | All section inner containers |
+| **Container padding** | 0 16px | Outer section horizontal padding |
+| **Section padding (large)** | 96px 16px | Hero, stats, CTA sections |
+| **Section padding (medium)** | 80px 16px | Features, social proof, blog sections |
+| **Section padding (small)** | 36px 16px | Compact sections (logo bar) |
+| **Nav height** | 64px | Navigation bar total height |
+| **Nav padding** | 10px 16px | Inner nav padding |
+| **Banner height** | 76px | Full header/banner height |
+| **Button padding** | 15.5px 24px 16.5px | Standard button vertical/horizontal |
+| **Card gap** | 16–24px | Between feature cards |
+| **Grid columns** | 2–6 col responsive | Feature cards, footer columns |
+
+### Border Radius
+
+| Element | Radius |
+|---------|--------|
+| Buttons | 4px |
+| Cards | 8–12px |
+| Input fields | 4px |
+| Toggle pills | 6px |
+| Images/media | 8–12px |
+
+---
+
+## Section Boilerplates
+
+### Navigation
+
+```
+STRUCTURE:
+├── <header> (banner role, height: 76px, position: sticky top, bg: rgba(255,255,255,0.8), backdrop-filter: blur)
+│   ├── <nav> (height: 64px, padding: 10px 16px, max-width: 1266px, margin: 0 auto)
+│   │   ├── Logo (Stripe wordmark SVG, left-aligned, links to /)
+│   │   ├── Primary Nav Links (horizontal list, center-left)
+│   │   │   ├── "Products" (button + chevron-down icon, opens mega-menu on hover)
+│   │   │   ├── "Solutions" (button + chevron-down icon, opens mega-menu on hover)
+│   │   │   ├── "Developers" (button + chevron-down icon, opens mega-menu on hover)
+│   │   │   ├── "Resources" (button + chevron-down icon, opens mega-menu on hover)
+│   │   │   └── "Pricing" (plain link, no dropdown)
+│   │   └── Right Actions (horizontal list, right-aligned)
+│   │       ├── "Sign in" (outline button, links to dashboard)
+│   │       └── "Contact sales" (primary filled button with arrow icon)
+
+INTERACTIONS:
+- Dropdown trigger: hover on nav button opens full-width mega-menu panel
+- Mega-menu animates in with a smooth slide-down + fade (approx 200ms ease)
+- Active nav item gets a subtle underline/highlight
+- Menu panel: full-viewport-width, white background, sits below nav bar
+- Panel has 4-column grid layout with section headings
+- Each menu item has: Title (purple link color) + Description (gray subtitle)
+- Hovering between different nav buttons smoothly transitions between panels
+- Clicking outside or moving mouse away closes the panel
+
+PRODUCTS MEGA-MENU (4 columns):
+  Column 1 — "Payments": Payments, Managed Payments, Payment Links, Checkout, Elements, Payment methods, Terminal, Radar, Authorization Boost, Link
+  Column 2 — "Revenue": Billing, Usage-based billing, Invoicing, Tax, Revenue Recognition, Stripe Sigma, Data Pipeline
+  Column 3 — "Money Management": Financial Accounts, Global Payouts, Capital, Crypto
+  Column 4 — "Platforms and marketplaces": Connect, Capital for platforms, Financial Accounts for platforms, Issuing
+  Bottom row — "More": Atlas, Climate, Identity, Financial Connections + promo card (Sessions conference CTA)
+
+SOLUTIONS MEGA-MENU (4 columns):
+  Column 1 — "By stage": Enterprises, Startups
+  Column 2 — "By use case": Agentic commerce, Crypto, Ecommerce, Embedded finance, Finance automation, Global businesses, In-app payments, Marketplaces, Platforms, SaaS
+  Column 3 — "By industry": AI companies, Creator economy, Hospitality/travel/leisure, Insurance, Media/entertainment, Nonprofits, Retail
+  Column 4 — "Ecosystem": Partners, Stripe App Marketplace
+
+DEVELOPERS MEGA-MENU (3 columns):
+  Column 1 — "Documentation": Stripe docs, API reference, Libraries and SDKs, Stripe Apps
+  Column 2 — "Guides": Accept online payments, Implement a prebuilt checkout, Build a platform or marketplace, Manage subscriptions, Offer usage-based billing, Issue stablecoin-backed cards
+  Column 3 — "Resources": App integrations, Code samples, Developer blog, API status
+
+RESOURCES MEGA-MENU (4 columns):
+  Column 1 — "Learn": Blog, Customer stories, Guides
+  Column 2 — "Support": Get support, Managed support plans, Professional services
+  Column 3 — "Company": Sessions annual conference, Jobs, Newsroom, Stripe Press
+  Column 4 — "Contact": Contact sales, Become a partner
+
+STYLING:
+- Nav text: sohne-var, 14px, weight 400, color #061B31
+- Chevron icon: small downward-pointing arrow, rotates up when expanded
+- Mega-menu heading: bold weight, dark navy, small uppercase
+- Mega-menu link title: purple (#533AFD), 14px
+- Mega-menu description: gray (#64748D), 12–13px
+- Gap between menu items: ~12px vertical
+- Panel padding: ~40px 48px
+```
+
+### Hero
+
+```
+STRUCTURE:
+├── <section> (bg: white, padding: 0 16px, full-viewport height ~90vh)
+│   ├── Container (max-width: 1266px, padding: 36px 16px)
+│   │   ├── Stat Line (small text, top of hero)
+│   │   │   └── "Global GDP running on Stripe: 1.62%" (14px, gray, live-updating counter animation)
+│   │   ├── H1 Headline (48px, font-weight 300, letter-spacing -0.96px, line-height 55.2px)
+│   │   │   └── "Financial infrastructure to grow your revenue. Accept payments, offer financial services, and implement custom revenue models—from your first transaction to your billionth."
+│   │   │   └── NOTE: Text uses animated color effect — characters shift through gradient colors (green → blue → purple → muted) as they enter view
+│   │   ├── CTA Group (flex row, gap: 12px, margin-top: ~32px)
+│   │   │   ├── Primary CTA: "Get started ›" (purple filled button)
+│   │   │   └── Secondary CTA: "Sign up with Google" (outline button with Google icon)
+│   │   └── Background Gradient (absolute positioned, top-right)
+│   │       └── Vivid flowing gradient: orange → pink → magenta → purple wash. Abstract organic shape covering ~60% of hero right side
+
+BELOW HERO (logo ticker bar):
+├── Logo Bar (full-width, light gray border top/bottom, padding: 16px 0)
+│   └── Horizontal scrolling row of enterprise logos (auto-rotating)
+│       └── Anthropic, Lightspeed, Cursor, OpenAI, Amazon, NVIDIA, Ford, Coinbase, Google, Shopify, Mindbody, MetLife, Ramp, Marriott, Figma, Woo...
+
+STYLING:
+- Hero background: white with vibrant abstract gradient (CSS/SVG) on right side
+- Headline text animation: characters animate color from vivid to muted navy as user scrolls
+- Stat counter: subtle monospace-style number incrementing in real-time
+- Logo bar logos: grayscale, ~32px height, evenly spaced, infinite horizontal scroll
+```
+
+### Social Proof (Logo Bar)
+
+```
+STRUCTURE:
+├── <div> (full-width strip, border-top: 1px solid #ECF0F4, border-bottom: same)
+│   ├── Logo Row (flex, justify-content: space-around, align-items: center, padding: 16px 0)
+│   │   └── 6–8 enterprise logos visible at once, auto-scrolling carousel
+│   │   └── Logos: grayscale, max-height ~32px, opacity ~0.7
+
+STYLING:
+- Background: white
+- Logos alternate on a timer (different sets rotate in)
+- No headings or text — logos only
+- Horizontal auto-scroll with seamless loop
+```
+
+### Features
+
+```
+STRUCTURE:
+├── <section> (bg: white, padding: 0 16px)
+│   ├── Container (max-width: 1266px, padding: 80px 16px)
+│   │   ├── Section Header
+│   │   │   ├── H2 (32px, weight 300, letter-spacing -0.64px)
+│   │   │   │   └── "Flexible solutions for every business model."
+│   │   │   └── Subtitle (16px, weight 400, color: #64748D, max-width: ~600px)
+│   │   │       └── "Grow your business with a comprehensive set of payments and financial tools..."
+│   │   ├── Tab/Toggle Bar (optional — pill-shaped toggle group)
+│   │   │   └── Toggle pills with rounded bg (#E8E9FF), 6px radius, switch between feature views
+│   │   └── Feature Cards Grid (2–3 column grid, gap: 16–24px)
+│   │       ├── Feature Card (repeated)
+│   │       │   ├── Card Container (bg: #F8FAFD or white, border-radius: 12px, padding: 32px, border: 1px solid #ECF0F4)
+│   │       │   ├── Icon/Illustration (product screenshot or abstract visual, top of card)
+│   │       │   ├── H3 Title (25px, weight 300, color: #061B31)
+│   │       │   │   └── e.g. "Accept and optimize payments globally—online and in person"
+│   │       │   ├── Body Text (16px, color: #64748D)
+│   │       │   └── Link (purple text link with arrow → )
+│   │       └── ... (6 cards for Stripe: Payments, Billing, Agentic Commerce, Issuing, Crypto, Connect)
+
+STYLING:
+- Cards have subtle box-shadow or border, not heavy elevation
+- Illustrations/screenshots are inline within the card, not overlapping
+- Card hover: subtle elevation increase or border color change
+- Section uses alternating card sizes (1 large + 2 small per row, or 3 equal)
+```
+
+### Stats
+
+```
+STRUCTURE:
+├── <section> (bg: white, padding: 0 16px, class: stats-section)
+│   ├── Background (gradient purple/blue dusk sky illustration, full-width behind stats)
+│   ├── Container (max-width: 1266px, padding: 96px 16px)
+│   │   ├── H2 (56px, weight 300, letter-spacing -1.4px, color: #061B31)
+│   │   │   └── "The backbone of global commerce"
+│   │   └── Stats Row (flex row, 3 columns, gap: 48px)
+│   │       ├── Stat Item
+│   │       │   ├── Large Number (48–56px, weight 300, color: #061B31)
+│   │       │   │   └── "135+"
+│   │       │   └── Description (14–16px, color: #64748D)
+│   │       │       └── "currencies and payment methods supported"
+│   │       ├── Stat Item
+│   │       │   ├── "$1.9T"
+│   │       │   └── "in payments volume processed in 2025"
+│   │       └── Stat Item
+│   │           ├── "99.999%"
+│   │           └── "historical uptime for Stripe services" (links to status page)
+
+STYLING:
+- Background: subtle gradient illustration behind numbers (purple-blue dusk sky aesthetic)
+- Numbers: very large, light weight, commanding presence
+- Descriptions: smaller, muted gray, directly below number
+- Equal column widths
+- No cards/borders — open layout
+```
+
+### Showcase (Customer Stories / Social Proof)
+
+```
+STRUCTURE:
+├── <section> (bg: white, padding: 0 16px)
+│   ├── Container (max-width: 1266px, padding: 80px 16px)
+│   │   ├── Section Header
+│   │   │   ├── H2 (32px, weight 300)
+│   │   │   │   └── "Powering businesses of all sizes."
+│   │   │   └── Subtitle (16px, color: #64748D)
+│   │   │       └── "Run your business on a reliable platform that adapts to your needs."
+│   │   ├── Enterprise CTA Block
+│   │   │   ├── H3 (25px, weight 300)
+│   │   │   │   └── "Transform your enterprise with agile financial infrastructure"
+│   │   │   ├── Body (16px) — "50% of Fortune 100 companies have used Stripe..."
+│   │   │   └── Primary CTA button: "Stripe for enterprises"
+│   │   └── Customer Story Cards (horizontal scrolling carousel or grid)
+│   │       ├── Story Card (repeated, 3–4 visible)
+│   │       │   ├── Company Logo (top, within card)
+│   │       │   ├── Stat Highlights (large numbers: "160 countries", "11K+ employees")
+│   │       │   ├── H3 Title (25px, weight 300)
+│   │       │   │   └── "Hertz unifies commerce with Stripe."
+│   │       │   ├── Products Used Tags (small pills: "5+ products")
+│   │       │   └── CTA: "Read the story" (outline button)
+│   │       └── Cards: Hertz, URBN, Instacart, Le Monde
+
+STYLING:
+- Cards: white bg with subtle border (#ECF0F4), border-radius: 12px
+- Card CTA: outline style button (1px solid #B9B9F9, purple text)
+- Horizontal scroll or 2x2 grid depending on viewport
+- Company logos displayed prominently at top of each card
+```
+
+### How It Works (Developer/Infrastructure Section)
+
+```
+STRUCTURE:
+├── <section> (bg: #0D1738 dark navy, padding: 0 16px, dark mode)
+│   ├── Container (max-width: 1266px, padding: 80px 16px)
+│   │   ├── Section Header
+│   │   │   ├── H2 (32–56px, weight 300, color: white)
+│   │   │   │   └── "Reliable, extensible infrastructure for every stack."
+│   │   │   └── Subtitle (16px, color: rgba(255,255,255,0.7))
+│   │   │       └── "Adapt Stripe to your business needs with flexible integration options."
+│   │   ├── CTA Group (flex row, gap: 12px)
+│   │   │   ├── Primary: "View developer docs" (purple bg, white text)
+│   │   │   └── Secondary: "View Stripe's GitHub" (transparent bg, white text, purple border)
+│   │   ├── Feature Blocks (2-column layout)
+│   │   │   ├── Block 1
+│   │   │   │   ├── H3 (white text, weight 300)
+│   │   │   │   │   └── "Connect to existing systems."
+│   │   │   │   ├── Body (muted white text)
+│   │   │   │   └── Text Links: "Explore no-code →", "See directory →" (color: #7389FF)
+│   │   │   └── Block 2
+│   │   │       ├── H3: "Scale with confidence."
+│   │   │       ├── Body text
+│   │   │       └── Link: "Get started →"
+│   │   └── Stats Row (3-column, within dark section)
+│   │       ├── "500M+" — "API requests per day"
+│   │       ├── "10K+" — "API requests per second"
+│   │       └── "150K+" — "transactions per minute"
+
+STYLING:
+- Dark navy background (#0D1738)
+- All text: white or light blue (#7389FF for links)
+- Code block visual element may appear (syntax-highlighted snippet)
+- Stats: large white numbers, smaller muted descriptions
+- Links use arrow (→) suffix, color #7389FF
+```
+
+### Blog / What's Happening
+
+```
+STRUCTURE:
+├── <section> (bg: white, padding: 0 16px)
+│   ├── Container (max-width: 1266px, padding: 80px 16px 0)
+│   │   ├── Section Header
+│   │   │   ├── H2 (32px, weight 300)
+│   │   │   │   └── "What's happening"
+│   │   │   └── Subtitle (16px, color: #64748D)
+│   │   │       └── "See the latest from Stripe."
+│   │   ├── Featured Content Grid (2-column or 3-column)
+│   │   │   ├── Content Card (repeated, 6–8 cards)
+│   │   │   │   ├── Thumbnail Image (top, border-radius: 8px, aspect-ratio: ~16:9)
+│   │   │   │   ├── Category/Label (small, uppercase or muted)
+│   │   │   │   ├── Title (18–22px, weight 300, color: #061B31)
+│   │   │   │   └── CTA: "Read the letter" / "See the numbers" / "Watch video" (outline button)
+│   │   │   └── Cards link to: annual updates, BFCM data, SaaS benchmarks, YouTube, blog posts
+│   │   └── Book of the Week Sidebar
+│   │       ├── H3: "Book of the week"
+│   │       ├── H4: Book title
+│   │       ├── Description paragraph
+│   │       └── "Stripe Press" link
+
+STYLING:
+- Cards: minimal, no heavy borders — thumbnail + text stacked
+- CTA buttons: outline style (1px solid #B9B9F9)
+- Thumbnails may include colored overlays or illustrations
+- Grid layout shifts between 2-col and 3-col at breakpoints
+```
+
+### CTA (Bottom Call-to-Action)
+
+```
+STRUCTURE:
+├── <section> (bg: #F8FAFD light gray, padding: 0 16px)
+│   ├── Container (max-width: 1266px, padding: 96px 16px 48px)
+│   │   ├── Intro Text (16px, color: #061B31)
+│   │   │   └── "Create an account instantly, or contact us to design a custom package for your business."
+│   │   ├── Two-Column Layout (flex row, gap: 48px)
+│   │   │   ├── Column 1 — Pricing CTA
+│   │   │   │   ├── H4 (22px, weight 300): "See what you'll pay"
+│   │   │   │   ├── Body (16px): "Integrated per-transaction pricing with no hidden fees."
+│   │   │   │   └── Text Link: "Pricing details →" (purple text link with arrow)
+│   │   │   └── Column 2 — Getting Started CTA
+│   │   │       ├── H4 (22px, weight 300): "Start building"
+│   │   │       ├── Body (16px): "Get up and running with Stripe in as little as 10 minutes."
+│   │   │       └── Text Link: "Integration options →" (purple text link with arrow)
+│   │   └── Button Group (flex row, gap: 12px, margin-top: 24px)
+│   │       ├── Primary: "Start now" (purple filled button)
+│   │       └── Secondary: "Contact sales" (outline button)
+
+STYLING:
+- Light gray background distinguishes from white content sections
+- Clean, minimal layout — no images or illustrations
+- Two balanced columns with clear value propositions
+- Final CTA before footer
+```
+
+### Footer
+
+```
+STRUCTURE:
+├── <footer> (bg: #F8FAFD light gray, padding: 0 16px)
+│   ├── Container (max-width: 1266px, margin: 0 auto)
+│   │   ├── Links Grid (4-column layout, padding: 48px 0)
+│   │   │   ├── Column 1 — "Products and pricing"
+│   │   │   │   ├── Heading: "Products and pricing" (span, bold, 12px uppercase)
+│   │   │   │   └── Links: Pricing, Atlas, Authorization Boost, Billing, Capital, Capital for platforms, Checkout, Climate, Connect, Crypto, Data Pipeline, Elements, Financial Accounts, Financial Accounts for platforms, Financial Connections, Global Payouts, Identity, Invoicing, Issuing, Link, Managed Payments, Payments, Payment Links, Payment methods, Radar, Revenue Recognition, Stripe Sigma, Tax, Terminal, Usage-based billing
+│   │   │   ├── Column 2 — "Solutions" + "Developers"
+│   │   │   │   ├── Heading: "Solutions"
+│   │   │   │   ├── Links: Enterprises, Startups, Agentic commerce, Crypto, Ecommerce, Embedded finance, Finance automation, Global businesses, In-app payments, Marketplaces, Platforms, SaaS, AI companies, Creator economy, Hospitality/travel/leisure, Insurance, Media/entertainment, Nonprofits, Retail
+│   │   │   │   ├── Heading: "Developers"
+│   │   │   │   └── Links: Documentation, API reference, API status, API changelog, Libraries and SDKs, Developer blog
+│   │   │   ├── Column 3 — "Integrations and custom solutions" + "Resources"
+│   │   │   │   ├── Heading: "Integrations and custom solutions"
+│   │   │   │   ├── Links: Stripe App Marketplace, Stripe Partner ecosystem, Professional services
+│   │   │   │   ├── Heading: "Resources"
+│   │   │   │   └── Links: Guides, Customer stories, Blog, Sessions annual conference, Privacy and terms, Prohibited and restricted businesses, Licenses, Sitemap, Cookie settings, Your privacy choices, More resources
+│   │   │   └── Column 4 — "Company" + "Support"
+│   │   │       ├── Heading: "Company"
+│   │   │       ├── Links: Jobs, Newsroom, Stripe Press, Contact sales
+│   │   │       ├── Heading: "Support"
+│   │   │       ├── Links: Get support, Managed support plans
+│   │   │       ├── Phone: "CA residents: +1 888 926 2289"
+│   │   │       └── "Sign in ›" (callout link, purple with arrow)
+│   │   └── Bottom Bar (border-top: 1px solid #ECF0F4, padding: 24px 0)
+│   │       ├── Left: Globe icon + "United States (English)" (locale selector)
+│   │       └── Left: "© 2026 Stripe, LLC."
+
+STYLING:
+- Column headings: small, bold, dark navy, ~12px, may be uppercase
+- Links: 14px, weight 400, color #64748D (muted), hover → #061B31
+- Line-height between links: ~32px (generous spacing)
+- "Sign in ›" is a callout-style link (purple with arrow, stands out)
+- No social media icons in footer (Stripe omits these)
+- Clean, text-only footer — no decorative elements
+```
+
+### Pricing (Referenced on page)
+
+```
+STRUCTURE:
+├── <section> (bg: #F8FAFD)
+│   ├── Container (max-width: 1266px)
+│   │   ├── H4 (22px, weight 300): "See what you'll pay"
+│   │   ├── Body: "Integrated per-transaction pricing with no hidden fees."
+│   │   ├── Text Link: "Pricing details →"
+│   │   └── CTA: "Start now" (primary button)
+
+NOTE: Full pricing page at /pricing — homepage only includes a pricing teaser within the CTA section. Structure above represents the homepage pricing module.
+```
+
+### Contact (Referenced on page)
+
+```
+STRUCTURE:
+├── Accessible via nav "Contact sales" button and footer link
+│   ├── Primary CTA button in nav: "Contact sales ›" (purple filled, 14px)
+│   ├── Outline CTA in CTA section: "Contact sales" (outline button)
+│   └── Footer link: "Contact sales" (text link)
+│   └── Phone number in footer: "CA residents: +1 888 926 2289"
+
+NOTE: Contact is distributed across sections rather than a standalone section on the homepage. The /contact/sales page has a dedicated form.
+```
+
+### Newsletter
+
+```
+NOTE: Stripe's homepage does not include a standalone newsletter signup section. Email capture is handled through the account registration flow ("Get started" → dashboard.stripe.com/register) and the "Sign up with Google" OAuth flow.
+```
+
+### FAQ
+
+```
+NOTE: Stripe's homepage does not include an FAQ section. FAQ content lives on individual product pages and the support site (support.stripe.com).
+```
+
+### About
+
+```
+NOTE: No dedicated "About" section on the homepage. Company information is distributed through the Resources mega-menu (Jobs, Newsroom, Stripe Press) and footer (Company column).
+```
+
+### Comparison
+
+```
+NOTE: No comparison section on the Stripe homepage. Competitive positioning is handled through the enterprise page (/enterprise) and individual product pages.
+```
+
+### Downloads
+
+```
+NOTE: No downloads section on the Stripe homepage. SDKs and libraries are accessed through the Developers mega-menu and docs.stripe.com.
+```
+
+### Store
+
+```
+NOTE: No store section on the Stripe homepage. Stripe Press (press.stripe.com) serves as their book/publication store, linked from the footer.
+```
+
+---
+
+## Design Principles Summary
+
+1. **Single typeface system** — `sohne-var` handles everything. No secondary font needed.
+2. **Light weight headings** — All headings use `font-weight: 300`. Never bold. Creates an elegant, airy feel.
+3. **Tight letter-spacing on headings** — Negative letter-spacing (-0.64px to -1.4px) on all headings larger than 24px.
+4. **Purple as the single accent** — `#533AFD` is the only interactive color. Links, buttons, CTAs all use this one purple.
+5. **Minimal border-radius** — 4px for buttons/inputs, 8–12px for cards. No pills except toggle switches.
+6. **White-dominant with ice-blue accents** — Backgrounds alternate between pure white and #F8FAFD (barely-there blue-gray).
+7. **Dark section for developer content** — One dark navy (#0D1738) section breaks up the page for technical/infrastructure content.
+8. **Gradient as brand signature** — The hero gradient (orange → pink → magenta → purple) is the primary visual differentiator. Abstract, flowing, organic.
+9. **Asymmetric button padding** — Vertical padding is intentionally asymmetric (15.5px top, 16.5px bottom) for optical alignment.
+10. **Arrow iconography** — CTAs consistently append a right-pointing chevron (›) or arrow (→) to indicate action.