24 KiB
| version | name | description | colors | typography | rounded | spacing | components | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| alpha | Stripi Inspired | 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. |
|
|
|
|
|
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 tight8px 16pxpadding — 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. ss01globally. Applyfont-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-pressedshifts 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 asbutton-primary-pill.
card-pricing-featured — the inverted dark featured tier.
- Background
{colors.brand-dark-900}, text{colors.on-primary}, otherwise identical structure tocard-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}(withtnum), 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 + filledbutton-primary-pillon 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}, padding4px 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.mdafter edits. - Add new variants as separate entries.
- Default body to
{typography.body-md}(15px); use{typography.body-tabular}for any money / numeric cell. - Apply
ss01globally on the body; applytnumper-element on numeric content. - The gradient mesh is non-negotiable on marketing heroes — bare-canvas heroes break the brand.