Stripe design.md
Indigo ink on a quiet ledger, under one loud gradient
A near-monochrome financial instrument: white canvas, deep navy type in one thin weight, a single indigo for anything you can act on, and one oversized multicolor gradient ribbon in the hero that carries all the brand energy.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/stripe/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by Stripe, measured from their site: follow its colors, fonts, corners and components on every screen you create or change. Where it calls for a paid font, use the free alternative the file names.
The real page
Captured from stripe.com in English, at 1440 px wide.
Colors
Click a color to copy it. Roles are in English, as in the file.
Type and shape
sohne-var
Free substitute: Inter Tight 300/400 (Google Fonts)
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display | 48px | 300 | -0.96px |
| heading | 32px | 300 | -0.64px |
| heading-sm | 26px | 300 | -0.26px |
| subheading | 22px | 300 | -0.22px |
| body-lg | 18px | 300 | 0 |
| body | 16px | 300 | 0 |
| button | 16px | 400 | 0 |
| caption | 11px | 300 | 0 |
- tags
- 4px
- cards
- 6px
- inputs
- 4px
- buttons
- 4px
The files
Loading…
Screenshots and measurements taken by Faundr from stripe.com for reference. Inspired by Stripe, not its official design system; Faundr isn’t affiliated with Stripe, and the name and marks belong to it.
Faundr
A design.md only works if someone checks it.
Faundr reads your design.md and checks every screen your AI touches: colors off the guide, rebuilt components, clipped menus, broken mobile.
