Stripe

silk ribbon over a ledger grid

Fintech Light light precise gradient elegant corporate cool Built with Next.js

A bright, confident fintech site that reads like a precise financial document with one expensive flourish. Most pages are white or pale blue-grey (#f6f9fc) with navy text. Across them run silky ribbon gradients in orange, magenta, violet and sky blue, set on a diagonal. Faint dashed vertical guide lines show the page grid. What makes it distinctive is the contrast: light, calm, very well-set type sits next to one lush, saturated gradient that feels almost physical, plus dense product-UI mockups that prove the platform is real.

The type is Söhne (sohne-var) throughout. It uses unusual in-between weights: 300 for display headlines and body copy, 425 for links and buttons, and 500 for editorial headings. Large text gets slight negative tracking, and body text gets +0.2px. Headlines are often two-tone: the first sentence is in navy (#061b31) and the rest fades to slate (#425466). Colour is restrained. Deep navies (#0a2540, #0d1738) handle text and dark sections, and blurple (#533afd, #635bff) is the only interactive colour. Corners are tight (4px) on hero buttons and cards, with 16.5px pills for compact CTAs. Shadows are soft and layered, with a blue-grey tint (rgba(50,50,93,.25)). Spacing sits on a 4px grid, and sections are separated by 112–128px of space.

https://stripe.com

Colors

Click a swatch to copy

Typography

display

Söhne (sohne-var)

300 · 500 · falls back to Inter, Helvetica Neue, Arial, sans-serif

Variable Söhne. The hero display uses a light 300 with -0.02em tracking. Article and page H1/H2 use 500 with tight negative tracking. Headlines are often two-tone: navy lead sentence, slate continuation.
body

Söhne (sohne-var)

200 · 300 · 400 · 425 · 500 · falls back to Inter, Helvetica Neue, Arial, sans-serif

Body copy is 300 weight with +0.2px tracking and a generous 1.56 line height. Links, buttons and strong labels use the in-between 425 weight (CTA font: 425 15px/1.6).
mono

Source Code Pro

500 · 700 · falls back to JetBrains Mono, ui-monospace, Menlo, monospace

Used sparingly for code snippets and API samples in developer sections.

Article Display

56px / 1.21

500 · -1.12px

Stripe

Hero Display

48px / 1.15

300 · -0.96px

Stripe

Page H1

38px / 1.26

500 · -0.2px

Silk ribbon over a ledger grid

34px / 1.29

500 · -0.1px

Silk ribbon over a ledger grid

H3 / Feature Title

26px / 1.12

300 · -0.26px

Silk ribbon over a ledger grid

Card Title

22px / 1.1

300 · -0.22px

The quick brown fox jumps over the lazy dog

Body Large

18px / 1.56

300 · 0.2px

The quick brown fox jumps over the lazy dog

Body / UI

16px / 1.4

300 · normal

The quick brown fox jumps over the lazy dog

Button / Nav

15px / 1.6

425 · normal

The quick brown fox jumps over the lazy dog

Code

14px / 1.5

500 · normal

The quick brown fox jumps over the lazy dog

Spacing & Shape

Spacing

Base unit: 4px
Density: comfortable
Container: 1266px
Section gap: 112px
Card padding: 22px

112

128

Radius

Hero buttons, small cards, tiles 4px
Compact pill CTAs (Contact sales, Get started) 16.5px
Feature cards, pricing panels 6px
Bordered content cards, sidebar panels, media 8px
Email input 20px
Avatars, icon dots 50%

Shadows

Button lift Small raised controls, tab pills and mockup chips

rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px

Card float Pricing cards and product UI mockups floating over gradient backgrounds

rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px

Deep panel Large dashboard screenshots and hero device frames

rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px

Mockup drop Scaled product illustrations inside feature tiles

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

Soft ambient Floating sub-nav pill (Standard pricing / Custom pricing / FAQs), menus

rgba(23, 23, 23, 0.08) 0px 15px 35px 0px

Components

Live previews rendered from recipes

Stripe ProductPricingChangelogDocs Get started

Buttons

Inputs

Stat Figure

Card

Everything in one ledger

Reconcile every account overnight and close the month in an afternoon instead of a fortnight.

Get started

Primary Button — 48px tall hero CTA with a small trailing chevron. Full width on mobile.
Secondary Outline Button — Sits next to the primary button with an 8px gap. The translucent fill lets the ribbon gradient show through. Used for 'Sign up with Google' (with the G logo) and mobile 'Contact sales'.
Pill CTA — 33px-tall compact CTA used in the nav and inline on content pages. There is also a navy variant (#0a2540 bg) for 'Contact sales' on customer stories.
Top Nav — 76px tall. Wordmark on the left, then Products/Solutions/Developers/Resources with small down-chevrons, then a plain Pricing link. On the right: a Sign in text link (blurple with chevron) and a pill Contact sales. Sits over the hero gradient with no border.
Email Input — 36px-tall filled pill with no border and placeholder 'jane@example.com'. Usually paired with a pill CTA.
Bordered Content Card — Used for sidebar product cards (bold 425 title, slate body, blurple 'Learn more ›') and home feature tiles that hold a UI mockup on a pastel gradient.
Pricing Split Card — Two halves: copy on white and the price on #f6f9fc, with the price at 26px/500. A dark variant (#0a2540 bg) has stacked tile cells separated by 4px gaps. Both float over a skewed ribbon stripe.
Stat Figure — Large light-weight numerals (135+, $1.9T, 99.999%, 500M+) with a small slate caption below. On dark indigo sections the numerals are near-white; on white sections they are blurple.

Do / Don't

Set headlines in Söhne 300 (display) or 500 (editorial) with slight negative tracking, and make multi-sentence headlines two-tone: navy #061b31 lead, slate #425466 continuation.
Keep blurple #533afd/#635bff as the only interactive colour, for CTAs, links and chevrons. Add a trailing › chevron to action buttons and links.
Use the 425 weight for buttons, nav and inline links, and 300 for paragraphs with +0.2px tracking at 18px/1.56.
Float product UI mockups over pastel or ribbon gradients with the layered blue-tinted shadows (rgba(50,50,93,.25) + rgba(0,0,0,.3)).
Show the grid with faint dashed vertical guide lines and hairline #e5edf5 dividers, and alternate white with #f6f9fc and dark #0d1738 bands.
Use tight 4px radii for hero buttons and tiles, and save the 16.5px pill for compact CTAs.

Don't use heavy 700 weights for headlines; the look depends on light 300 and medium 500 Söhne.
Don't spread gradients across UI chrome, buttons or text blocks. The ribbon gradient is a single decorative object, cropped at an edge or skewed as a stripe.
Don't use pure black text or neutral grey shadows. Text stays navy or slate, and shadows are tinted blue-violet.
Don't round cards heavily (16px+) or use chunky borders. Keep 1px #e7ecf1 outlines and 4–8px corners.
Don't add a second brand hue for CTAs; orange, cyan and magenta appear only in imagery and illustration.
Don't crowd sections. Keep 112–128px between major blocks and at least 22–24px padding inside cards.

Screens

Stripe | Financial Infrastructure to Grow Your Revenue /

Amazon Simplifies Cross-Border Payments With Stripe | Stripe /customers/amazon

Report: Best practices for launching and scaling platform payments /guides/best-practices-for-launching-and-scaling-platform-payments

Introducing our agentic commerce solutions /blog/introducing-our-agentic-commerce-solutions

Mobile navigation open — Mobile navigation menu open

Download .md

Stripe — Design Reference

silk ribbon over a ledger grid

Source: https://stripe.com
Theme: light
Category: Fintech
Mood: light, precise, gradient, elegant, corporate, cool
Captured: 2026-09-13

Overview

Tokens — Colors

Name	Value	Token	Role
Paper White	`#ffffff`	`--color-bg`	Default page background, white cards and the nav bar area
Ledger Mist	`#f6f9fc`	`--color-surface`	Alternate section background (pricing and guide pages), grey half of split cards, sidebar panels
Frost Rule	`#e5edf5`	`--color-border`	Hairline dividers, logo-strip borders, dashed grid guides and card outlines
Deep Ink	`#061b31`	`--color-text`	Primary text: headline lead sentences, nav links, mobile menu items
Harbour Navy	`#0a2540`	`--color-navy`	Headings, dark pill CTA background, dark pricing card
Slate Copy	`#425466`	`--color-text-muted`	Body paragraphs, the faded second half of two-tone headlines, secondary labels
Stripe Blurple	`#533afd`	`--color-primary`	Main CTA fill (Get started, Contact sales), text links, secondary-button text, menu chevrons
Classic Blurple	`#635bff`	`--color-primary-soft`	Compact pill CTAs on content pages, breadcrumb links, feature card fill
Lavender Edge	`#b9b9f9`	`--color-primary-border`	1px border on outlined secondary buttons (Sign up with Google)
Midnight Indigo	`#0d1738`	`--color-surface-dark`	Full-bleed dark sections ('The backbone of global commerce', developer blocks)
Cobalt Night	`#122054`	`--color-surface-dark-2`	Raised panels and illustration tones inside dark indigo sections
Input Fog	`#e6ebf1`	`--color-input`	Filled background for the rounded email input
Saffron Tile	`#efa82e`	`--color-accent-warm`	Warm illustration/tile accent that echoes the orange end of the ribbon gradient
Lagoon Tile	`#42b0d5`	`--color-accent-cool`	Cool illustration/tile accent that echoes the cyan-blue end of the gradient

Semantic roles

Role	Value
background	`#ffffff`
surface	`#f6f9fc`
surface raised	`#ffffff`
border	`#e5edf5`
text	`#061b31`
text muted	`#425466`
primary	`#533afd`
primary text	`#ffffff`
accent	`#635bff`

Tokens — Typography

Display: Söhne (sohne-var) (300, 500) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. Variable Söhne. The hero display uses a light 300 with -0.02em tracking. Article and page H1/H2 use 500 with tight negative tracking. Headlines are often two-tone: navy lead sentence, slate continuation.
Body: Söhne (sohne-var) (200, 300, 400, 425, 500) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. Body copy is 300 weight with +0.2px tracking and a generous 1.56 line height. Links, buttons and strong labels use the in-between 425 weight (CTA font: 425 15px/1.6).
Mono: Source Code Pro (500, 700) — fallbacks: JetBrains Mono, ui-monospace, Menlo, monospace. Used sparingly for code snippets and API samples in developer sections.

Role	Size	Line height	Weight	Letter spacing	Family
Article Display	56px	1.21	500	-1.12px	display
Hero Display	48px	1.15	300	-0.96px	display
Page H1	38px	1.26	500	-0.2px	display
H2	34px	1.29	500	-0.1px	display
H3 / Feature Title	26px	1.12	300	-0.26px	display
Card Title	22px	1.1	300	-0.22px	display
Body Large	18px	1.56	300	0.2px	body
Body / UI	16px	1.4	300	normal	body
Button / Nav	15px	1.6	425	normal	body
Code	14px	1.5	500	normal	mono

Tokens — Spacing & Layout

Base unit: 4px
Density: comfortable
Container max width: 1266px
Section gap: 112px
Card padding: 22px
Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 112px, 128px

Tokens — Radius

Element	Value
Hero buttons, small cards, tiles	4px
Compact pill CTAs (Contact sales, Get started)	16.5px
Feature cards, pricing panels	6px
Bordered content cards, sidebar panels, media	8px
Email input	20px
Avatars, icon dots	50%

Tokens — Shadows

Name	Value	Usage
Button lift	`rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px`	Small raised controls, tab pills and mockup chips
Card float	`rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px`	Pricing cards and product UI mockups floating over gradient backgrounds
Deep panel	`rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px`	Large dashboard screenshots and hero device frames
Mockup drop	`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`	Scaled product illustrations inside feature tiles
Soft ambient	`rgba(23, 23, 23, 0.08) 0px 15px 35px 0px`	Floating sub-nav pill (Standard pricing / Custom pricing / FAQs), menus

Components

Primary Button (button)

Property	Value
background	`#533afd`
color	`#ffffff`
border	`none`
radius	`4px`
padding	`15.5px 24px`
font size	`16px`
font weight	`400`
shadow	`none`
hover	`Background darkens slightly and the trailing › chevron nudges ~3px right`

48px tall hero CTA with a small trailing chevron. Full width on mobile.

Secondary Outline Button (button)

Property	Value
background	`rgba(255, 255, 255, 0.65)`
color	`#533afd`
border	`1px solid #b9b9f9`
radius	`4px`
padding	`14.5px 24px`
font size	`16px`
font weight	`400`
shadow	`none`
hover	`Border strengthens towards #533afd and the fill becomes solid white`

Sits next to the primary button with an 8px gap. The translucent fill lets the ribbon gradient show through. Used for 'Sign up with Google' (with the G logo) and mobile 'Contact sales'.

Pill CTA (button)

Property	Value
background	`#635bff`
color	`#ffffff`
border	`none`
radius	`16.5px`
padding	`3px 12px`
font size	`15px`
font weight	`425`
shadow	`none`
hover	`Background shifts to #0a2540 and the chevron slides right`

33px-tall compact CTA used in the nav and inline on content pages. There is also a navy variant (#0a2540 bg) for 'Contact sales' on customer stories.

Top Nav (nav)

Property	Value
background	`transparent`
color	`#061b31`
border	`none`
radius	`0px`
padding	`12px 0px`
font size	`14px`
font weight	`400`
shadow	`none`
hover	`Link colour moves to #533afd; dropdown panel fades and scales in beneath`

76px tall. Wordmark on the left, then Products/Solutions/Developers/Resources with small down-chevrons, then a plain Pricing link. On the right: a Sign in text link (blurple with chevron) and a pill Contact sales. Sits over the hero gradient with no border.

Email Input (input)

Property	Value
background	`#e6ebf1`
color	`#0a2540`
border	`none`
radius	`20px`
padding	`5px 12px`
font size	`15px`
font weight	`300`
shadow	`none`
hover	`Focus adds a 2px #533afd-tinted ring`

36px-tall filled pill with no border and placeholder 'jane@example.com'. Usually paired with a pill CTA.

Bordered Content Card (card)

Property	Value
background	`#ffffff`
color	`#425466`
border	`1px solid #e7ecf1`
radius	`8px`
padding	`22px`
font size	`16px`
font weight	`300`
shadow	`none`
hover	`Border darkens slightly; an expand icon button in the corner takes a lavender tint`

Used for sidebar product cards (bold 425 title, slate body, blurple 'Learn more ›') and home feature tiles that hold a UI mockup on a pastel gradient.

Pricing Split Card (card)

Property	Value
background	`#ffffff`
color	`#0a2540`
border	`none`
radius	`6px`
padding	`24px 24px`
font size	`16px`
font weight	`300`
shadow	`rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px`
hover	`none`

Two halves: copy on white and the price on #f6f9fc, with the price at 26px/500. A dark variant (#0a2540 bg) has stacked tile cells separated by 4px gaps. Both float over a skewed ribbon stripe.

Stat Figure (other)

Property	Value
background	`transparent`
color	`#ffffff`
border	`none`
radius	`0px`
padding	`0px`
font size	`48px`
font weight	`300`
shadow	`none`
hover	`none`

Large light-weight numerals (135+, $1.9T, 99.999%, 500M+) with a small slate caption below. On dark indigo sections the numerals are near-white; on white sections they are blurple.

Layout

A centred column with a max width of about 1266px, framed by faint dashed vertical guide lines that show the underlying column grid. They run the full page height and are visible behind heroes. Heroes are left-aligned with a 48–56px headline that takes about 65% of the width, a small eyebrow stat line above, and a button pair below. A logo strip between hairline rules follows. Feature areas use asymmetric bento grids of bordered tiles holding product mockups. Editorial pages use a narrow left table-of-contents rail and a wide text column, with a right-hand sticky info card near the top. Full-bleed dark indigo bands break up the white rhythm. Sections are separated by 112–128px.

Imagery

The signature image is a silky, striated ribbon gradient (orange #efa82e tones to magenta to violet to periwinkle) sweeping diagonally from the top right, often cropped. On inner pages the same palette becomes skewed parallelogram stripes that cut across the page at about -8°. Feature tiles show crisp, realistic product UI (dashboards, checkout sheets, cards) floating with blue-tinted shadows on soft pastel gradients. Dark sections use a glowing particle globe or burst in indigo and violet. Customer stories use natural documentary photography and video. Icons are small, line-based and blurple.

Motion

The motion is smooth and restrained. The hero ribbon animates slowly like a flowing gradient, and the GDP counter ticks live. Button and link chevrons slide a few pixels right on hover. Nav dropdowns fade in and scale from the trigger with a short ease-out. The logo strip auto-scrolls horizontally. Mockups rise gently into view on scroll. Nothing bounces; everything uses soft ease-out curves of about 150–300ms.

Responsive

On phones the desktop nav collapses to the wordmark plus a white square hamburger button with a blurple icon. Tapping it opens a full-screen white sheet. The toggle becomes a lavender-tinted square with an ×, and the sheet lists Products, Solutions, Developers, Resources, Pricing and Sign in at about 26px/425. Each row is separated by a dashed hairline, and expandable items get blurple › chevrons. A pinned pair of 48px buttons sits at the bottom: filled 'Start now' and outlined 'Contact sales'. The hero headline is shortened to its first sentence at about 40px, and the ribbon gradient is cropped into the top-right corner. Primary and outline buttons stretch to full width and stack with an 8px gap. The logo strip becomes a horizontal scroller between hairlines. Bento tiles collapse to a single column of bordered cards with 24px side gutters.

Do

Set headlines in Söhne 300 (display) or 500 (editorial) with slight negative tracking, and make multi-sentence headlines two-tone: navy #061b31 lead, slate #425466 continuation.
Keep blurple #533afd/#635bff as the only interactive colour, for CTAs, links and chevrons. Add a trailing › chevron to action buttons and links.
Use the 425 weight for buttons, nav and inline links, and 300 for paragraphs with +0.2px tracking at 18px/1.56.
Float product UI mockups over pastel or ribbon gradients with the layered blue-tinted shadows (rgba(50,50,93,.25) + rgba(0,0,0,.3)).
Show the grid with faint dashed vertical guide lines and hairline #e5edf5 dividers, and alternate white with #f6f9fc and dark #0d1738 bands.
Use tight 4px radii for hero buttons and tiles, and save the 16.5px pill for compact CTAs.

Don't

Don't use heavy 700 weights for headlines; the look depends on light 300 and medium 500 Söhne.
Don't spread gradients across UI chrome, buttons or text blocks. The ribbon gradient is a single decorative object, cropped at an edge or skewed as a stripe.
Don't use pure black text or neutral grey shadows. Text stays navy or slate, and shadows are tinted blue-violet.
Don't round cards heavily (16px+) or use chunky borders. Keep 1px #e7ecf1 outlines and 4–8px corners.
Don't add a second brand hue for CTAs; orange, cyan and magenta appear only in imagery and illustration.
Don't crowd sections. Keep 112–128px between major blocks and at least 22–24px padding inside cards.

Agent prompt

Build a light, precise fintech marketing page in the style of Stripe. Use Söhne (fallback Inter/Helvetica Neue) everywhere and Source Code Pro for code. Hero display is 48px/1.15 weight 300 with -0.96px tracking; editorial H1s are 38–56px weight 500 with -0.2 to -1.12px tracking; H2 is 34px/500; body is 18px/1.56 weight 300 with +0.2px tracking; buttons and links are 15–16px weight 425. Make headlines two-tone: lead sentence #061b31, continuation #425466. Backgrounds are #ffffff alternating with #f6f9fc, with full-bleed dark #0d1738 bands; use hairlines #e5edf5 and faint dashed vertical grid guides. The single interactive colour is blurple #533afd (hero buttons: 4px radius, 15.5px 24px padding, 48px tall, white text, trailing › chevron), with #635bff for 33px pill CTAs (16.5px radius, 3px 12px padding) and a navy #0a2540 pill variant. Outline secondary buttons use rgba(255,255,255,.65) fill, 1px #b9b9f9 border and #533afd text. Cards are white with 1px #e7ecf1 border, 8px radius and 22px padding, or float with the shadow rgba(50,50,93,.25) 0 13px 27px -5px, rgba(0,0,0,.3) 0 8px 16px -8px. Inputs are filled #e6ebf1 pills with 20px radius. Decorate with one silky diagonal ribbon gradient (orange #efa82e to magenta to violet to periwinkle), cropped at the top right, or as skewed stripes behind pricing cards, plus crisp product UI mockups on pastel tiles. Spacing is a 4px grid, with a max width of about 1266px and 112–128px between sections. Motion is subtle: chevrons slide on hover and dropdowns fade and scale. On mobile, use a hamburger that opens a full-screen white menu with dashed dividers and pinned full-width buttons.

CSS custom properties

/* Stripe — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg: #ffffff; /* Default page background, white cards and the nav bar area */
  --color-surface: #f6f9fc; /* Alternate section background (pricing and guide pages), grey half of split cards, sidebar panels */
  --color-border: #e5edf5; /* Hairline dividers, logo-strip borders, dashed grid guides and card outlines */
  --color-text: #061b31; /* Primary text: headline lead sentences, nav links, mobile menu items */
  --color-navy: #0a2540; /* Headings, dark pill CTA background, dark pricing card */
  --color-text-muted: #425466; /* Body paragraphs, the faded second half of two-tone headlines, secondary labels */
  --color-primary: #533afd; /* Main CTA fill (Get started, Contact sales), text links, secondary-button text, menu chevrons */
  --color-primary-soft: #635bff; /* Compact pill CTAs on content pages, breadcrumb links, feature card fill */
  --color-primary-border: #b9b9f9; /* 1px border on outlined secondary buttons (Sign up with Google) */
  --color-surface-dark: #0d1738; /* Full-bleed dark sections ('The backbone of global commerce', developer blocks) */
  --color-surface-dark-2: #122054; /* Raised panels and illustration tones inside dark indigo sections */
  --color-input: #e6ebf1; /* Filled background for the rounded email input */
  --color-accent-warm: #efa82e; /* Warm illustration/tile accent that echoes the orange end of the ribbon gradient */
  --color-accent-cool: #42b0d5; /* Cool illustration/tile accent that echoes the cyan-blue end of the gradient */

  /* Semantic roles */
  --background: #ffffff;
  --surface: #f6f9fc;
  --surface-raised: #ffffff;
  --border: #e5edf5;
  --text: #061b31;
  --text-muted: #425466;
  --primary: #533afd;
  --primary-text: #ffffff;
  --accent: #635bff;

  /* Typography */
  --font-display: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --text-article-display: 56px;
  --text-article-display--line-height: 1.21;
  --text-article-display--letter-spacing: -1.12px;
  --text-article-display--font-weight: 500;
  --text-hero-display: 48px;
  --text-hero-display--line-height: 1.15;
  --text-hero-display--letter-spacing: -0.96px;
  --text-hero-display--font-weight: 300;
  --text-page-h1: 38px;
  --text-page-h1--line-height: 1.26;
  --text-page-h1--letter-spacing: -0.2px;
  --text-page-h1--font-weight: 500;
  --text-h2: 34px;
  --text-h2--line-height: 1.29;
  --text-h2--letter-spacing: -0.1px;
  --text-h2--font-weight: 500;
  --text-h3-feature-title: 26px;
  --text-h3-feature-title--line-height: 1.12;
  --text-h3-feature-title--letter-spacing: -0.26px;
  --text-h3-feature-title--font-weight: 300;
  --text-card-title: 22px;
  --text-card-title--line-height: 1.1;
  --text-card-title--letter-spacing: -0.22px;
  --text-card-title--font-weight: 300;
  --text-body-large: 18px;
  --text-body-large--line-height: 1.56;
  --text-body-large--letter-spacing: 0.2px;
  --text-body-large--font-weight: 300;
  --text-body-ui: 16px;
  --text-body-ui--line-height: 1.4;
  --text-body-ui--letter-spacing: normal;
  --text-body-ui--font-weight: 300;
  --text-button-nav: 15px;
  --text-button-nav--line-height: 1.6;
  --text-button-nav--letter-spacing: normal;
  --text-button-nav--font-weight: 425;
  --text-code: 14px;
  --text-code--line-height: 1.5;
  --text-code--letter-spacing: normal;
  --text-code--font-weight: 500;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 112px;
  --space-11: 128px;
  --container: 1266px;
  --section-gap: 112px;

  /* Radius */
  --radius-hero-buttons-small-cards-tiles: 4px;
  --radius-compact-pill-ctas-contact-sales-get-started: 16.5px;
  --radius-feature-cards-pricing-panels: 6px;
  --radius-bordered-content-cards-sidebar-panels-media: 8px;
  --radius-email-input: 20px;
  --radius-avatars-icon-dots: 50%;

  /* Shadows */
  --shadow-button-lift: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  --shadow-card-float: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  --shadow-deep-panel: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
  --shadow-mockup-drop: 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-soft-ambient: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
}

Tailwind v4 theme

/* Stripe — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg: #ffffff;
  --color-surface: #f6f9fc;
  --color-border: #e5edf5;
  --color-text: #061b31;
  --color-navy: #0a2540;
  --color-text-muted: #425466;
  --color-primary: #533afd;
  --color-primary-soft: #635bff;
  --color-primary-border: #b9b9f9;
  --color-surface-dark: #0d1738;
  --color-surface-dark-2: #122054;
  --color-input: #e6ebf1;
  --color-accent-warm: #efa82e;
  --color-accent-cool: #42b0d5;
  --color-background: #ffffff;
  --color-surface: #f6f9fc;
  --color-surface-raised: #ffffff;
  --color-border: #e5edf5;
  --color-text: #061b31;
  --color-text-muted: #425466;
  --color-primary: #533afd;
  --color-primary-text: #ffffff;
  --color-accent: #635bff;
  --font-display: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --text-article-display: 56px;
  --text-article-display--line-height: 1.21;
  --text-article-display--letter-spacing: -1.12px;
  --text-article-display--font-weight: 500;
  --text-hero-display: 48px;
  --text-hero-display--line-height: 1.15;
  --text-hero-display--letter-spacing: -0.96px;
  --text-hero-display--font-weight: 300;
  --text-page-h1: 38px;
  --text-page-h1--line-height: 1.26;
  --text-page-h1--letter-spacing: -0.2px;
  --text-page-h1--font-weight: 500;
  --text-h2: 34px;
  --text-h2--line-height: 1.29;
  --text-h2--letter-spacing: -0.1px;
  --text-h2--font-weight: 500;
  --text-h3-feature-title: 26px;
  --text-h3-feature-title--line-height: 1.12;
  --text-h3-feature-title--letter-spacing: -0.26px;
  --text-h3-feature-title--font-weight: 300;
  --text-card-title: 22px;
  --text-card-title--line-height: 1.1;
  --text-card-title--letter-spacing: -0.22px;
  --text-card-title--font-weight: 300;
  --text-body-large: 18px;
  --text-body-large--line-height: 1.56;
  --text-body-large--letter-spacing: 0.2px;
  --text-body-large--font-weight: 300;
  --text-body-ui: 16px;
  --text-body-ui--line-height: 1.4;
  --text-body-ui--letter-spacing: normal;
  --text-body-ui--font-weight: 300;
  --text-button-nav: 15px;
  --text-button-nav--line-height: 1.6;
  --text-button-nav--letter-spacing: normal;
  --text-button-nav--font-weight: 425;
  --text-code: 14px;
  --text-code--line-height: 1.5;
  --text-code--letter-spacing: normal;
  --text-code--font-weight: 500;
  --radius-hero-buttons-small-cards-tiles: 4px;
  --radius-compact-pill-ctas-contact-sales-get-started: 16.5px;
  --radius-feature-cards-pricing-panels: 6px;
  --radius-bordered-content-cards-sidebar-panels-media: 8px;
  --radius-email-input: 20px;
  --radius-avatars-icon-dots: 50%;
  --shadow-button-lift: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  --shadow-card-float: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  --shadow-deep-panel: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
  --shadow-mockup-drop: 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-soft-ambient: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
  --container-site: 1266px;
}

Stripe — Style Reference

silk ribbon over a ledger grid

Theme: light · Mood: light, precise, gradient, elegant, corporate, cool

Tokens — Colors

Name	Value	Token	Role
Paper White	`#ffffff`	`--color-bg`	Default page background, white cards and the nav bar area
Ledger Mist	`#f6f9fc`	`--color-surface`	Alternate section background (pricing and guide pages), grey half of split cards, sidebar panels
Frost Rule	`#e5edf5`	`--color-border`	Hairline dividers, logo-strip borders, dashed grid guides and card outlines
Deep Ink	`#061b31`	`--color-text`	Primary text: headline lead sentences, nav links, mobile menu items
Harbour Navy	`#0a2540`	`--color-navy`	Headings, dark pill CTA background, dark pricing card
Slate Copy	`#425466`	`--color-text-muted`	Body paragraphs, the faded second half of two-tone headlines, secondary labels
Stripe Blurple	`#533afd`	`--color-primary`	Main CTA fill (Get started, Contact sales), text links, secondary-button text, menu chevrons
Classic Blurple	`#635bff`	`--color-primary-soft`	Compact pill CTAs on content pages, breadcrumb links, feature card fill
Lavender Edge	`#b9b9f9`	`--color-primary-border`	1px border on outlined secondary buttons (Sign up with Google)
Midnight Indigo	`#0d1738`	`--color-surface-dark`	Full-bleed dark sections ('The backbone of global commerce', developer blocks)
Cobalt Night	`#122054`	`--color-surface-dark-2`	Raised panels and illustration tones inside dark indigo sections
Input Fog	`#e6ebf1`	`--color-input`	Filled background for the rounded email input
Saffron Tile	`#efa82e`	`--color-accent-warm`	Warm illustration/tile accent that echoes the orange end of the ribbon gradient
Lagoon Tile	`#42b0d5`	`--color-accent-cool`	Cool illustration/tile accent that echoes the cyan-blue end of the gradient

Tokens — Typography

Display: Söhne (sohne-var) (Inter, Helvetica Neue, Arial, sans-serif) — weights 300/500
Body: Söhne (sohne-var) (Inter, Helvetica Neue, Arial, sans-serif) — weights 200/300/400/425/500
Mono: Source Code Pro (JetBrains Mono, ui-monospace, Menlo, monospace) — weights 500/700

Tokens — Radius

Element	Value
Hero buttons, small cards, tiles	`4px`
Compact pill CTAs (Contact sales, Get started)	`16.5px`
Feature cards, pricing panels	`6px`
Bordered content cards, sidebar panels, media	`8px`
Email input	`20px`
Avatars, icon dots	`50%`

Do

Set headlines in Söhne 300 (display) or 500 (editorial) with slight negative tracking, and make multi-sentence headlines two-tone: navy #061b31 lead, slate #425466 continuation.
Keep blurple #533afd/#635bff as the only interactive colour, for CTAs, links and chevrons. Add a trailing › chevron to action buttons and links.
Use the 425 weight for buttons, nav and inline links, and 300 for paragraphs with +0.2px tracking at 18px/1.56.
Float product UI mockups over pastel or ribbon gradients with the layered blue-tinted shadows (rgba(50,50,93,.25) + rgba(0,0,0,.3)).
Show the grid with faint dashed vertical guide lines and hairline #e5edf5 dividers, and alternate white with #f6f9fc and dark #0d1738 bands.
Use tight 4px radii for hero buttons and tiles, and save the 16.5px pill for compact CTAs.

Don't

Don't use heavy 700 weights for headlines; the look depends on light 300 and medium 500 Söhne.
Don't spread gradients across UI chrome, buttons or text blocks. The ribbon gradient is a single decorative object, cropped at an edge or skewed as a stripe.
Don't use pure black text or neutral grey shadows. Text stays navy or slate, and shadows are tinted blue-violet.
Don't round cards heavily (16px+) or use chunky borders. Keep 1px #e7ecf1 outlines and 4–8px corners.
Don't add a second brand hue for CTAs; orange, cyan and magenta appear only in imagery and illustration.
Don't crowd sections. Keep 112–128px between major blocks and at least 22–24px padding inside cards.

/* Stripe — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg: #ffffff;
  --color-surface: #f6f9fc;
  --color-border: #e5edf5;
  --color-text: #061b31;
  --color-navy: #0a2540;
  --color-text-muted: #425466;
  --color-primary: #533afd;
  --color-primary-soft: #635bff;
  --color-primary-border: #b9b9f9;
  --color-surface-dark: #0d1738;
  --color-surface-dark-2: #122054;
  --color-input: #e6ebf1;
  --color-accent-warm: #efa82e;
  --color-accent-cool: #42b0d5;
  --color-background: #ffffff;
  --color-surface: #f6f9fc;
  --color-surface-raised: #ffffff;
  --color-border: #e5edf5;
  --color-text: #061b31;
  --color-text-muted: #425466;
  --color-primary: #533afd;
  --color-primary-text: #ffffff;
  --color-accent: #635bff;
  --font-display: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --text-article-display: 56px;
  --text-article-display--line-height: 1.21;
  --text-article-display--letter-spacing: -1.12px;
  --text-article-display--font-weight: 500;
  --text-hero-display: 48px;
  --text-hero-display--line-height: 1.15;
  --text-hero-display--letter-spacing: -0.96px;
  --text-hero-display--font-weight: 300;
  --text-page-h1: 38px;
  --text-page-h1--line-height: 1.26;
  --text-page-h1--letter-spacing: -0.2px;
  --text-page-h1--font-weight: 500;
  --text-h2: 34px;
  --text-h2--line-height: 1.29;
  --text-h2--letter-spacing: -0.1px;
  --text-h2--font-weight: 500;
  --text-h3-feature-title: 26px;
  --text-h3-feature-title--line-height: 1.12;
  --text-h3-feature-title--letter-spacing: -0.26px;
  --text-h3-feature-title--font-weight: 300;
  --text-card-title: 22px;
  --text-card-title--line-height: 1.1;
  --text-card-title--letter-spacing: -0.22px;
  --text-card-title--font-weight: 300;
  --text-body-large: 18px;
  --text-body-large--line-height: 1.56;
  --text-body-large--letter-spacing: 0.2px;
  --text-body-large--font-weight: 300;
  --text-body-ui: 16px;
  --text-body-ui--line-height: 1.4;
  --text-body-ui--letter-spacing: normal;
  --text-body-ui--font-weight: 300;
  --text-button-nav: 15px;
  --text-button-nav--line-height: 1.6;
  --text-button-nav--letter-spacing: normal;
  --text-button-nav--font-weight: 425;
  --text-code: 14px;
  --text-code--line-height: 1.5;
  --text-code--letter-spacing: normal;
  --text-code--font-weight: 500;
  --radius-hero-buttons-small-cards-tiles: 4px;
  --radius-compact-pill-ctas-contact-sales-get-started: 16.5px;
  --radius-feature-cards-pricing-panels: 6px;
  --radius-bordered-content-cards-sidebar-panels-media: 8px;
  --radius-email-input: 20px;
  --radius-avatars-icon-dots: 50%;
  --shadow-button-lift: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  --shadow-card-float: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  --shadow-deep-panel: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
  --shadow-mockup-drop: 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-soft-ambient: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
  --container-site: 1266px;
}

/* Stripe — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg: #ffffff; /* Default page background, white cards and the nav bar area */
  --color-surface: #f6f9fc; /* Alternate section background (pricing and guide pages), grey half of split cards, sidebar panels */
  --color-border: #e5edf5; /* Hairline dividers, logo-strip borders, dashed grid guides and card outlines */
  --color-text: #061b31; /* Primary text: headline lead sentences, nav links, mobile menu items */
  --color-navy: #0a2540; /* Headings, dark pill CTA background, dark pricing card */
  --color-text-muted: #425466; /* Body paragraphs, the faded second half of two-tone headlines, secondary labels */
  --color-primary: #533afd; /* Main CTA fill (Get started, Contact sales), text links, secondary-button text, menu chevrons */
  --color-primary-soft: #635bff; /* Compact pill CTAs on content pages, breadcrumb links, feature card fill */
  --color-primary-border: #b9b9f9; /* 1px border on outlined secondary buttons (Sign up with Google) */
  --color-surface-dark: #0d1738; /* Full-bleed dark sections ('The backbone of global commerce', developer blocks) */
  --color-surface-dark-2: #122054; /* Raised panels and illustration tones inside dark indigo sections */
  --color-input: #e6ebf1; /* Filled background for the rounded email input */
  --color-accent-warm: #efa82e; /* Warm illustration/tile accent that echoes the orange end of the ribbon gradient */
  --color-accent-cool: #42b0d5; /* Cool illustration/tile accent that echoes the cyan-blue end of the gradient */

  /* Semantic roles */
  --background: #ffffff;
  --surface: #f6f9fc;
  --surface-raised: #ffffff;
  --border: #e5edf5;
  --text: #061b31;
  --text-muted: #425466;
  --primary: #533afd;
  --primary-text: #ffffff;
  --accent: #635bff;

  /* Typography */
  --font-display: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --text-article-display: 56px;
  --text-article-display--line-height: 1.21;
  --text-article-display--letter-spacing: -1.12px;
  --text-article-display--font-weight: 500;
  --text-hero-display: 48px;
  --text-hero-display--line-height: 1.15;
  --text-hero-display--letter-spacing: -0.96px;
  --text-hero-display--font-weight: 300;
  --text-page-h1: 38px;
  --text-page-h1--line-height: 1.26;
  --text-page-h1--letter-spacing: -0.2px;
  --text-page-h1--font-weight: 500;
  --text-h2: 34px;
  --text-h2--line-height: 1.29;
  --text-h2--letter-spacing: -0.1px;
  --text-h2--font-weight: 500;
  --text-h3-feature-title: 26px;
  --text-h3-feature-title--line-height: 1.12;
  --text-h3-feature-title--letter-spacing: -0.26px;
  --text-h3-feature-title--font-weight: 300;
  --text-card-title: 22px;
  --text-card-title--line-height: 1.1;
  --text-card-title--letter-spacing: -0.22px;
  --text-card-title--font-weight: 300;
  --text-body-large: 18px;
  --text-body-large--line-height: 1.56;
  --text-body-large--letter-spacing: 0.2px;
  --text-body-large--font-weight: 300;
  --text-body-ui: 16px;
  --text-body-ui--line-height: 1.4;
  --text-body-ui--letter-spacing: normal;
  --text-body-ui--font-weight: 300;
  --text-button-nav: 15px;
  --text-button-nav--line-height: 1.6;
  --text-button-nav--letter-spacing: normal;
  --text-button-nav--font-weight: 425;
  --text-code: 14px;
  --text-code--line-height: 1.5;
  --text-code--letter-spacing: normal;
  --text-code--font-weight: 500;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 112px;
  --space-11: 128px;
  --container: 1266px;
  --section-gap: 112px;

  /* Radius */
  --radius-hero-buttons-small-cards-tiles: 4px;
  --radius-compact-pill-ctas-contact-sales-get-started: 16.5px;
  --radius-feature-cards-pricing-panels: 6px;
  --radius-bordered-content-cards-sidebar-panels-media: 8px;
  --radius-email-input: 20px;
  --radius-avatars-icon-dots: 50%;

  /* Shadows */
  --shadow-button-lift: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  --shadow-card-float: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  --shadow-deep-panel: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
  --shadow-mockup-drop: 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-soft-ambient: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
}

{
  "$name": "Stripe",
  "$source": "https://stripe.com",
  "$theme": "light",
  "$generated": "inspiration library",
  "color": {
    "bg": {
      "$type": "color",
      "$value": "#ffffff",
      "$description": "Default page background, white cards and the nav bar area"
    },
    "surface": {
      "$type": "color",
      "$value": "#f6f9fc",
      "$description": "Alternate section background (pricing and guide pages), grey half of split cards, sidebar panels"
    },
    "border": {
      "$type": "color",
      "$value": "#e5edf5",
      "$description": "Hairline dividers, logo-strip borders, dashed grid guides and card outlines"
    },
    "text": {
      "$type": "color",
      "$value": "#061b31",
      "$description": "Primary text: headline lead sentences, nav links, mobile menu items"
    },
    "navy": {
      "$type": "color",
      "$value": "#0a2540",
      "$description": "Headings, dark pill CTA background, dark pricing card"
    },
    "text-muted": {
      "$type": "color",
      "$value": "#425466",
      "$description": "Body paragraphs, the faded second half of two-tone headlines, secondary labels"
    },
    "primary": {
      "$type": "color",
      "$value": "#533afd",
      "$description": "Main CTA fill (Get started, Contact sales), text links, secondary-button text, menu chevrons"
    },
    "primary-soft": {
      "$type": "color",
      "$value": "#635bff",
      "$description": "Compact pill CTAs on content pages, breadcrumb links, feature card fill"
    },
    "primary-border": {
      "$type": "color",
      "$value": "#b9b9f9",
      "$description": "1px border on outlined secondary buttons (Sign up with Google)"
    },
    "surface-dark": {
      "$type": "color",
      "$value": "#0d1738",
      "$description": "Full-bleed dark sections ('The backbone of global commerce', developer blocks)"
    },
    "surface-dark-2": {
      "$type": "color",
      "$value": "#122054",
      "$description": "Raised panels and illustration tones inside dark indigo sections"
    },
    "input": {
      "$type": "color",
      "$value": "#e6ebf1",
      "$description": "Filled background for the rounded email input"
    },
    "accent-warm": {
      "$type": "color",
      "$value": "#efa82e",
      "$description": "Warm illustration/tile accent that echoes the orange end of the ribbon gradient"
    },
    "accent-cool": {
      "$type": "color",
      "$value": "#42b0d5",
      "$description": "Cool illustration/tile accent that echoes the cyan-blue end of the gradient"
    }
  },
  "role": {
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "surface": {
      "$type": "color",
      "$value": "#f6f9fc"
    },
    "surface_raised": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "border": {
      "$type": "color",
      "$value": "#e5edf5"
    },
    "text": {
      "$type": "color",
      "$value": "#061b31"
    },
    "text_muted": {
      "$type": "color",
      "$value": "#425466"
    },
    "primary": {
      "$type": "color",
      "$value": "#533afd"
    },
    "primary_text": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "accent": {
      "$type": "color",
      "$value": "#635bff"
    }
  },
  "fontFamily": {
    "display": {
      "$type": "fontFamily",
      "$value": [
        "Söhne (sohne-var)",
        "Inter",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "$description": "Variable Söhne. The hero display uses a light 300 with -0.02em tracking. Article and page H1/H2 use 500 with tight negative tracking. Headlines are often two-tone: navy lead sentence, slate continuation."
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Söhne (sohne-var)",
        "Inter",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "$description": "Body copy is 300 weight with +0.2px tracking and a generous 1.56 line height. Links, buttons and strong labels use the in-between 425 weight (CTA font: 425 15px/1.6)."
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Source Code Pro",
        "JetBrains Mono",
        "ui-monospace",
        "Menlo",
        "monospace"
      ],
      "$description": "Used sparingly for code snippets and API samples in developer sections."
    }
  },
  "typography": {
    "article-display": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "56px",
        "lineHeight": "1.21",
        "fontWeight": 500,
        "letterSpacing": "-1.12px"
      }
    },
    "hero-display": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "48px",
        "lineHeight": "1.15",
        "fontWeight": 300,
        "letterSpacing": "-0.96px"
      }
    },
    "page-h1": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "38px",
        "lineHeight": "1.26",
        "fontWeight": 500,
        "letterSpacing": "-0.2px"
      }
    },
    "h2": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "34px",
        "lineHeight": "1.29",
        "fontWeight": 500,
        "letterSpacing": "-0.1px"
      }
    },
    "h3-feature-title": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "26px",
        "lineHeight": "1.12",
        "fontWeight": 300,
        "letterSpacing": "-0.26px"
      }
    },
    "card-title": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "22px",
        "lineHeight": "1.1",
        "fontWeight": 300,
        "letterSpacing": "-0.22px"
      }
    },
    "body-large": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "18px",
        "lineHeight": "1.56",
        "fontWeight": 300,
        "letterSpacing": "0.2px"
      }
    },
    "body-ui": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "16px",
        "lineHeight": "1.4",
        "fontWeight": 300,
        "letterSpacing": "normal"
      }
    },
    "button-nav": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "15px",
        "lineHeight": "1.6",
        "fontWeight": 425,
        "letterSpacing": "normal"
      }
    },
    "code": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.mono}",
        "fontSize": "14px",
        "lineHeight": "1.5",
        "fontWeight": 500,
        "letterSpacing": "normal"
      }
    }
  },
  "spacing": {
    "1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "5": {
      "$type": "dimension",
      "$value": "24px"
    },
    "6": {
      "$type": "dimension",
      "$value": "32px"
    },
    "7": {
      "$type": "dimension",
      "$value": "48px"
    },
    "8": {
      "$type": "dimension",
      "$value": "64px"
    },
    "9": {
      "$type": "dimension",
      "$value": "96px"
    },
    "10": {
      "$type": "dimension",
      "$value": "112px"
    },
    "11": {
      "$type": "dimension",
      "$value": "128px"
    }
  },
  "radius": {
    "hero-buttons-small-cards-tiles": {
      "$type": "dimension",
      "$value": "4px"
    },
    "compact-pill-ctas-contact-sales-get-started": {
      "$type": "dimension",
      "$value": "16.5px"
    },
    "feature-cards-pricing-panels": {
      "$type": "dimension",
      "$value": "6px"
    },
    "bordered-content-cards-sidebar-panels-media": {
      "$type": "dimension",
      "$value": "8px"
    },
    "email-input": {
      "$type": "dimension",
      "$value": "20px"
    },
    "avatars-icon-dots": {
      "$type": "dimension",
      "$value": "50%"
    }
  },
  "shadow": {
    "button-lift": {
      "$type": "shadow",
      "$value": "rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px",
      "$description": "Small raised controls, tab pills and mockup chips"
    },
    "card-float": {
      "$type": "shadow",
      "$value": "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
      "$description": "Pricing cards and product UI mockups floating over gradient backgrounds"
    },
    "deep-panel": {
      "$type": "shadow",
      "$value": "rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px",
      "$description": "Large dashboard screenshots and hero device frames"
    },
    "mockup-drop": {
      "$type": "shadow",
      "$value": "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",
      "$description": "Scaled product illustrations inside feature tiles"
    },
    "soft-ambient": {
      "$type": "shadow",
      "$value": "rgba(23, 23, 23, 0.08) 0px 15px 35px 0px",
      "$description": "Floating sub-nav pill (Standard pricing / Custom pricing / FAQs), menus"
    }
  },
  "component": {
    "primary-button": {
      "kind": "button",
      "background": "#533afd",
      "color": "#ffffff",
      "border": "none",
      "radius": "4px",
      "padding": "15.5px 24px",
      "font_size": "16px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "Background darkens slightly and the trailing › chevron nudges ~3px right",
      "notes": "48px tall hero CTA with a small trailing chevron. Full width on mobile."
    },
    "secondary-outline-button": {
      "kind": "button",
      "background": "rgba(255, 255, 255, 0.65)",
      "color": "#533afd",
      "border": "1px solid #b9b9f9",
      "radius": "4px",
      "padding": "14.5px 24px",
      "font_size": "16px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "Border strengthens towards #533afd and the fill becomes solid white",
      "notes": "Sits next to the primary button with an 8px gap. The translucent fill lets the ribbon gradient show through. Used for 'Sign up with Google' (with the G logo) and mobile 'Contact sales'."
    },
    "pill-cta": {
      "kind": "button",
      "background": "#635bff",
      "color": "#ffffff",
      "border": "none",
      "radius": "16.5px",
      "padding": "3px 12px",
      "font_size": "15px",
      "font_weight": 425,
      "shadow": "none",
      "hover": "Background shifts to #0a2540 and the chevron slides right",
      "notes": "33px-tall compact CTA used in the nav and inline on content pages. There is also a navy variant (#0a2540 bg) for 'Contact sales' on customer stories."
    },
    "top-nav": {
      "kind": "nav",
      "background": "transparent",
      "color": "#061b31",
      "border": "none",
      "radius": "0px",
      "padding": "12px 0px",
      "font_size": "14px",
      "font_weight": 400,
      "shadow": "none",
      "hover": "Link colour moves to #533afd; dropdown panel fades and scales in beneath",
      "notes": "76px tall. Wordmark on the left, then Products/Solutions/Developers/Resources with small down-chevrons, then a plain Pricing link. On the right: a Sign in text link (blurple with chevron) and a pill Contact sales. Sits over the hero gradient with no border."
    },
    "email-input": {
      "kind": "input",
      "background": "#e6ebf1",
      "color": "#0a2540",
      "border": "none",
      "radius": "20px",
      "padding": "5px 12px",
      "font_size": "15px",
      "font_weight": 300,
      "shadow": "none",
      "hover": "Focus adds a 2px #533afd-tinted ring",
      "notes": "36px-tall filled pill with no border and placeholder 'jane@example.com'. Usually paired with a pill CTA."
    },
    "bordered-content-card": {
      "kind": "card",
      "background": "#ffffff",
      "color": "#425466",
      "border": "1px solid #e7ecf1",
      "radius": "8px",
      "padding": "22px",
      "font_size": "16px",
      "font_weight": 300,
      "shadow": "none",
      "hover": "Border darkens slightly; an expand icon button in the corner takes a lavender tint",
      "notes": "Used for sidebar product cards (bold 425 title, slate body, blurple 'Learn more ›') and home feature tiles that hold a UI mockup on a pastel gradient."
    },
    "pricing-split-card": {
      "kind": "card",
      "background": "#ffffff",
      "color": "#0a2540",
      "border": "none",
      "radius": "6px",
      "padding": "24px 24px",
      "font_size": "16px",
      "font_weight": 300,
      "shadow": "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
      "hover": "none",
      "notes": "Two halves: copy on white and the price on #f6f9fc, with the price at 26px/500. A dark variant (#0a2540 bg) has stacked tile cells separated by 4px gaps. Both float over a skewed ribbon stripe."
    },
    "stat-figure": {
      "kind": "other",
      "background": "transparent",
      "color": "#ffffff",
      "border": "none",
      "radius": "0px",
      "padding": "0px",
      "font_size": "48px",
      "font_weight": 300,
      "shadow": "none",
      "hover": "none",
      "notes": "Large light-weight numerals (135+, $1.9T, 99.999%, 500M+) with a small slate caption below. On dark indigo sections the numerals are near-white; on white sections they are blurple."
    }
  }
}

# Stripe — Design Reference
> silk ribbon over a ledger grid

**Source:** https://stripe.com  
**Theme:** light  
**Category:** Fintech  
**Mood:** light, precise, gradient, elegant, corporate, cool  
**Captured:** 2026-09-13

## Overview

A bright, confident fintech site that reads like a precise financial document with one expensive flourish. Most pages are white or pale blue-grey (#f6f9fc) with navy text. Across them run silky ribbon gradients in orange, magenta, violet and sky blue, set on a diagonal. Faint dashed vertical guide lines show the page grid. What makes it distinctive is the contrast: light, calm, very well-set type sits next to one lush, saturated gradient that feels almost physical, plus dense product-UI mockups that prove the platform is real.

The type is Söhne (sohne-var) throughout. It uses unusual in-between weights: 300 for display headlines and body copy, 425 for links and buttons, and 500 for editorial headings. Large text gets slight negative tracking, and body text gets +0.2px. Headlines are often two-tone: the first sentence is in navy (#061b31) and the rest fades to slate (#425466). Colour is restrained. Deep navies (#0a2540, #0d1738) handle text and dark sections, and blurple (#533afd, #635bff) is the only interactive colour. Corners are tight (4px) on hero buttons and cards, with 16.5px pills for compact CTAs. Shadows are soft and layered, with a blue-grey tint (rgba(50,50,93,.25)). Spacing sits on a 4px grid, and sections are separated by 112–128px of space.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Paper White | `#ffffff` | `--color-bg` | Default page background, white cards and the nav bar area |
| Ledger Mist | `#f6f9fc` | `--color-surface` | Alternate section background (pricing and guide pages), grey half of split cards, sidebar panels |
| Frost Rule | `#e5edf5` | `--color-border` | Hairline dividers, logo-strip borders, dashed grid guides and card outlines |
| Deep Ink | `#061b31` | `--color-text` | Primary text: headline lead sentences, nav links, mobile menu items |
| Harbour Navy | `#0a2540` | `--color-navy` | Headings, dark pill CTA background, dark pricing card |
| Slate Copy | `#425466` | `--color-text-muted` | Body paragraphs, the faded second half of two-tone headlines, secondary labels |
| Stripe Blurple | `#533afd` | `--color-primary` | Main CTA fill (Get started, Contact sales), text links, secondary-button text, menu chevrons |
| Classic Blurple | `#635bff` | `--color-primary-soft` | Compact pill CTAs on content pages, breadcrumb links, feature card fill |
| Lavender Edge | `#b9b9f9` | `--color-primary-border` | 1px border on outlined secondary buttons (Sign up with Google) |
| Midnight Indigo | `#0d1738` | `--color-surface-dark` | Full-bleed dark sections ('The backbone of global commerce', developer blocks) |
| Cobalt Night | `#122054` | `--color-surface-dark-2` | Raised panels and illustration tones inside dark indigo sections |
| Input Fog | `#e6ebf1` | `--color-input` | Filled background for the rounded email input |
| Saffron Tile | `#efa82e` | `--color-accent-warm` | Warm illustration/tile accent that echoes the orange end of the ribbon gradient |
| Lagoon Tile | `#42b0d5` | `--color-accent-cool` | Cool illustration/tile accent that echoes the cyan-blue end of the gradient |

### Semantic roles

| Role | Value |
|---|---|
| background | `#ffffff` |
| surface | `#f6f9fc` |
| surface raised | `#ffffff` |
| border | `#e5edf5` |
| text | `#061b31` |
| text muted | `#425466` |
| primary | `#533afd` |
| primary text | `#ffffff` |
| accent | `#635bff` |

## Tokens — Typography

- **Display:** Söhne (sohne-var) (300, 500) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. Variable Söhne. The hero display uses a light 300 with -0.02em tracking. Article and page H1/H2 use 500 with tight negative tracking. Headlines are often two-tone: navy lead sentence, slate continuation.
- **Body:** Söhne (sohne-var) (200, 300, 400, 425, 500) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. Body copy is 300 weight with +0.2px tracking and a generous 1.56 line height. Links, buttons and strong labels use the in-between 425 weight (CTA font: 425 15px/1.6).
- **Mono:** Source Code Pro (500, 700) — fallbacks: JetBrains Mono, ui-monospace, Menlo, monospace. Used sparingly for code snippets and API samples in developer sections.

| Role | Size | Line height | Weight | Letter spacing | Family |
|---|---|---|---|---|---|
| Article Display | 56px | 1.21 | 500 | -1.12px | display |
| Hero Display | 48px | 1.15 | 300 | -0.96px | display |
| Page H1 | 38px | 1.26 | 500 | -0.2px | display |
| H2 | 34px | 1.29 | 500 | -0.1px | display |
| H3 / Feature Title | 26px | 1.12 | 300 | -0.26px | display |
| Card Title | 22px | 1.1 | 300 | -0.22px | display |
| Body Large | 18px | 1.56 | 300 | 0.2px | body |
| Body / UI | 16px | 1.4 | 300 | normal | body |
| Button / Nav | 15px | 1.6 | 425 | normal | body |
| Code | 14px | 1.5 | 500 | normal | mono |

## Tokens — Spacing & Layout

- **Base unit:** 4px
- **Density:** comfortable
- **Container max width:** 1266px
- **Section gap:** 112px
- **Card padding:** 22px
- **Scale:** 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 112px, 128px

## Tokens — Radius

| Element | Value |
|---|---|
| Hero buttons, small cards, tiles | 4px |
| Compact pill CTAs (Contact sales, Get started) | 16.5px |
| Feature cards, pricing panels | 6px |
| Bordered content cards, sidebar panels, media | 8px |
| Email input | 20px |
| Avatars, icon dots | 50% |

## Tokens — Shadows

| Name | Value | Usage |
|---|---|---|
| Button lift | `rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px` | Small raised controls, tab pills and mockup chips |
| Card float | `rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px` | Pricing cards and product UI mockups floating over gradient backgrounds |
| Deep panel | `rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px` | Large dashboard screenshots and hero device frames |
| Mockup drop | `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` | Scaled product illustrations inside feature tiles |
| Soft ambient | `rgba(23, 23, 23, 0.08) 0px 15px 35px 0px` | Floating sub-nav pill (Standard pricing / Custom pricing / FAQs), menus |

## Components

### Primary Button (button)

| Property | Value |
|---|---|
| background | `#533afd` |
| color | `#ffffff` |
| border | `none` |
| radius | `4px` |
| padding | `15.5px 24px` |
| font size | `16px` |
| font weight | `400` |
| shadow | `none` |
| hover | `Background darkens slightly and the trailing › chevron nudges ~3px right` |

48px tall hero CTA with a small trailing chevron. Full width on mobile.

### Secondary Outline Button (button)

| Property | Value |
|---|---|
| background | `rgba(255, 255, 255, 0.65)` |
| color | `#533afd` |
| border | `1px solid #b9b9f9` |
| radius | `4px` |
| padding | `14.5px 24px` |
| font size | `16px` |
| font weight | `400` |
| shadow | `none` |
| hover | `Border strengthens towards #533afd and the fill becomes solid white` |

Sits next to the primary button with an 8px gap. The translucent fill lets the ribbon gradient show through. Used for 'Sign up with Google' (with the G logo) and mobile 'Contact sales'.

### Pill CTA (button)

| Property | Value |
|---|---|
| background | `#635bff` |
| color | `#ffffff` |
| border | `none` |
| radius | `16.5px` |
| padding | `3px 12px` |
| font size | `15px` |
| font weight | `425` |
| shadow | `none` |
| hover | `Background shifts to #0a2540 and the chevron slides right` |

33px-tall compact CTA used in the nav and inline on content pages. There is also a navy variant (#0a2540 bg) for 'Contact sales' on customer stories.

### Top Nav (nav)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#061b31` |
| border | `none` |
| radius | `0px` |
| padding | `12px 0px` |
| font size | `14px` |
| font weight | `400` |
| shadow | `none` |
| hover | `Link colour moves to #533afd; dropdown panel fades and scales in beneath` |

76px tall. Wordmark on the left, then Products/Solutions/Developers/Resources with small down-chevrons, then a plain Pricing link. On the right: a Sign in text link (blurple with chevron) and a pill Contact sales. Sits over the hero gradient with no border.

### Email Input (input)

| Property | Value |
|---|---|
| background | `#e6ebf1` |
| color | `#0a2540` |
| border | `none` |
| radius | `20px` |
| padding | `5px 12px` |
| font size | `15px` |
| font weight | `300` |
| shadow | `none` |
| hover | `Focus adds a 2px #533afd-tinted ring` |

36px-tall filled pill with no border and placeholder 'jane@example.com'. Usually paired with a pill CTA.

### Bordered Content Card (card)

| Property | Value |
|---|---|
| background | `#ffffff` |
| color | `#425466` |
| border | `1px solid #e7ecf1` |
| radius | `8px` |
| padding | `22px` |
| font size | `16px` |
| font weight | `300` |
| shadow | `none` |
| hover | `Border darkens slightly; an expand icon button in the corner takes a lavender tint` |

Used for sidebar product cards (bold 425 title, slate body, blurple 'Learn more ›') and home feature tiles that hold a UI mockup on a pastel gradient.

### Pricing Split Card (card)

| Property | Value |
|---|---|
| background | `#ffffff` |
| color | `#0a2540` |
| border | `none` |
| radius | `6px` |
| padding | `24px 24px` |
| font size | `16px` |
| font weight | `300` |
| shadow | `rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px` |
| hover | `none` |

Two halves: copy on white and the price on #f6f9fc, with the price at 26px/500. A dark variant (#0a2540 bg) has stacked tile cells separated by 4px gaps. Both float over a skewed ribbon stripe.

### Stat Figure (other)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#ffffff` |
| border | `none` |
| radius | `0px` |
| padding | `0px` |
| font size | `48px` |
| font weight | `300` |
| shadow | `none` |
| hover | `none` |

Large light-weight numerals (135+, $1.9T, 99.999%, 500M+) with a small slate caption below. On dark indigo sections the numerals are near-white; on white sections they are blurple.

## Layout

A centred column with a max width of about 1266px, framed by faint dashed vertical guide lines that show the underlying column grid. They run the full page height and are visible behind heroes. Heroes are left-aligned with a 48–56px headline that takes about 65% of the width, a small eyebrow stat line above, and a button pair below. A logo strip between hairline rules follows. Feature areas use asymmetric bento grids of bordered tiles holding product mockups. Editorial pages use a narrow left table-of-contents rail and a wide text column, with a right-hand sticky info card near the top. Full-bleed dark indigo bands break up the white rhythm. Sections are separated by 112–128px.

## Imagery

The signature image is a silky, striated ribbon gradient (orange #efa82e tones to magenta to violet to periwinkle) sweeping diagonally from the top right, often cropped. On inner pages the same palette becomes skewed parallelogram stripes that cut across the page at about -8°. Feature tiles show crisp, realistic product UI (dashboards, checkout sheets, cards) floating with blue-tinted shadows on soft pastel gradients. Dark sections use a glowing particle globe or burst in indigo and violet. Customer stories use natural documentary photography and video. Icons are small, line-based and blurple.

## Motion

The motion is smooth and restrained. The hero ribbon animates slowly like a flowing gradient, and the GDP counter ticks live. Button and link chevrons slide a few pixels right on hover. Nav dropdowns fade in and scale from the trigger with a short ease-out. The logo strip auto-scrolls horizontally. Mockups rise gently into view on scroll. Nothing bounces; everything uses soft ease-out curves of about 150–300ms.

## Responsive

On phones the desktop nav collapses to the wordmark plus a white square hamburger button with a blurple icon. Tapping it opens a full-screen white sheet. The toggle becomes a lavender-tinted square with an ×, and the sheet lists Products, Solutions, Developers, Resources, Pricing and Sign in at about 26px/425. Each row is separated by a dashed hairline, and expandable items get blurple › chevrons. A pinned pair of 48px buttons sits at the bottom: filled 'Start now' and outlined 'Contact sales'. The hero headline is shortened to its first sentence at about 40px, and the ribbon gradient is cropped into the top-right corner. Primary and outline buttons stretch to full width and stack with an 8px gap. The logo strip becomes a horizontal scroller between hairlines. Bento tiles collapse to a single column of bordered cards with 24px side gutters.

## Do

- Set headlines in Söhne 300 (display) or 500 (editorial) with slight negative tracking, and make multi-sentence headlines two-tone: navy #061b31 lead, slate #425466 continuation.
- Keep blurple #533afd/#635bff as the only interactive colour, for CTAs, links and chevrons. Add a trailing › chevron to action buttons and links.
- Use the 425 weight for buttons, nav and inline links, and 300 for paragraphs with +0.2px tracking at 18px/1.56.
- Float product UI mockups over pastel or ribbon gradients with the layered blue-tinted shadows (rgba(50,50,93,.25) + rgba(0,0,0,.3)).
- Show the grid with faint dashed vertical guide lines and hairline #e5edf5 dividers, and alternate white with #f6f9fc and dark #0d1738 bands.
- Use tight 4px radii for hero buttons and tiles, and save the 16.5px pill for compact CTAs.

## Don't

- Don't use heavy 700 weights for headlines; the look depends on light 300 and medium 500 Söhne.
- Don't spread gradients across UI chrome, buttons or text blocks. The ribbon gradient is a single decorative object, cropped at an edge or skewed as a stripe.
- Don't use pure black text or neutral grey shadows. Text stays navy or slate, and shadows are tinted blue-violet.
- Don't round cards heavily (16px+) or use chunky borders. Keep 1px #e7ecf1 outlines and 4–8px corners.
- Don't add a second brand hue for CTAs; orange, cyan and magenta appear only in imagery and illustration.
- Don't crowd sections. Keep 112–128px between major blocks and at least 22–24px padding inside cards.

## Agent prompt

> Build a light, precise fintech marketing page in the style of Stripe. Use Söhne (fallback Inter/Helvetica Neue) everywhere and Source Code Pro for code. Hero display is 48px/1.15 weight 300 with -0.96px tracking; editorial H1s are 38–56px weight 500 with -0.2 to -1.12px tracking; H2 is 34px/500; body is 18px/1.56 weight 300 with +0.2px tracking; buttons and links are 15–16px weight 425. Make headlines two-tone: lead sentence #061b31, continuation #425466. Backgrounds are #ffffff alternating with #f6f9fc, with full-bleed dark #0d1738 bands; use hairlines #e5edf5 and faint dashed vertical grid guides. The single interactive colour is blurple #533afd (hero buttons: 4px radius, 15.5px 24px padding, 48px tall, white text, trailing › chevron), with #635bff for 33px pill CTAs (16.5px radius, 3px 12px padding) and a navy #0a2540 pill variant. Outline secondary buttons use rgba(255,255,255,.65) fill, 1px #b9b9f9 border and #533afd text. Cards are white with 1px #e7ecf1 border, 8px radius and 22px padding, or float with the shadow rgba(50,50,93,.25) 0 13px 27px -5px, rgba(0,0,0,.3) 0 8px 16px -8px. Inputs are filled #e6ebf1 pills with 20px radius. Decorate with one silky diagonal ribbon gradient (orange #efa82e to magenta to violet to periwinkle), cropped at the top right, or as skewed stripes behind pricing cards, plus crisp product UI mockups on pastel tiles. Spacing is a 4px grid, with a max width of about 1266px and 112–128px between sections. Motion is subtle: chevrons slide on hover and dropdowns fade and scale. On mobile, use a hamburger that opens a full-screen white menu with dashed dividers and pinned full-width buttons.

## CSS custom properties

```css
/* Stripe — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg: #ffffff; /* Default page background, white cards and the nav bar area */
  --color-surface: #f6f9fc; /* Alternate section background (pricing and guide pages), grey half of split cards, sidebar panels */
  --color-border: #e5edf5; /* Hairline dividers, logo-strip borders, dashed grid guides and card outlines */
  --color-text: #061b31; /* Primary text: headline lead sentences, nav links, mobile menu items */
  --color-navy: #0a2540; /* Headings, dark pill CTA background, dark pricing card */
  --color-text-muted: #425466; /* Body paragraphs, the faded second half of two-tone headlines, secondary labels */
  --color-primary: #533afd; /* Main CTA fill (Get started, Contact sales), text links, secondary-button text, menu chevrons */
  --color-primary-soft: #635bff; /* Compact pill CTAs on content pages, breadcrumb links, feature card fill */
  --color-primary-border: #b9b9f9; /* 1px border on outlined secondary buttons (Sign up with Google) */
  --color-surface-dark: #0d1738; /* Full-bleed dark sections ('The backbone of global commerce', developer blocks) */
  --color-surface-dark-2: #122054; /* Raised panels and illustration tones inside dark indigo sections */
  --color-input: #e6ebf1; /* Filled background for the rounded email input */
  --color-accent-warm: #efa82e; /* Warm illustration/tile accent that echoes the orange end of the ribbon gradient */
  --color-accent-cool: #42b0d5; /* Cool illustration/tile accent that echoes the cyan-blue end of the gradient */

  /* Semantic roles */
  --background: #ffffff;
  --surface: #f6f9fc;
  --surface-raised: #ffffff;
  --border: #e5edf5;
  --text: #061b31;
  --text-muted: #425466;
  --primary: #533afd;
  --primary-text: #ffffff;
  --accent: #635bff;

  /* Typography */
  --font-display: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --text-article-display: 56px;
  --text-article-display--line-height: 1.21;
  --text-article-display--letter-spacing: -1.12px;
  --text-article-display--font-weight: 500;
  --text-hero-display: 48px;
  --text-hero-display--line-height: 1.15;
  --text-hero-display--letter-spacing: -0.96px;
  --text-hero-display--font-weight: 300;
  --text-page-h1: 38px;
  --text-page-h1--line-height: 1.26;
  --text-page-h1--letter-spacing: -0.2px;
  --text-page-h1--font-weight: 500;
  --text-h2: 34px;
  --text-h2--line-height: 1.29;
  --text-h2--letter-spacing: -0.1px;
  --text-h2--font-weight: 500;
  --text-h3-feature-title: 26px;
  --text-h3-feature-title--line-height: 1.12;
  --text-h3-feature-title--letter-spacing: -0.26px;
  --text-h3-feature-title--font-weight: 300;
  --text-card-title: 22px;
  --text-card-title--line-height: 1.1;
  --text-card-title--letter-spacing: -0.22px;
  --text-card-title--font-weight: 300;
  --text-body-large: 18px;
  --text-body-large--line-height: 1.56;
  --text-body-large--letter-spacing: 0.2px;
  --text-body-large--font-weight: 300;
  --text-body-ui: 16px;
  --text-body-ui--line-height: 1.4;
  --text-body-ui--letter-spacing: normal;
  --text-body-ui--font-weight: 300;
  --text-button-nav: 15px;
  --text-button-nav--line-height: 1.6;
  --text-button-nav--letter-spacing: normal;
  --text-button-nav--font-weight: 425;
  --text-code: 14px;
  --text-code--line-height: 1.5;
  --text-code--letter-spacing: normal;
  --text-code--font-weight: 500;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 112px;
  --space-11: 128px;
  --container: 1266px;
  --section-gap: 112px;

  /* Radius */
  --radius-hero-buttons-small-cards-tiles: 4px;
  --radius-compact-pill-ctas-contact-sales-get-started: 16.5px;
  --radius-feature-cards-pricing-panels: 6px;
  --radius-bordered-content-cards-sidebar-panels-media: 8px;
  --radius-email-input: 20px;
  --radius-avatars-icon-dots: 50%;

  /* Shadows */
  --shadow-button-lift: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  --shadow-card-float: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  --shadow-deep-panel: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
  --shadow-mockup-drop: 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-soft-ambient: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
}
```

## Tailwind v4 theme

```css
/* Stripe — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg: #ffffff;
  --color-surface: #f6f9fc;
  --color-border: #e5edf5;
  --color-text: #061b31;
  --color-navy: #0a2540;
  --color-text-muted: #425466;
  --color-primary: #533afd;
  --color-primary-soft: #635bff;
  --color-primary-border: #b9b9f9;
  --color-surface-dark: #0d1738;
  --color-surface-dark-2: #122054;
  --color-input: #e6ebf1;
  --color-accent-warm: #efa82e;
  --color-accent-cool: #42b0d5;
  --color-background: #ffffff;
  --color-surface: #f6f9fc;
  --color-surface-raised: #ffffff;
  --color-border: #e5edf5;
  --color-text: #061b31;
  --color-text-muted: #425466;
  --color-primary: #533afd;
  --color-primary-text: #ffffff;
  --color-accent: #635bff;
  --font-display: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Söhne (sohne-var)', Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --text-article-display: 56px;
  --text-article-display--line-height: 1.21;
  --text-article-display--letter-spacing: -1.12px;
  --text-article-display--font-weight: 500;
  --text-hero-display: 48px;
  --text-hero-display--line-height: 1.15;
  --text-hero-display--letter-spacing: -0.96px;
  --text-hero-display--font-weight: 300;
  --text-page-h1: 38px;
  --text-page-h1--line-height: 1.26;
  --text-page-h1--letter-spacing: -0.2px;
  --text-page-h1--font-weight: 500;
  --text-h2: 34px;
  --text-h2--line-height: 1.29;
  --text-h2--letter-spacing: -0.1px;
  --text-h2--font-weight: 500;
  --text-h3-feature-title: 26px;
  --text-h3-feature-title--line-height: 1.12;
  --text-h3-feature-title--letter-spacing: -0.26px;
  --text-h3-feature-title--font-weight: 300;
  --text-card-title: 22px;
  --text-card-title--line-height: 1.1;
  --text-card-title--letter-spacing: -0.22px;
  --text-card-title--font-weight: 300;
  --text-body-large: 18px;
  --text-body-large--line-height: 1.56;
  --text-body-large--letter-spacing: 0.2px;
  --text-body-large--font-weight: 300;
  --text-body-ui: 16px;
  --text-body-ui--line-height: 1.4;
  --text-body-ui--letter-spacing: normal;
  --text-body-ui--font-weight: 300;
  --text-button-nav: 15px;
  --text-button-nav--line-height: 1.6;
  --text-button-nav--letter-spacing: normal;
  --text-button-nav--font-weight: 425;
  --text-code: 14px;
  --text-code--line-height: 1.5;
  --text-code--letter-spacing: normal;
  --text-code--font-weight: 500;
  --radius-hero-buttons-small-cards-tiles: 4px;
  --radius-compact-pill-ctas-contact-sales-get-started: 16.5px;
  --radius-feature-cards-pricing-panels: 6px;
  --radius-bordered-content-cards-sidebar-panels-media: 8px;
  --radius-email-input: 20px;
  --radius-avatars-icon-dots: 50%;
  --shadow-button-lift: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  --shadow-card-float: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  --shadow-deep-panel: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
  --shadow-mockup-drop: 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-soft-ambient: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
  --container-site: 1266px;
}
```

# Stripe — Style Reference
> silk ribbon over a ledger grid

**Theme:** light · **Mood:** light, precise, gradient, elegant, corporate, cool

A bright, confident fintech site that reads like a precise financial document with one expensive flourish. Most pages are white or pale blue-grey (#f6f9fc) with navy text. Across them run silky ribbon gradients in orange, magenta, violet and sky blue, set on a diagonal. Faint dashed vertical guide lines show the page grid. What makes it distinctive is the contrast: light, calm, very well-set type sits next to one lush, saturated gradient that feels almost physical, plus dense product-UI mockups that prove the platform is real.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Paper White | `#ffffff` | `--color-bg` | Default page background, white cards and the nav bar area |
| Ledger Mist | `#f6f9fc` | `--color-surface` | Alternate section background (pricing and guide pages), grey half of split cards, sidebar panels |
| Frost Rule | `#e5edf5` | `--color-border` | Hairline dividers, logo-strip borders, dashed grid guides and card outlines |
| Deep Ink | `#061b31` | `--color-text` | Primary text: headline lead sentences, nav links, mobile menu items |
| Harbour Navy | `#0a2540` | `--color-navy` | Headings, dark pill CTA background, dark pricing card |
| Slate Copy | `#425466` | `--color-text-muted` | Body paragraphs, the faded second half of two-tone headlines, secondary labels |
| Stripe Blurple | `#533afd` | `--color-primary` | Main CTA fill (Get started, Contact sales), text links, secondary-button text, menu chevrons |
| Classic Blurple | `#635bff` | `--color-primary-soft` | Compact pill CTAs on content pages, breadcrumb links, feature card fill |
| Lavender Edge | `#b9b9f9` | `--color-primary-border` | 1px border on outlined secondary buttons (Sign up with Google) |
| Midnight Indigo | `#0d1738` | `--color-surface-dark` | Full-bleed dark sections ('The backbone of global commerce', developer blocks) |
| Cobalt Night | `#122054` | `--color-surface-dark-2` | Raised panels and illustration tones inside dark indigo sections |
| Input Fog | `#e6ebf1` | `--color-input` | Filled background for the rounded email input |
| Saffron Tile | `#efa82e` | `--color-accent-warm` | Warm illustration/tile accent that echoes the orange end of the ribbon gradient |
| Lagoon Tile | `#42b0d5` | `--color-accent-cool` | Cool illustration/tile accent that echoes the cyan-blue end of the gradient |

## Tokens — Typography

- **Display:** Söhne (sohne-var) (Inter, Helvetica Neue, Arial, sans-serif) — weights 300/500
- **Body:** Söhne (sohne-var) (Inter, Helvetica Neue, Arial, sans-serif) — weights 200/300/400/425/500
- **Mono:** Source Code Pro (JetBrains Mono, ui-monospace, Menlo, monospace) — weights 500/700

## Tokens — Radius

| Element | Value |
|---------|-------|
| Hero buttons, small cards, tiles | `4px` |
| Compact pill CTAs (Contact sales, Get started) | `16.5px` |
| Feature cards, pricing panels | `6px` |
| Bordered content cards, sidebar panels, media | `8px` |
| Email input | `20px` |
| Avatars, icon dots | `50%` |

## Do

- Set headlines in Söhne 300 (display) or 500 (editorial) with slight negative tracking, and make multi-sentence headlines two-tone: navy #061b31 lead, slate #425466 continuation.
- Keep blurple #533afd/#635bff as the only interactive colour, for CTAs, links and chevrons. Add a trailing › chevron to action buttons and links.
- Use the 425 weight for buttons, nav and inline links, and 300 for paragraphs with +0.2px tracking at 18px/1.56.
- Float product UI mockups over pastel or ribbon gradients with the layered blue-tinted shadows (rgba(50,50,93,.25) + rgba(0,0,0,.3)).
- Show the grid with faint dashed vertical guide lines and hairline #e5edf5 dividers, and alternate white with #f6f9fc and dark #0d1738 bands.
- Use tight 4px radii for hero buttons and tiles, and save the 16.5px pill for compact CTAs.

## Don't

- Don't use heavy 700 weights for headlines; the look depends on light 300 and medium 500 Söhne.
- Don't spread gradients across UI chrome, buttons or text blocks. The ribbon gradient is a single decorative object, cropped at an edge or skewed as a stripe.
- Don't use pure black text or neutral grey shadows. Text stays navy or slate, and shadows are tinted blue-violet.
- Don't round cards heavily (16px+) or use chunky borders. Keep 1px #e7ecf1 outlines and 4–8px corners.
- Don't add a second brand hue for CTAs; orange, cyan and magenta appear only in imagery and illustration.
- Don't crowd sections. Keep 112–128px between major blocks and at least 22–24px padding inside cards.

Stripe

Colors

Typography

Spacing & Shape

Components

Do / Don't

Screens

Related styles