Stripe Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

20tokens

13type steps

5radius steps

2pxspacing base

Stripe, in one page

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.

Typography is built around Sohne at weight 300 with negative letter-spacing — the brand's editorial-density display signature. Display sizes (32–56px) use -1.4px to -0.64px tracking; body sizes use 0; tabular caption sizes (where money and numerics matter) use the OpenType tnum feature plus a tightening -0.36 to -0.42px tracking. The ss01 stylistic set is enabled across all roles.

Key Characteristics:

Gradient-mesh backdrop on every marketing hero — cream/orange/lavender/indigo/ruby horizontally washed across the upper third of the page.
Single-indigo CTA hierarchy: filled {colors.primary} pill is the only filled button on marketing surfaces.
Sohne thin (weight 300) display tier with negative tracking from -1.4px to -0.2px depending on size.
Tabular-figure body type (tnum) for any cell containing money or numerics — the brand's quiet financial-data signal.
Dark-app dashboard track: deep navy product UI mockups sit composited above the white canvas, frequently with rendered code or dashboard tables inside.
Pill-shaped buttons ({rounded.pill} 9999px) with tight 8px 16px padding — short, decisive, transactional.
Cream-band feature cards ({colors.canvas-cream}) introduce a warm interlude between blue/white sections without breaking the brand's chromatic logic.

Do's and don'ts

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.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Stripe design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #533afd
- primary-deep: #4434d4
- primary-press: #2e2b8c
- primary-soft: #665efd
- primary-bg-subdued-hover: #b9b9f9
- brand-dark-900: #1c1e54
- ink: #0d253d
- ink-secondary: #273951
- ink-mute: #64748d
- ink-mute-2: #61718a

Type:
- families: sohne-var, SF Pro Display, -apple-system, Sohne
- scale: 10, 11, 13, 14, 15, 16, 18, 20, 22
- weights: 300, 400

Shape:
- radius: 4, 6, 8, 12, 16
- elevation: "#003770"

Spacing: 2, 4, 8, 12, 16, 24, 32, 64

Rules:
- 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."

Avoid:
- 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.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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.
Indigo Press ({colors.primary-press} — #2e2b8c): Pressed-state lift of the primary.
Indigo Soft ({colors.primary-soft} — #665efd): A lighter indigo used in product-UI accents and chart highlights.
Indigo Subdued ({colors.primary-bg-subdued-hover} — #b9b9f9): Pale indigo fill used as soft tag background.
Brand Dark 900 ({colors.brand-dark-900} — #1c1e54): The deep navy used on the featured pricing tier and dashboard chrome.
Ruby ({colors.ruby} — #ea2261): Gradient accent and chart highlight; never a button.
Magenta ({colors.magenta} — #f96bee): Brighter pink stop in gradient meshes.
Lemon ({colors.lemon} — #9b6829): Warm sherbet stop in gradient backdrops.

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.
Canvas Cream ({colors.canvas-cream} — #f5e9d4): Warm cream used as a feature-band fill — the brand's chromatic interlude.
Hairline ({colors.hairline} — #e3e8ee): 1px borders on cards and tables.
Hairline Input ({colors.hairline-input} — #a8c3de): Slightly cooler hairline used on form inputs.

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.
Ink Mute ({colors.ink-mute} — #64748d): Helper text, captions, table labels.
Ink Mute 2 ({colors.ink-mute-2} — #61718a): Near-equivalent to ink-mute used in nav.
On Primary ({colors.on-primary} — #ffffff): Text on indigo / dark-navy surfaces.

Semantic

The brand does not use a separate semantic color palette in the marketing system — error / success states live in dashboard-product UI specifically.

Type scaleRead the full spec

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

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xxl}`	56px	300	1.03	-1.4px	Hero headline
`{typography.display-xl}`	48px	300	1.15	-0.96px	Section opener
`{typography.display-lg}`	32px	300	1.1	-0.64px	Card title / sub-section
`{typography.display-md}`	26px	300	1.12	-0.26px	Compact card title
`{typography.heading-lg}`	22px	300	1.1	-0.22px	Pricing tier name
`{typography.heading-md}`	20px	300	1.4	-0.2px	Section sub-heading
`{typography.heading-sm}`	18px	300	1.4	0	Mini-section label
`{typography.body-lg}`	16px	300	1.4	0	Marketing body lead
`{typography.body-md}`	15px	300	1.4	0	Default UI body
`{typography.body-tabular}`	14px	300	1.4	-0.42px	Money / numeric tables (uses `tnum`)
`{typography.button-md}`	16px	400	1.0	0	Pill button label
`{typography.button-sm}`	14px	400	1.0	0	Compact pill label
`{typography.caption}`	13px	400	1.4	-0.39px	Helper, table labels
`{typography.micro}`	11px	300	1.4	0	Fine print
`{typography.micro-cap}`	10px	400	1.15	0.1px	All-caps eyebrow

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.
Tabular figures for money. Any cell rendering currency, transaction amounts, or numeric counts uses font-feature-settings: "tnum" plus a tightening tracking. The brand quietly signals its financial DNA through this micro-detail.
ss01 globally. Apply font-feature-settings: "ss01" to the body element so the stylistic-set substitution is on for every text role.

Note on Font Substitutes

Sohne is proprietary. Use Inter (open-source via Google Fonts) at weight 300 with letter-spacing: -1.4px and font-feature-settings: "ss01" for display tiers — Inter is the closest open-source analogue. For body sizes, Inter at 300 weight with font-feature-settings: "tnum" (where applicable) is the canonical substitute. Avoid Helvetica or system-ui defaults — they're heavier than the brand needs.

Components and layoutRead the full spec

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.
Pressed state button-primary-pill-pressed shifts background to {colors.primary-press}.

button-secondary — outline-style alternative.

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

button-on-dark — used on dashboard / dark surfaces.

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.

card-pricing — standard pricing tier.

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.

card-pricing-featured — the inverted dark featured tier.

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.

card-cream-band — warm interlude card.

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

card-dashboard-mockup — composited dashboard / product UI screenshot.

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.
Focus state text-input-focused: border swaps to {colors.primary}.

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.

footer-light — site-wide footer.

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.

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.
Section padding: 64–96px on marketing surfaces; 32–48px on dashboard / product surfaces.
Card internal padding: 32px on feature cards; 24px on dashboard mockups.

Responsive behaviourRead the full spec

Breakpoints

Name	Width	Key Changes
Wide	≥ 1440px	Full gradient mesh edge-to-edge; dashboard composite at full scale
Desktop	1024–1440px	Default content max-width; pricing 4-up
Tablet	768–1023px	Pricing 2-up; dashboard composite simplifies to 2 panels
Mobile	< 768px	Pricing 1-up; hamburger nav; display drops 56 → 36px

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.
Dashboard composites simplify to single-panel mockups on mobile; the multi-layer composition only renders at desktop+.
Pricing tiers stair-step 4-up → 2-up → 1-up.

Image Behavior

Product UI composites use srcset with art-direction crops at major breakpoints. Mobile crops focus on the most actionable inner panel; desktop crops show the full multi-layer composition.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-stripe {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #0d253d;
  --heading-color: #0d253d;
  --link-color: #533afd;
  --link-hover-color: #2708fc;
  --border-color: #d3d8dc;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(13,37,61,0.06);
  --card-hover-shadow: 0 6px 18px rgba(13,37,61,0.12);
  --header-bg: #0d253d;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #627181;
  --button-bg: #533afd;
  --button-text-color: #ffffff;
  --button-hover-bg: #2708fc;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #f0f2f3;
  --button-secondary-text-color: #0d253d;
  --button-secondary-hover-bg: #e2e5e8;
  --button-secondary-border: 1px solid #d3d8dc;
  --prompt-bg: #f3f4f5;
  --prompt-text-color: #0d253d;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-inter);
  --card-border-radius: 8px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

supabase 76.8%
notion 74.3%
resend 71.9%
miro 71.7%
spiral 71.3%

Where this came from

Source document: volt/design-md/stripe/DESIGN.md · 23.9 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.