{
  "siteName": "Stripe",
  "northStar": "indigo-ink ledger on frosted glass",
  "theme": "light",
  "cssVariables": ":root {\n  --color-indigoink: #533afd;\n  --color-indigohover: #7389ff;\n  --color-midnightink: #061b31;\n  --color-slate: #64748d;\n  --color-steel: #50617a;\n  --color-smoke: #839bc8;\n  --color-purewhite: #ffffff;\n  --color-mist: #f8fafd;\n  --color-frost: #e5edf5;\n  --color-lavenderborder: #b9b9f9;\n  --color-lilacborder: #d6d9fc;\n  --color-periwinklewash: #e8e9ff;\n  --color-deepviolet: #182659;\n  --color-amethystedge: #7f71e6;\n}",
  "tailwindColors": {
    "indigoink": "#533afd",
    "indigohover": "#7389ff",
    "midnightink": "#061b31",
    "slate": "#64748d",
    "steel": "#50617a",
    "smoke": "#839bc8",
    "purewhite": "#ffffff",
    "mist": "#f8fafd",
    "frost": "#e5edf5",
    "lavenderborder": "#b9b9f9",
    "lilacborder": "#d6d9fc",
    "periwinklewash": "#e8e9ff",
    "deepviolet": "#182659",
    "amethystedge": "#7f71e6"
  },
  "fonts": [
    {
      "brandFamily": "sohne-var",
      "suggestedSubstitute": "Inter Tight (variable, weight 300/400) or a similar humanist sans with tall x-height",
      "role": "Sole type family across the entire interface — headings, body, navigation, buttons, and labels. Weig",
      "freeAlternatives": [
        {
          "file_name": "Inter-Regular.ttf",
          "url": "https://fonts.thundre.ai/f/Inter-Regular.ttf",
          "cssSnippet": "@font-face {\n  font-family: 'Inter';\n  src: url('https://fonts.thundre.ai/f/Inter-Regular.ttf') format('truetype');\n  font-display: swap;\n}"
        },
        {
          "file_name": "Inter[opsz,wght].ttf",
          "url": "https://fonts.thundre.ai/f/Inter%5Bopsz%2Cwght%5D.ttf",
          "cssSnippet": "@font-face {\n  font-family: 'Inter';\n  src: url('https://fonts.thundre.ai/f/Inter%5Bopsz%2Cwght%5D.ttf') format('truetype');\n  font-display: swap;\n}"
        },
        {
          "file_name": "Inter-Light.ttf",
          "url": "https://fonts.thundre.ai/f/Inter-Light.ttf",
          "cssSnippet": "@font-face {\n  font-family: 'Inter';\n  src: url('https://fonts.thundre.ai/f/Inter-Light.ttf') format('truetype');\n  font-display: swap;\n}"
        },
        {
          "file_name": "Inter-Medium.ttf",
          "url": "https://fonts.thundre.ai/f/Inter-Medium.ttf",
          "cssSnippet": "@font-face {\n  font-family: 'Inter';\n  src: url('https://fonts.thundre.ai/f/Inter-Medium.ttf') format('truetype');\n  font-display: swap;\n}"
        },
        {
          "file_name": "Inter-SemiBold.ttf",
          "url": "https://fonts.thundre.ai/f/Inter-SemiBold.ttf",
          "cssSnippet": "@font-face {\n  font-family: 'Inter';\n  src: url('https://fonts.thundre.ai/f/Inter-SemiBold.ttf') format('truetype');\n  font-display: swap;\n}"
        }
      ]
    }
  ],
  "agentPromptGuide": "## Quick Color Reference\n- Text primary: #061b31\n- Text secondary: #64748d\n- Text muted: #50617a\n- Background canvas: #ffffff\n- Background band: #f8fafd\n- Border / divider: #e5edf5\n- Accent / link / icon stroke: #533afd\n- Hover accent: #7389ff\n- Ghost button border: #b9b9f9\n- primary action: #533afd (filled action)\n\n## Example Component Prompts\n\n1. Create a Primary Action Button: #533afd background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n\n2. **Product feature card grid**: White (#ffffff) cards on white canvas, no shadow, no border. Each card: 32px padding, 8px gap between label and heading. Label at 12px sohne-var weight 300 in #839bc8. Heading at 32px weight 300 in #061b31, letter-spacing -0.64px. Body at 16px weight 400 in #50617a, line-height 1.40. 3-column grid with 24px column gap. Separate cards by whitespace alone — no visible borders.\n\n3. **Section heading + stat block**: 96px top padding. Section label at 12px sohne-var weight 300 in #64748d, text-transform uppercase, letter-spacing 0.5px. Heading at 48px weight 300 in #061b31, letter-spacing -0.96px. Below: a large stat — number at 56px weight 300 in #061b31, with a slate (#64748d) 18px label below it. 32px gap between heading and stat.\n\n4. **Ghost outline button**: Transparent background. Text at 14px sohne-var weight 400 in #533afd. 1px solid border in #b9b9f9. 4px border-radius. Padding: 14.5px top, 24px left/right, 15.5px bottom. No shadow. Optional inline icon at 16px to the left of text, rendered as 1.5px stroke #533afd line-art.\n\n5. **Section divider**: 1px solid horizontal line in #e5edf5, spanning the full content width (max 1320px), centered. 96px vertical space above and below.",
  "dos": [
    "Use #533afd exclusively for primary actions, active links, and icon strokes — never for body text, backgrounds spanning large areas, or decorative elements",
    "Set all headings and body text to sohne-var weight 300 — the whisper-weight is the signature; do not use weight 600 or 700 anywhere except the Stripe wordmark",
    "Tighten letter-spacing as type size grows: -0.0100em up to 26px, -0.0200em at 32–48px, -0.0250em at 56px, -0.0300em above 56px",
    "Apply font-feature-settings: 'ss01' on, 'tnum' on to all text — tabular numerals are essential for the metric/stat blocks and pricing displays",
    "Use 4px border-radius on all buttons, inputs, and cards — never 0px (too sharp), never pill (too friendly), never 8px+ (too soft)",
    "Separate sections with 1px #e5edf5 horizontal rules and 96px vertical gaps — do not use background color shifts, shadows, or card containers to divide content",
    "Pair each filled primary button with a ghost outline button (lavender #b9b9f9 border) as its secondary action — never present a filled button alone"
  ],
  "donts": [
    "Do not use shadows, blurs, or any form of CSS elevation on cards, buttons, or images — depth comes from background tint, never from box-shadow",
    "Do not introduce additional accent colors — the system is monochromatic plus one indigo; adding greens, oranges, or pinks breaks the ledger aesthetic",
    "Do not use semibold or bold weights for headings — weight 300 at display size is the entire typographic identity",
    "Do not use rounded corners beyond 4px — pill buttons, large radii, or fully circular elements break the precision-tool feel",
    "Do not fill large areas with #533afd — the indigo should appear in small functional doses (buttons, links, icon strokes); large indigo backgrounds belong only to feature cards designed for contrast",
    "Do not center body copy or headings — Stripe text blocks are always left-aligned within their column; centering is reserved for logo marks and a few isolated stat displays",
    "Do not use #64748d or #50617a for anything longer than a sentence — these are muted text colors for labels and captions, not for paragraphs"
  ]
}