---
title: "Stripe design system"
variant: extended
source: https://stripe.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/stripe-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Stripe · Design System

> Quiet financial infrastructure, framed by vivid color

**Theme:** light · **Industry:** fintech · **Source:** https://stripe.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Stripe pairs spacious, editorial typography with vivid gradients and clear product-led storytelling. A mostly white canvas gives way to a deep navy developer section, while concise calls to action and interface imagery guide the long homepage.

## North star

Keep the interface calm and legible, then use vivid gradients and product visuals as focused moments of emphasis.

## Overview

The visual strategy balances a restrained financial-services foundation with expressive color. White is the dominant canvas, while ink-toned text and muted blue-gray supporting copy keep long-form messaging legible. Stripe violet marks primary actions and links; bright pink, orange, and lavender gradients are prominent in hero and feature media, rather than replacing the core interface palette. Sohne’s light sans-serif headline treatment creates an editorial feel, with compact, regular-weight buttons and a small monospace role for code. The page is organized as a long sequence of generous, mostly white sections, using a bounded central content area, varied columns, and product mockups to make abstract infrastructure concrete. A substantial deep-navy developer sequence provides contrast and groups technical content. Cards and UI previews use restrained borders and soft shadows, while vivid imagery supplies the strongest visual depth.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas White | `#ffffff` | `--color-canvas-white` | surface | Dominant page canvas, open section backgrounds, and reverse text on violet buttons. |
| Stripe Violet | `#533afd` | `--color-stripe-violet` | brand | Primary CTA fills, key links, and selected interface accents. |
| Success Mint | `#a1e5ba` | `--color-success-mint` | semantic | Fine outline on green success badges; a status accent rather than a broad page color. |
| Cloud Border | `#e5edf5` | `--color-cloud-border` | surface | Pale section and card surfaces, dividers, and hairline borders. |
| Success Green | `#108c3d` | `--color-success-green` | semantic | Success-state badge text and small confirmation indicators. |
| Ink Navy | `#061b31` | `--color-ink-navy` | brand | Primary headings, body copy, navigation text, and dark foreground content. |
| Badge Indigo | `#2c2484` | `--color-badge-indigo` | semantic | Dark ERP badge fill within product UI, not a dominant brand surface. |
| Violet Edge | `#362baa` | `--color-violet-edge` | accent | Occasional button or interface border detail near violet actions. |
| Midnight Navy | `#0d1738` | `--color-midnight-navy` | brand | Large developer and infrastructure section backgrounds. |
| Lavender Tint | `#b9b9f9` | `--color-lavender-tint` | accent | Subtle violet-button and interface highlight detail. |
| Slate Copy | `#50617a` | `--color-slate-copy` | neutral | Muted paragraph text and secondary labels on light backgrounds. |
| Magenta Marker | `#a51d85` | `--color-magenta-marker` | semantic | Sparse badge or illustration text detail; not a core interface color. |
| Periwinkle Link | `#7389ff` | `--color-periwinkle-link` | accent | Occasional links and technical-section accents. |
| Steel Muted | `#64748d` | `--color-steel-muted` | neutral | Secondary descriptive text and supporting labels. |
| Deep Indigo | `#101d4e` | `--color-deep-indigo` | surface | Dark cards and compact badges within the navy technical environment. |
| Signal Orange | `#ff6118` | `--color-signal-orange` | accent | Small text, badge, and illustrative details; not a broad background. |
| Mist Surface | `#f8fafd` | `--color-mist-surface` | surface | Occasional pale cards, section fills, and understated content panels. |
| Muted Periwinkle | `#839bc8` | `--color-muted-periwinkle` | accent | Secondary accent text, especially against dark or gradient visuals. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#e5edf5` (Cloud Border) · `--color-surface-2` → `#0d1738` (Midnight Navy) · `--color-surface-3` → `#101d4e` (Deep Indigo) · `--color-surface-4` → `#f8fafd` (Mist Surface) · `--color-text` → `#061b31` (Ink Navy) · `--color-text-muted` → `#50617a` (Slate Copy) · `--color-text-subtle` → `#64748d` (Steel Muted) · `--color-border` → `#e5edf5` (Cloud Border) · `--color-accent` → `#533afd` (Stripe Violet) · `--color-accent-2` → `#7389ff` (Periwinkle Link) · `--color-accent-3` → `#839bc8` (Muted Periwinkle) · `--color-on-accent` → `#ffffff` (Canvas White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#061b31` | `#ffffff` | 17.37:1 | AAA |
| `#061b31` | `#e5edf5` | 14.69:1 | AAA |
| `#061b31` | `#0d1738` | 1.01:1 | fail |
| `#061b31` | `#101d4e` | 1.08:1 | fail |
| `#50617a` | `#ffffff` | 6.3:1 | AA |
| `#50617a` | `#e5edf5` | 5.33:1 | AA |
| `#50617a` | `#0d1738` | 2.78:1 | fail |
| `#50617a` | `#101d4e` | 2.55:1 | fail |
| `#64748d` | `#ffffff` | 4.75:1 | AA |
| `#64748d` | `#e5edf5` | 4.01:1 | AA-large |

### Gradients

- `radial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237, 245) 66%)`
- `radial-gradient(102.68% 99.11% at 50% 104.6%, rgb(203, 131, 255) 0px, rgb(255, 144, 185) 15.77%, rgb(255, 201, 119) 30.62%, rgb(255, 215, 155) 38.04%, rgb(255, 241, 220) 50.11%, rgb(255, 255, 255) 63.1%, rgb(252, 253, 25`
- `radial-gradient(50% 50%, rgb(255, 207, 94) 41.35%, rgba(255, 207, 94, 0) 100%)`
- `radial-gradient(50% 50%, rgba(83, 58, 253, 0.8) 62.5%, rgba(83, 58, 253, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| sohne-var | `--font-body` | webfont | 300, 400, 500 | Headings, body copy, navigation, links, buttons, and general interface text. | Inter |
| SourceCodePro | `--font-mono` | webfont | 500, 700 | Code snippets and developer-oriented technical examples. | IBM Plex Mono |

- **sohne-var:** Light weights dominate headings and body; compact regular-weight controls. Headlines use slightly tight tracking and natural sentence case.
- **SourceCodePro:** Monospace is a small supporting role; medium and bold weights distinguish code and emphasis.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 300 | 1.15 | -0.02em | — | sohne-var | Hero headline establishing Stripe’s financial infrastructure proposition. |
| h2 | 32px | 300 | 1.1 | -0.02em | — | sohne-var | Major section headings and enterprise or developer introductions. |
| h3 | 26px | 300 | 1.12 | -0.01em | — | sohne-var | Feature, story, and product-card headings. |
| h4 | 22px | 300 | 1.1 | -0.01em | — | sohne-var | Supporting card and smaller subsection titles. |
| body | 16px | 300 | 1.4 | 0 | — | sohne-var | Explanatory copy, descriptions, and supporting paragraphs. |
| caption | 10px | 300 | normal | 0 | — | sohne-var | Compact labels, metadata, and product-status text. |
| button | 16px | 400 | 1 | 0 | — | sohne-var | Primary and secondary action labels. |
| link | 16px | 400 | normal | 0 | — | sohne-var | Inline actions and navigational text links. |
| code | 12px | 500 | 2 | 0 | — | SourceCodePro | Developer examples and code-interface snippets. |

OpenType features in use: `"ss01"`, `"tnum"`, `"sups"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 6, 7, 8, 10, 11, 12, 14, 16, 20, 24, 32, 40, 64 px.
- Section rhythm 64px · element gap 8px · card padding — · max content width 1232px.

The homepage uses a central content area measured at a 1232px maximum width, with a comfortable density and clear section-to-section pauses. The header sits above a wide, media-led hero; following sections alternate between single-column introductions, multi-column feature cards, split product showcases, and horizontal story rows. Enterprise and startup content remains mostly on white, while the developer sequence forms a continuous dark band. Keep alignment deliberate, allowing full-bleed or edge-spanning media to contrast with contained text and cards.

## Shape & elevation

- Radius: button `4px` · card `6px` · media `6px` · badge `4px` · nav `4px` · link `4px` · xs `3px` · sm `4px` · md `5px` · lg `6px` · xl `8px` · pill `9999px`
- Shadow `lg` (badge): `rgba(3, 3, 39, 0.25) 0px 14.088px 21.132px -14.088px, rgba(0, 0, 0, 0.1) 0px 8.453px 16.906px -8.453px`
- Shadow `xl` (other): `rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px`
- Shadow `lg-2` (card): `rgba(23, 23, 23, 0.08) 0px 15px 35px 0px`
- Shadow `sm` (card): `rgba(23, 23, 23, 0.06) 0px 3px 6px 0px`
- Shadow `lg-3` (text, other, card): `rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px`
- Shadow `lg-4` (card): `rgba(50, 50, 93, 0.12) 0px 16px 32px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.25, 1, 0.5, 1)` on interactive elements.

Most sections are flat and rely on whitespace, pale hairlines, and contrast rather than deep shadows. Product previews and selected cards can sit slightly above the page with soft, diffuse shadowing and restrained rounded corners. Keep elevation localized to UI mockups and featured cards; avoid making every content block appear as a floating tile.

## Imagery

Use product-interface mockups, dashboard panels, payment flows, brand and customer imagery, and occasional editorial photography. Large abstract gradients—especially in the hero and platform showcase—provide energetic atmosphere; they should read as media treatments rather than ordinary flat section fills. Crop showcase imagery into clean rectangular frames, with rounded corners and enough surrounding white space to keep interface details readable.

## Components

### Primary action

Violet fill (#533afd), white label, compact 4px radius, and generous horizontal padding; used for Get started and enterprise actions.

### Text link

Violet 16px Sohne link styling, usually unboxed and embedded in copy or placed beneath a feature.

### Main navigation

Light header with Stripe mark, product-area links, small dropdown cues, and right-aligned sign-in and contact actions.

### Product preview

Dashboard or checkout UI framed as a clean rectangular showcase, often layered over a soft gradient or pale surface.

### Customer story

Large customer image with a concise headline, story link, and supporting business facts; additional stories can collapse into rows.

### Developer band

Deep navy section with light text, violet links, integration diagrams, technical metrics, and code-oriented previews.

### Measured component styles

- **Primary button** (“Get started”): background #533afd · text #ffffff · radius 4px · padding 15.5px 24px 16.5px 24px · 400 16px sohne-var
- **Secondary button** (“Read the story”): background #e2e4ff · text #533afd · border 1px solid #e2e4ff · radius 4px · padding 0px · 400 16px sohne-var
- **Link** (“View services”): transparent background · text #533afd · radius 0px · padding 0px · 400 16px sohne-var
- **Card** (“roastery.com/checkout cartsy.com/checkou”): background #fcfdfe · text #000000 · radius 6px · padding 0px · 400 16px sohne-var · shadow rgba(23, 23, 23, 0.08) 0px 15px 35px 0px
- **Badge** (“Succeeded”): background #d0f2dd · text #108c3d · border 1px solid #a1e5ba · radius 4px · padding 1px 6px · 300 10px sohne-var
- **Navigation item** (“Products Solutions Developers Resources ”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px sohne-var

## Do

- Use white as the default page canvas.
- Reserve Stripe Violet for key actions and links.
- Use deep navy to group developer-focused content.
- Make abstract gradients focused media moments.
- Pair product UI imagery with concise explanatory copy.
- Maintain generous whitespace between major sections.

## Don't

- Do not turn every section into a colored card.
- Do not use gradients as a substitute for readable text contrast.
- Do not make muted copy compete with the headline.
- Do not overuse shadows on ordinary content blocks.
- Do not treat illustration-only colors as core UI colors.
- Do not compress the long page into a dense dashboard.

## Agent prompt

Build a new fintech page in Stripe’s visual language: start with a clean white canvas (#ffffff), Ink Navy (#061b31) editorial typography, and a restrained navigation row. Use Stripe Violet (#533afd) for primary actions and links, with compact rounded buttons and clear labels. Structure content within a measured 1232px maximum-width area, alternating spacious introductions, modular product showcases, and customer-story sections. Use colorful gradients selectively in large hero or product media, not as a substitute for interface surfaces. Reserve Midnight Navy (#0d1738) for a cohesive technical or developer band, with pale text and violet accents. Keep product UI previews crisp, with light borders and localized soft shadows. Favor Sohne-like sans-serif typography, natural sentence case, and strong contrast between headlines and muted supporting copy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large hero with overlay navigation, left-aligned headline, CTAs, and gradient media. | Primary conversion action, Secondary sign-up option, Global navigation | Full-width gradient artwork, Violet CTA, Compact header |
| 2 | feature-grid | Contained introduction followed by a multi-column grid of payment, billing, commerce, and platform previews. | Explore by business need, Product-led browsing | Checkout mockups, Billing panels, Gradient-backed previews |
| 3 | video | Wide, two-part video feature with headline and play link beside event imagery. | Watch now | Editorial video frame, Overlaid title |
| 4 | stats | Centered heading, horizontal metric row, and expansive decorative media below. | Scan headline metrics | Large numeric callouts, Soft atmospheric illustration |
| 5 | feature-split | Left-aligned enterprise title and action paired with supporting proof copy. | Enterprise entry point | Text-led split, Violet action |
| 6 | gallery | Featured customer story across three columns, with image, facts, and expandable additional stories. | Read customer story, Expand more cases | Large customer image, Fact strip, Accordion rows |
| 7 | feature-grid | Three compact service columns with icon, title, explanatory text, and links. | Choose expert support, Follow service links | Small line icons, Three-column text cards |
| 8 | gallery | Startup introduction above a horizontal row of image-led company cards. | Browse startup stories, Open story links | Tall story artwork, Small carousel controls |
| 9 | feature-split | Two side-by-side promotional cards with copy and vivid graphic panels. | Apply to program, Start a company | Two-column feature cards, Gradient and geometric artwork |
| 10 | feature-split | Text introduction in two columns above a large visual showcase. | Explore platform offering | Split explanatory copy, Violet CTA |
| 11 | product-showcase | Wide product interface or abstract showcase spanning the content area. | Inspect product example | Large dashboard media, Gradient backdrop |
| 12 | feature-grid | Three concise benefit columns beneath the product showcase. | Read related guides | Icon-led columns, Short copy and links |
| 13 | testimonials | Centered testimonial with attribution, story link, and customer marks below. | Read full story | Centered quote, Customer logo row |
| 14 | feature-split | Dark section introduction with headline, supporting text, and two links. | Open developer docs, Visit GitHub | Midnight background, Light copy, Violet link accents |
| 15 | integrations | Introductory copy above a centered, multi-node integration diagram. | Explore integrations | Connected system labels, Dark technical canvas |
| 16 | stats | Intro copy followed by a horizontal three-column metrics row. | Compare infrastructure metrics | Large accent metrics, Dark section background |
| 17 | how-it-works | Section intro followed by three horizontally arranged integration paths with UI previews. | Choose an integration route, Explore each option | Dashboard preview, App directory tiles, Code panel |
| 18 | content-feed | White section with heading, carousel controls, and a horizontal row of editorial cards. | Browse latest updates, Move through carousel | Image-led cards, Carousel arrows |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/stripe-com