Stripi Design System

---

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

---

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:**

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

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

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.

| 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 |

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.

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.

| 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 |

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.

| 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 |

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.

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

**`button-secondary`** — outline-style alternative.

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

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

**`card-pricing`** — standard pricing tier.

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

**`card-cream-band`** — warm interlude card.

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

**`text-input`** — standard form field.

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

**`pill-tag-soft`** — subdued indigo tag.

**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.

**`footer-light`** — site-wide footer.

| 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 |

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.

1. Focus on ONE component at a time.

2. Reference component names and tokens directly (`{colors.primary}`, `{button-primary-pill}-pressed`, `{rounded.pill}`).

3. Run `npx @google/design.md lint DESIGN.md` after edits.

4. Add new variants as separate entries.

5. Default body to `{typography.body-md}` (15px); use `{typography.body-tabular}` for any money / numeric cell.

6. Apply `ss01` globally on the body; apply `tnum` per-element on numeric content.

7. The gradient mesh is non-negotiable on marketing heroes — bare-canvas heroes break the brand.