---
version: alpha
name: "stripe.com"
description: "Design system extracted from https://stripe.com/ on 2026-10-28"
colors:
  background: "#ffffff"
  surface: "#e5edf5"
  surface-2: "#ffe0ef"
  surface-3: "#ffe0d1"
  foreground: "#061b31"
  muted-foreground: "#64748d"
  primary: "#533afd"
  on-primary: "#ffffff"
  secondary: "#0f4d29"
  border: "#e5edf5"
typography:
  headline-display:
    fontFamily: "sohne-var"
    fontSize: "48px"
    fontWeight: 300
    lineHeight: "55.2px"
    letterSpacing: "-0.96px"
  headline-lg:
    fontFamily: "sohne-var"
    fontSize: "32px"
    fontWeight: 300
    lineHeight: "35.2px"
    letterSpacing: "-0.64px"
  headline-md:
    fontFamily: "sohne-var"
    fontSize: "26px"
    fontWeight: 300
    lineHeight: "29.12px"
    letterSpacing: "-0.26px"
  body-md:
    fontFamily: "sohne-var"
    fontSize: "16px"
    fontWeight: 300
    lineHeight: "22.4px"
  label-md:
    fontFamily: "sohne-var"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.4"
  button:
    fontFamily: "sohne-var"
    fontSize: "10px"
    fontWeight: 400
    lineHeight: "11.5px"
    letterSpacing: "0.1px"
rounded:
  none: "0px"
  sm: "4px"
  md: "6px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
  8: "40px"
components:
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "#061b31"
    typography: "{typography.button}"
    rounded: "4px"
    height: "40px"
    padding: "12px 0px"
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "#533afd"
    typography: "{typography.button}"
    rounded: "4px"
    height: "40px"
    padding: "10.5px 20px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "4px"
    height: "40px"
    padding: "11.5px 20px"
  input:
    backgroundColor: "transparent"
    rounded: "0px"
    height: "46px"
  card:
    backgroundColor: "#ffffff"
    rounded: "6px"
    padding: "0px"
---

# stripe.com

## Overview

Stripe | Financial Infrastructure to Grow Your Revenue: Stripe is a financial services platform that helps all types of businesses accept payments, build flexible billing models, and manage money movement.

Sharp, squared-off controls, layered shadows for depth, confident display type at 48px / 300, a single blue accent on neutrals. The site ships in light mode by default. Measured from 3924 rendered elements at 1440px wide on 2026-10-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/brand-logo.png`: primary logo lockup
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r1-icons.png`: r1 icons: icon placement and nearby text
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r2-icons.png`: r2 icons: icon placement and nearby text
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/region-r3-icons.png`: r3 icons: icon placement and nearby text
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page
- `screenshots/phone-390-menu.png`: Phone 390, navigation menu open
- `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png
- `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png
- `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/c-button-1--rest.png`: Button 1 ("Read the letter"), rest
- `screenshots/c-button-1--hover.png`: Button 1 ("Read the letter"), hover
- `screenshots/c-button-1--focus.png`: Button 1 ("Read the letter"), focus
- `screenshots/c-button-1--active.png`: Button 1 ("Read the letter"), active
- `screenshots/c-button-1--disabled.png`: Button 1 ("Read the letter"), disabled
- `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest
- `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus
- `screenshots/c-icon-button-1--active.png`: Icon button 1, active
- `screenshots/c-icon-button-1--disabled.png`: Icon button 1, disabled
- `screenshots/c-link-1--rest.png`: Text link 1 ("View services"), rest
- `screenshots/c-link-1--hover.png`: Text link 1 ("View services"), hover
- `screenshots/c-link-1--focus.png`: Text link 1 ("View services"), focus
- `screenshots/c-link-1--active.png`: Text link 1 ("View services"), active
- `screenshots/c-text-input-1--rest.png`: Text input 1, rest
- `screenshots/c-text-input-1--disabled.png`: Text input 1, disabled
- `screenshots/c-text-input-1--filled.png`: Text input 1, filled
- `screenshots/c-combobox-1--rest.png`: Combobox / custom select 1, rest
- `screenshots/c-combobox-1--focus.png`: Combobox / custom select 1, focus
- `screenshots/c-overlay-dropdown-menu-1--open.png`: Dropdown menu 1 opened by combobox
- `screenshots/c-label-1--rest.png`: Field label 1 ("Get industry insights an"), rest
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Pricing"), rest
- `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("Pricing"), hover
- `screenshots/c-feature-item-1--rest.png`: Feature item (icon + title + text) 1 ("Professional services.Ge"), rest
- `screenshots/c-avatar-1--rest.png`: Avatar 1, rest
- `screenshots/c-avatar-group-1--rest.png`: Avatar stack 1, rest
- `screenshots/c-divider-1--rest.png`: Divider 1, rest
- `screenshots/c-code-1--rest.png`: Code block / inline code 1 ("1 const stripe = require"), rest
- `screenshots/c-image-1--rest.png`: Image / figure 1, rest
- `screenshots/c-carousel-1--rest.png`: Carousel / slider 1, rest
- `screenshots/c-logo-strip-1--rest.png`: Logo strip 1, rest
- `screenshots/c-icon-1--rest.png`: Icon 1, rest
- `screenshots/c-newsletter-form-1--rest.png`: Newsletter / signup form 1 ("Get industry insights an"), rest
- `screenshots/c-button-2--rest.png`: Button 2 ("Get started"), rest
- `screenshots/c-button-2--hover.png`: Button 2 ("Get started"), hover
- `screenshots/c-button-2--focus.png`: Button 2 ("Get started"), focus
- `screenshots/c-button-2--active.png`: Button 2 ("Get started"), active
- `screenshots/c-button-2--disabled.png`: Button 2 ("Get started"), disabled
- `screenshots/c-icon-button-2--rest.png`: Icon button 2, rest
- `screenshots/c-icon-button-2--focus.png`: Icon button 2, focus
- `screenshots/c-icon-button-2--disabled.png`: Icon button 2, disabled
- `screenshots/c-link-2--rest.png`: Text link 2 ("Lovable grows into a vib"), rest
- `screenshots/c-link-2--focus.png`: Text link 2 ("Lovable grows into a vib"), focus
- `screenshots/c-combobox-2--rest.png`: Combobox / custom select 2 ("United States(English)"), rest
- `screenshots/c-combobox-2--hover.png`: Combobox / custom select 2 ("United States(English)"), hover
- `screenshots/c-combobox-2--focus.png`: Combobox / custom select 2 ("United States(English)"), focus
- `screenshots/c-overlay-dropdown-menu-2--open.png`: Dropdown menu 2 opened by combobox "United States(English)"
- `screenshots/c-badge-2--rest.png`: Badge / pill / tag 2 ("ERP"), rest
- `screenshots/c-card-2--rest.png`: Card 2, rest
- `screenshots/c-feature-item-2--rest.png`: Feature item (icon + title + text) 2 ("Stripe Startups program."), rest
- `screenshots/c-feature-item-2--hover.png`: Feature item (icon + title + text) 2 ("Stripe Startups program."), hover
- `screenshots/c-list-2--rest.png`: Styled list 2 ("Lovable grows into a vib"), rest
- `screenshots/c-divider-2--rest.png`: Divider 2, rest
- `screenshots/c-image-2--rest.png`: Image / figure 2, rest
- `screenshots/c-icon-2--rest.png`: Icon 2, rest
- `screenshots/c-button-3--rest.png`: Button 3 ("Accept and optimize paym"), rest

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#e5edf5` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#ffe0ef` | Secondary surface |
| surface-3 | `#ffe0d1` | Secondary surface |
| foreground | `#061b31` | Primary text |
| muted-foreground | `#64748d` | Secondary text, captions |
| primary | `#533afd` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#0f4d29` | Secondary accent (green) |
| border | `#e5edf5` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#0d1738`, `#e5edf5`, `#122054`, `#0f4d29`, `#5d0252`, `#533afd`, `#2b408a`.

Gradients in use: `radial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237, 245) 66%)`; `radial-gradient(102.82% 106.44% at 50% 106.44%, rgb(252, 253, 254) 1.11%, rgb(103, 99, 228) 28.73%, rgb(69, 59, 179) 45.76%, rgb(41, 34, 125) 63.37%, rgb(30, 32, 100) 78.67%, rgb(20, 30, 75) 100%)`; `radial-gradient(50% 50%, rgb(255, 207, 94) 41.35%, rgba(255, 207, 94, 0) 100%)`.

The accent `#533afd` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **sohne-var** for h1, h2, h3, body, label, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | sohne-var | 48px | 300 | 55.2px | -0.96px |
| headline-lg | sohne-var | 32px | 300 | 35.2px | -0.64px |
| headline-md | sohne-var | 26px | 300 | 29.12px | -0.26px |
| body-md | sohne-var | 16px | 300 | 22.4px | normal |
| label-md | sohne-var | 16px | 400 | 1.4 | normal |
| button | sohne-var | 10px | 400 | 11.5px | 0.1px |
- label-md: observed (source label); inferred fields: lineHeight.

Type scale in use: 10px, 11px, 12px, 14px, 15px, 16px, 22px, 26px, 32px, 48px, 56px. Base body size 16px.

The hero heading (h1) renders at 48px / 300, start aligned, up to 1018px wide, tracking -0.96px. Sample: "Financial infrastructure to grow your revenue. Accept payments, handle business ".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 40 (px).
- Flex and grid gaps: 4, 8, 12, 16, 24, 28, 32, 40 px.
- Content max width: 1232px, centred.
- Breakpoints: 600px, 639px, 640px, 939px, 940px.
- Header: 76px tall, relative, background `rgba(0, 0, 0, 0)`; 4 nav links at 16px / 400 (Pricing · Sign inSign in · Contact sales).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(3, 3, 39, 0.25) 0px 14.088px 21.132px -14.088px, rgba(0, 0, 0, 0.1) 0px 8.453px 16.906px -8.453px`
- shadow-2: `rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px`
- shadow-3: `rgba(23, 23, 23, 0.08) 0px 15px 35px 0px`
- shadow-4: `rgba(23, 23, 23, 0.06) 0px 3px 6px 0px`

## Shapes

- Buttons: 4px
- Inputs: 0px
- Cards and panels: 6px
- Images and media: 0px
- Radius scale: none 0px, sm 4px, md 6px, full 9999px

## Components

### Button, ghost

Background transparent, text `#061b31`, border none, radius 4px, height 40px, padding 12px 0px, 14px / 400. Sample label: "Products".

### Button, secondary

Background transparent, text `#533afd`, border 1px solid #ffffff, radius 4px, height 40px, padding 10.5px 20px, 14px / 400. Sample label: "Sign in".

### Button, primary

Background `#533afd`, text `#ffffff`, border none, radius 4px, height 40px, padding 11.5px 20px, 14px / 400. Sample label: "Contact sales".

### Input

Height 46px, background `transparent`, border 0px solid #061b31, radius 0px, 16px text, padding 0px 15px.

### Card

Background `#ffffff`, border none, radius 6px, padding 0px, shadow `rgba(23, 23, 23, 0.06) 0px 3px 6px 0px`. Typical size about 618×539px.

### Link

Colour `#061b31`, no underline at rest, weight 400.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (29 of 87 in the checklist, 63 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 27 state changes, 2 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | outline-icon-right, primary-icon-right, ghost-icon-right lg, ghost, ghost sm, secondary-icon-right sm, outline-with-icon sm, ghost sm | hover, focus, active, disabled | "Read the letter" |
| Icon button | ghost, secondary, ghost | focus, active, disabled |  |
| Text link | plain-accent, plain, plain-accent, plain-accent | hover, focus, active | "View services" |
| Close / dismiss button | ghost | rest only |  |
| Text input | outlined | disabled, filled, placeholder |  |
| Combobox / custom select | outlined sm, outlined sm | focus, open, hover |  |
| Field label | above | rest only | "Get industry insights and upda" |
| Header / navbar | default | rest only | "ProductsSolutionsDevelopersRes" |
| Menu / dropdown trigger | ghost | rest only | "Products" |
| Footer | default | rest only | "Products and pricingPricingAtl" |
| Footer link | plain | hover | "Pricing" |
| Badge / pill / tag | success-square, brand-square, brand-square, subtle-square, subtle-square | rest only | "Succeeded" |
| Card | filled-interactive, filled-interactive, flat, filled-interactive-with-media, flat-interactive-with-media, flat-interactive | rest only | "Pay RoasteryCartsy bezahlenSho" |
| Feature item (icon + title + text) | flat, filled-interactive-media-top, flat-interactive | hover | "Professional services.Get tail" |
| Styled list | default, default | rest only |  |
| Avatar | 34px-round, 38px-round | rest only |  |
| Avatar stack | default | rest only |  |
| Divider | horizontal, horizontal | rest only |  |
| Code block / inline code | block | rest only | "1 const stripe = require('stri" |
| Image / figure | aspect-0.93, aspect-0.93, aspect-1 | rest only |  |
| Carousel / slider | default | rest only |  |
| Logo strip | default | rest only |  |
| Icon | outline-40px, outline-61px, outline-24px | rest only |  |
| Newsletter / signup form | default | rest only | "Get industry insights and upda" |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Search field, Textarea, Select (native), Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Help / hint text, Validation error text, Fieldset / form section, Navigation link, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Testimonial / quote card, Stat / metric, List row / menu row, Table, Table row, Accordion / disclosure, Keyboard key, Blockquote, Video / media embed, Eyebrow / kicker, FAQ block, Call-to-action band, Search results / listing row, Sticky bar.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1232px | 208px | 16px | 48px, 4 lines, start | 76px, 3 links, 1 CTA | media below text | 2→1 col; 6→2 col; 2→2 col | 1 full-width |
| laptop 1024px | 958px | 114px | 16px | 46.1px, 5 lines, start | 76px, 3 links, 1 CTA | media below text | 2→1 col; 6→2 col; 2→2 col | 1 full-width |
| tablet 768px | 702px | 33px | 16px | 40px, 5 lines, start | 66px, hamburger (Toggle navigation menu), 1 CTA | media below text | 6→2 col; 2→2 col; 4→4 col | 2 full-width |
| phone 390px | 358px | 16px | 16px | 34px, 2 lines, start | 66px, hamburger (Toggle navigation menu), 1 CTA | media below text | 2→2 col; 4→4 col; 2→2 col | 13 full-width |

- H1 goes 48px → 34px (71%), 4 → 2 lines.
- Nav collapses to a hamburger by 390px (first seen at 768px); header 76px → 66px.
- Body text is 16px at the sampled desktop and phone widths.
- Phone side gutter 16px.
- 13 buttons stretch full-width on phones.

## Interaction & Motion

563 elements carry transitions; typical 0.3s with cubic-bezier(0.25, 1, 0.5, 1), mostly on color, opacity, transform. 4 running keyframe animations (book-of-the-week-fade-in 0.5s 1; detect-scroll auto 1; UniversalChatInitializer__ctaEntrance 0.3s 1).

- Hover on button-primary ("Contact sales"): background #533afd → #4032c8; cursor pointer; transition color, background-color, border-color | 0.24s, 0.24s, 0.24s | cubic-bezier(0.45, 0.05, 0.55, 0.95), cubic-bezier(0.45, 0.05, 0.55, 0.95), cubic-bezier(0.45, 0.05, 0.55, 0.95) | delay 0s, 0s, 0s.
- Hover on button-secondary ("Sign in"): background transparent → #ffffff, text #533afd → #2e2b8c, border #ffffff → #4032c8, icon/inner colour → #2e2b8c; cursor pointer; transition color, background-color, border-color | 0.24s, 0.24s, 0.24s | cubic-bezier(0.45, 0.05, 0.55, 0.95), cubic-bezier(0.45, 0.05, 0.55, 0.95), cubic-bezier(0.45, 0.05, 0.55, 0.95) | delay 0s, 0s, 0s.
- Hover on nav-link ("Pricing"): no visible change; cursor pointer; transition color, background-color, border-color | 0.24s, 0.24s, 0.24s | cubic-bezier(0.45, 0.05, 0.55, 0.95), cubic-bezier(0.45, 0.05, 0.55, 0.95), cubic-bezier(0.45, 0.05, 0.55, 0.95) | delay 0s, 0s, 0s.
- Focus on button-primary: outline 3px solid rgba(84, 82, 251, 0.75), offset 1px.
- Tooltip triggers exist (5 × aria-describedby, 1 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- Hover/click menus: below the trigger, 12px gap, shifted right; #ffffff, radius 0px, padding 0px 0px, shadow yes; 66 items, 42px tall, 14px, padding 0px 0px, with icons, with descriptions, 2 columns; appears after a delay; hides within 400ms of leaving (transition or unmount).
- 49 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#533afd` where supported by measured component or regional evidence; its accent role is inferred.
- Do keep body text at 16px in sohne-var.
- Do match corner radii per element class (buttons 4px, cards 6px); do not pick one radius for everything.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from browser-default; large surface colors remain in the palette.