Skip to content
Back to extractor

Overview

Stripe's design system projects precision and trustworthiness through a cool blue-white neutral palette anchored by a vibrant indigo brand accent. The system uses a lightweight type scale built on the variable font "Sohne" at predominantly weight 300, creating an airy, editorial quality across all surfaces. Generous whitespace, subtle borders, and a carefully layered shadow system establish depth without visual noise.

Signature traits: lightweight 300-weight typography as default, indigo-purple brand accent (#533afd), cool blue-tinted neutrals, subtle dashed-border dividers, variable font with weight axis, responsive column grid (4/8/12 columns).

Colors

| Role | Token | Hex | Usage | |------|-------|-----|-------| | Background | --color-background | #f8fafd | Page backgrounds | | Surface | --color-surface | #ffffff | Card/panel backgrounds | | Text Primary | --color-text-primary | #061b31 | Headings, body copy | | Text Secondary | --color-text-secondary | #64748d | Captions, placeholders | | Border | --color-border | #e5edf5 | Dividers, outlines | | Accent | --color-accent | #533afd | CTAs, highlights, links |

Typography

| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | sohne-var, SF Pro Display, sans-serif | 3.5rem | 300 | 1.03 | -0.025em | Hero headlines | | Heading | sohne-var, SF Pro Display, sans-serif | 2rem | 300 | 1.1 | -0.01em | Section titles | | Body | sohne-var, SF Pro Display, sans-serif | 1rem | 300 | 1.4 | 0em | Paragraph text | | Caption | sohne-var, SF Pro Display, sans-serif | 0.75rem | 300 | 1.45 | 0em | Labels, metadata | | Mono | SourceCodePro, SFMono-Regular, monospace | 0.875rem | 500 | 1.6 | 0em | Code, data |

Layout

| Token | Value | Context | |-------|-------|---------| | Spacing XS | 4px | Inline gaps, icon padding | | Spacing SM | 8px | Component padding, tight gaps | | Spacing MD | 16px | Standard component padding | | Spacing LG | 32px | Section internal spacing | | Spacing XL | 64px | Section padding (tablet) | | Spacing 2XL | 96px | Section padding (desktop) | | Max Width | 1264px | Content container (--hds-space-layout-content-maxWidth) |

Responsive strategy: Three breakpoints — mobile default (4 columns, 0px page margin), tablet at 640px (8 columns, 16px page margin), desktop at 940px (12 columns, 16px page margin). A fourth navigation-specific breakpoint exists at 1300px for expanded sidebar layouts.

Elevation & Depth

| Level | CSS Value | Usage | |-------|-----------|-------| | sm | 0 5px 14px 0 rgba(0,55,112,.08), 0 2px 8px 0 rgba(0,59,137,.05) | Cards, tooltips | | md | 0 6px 22px 0 rgba(0,55,112,.10), 0 4px 8px 0 rgba(0,59,137,.02) | Dropdowns, popovers | | lg | 0 15px 40px -2px rgba(0,55,112,.10), 0 5px 20px -2px rgba(0,59,137,.04) | Modals, overlays |

Shapes

| Token | Value | Applied To | |-------|-------|-----------| | none | 0px | Flush/edge-to-edge elements | | sm | 4px | Buttons, inputs, small cards | | md | 6px | Navigation panels, dialog cards, larger containers | | lg | 16px | Dialogs, sheet modals | | xl | 32px | Large decorative containers | | full | 9999px | Pills, toggles, badge chips |

Components

Buttons: Primary buttons use the indigo accent (#533afd) background with white text at weight 400 (bold). Secondary buttons are transparent with a subtle brand-tinted border. Button heights are 44px (mobile/tablet) and 48px (desktop), with sm border-radius (4px). Compact variant at reduced block padding. Transition on background-color, color, and border at 0.3s cubic-bezier(.25,1,.5,1).

Navigation: Fixed-height navigation bar (76px) with a horizontal scroll-capable menu. Desktop view (940px+) uses a mega-menu popup with clip-path animation and backdrop-filter blur overlay. Mobile uses a slide-in overlay with hamburger button. Navigation items display animated chevron icons with custom cubic-bezier transitions.

Inputs: Text inputs are 48px tall with 1px border using a slightly transparent blue-tinted border (#d4dee9bf). Focus state adds a 4px outer shadow ring using the brand accent at low opacity. Error states use the error color (#d8351e). All inputs use the sm radius (4px).

Cards/Sections: Section containers use --hds-color-surface-bg-subdued (#f8fafd) backgrounds by default, with 1px solid #e5edf5 borders on inline edges (desktop only). Padding scales from 56px (mobile) to 64px (tablet) to 96px (desktop).

Dialogs/Sheets: On mobile, dialogs appear as bottom sheets with scroll-snap, drag handle, and 95svh max height. On desktop they are centered with 75vw max-width and 1rem border-radius. Overlay uses a blurred blue-tinted backdrop (rgba(229,237,245,0.9)).

Icons: Icon system uses gradient fills defined by three stops (brand-400 → brand-600 → brand-700) or flat single-color fills. Charm icons (40×40px) have sm border-radius and a quiet accent border.

Carousels/Marquees: Logo carousels use overflow scroll with grabbing cursor, momentum-based drag interaction, and optional centered/evenly-spaced variant. Items are 172px wide at standard height (56px mobile, 72px desktop).

Do's and Don'ts

| Do ✓ | Don't ✗ | |------|---------| | Use font-weight 300 (normal) for all body and display text | Use heavy font weights (600+) except for isolated bold labels | | Use the indigo brand accent (#533afd) for primary CTAs and interactive highlights | Use warm colors (red, orange) as primary UI colors — reserve them for accent/illustration only | | Apply cool blue-tinted neutrals from the palette for all grays | Introduce off-palette grays or warm neutrals | | Use the 4/8/12 column responsive grid with 16px gaps | Break the grid or use arbitrary pixel widths for content | | Apply border-radius sm (4px) to buttons and inputs, md (6px) to panels | Use sharp 0px corners on interactive elements | | Use text-wrap: pretty and text-wrap: balance for headings | Allow widows or unbalanced headline wrapping | | Use cubic-bezier(.25,1,.5,1) for UI transitions at 300ms | Use linear or ease transitions for interactive states |

Agent Prompt Guide

You are working within the Stripe design system. Key constraints:

  • —Colors: background #f8fafd, surface #ffffff, text primary #061b31, text secondary #64748d, border #e5edf5, accent #533afd
  • —Typography: "sohne-var" (sans-serif variable font) for all UI text at weight 300 (normal), weight 400 (bold/labels); "SourceCodePro" monospace for code/data
  • —Font sizes: display 3.5rem, heading 2rem, body 1rem, caption 0.75rem, mono 0.875rem
  • —Spacing: use the 8px base scale — xs 4px, sm 8px, md 16px, lg 32px, xl 64px, 2xl 96px
  • —Radius: sm (4px) for buttons/inputs, md (6px) for panels/cards, full (9999px) for pills
  • —Grid: 4 columns mobile, 8 tablet (640px+), 12 desktop (940px+), max-width 1264px
  • —Transitions: cubic-bezier(.25,1,.5,1) at 300ms for interactive states
  • —Elevation: use the two-shadow system (top + bottom layer) for cards and modals
  • —Never use font weights above 400, warm grays, or colors outside the defined palette
  • —Dark mode is supported via .hds-mode--dark class with the neutralDark and brandDark palettes