Inside Stripe's Design System: A Token-Level Breakdown
A note on method
Before we start, I want to clarify that the data here isn't from internal Stripe documentation. I pulled it directly from a live extraction of stripe.com using the designmd.run pipeline.
The resulting file hit a high confidence score and passed all automated linting checks, so we know this extraction is highly reliable. We cached and dated this data to ensure reproducibility, giving us a clear snapshot of their design language at this exact moment. You can view the full source file for this analysis on the Stripe design system page.
The Stripe palette
Stripe's color palette is famous for being vibrant but incredibly disciplined.
The extraction shows a tightly controlled primary brand color—a very specific blurple (#635BFF). They use secondary and accent colors sparingly, just enough to draw your eye to interactive elements without overpowering the main actions.
For backgrounds and surfaces, they lean heavily on absolute white (#FFFFFF) and some very subtle cool grays (like #F6F9FC). That's what creates the signature depth Stripe is known for. Text colors follow a clear hierarchy. Primary text is highly contrasted (#0A2540) but avoids absolute black, while secondary text uses lighter slate grays to create structure without hurting readability. If you want to audit sites like this yourself, read our guide on how to extract a design system from a website.
Typography
Typography is a huge part of the Stripe look, focusing on clarity and technical precision.
The extraction picked up a custom font family stack that leans hard on proprietary or carefully chosen sans-serifs, backed by solid system fallbacks (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif).
Their type scale is highly mathematical. The body copy sits at a comfortable baseline, but heading sizes scale up aggressively to create clear section breaks. They use a generous body line height—giving dense technical docs plenty of room to breathe—while tightening the tracking (letter spacing) on massive hero headlines to keep them looking cohesive.
Spacing
Stripe's spatial relationships are what give the site its polished, airy feel.
Looking at the extracted spacing scale, they clearly stick to a strict grid, most likely a 4pt or 8pt base. The padding inside cards (spacing.lg) and the margins between page sections (spacing.xl) are exceptionally generous.
This isn't an accident. By pushing elements apart, the layout forces you to focus on one piece of information at a time. When you're designing complex financial interfaces, that kind of focus is everything.
Components
The component definitions in the extraction show how these basic tokens come together into interactive elements.
Their primary button is simple but distinct: a solid background in that primary blurple, an aggressive border radius that creates a pill shape, and a subtle drop shadow that screams "click me." The secondary buttons back off, relying on ghost styles or subtle gray surfaces.
Card components mix those white surface tokens with perfectly layered box shadows, creating elevation that feels natural instead of heavy. Text links inherit the primary brand color and use hover states that make them obvious without jarring the layout.
What this design system gets right
From what I've seen, Stripe nails contrast, accessibility, and restraint better than almost anyone.
Even with those vibrant brand colors, the core interface sticks to extremely high-contrast text on light backgrounds. You can really see their restraint in the token count. The site feels rich, but the underlying variable list is actually remarkably short. Keeping things this consistent lets them ship new products that instantly feel cohesive with the main brand. To see how you can format constraints like this for automation, check out what DESIGN.md is.
How to use this as a reference
This extracted system is an amazing educational resource.
You can download the DESIGN.md file from our gallery and drop it into a fresh repo. If you point an AI coding agent to this file, it'll generate UI components that mimic Stripe's spacing and hierarchical logic. Just remember to use it as inspiration and a structural baseline—don't just copy their brand assets.
Frequently asked questions
Is this the exact design system Stripe engineers use?
No, this is a reverse-engineered snapshot of their compiled, public-facing CSS, pulled into a standardized format.
Why does the extraction show so many gray values?
Complex interfaces like Stripe use extensive gray scales to manage elevation, borders, and subtle typographic hierarchy without making the design look noisy.
Can I use this DESIGN.md file in my own project?
You can definitely use the structural logic and spacing concepts as a starting point. Just swap in your own primary brand colors and typography.
Get Started
See the full extracted DESIGN.md for stripe.com. Visit our gallery to explore the complete token breakdown.