Stripe
light theme
Independent Style Review

Stripe-Style Design System

The Stripe design system uses a light-themed visual language. The primary brand color is Deep Violet (#533afd); text is Midnight Ink (#061b31) on a Platinum White (#ffffff) background. Typography is set in sohne-var. This DESIGN.md contains 12 color tokens and a 7-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of Stripe.

Color Palette

FONTS

Typography

Component Previews

Independent Style Review

Stripe-style design system: color codes and fonts

Theme
light
Primary color
Deep Violet (#533afd)
Fonts
sohne-var
Source
stripe.com

Architectural blueprint on white marble.

Stripe'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.

Original style summary

Stripe color codes

ColorHEXCSS tokenUsage
Midnight Ink#061b31--color-midnight-inkPrimary text, critical headings, icons, primary button text for ghost buttons
Slate Blue#50617a--color-slate-blueSecondary text, muted links, subtle borders, descriptive captions
Ghost Gray#64748d--color-ghost-grayTertiary text, placeholder text, inactive states, subtle dividers
Platinum White#ffffff--color-platinum-whitePage backgrounds, card surfaces, primary button text against dark backgrounds
Porcelain White#f8fafd--color-porcelain-whiteSecondary card surfaces, subtle background variations
Powder Blue#e5edf5--color-powder-blueBackground for secondary sections, light card backgrounds
Stone Gray#d8d6df--color-stone-grayHorizontal rules, subtle borders, graphical elements
Deep Violet#533afd--color-deep-violetPrimary calls to action (buttons, links), active states, significant icons — establishes brand presence and emphasizes interaction
Washed Violet#b9b9f9--color-washed-violetBorder for ghost buttons, subtle accents
Soft Violet#8087ff--color-soft-violetDecorative icons, gradient highlights, sub-brand accents
Accent Green#81b81a--color-accent-greenGreen outline accent for tags, dividers, and focused UI edges
Vibrant Orange#ff6118--color-vibrant-orangeOrange outline accent for tags, dividers, and focused UI edges.

Which fonts does Stripe use?

FontWeightsFallback
sohne-var300, 400system-ui, sans-serif
RoleSizeLine heightToken
caption11px1.45--text-caption
body14px1.4--text-body
subheading18px1.25--text-subheading
heading-sm22px1.2--text-heading-sm
heading32px1.15--text-heading
heading-lg44px1.1--text-heading-lg
display56px1.07--text-display

How do I use this DESIGN.md?

  1. Download the DESIGN.md file and place it in your project root.
  2. Tell Claude Code, Cursor, v0 or Google Stitch: “Design the UI following the rules in DESIGN.md.”
  3. Use Fork & Customize to adapt the colors, fonts or components to your own brand.

Raw DESIGN.md file →

This page is MakeMyMD's independent review of the colors, typography and spacing visible on Stripe's public website (stripe.com). It is not an official brand guideline; MakeMyMD is not affiliated with or endorsed by Stripe. The Stripe name and trademarks belong to their owner; no brand imagery, logos or copy are used. Rights holders can request removal at [email protected].

Design Systems

Similar design systems