Stripe

indigo-ink ledger on frosted glass

Get CSS Get JSON Get DESIGN.md

How to use

<link rel="stylesheet" href="https://fonts.thundre.ai/kit/Stripe.css">
<style>
  h1, h2, h3 { font-family: var(--font-headline); }
  body { font-family: var(--font-body); }
  code, pre { font-family: var(--font-mono); }
</style>

Font stack (with our free equivalents)

sohne-var — Sole type family across the entire interface — headings, body, navigation, buttons, and labels. Weig
Inter-Regular.ttf Inter-Regular.ttf
Inter[opsz,wght].ttf Inter[opsz,wght].ttf
Inter-Light.ttf Inter-Light.ttf

CSS variables

:root {
  --color-indigoink: #533afd;
  --color-indigohover: #7389ff;
  --color-midnightink: #061b31;
  --color-slate: #64748d;
  --color-steel: #50617a;
  --color-smoke: #839bc8;
  --color-purewhite: #ffffff;
  --color-mist: #f8fafd;
  --color-frost: #e5edf5;
  --color-lavenderborder: #b9b9f9;
  --color-lilacborder: #d6d9fc;
  --color-periwinklewash: #e8e9ff;
  --color-deepviolet: #182659;
  --color-amethystedge: #7f71e6;
}

Agent prompt guide

## Quick Color Reference
- Text primary: #061b31
- Text secondary: #64748d
- Text muted: #50617a
- Background canvas: #ffffff
- Background band: #f8fafd
- Border / divider: #e5edf5
- Accent / link / icon stroke: #533afd
- Hover accent: #7389ff
- Ghost button border: #b9b9f9
- primary action: #533afd (filled action)

## Example Component Prompts

1. Create a Primary Action Button: #533afd background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.

2. **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.

3. **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.

4. **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.

5. **Section divider**: 1px solid horizontal line in #e5edf5, spanning the full content width (max 1320px), centered. 96px vertical space above and below.