# DESIGN.md: Stripe style

Build every screen in this project to this specification. It records the interface of Stripe (https://stripe.com),
captured 2026-11-13 at 1440, 768, 390 px. Reproduce the system, not the brand:
do not copy Stripe's logo, name, copy, illustrations or photos.

White pages framed by faint vertical hairlines, light-weight (300) Sohne headlines in deep navy with a muted continuation, a single violet #533afd for actions, and a silk gradient ribbon sweeping across the hero.

Theme: light. Category: marketing-site.

## Principles

- Build on white. Draw the page frame with two faint full-height vertical hairlines at the column edges and 1px rules between bands; let dark #0d1738 bands and the gradient ribbon run full bleed across that frame.
- Set headlines light: Sohne at weight 300 with tight negative tracking (-0.02em at 48px, -1.4px at 56px). Emphasis comes from colour, not weight.
- Write section headlines as one paragraph in two tones: a short sentence in #061b31, then the explanation in #64748d at the same size.
- Use one action colour on marketing pages: #533afd for the primary button, links and focus. Buttons are 4px-radius rectangles, 48px in content and 40px in the header, with a trailing chevron.
- Every focusable element gets a 3px solid #5452fbbf outline (offset 1px on buttons, 3px on text links). Hover darkens the violet; nothing scales or lifts.
- Animate colour over 0.3s with cubic-bezier(0.25, 1, 0.5, 1); the header uses 0.24s with cubic-bezier(0.45, 0.05, 0.55, 0.95).
- Show the product: live, animated UI mock-ups inside bento cards, bleeding off the card edge over pastel gradients, rather than icons or stock illustration.
- Dashboard and docs surfaces switch to the grey-blue system: 1px #d4dee9 box-shadow rings instead of borders, 6px to 8px radii, a 4px focus halo, and the system font on docs.

## Avoid

- Bold or semibold display headlines on marketing pages
- Pill-shaped buttons outside the pricing page
- More than one filled violet button in a group
- Saturated backgrounds behind body text; colour lives in the ribbon, the dark bands and the mock-ups
- Card drop shadows on the white canvas for ordinary content; shadows are kept for floating mock-ups, menus and the auth card
- Centred body copy outside hero-like bands (the dark stats band and testimonials are the exceptions)

## Color

### Background

| Name | Value | Use |
| --- | --- | --- |
| canvas | #ffffff | Page background, bento cards, mega menu, auth cards |
| subtle | #f8fafd | Footer (1299px tall at 1440) and the closing band above it; hover fill of white icon buttons |
| tint | #e5edf5 | Pale blue-grey fill (19 elements on home); also the 1px border of outlined link cards and the end colour of the background-flash keyframe |
| pricing-canvas | #f6f9fc | Pricing page header band and tinted page sections; the pricing page sits on #fafbfd and #f6f9fc instead of pure white |
| deep-navy | #0d1738 | Announcement bar and full-bleed dark sections (stats band, infrastructure section) |
| violet-wash | #e8e9ff | Fill of square icon buttons (carousel next, bento expand) |
| violet-wash-strong | #e2e4ff | Collapsed story button (40px square with a plus) |
| chat-navy | #0a2540 | Chat now button fill; on the pricing page also the heading colour and the Custom plan card |

### Text

| Name | Value | Use |
| --- | --- | --- |
| heading | #061b31 | Headlines, first sentence of two-tone headings, nav triggers, footer link hover |
| body | #50617a | Body copy, footer links, underlined inline links |
| muted | #64748d | Continuation sentence of two-tone headings, legal text, captions |
| on-dark | #ffffff | Text on #0d1738 bands and on violet buttons |
| on-dark-muted | #6480b2 | Inactive stats and inline links on dark bands |
| pricing-body | #425466 | Body copy on the pricing page (older palette) |

### Border

| Name | Value | Use |
| --- | --- | --- |
| card-outline | #e5edf5 | 1px border of outlined link cards; hover #bac8da |
| card-outline-hover | #bac8da | Hover border of outlined link cards |
| secondary-button | #b9b9f9 | 1px border of the light secondary button |
| story-button | #d6d9fc | 1px border of the expanding story button; hover fill of violet-wash icon buttons |
| frame-hairline | #e5edf5 | Vertical frame lines at the column edges and the rules between bands on home. Seen in screenshots; their computed colour was not measured, this is the closest measured pale border |

### Accent

| Name | Value | Use |
| --- | --- | --- |
| violet | #533afd | Primary button fill, links, logo, mega menu item titles. The only action colour on home |
| violet-hover | #4936e1 | Hero primary button hover (header button hover is #4133cb, form button hover #4032c8) |
| link-hover | #2e2b8c | Hover and active colour of violet text links and outlined buttons |
| focus-ring | #5452fbbf | 3px solid outline on every focusable element on the marketing site; offset 1px on buttons, 3px on text links |
| on-dark-link | #7389ff | Text links on dark bands; hover #7e94ff, active #a8bfff |
| legacy-blurple | #635bff | Pricing page pill buttons and links, chat focus shadow, dashboard links. The older brand violet, still on pricing and the dashboard |
| cyan | #00d4ff | Contact sales pill on the dark Custom pricing card; hover #ffffff |
| orange | #ff6118 | Text accents inside product mock-ups (12 elements on home, e.g. a checkout button label) |

### Semantic

| Name | Value | Use |
| --- | --- | --- |
| success | #108c3d | Positive figures and status text inside product mock-ups |
| success-wash | #15be5333 | Green-tinted fill inside product mock-ups (7 elements); the exact component was not identified |

### Dashboard and docs palette

Applies to: docs.stripe.com and the dashboard log in and sign up screens, which use the dashboard's own grey-blue system instead of the marketing violet

| Name | Value | Use |
| --- | --- | --- |
| canvas | #ffffff | Page, auth card, input and outline button fill |
| surface | #f7fafc | Docs tile list background, unselected tiles |
| surface-pressed | #f4f7fa | Active (pressed) fill of outline buttons and the docs search trigger |
| text | #273951 | Input text, outline button labels |
| text-body | #414552 | Docs headings and body |
| text-label | #3c4257 | Sign up labels and inputs |
| text-muted | #50617a | Docs top tabs, Ask AI button |
| text-hover | #1a2c44 | Hover colour of docs tabs and outline buttons |
| link-hover | #1a1f36 | Hover colour of docs and auth links |
| docs-link | #5469d4 | Docs links and the docs primary button fill |
| auth-primary | #675dff | Sign in button, checked checkbox |
| auth-link | #635bff | Forgot password link, links inside consent text |
| ring | #d4dee9 | 1px box-shadow ring on inputs, outline buttons, search trigger; dividers |
| ring-hover | #95a4ba | Ring colour on hover |
| focus-violet | #a497fc | 1px inner ring of a focused log in field (with a 4px #e0d9fb halo) |
| focus-violet-halo | #e0d9fb | 4px outer halo of a focused log in field or checkbox |
| focus-blue | #0196ed5c | 4px focus halo on sign up fields and docs buttons |
| code-string | #85d996 | Green string tokens in the dark docs code panel |

## Typography

| Role | Stack | Substitute | Source |
| --- | --- | --- | --- |
| sans | sohne-var, "SF Pro Display", sans-serif; font-feature-settings: "ss01" | Inter (Sohne is a paid Klim face loaded as a variable font (weights 1 to 1000). Use the variable Inter for 300 and 425. The pricing page declares sohne-var, "Helvetica Neue", Arial, sans-serif and the dashboard declares sohne-var, sohne-woff, "Helvetica Neue", Arial, sans-serif) | google-fonts |
| mono | SourceCodePro, SFMono-Regular, monospace | Source Code Pro (same face, loaded at weight 500) | google-fonts |
| sans | -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | system-ui (docs.stripe.com only; the docs load no web font. Docs code uses Menlo, Consolas, monospace) | system |

| Name | Size | Weight | Line height | Tracking | Family | Use |
| --- | --- | --- | --- | --- | --- | --- |
| display-dark | 56px | 300 | 57.68px | -1.4px | sans | Centred headline on the dark stats band |
| display | 48px | 300 | 55.2px | -0.96px | sans | Home hero headline: first sentence in heading colour, continuation in muted slate |
| stat | 48px | 300 | 48px | -0.96px | sans | Large figures in the stats row |
| title | 32px | 300 | 35.2px | -0.64px | sans | Section headlines, two-tone |
| card-title | 26px | 300 | 29.12px | -0.26px | sans | Bento card titles and split-section headlines |
| row-title | 22px | 300 | 24.2px | -0.22px | sans | Customer story rows, news titles |
| lead | 20px | 300 | 28px | -0.2px | sans | Intro paragraph under a section headline |
| body-large | 18px | 300 | 25.2px |  | sans | Paragraph beside a split-section headline |
| body | 16px | 300 | 22.4px |  | sans | Body copy and inline links |
| button | 16px | 400 | 16px |  | sans | 48px buttons and text links with a chevron |
| nav | 14px | 400 | 14px |  | sans | Header nav triggers and the 40px header buttons |
| small | 14px | 300 | 19.6px |  | sans | Announcement bar text, legal copy |
| caption | 12px | 300 | 17.4px |  | sans | Footnotes, unsubscribe line |
| code | 12px | 500 | 24px |  | mono | Code samples on the marketing site |
| pricing-hero | 56px | 500 | 68px | -1.12px | sans | Pricing page title (older system: weight 500, no ss01) |
| pricing-section | 38px | 500 | 48px | -0.2px | sans | Pricing section titles |
| pricing-label | 15px | 425 | 24px | 0.2px | sans | Pricing headings, pill buttons and emphasised links |
| pricing-body | 15px | 300 | 24px | 0.2px | sans | Pricing body copy and checklist items |
| docs-title | 32px | 700 | 40px |  | sans | Docs page title (system stack) |
| docs-heading | 21px | 700 |  |  | sans | Docs group headings (system stack) |
| docs-link | 16px | 500 | 26px |  | sans | Docs link lists (system stack) |
| docs-tab | 14px | 600 | 20px |  | sans | Docs top tabs and auth field labels |
| auth-input | 16px | 300 | 24px |  | sans | Typed text in auth fields |
| auth-button | 16px | 500 | 24px |  | sans | Auth primary and social buttons |
| auth-footnote | 13px | 400 |  |  | sans | Switch-flow line under the auth form |

## Spacing

- Unit: 4px
- Scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 96px, 112px, 128px
- Container max width: 1266px with 16px inline padding (content 1232px). Pricing uses 1080px, docs content 1008px
- Page gutter: 87px at 1440 (the centred 1266px frame); content starts at 104px, hero text at 208px desktop, 16px mobile
- Gap between sections: Bands stack edge to edge; each section headline box starts 93px below its band's top edge at 1440. Pricing declares 160px top and bottom padding

## Radius

| Name | Value | Use |
| --- | --- | --- |
| hairline | 1px | Corner of the focus outline on text links |
| control | 4px | Every marketing button, nav trigger and icon button; sign up inputs. The most used radius on home (99) |
| card | 6px | Second most used on home (81); bento cards and product frames read at this radius in the screenshots. Auth inputs and buttons |
| docs | 8px | Docs search trigger, Ask AI, try-it tiles; pricing cards |
| auth-card | 12px | The single 12px radius on the log in page, where the card is the only large rounded surface |
| pricing-pill | 16.5px | Pricing page pill buttons (33px tall) |
| pill | 999px | Pricing newsletter email input |
| round | 50% | Avatars and status dots |

## Shadow

| Name | Value | Use |
| --- | --- | --- |
| frame | rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px | Product mock-up frames on home |
| soft | rgba(23, 23, 23, 0.08) 0px 15px 35px 0px | Floating cards on home (chat card, mock-up panels) |
| soft-small | rgba(23, 23, 23, 0.06) 0px 3px 6px 0px | Small raised elements on home |
| float-button | rgba(0, 0, 0, 0.1) 0px 4px 8px 0px | White 40px floating icon button |
| pricing-button | rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px | Pricing pill buttons and small cards (23 uses) |
| pricing-card | rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px | Pricing plan cards and panels |
| auth-card | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 5px 15px 0px, rgba(48, 49, 61, 0.08) 0px 15px 35px 0px | Log in card |
| ring | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(212, 222, 233) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px | Docs and dashboard: 1px ring used instead of a border on inputs and outline buttons |
| search-trigger | rgba(16, 17, 26, 0.16) 0px 1px 1px 0px, rgb(212, 222, 233) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px | Docs search trigger at rest |
| selected-tile | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.08) 0px 2px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px | Selected tile in the docs try-it list |
| checkbox | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(103, 93, 255) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(48, 49, 61, 0.08) 0px 2px 5px 0px | Checked checkbox on the log in page |

## Layout

Breakpoints: pricing: 600px, 900px, 1112px, 1300px (min-width), login: 490px, 768px, 1040px, 1264px, 1440px (min-width), docs: 800px (max-width), 1000px (min-width), home: no media queries readable in the captured stylesheets

- **Announcement bar:** 36px tall full-width #0d1738 strip above the header: one centred 14px/400 white line ending in a bold link with a chevron, a close X 40px wide at the right edge. Its 4px corner squares off on scroll (announcement-bar-square keyframes).
- **Header:** 76px tall, white, 1px hairline below. Inside a 64px nav: logo at the left of the 1232px content column, then Products, Solutions, Developers, Resources (each with a small chevron), Pricing, a 1px vertical divider and an AI guide link with a sparkle icon. At the right, a 40px outlined Sign in and a 40px violet Contact sales with a chevron. The gradient ribbon passes behind it.
- **Framed column:** The 1266px frame is drawn as two 1px vertical hairlines running the full page height at 87px from each edge at 1440. Bands are separated by 1px horizontal rules that meet the frame lines. Dark bands and the gradient ribbon run full bleed across the frame.
- **Hero:** Text inset to 208px. A 14px label with a live, ticking figure, then a four-line 48px/300 headline whose first sentence is in heading navy and the rest in slate, then two 48px buttons 8px apart (violet primary with chevron, light secondary with a Google mark). A silk gradient ribbon (blue, violet, orange, pink) sweeps from the top centre to the right edge behind the text. A row of six customer logos sits in a ruled strip below.
- **Two-tone section intro:** 32px/300 headline, left aligned at the content edge, about 790px wide: one short sentence in #061b31 followed in the same paragraph by a longer sentence in #64748d.
- **Bento grid:** Cards with a 1px border on white, 16px apart: a row of two (816px and 400px wide, 676px tall), a row of three, then one full-width card. Each card has a 26px/300 title at 24px inset top left, a small square expand button top right, and a live product mock-up bleeding off the bottom or right edge over a soft gradient. The whole card is a button that opens a large dialog over a blurred page.
- **Dark stats band:** Full-bleed #0d1738 with a soft violet glow. Centred 56px/300 white headline on two lines, then a 1px-ruled row of four stats (48px/300 figure, 16px label); the active stat is white and the others #6480b2. Below, an animated starburst of lines and dots with a small day/night switch in the top right corner.
- **Split section intro:** Headline (26px/300) and a violet button in a 504px left column; an 18px/300 slate paragraph in the right half. Followed by a feature list, a story list or three columns.
- **Customer story list:** Rows separated by dashed hairlines: 40px logo tile, 22px/300 title, and at the right a 40px story button. The first row is open, showing a 1232px wide photo with three inline facts under it; the others are collapsed.
- **Three-up feature columns:** Three columns each with a 40px outlined icon tile, a bold lead-in sentence followed by slate copy on the same line, and a violet text link with a chevron.
- **Pricing hero and plans:** Pricing uses the older system: #f6f9fc page, a diagonal multicolour stripe crossing the page behind two plan cards (a white Standard card with a tinted price panel, a dark navy Custom card with four stacked option tiles), dashed vertical guide lines every 270px, and a floating pill sub-nav (Standard pricing, Custom pricing, FAQs) that becomes a sticky white bar with a gradient progress line on scroll.
- **Pricing table:** A left index of product links (15px, active in violet, groups in bold) and a white card at the right whose rows are split in two: product name and description on the left, fee and footnotes on the right, separated by dashed hairlines.
- **Docs shell:** Two header rows: logo with a DOCS wordmark at the left, a 200px search trigger and an Ask AI button centred, Create account and a small outlined Sign in at the right; a second row of 14px/600 tabs with two dropdowns at the right. Content in a 1008px column starting at 216px. A dotted gradient pattern fills the top left corner. The page scrolls inside the app shell (document height equals the viewport).
- **Footer:** #f8fafd band, 16px/300 #50617a links in columns, a newsletter email field with a Continue button, and a locale switcher.
- **Floating chat card:** Fixed at the bottom right: a white card with two overlapping avatars, a green dot, a bold availability line and a close X; a separate dark Chat now button below it. Present on home and pricing at every width.

Responsive: At 768 the announcement wraps to 47px, the header is 66px and the nav collapses into a menu button; the content column is 736px with 16px gutters and bento cards stack. At 390 the announcement wraps to three lines (67px), the header shows the logo and a square menu button, the hero headline shows only its first sentence, both hero buttons go full width and stack, every grid becomes one column, and the chat card overlaps the content. Pricing at 390 stacks the plan cards and moves the price panel under the description. On the sign up page the 1440 modal over a blurred dashboard becomes, at 390, a plain card on a tinted page with the gradient ribbon at the bottom and the Google button moved above the fields.

## Components

### Button, primary

Rectangle with a 4px radius, label and a small trailing chevron 8px after it.

- height: 40px in the header, 48px in heroes and forms, 32px small
- padding: 11.5px 20px 12.5px at 40px, 15.5px 24px 16.5px at 48px, 6px 16px at 32px
- radius: 4px
- background: #533afd
- color: #ffffff
- font: 14px/400 (line height 14px) at 40px and 32px, 16px/400 (line height 16px) at 48px
- gap: 8px
- transition: background-color, color, outline-color, border 0.3s cubic-bezier(0.25, 1, 0.5, 1); in the header color, background-color, border-color 0.24s cubic-bezier(0.45, 0.05, 0.55, 0.95)
- State hover: background #4936e1 (hero), #4133cb (header), #4032c8 (form Continue), #5d64fe (on a dark band)
- State active: background #4032c8 (hero and form), #533afc (header), #5d64fe (dark band)
- State focus-visible: outline 3px solid #5452fbbf, offset 1px; the hero button also darkens to #4434d3 with the outline at #5452fb27

Never rounded into a pill on the current marketing pages. Usually paired with one secondary button 8px to its right.

### Button, secondary

Same 4px rectangle with a 1px lavender border, violet label, optional leading brand mark or trailing chevron.

- height: 48px (40px in the header)
- padding: 14.5px 24px 15.5px at 48px, 10.5px 20px 13.5px at 40px
- radius: 4px
- background: #ffffffa6 in the hero, transparent elsewhere
- border: 1px solid #b9b9f9
- color: #533afd
- font: 16px/400 at 48px, 14px/400 at 40px
- transition: background-color, color, outline-color, border 0.3s cubic-bezier(0.25, 1, 0.5, 1)
- State hover: color #4b37e6, border #a09def (hero); color #2e2b8c, border #4032c8 (in content); color #322d9a, border #574bcf (header)
- State active: color #302c91, border #4538ca (hero); color #2f2b8e, border #4234c9 (content)
- State focus-visible: outline 3px solid #5452fb7a, offset 1px

### Button on media

White 4px rectangle with violet label and chevron, placed on a photo or a dark band. A ghost variant has a translucent violet border and white label.

- height: 48px
- padding: 15.5px 24px 16.5px
- radius: 4px
- background: #ffffff (ghost: #ffffff00 with 1px #4834dbb2 border)
- color: #533afd (ghost: #ffffff)
- font: 16px/400
- transition: background-color, color 0.3s cubic-bezier(0.25, 1, 0.5, 1)
- State hover: label #101139 (ghost: border #5d64fe)
- State active: label #131444 (ghost: border #5d64fe)
- State focus-visible: label #5139f8, outline 3px solid #5452fbbf, offset 1px

### Text link with chevron

Violet label followed by a small chevron; no underline.

- color: #533afd (on dark: #7389ff)
- font: 16px/400
- transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1)
- State hover: color #2e2b8c (on dark: #7e94ff)
- State active: color #2e2b8c or #2f2b8e (on dark: #a8bfff)
- State focus-visible: outline 3px solid #5452fbbf, offset 3px, radius 1px

### Inline link

Underlined text inside body copy or legal lines.

- color: #50617a in body, #64748d in legal lines
- font: 16px/300 line height 22.4px in body, 14px/300 in legal, 12px/300 in captions
- decoration: underline
- transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1)
- State hover: color #061b31
- State active: color #061b31
- State focus-visible: outline 3px solid #5452fbbf, offset 3px, radius 1px

### Header nav trigger

Label and a small down chevron that flips up while open; opens the mega menu.

- height: 40px
- padding: 12px 0
- radius: 4px
- color: #061b31
- font: 14px/400, line height 14px
- gap: 4px
- transition: color, background-color, border-color 0.24s cubic-bezier(0.45, 0.05, 0.55, 0.95)
- State hover: no computed difference measured on the trigger itself; inside the open menu an arrow slides in next to the hovered item (nav-hover-arrow-in)
- State focus-visible: outline 3px solid #5452fbbf, offset 1px
- State open: chevron points up, mega menu appears

Triggers sit about 28px apart. The logo link fades to opacity 0.6 on hover and focus (opacity 0.24s cubic-bezier(0.45, 0.05, 0.55, 0.95)).

### Mega menu

White panel spanning the 1262px nav width directly under the header, with a shadow and the page dimmed behind it. Four columns of groups (16px/400 group title over a 1px rule, then items: violet 14px/400 title over a 14px/300 slate description). A fifth column on a tinted background holds more links and an event card with an image. A bottom row, separated by a rule, holds a question and two violet links with descriptions.

- width: 1262px
- item: 14px/400 #533afd title, 14px/300 #50617a description, line height 18px
- column-gap: about 40px
- background: #ffffff, last column tinted
- State item hover: an arrow fades and slides in from 3px left (nav-hover-arrow-in), and fades out on leave (nav-hover-arrow-out)

Opening and closing timing was not measured.

### Icon button, square

40px square with a 4px radius and a centred 16px icon, measured on the story carousel arrows. The bento expand buttons look the same in screenshots but were not measured.

- size: 40px
- radius: 4px
- background: #e8e9ff
- transition: background-color, outline-color 0.3s cubic-bezier(0.25, 1, 0.5, 1)
- State hover: background #d6d9fc
- State active: background #d6d9fc
- State focus-visible: background #dfe1fe, outline 3px solid #5452fb64, offset 1px
- State disabled: transparent fill, icon #1010104d

### Expanding story button

Collapsed: a 40px square with a plus on violet wash. Expanded (on the open row): a 166px outlined button with label and chevron.

- height: 40px
- radius: 4px
- background: #e2e4ff collapsed, transparent expanded
- border: 1px solid #d6d9fc expanded
- color: #533afd
- font: 16px/400
- transition: background, color, border, width 0.4s cubic-bezier(0.3, 0, 0.2, 1); the label fades with opacity 0.4s cubic-bezier(0.3, 0, 0.2, 1)
- State hover: color #2e2b8c, border #4032c8
- State active: color #2e2b8c, border #4032c8
- State focus-visible: outline 3px solid #5452fbbf, offset 1px

### Bento card

White card with a 1px border: title top left, square expand button top right, live product mock-up below bleeding off an edge over a pastel gradient. The whole card is a button.

- padding: 24px to the title
- radius: 6px (read from screenshots)
- title: 26px/300 #061b31, line height 29.12px, tracking -0.26px
- gap: 16px between cards
- transition: z-index 0.1s steps(1); inner transform and clip-path 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)
- State open: a large dialog with the card's detail (heading, copy, two buttons, bigger mock-ups) opens over the page; the page behind turns pale blue-grey

Hover and focus differences on the card were not observed.

### Stat switcher

Row of four buttons on the dark band, each a large figure over a two-line label, separated by 1px rules; a short bright line marks the active one.

- figure: 48px/300, line height 48px, tracking -0.96px
- label: 16px/300, line height 22.4px
- color: #ffffff active, #6480b2 inactive
- transition: color 1.2s cubic-bezier(0.65, 0, 0.35, 1) when the band switches theme
- State active: figure and label turn white

A 32px day/night switch (combobox, 1px #8586c2 border, radius 4px) sits in the corner of the band; focus-visible adds a box-shadow #635bff1a 0px 0px 0px 3px and its border colour changes over 1.2s cubic-bezier(0.65, 0, 0.35, 1).

### Chat button and card

Dark rectangular Chat now button fixed bottom right, with a white availability card above it.

- height: 40px
- padding: 0 24px
- radius: 4px
- background: #0a2540
- border: 1px solid #ffffff1f
- color: #ffffff
- font: 15px/400 (15px/500 on pricing)
- transition: background 0.2s ease-in-out
- State hover: background #1a3a5c (measured on pricing)
- State active: background #1a3a5c
- State focus-visible: browser default outline (1px auto #005fcc)

The card's close X is #9ca3af and turns #6b7280 on hover (color 0.15s ease-in-out). The card enters and leaves with the chat-cta keyframes.

### Pricing pill button

Older-system pill with label and chevron.

- height: 33px
- padding: 3px 12px 6px 16px
- radius: 16.5px
- background: #635bff (on the dark card: #00d4ff with #0a2540 label)
- color: #ffffff
- font: 15px/425, line height 24px
- shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px
- transition: background-color, opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); in the header opacity, color, background-color, border, fill, stroke 0.3s cubic-bezier(0.25, 1, 0.5, 1)
- State hover: background #0a2540 (cyan variant: #ffffff)
- State active: background #0a2540 (cyan variant: #ffffff)
- State focus-visible: box-shadow #4d90fe 0px 0px 0px 2px, #ffffffe6 0px 0px 0px 2px inset on the form button; others offset 1px only

Pricing links are 15px/425 #635bff and turn #0a2540 on hover; grey links instead drop to opacity 0.6 or 0.65 (color, opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1)).

### Pricing FAQ row

Full-width white row with a 1px rule below, question at the left and a round violet chevron icon at the right. Open rows show the answer on a tinted strip.

- height: 60px
- padding: 17px 32px 19px 16px
- background: #ffffff
- color: #0a2540
- font: 15px/425, line height 24px
- gap: 16px
- transition: height 0.3s cubic-bezier(0.65, 0, 0.35, 1); chevron transform 0.3s cubic-bezier(0.65, 0, 0.35, 1)
- State open: chevron points up, answer (15px/300 slate with violet links) slides open below
- State focus-visible: browser default outline (1px auto #005fcc)

### Sticky section nav

On pricing: a floating white pill bar with three anchor links that, once scrolled past, becomes a full-width white bar with the links at the left, a Contact sales pill at the right and a gradient progress line along its top edge.

- link: 15px/425 #0a2540, active #635bff
- transition: transform, opacity 0.25s ease; enters from translateY(-100%)
- State hover: link colour #635bff
- State active link: colour #635bff; hovering it then gives #0a2540 at opacity 0.6

### Docs search trigger

200px button with a search icon, placeholder label and a slash key cap at the right. Opens a command dialog.

- height: 32px
- padding: 2px 8px
- radius: 8px
- background: #ffffff
- shadow: rgba(16, 17, 26, 0.16) 0px 1px 1px 0px, rgb(212, 222, 233) 0px 0px 0px 1px
- color: #5469d4
- font: 14px/400
- gap: 4px
- transition: box-shadow 0.15s ease
- State hover: text #273951, ring #95a4ba
- State active: background #f4f7fa, text #3c4f69, drop shadow flips to 0px -1px 1px

The dialog is a 648px white panel pinned 16px from the top, centred, with a search field, a close X, and a Suggested list of icon rows; the page behind is covered by a blue-grey scrim.

### Docs outline button

White button drawn with a 1px box-shadow ring (Sign in, Ask AI).

- height: 28px (Sign in), 32px (Ask AI)
- padding: 4px 8px, 6px 12px
- radius: 6px, 8px
- background: #ffffff
- ring: #d4dee9 0px 0px 0px 1px
- color: #273951 (Ask AI #50617a)
- font: 14px/600 (Ask AI 14px/400)
- transition: background-color, box-shadow 0.15s cubic-bezier(0, 0.09, 0.4, 1)
- State hover: ring #95a4ba
- State active: background #f4f7fa, text #3c4f69
- State focus-visible: adds a 4px #0196ed5c ring outside the 1px ring

### Docs tab and link

Top tabs are plain 14px/600 slate labels; content links are 16px/500 blue.

- tab: 36px tall, padding 8px 12px, #50617a, transition color 0.1s cubic-bezier(0, 0, 0.4, 1)
- link: #5469d4, 16px/500 line height 26px (14px/500 in the header)
- State hover: tab #1a2c44; link #1a1f36
- State focus-visible: link: radius 4px, box-shadow #3a97d447 0px 0px 0px 4px, #0759965c 0px 0px 1px 1px

Header dropdowns (APIs & SDKs, Help) open a white menu right-aligned under the trigger, 14px items, a 1px divider between groups and external-link icons.

### Docs try-it list

Vertical list of tiles beside a dark code panel; the selected tile is white and raised, the others sit on the tinted list background.

- height: 48.86px per tile
- padding: 12px
- radius: 8px
- background: #f7fafc, selected #ffffff
- color: #414552, selected text blue
- font: 14px/400 system stack
- State hover: background #ffffff
- State selected: background #ffffff, shadow rgba(60, 66, 87, 0.08) 0px 2px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px

Transitions on the tiles are 0s (instant).

### Copy chip

Monospace value with a copy icon, used for test card numbers.

- height: 24px
- padding: 2px
- radius: 6px
- border: 1px solid #ecf1f6
- color: #50617a
- font: 12px/700 Source Code Pro, line height 20px
- transition: all 0.1s ease-in-out
- State hover: border #d4dee9, text #1a2c44
- State active: background #ecf1f6

### Auth field

14px/600 label above, then a white input drawn with a box-shadow ring. A link may sit at the right end of the label row.

- height: 44px
- padding: 8px 12px
- radius: 6px
- background: #ffffff
- ring: #d4dee9 0px 0px 0px 1px
- color: #273951
- font: 16px/300, line height 24px
- label: 14px/600 line height 20px
- transition: box-shadow 0.24s ease
- State focus (log in): box-shadow #a497fc 0px 0px 0px 1px, #e0d9fb 0px 0px 0px 4px
- State focus (sign up): box-shadow #d4dee9 0px 0px 0px 1px, #0196ed5c 0px 0px 0px 4px

Two sign up fields render their ring on a wrapper and use a 14px/300 inner input with 4px 8px padding and a 4px radius; they look the same. Hover was not measured.

### Auth button

Full-width primary in violet, and outline social buttons with a centred 16px icon and label.

- height: 44px primary on log in, 36px on sign up; 40px outline (36px on sign up)
- padding: 8px 16px
- radius: 6px
- background: #675dff primary; transparent or #ffffff outline
- ring: #675dff 0px 0px 0px 1px on primary; 1px #d4dee9 on outline
- color: #ffffff primary, #273951 outline
- font: 16px/500, line height 24px
- gap: 8px
- transition: background-color, box-shadow 0.15s cubic-bezier(0, 0.09, 0.4, 1)
- State incomplete form: the primary renders pale lavender with cursor default until the fields are filled; the computed fill stays #675dff, so the paling comes from a wrapper that was not measured
- State hover (outline): background #ffffff, ring #95a4ba
- State active (outline): background #f4f7fa, text #3c4f69
- State focus-visible: primary: ring plus #e0d9fb75 halo; outline: background #ffffff8a on log in, 4px #0196ed5c ring on sign up

### Auth checkbox

14px box with a 4px radius and a 14px label beside it.

- size: 14px
- radius: 4px
- background: #675dff checked
- shadow: rgb(103, 93, 255) 0px 0px 0px 1px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(48, 49, 61, 0.08) 0px 2px 5px 0px
- transition: background-color, box-shadow 0.24s ease
- State focus-visible: adds a #e0d9fb 0px 0px 0px 4px halo, outline offset 2px

### Product sub-nav

Bar under the older header: product name in accent on the left, section links on the right; the current link is accent coloured.

- height: not observed
- name: 18px/425/28px, accent colour
- links: 15px/425/24px #0a2540; current link in accent

### Pricing card row

Row inside a pricing card: copy on the left (title + body), price panel on the right.

- columns: 446px copy, 365px price panel
- border: 1px solid #e7ecf1 on top
- copy padding: 16px 24px 16px
- title: 15px/425/24px #0a2540
- body: 15px/300/24px #425466
- price panel: #fafbfd, padding 15px 24px
- price: 15px/425/19px #0a2540
- unit: 15px/300/24px #3f4b66
- note: 13px/300/21px #707f98

Rows stack under 640px: the price panel goes full width under the copy.

### Pricing accordion row

Collapsed group of extra price rows inside a pricing card.

- height: 57px closed (1px rule + 56px)
- title: 15px/425/24px #0a2540 at 24px inset
- summary: 15px/425 at x 919
- icon: round 20px accent with a plus
- State open: price rows appear below; icon turns 45 degrees

### Mobile navigation sheet

Burger button opens a full-screen sheet with section rows; each section drills in with a Back row; Start now and Contact sales stay pinned at the bottom.

- burger: 40px square, #e8e9ff wash (accent fill on the older system)
- rows: 50px, 18px
- pinned buttons: 48px
- State open: sheet covers the page, burger becomes a close icon

## Page templates

Every page of the site is built on one of these layouts. Pick the one that fits the page you are building.

### Home page

The main marketing page of the newer system: one long white page inside the framed 1266px column.

1. Announcement bar above the 76px header (dismissible); header: wordmark, 4 mega menu triggers (40px, 14px/400), Pricing, divider, Help me link, Sign in (secondary 40px) and Contact sales (primary 40px, #533afd, 4px radius)
2. Frame: 1266px column centred, 1px #e5edf5 vertical lines at x 87 and 1353 at 1440
3. Hero 685px tall: 4-line display headline, lead 16px/300/22.4px, two 48px buttons; animated gradient ribbon drawn on canvas behind it (761px tall, starts 76px above the hero, offset 337px from the left)
4. Bento of solution cards: rows of 816px + 400px cards, 676px tall, third row one 1232 x 450px card
5. Event promo band 560px; stats band 977px on a #555d7d to #786cb6 gradient with tabbed stats
6. Scale section: rule, split rows, customer story rows, expert band, wide media, quote and logo strip
7. Developer band on #0d1738 with code media; news track of cards; closing CTA
8. Full footer on #f8fafd, 1299px tall: 4 columns at x 104/416/728/1040, links 16px/300/20px #50617a with 24px pitch, newsletter, locale and copyright

Pages on this layout: /

### Product page, older system

Single-product pages still on the older system: pastel #f6f9fc page, 1080px container with dashed column guides, pill buttons in the product accent colour.

1. Header 78px with pill Sign in and Contact sales (33px, 16.5px radius); sticky sub-nav with product name 18px/425 in accent and section links 15px/425
2. Hero 663px: display 56px/500/68px (max 460px), lead 18px/300/28px, accent pill + ghost pill; diagonal colour ribbon on the right
3. Feature row 755px: 4 columns of 270px, each a 40px icon, 15px/425 title with a 1px accent bar 16px to its left, body 15px/300/24px
4. How it works: eyebrow 18px/500 accent, h2 38px/500/48px, numbered 4-column steps, product demo media, follow-up h2, lead and pill
5. Quote card on #03293b with logo switcher of 4 marks
6. CTA grid 540 + 270 + 270px with two side features, then legal small print 128px below
7. Older footer, 1600px: brand column + 3 link columns of 270px, titles 15px/425, links pitch 28px, pill newsletter, copyright

Pages on this layout: /tax, /apps, /sigma, /connect, /climate, /capital, /payouts, /identity, /partners, /payments, /data-pipeline, /support-plans, /payments/link, /capital/platforms, /payments/elements, /payments/checkout, /authorization-boost, /revenue-recognition, /financial-connections, /professional-services, /payments/payment-links, /payments/payment-methods, /partners/become-a-partner, /terminal

### Product page, newer system

Product pages moved to the newer white system with a framed column, a product sub-nav and accordions.

1. Header 76px (newer system); product sub-nav 81px with name and section links
2. Hero 771px with large product art (1264 x 772px) behind the copy; logo strip 74px
3. Opportunity band 460px on tint; 3 alternating text and media rows of 261px
4. Feature accordion: one row open at a time, closed head 73px, open row 730px with media
5. Scale stats, customer story cards 400 x 584px, analyst band
6. Capabilities 2 x 2 grid (474 and 404px tall cards), optimise carousel of 4 cards 348px wide
7. FAQ accordion with resources column, CTA band 319px, notes 366px, full footer

Pages on this layout: /radar, /issuing, /billing, /invoicing, /atlas, /treasury, /treasury/platforms, /billing/subscriptions, /billing/usage-based-billing, /managed-payments, /crypto-onramp, /money-management/availability, /use-cases/global-businesses

### Use case and industry page

Pages per use case or industry on the older system; bands of fixed height alternate white and #f6f9fc.

1. Older header 78px; hero 604px on a tinted wedge: kicker 15px/425 accent, display 56px/500 over 2 lines (682px), lead, Contact sales pill + ghost Start now; product mockup on the right
2. Logo band 663px: 8 logos 200 x 40px in 4 columns of 270px, 60px row gap
3. Tint band 1145px: eyebrow, h2 38px/500/48px, link lead, 3 stacked features (476px) beside a tall media
4. White band 1688px: cyan eyebrow #02bcf5, h2, lead, two 412px columns with h3 26px/500/36px and pills, two media, 4-column automation row
5. Tint 496px and 429px callouts with a 412px text column and media on the right; white 948px band with 2 x 2 features
6. Case study band 1166px: h2 492px wide, Challenge / Solution / Products blocks and a logo
7. Tint expert services band 629px; CTA band 481px (540 + 270 + 270px); older footer on #f6f9fc

Pages on this layout: /use-cases/ai, /use-cases/saas, /use-cases/crypto, /use-cases/ecommerce, /use-cases/platforms, /use-cases/marketplaces, /use-cases/creator-economy, /use-cases/agentic-commerce, /use-cases/in-app-payments, /use-cases/embedded-finance, /use-cases/finance-automation, /industries/gaming, /industries/retail, /industries/travel, /industries/fintech, /industries/insurance, /industries/nonprofits, /industries/public-sector, /industries/media-entertainment, /industries/professional-services

### Audience landing page

Landing pages for a company stage or the yearly event. Measured /startups: older legacy system (#f6f9fc tint bands, 1080px container, pill buttons), not the newer framed column.

1. Legacy header (78px); hero 813px at 1440 with a 76/425 display headline (-3.04px tracking), 18/300 lead, two pills and a 350x208 promo card; a gradient canvas sits behind the hero (922px band at 390, canvas 430x1228)
2. Bands at 1440 (390): business types 855 (815, tint), program card 1361 (2362; card has a 4px #ff9a6c top rule, 104px inner padding), stage rows with chips 1812 (2800, tint), tabbed product cards 1236 (1093; at 390 a 318x559 card carousel, 24px gap), growth rows 1808 (2801, tint), stat band 891 (988, #f6f5f6), partner band 441 (494), help grid 906 and closing CTA 385; legacy footer 1600 at 1440

Pages on this layout: /enterprise, /startups, /sessions, /sessions/2026

### Pricing page

The pricing page: plan cards, a feature list, then a long product price list with a sticky side index.

1. Older header 78px on #f6f9fc; h1 56px/500/68px at y 162 (2 lines)
2. Plan cards at y 362, 532 x 287px, 8px radius, 16px apart: Standard (white, 262px #f6f9fc rate panel inset 4px, rate 26px/500) and Custom (#0c2e4e, 4 options 262 x 67px on #1f4468, 3px apart, 16px/300 white); Contact sales pill on #00d4ff
3. Diagonal gradient ribbon behind the cards; floating section tabs 348 x 50px, 99px radius, white 70% with blur, 48px below the cards
4. Features: h2 26px/500 at y 840, 4 x 2 grid of 270px columns, 40px icon, 15px/425 title, tick rows 15px/300/24px with 28px pitch (each opens a tooltip)
5. Explore section on #f6f9fc from y 1532: eyebrow, h2 38px/500/48px, lead 18px/300/28px; sticky side index 222px wide (806px tall, group labels 15px/425, links 15px/300 with 27px pitch, Custom pricing pill pinned under a #e1e9ef rule) beside 810px cards
6. Group heading 26px/500 + lead 15px/300, cards 24px apart, 64px between groups; card: 8px radius, shadow, padding 24, title 18px/425, lead, Start now pill top right, tick bullets 28px pitch; rows split 446px copy / 365px price panel on #fafbfd with a 1px #e7ecf1 top rule; price 15px/425, unit 15px/300 #3f4b66, notes 13px/300/21px #707f98, ghost pill links
7. Accordion rows inside cards: closed head 57px (title 15px/425, optional summary at x 919, round plus icon), open shows more price rows; card footer row 66px with a ghost pill
8. Custom pricing (white, 2160px): 412px copy column + 540 x 400px package card, 4 features, ROI card 1080 x 386px on #f6f9fc, story carousel with stats column and 810 x 410px story, 4 logo buttons 200 x 80px
9. FAQ on #f6f9fc (706px): h2 38px, rows 60px on white with 1px #e7ecf1 rules, round chevron icon; open answer 15px/300/24px, 762px wide, 16px under the head
10. CTA 709px (540 + 270 + 270px), older footer on #f6f9fc 1600px
11. Sticky pricing bar after the tabs scroll away: 64px white, tabs left, Contact sales pill right, 2px gradient progress line on top

Pages on this layout: /pricing

### Company statement page

Short text pages: one centred column of large body copy, a link list and the mini footer.

1. Newer header 76px; centred art 298 x 299px at y 172
2. Text column 608px at x 416, 19px/300/28.5px #50617a, paragraphs 32px apart, underlined inline links
3. Link list 96px below: 3 rows of 56px with #e5edf5 rules, label 16px/300 left, link 16px/400 #000 with chevron right
4. Mini footer 142px: locale button, copyright 16px/300, brand mark right

Pages on this layout: /about

### Careers page

The careers sub-site with its own header and sections (newer system, white bands in the framed 1266px column).

1. Own 76px header (66px at 390): wordmark plus 'careers' mark, three 14px links (38px tall, r4; current #061b31, others #533afd) and a 121x40 primary button; at 390 the links collapse into a 40px #e8e9ff menu button
2. Bands at 1440 (390): hero 259 (140) with a 48/300 headline (-0.96px); full-bleed image 513 (294); mission 995 (1410) with a 32/300 two-tone title, 18/300 copy, two 608x432 images and three 400px value columns; AI band 782 (597) with a 1264x511 image; GDP line plus 142x34 logo marquee (172px pitch) 304 (242); scale band 778 (1337) with canvas and four 316px stat cells (48/300 gradient figures); news carousel 748 (702) with 28px #e8e9ff arrows and a 1232x460 video; FAQ 747 (955) with an 816px accordion (18/300 questions, 62px closed rows); three 400x480 cards 851 (678); newer full footer 1299 (3170)

Pages on this layout: /careers

### Customer stories overview

Overview of customer stories on the older system.

1. Older header 78px and sub-nav 40px (Customers, Overview, All customer stories)
2. Hero 606px: display 56px/500/68px (412px, 4 lines), lead 18px/300 (508px), dark #0a2540 pill + ghost pill; mosaic of 6 story cards 254 x 356px, 4px radius, in 3 staggered columns at x 720/990/1260
3. Results band 707px: h2 38px/500 at 395px from its top, 4 stats 24px/500/32px + 15px/300 caption
4. Logo band 360px on #f6f9fc: 8 logos 200 x 40px
5. By size band 1125px: eyebrow, h2, segmented Startup/Enterprise toggle (32px), stats column 206px + story card 810 x 410px, logo switcher of 200 x 80px buttons
6. Building together band 1311px on tint: case with Challenge/Solution/Products, phone mockup 264 x 533px (36px radius) and photo 267 x 406px
7. By use case band 1748px: pill tabs, 2 columns of 548px story tiles (624 and 309px tall)
8. By solution band 1493px on tint: 2 text columns of 492px, 8 links in 2 columns, product UI collage
9. CTA band 618px, older footer 1600px

Pages on this layout: /customers

### Article list

Blog, newsroom and guide indexes: a header block and a list or grid of posts.

1. Measured /blog (legacy system): 40px sub-nav with a ghost pill; hero 788 (1215 at 390) with a ribbon and a 460px featured card; category filters as tabs
2. Post rows with meta/author column, title (min 72px, 470px max on narrow rows) and a 540px media; highlights band 725 (479 at 390) with five 254x409 colored cards; 'View all posts', subscribe band 460 (760 at 390), white legacy footer

Pages on this layout: /blog, /newsroom, /guides

### Directory page

Long link directories and catalogs (sitemap, product catalog, roadmap).

1. Measured /sitemap: 438px tint hero with the title and decorative skew bars
2. Groups of a label plus three link columns (links 18px line height + 2px, 20px row gap, 130px between groups, body padding 124/120); at 390 a single column with 50px label gap and 66px group gap; page 3486 at 1440, 5183 at 390

Pages on this layout: /sitemap, /resources/more, /products, /roadmap

### Legal and policy page

Policies and legal lists: long text with headings and a side table of contents.

1. Measured /privacy: logo-only white header (76px), white body, tint footer; 270px sticky side nav ('Legal' kicker, current link with an accent bar, 8 links) beside an 810px text column
2. 221 blocks of h1-h4, paragraphs, an inline table of contents and boxed notes with measured top margins; page 36832 at 1440

Pages on this layout: /privacy, /spc/licenses, /legal/restricted-businesses, /cookie-settings

### Contact sales page

The sales contact page: a lead form card over a gradient canvas.

1. Measured /contact/sales: standalone newer page, 76px header with wordmark and an outline Sign up button; 824px framed main (768 at 390) with a gradient canvas behind a 608x427 card at left 328, top 167
2. Card: three-step stepper, 26/300 title, lead, label + field rows (192 + 336px), native select, Continue button; 127px footer (185 at 390)

Pages on this layout: /contact/sales

## Motion

Durations, easings and keyframes are measured values. Use them as written; honour `prefers-reduced-motion`.

### Durations

| Name | Value | Use |
| --- | --- | --- |
| instant-docs | 0.1s | Docs tab colour, copy chip |
| quick | 0.15s | Pricing links and pills; docs and dashboard outline buttons; opacity of menu list items on home |
| header | 0.24s | Header nav triggers, header buttons and logo; auth field focus ring |
| default | 0.3s | The default on home: links, buttons, icon buttons, svg fill and stroke |
| expand | 0.4s | Story button width and label |
| reveal | 0.5s | Fade-in of blocks as they enter the viewport; diagram pieces |
| pricing-image | 0.6s | Pricing pictures and story overlays |
| bento | 0.8s | Transform and clip-path inside bento cards |
| theme | 1.2s | Day/night switch on the dark band: colour, border and opacity |

### Easings

| Name | Value | Use |
| --- | --- | --- |
| default | cubic-bezier(0.25, 1, 0.5, 1) | Every hover on home links, buttons and icons; also the chat card |
| header | cubic-bezier(0.45, 0.05, 0.55, 0.95) | Header triggers, header buttons, logo |
| bento | cubic-bezier(0.165, 0.84, 0.44, 1) | Bento card transform and clip-path, one-off fades |
| reveal | cubic-bezier(0.33, 1, 0.68, 1) | Scroll fade-ins and the hero digit roll |
| expand | cubic-bezier(0.3, 0, 0.2, 1) | Story button |
| in-out | cubic-bezier(0.65, 0, 0.35, 1) | Theme switch, accordion height, chevron rotation |
| path | cubic-bezier(0.16, 1, 0.3, 1) | SVG path transforms in illustrations |
| cycle | cubic-bezier(0.78, 0, 0.22, 1) | Vertical text cycling inside product mock-ups |
| pricing | cubic-bezier(0.215, 0.61, 0.355, 1) | Pricing links, pills and icons |
| pricing-image | cubic-bezier(0.7, 0, 0, 1) | Pricing pictures and overlays |
| dashboard | cubic-bezier(0, 0.09, 0.4, 1) | Dashboard and docs buttons |
| docs-tab | cubic-bezier(0, 0, 0.4, 1) | Docs tab colour |

### Transitions

| Target | Properties | Duration | Easing |
| --- | --- | --- | --- |
| Text link (home) | color | 0.3s | cubic-bezier(0.25, 1, 0.5, 1) |
| Button (home) | background-color, color, outline-color, border | 0.3s | cubic-bezier(0.25, 1, 0.5, 1) |
| Header trigger and header button | color, background-color, border-color | 0.24s | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
| Logo link | opacity | 0.24s | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
| Icon button | background-color, outline-color | 0.3s | cubic-bezier(0.25, 1, 0.5, 1) |
| Illustration svg | fill, stroke, transform, opacity | 0.3s | cubic-bezier(0.25, 1, 0.5, 1) |
| Menu list item | opacity | 0.15s | linear |
| Story button | background, color, border, width | 0.4s | cubic-bezier(0.3, 0, 0.2, 1) |
| Bento card content | transform, clip-path | 0.8s | cubic-bezier(0.165, 0.84, 0.44, 1) |
| Scroll reveal | opacity 0 to 1 | 0.5s | cubic-bezier(0.33, 1, 0.68, 1) |
| Dark band theme switch | color, border-color, opacity | 1.2s | cubic-bezier(0.65, 0, 0.35, 1) |
| Announcement collapse | grid-template-rows | 0.4s | cubic-bezier(0.65, 0, 0.35, 1) |
| Chat card | grid-template-rows, transform (to translateY(32px)) | 0.3s | cubic-bezier(0.25, 1, 0.5, 1) |
| Outlined link card | border-color, background-color | 0.2s | ease |
| Pricing link and pill | color, opacity / background-color, opacity | 0.15s | cubic-bezier(0.215, 0.61, 0.355, 1) |
| Pricing FAQ row | height; chevron transform | 0.3s | cubic-bezier(0.65, 0, 0.35, 1) |
| Pricing sticky nav | transform (from translateY(-100%)), opacity | 0.25s | ease |
| Pricing carousel | transform (translateX -270px per step) | 0.35s | cubic-bezier(0.4, 0, 0.2, 1) |
| Docs and dashboard button | background-color, box-shadow | 0.15s | cubic-bezier(0, 0.09, 0.4, 1) |
| Docs search trigger | box-shadow | 0.15s | ease |
| Docs tab | color | 0.1s | cubic-bezier(0, 0, 0.4, 1) |
| Auth field and checkbox | box-shadow (checkbox also background-color) | 0.24s | ease |
| Sign up password block | height | 0.3s | cubic-bezier(0.7, 0, 0.3, 1) |

### Keyframes

**nav-hover-arrow-in:** Arrow next to a hovered mega menu item slides in from 3px left

```css
@keyframes nav-hover-arrow-in{0%{opacity:0;transform:translateX(-3px)}to{opacity:1;transform:translateX(0)}}
```

**nav-hover-arrow-out:** Same arrow fades out on leave; on pricing it ran for 150ms with cubic-bezier(0.25, 1, 0.5, 1) Timing: 150ms cubic-bezier(0.25, 1, 0.5, 1) forwards (measured on pricing's copy, refreshed-nav-hover-arrow-out).

```css
@keyframes nav-hover-arrow-out{0%{opacity:1}to{opacity:0}}
```

**navigation-menu-delay-reset:** Resets a custom property that delays the mega menu between triggers

```css
@keyframes navigation-menu-delay-reset{0%,to{--navigation-menu-transition-delay:0s}}
```

**detect-scroll:** Scroll-driven trick on the header nav that sets a custom property when the page can scroll

```css
@keyframes detect-scroll{0%,to{--can-scroll: }}
```

**announcement-bar-square:** Squares the announcement bar's corners on scroll

```css
@keyframes announcement-bar-square{to{--announcement-bar-radius:0px}}
```

**bento-dialog-reveal-fade-in-up:** Bento detail dialog content rises 30px and fades in

```css
@keyframes bento-dialog-reveal-fade-in-up{0%{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:translateZ(0)}}
```

**bento-overlay-gradient-opacity-animation:** Gradient overlay behind the bento dialog fades in

```css
@keyframes bento-overlay-gradient-opacity-animation{0%{opacity:0}to{opacity:1}}
```

**agentic-commerce-graphic-border-spin:** A conic border spins around a card in an illustration

```css
@keyframes agentic-commerce-graphic-border-spin{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}
```

**book-of-the-week-fade-in:** Image fade-in in the news section Timing: 500ms, keyframe easing cubic-bezier(0.33, 1, 0.68, 1).

```css
@keyframes book-of-the-week-fade-in{0%{opacity:0}to{opacity:1}}
```

**background-flash:** Background fades to a pale blue-grey; where it runs was not observed (original name opacityAnimation)

```css
@keyframes background-flash{0%{background-color:rgba(229,237,245,0)}to{background-color:rgba(229,237,245,.7)}}
```

**chat-cta-card-entrance:** Chat availability card rises 16px and fades in

```css
@keyframes chat-cta-card-entrance{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
```

**chat-cta-card-exit:** Chat availability card drops 8px and fades out

```css
@keyframes chat-cta-card-exit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}
```

**chat-cta-entrance:** Chat button rises 20px from 95% scale

```css
@keyframes chat-cta-entrance{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
```

**chat-cta-exit:** Chat button leaves in reverse

```css
@keyframes chat-cta-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(20px) scale(.95)}}
```

**portal-tooltip-item-fade-in:** Tooltip content fades in on pricing

```css
@keyframes portal-tooltip-item-fade-in{0%{opacity:0}}
```

**skeleton-overlay:** Docs sidebar and content skeleton shimmer (original names SidebarSkeleton-Overlay-animation, ContentSkeleton-Overlay-animation)

```css
@keyframes skeleton-overlay{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
```

**skeleton-fade-in:** Docs skeleton blocks fade in

```css
@keyframes skeleton-fade-in{0%{opacity:0}100%{opacity:1}}
```

**gradient-sweep:** Background-position sweep across a gradient, on docs and dashboard (original generic name keyframes)

```css
@keyframes gradient-sweep{0%{background-position:200% center}100%{background-position:0 center}}
```

**spinner-show:** Spinner fades in (docs and dashboard)

```css
@keyframes spinner-show{from{opacity:0}to{opacity:1}}
```

**spinner-rotation:** Spinner rotation

```css
@keyframes spinner-rotation{100%{transform:rotate(360deg)}}
```

**highlight-line:** Docs code panel: a highlighted line fades from green to the panel colour

```css
@keyframes highlight-line{0%{background:var(--sail-color-green-800)}100%{background:#1a2652}}
```

**auth-shake:** Log in and sign up card shakes on a rejected submit (original names Login-shake, RegisterAndLoginLayout-shake). Present in the CSS, not triggered during capture

```css
@keyframes auth-shake{0%,to{transform:translate(0)}20%{transform:translate(-15px)}40%{transform:translate(15px)}60%{transform:translate(-10px)}80%{transform:translate(10px)}}
```

**modal-panel-shake:** Dashboard modal panel shake with a slight 3D turn. Present in the CSS, not triggered

```css
@keyframes modal-panel-shake{0%{transform:translate(0)}12.5%{transform:translate(-6px) rotateY(-5deg)}37.5%{transform:translate(5px) rotateY(4deg)}62.5%{transform:translate(-3px) rotateY(-2deg)}87.5%{transform:translate(2px) rotateY(1deg)}to{transform:translate(0)}}
```

**confirmation-button-spinner-rotation:** Spinner inside a submitting dashboard button

```css
@keyframes confirmation-button-spinner-rotation{to{transform:rotate(360deg)}}
```

**strength-indicator-movement:** Password strength meter while it is being computed: a 4px block slides along the track (original fetchingStrengthIndicatorMovement)

```css
@keyframes strength-indicator-movement{0%{left:0%}to{left:calc(100% - 4px)}}
```

**strength-indicator-width:** Password strength meter grows from 4px to 128px

```css
@keyframes strength-indicator-width{0%{width:4px}to{width:128px}}
```

**loading-background:** Dashboard loading placeholder sweep (original LoadingBackground--animation)

```css
@keyframes loading-background{0%{background-position:0px top}to{background-position:-400px top}}
```

### Not measured

- The hero gradient ribbon (blue, violet, orange, pink silk folds) crossing the header and hero on home, and the same ribbon behind the log in card. On log in it is a static 3000 by 2500 image; on home it is rendered by script. The string THREE.WebGLRenderer is in the home and log in scripts, but whether the ribbon moves, and how, was not measured.
- The hero headline: its computed colours read rgb(129, 184, 26) and rgba(0, 14, 255, 0.5) while the screenshot shows navy and slate text with parts of words tinted violet where the ribbon passes. The effect is script or blend driven and not specified here.
- In the 1440 screenshot the header Sign in label is orange over the ribbon although its computed colour is #533afd; the mechanism was not measured.
- The live counter in the hero label ticks; a span slides up by 100% over 325ms after a 450ms delay with cubic-bezier(0.33, 1, 0.68, 1), consistent with rolling digits.
- Product mock-ups in the bento cards play scripted sequences: a 11.95s opacity timeline on an image (cubic-bezier(0.2, 0, 0, 1)), vertical text cycling over 1420ms after a 4000ms delay with cubic-bezier(0.78, 0, 0.22, 1), path draws with stroke-dashoffset over 1s. Full choreography is not specified.
- A testimonial logo strip autoplays: a violet (#533afd) bar grows under the active logo (an svg rect animated in width), switching the quote. Its period was not measured.
- The starburst of lines and dots on the dark band animates continuously; it is script driven and not specified.
- Mega menu open and close timing, the bento dialog entrance (the capture caught the dialog blurred mid-opening), and the docs search dialog entrance: keyframes or transitions exist but their running duration was not measured.
- Elements revealed by script translate up from 324px with no CSS transition (transition: all 0s), so the timing comes from script and was not measured.
- Hover on the bento cards, on the header nav triggers themselves, and on auth fields showed no computed difference; any hover effect there is not recorded.

## Flow: Log in

Starts at `/login`. dashboard.stripe.com. White page with a 76px top bar (logo at 105px from the left, 1px hairline below) and the gradient ribbon image filling the right two-thirds behind. Faint vertical frame lines at the column edges. One white card, 540px wide, centred horizontally, top at 138px of a 900px viewport, 12px radius, auth-card shadow, 64px side padding (412px content) and 48px top padding. A tinted strip at the bottom inside the card holds the switch link. Copyright and privacy links sit below the fold.

### 1. Credentials

- Card title in slate ("Sign in to your account")
- Email field: type email, name email, required, no autocomplete attribute; focused on arrival with the violet ring
- Password field: type password, autocomplete current-password; the label row carries a "Forgot your password?" link at the right (14px/600 #635bff)
- Checkbox "Remember me on this device", checked by default
- Primary Sign in button, 44px full width, pale while the fields are empty
- Divider: 1px #d4dee9 line with a centred 13px label ("Or sign in with")
- Three 40px outline buttons stacked 10px apart: Google, Passkey, SSO, each with a 16px icon
- Tinted strip at the card's foot: 13px question with a violet link to create an account
- Action: Sign in (a type=button control, submitted by script): not exercised
- Action: Forgot your password: goes to /reset
- Action: Create account: goes to /register
- Action: Google: continues with Google (id continue_with_google)
- Action: Passkey and SSO: their ids (toggle_passkey_mode, toggle_sso_mode) indicate the card switches mode in place; not exercised
- Action: Logo: goes to stripe.com
- Validation: Not observed: no submit was attempted on this page, and the measurement recorded no validation result. The CSS carries a horizontal shake (auth-shake) for a rejected attempt.

Not recorded: Everything after valid credentials (two-step verification, account picker, dashboard), the reset password screen, the passkey and SSO modes, and the Google hand-off.

## Flow: Sign up

Starts at `/register`. dashboard.stripe.com. At 1440 a white modal card, about 540px wide with rounded corners and a soft shadow (its radius and shadow were not isolated), centred and starting 91px down, over a blurred, dimmed preview of the dashboard (240px sidebar, 60px search header, charts). About 48px inner padding around a 444px content column. At 390 there is no dashboard preview: a tinted top bar with the logo, the card full width with 16px margins, the gradient ribbon at the bottom of the page, and the Google button moved above the fields.

### 1. Account details

- Card title in bold slate ("Create your Stripe account")
- Email field: type email, autocomplete email; focused on arrival with the blue 4px halo
- Full name field: type text, autocomplete name
- Password field: type password, autocomplete new-password
- Country: a 44px select-like button with a flag, the country name and an up-down chevron; an info icon next to its label opens a tooltip
- Marketing consent checkbox, unchecked, with a three-line label containing two links
- Primary Create account button, full width, pale while the form is incomplete
- Divider with a centred 13px label ("Or sign up with")
- Outline Google button
- 13px line with a question and a violet sign in link
- Action: Create account: posts to /register (not exercised beyond an empty submit)
- Action: Google: continues with Google
- Action: Sign in: goes to /login
- Action: Country: opens a country list (not opened during capture)
- Validation: An empty submit stays on the page with no visible change: no native bubble, no inline message, the button stays pale. Field-level errors after typing were not observed. The CSS carries a password strength meter (strength-indicator keyframes, a 0.3s height transition on the password block) and the auth-shake keyframes.

Not recorded: Email verification, business details and activation steps, the password strength messages, and the country list, which all need input or an account.

## Libraries

Detected in the pages Stripe serves. Use these before reaching for an alternative.

| Name | npm | Purpose | Evidence |
| --- | --- | --- | --- |
| React | react | UI runtime on the marketing site, docs and dashboard | "react.element" in the marketing framework chunk, the docs react bundle and the dashboard login and account bundles |
| Next.js | next | Framework for stripe.com | window.__NEXT_DATA__ and window.next defined on the home page; "__NEXT_DATA__" in a main chunk |
| React Aria | react-aria-components | Accessible primitives on docs and the dashboard auth screens | ids starting with react-aria on rendered elements (the log in checkbox, among others); "react-aria-" in the docs frontend bundle |
| Motion | motion | Script-driven animation: presence, reveals | "framerAppearId" in a home chunk; "AnimatePresence" in the docs, log in and account bundles. Script strings only, weaker than an attribute |
| Floating UI | @floating-ui/react | Popover and tooltip positioning | the string "floating-ui" in home, docs, log in and account bundles. Weak evidence |
| three.js | three | WebGL rendering, likely for the hero graphics | "THREE.WebGLRenderer" in a home chunk and a log in bundle |
| TanStack Query | @tanstack/react-query | Server state in the dashboard | "No QueryClient set" in a log in bundle |
| Emotion | @emotion/react | Styling on docs and dashboard | the string "@emotion/" in the docs and dashboard bundles. Weak evidence |
| StyleX | @stylexjs/stylex | Styling on docs and dashboard | the bare word "stylex" in the docs and dashboard bundles. Weak evidence |
| Prism | prismjs | Code highlighting in docs | "Prism.languages" in the docs common bundle |
| jQuery | jquery | Present on the dashboard auth pages; its role was not observed | window.jQuery defined on /login and /register |
| Sohne | (not on npm) | Text face (paid Klim licence), variable 1 to 1000 | loaded font face "sohne-var 1 1000" on home, pricing, log in and sign up |
| Source Code Pro | @fontsource/source-code-pro | Monospace face on the marketing site | loaded font face "SourceCodePro 500" on home |

Recommended for the parts that could not be identified:

| Name | npm | Purpose |
| --- | --- | --- |
| Lucide | lucide-react | 16px line icons and chevrons; Stripe's own inline SVG icons are not a public package |
| Inter | @fontsource-variable/inter | Free variable stand-in for Sohne at weights 300, 400 and 425 |