Stripe — DESIGN.md preview

version: alpha name: Stripi-Inspired-design-analysis description: An inspired interpretation of Stripi's design language — a financial-infrastructure brand built on a deep navy ink, an electric indigo primary, and a recurring atmospheric gradient mesh that occupies the upper third of nearly every marketing page. The system pairs the proprietary Sohne family at thin (300) weights with negative letter-spacing for editorial-density display headlines, and uses tabular-figure body type where money and numerics matter. Buttons are tight-radius pills, cards live on near-white surfaces, and the dashboard track flips polarity to a familiar dark-app shell.

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" on-primary: "#ffffff" canvas: "#ffffff" canvas-soft: "#f6f9fc" canvas-cream: "#f5e9d4" hairline: "#e3e8ee" hairline-input: "#a8c3de" ruby: "#ea2261" magenta: "#f96bee" lemon: "#9b6829" shadow-blue: "#003770"

typography: display-xxl: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 56px fontWeight: 300 lineHeight: 1.03 letterSpacing: -1.4px fontFeature: ss01 display-xl: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 48px fontWeight: 300 lineHeight: 1.15 letterSpacing: -0.96px fontFeature: ss01 display-lg: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 32px fontWeight: 300 lineHeight: 1.1 letterSpacing: -0.64px fontFeature: ss01 display-md: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 26px fontWeight: 300 lineHeight: 1.12 letterSpacing: -0.26px fontFeature: ss01 heading-lg: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 22px fontWeight: 300 lineHeight: 1.1 letterSpacing: -0.22px fontFeature: ss01 heading-md: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 20px fontWeight: 300 lineHeight: 1.4 letterSpacing: -0.2px fontFeature: ss01 heading-sm: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0 fontFeature: ss01 body-lg: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0 fontFeature: ss01 body-md: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 15px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0 fontFeature: ss01 body-tabular: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 300 lineHeight: 1.4 letterSpacing: -0.42px fontFeature: tnum button-md: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0 fontFeature: ss01 button-sm: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0 fontFeature: ss01 caption: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: -0.39px fontFeature: tnum micro: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 11px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0 fontFeature: ss01 micro-cap: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0.1px fontFeature: ss01

rounded: xs: 4px sm: 6px md: 8px lg: 12px xl: 16px pill: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px huge: 64px

components: button-primary-pill: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: 8px 16px button-primary-pill-pressed: backgroundColor: "{colors.primary-press}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: 8px 16px button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: 8px 16px button-on-dark: backgroundColor: "{colors.brand-dark-900}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: 8px 16px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 8px 12px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 8px 12px card-feature-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing-featured: backgroundColor: "{colors.brand-dark-900}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-cream-band: backgroundColor: "{colors.canvas-cream}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-dashboard-mockup: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-tabular}" rounded: "{rounded.lg}" padding: 24px pill-tag-soft: backgroundColor: "{colors.primary-bg-subdued-hover}" textColor: "{colors.primary-deep}" typography: "{typography.micro-cap}" rounded: "{rounded.pill}" padding: 4px 8px nav-bar-on-mesh: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 16px 24px link-on-light: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 0px footer-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-mute}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 24px

Overview

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.

Colors

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.

Typography

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.

Layout

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.

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.
Dashboard product mockups use their own internal grids (12-col tables, 3-col card grids) rendered as static composites.

Whitespace Philosophy

The gradient mesh occupies the upper third of the page; the white canvas below is generously padded. Section gaps tend toward 96px, with content tightening to 32px on dashboard / pricing pages where users compare and act.

Elevation & Depth

Level	Treatment	Use
0	Flat	Default surface
1	`box-shadow: rgba(0,55,112,0.08) 0 1px 3px`	Card lift on white
2	`box-shadow: rgba(0,55,112,0.08) 0 8px 24px, rgba(0,55,112,0.04) 0 2px 6px`	Floating panels, dashboard mockup chrome
3	Gradient mesh backdrop	The brand's primary depth medium — atmospheric color rather than literal shadow

Decorative Depth

The gradient mesh IS the depth system. Implemented as a layered SVG or large background image rather than CSS gradients (the actual mesh has organic blob shapes that aren't CSS-renderable). The mesh provides the brand's signature lift; literal shadows are reserved for product-UI mockups and stay subtle.

Shapes

Border Radius Scale

Token	Value	Use
`{rounded.xs}`	4px	Hairline tags, table chrome
`{rounded.sm}`	6px	Form inputs
`{rounded.md}`	8px	Compact cards, alerts
`{rounded.lg}`	12px	Pricing cards, feature cards
`{rounded.xl}`	16px	Dashboard product mockup chrome
`{rounded.pill}`	9999px	All buttons, tag pills

Photography Geometry

The brand uses product UI mockups more than photography. Dashboard composites render as faux IDE/terminal/dashboard chrome inside {rounded.lg} 12px containers with a subtle box-shadow. Real photography appears in customer logo strips and the rare case-study card; treated as inset 4:3 with no shadow.

Components

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.

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.

Responsive Behavior

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.

Iteration Guide

Focus on ONE component at a time.
Reference component names and tokens directly ({colors.primary}, {button-primary-pill}-pressed, {rounded.pill}).
Run npx @google/design.md lint DESIGN.md after edits.
Add new variants as separate entries.
Default body to {typography.body-md} (15px); use {typography.body-tabular} for any money / numeric cell.
Apply ss01 globally on the body; apply tnum per-element on numeric content.
The gradient mesh is non-negotiable on marketing heroes — bare-canvas heroes break the brand.