{
  "id": "48e5de76-05d5-4c4e-a269-c7c245b291ec",
  "name": "Stripe",
  "source": "https://styles.refero.design/style/48e5de76-05d5-4c4e-a269-c7c245b291ec",
  "file": "styles/stripe.md",
  "quote": "Architectural blueprint on white marble.",
  "theme": "light",
  "colors": [
    {
      "name": "Midnight Ink",
      "value": "#061b31",
      "token": "--color-midnight-ink",
      "role": "Primary text, critical headings, icons, primary button text for ghost buttons"
    },
    {
      "name": "Slate Blue",
      "value": "#50617a",
      "token": "--color-slate-blue",
      "role": "Secondary text, muted links, subtle borders, descriptive captions"
    },
    {
      "name": "Ghost Gray",
      "value": "#64748d",
      "token": "--color-ghost-gray",
      "role": "Tertiary text, placeholder text, inactive states, subtle dividers"
    },
    {
      "name": "Platinum White",
      "value": "#ffffff",
      "token": "--color-platinum-white",
      "role": "Page backgrounds, card surfaces, primary button text against dark backgrounds"
    },
    {
      "name": "Porcelain White",
      "value": "#f8fafd",
      "token": "--color-porcelain-white",
      "role": "Secondary card surfaces, subtle background variations"
    },
    {
      "name": "Powder Blue",
      "value": "#e5edf5",
      "token": "--color-powder-blue",
      "role": "Background for secondary sections, light card backgrounds"
    },
    {
      "name": "Stone Gray",
      "value": "#d8d6df",
      "token": "--color-stone-gray",
      "role": "Horizontal rules, subtle borders, graphical elements"
    },
    {
      "name": "Deep Violet",
      "value": "#533afd",
      "token": "--color-deep-violet",
      "role": "Primary calls to action (buttons, links), active states, significant icons — establishes brand presence and emphasizes interaction"
    },
    {
      "name": "Washed Violet",
      "value": "#b9b9f9",
      "token": "--color-washed-violet",
      "role": "Border for ghost buttons, subtle accents"
    },
    {
      "name": "Soft Violet",
      "value": "#8087ff",
      "token": "--color-soft-violet",
      "role": "Decorative icons, gradient highlights, sub-brand accents"
    },
    {
      "name": "Accent Green",
      "value": "#81b81a",
      "token": "--color-accent-green",
      "role": "Green outline accent for tags, dividers, and focused UI edges"
    },
    {
      "name": "Vibrant Orange",
      "value": "#ff6118",
      "token": "--color-vibrant-orange",
      "role": "Orange outline accent for tags, dividers, and focused UI edges."
    }
  ],
  "fonts": [
    {
      "name": "sohne",
      "token": "--font-sohne-var",
      "desc": "var — The primary typeface for all content. Weight 300 is used for large, impactful headlines, creating a sense of understated authority rather than shouting. Weight 400 is standard for body text, ensuring clarity and readability. The 'ss01' feature provides alternative character forms, and 'tnum' ensures tabular figures align numerically."
    }
  ],
  "official_url": "https://stripe.com",
  "era": [
    "Modernist information design",
    "Tufte-influenced data visualization",
    "Mid-century corporate identity (Massimo Vignelli)"
  ],
  "mood": [
    "technical",
    "polished",
    "intimate"
  ],
  "density": "medium",
  "signature_move": "Animated gradient mesh aurora runs behind the hero — brand colors signal financial infrastructure as a living, breathing system.",
  "tier": "reference",
  "voice": {
    "persona": "senior developer pair-programming",
    "active_voice_pct": 100,
    "avg_sentence_words": 10.3,
    "uses_second_person": true,
    "google_rubric_score": 88,
    "google_rubric_version": "1.0"
  },
  "grammar": {
    "surface": {
      "ground": "white",
      "radius": "4-6px",
      "borders": "hairline",
      "shadows": "subtle",
      "texture": "mesh",
      "dark_mode": "none"
    },
    "palette": {
      "strategy": "full-spectrum",
      "saturation": "balanced",
      "warmth": "mixed",
      "accent_use": "pervasive",
      "contrast": "high"
    },
    "type": {
      "pairing": "sans/sans",
      "heading_weight": "medium",
      "body_size": "regular",
      "display_scale": "balanced",
      "tracking": "normal"
    },
    "emphasis": {
      "mechanism": "color",
      "cta_treatment": "filled-gradient",
      "density_signals": "grouping-cards"
    },
    "whitespace": {
      "discipline": "medium",
      "section_gap": "balanced",
      "element_gap": "medium"
    },
    "voice": {
      "archetype": "engineer",
      "formality": "conversational",
      "hedging": "low",
      "sentence_length": "balanced"
    },
    "motion": {
      "budget": "pervasive",
      "character": "smooth",
      "trigger": "autonomous"
    },
    "imagery": {
      "strategy": "abstract"
    }
  },
  "has_screenshot": true,
  "has_video": true,
  "video_filename": "stripe.mp4",
  "has_favicon": true,
  "generated_at": "2026-05-03",
  "render_tokens": {
    "bg": "#ffffff",
    "fg": "#061b31",
    "accent": "#64748d",
    "font": "system-ui, sans-serif",
    "theme": "light"
  },
  "trending_score": 5.38,
  "popular_score": 1.88,
  "codes": {
    "design_md": "# Stripe — Style Reference\n> Architectural blueprint on white marble.\n\n**Theme:** light\n\nStripe's design system evokes a digital command center on a clean canvas. It combines a serene white background with structured grid layouts and a single vibrant violet to highlight actions and key information. Subtle shadows provide soft elevation, preventing elements from feeling flat, while compact typography paired with highly descriptive gradients for hero sections and product showcases adds visual depth without clutter. The overall effect is one of quiet efficiency, where information is paramount, and interactions are clearly signposted.\n\n## Tokens — Colors\n\n| Name | Value | Token | Role |\n|------|-------|-------|------|\n| Midnight Ink | `#061b31` | `--color-midnight-ink` | Primary text, critical headings, icons, primary button text for ghost buttons |\n| Slate Blue | `#50617a` | `--color-slate-blue` | Secondary text, muted links, subtle borders, descriptive captions |\n| Ghost Gray | `#64748d` | `--color-ghost-gray` | Tertiary text, placeholder text, inactive states, subtle dividers |\n| Platinum White | `#ffffff` | `--color-platinum-white` | Page backgrounds, card surfaces, primary button text against dark backgrounds |\n| Porcelain White | `#f8fafd` | `--color-porcelain-white` | Secondary card surfaces, subtle background variations |\n| Powder Blue | `#e5edf5` | `--color-powder-blue` | Background for secondary sections, light card backgrounds |\n| Stone Gray | `#d8d6df` | `--color-stone-gray` | Horizontal rules, subtle borders, graphical elements |\n| Deep Violet | `#533afd` | `--color-deep-violet` | Primary calls to action (buttons, links), active states, significant icons — establishes brand presence and emphasizes interaction |\n| Washed Violet | `#b9b9f9` | `--color-washed-violet` | Border for ghost buttons, subtle accents |\n| Soft Violet | `#8087ff` | `--color-soft-violet` | Decorative icons, gradient highlights, sub-brand accents |\n| Accent Green | `#81b81a` | `--color-accent-green` | Green outline accent for tags, dividers, and focused UI edges |\n| Vibrant Orange | `#ff6118` | `--color-vibrant-orange` | Orange outline accent for tags, dividers, and focused UI edges. |\n| Sunburst Gradient | `linear-gradient(90deg, rgb(114, 50, 241) 3.13%, rgb(251, 118, 250) 50%, rgb(255, 207, 94))` | `--color-sunburst-gradient` | Decorative gradients in hero sections and product showcases, adding a dynamic, abstract visual element |\n| Dreamy Gradient | `radial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237, 245) 66%)` | `--color-dreamy-gradient` | Abstract background graphics, product display panels, adding depth and a tech-centric feel |\n| Fuchsia Glow Gradient | `linear-gradient(0deg, rgb(255, 46, 222), rgb(210, 152, 255))` | `--color-fuchsia-glow-gradient` | Decorative illustration elements, feature highlights |\n\n## Tokens — Typography\n\n### sohne-var — The primary typeface for all content. Weight 300 is used for large, impactful headlines, creating a sense of understated authority rather than shouting. Weight 400 is standard for body text, ensuring clarity and readability. The 'ss01' feature provides alternative character forms, and 'tnum' ensures tabular figures align numerically. · `--font-sohne-var`\n- **Substitute:** system-ui, sans-serif\n- **Weights:** 300, 400\n- **Sizes:** 8px, 9px, 10px, 11px, 12px, 14px, 16px, 18px, 20px, 22px, 26px, 32px, 34px, 44px, 48px, 56px\n- **Line height:** 0.80, 0.85, 1.00, 1.03, 1.07, 1.10, 1.12, 1.15, 1.20, 1.25, 1.30, 1.33, 1.40, 1.43, 1.45, 1.50\n- **Letter spacing:** -0.0300em at 56px, -0.0250em at 48px, -0.0090em at 18px\n- **OpenType features:** `\"ss01\" on, \"tnum\"`\n- **Role:** The primary typeface for all content. Weight 300 is used for large, impactful headlines, creating a sense of understated authority rather than shouting. Weight 400 is standard for body text, ensuring clarity and readability. The 'ss01' feature provides alternative character forms, and 'tnum' ensures tabular figures align numerically.\n\n### Type Scale\n\n| Role | Size | Line Height | Letter Spacing | Token |\n|------|------|-------------|----------------|-------|\n| caption | 11px | 1.45 | 0.03px | `--text-caption` |\n| body | 14px | 1.4 | 0.003px | `--text-body` |\n| subheading | 18px | 1.25 | -0.009px | `--text-subheading` |\n| heading-sm | 22px | 1.2 | -0.01px | `--text-heading-sm` |\n| heading | 32px | 1.15 | -0.02px | `--text-heading` |\n| heading-lg | 44px | 1.1 | -0.025px | `--text-heading-lg` |\n| display | 56px | 1.07 | -0.03px | `--text-display` |\n\n## Tokens — Spacing & Shapes\n\n**Base unit:** 4px\n\n**Density:** comfortable\n\n### Spacing Scale\n\n| Name | Value | Token |\n|------|-------|-------|\n| 4 | 4px | `--spacing-4` |\n| 8 | 8px | `--spacing-8` |\n| 12 | 12px | `--spacing-12` |\n| 16 | 16px | `--spacing-16` |\n| 20 | 20px | `--spacing-20` |\n| 24 | 24px | `--spacing-24` |\n| 28 | 28px | `--spacing-28` |\n| 32 | 32px | `--spacing-32` |\n| 36 | 36px | `--spacing-36` |\n| 40 | 40px | `--spacing-40` |\n| 48 | 48px | `--spacing-48` |\n| 60 | 60px | `--spacing-60` |\n| 64 | 64px | `--spacing-64` |\n| 80 | 80px | `--spacing-80` |\n| 96 | 96px | `--spacing-96` |\n\n### Border Radius\n\n| Element | Value |\n|---------|-------|\n| tags | 4px |\n| cards | 6px |\n| images | 4px |\n| inputs | 4px |\n| buttons | 4px |\n\n### Shadows\n\n| Name | Value | Token |\n|------|-------|-------|\n| xl | `rgba(0, 0, 0, 0.2) 0px 0px 32px 8px` | `--shadow-xl` |\n| xl-2 | `rgba(50, 50, 93, 0.12) 0px 16px 32px 0px` | `--shadow-xl-2` |\n| xl-3 | `rgba(23, 23, 23, 0.08) 0px 15px 35px 0px` | `--shadow-xl-3` |\n| sm | `rgba(23, 23, 23, 0.06) 0px 3px 6px 0px` | `--shadow-sm` |\n\n### Layout\n\n- **Section gap:** 64px\n- **Card padding:** 12px\n- **Element gap:** 8px\n\n## Components\n\n### Primary Filled Button\n**Role:** Main call to action.\n\nBackground: Deep Violet (#533afd), Text: Platinum White (#ffffff), Border: 4px radius, Padding: 15.5px vertical, 24px horizontal. Sohne-var weight 400.\n\n### Ghost Button\n**Role:** Secondary action. Low visual hierarchy.\n\nBackground: transparent, Text: Midnight Ink (#061b31), Border: 0px, Padding: 12px vertical, 0px horizontal. Sohne-var weight 400.\n\n### Outlined Button\n**Role:** Tertiary action.\n\nBackground: transparent, Text: Deep Violet (#533afd), Border: Washed Violet (#b9b9f9), 4px radius, Padding: 14.5px vertical, 24px horizontal. Sohne-var weight 400.\n\n### Default Card\n**Role:** Content container for features and information.\n\nBackground: Powder Blue (#e5edf5), Border: none, 6px radius, Padding: 12px.\n\n### Feature Card\n**Role:** Highlighting key features or product aspects.\n\nBackground: Porcelain White (#f8fafd), Border: none, 6px radius, Box Shadow: rgba(0, 0, 0, 0.2) 0px 0px 32px 8px. Padding: 12px.\n\n### Primary Navigation Link\n**Role:** Top-level navigation item.\n\nText: Midnight Ink (#061b31), Underline: none on hover, Padding: 0px.\n\n## Do's and Don'ts\n\n### Do\n- Use Platinum White (#ffffff) as the default page background for most sections.\n- Apply Deep Violet (#533afd) specifically for primary interactive elements, ensuring strong visual call to action.\n- Employ sohne-var weight 300 for all display and large heading typography to maintain a refined, impactful presence.\n- Keep card surfaces subtle, using Powder Blue (#e5edf5) or Porcelain White (#f8fafd) with soft 6px rounded corners.\n- Utilize -0.0300em letter-spacing for large text (56px) to maintain a cohesive, modern typographic aesthetic.\n- Implement radial and linear gradients for hero banners and product showcases to add dynamic visual interest without overwhelming the UI.\n- Maintain a clear elementGap of 8px for logical grouping of related UI elements.\n\n### Don't\n- Do not use saturated colors for large areas or text unless they are part of a decorative gradient or a specific accent.\n- Avoid using hard, sharp shadows; prefer soft, diffused shadows like rgba(0, 0, 0, 0.2) 0px 0px 32px 8px for elevation.\n- Do not introduce new font families; sohne-var is the sole typeface for all typographic needs.\n- Refrain from using border radii other than 4px and 6px for interactive components and cards, respectively.\n- Do not use generic blue for links or buttons; Deep Violet (#533afd) is the designated action color.\n- Avoid high-contrast, bold headlines; the system relies on lighter weights (300, 400) even for large text.\n- Do not vary line heights significantly from the established typographic scale; ensure dense, compact text blocks for body copy and tighter leads for headlines.\n\n## Surfaces\n\n| Level | Name | Value | Purpose |\n|-------|------|-------|---------|\n| 0 | Platinum White | `#ffffff` | Primary page background and base canvas. |\n| 1 | Porcelain White | `#f8fafd` | Slightly elevated secondary surfaces, light card backgrounds. |\n| 2 | Powder Blue | `#e5edf5` | Backgrounds for alternating sections or distinct content blocks. |\n\n## Elevation\n\n- **Feature Card:** `rgba(0, 0, 0, 0.2) 0px 0px 32px 8px`\n- **Hovered Card:** `rgba(50, 50, 93, 0.12) 0px 16px 32px 0px`\n\n## Imagery\n\nThe site uses a combination of abstract, vibrant gradients for hero sections and product showcases (e.g., radial-gradient using Deep Violet, pinks, and light blues), and clean, contained product screenshots that are often presented within device mockups. For illustrative purposes, icons are outlined or filled with brand colors, maintaining a minimal yet functional aesthetic. Imagery serves primarily as decorative atmosphere and product showcase, with a lesser emphasis on photography, emphasizing a more technical and abstract visual story.\n\n## Layout\n\nThe page primarily uses a max-width contained layout, though the hero section often employs full-bleed vibrant gradients to establish a dynamic visual anchor. Sections exhibit a comfortable vertical rhythm, with consistent spacing and a blend of centered content stacks and alternating text-left/image-right arrangements. Feature sets are often presented in multi-column card grids, supporting compact information delivery. Navigation is handled by a sticky top bar with clearly defined interactive elements.\n\n## Agent Prompt Guide\n\nQuick Color Reference:\ntext: #061b31\nbackground: #ffffff\nborder: #e5edf5\naccent: #8087ff\nprimary action: #533afd (filled action)\n\nExample Component Prompts:\nCreate a hero section: radial-gradient(circle, rgb(247, 45, 243), rgb(83, 58, 253) 33%, rgb(229, 237, 245) 66%) background. Headline 'La infraestructura financiera' at 56px sohne-var weight 300, #061b31, letter-spacing -0.03em. Primary Filled Button 'Empieza ahora' with #533afd background, #ffffff text, 4px radius, 15.5px 24px padding.\n\nCreate a default card: #e5edf5 background, 6px radius, 12px padding. Title 'Acepta pagos' at 22px sohne-var weight 400, #061b31. Body text 'Ofrece servicios financieros' at 14px sohne-var weight 400, #50617a.\n\nCreate an outlined button: transparent background, #533afd text, #b9b9f9 border with 4px radius, 14.5px 24px padding. Label 'Accede con tu cuenta de Google'.\n\n## Similar Brands\n\n- **Linear** — Shares a sophisticated, modern aesthetic with minimal color, strong typography, and subtle UI elements.\n- **Figma** — Utilizes a clean white workspace, subtle gray scale, and a vibrant primary accent color for actions.\n- **Vercel** — Combines a technical, precise feel with thoughtful spacing, restrained color usage, and abstract background graphics.\n- **Notion** — Employs a content-first approach with a high-contrast text palette, clean surfaces, and minimal decorative elements.\n\n## Quick Start\n\n### CSS Custom Properties\n\n```css\n:root {\n  /* Colors */\n  --color-midnight-ink: #061b31;\n  --color-slate-blue: #50617a;\n  --color-ghost-gray: #64748d;\n  --color-platinum-white: #ffffff;\n  --color-porcelain-white: #f8fafd;\n  --color-powder-blue: #e5edf5;\n  --color-stone-gray: #d8d6df;\n  --color-deep-violet: #533afd;\n  --color-washed-violet: #b9b9f9;\n  --color-soft-violet: #8087ff;\n  --color-accent-green: #81b81a;\n  --color-vibrant-orange: #ff6118;\n  --color-sunburst-gradient: #ffbb00;\n  --gradient-sunburst-gradient: linear-gradient(90deg, rgb(114, 50, 241) 3.13%, rgb(251, 118, 250) 50%, rgb(255, 207, 94));\n  --color-dreamy-gradient: #7f7dc8;\n  --gradient-dreamy-gradient: radial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237, 245) 66%);\n  --color-fuchsia-glow-gradient: #ff2ede;\n  --gradient-fuchsia-glow-gradient: linear-gradient(0deg, rgb(255, 46, 222), rgb(210, 152, 255));\n\n  /* Typography — Font Families */\n  --font-sohne-var: 'sohne-var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n\n  /* Typography — Scale */\n  --text-caption: 11px;\n  --leading-caption: 1.45;\n  --tracking-caption: 0.03px;\n  --text-body: 14px;\n  --leading-body: 1.4;\n  --tracking-body: 0.003px;\n  --text-subheading: 18px;\n  --leading-subheading: 1.25;\n  --tracking-subheading: -0.009px;\n  --text-heading-sm: 22px;\n  --leading-heading-sm: 1.2;\n  --tracking-heading-sm: -0.01px;\n  --text-heading: 32px;\n  --leading-heading: 1.15;\n  --tracking-heading: -0.02px;\n  --text-heading-lg: 44px;\n  --leading-heading-lg: 1.1;\n  --tracking-heading-lg: -0.025px;\n  --text-display: 56px;\n  --leading-display: 1.07;\n  --tracking-display: -0.03px;\n\n  /* Typography — Weights */\n  --font-weight-light: 300;\n  --font-weight-regular: 400;\n\n  /* Spacing */\n  --spacing-unit: 4px;\n  --spacing-4: 4px;\n  --spacing-8: 8px;\n  --spacing-12: 12px;\n  --spacing-16: 16px;\n  --spacing-20: 20px;\n  --spacing-24: 24px;\n  --spacing-28: 28px;\n  --spacing-32: 32px;\n  --spacing-36: 36px;\n  --spacing-40: 40px;\n  --spacing-48: 48px;\n  --spacing-60: 60px;\n  --spacing-64: 64px;\n  --spacing-80: 80px;\n  --spacing-96: 96px;\n\n  /* Layout */\n  --section-gap: 64px;\n  --card-padding: 12px;\n  --element-gap: 8px;\n\n  /* Border Radius */\n  --radius-sm: 1px;\n  --radius-md: 4px;\n  --radius-lg: 8px;\n  --radius-2xl: 16px;\n\n  /* Named Radii */\n  --radius-tags: 4px;\n  --radius-cards: 6px;\n  --radius-images: 4px;\n  --radius-inputs: 4px;\n  --radius-buttons: 4px;\n\n  /* Shadows */\n  --shadow-xl: rgba(0, 0, 0, 0.2) 0px 0px 32px 8px;\n  --shadow-xl-2: rgba(50, 50, 93, 0.12) 0px 16px 32px 0px;\n  --shadow-xl-3: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;\n  --shadow-sm: rgba(23, 23, 23, 0.06) 0px 3px 6px 0px;\n\n  /* Surfaces */\n  --surface-platinum-white: #ffffff;\n  --surface-porcelain-white: #f8fafd;\n  --surface-powder-blue: #e5edf5;\n}\n```\n\n### Tailwind v4\n\n```css\n@theme {\n  /* Colors */\n  --color-midnight-ink: #061b31;\n  --color-slate-blue: #50617a;\n  --color-ghost-gray: #64748d;\n  --color-platinum-white: #ffffff;\n  --color-porcelain-white: #f8fafd;\n  --color-powder-blue: #e5edf5;\n  --color-stone-gray: #d8d6df;\n  --color-deep-violet: #533afd;\n  --color-washed-violet: #b9b9f9;\n  --color-soft-violet: #8087ff;\n  --color-accent-green: #81b81a;\n  --color-vibrant-orange: #ff6118;\n  --color-sunburst-gradient: #ffbb00;\n  --color-dreamy-gradient: #7f7dc8;\n  --color-fuchsia-glow-gradient: #ff2ede;\n\n  /* Typography */\n  --font-sohne-var: 'sohne-var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n\n  /* Typography — Scale */\n  --text-caption: 11px;\n  --leading-caption: 1.45;\n  --tracking-caption: 0.03px;\n  --text-body: 14px;\n  --leading-body: 1.4;\n  --tracking-body: 0.003px;\n  --text-subheading: 18px;\n  --leading-subheading: 1.25;\n  --tracking-subheading: -0.009px;\n  --text-heading-sm: 22px;\n  --leading-heading-sm: 1.2;\n  --tracking-heading-sm: -0.01px;\n  --text-heading: 32px;\n  --leading-heading: 1.15;\n  --tracking-heading: -0.02px;\n  --text-heading-lg: 44px;\n  --leading-heading-lg: 1.1;\n  --tracking-heading-lg: -0.025px;\n  --text-display: 56px;\n  --leading-display: 1.07;\n  --tracking-display: -0.03px;\n\n  /* Spacing */\n  --spacing-4: 4px;\n  --spacing-8: 8px;\n  --spacing-12: 12px;\n  --spacing-16: 16px;\n  --spacing-20: 20px;\n  --spacing-24: 24px;\n  --spacing-28: 28px;\n  --spacing-32: 32px;\n  --spacing-36: 36px;\n  --spacing-40: 40px;\n  --spacing-48: 48px;\n  --spacing-60: 60px;\n  --spacing-64: 64px;\n  --spacing-80: 80px;\n  --spacing-96: 96px;\n\n  /* Border Radius */\n  --radius-sm: 1px;\n  --radius-md: 4px;\n  --radius-lg: 8px;\n  --radius-2xl: 16px;\n\n  /* Shadows */\n  --shadow-xl: rgba(0, 0, 0, 0.2) 0px 0px 32px 8px;\n  --shadow-xl-2: rgba(50, 50, 93, 0.12) 0px 16px 32px 0px;\n  --shadow-xl-3: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;\n  --shadow-sm: rgba(23, 23, 23, 0.06) 0px 3px 6px 0px;\n}\n```",
    "tailwind": "@theme {\n  /* Colors */\n  --color-midnight-ink: #061b31;\n  --color-slate-blue: #50617a;\n  --color-ghost-gray: #64748d;\n  --color-platinum-white: #ffffff;\n  --color-porcelain-white: #f8fafd;\n  --color-powder-blue: #e5edf5;\n  --color-stone-gray: #d8d6df;\n  --color-deep-violet: #533afd;\n  --color-washed-violet: #b9b9f9;\n  --color-soft-violet: #8087ff;\n  --color-accent-green: #81b81a;\n  --color-vibrant-orange: #ff6118;\n  --color-sunburst-gradient: #ffbb00;\n  --color-dreamy-gradient: #7f7dc8;\n  --color-fuchsia-glow-gradient: #ff2ede;\n\n  /* Typography */\n  --font-sohne-var: 'sohne-var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n\n  /* Typography — Scale */\n  --text-caption: 11px;\n  --leading-caption: 1.45;\n  --tracking-caption: 0.03px;\n  --text-body: 14px;\n  --leading-body: 1.4;\n  --tracking-body: 0.003px;\n  --text-subheading: 18px;\n  --leading-subheading: 1.25;\n  --tracking-subheading: -0.009px;\n  --text-heading-sm: 22px;\n  --leading-heading-sm: 1.2;\n  --tracking-heading-sm: -0.01px;\n  --text-heading: 32px;\n  --leading-heading: 1.15;\n  --tracking-heading: -0.02px;\n  --text-heading-lg: 44px;\n  --leading-heading-lg: 1.1;\n  --tracking-heading-lg: -0.025px;\n  --text-display: 56px;\n  --leading-display: 1.07;\n  --tracking-display: -0.03px;\n\n  /* Spacing */\n  --spacing-4: 4px;\n  --spacing-8: 8px;\n  --spacing-12: 12px;\n  --spacing-16: 16px;\n  --spacing-20: 20px;\n  --spacing-24: 24px;\n  --spacing-28: 28px;\n  --spacing-32: 32px;\n  --spacing-36: 36px;\n  --spacing-40: 40px;\n  --spacing-48: 48px;\n  --spacing-60: 60px;\n  --spacing-64: 64px;\n  --spacing-80: 80px;\n  --spacing-96: 96px;\n\n  /* Border Radius */\n  --radius-sm: 1px;\n  --radius-md: 4px;\n  --radius-lg: 8px;\n  --radius-2xl: 16px;\n\n  /* Shadows */\n  --shadow-xl: rgba(0, 0, 0, 0.2) 0px 0px 32px 8px;\n  --shadow-xl-2: rgba(50, 50, 93, 0.12) 0px 16px 32px 0px;\n  --shadow-xl-3: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;\n  --shadow-sm: rgba(23, 23, 23, 0.06) 0px 3px 6px 0px;\n}",
    "css": ":root {\n  /* Colors */\n  --color-midnight-ink: #061b31;\n  --color-slate-blue: #50617a;\n  --color-ghost-gray: #64748d;\n  --color-platinum-white: #ffffff;\n  --color-porcelain-white: #f8fafd;\n  --color-powder-blue: #e5edf5;\n  --color-stone-gray: #d8d6df;\n  --color-deep-violet: #533afd;\n  --color-washed-violet: #b9b9f9;\n  --color-soft-violet: #8087ff;\n  --color-accent-green: #81b81a;\n  --color-vibrant-orange: #ff6118;\n  --color-sunburst-gradient: #ffbb00;\n  --gradient-sunburst-gradient: linear-gradient(90deg, rgb(114, 50, 241) 3.13%, rgb(251, 118, 250) 50%, rgb(255, 207, 94));\n  --color-dreamy-gradient: #7f7dc8;\n  --gradient-dreamy-gradient: radial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237, 245) 66%);\n  --color-fuchsia-glow-gradient: #ff2ede;\n  --gradient-fuchsia-glow-gradient: linear-gradient(0deg, rgb(255, 46, 222), rgb(210, 152, 255));\n\n  /* Typography — Font Families */\n  --font-sohne-var: 'sohne-var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n\n  /* Typography — Scale */\n  --text-caption: 11px;\n  --leading-caption: 1.45;\n  --tracking-caption: 0.03px;\n  --text-body: 14px;\n  --leading-body: 1.4;\n  --tracking-body: 0.003px;\n  --text-subheading: 18px;\n  --leading-subheading: 1.25;\n  --tracking-subheading: -0.009px;\n  --text-heading-sm: 22px;\n  --leading-heading-sm: 1.2;\n  --tracking-heading-sm: -0.01px;\n  --text-heading: 32px;\n  --leading-heading: 1.15;\n  --tracking-heading: -0.02px;\n  --text-heading-lg: 44px;\n  --leading-heading-lg: 1.1;\n  --tracking-heading-lg: -0.025px;\n  --text-display: 56px;\n  --leading-display: 1.07;\n  --tracking-display: -0.03px;\n\n  /* Typography — Weights */\n  --font-weight-light: 300;\n  --font-weight-regular: 400;\n\n  /* Spacing */\n  --spacing-unit: 4px;\n  --spacing-4: 4px;\n  --spacing-8: 8px;\n  --spacing-12: 12px;\n  --spacing-16: 16px;\n  --spacing-20: 20px;\n  --spacing-24: 24px;\n  --spacing-28: 28px;\n  --spacing-32: 32px;\n  --spacing-36: 36px;\n  --spacing-40: 40px;\n  --spacing-48: 48px;\n  --spacing-60: 60px;\n  --spacing-64: 64px;\n  --spacing-80: 80px;\n  --spacing-96: 96px;\n\n  /* Layout */\n  --section-gap: 64px;\n  --card-padding: 12px;\n  --element-gap: 8px;\n\n  /* Border Radius */\n  --radius-sm: 1px;\n  --radius-md: 4px;\n  --radius-lg: 8px;\n  --radius-2xl: 16px;\n\n  /* Named Radii */\n  --radius-tags: 4px;\n  --radius-cards: 6px;\n  --radius-images: 4px;\n  --radius-inputs: 4px;\n  --radius-buttons: 4px;\n\n  /* Shadows */\n  --shadow-xl: rgba(0, 0, 0, 0.2) 0px 0px 32px 8px;\n  --shadow-xl-2: rgba(50, 50, 93, 0.12) 0px 16px 32px 0px;\n  --shadow-xl-3: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;\n  --shadow-sm: rgba(23, 23, 23, 0.06) 0px 3px 6px 0px;\n\n  /* Surfaces */\n  --surface-platinum-white: #ffffff;\n  --surface-porcelain-white: #f8fafd;\n  --surface-powder-blue: #e5edf5;\n}",
    "tokens": "{'color': {'midnight-ink': {'$value': '#061b31', '$type': 'color', '$description': 'Midnight Ink — Primary text, critical headings, icons, primary button text for ghost buttons'}, 'slate-blue': {'$value': '#50617a', '$type': 'color', '$description': 'Slate Blue — Secondary text, muted links, subtle borders, descriptive captions'}, 'ghost-gray': {'$value': '#64748d', '$type': 'color', '$description': 'Ghost Gray — Tertiary text, placeholder text, inactive states, subtle dividers'}, 'platinum-white': {'$value': '#ffffff', '$type': 'color', '$description': 'Platinum White — Page backgrounds, card surfaces, primary button text against dark backgrounds'}, 'porcelain-white': {'$value': '#f8fafd', '$type': 'color', '$description': 'Porcelain White — Secondary card surfaces, subtle background variations'}, 'powder-blue': {'$value': '#e5edf5', '$type': 'color', '$description': 'Powder Blue — Background for secondary sections, light card backgrounds'}, 'stone-gray': {'$value': '#d8d6df', '$type': 'color', '$description': 'Stone Gray — Horizontal rules, subtle borders, graphical elements'}, 'deep-violet': {'$value': '#533afd', '$type': 'color', '$description': 'Deep Violet — Primary calls to action (buttons, links), active states, significant icons — establishes brand presence and emphasizes interaction'}, 'washed-violet': {'$value': '#b9b9f9', '$type': 'color', '$description': 'Washed Violet — Border for ghost buttons, subtle accents'}, 'soft-violet': {'$value': '#8087ff', '$type': 'color', '$description': 'Soft Violet — Decorative icons, gradient highlights, sub-brand accents'}, 'accent-green': {'$value': '#81b81a', '$type': 'color', '$description': 'Accent Green — Green outline accent for tags, dividers, and focused UI edges'}, 'vibrant-orange': {'$value': '#ff6118', '$type': 'color', '$description': 'Vibrant Orange — Orange outline accent for tags, dividers, and focused UI edges.'}, 'sunburst-gradient': {'$value': '#ffbb00', '$type': 'color', '$description': 'Sunburst Gradient — Decorative gradients in hero sections and product showcases, adding a dynamic, abstract visual element'}, 'dreamy-gradient': {'$value': '#7f7dc8', '$type': 'color', '$description': 'Dreamy Gradient — Abstract background graphics, product display panels, adding depth and a tech-centric feel'}, 'fuchsia-glow-gradient': {'$value': '#ff2ede', '$type': 'color', '$description': 'Fuchsia Glow Gradient — Decorative illustration elements, feature highlights'}}, 'font': {'sohne-var': {'$value': 'sohne-var', '$type': 'fontFamily', '$description': \"The primary typeface for all content. Weight 300 is used for large, impactful headlines, creating a sense of understated authority rather than shouting. Weight 400 is standard for body text, ensuring clarity and readability. The 'ss01' feature provides alternative character forms, and 'tnum' ensures tabular figures align numerically.\"}}, 'typography': {'xs': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '8px', 'fontWeight': 400, 'lineHeight': 1.12}, '$type': 'typography', '$description': 'Typography step xs at 8px'}, 'xs-2': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '8px', 'fontWeight': 300, 'lineHeight': 1.07}, '$type': 'typography', '$description': 'Typography step xs-2 at 8px'}, 'xs-3': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '9px', 'fontWeight': 300, 'lineHeight': 1.2}, '$type': 'typography', '$description': 'Typography step xs-3 at 9px'}, 'xs-4': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '9px', 'fontWeight': 300, 'lineHeight': 1.2}, '$type': 'typography', '$description': 'Typography step xs-4 at 9px'}, 'xs-5': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '9px', 'fontWeight': 300, 'lineHeight': 1.3}, '$type': 'typography', '$description': 'Typography step xs-5 at 9px'}, 'xs-6': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '9px', 'fontWeight': 300, 'lineHeight': 1.3}, '$type': 'typography', '$description': 'Typography step xs-6 at 9px'}, 'xs-7': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '9px', 'fontWeight': 400, 'lineHeight': 1.2}, '$type': 'typography', '$description': 'Typography step xs-7 at 9px'}, 'xs-8': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '9px', 'fontWeight': 300, 'lineHeight': 1.4}, '$type': 'typography', '$description': 'Typography step xs-8 at 9px'}, 'xs-9': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '10px', 'fontWeight': 300, 'lineHeight': 1.5}, '$type': 'typography', '$description': 'Typography step xs-9 at 10px'}, 'xs-10': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '10px', 'fontWeight': 300, 'lineHeight': 1.15}, '$type': 'typography', '$description': 'Typography step xs-10 at 10px'}, 'xs-11': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '10px', 'fontWeight': 400, 'lineHeight': 1.15}, '$type': 'typography', '$description': 'Typography step xs-11 at 10px'}, 'xs-12': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '10px', 'fontWeight': 400, 'lineHeight': 1.15}, '$type': 'typography', '$description': 'Typography step xs-12 at 10px'}, 'xs-13': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '10px', 'fontWeight': 300, 'lineHeight': 1.2}, '$type': 'typography', '$description': 'Typography step xs-13 at 10px'}, 'xs-14': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '10px', 'fontWeight': 300, 'lineHeight': 0.8}, '$type': 'typography', '$description': 'Typography step xs-14 at 10px'}, 'xs-15': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '10px', 'fontWeight': 300, 'lineHeight': 1.2}, '$type': 'typography', '$description': 'Typography step xs-15 at 10px'}, 'xs-16': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '10px', 'fontWeight': 300, 'lineHeight': 1.4}, '$type': 'typography', '$description': 'Typography step xs-16 at 10px'}, 'xs-17': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '10px', 'fontWeight': 400, 'lineHeight': 1.4}, '$type': 'typography', '$description': 'Typography step xs-17 at 10px'}, 'xs-18': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '10px', 'fontWeight': 400, 'lineHeight': 1.4}, '$type': 'typography', '$description': 'Typography step xs-18 at 10px'}, 'xs-19': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '11px', 'fontWeight': 300, 'lineHeight': 1.45}, '$type': 'typography', '$description': 'Typography step xs-19 at 11px'}, 'xs-20': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '11px', 'fontWeight': 300, 'lineHeight': 1.45}, '$type': 'typography', '$description': 'Typography step xs-20 at 11px'}, 'xs-21': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '12px', 'fontWeight': 400, 'lineHeight': 1.2}, '$type': 'typography', '$description': 'Typography step xs-21 at 12px'}, 'xs-22': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '12px', 'fontWeight': 300, 'lineHeight': 1.33}, '$type': 'typography', '$description': 'Typography step xs-22 at 12px'}, 'xs-23': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '12px', 'fontWeight': 400, 'lineHeight': 1.33}, '$type': 'typography', '$description': 'Typography step xs-23 at 12px'}, 'xs-24': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '12px', 'fontWeight': 400, 'lineHeight': 1.33}, '$type': 'typography', '$description': 'Typography step xs-24 at 12px'}, 'xs-25': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '12px', 'fontWeight': 300, 'lineHeight': 1.45}, '$type': 'typography', '$description': 'Typography step xs-25 at 12px'}, 'sm': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '14px', 'fontWeight': 400, 'lineHeight': 1}, '$type': 'typography', '$description': 'Typography step sm at 14px'}, 'sm-2': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '14px', 'fontWeight': 400, 'lineHeight': 1.2}, '$type': 'typography', '$description': 'Typography step sm-2 at 14px'}, 'sm-3': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '14px', 'fontWeight': 300, 'lineHeight': 1.2}, '$type': 'typography', '$description': 'Typography step sm-3 at 14px'}, 'sm-4': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '14px', 'fontWeight': 400, 'lineHeight': 1.43}, '$type': 'typography', '$description': 'Typography step sm-4 at 14px'}, 'sm-5': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '14px', 'fontWeight': 300, 'lineHeight': 1}, '$type': 'typography', '$description': 'Typography step sm-5 at 14px'}, 'base': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '16px', 'fontWeight': 400, 'lineHeight': 1.2}, '$type': 'typography', '$description': 'Typography step base at 16px'}, 'base-2': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '16px', 'fontWeight': 400, 'lineHeight': 1}, '$type': 'typography', '$description': 'Typography step base-2 at 16px'}, 'base-3': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '16px', 'fontWeight': 300, 'lineHeight': 1.4}, '$type': 'typography', '$description': 'Typography step base-3 at 16px'}, 'base-4': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '16px', 'fontWeight': 400, 'lineHeight': 1.4}, '$type': 'typography', '$description': 'Typography step base-4 at 16px'}, 'base-5': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '16px', 'fontWeight': 300, 'lineHeight': 1.25}, '$type': 'typography', '$description': 'Typography step base-5 at 16px'}, 'lg': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '18px', 'fontWeight': 300, 'lineHeight': 1.4}, '$type': 'typography', '$description': 'Typography step lg at 18px'}, 'lg-2': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '18px', 'fontWeight': 400, 'lineHeight': 1.4}, '$type': 'typography', '$description': 'Typography step lg-2 at 18px'}, 'xl': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '20px', 'fontWeight': 300, 'lineHeight': 1.4}, '$type': 'typography', '$description': 'Typography step xl at 20px'}, 'xl-2': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '22px', 'fontWeight': 300, 'lineHeight': 1.1}, '$type': 'typography', '$description': 'Typography step xl-2 at 22px'}, '2xl': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '26px', 'fontWeight': 400, 'lineHeight': 1.2}, '$type': 'typography', '$description': 'Typography step 2xl at 26px'}, '2xl-2': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '26px', 'fontWeight': 300, 'lineHeight': 1.12}, '$type': 'typography', '$description': 'Typography step 2xl-2 at 26px'}, '2xl-3': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '26px', 'fontWeight': 400, 'lineHeight': 1.15}, '$type': 'typography', '$description': 'Typography step 2xl-3 at 26px'}, '2xl-4': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '26px', 'fontWeight': 400, 'lineHeight': 1.15}, '$type': 'typography', '$description': 'Typography step 2xl-4 at 26px'}, '2xl-5': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '26px', 'fontWeight': 300, 'lineHeight': 0.85}, '$type': 'typography', '$description': 'Typography step 2xl-5 at 26px'}, '3xl': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '32px', 'fontWeight': 300, 'lineHeight': 1.1}, '$type': 'typography', '$description': 'Typography step 3xl at 32px'}, '3xl-2': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '34px', 'fontWeight': 300, 'lineHeight': 1}, '$type': 'typography', '$description': 'Typography step 3xl-2 at 34px'}, '4xl': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '44px', 'fontWeight': 300, 'lineHeight': 1.15}, '$type': 'typography', '$description': 'Typography step 4xl at 44px'}, '5xl': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '48px', 'fontWeight': 300, 'lineHeight': 1.03}, '$type': 'typography', '$description': 'Typography step 5xl at 48px'}, '5xl-2': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '48px', 'fontWeight': 400, 'lineHeight': 1}, '$type': 'typography', '$description': 'Typography step 5xl-2 at 48px'}, '5xl-3': {'$value': {'fontFamily': 'sohne-var', 'fontSize': '56px', 'fontWeight': 300, 'lineHeight': 1.03}, '$type': 'typography', '$description': 'Typography step 5xl-3 at 56px'}}, 'spacing': {'4': {'$value': '4px', '$type': 'dimension', '$description': 'Spacing 4px'}, '8': {'$value': '8px', '$type': 'dimension', '$description': 'Spacing 8px'}, '12': {'$value': '12px', '$type': 'dimension', '$description': 'Spacing 12px'}, '16': {'$value': '16px', '$type': 'dimension', '$description': 'Spacing 16px'}, '20': {'$value': '20px', '$type': 'dimension', '$description': 'Spacing 20px'}, '24': {'$value': '24px', '$type': 'dimension', '$description': 'Spacing 24px'}, '28': {'$value': '28px', '$type': 'dimension', '$description': 'Spacing 28px'}, '32': {'$value': '32px', '$type': 'dimension', '$description': 'Spacing 32px'}, '36': {'$value': '36px', '$type': 'dimension', '$description': 'Spacing 36px'}, '40': {'$value': '40px', '$type': 'dimension', '$description': 'Spacing 40px'}, '48': {'$value': '48px', '$type': 'dimension', '$description': 'Spacing 48px'}, '60': {'$value': '60px', '$type': 'dimension', '$description': 'Spacing 60px'}, '64': {'$value': '64px', '$type': 'dimension', '$description': 'Spacing 64px'}, '80': {'$value': '80px', '$type': 'dimension', '$description': 'Spacing 80px'}, '96': {'$value': '96px', '$type': 'dimension', '$description': 'Spacing 96px'}, 'unit': {'$value': '4px', '$type': 'dimension', '$description': 'Base spacing unit'}}, 'radius': {'sm': {'$value': '1px', '$type': 'dimension', '$description': 'Border radius sm'}, 'md': {'$value': '4px', '$type': 'dimension', '$description': 'Border radius md'}, 'lg': {'$value': '8px', '$type': 'dimension', '$description': 'Border radius lg'}, '2xl': {'$value': '16px', '$type': 'dimension', '$description': 'Border radius 2xl'}}, 'shadow': {'xl': {'$value': 'rgba(0, 0, 0, 0.2) 0px 0px 32px 8px', '$type': 'shadow', '$description': 'Shadow elevation xl'}, 'xl-2': {'$value': 'rgba(50, 50, 93, 0.12) 0px 16px 32px 0px', '$type': 'shadow', '$description': 'Shadow elevation xl-2'}, 'xl-3': {'$value': 'rgba(23, 23, 23, 0.08) 0px 15px 35px 0px', '$type': 'shadow', '$description': 'Shadow elevation xl-3'}, 'sm': {'$value': 'rgba(23, 23, 23, 0.06) 0px 3px 6px 0px', '$type': 'shadow', '$description': 'Shadow elevation sm'}}, 'surface': {'platinum-white': {'$value': '#ffffff', '$type': 'color', '$description': 'Surface level 0: Primary page background and base canvas.'}, 'porcelain-white': {'$value': '#f8fafd', '$type': 'color', '$description': 'Surface level 1: Slightly elevated secondary surfaces, light card backgrounds.'}, 'powder-blue': {'$value': '#e5edf5', '$type': 'color', '$description': 'Surface level 2: Backgrounds for alternating sections or distinct content blocks.'}}, '$extensions': {'com.refero.extraction': {'url': 'https://stripe.com', 'siteName': 'Stripe', 'extractedAt': '2026-04-29T22:55:51.920Z', 'variant': 'extended'}}}"
  },
  "sections": {
    "signature_move": "The most recognizable moment in Stripe's visual identity is the hero gradient mesh — a continuously animated aurora of brand colors that never freezes into a static image. The palette cycles through deep violet (`#533afd`), electric blue, cyan, fuchsia, and a suggestion of warm yellow, drawing on the same Sunburst Gradient (`linear-gradient(90deg, rgb(114, 50, 241) 3.13%, rgb(251, 118, 250) 50%, rgb(255, 207, 94))`) and Dreamy Gradient (`radial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237, 245) 66%)`) tokens visible throughout the design system.\n\nWhat makes this signature move durable is its restraint: the mesh moves slowly, almost imperceptibly, like light refracting through water. It never calls attention to itself as animation — it simply makes the hero feel *alive*. The background's motion does the heavy lifting that a product screenshot might do elsewhere; because Stripe's products are fundamentally invisible infrastructure, the animation communicates \"living system\" without showing a UI at all.\n\nThis choice has persisted across multiple redesigns because it encodes the brand's core proposition — \"financial infrastructure to grow your revenue\" — at the level of sensation rather than language. The gradient signals warmth (the organic aurora shapes), precision (the controlled palette never bleeds into mud), and scale (the implied depth of a mesh, not a flat wash). Competitors who copy the gradient without maintaining the animation lose the whole effect: a frozen gradient is a screensaver; a moving gradient is a heartbeat.\n\nThe signature move is implemented via `canvas` or CSS `@keyframes` with multiple radial gradients animating their center positions on 8–12 second loops with `ease-in-out` easing. No third-party animation library is required or used. The mesh sits at `z-index: 0` behind the hero text stack, always below copy, never obscuring the typographic hierarchy.",
    "era_lineage": "Stripe's visual language sits at the intersection of three distinct design traditions that rarely converge in finance.\n\nThe first is **modernist information design** — the belief, codified by the Swiss International Style in the 1950s–70s, that clarity is a moral position. Every typographic decision at Stripe (the sole typeface, the tight tracking at display sizes, the single violet accent against near-white surfaces) descends from this tradition. Where most fintech brands pile on color to signal trust, Stripe strips back to near-monochrome with a single confident accent, a move that reads as authority precisely because it refuses to shout.\n\nThe second is **Tufte-influenced data visualization**. Edward Tufte's principle of maximizing the data-ink ratio — removing every mark that does not encode information — is visible in Stripe's UI density. Cards carry real data. Tables default to `tnum` (tabular figures) so numbers align. The type scale jumps from 11px to 14px to 18px to 32px with no vanity sizes in between. The shadow vocabulary is limited to four named tokens, all of them soft and diffuse. This is a system designed to display *financial data* without friction.\n\nThe third tradition is **mid-century corporate identity** — specifically the lineage of Massimo Vignelli, whose 1972 New York City subway map set the template for infrastructure-scale graphic systems that must communicate to millions of users under duress. The subway map and the Stripe dashboard share a structural philosophy: fixed vocabulary, consistent application, no exceptions. Vignelli's dictum — \"if you can't find it in the system, you don't need it\" — is audible in Stripe's design decisions. There is one typeface (sohne-var). There is one primary action color (Deep Violet). There is one border-radius family (4px for elements, 6px for cards).\n\nWhat makes Stripe unusual in finance is the warmth underneath this rigor. The gradient aurora, the fuchsia in the Dreamy Gradient, the soft lavender of Washed Violet — these are *warm* choices inside a cold-seeming system. Most banking design is cold by design, to project stability. Stripe chose warm-not-cold as a developer-recruitment signal: this is infrastructure you will *enjoy* using.",
    "doc_voice": "Stripe's documentation is a benchmark for developer-facing technical writing. The voice rubric score for this entry is **88/100**, reflecting near-perfect compliance with the Google Developer Documentation Style Guide.\n\n### Verbatim passages from stripe.com\n\n**Hero headline:** \"Financial infrastructure to grow your revenue.\"\n\n**Hero subheadline:** \"Accept payments, offer financial services and implement custom revenue models – from your first transaction to your billionth.\"\n\n**Tagline:** \"The backbone of global commerce.\"\n\n**Docs landing intro:** \"Explore our guides and examples to integrate Stripe.\"\n\n**Docs quick-start framing:** \"Build a checkout page with Payment Intents API.\"\n\n**Docs recommendation (verbatim):** \"The documentation recommends using the Checkout Sessions API with the Payment Element over Payment Intents for most integrations because Checkout Sessions covers similar use cases while requiring significantly less code.\"\n\n### Verbatim code passage from docs.stripe.com\n\n```javascript\nconst paymentIntent = await stripe.paymentIntents.create({\n  customer: customer.id,\n  setup_future_usage: \"off_session\",\n  amount: amount,\n  currency: \"{{CURRENCY}}\",\n  automatic_payment_methods: {\n    enabled: true,\n  },\n});\n```\n\n### Voice scorecard\n\n| Criterion | Score | Note |\n|---|---|---|\n| Active voice ratio | 20/20 | 100% active-voice sentences in sampled corpus |\n| Avg sentence words ≤ 20 | 15/15 | 10.3 words per sentence — extremely terse |\n| Second person | 10/10 | \"You can deploy\", \"Your integration\", \"Your customers\" |\n| Code blocks declare language | 10/10 | All fences tagged `javascript`, `bash`, `ruby`, etc. |\n| Informative link text | 10/10 | No \"click here\" or bare URLs |\n| Examples per concept | 15/15 | Every API concept ships with a runnable example |\n| No HTML in markdown | 10/10 | Clean markdown throughout |\n| Terseness | 10/10 | Paragraphs rarely exceed 3 sentences |\n| **Total** | **88/100** | Docked 12 points for occasional marketing-voice dilution in hero copy |\n\nThe \"intimacy\" in Stripe's voice comes from second-person address that feels collaborative, not instructional. The docs do not say \"the developer should\"; they say \"you can.\" The implicit model is a senior engineer pair-programming with you, handing you a working snippet before explaining the theory — which is exactly the `persona` encoded in this entry's frontmatter.",
    "anti_patterns": "These are failure modes that are *specific to Stripe* — errors that would not register as wrong in other brand systems but violate Stripe's precise visual contract.\n\n1. **Never use a static hero gradient.** The Sunburst and Dreamy gradients are defined as *animated* meshes. A frozen gradient applied as a plain CSS `background` reads as a stock template, not Stripe. The aurora must move. If your environment cannot run CSS animation or canvas, use the Porcelain White (#f8fafd) surface with the gradient relegated to a decorative sidebar element — do not freeze the hero.\n\n2. **Never use a product screenshot as the hero.** Stripe's hero communicates infrastructure-as-living-system through the animated gradient, not through UI screenshots. Placing a dashboard screenshot in the hero collapses the brand proposition to \"look at our product\" rather than \"this is the backbone of global commerce.\" Product UIs belong in feature cards, below the fold, inside device frames.\n\n3. **Never introduce a font outside sohne-var.** The typeface is the brand in the same way the violet is the action color. Mixing in a serif for \"editorial feel\" or a monospace for \"developer feel\" breaks the one-typeface contract that is Stripe's typographic signature. The `\"ss01\"` and `\"tnum\"` OpenType features on sohne-var already provide the character variety the system needs.\n\n4. **Never use bold for emphasis — italic is the emphasis system.** Stripe's type scale uses weight 300 for display and weight 400 for body. There is no weight-600 emphasis pattern in the design tokens. When copy needs emphasis, the system uses *italics* (or color, via Deep Violet). Using `**bold**` in Stripe-styled copy is an import from a different brand's emphasis grammar.\n\n5. **Never ship a docs page without a runnable code example.** Stripe's documentation persona is \"senior developer pair-programming.\" A concept page without a code block is half a page. Every API concept — even a conceptual overview — should include at minimum one copy-pasteable snippet with a declared language tag. Explanatory prose alone is an anti-pattern in this voice.\n\n6. **Never use Deep Violet (#533afd) for decorative purposes.** This color is exclusively reserved for primary interactive elements: buttons, active states, significant icons. Using it for section backgrounds, dividers, or illustration accents dilutes its signal value as the action color. When Deep Violet appears, users should expect something clickable.\n\n7. **Never default to high border-radius.** Stripe uses 4px for interactive elements and 6px for cards — not 8px, not 12px, not pill-shaped. Rounding up \"for friendliness\" breaks the architectural blueprint aesthetic. The system's corners are intentionally minimal: this is infrastructure-grade UI, not a consumer wellness app."
  },
  "docs_url": "https://stripe.com/docs",
  "api_version": "1.0"
}