Stripe Design System

Stripi's design language opens with the gradient mesh. A wide horizontal band of pastel cream, sherbet orange, lavender, electric indigo, and ruby pink occupies the upper third of nearly every marketing page — the brand's instantly-recognizable atmospheric backdrop. Type and product UI mockups float above it on {colors.canvas} (white), with the gradient acting as both decoration and visual anchor. The lower portion of the page returns to white, with feature explanations on {colors.canvas-soft} (a barely-tinted cool off-white) and dashboard product mockups composited as faux IDE/console panels in deep navy.

The color system has two primary roles. Indigo ({colors.primary} — #533afd) is the brand's signature CTA color, used sparingly: one filled pill per band. Deep navy ({colors.ink} — #0d253d) is the universal body text color and the fill of dashboard mockups, the featured pricing tier, and the dark-app surfaces on the dashboard track. Ruby ({colors.ruby}) and magenta ({colors.magenta}) appear inside the gradient mesh and as accent dots in product UI mockups; they are not used as button colors.

...

Key Characteristics:

• Gradient-mesh backdrop on every marketing hero — cream/orange/lavender/indigo/ruby horizontally washed across the upper third of the page.
• ...

> Source pages: home (/), /payments, /pricing, dashboard.stripe.com/register/payments.

Brand & Accent

• Indigo ({colors.primary} — #533afd): The brand's signature CTA color. Filled-pill button, link emphasis, gradient anchor.
• Indigo Deep ({colors.primary-deep} — #4434d4): A deeper indigo used in gradient mid-stops and as the press-state warmer alternative.
• ...

Surface

• Canvas ({colors.canvas} — #ffffff): Default page background.
• Canvas Soft ({colors.canvas-soft} — #f6f9fc): Cool-tinted off-white used on feature bands beneath the gradient hero.
• ...

Text

• Ink ({colors.ink} — #0d253d): Default body text color across the brand. Deep navy, never pure black.
• Ink Secondary ({colors.ink-secondary} — #273951): Secondary text on white.
• ...

Semantic

Font Family

The display and UI tier is Sohne (proprietary, licensed from Klim Type Foundry) at weights 300 (thin) and 400 (regular). The variable font (sohne-var) is loaded with font-feature-settings: "ss01" enabled globally — the stylistic set substitutes a single-story a and other character variants that are part of the brand's typographic signature.

When Sohne is unavailable, fall back to SF Pro Display at thin weights, then system-ui. For maximum brand fidelity, Inter (open-source) at weight 300 with font-feature-settings: "ss01" and letter-spacing: -1.4px on display sizes approximates the rhythm closely.

Hierarchy

Principles

• Thin weight is the brand. Display tiers always render at weight 300. Bumping to 400+ removes the brand's editorial air.
• Negative tracking on display. -1.4px at 56px, scaling proportionally down to -0.2px at 20px. The negative tracking is the brand's typographic signature.
• ...

Note on Font Substitutes

Spacing System

• Base unit: 8px (with 2 / 4 / 12 sub-tokens for fine work).
• Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.huge} 64px.
• ...

Grid & Container

• Marketing pages center in a ~1200px container with the gradient mesh extending edge-to-edge above.
• Pricing collapses 4-up → 2-up → 1-up at 1024 / 768 breakpoints.
• ...

Whitespace Philosophy

Decorative Depth

Border Radius Scale

Photography Geometry

Buttons

button-primary-pill — the dominant CTA system-wide.

• Background {colors.primary}, text {colors.on-primary}, type {typography.button-md}, padding {spacing.sm} {spacing.lg} (8px 16px), rounded {rounded.pill} 9999px.
• ...

• Background {colors.canvas}, text {colors.primary}, 1px solid {colors.primary} border, same pill geometry.

• Background {colors.brand-dark-900}, text {colors.on-primary}, same pill geometry.

Cards & Containers

card-feature-light — feature explanation card on white.

• Background {colors.canvas}, padding {spacing.xxl}, rounded {rounded.lg} 12px, 1px {colors.hairline} border, optional Level 1 shadow.

• Background {colors.canvas}, padding {spacing.xxl}, rounded {rounded.lg}, 1px {colors.hairline} border. Title {typography.heading-lg}, price {typography.display-md}, body {typography.body-md}, CTA pinned bottom as button-primary-pill.

• Background {colors.brand-dark-900}, text {colors.on-primary}, otherwise identical structure to card-pricing. The deep-navy fill is the brand's distinctive featured-tier choice.

• Background {colors.canvas-cream}, text {colors.ink}, padding {spacing.xxl}, rounded {rounded.lg}. Used to break up the indigo / white rhythm with warmth.

• Background {colors.canvas}, type {typography.body-tabular} (with tnum), padding {spacing.xl} 24px, rounded {rounded.lg} 12px, Level 2 shadow. Often contains nested mini-mockups: code preview + dashboard table + chart card.

Inputs & Forms

text-input — standard form field.

• Background {colors.canvas}, text {colors.ink}, type {typography.body-md}, padding {spacing.sm} {spacing.md} (8px 12px), rounded {rounded.sm} 6px, 1px {colors.hairline-input} border.
• ...

Navigation

nav-bar-on-mesh — top nav floating over the gradient hero.

• Background {colors.canvas} (or transparent depending on scroll), text {colors.ink}, padding {spacing.lg} {spacing.xl}. Logo wordmark on the left, primary nav center, sign-in + filled button-primary-pill on the right.

Pills, Tags, and Chips

pill-tag-soft — subdued indigo tag.

• Background {colors.primary-bg-subdued-hover}, text {colors.primary-deep}, type {typography.micro-cap}, padding 4px 8px, rounded {rounded.pill}.

Signature Components

Gradient Mesh Backdrop — pastel cream → sherbet orange → lavender → indigo → ruby pink stops blurred horizontally across the upper third of the page. Implemented as SVG or a large background image — not a flat CSS gradient (the real mesh has organic blob shapes).

Composited Dashboard Mockup — multi-layer faux-product-UI compositions: an IDE panel on the left, a dashboard table center, a chart card on the right, all rendered at small scale inside {rounded.lg} containers with subtle Level 2 shadows. The composite is the brand's most-photographed feature.

Tabular-Figure Money Type — every number rendering money, count, or transaction value uses font-feature-settings: "tnum". The brand's quiet signal that it's a financial-infrastructure platform.

link-on-light — inline links on light surfaces.

• Text {colors.primary} rendered in {typography.body-md}, no underline by default.

• Background {colors.canvas}, text {colors.ink-mute}, type {typography.caption}, padding {spacing.huge} {spacing.xl} (64px 24px). Holds 4–6 columns of link groups, social icons, and a small legal row.

Do

• Reserve {colors.primary} for filled CTAs and inline link emphasis — it should appear sparingly, one filled button per band.
• Apply the gradient mesh to every marketing hero; bare-canvas heroes feel off-brand.
• Render display tiers at weight 300 with negative letter-spacing — the thin tracking is the typographic signature.
• Use font-feature-settings: "tnum" on every money / numeric cell.
• Apply font-feature-settings: "ss01" globally on the body element.
• Pair every feature explanation with a composited product UI mockup; the brand's argument is "look at the actual product."

Don't

• Don't bump display weight above 300 — at 400 the brand's editorial air collapses.
• Don't add new accent colors outside the documented gradient stops (cream / orange / lavender / indigo / ruby / magenta).
• Don't use the indigo {colors.primary} as a body-text color — it's a CTA and link color, not a type color at body size.
• Don't shrink button padding below 8px 16px — the tight pill is part of the brand's transactional feel.
• Don't render money cells without tnum — it breaks the quiet financial-data signature.
• Don't replace the pill shape with rounded-rectangles for buttons.

Breakpoints

Touch Targets

• Pill buttons hit ≥ 40×40px on mobile via padding scaling. On smaller screens, buttons size up to 44×44px to maintain WCAG AAA.
• Form fields stay at 40px minimum height.

Collapsing Strategy

• Display tiers stair-step 56 → 48 → 32 → 26 → 22px through the breakpoints.
• Gradient mesh re-tiles on mobile to preserve the wash without disappearing.
• ...

Image Behavior

1. Focus on ONE component at a time. 2. Reference component names and tokens directly ({colors.primary}, {button-primary-pill}-pressed, {rounded.pill}).

• ...

The parsed design tokens extracted from the core stylesheet of this design system: