Stripe | Financial Infrastructure to Grow Your Revenue

Design Specification — Stripe | Financial Infrastructure to Grow Your Revenue

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#0D1738), a vivid accent (#635BFF). All type is set in var(--hds-font-family). Detected font weights: 300, 400, 500, 600. Detected style signatures: soft-ui / layered elevation; gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://images.stripeassets.com/fzn2n1nzq965/24BNV3GGtvCprFLrYovyaa/b2eac20a1d5ec75e4bff3888b998d163/enterprise-accordion-hertz.png?w=296&q=90 · https://images.stripeassets.com/fzn2n1nzq965/37wKFanVluouT2iEZUbD0H/f75e77141e1330ad81ea18c6aea65f0c/enterprise-accordion-urbn.png?w=296&q=90

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Gradients

• linear-gradient(90deg,#533afd 0,#533afd 20%,#fb76fa 40%,#ff6118 60%,#ff6118 100%),
• radial-gradient(66.35% 66.35% at 50% 50%,hsla(0,0%,100%,.9) 0,hsla(0,0%,100%,0) 100%),hsla(0,0%,100%,.8)
• linear-gradient(transparent,rgba(236,239,241,.8))
• linear-gradient(180deg,#000,#fff 20%,#fff 80%,#000)
• linear-gradient(90deg,#7232f1 3.13%,#fb76fa 50%,#ffcf5e)
• radial-gradient(50% 50% at 50% 50%,rgba(83,58,253,.8) 62.5%,rgba(83,58,253,0) 100%)
• radial-gradient(50% 50% at 50% 50%,rgba(243,99,243,.8) 53.85%,rgba(243,99,243,0) 100%)
• radial-gradient(50% 50% at 50% 50%,#ffcf5e 41.35%,rgba(255,207,94,0) 100%)
• linear-gradient(180deg,#fff 41.35%,hsla(0,0%,100%,0))
• linear-gradient(90deg,transparent 0,#1318c1 50%,transparent 100%)

> 10 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: var(--hds-font-family) — stack: var(--hds-font-family)

Font stacks (most used first)

• var(--hds-font-family)
• sohne-var
• SourceCodePro
• -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif
• inherit
• "sohne-var","SF Pro Display",sans-serif

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• inset 0 0 0 2px
• 0 30px 60px -50px #0000001a,0 30px 60px -10px #32325d40
• 0 -1px 0 0
• 0 10px 50px -7.79776px rgba(55,39,37,.15)
• 0 -20px 30.64px 0 hsla(0,0%,9%,.08),0 20px 30.64px 0 hsla(0,0%,9%,.08)
• 0 -30px 60px -12px rgba(50,50,93,.25),0 -18px 36px -18px rgba(0,0,0,.3)
• 0 30px 60px -12px rgba(50,50,93,.25),0 18px 36px -18px rgba(0,0,0,.3)
• -30px 0 60px -12px rgba(50,50,93,.25),-18px 0 36px -18px rgba(0,0,0,.3)
• 30px 0 60px -12px rgba(50,50,93,.25),18px 0 36px -18px rgba(0,0,0,.3)

Layout

Container max-width: 939px

Grid columns (largest detected grid): 12

Breakpoints

• 600px
• 639px
• 639.9999px
• 640px
• 939px
• 940px
• 1264px
• 1300px

Animation & Motion

Transitions

• background-size .3s ease-out
• opacity 240ms cubic-bezier(0.45,0.05,0.55,0.95)
• fill 240ms cubic-bezier(0.45,0.05,0.55,0.95) 0s
• color 240ms cubic-bezier(0.45,0.05,0.55,0.95) 0s,background-color 240ms cubic-bezier(0.45,0.05,0.55,0.95) 0s,border-color 240ms cubic-bezier(0.45,0.05,0.55,0.95) 0s
• transform 0.25s cubic-bezier(.6,0,.2,.5)
• opacity 0.25s ease-in
• opacity 240ms cubic-bezier(0.45,0.05,0.55,0.95) 0s
• transform 0.25s ease-in-out,opacity 0.25s ease-in-out,fill .1s ease-in-out
• transform 0.25s ease-in-out,opacity 0.25s ease-in-out 0.25s
• transform 0.25s ease-in-out,opacity 0.25s ease-in-out 0s
• opacity 300ms cubic-bezier(0.45,0.05,0.55,0.95)
• opacity .25s linear

Easing curves

• cubic-bezier(0.45,0.05,0.55,0.95)
• cubic-bezier(.6,0,.2,.5)
• var(--navigation-easing)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.25,1,.5,1)
• cubic-bezier(0.25,1,0.5,1)
• cubic-bezier(0.165,0.84,0.44,1)
• cubic-bezier(.16,1,.3,1)

Keyframes

@keyframes nav-hover-arrow-in { 0%{opacity:0;transform:translateX(-3px)}to{opacity:1;transform:translateX(0)} }
@keyframes nav-hover-arrow-out { 0%{opacity:1}to{opacity:0} }
@keyframes detect-scroll { 0%,to{--can-scroll: } }
@keyframes navigation-menu-delay-reset { 0%,to{--navigation-menu-transition-delay:0s} }
@keyframes bento-overlay-gradient-opacity-animation { 0%{opacity:0}to{opacity:1} }
@keyframes bento-dialog-reveal-fade-in-up { 0%{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:translateZ(0)} }
@keyframes agentic-commerce-graphic-border-spin { 0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)} }
@keyframes book-of-the-week-fade-in { 0%{opacity:0}to{opacity:1} }
@keyframes opacityAnimation { 0%{background-color:rgba(229,237,245,0)}to{background-color:rgba(229,237,245,.7)} }

Animations

• detect-scroll linear
• detect-scroll linear,navigation-menu-delay-reset 0s linear .1s forwards
• book-of-the-week-fade-in .5s cubic-bezier(.33,1,.68,1)

CTA labels found on page

• Products
• Solutions
• Developers
• Resources
• Pricing
• Sign in
• Start now
• Contact sales

Effects

• backdrop-filter: blur(5px)

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --suite-color: #ff6118;
  --stop-color: #fb76fa;
  --gradient-color: #533afd;
  --secondary: has(>.sessions-banner)>:nth-last-child(2);
  --section-container-margin-inline-bleed: calc(-1 * var(--section-container-padding-inline, var(--hds-space-layout-content-margin)));
  --section-row-gap-mb: initial;
  --section-row-gap-tb: initial;
  --section-row-gap-dt: initial;
  --section-row-align-mb: initial;
  --section-row-align-tb: initial;
  --section-row-align-dt: initial;
  --navigation-height: 76px;
  --navigation-border-radius: 0;
  --navigation-easing: cubic-bezier(0.45,0.05,0.55,0.95);
  --navigation-duration: 240ms;
  --navigation-duration-slow: 300ms;
  --navigation-hamburger-duration: 0.25s;
  --navigation-inline-start: var(--hds-space-layout-content-margin);
  --navigation-inline-end: var(--hds-space-core-150);
  --section-container-border-inline: none;
  --section-container-padding-inline: 0;
  --section-container-pbs: 0;
  --section-container-pbe: 0;
  --first-child-visibility-if-can-scroll: var(--can-scroll) visible;
  --last-child-visibility-if-can-scroll: var(--can-scroll) hidden;
  --visibility-if-cannot-scroll: visible;
  --overflow-if-can-scroll: var(--can-scroll) hidden;
  --overflow-if-cannot-scroll: scroll;
  --navigation-content-padding: var(--hds-space-core-300);
  --homepage: not([aria-expanded=true]) .navigation-hamburger__background;
  --navigation-menu-transition-delay: 0s;
  --navigation-menu-footer-height: 80px;
  --bordered: after,.navigation__layout.navigation__layout--bordered:before;
  --guide-me: before;
  --hero-font-lang-large: 2.125rem;
  --hero-font-lang-medium: 2.125rem;
  --hero-font-lang-small: 2.125rem;
  --hero-font-lang-min: 2.125rem;
  --section-container-pbs-dt: var(--hds-space-core-450);
  --section-container-pbe-dt: var(--hds-space-core-450);
  --lang-font-max: var(--hero-font-lang-medium);
  --lang-font-min: var(--hero-font-lang-min);
  --lang-font-flex: 6lvh;
  --foreground: :selection;
  --hero-logo-wall-height: calc(5 * var(--hds-space-core-800) + var(--hds-space-core-border-sm));
  --section-container-border-block-end: var(--hds-space-core-border-sm) solid var(--hds-color-surface-border-quiet);
  --graphic-source-width: 0;
  --graphic-source-height: 0;
  --graphic-aspect-ratio: 1/1;
  --graphic-scale: 1;
  --graphic-max-width: 100%;
  --graphic-reveal-duration: 300ms;
  --graphic-reveal-easing: cubic-bezier(0.25,1,0.5,1);
  --horizontal-scale-left: 0;
  --horizontal-transform: 0;
  --card-ease: cubic-bezier(0.165,0.84,0.44,1);
  --card-duration: 800ms;
  --card-scale: 1;
  --card-shift-x: 0;
  --card-shift-y: 0;
}

Do's and Don'ts

Do

• Do reserve the accent #635BFF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 400, 500, 600.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #533AFD;
  --color-accent: #635BFF;
  --color-background: #FFFFFF;
  --color-surface: #F8FAFD;
  --color-text-primary: #0D1738;
  --color-secondary: #0D1738;
  --color-text-secondary: #32325D;
  --color-border: #E3ECF7;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --font-sans: var(--hds-font-family);
  --font-size-display: 48px;
  --font-size-headline-lg: 34px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 1px;
  --radius-pill: 100%;
  --shadow-sm: 0 30px 60px -50px #0000001a,0 30px 60px -10px #32325d40;
  --shadow-md: 0 -30px 60px -12px rgba(50,50,93,.25),0 -18px 36px -18px rgba(0,0,0,.3);
  --shadow-lg: 30px 0 60px -12px rgba(50,50,93,.25),18px 0 36px -18px rgba(0,0,0,.3);
  --space-xs: 3px;
  --space-sm: 8px;
  --space-md: 24px;
  --space-lg: 32px;
  --tracking-display: -.02em;
  --tracking-label: .003em;
  --container-max: 939px;
}