Stripi-design-analysis
B
82/100
design score
color discipline
B 80/100
curated markdown
ideal: live evidence
typography
B 80/100
curated markdown
ideal: font evidence
tokenization
C 70/100
heuristic frontmatter
ideal: extracted tokens
lint compliance
B 80/100
imported
ideal: 0E 0W
accessibility
C 70/100
not audited
ideal: 100% AA

## Visual archetype

Style classification against canonical archetypes (shadcn-neutral, apple-glass, carbon-enterprise, polaris-friendly, ...). Complementary to the technical Stack fingerprint above.

primary archetype
agent-ready · 0.55%
extracted signals

## Export tokens

## Colors

## Component preview (live tokens)

Token source: `preview_tokens` (LLM-resolved, 16 keys)
STRIPI-DESIGN-ANALYSIS · DESIGN SYSTEM

# The brand voice rendered live

Every token below is sourced from the live CSS. Buttons, cards, and surfaces use the same hex values your production stylesheet ships today.

#### Buttons

#### Editorial card

FEATURE
Headline that anchors the card
A short editorial line that demonstrates how body copy reads on this surface, paired with the heading typography above.
3 MIN READ UPDATED TODAY

#### Input + badges

Featured Outline ● Live ● Error

#### KPI tile

MONTHLY ACTIVE
128.4K
↑ 12.4% vs last month

#### Alerts

Success — Your DESIGN.md was extracted with full provenance.
Note — Token usage graph shows 247 unique tokens.
Error — Could not load some stylesheets.

#### Code block

    // design.tokens.ts
    export const tokens = {
      primary:   "#533afd",
      surface:   "#ffffff",
      text:      "#533afd",
    };

#### Type hierarchy

EYEBROW · MONO
Display heading typography
Body copy paired with the display heading shows how the type system reads in long form. The hierarchy travels from eyebrow (mono, accent color) through display (serif/sans large) to body (regular weig
Read more →

## Component variants matrix

Each cell renders a single button using the live tokens. Use this to audit the full surface of the component at a glance.

| SM | MD | LG
--- | --- | --- | ---
Primary · default |  |  |
Primary · hover |  |  |
Primary · disabled |  |  |
Secondary · default |  |  |
Secondary · hover |  |  |
Tertiary · default |  |  |

## Spacing

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

## Radius

xs
4px
sm
6px
md
8px
lg
12px
xl
16px
pill
full

## @font-face declarations

No @font-face declarations found.

## Typography

display-xxl ○○○ sohne-var · 300 · 56px
The quick brown fox jumps
display-xl ○○○ sohne-var · 300 · 48px
The quick brown fox jumps
display-lg ○○○ sohne-var · 300 · 32px
The quick brown fox jumps
display-md ○○○ sohne-var · 300 · 26px
The quick brown fox jumps
heading-lg ○○○ sohne-var · 300 · 22px
The quick brown fox jumps
heading-md ○○○ sohne-var · 300 · 20px
The quick brown fox jumps
heading-sm ○○○ sohne-var · 300 · 18px
The quick brown fox jumps
body-lg ○○○ sohne-var · 300 · 16px
Body copy for reading comfort and visual hierarchy.
body-md ○○○ sohne-var · 300 · 15px
Body copy for reading comfort and visual hierarchy.
body-tabular ○○○ sohne-var · 300 · 14px
Body copy for reading comfort and visual hierarchy.
button-md ○○○ sohne-var · 400 · 16px
Body copy for reading comfort and visual hierarchy.
button-sm ○○○ sohne-var · 400 · 14px
Body copy for reading comfort and visual hierarchy.
caption ○○○ sohne-var · 400 · 13px
Body copy for reading comfort and visual hierarchy.
micro ○○○ sohne-var · 300 · 11px
Body copy for reading comfort and visual hierarchy.
micro-cap ○○○ sohne-var · 400 · 10px
Body copy for reading comfort and visual hierarchy.

## Token usage graph

No tokens.

## Native CSS tokens (ground truth)

No CSS variables declared in source.

## WCAG contrast matrix

Computing…

AAA (≥7.0) AA (≥4.5) Fail (<4.5) cell shows ratio · hover for status

## DESIGN.md (raw)

    ---
    version: alpha
    name: Stripi-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
        letterSpacing: 0
        fontFeature: ss01
      button-sm:
        fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
        fontSize: 14px
        fontWeight: 400
        lineHeight: 1
        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
    source:
      type: awesome-design-md
      slug: stripe
      url: https://getdesign.md/stripe/design-md
    preview_tokens:
      button_primary_bg: '#533afd'
      button_primary_text: '#ffffff'
      button_primary_border: '#533afd'
      button_secondary_bg: transparent
      button_secondary_text: '#533afd'
      button_secondary_border: '#f6f9fc'
      button_tertiary_text: '#533afd'
      surface_bg: '#ffffff'
      card_bg: '#ffffff'
      text: '#533afd'
      text_muted: '#e3e8ee'
      border: '#f6f9fc'
      accent: '#533afd'
      button_radius: 8px
      card_radius: 12px
      input_radius: 8px
    ---

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

    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.

## Technical details

### Source

URL
  https://stripe.com/
External CSS files
  0
Preload CSS files
  0
@import resolved
  0
Inline <style> blocks
  0
Inline style="" attrs
  0
Failed fetches
  0
— detected —
Hex colors
  19
Font families
  1
Font sizes
  5
Radii
  0
Native CSS vars
  0
@font-face blocks
  0
Unique tokens (graph)
  0

### Audit

Detected tokens (regex pass over CSS)

    {
      "colors": {
        "hex": [
          "#533afd",
          "#4434d4",
          "#2e2b8c",
          "#665efd",
          "#b9b9f9",
          "#1c1e54",
          "#0d253d",
          "#273951",
          "#64748d",
          "#61718a",
          "#ffffff",
          "#f6f9fc",
          "#f5e9d4",
          "#e3e8ee",
          "#a8c3de",
          "#ea2261",
          "#f96bee",
          "#9b6829",
          "#003770"
        ],
        "hex_usage": {
          "#533afd": 3,
          "#4434d4": 2,
          "#2e2b8c": 2,
          "#665efd": 2,
          "#b9b9f9": 2,
          "#1c1e54": 2,
          "#0d253d": 3,
          "#273951": 2,
          "#64748d": 2,
          "#61718a": 2,
          "#ffffff": 4,
          "#f6f9fc": 2,
          "#f5e9d4": 2,
          "#e3e8ee": 2,
          "#a8c3de": 2,
          "#ea2261": 2,
          "#f96bee": 2,
          "#9b6829": 2,
          "#003770": 1
        }
      },
      "typography": {
        "family": [
          "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
        ],
        "size": [
          "12px",
          "16px",
          "24px",
          "36px",
          "48px"
        ]
      },
      "fonts": [],
      "spacing": [],
      "radii": []
    }

CSS fetch trace

    {
      "external": [],
      "preload": [],
      "imports_resolved": 0,
      "inline_style_blocks": 0,
      "inline_style_attrs": 0,
      "failed": []
    }

Quality score breakdown

    {
      "overall": 82,
      "grade": "B",
      "source": "imported-design-md",
      "note": "Imported from curated DESIGN.md; not scored from live extraction evidence.",
      "categories": {
        "color_discipline": {
          "score": 80,
          "grade": "B",
          "value": "curated markdown",
          "ideal": "live evidence"
        },
        "typography": {
          "score": 80,
          "grade": "B",
          "value": "curated markdown",
          "ideal": "font evidence"
        },
        "tokenization": {
          "score": 70,
          "grade": "C",
          "value": "heuristic frontmatter",
          "ideal": "extracted tokens"
        },
        "lint_compliance": {
          "score": 80,
          "grade": "B",
          "value": "imported",
          "ideal": "0E 0W"
        },
        "accessibility": {
          "score": 70,
          "grade": "C",
          "value": "not audited",
          "ideal": "100% AA"
        }
      }
    }