Stripi-Inspired-design-analysis

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

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

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

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

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

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.