/* ==========================================================================
Stripi design system — trial adoption layer
Source of truth: /Users/bwertheim/DESIGN.md
This file is loaded LAST in , after index.css and SiteLayout.css, so it
re-points the compiled Tailwind theme at the Stripi tokens instead of forking
the generated stylesheets. The page markup is untouched: every component in
components/ already speaks the theme's variable vocabulary (--color-fern,
--surface, --radius-box, .font-display, …), so remapping those variables
repaints the whole site.
Remove the single in app/layout.tsx to back the whole trial out.
Layout:
1. Fonts
2. Tokens (colours, radii, spacing)
3. Global type (ss01, light weight, negative tracking)
4. Display tier
5. Buttons (4px, measured against the live site)
6. Cards & surfaces
7. Inputs
8. Navigation & footer
9. Gradient mesh
10. Tabular figures
11. Responsive
========================================================================== */
/* --------------------------------------------------------------------------
1. Fonts
Sohne is proprietary; DESIGN.md nominates Inter as the sanctioned substitute
("Inter at weight 300 with ss01 and negative tracking approximates the rhythm
closely"). The repo already self-hosts Inter, but only as static 400/500/700
cuts — the brand's defining weight 300 is missing. These two faces add the
variable cut (100–900) covering latin and latin-ext, self-hosted alongside the
existing files so the trial adds no third-party request.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/inter-var-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/inter-var-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --------------------------------------------------------------------------
2. Tokens
-------------------------------------------------------------------------- */
:root,
:host {
/* --- Raw palette, verbatim from DESIGN.md ---------------------------- */
--ds-primary: #533afd;
--ds-primary-deep: #4434d4;
--ds-primary-press: #2e2b8c;
--ds-primary-soft: #665efd;
--ds-primary-subdued: #b9b9f9;
--ds-brand-dark-900: #1c1e54;
--ds-ink: #0d253d;
--ds-ink-secondary: #273951;
--ds-ink-mute: #64748d;
--ds-ink-mute-2: #61718a;
--ds-on-primary: #ffffff;
--ds-canvas: #ffffff;
--ds-canvas-soft: #f6f9fc;
--ds-canvas-cream: #f5e9d4;
--ds-hairline: #e3e8ee;
--ds-hairline-input: #a8c3de;
--ds-ruby: #ea2261;
--ds-magenta: #f96bee;
--ds-lemon: #9b6829;
--ds-shadow-blue: #003770;
/* Elevation ladder (DESIGN.md § Elevation & Depth). */
--ds-elevation-1: rgba(0, 55, 112, 0.08) 0 1px 3px;
--ds-elevation-2: rgba(0, 55, 112, 0.08) 0 8px 24px, rgba(0, 55, 112, 0.04) 0 2px 6px;
/* Radius scale. */
--ds-radius-xs: 4px;
--ds-radius-sm: 6px;
--ds-radius-md: 8px;
--ds-radius-lg: 12px;
--ds-radius-xl: 16px;
--ds-radius-pill: 9999px;
/* --- Corrections measured against the live stripe.com (2026-08-11) --------
DESIGN.md's colour and type scales check out exactly against the real site
(h1 48/300/-0.96px, h2 56/300/-1.4px, h3 26/300/-0.26px, body 16/300/1.4,
primary #533afd, ink-mute #64748d — all confirmed). Two things in it do not.
1. Button geometry. The spec mandates `{rounded.pill}` 9999px and explicitly
forbids rounded-rectangles. The live site's buttons are 4px. The spec is
wrong; the site wins. */
--ds-radius-button: 4px;
/* 2. The warm gradient stop. The spec lists `lemon #9b6829`, a dark ochre that
cannot produce the sherbet in the real ribbon. Measured closer to: */
--ds-sherbet: #ff8a2b;
/* 3. `{colors.canvas-cream}` #f5e9d4 and the `card-cream-band` component are
not on the live site — a sweep for any light warm fill over 300x120px
returns nothing at all. Almost certainly the same bad warm sample as
`lemon`. What the site does have, and the spec omits, is a full-bleed
dark band (`section.hds-mode--dark`) filled: */
--ds-band-dark: #0d1738;
/* And one substitution artefact, not a spec error: the spec is right that the
display tier is weight 300 — but that is 300 *in Sohne*, which is optically
far denser than Inter 300. Rendering the substitute at a literal 300 makes
the page read anaemic next to Stripe. Inter 400 carries Sohne 300's colour,
so the display and body tiers below use this rather than the literal value. */
--ds-weight-display: 400;
--ds-weight-body: 400;
/* Spacing scale. */
--ds-space-xxs: 2px;
--ds-space-xs: 4px;
--ds-space-sm: 8px;
--ds-space-md: 12px;
--ds-space-lg: 16px;
--ds-space-xl: 24px;
--ds-space-xxl: 32px;
--ds-space-huge: 64px;
/* --- Theme remap: the compiled Tailwind vocabulary --------------------
Brand greens become the indigo CTA ramp; the greys become the navy ink
ramp. Every downstream utility (.bg-fern, .text-fern-60, .text-reef,
.bg-graphite, .border-deep-teal, …) follows from these five lines. */
--color-fern: var(--ds-primary);
--color-fern-60: var(--ds-primary-deep);
/* `reef` is the accent used on dark surfaces — pale indigo carries the
brand there, where primary-soft would fall below contrast on navy. */
--color-reef: var(--ds-primary-subdued);
--color-mist: var(--ds-on-primary);
--color-deep-teal: var(--ds-brand-dark-900);
--color-graphite: var(--ds-ink);
/* Type stacks. `--font-display` was a serif (Season Mix); the brand's display
tier is the same Sohne/Inter sans as body, differentiated by weight and
tracking rather than by family. */
--font-sans: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
--font-display: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
--font-serif: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
/* .font-display / .font-serif read these two. Light weight + negative tracking
is the brand's typographic signature. */
--font-serif-weight: var(--ds-weight-display);
--font-serif-letter-spacing-adjustment: -0.02em;
/* Tailwind radius tokens. */
--radius-box: var(--ds-radius-md);
--radius-sm: var(--ds-radius-sm);
--radius-md: var(--ds-radius-md);
--radius-lg: var(--ds-radius-lg);
--radius-xl: var(--ds-radius-xl);
--radius-2xl: var(--ds-radius-xl);
/* Tracking. */
--tracking-tight: -0.025em;
}
/* Light track — canvas white page, canvas-soft feature surfaces. */
:root {
--background: var(--ds-canvas);
--surface: var(--ds-canvas-soft);
--surface-hover: color-mix(in srgb, var(--ds-canvas-soft) 90%, var(--ds-primary) 10%);
--footer-background: var(--ds-canvas);
--foreground: var(--ds-ink);
--muted-foreground: var(--ds-ink-mute);
--border: var(--ds-hairline);
--content-accent: var(--ds-primary);
--site-header-active-underline: var(--ds-primary);
/* text-input. Kept as its own token trio so the field follows the active
track instead of being pinned to the light canvas. */
--ds-input-bg: var(--ds-canvas);
--ds-input-border: var(--ds-hairline-input);
--ds-input-fg: var(--ds-ink);
--ds-input-placeholder: var(--ds-ink-mute);
}
/* --- Light only -----------------------------------------------------------
stripe.com has no dark mode. Not "a subtle one" — zero `prefers-color-scheme:
dark` rules across its stylesheets, and identical computed styles under a dark
OS preference. Checked 2026-08-11.
DESIGN.md agrees, and reads differently once you look closely: its "dashboard
track flips polarity to a familiar dark-app shell" is about
dashboard.stripe.com, a separate surface listed among its own sources. On the
marketing page the spec is explicit that "the lower portion of the page
returns to white" and that the dark thing is the *mockups* — "deep navy
product UI mockups sit composited above the white canvas". Navy is a
component fill (product mockups, the featured pricing tier), not a theme.
The dark track on this page is inherited from the page's original design, not from
the design system. Under the system it has no counterpart, and it was the
source of most of the defects found along the way — navy on navy, blank white
panels. So the trial pins the page light and the dark surfaces stay exactly
where the spec puts them: the terminal, the featured card, the mockups.
Three separate switches have to be held, because the inherited CSS flips in
three different ways:
1. `data-dev-theme="light"` on (set in app/layout.tsx) disables the
rules in index.css guarded by `:root:not([data-dev-theme=light])`.
2. SiteLayout.css flips its tokens on a *bare* `:root` inside the media
query, which no attribute can reach — so the light values are restated
here, in the same media query, from a sheet that loads later.
3. The how-it-works bundle reads `prefers-color-scheme` in its own JS and
sets `data-theme="alfred-dark"` on its scope, so that scope is pinned too.
To restore dark mode: delete this block and the `data-dev-theme` attribute in
app/layout.tsx. The per-track values it replaced are in the branch history. */
:root {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: light;
--background: var(--ds-canvas);
--surface: var(--ds-canvas-soft);
--surface-hover: color-mix(in srgb, var(--ds-canvas-soft) 90%, var(--ds-primary) 10%);
--footer-background: var(--ds-canvas);
--foreground: var(--ds-ink);
--muted-foreground: var(--ds-ink-mute);
--border: var(--ds-hairline);
--content-accent: var(--ds-primary);
--site-header-active-underline: var(--ds-primary);
--ds-input-bg: var(--ds-canvas);
--ds-input-border: var(--ds-hairline-input);
--ds-input-fg: var(--ds-ink);
--ds-input-placeholder: var(--ds-ink-mute);
}
}
/* The demo bundle sets its own scope theme from `prefers-color-scheme` in JS,
so the attribute it writes is neutralised rather than the media query. */
[data-hiw-scope][data-theme='alfred-dark'],
[data-hiw-scope]:has(input.theme-controller[value='alfred-dark']:checked) {
--color-accent: var(--ds-primary);
--color-accent-content: var(--ds-on-primary);
--background: var(--ds-canvas);
--foreground: var(--ds-ink);
--card-foreground: var(--ds-ink);
--popover-foreground: var(--ds-ink);
--muted-foreground: var(--ds-ink-mute);
--border-color: var(--ds-hairline);
--border-focus: var(--ds-primary);
}
/* --- The "How it works" demo bundle ------------------------------------
/how-it-works/demo-*.css is injected into at runtime and carries its
own copy of the theme, scoped to [data-hiw-scope] rather than to :root — so
the page-level remap above cannot reach inside the frame and the demo would
otherwise keep rendering the old green.
Every declaration in that bundle is wrapped in :where(), i.e. specificity
zero, and the palette half of it sits in `@layer theme`. A plain attribute
selector therefore wins on both counts, whatever order the sheets land in.
The fern/reef ramps are mixed off the primary rather than picked by eye, so
the demo introduces no colour the spec doesn't document. */
[data-hiw-scope] {
--color-fern: var(--ds-primary);
--color-fern-10: color-mix(in srgb, var(--ds-primary) 12%, #ffffff);
--color-fern-20: color-mix(in srgb, var(--ds-primary) 22%, #ffffff);
--color-fern-30: color-mix(in srgb, var(--ds-primary) 34%, #ffffff);
--color-fern-40: color-mix(in srgb, var(--ds-primary) 48%, #ffffff);
--color-fern-50: color-mix(in srgb, var(--ds-primary) 70%, #ffffff);
--color-fern-60: var(--ds-primary-deep);
--color-fern-70: var(--ds-primary-press);
--color-fern-80: color-mix(in srgb, var(--ds-primary-press) 72%, var(--ds-ink));
--color-fern-90: color-mix(in srgb, var(--ds-primary-press) 48%, var(--ds-ink));
--color-fern-100: color-mix(in srgb, var(--ds-primary-press) 28%, var(--ds-ink));
--color-reef: var(--ds-primary-subdued);
--color-reef-60: color-mix(in srgb, var(--ds-primary-subdued) 78%, var(--ds-brand-dark-900));
--color-reef-70: color-mix(in srgb, var(--ds-primary-subdued) 58%, var(--ds-brand-dark-900));
--color-reef-80: color-mix(in srgb, var(--ds-primary-subdued) 38%, var(--ds-brand-dark-900));
--color-reef-100: color-mix(in srgb, var(--ds-primary-subdued) 18%, var(--ds-brand-dark-900));
--color-mist: var(--ds-on-primary);
--color-deep-teal: var(--ds-brand-dark-900);
--color-graphite: var(--ds-ink);
--font-sans: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
--font-serif: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
/* The bundle keeps its own --font-display alongside --font-serif; the demo's
headings read that one. */
--font-display: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
--font-serif-weight: var(--ds-weight-display);
--font-serif-letter-spacing-adjustment: -0.02em;
--radius-box: var(--ds-radius-md);
/* Light track (the bundle's `alfred-light`). */
--color-accent: var(--ds-primary);
--color-accent-content: var(--ds-on-primary);
--background: var(--ds-canvas);
--foreground: var(--ds-ink);
--card-foreground: var(--ds-ink);
--popover-foreground: var(--ds-ink);
--muted-foreground: var(--ds-ink-mute);
--border-color: var(--ds-hairline);
--border-focus: var(--ds-primary);
}
/* --- The other half of the bundle's theme --------------------------------
The block above remaps the *ported brand* vocabulary — fern, reef, mist,
deep-teal, graphite — and stops there. But the bundle ships a second,
independent palette underneath it: a DaisyUI theme, declared in the same
`:where([data-hiw-scope][data-theme='alfred-light'])` rule, with its own
`base-*` surface ramp and its own `primary`/`secondary`/`success`/`error`.
Nothing above reaches it, so until now the demo was a Stripi frame around a
Tasklet interior:
--color-primary #4e814e the old green — this is why the visitor's
message bubble (`bg-primary/10`) and the
"Trabajando…" dots (`bg-primary`) were green
on an indigo page
--color-base-200 #eaeaea the sidebar rail, the document panel and the
panel header — flat neutral grey, which is what
made that whole right-hand column read dead
against the bloom outside the shell
--color-base-300 #dfdfdf the seams between them
--color-base-content #121215 the near-black the demo tints ~260 surfaces
and borders off, at every alpha from /10 to /90
None of these is precautionary: every token below is referenced by the
bundle's own stylesheet, `base-content` 262 times and `primary` 85. The
surface ramp keeps its three steps and its contrast, it just moves onto the
house's: #ffffff → #f6f9fc → #e3e8ee, where it was #f5f5f5 → #eaeaea →
#dfdfdf. Because the demo tints from `base-content`, moving it to `--ds-ink`
also swings dozens of derived fills from neutral grey to the navy ink ramp,
which is the whole point.
Two mappings are judgement calls rather than translations:
· **success** has no counterpart. The house palette has no green at all —
the page's own "done" and "registered" signals are indigo (`#audit`'s
shield is `text-fern-60`). So it lands on the deep primary, and the demo
introduces no colour the spec does not document.
· **warning** goes to `--ds-lemon` and not to `--ds-sherbet`. Sherbet is
the gradient stop, tuned to be seen at 40% over a ramp; as a solid behind
`warning-content` white it fails contrast. Lemon is the dark ochre the
spec lists, and it is legible.
Specificity is the same free win as the block above: the bundle wraps every
one of these in `:where()`, so a bare attribute selector outranks it in any
load order. */
[data-hiw-scope] {
/* Surface ramp and the ink it tints from. */
--color-base-100: var(--ds-canvas);
--color-base-200: var(--ds-canvas-soft);
--color-base-300: var(--ds-hairline);
--color-base-content: var(--ds-ink);
--muted: var(--ds-canvas-soft);
/* The two sidebar states, mixed toward the primary the same way
`--surface-hover` is at the page level rather than picked as greys. */
--sidebar-hover: color-mix(in srgb, var(--ds-canvas-soft) 88%, var(--ds-primary) 12%);
--sidebar-active: color-mix(in srgb, var(--ds-canvas-soft) 78%, var(--ds-primary) 22%);
/* Semantic slots. */
--color-primary: var(--ds-primary);
--color-primary-content: var(--ds-on-primary);
--color-secondary: var(--ds-primary-deep);
--color-secondary-content: var(--ds-on-primary);
--color-neutral: var(--ds-brand-dark-900);
--color-neutral-content: var(--ds-canvas);
--color-info: var(--ds-primary-deep);
--color-info-content: var(--ds-on-primary);
--color-success: var(--ds-primary-deep);
--color-success-content: var(--ds-on-primary);
--color-warning: var(--ds-lemon);
--color-warning-content: var(--ds-canvas);
--color-error: var(--ds-ruby);
--color-error-content: var(--ds-on-primary);
/* The two leftover ported ramps the bundle still reaches for. Portage was a
muted blue-violet standing in for the accent; coral was the warm stop. */
--portage: var(--ds-primary-deep);
--color-portage-20: color-mix(in srgb, var(--ds-primary-subdued) 46%, #ffffff);
--color-portage-40: var(--ds-primary-subdued);
--color-portage-60: var(--ds-primary-soft);
--color-portage-70: var(--ds-primary-deep);
--color-portage-80: var(--ds-primary-press);
--color-coral: var(--ds-sherbet);
--color-coral-10: color-mix(in srgb, var(--ds-sherbet) 16%, #ffffff);
--color-coral-30: color-mix(in srgb, var(--ds-sherbet) 42%, #ffffff);
--color-coral-60: var(--ds-lemon);
--color-coral-70: color-mix(in srgb, var(--ds-lemon) 82%, var(--ds-ink));
--color-coral-80: color-mix(in srgb, var(--ds-lemon) 64%, var(--ds-ink));
}
/* The one green no token remap can reach. `_astro/index.BRimgEk0.css` writes the
composer's active-automation button as
border-color: var(--color-fern); color: var(--color-fern);
background: #4e814e1a;
— two thirds through the variable, the fill hardcoded. So the button came out
with an indigo border and an indigo glyph on a green wash, which is worse than
being uniformly wrong. `--ds-fill-indigo` is the house's documented pale fill
for exactly this (chips and soft buttons) and lands where fern-at-10%-over-
white did. Only visible in the last chapter, when the weekly trigger is live.
Two more hardcoded greens survive in that file, both on
`.landing-page-how-it-works-frame` under `data-dev-theme=dark` — dead while
`app/layout.tsx` pins the page light, and already noted in § 20. */
.landing-how-it-works-input button[data-active] {
background: var(--ds-fill-indigo);
}
/* The demo renders the wordmark as , which can't inherit
currentColor the way the header's inline mark does. Swapping the replaced
element's content is the only way to reach it from a stylesheet. */
[data-hiw-scope] .landing-how-it-works-sidebar-logo,
[data-hiw-scope] .landing-how-it-works-home-logo {
content: url('/stripe/logo.svg');
}
/* The bundle's headings carry their own bold; the display tier runs light
everywhere, inside the product mockup included. */
[data-hiw-scope] :is(h1, h2, h3) {
font-weight: var(--ds-weight-display);
letter-spacing: -0.26px;
}
/* --------------------------------------------------------------------------
3. Global type
`ss01` globally on the body is an explicit rule in DESIGN.md; body defaults to
body-md (15px / 1.4), at the substitution-corrected weight.
-------------------------------------------------------------------------- */
body {
font-family: var(--font-sans);
font-size: 15px;
font-weight: var(--ds-weight-body);
line-height: 1.4;
font-feature-settings: 'ss01';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* The brand runs light. `font-semibold` (600) and `font-bold` (700) in the
ported markup are pulled back to the 400 "regular" role so the editorial air
survives; the display tier is handled separately in § 4. */
.landing-page .font-semibold,
.landing-page .font-medium,
footer .font-semibold,
footer .font-medium,
[data-site-header] .font-semibold,
[data-site-header] .font-medium {
--tw-font-weight: 400;
font-weight: 400;
}
/* Body copy tiers. */
.landing-page p.text-lg,
.landing-page p.text-xl {
font-size: 1rem; /* body-lg */
line-height: 1.4;
font-weight: var(--ds-weight-body);
letter-spacing: 0;
}
.landing-page p.text-base {
font-size: 0.9375rem; /* body-md */
line-height: 1.4;
font-weight: var(--ds-weight-body);
}
/* Eyebrows — micro-cap: 10px / 400 / +0.1px, and always in the accent indigo. */
.landing-page .text-xs.uppercase,
footer h2.text-xs.uppercase {
font-size: 0.625rem; /* micro-cap, 10px */
line-height: 1.15;
font-weight: 400;
letter-spacing: 0.1em;
}
/* Fine print. */
.landing-page .text-\[0\.625rem\],
.landing-page .text-\[0\.6875rem\] {
font-weight: var(--ds-weight-display);
}
/* --------------------------------------------------------------------------
4. Display tier
Sizes stair-step 56 -> 48 -> 32 -> 26 -> 22px with tracking scaling from
-1.4px down to -0.22px. Values are expressed in px to match the spec exactly
and clamped so the mobile end lands on the documented 36px floor.
-------------------------------------------------------------------------- */
.landing-page .font-display,
footer .font-display {
font-family: var(--font-display);
font-weight: var(--ds-weight-display);
}
/* display-xxl — hero headline. 56px desktop, 36px mobile. */
.landing-page h1.font-display {
font-size: clamp(36px, 4.6vw, 56px);
line-height: 1.03;
letter-spacing: -1.4px;
font-weight: var(--ds-weight-display);
}
/* display-xl — section opener. */
.landing-page h2.font-display {
font-size: clamp(32px, 3.6vw, 48px);
line-height: 1.15;
letter-spacing: -0.96px;
font-weight: var(--ds-weight-display);
}
/* display-lg / display-md — card and sub-section titles. */
.landing-page h3.font-display,
.landing-page .font-display.text-xl,
.landing-page .font-display.text-2xl {
font-size: 26px;
line-height: 1.12;
letter-spacing: -0.26px;
font-weight: var(--ds-weight-display);
}
/* The hero's accent span is the one place indigo carries display type — it is
emphasis on a headline, not body text, which the spec permits. */
.landing-page h1.font-display .text-fern,
.landing-page h1.font-display .text-reef {
color: var(--ds-primary);
}
/* --------------------------------------------------------------------------
5. Buttons — pill geometry
"Don't replace the pill shape with rounded-rectangles for buttons." Every CTA,
nav affordance and tag in the ported markup is matched below and given
`{rounded.pill}`; padding floors at the documented 8px 16px.
-------------------------------------------------------------------------- */
/* button-primary-pill — the filled indigo CTA. */
.landing-page a.rounded.border.border-fern.bg-fern,
[data-site-header] a.rounded.border.border-fern.bg-fern,
.landing-page-product-input-submit {
background-color: var(--ds-primary);
border-color: var(--ds-primary);
color: var(--ds-on-primary);
border-radius: var(--ds-radius-button);
padding: var(--ds-space-sm) var(--ds-space-lg);
font-size: 16px;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
}
.landing-page a.rounded.border.border-fern.bg-fern:hover,
[data-site-header] a.rounded.border.border-fern.bg-fern:hover,
.landing-page-product-input-submit:hover {
background-color: var(--ds-primary-deep);
border-color: var(--ds-primary-deep);
}
.landing-page a.rounded.border.border-fern.bg-fern:active,
[data-site-header] a.rounded.border.border-fern.bg-fern:active,
.landing-page-product-input-submit:active {
background-color: var(--ds-primary-press);
border-color: var(--ds-primary-press);
}
/* The hero submit keeps its own fixed height from index.css; restate it so the
pill reads as a pill rather than a stadium-cornered slab. */
.landing-page-product-input-submit {
height: auto;
min-height: 40px;
padding-inline: var(--ds-space-lg);
transform: none;
}
.landing-page-product-input-submit:hover {
transform: none;
}
/* button-secondary — outline pill, indigo on canvas. */
.landing-page a.rounded.border.border-border.px-5.py-3,
.landing-page a.rounded.border.border-border.px-4.py-2 {
border-radius: var(--ds-radius-button);
border-color: var(--content-accent);
color: var(--content-accent);
background-color: var(--color-background);
padding: var(--ds-space-sm) var(--ds-space-lg);
font-size: 16px;
font-weight: 400;
line-height: 1;
}
.landing-page a.rounded.border.border-border.px-5.py-3:hover,
.landing-page a.rounded.border.border-border.px-4.py-2:hover {
border-color: var(--content-accent);
color: var(--content-accent);
background-color: color-mix(in srgb, var(--color-background) 92%, var(--ds-primary));
}
/* button-on-dark — sits inside the deep-navy band. */
.landing-page a.rounded.border.border-reef.bg-reef {
border-radius: var(--ds-radius-button);
background-color: var(--ds-primary);
border-color: var(--ds-primary);
color: var(--ds-on-primary);
padding: var(--ds-space-sm) var(--ds-space-lg);
font-size: 16px;
font-weight: 400;
line-height: 1;
}
.landing-page a.rounded.border.border-reef.bg-reef:hover {
background-color: var(--ds-primary-soft);
border-color: var(--ds-primary-soft);
color: var(--ds-on-primary);
}
/* Plain text-link buttons in the header ("Log in") and mobile menu. */
[data-site-header] a.rounded.px-3.py-2,
[data-site-header] a.rounded-md,
[data-site-header] .site-header-menu summary,
.landing-page a.rounded.px-3.py-2,
.landing-page-scroll-cue {
border-radius: var(--ds-radius-button);
}
/* link-on-light — inline links carry the primary, no underline. */
.landing-page a.text-fern-60,
.landing-page a:not([class*='bg-']):not(.rounded):hover {
text-decoration: none;
}
/* --------------------------------------------------------------------------
6. Cards & surfaces
-------------------------------------------------------------------------- */
/* card-feature-light / card-pricing — 12px, hairline border, level-1 lift. */
.landing-page .rounded.border.border-border.bg-surface,
.landing-page .rounded.border.border-border.bg-background,
.landing-page .rounded.border.border-dashed.border-border,
.landing-page .rounded.border.border-border.bg-surface\/50 {
border-radius: var(--ds-radius-lg);
border-color: var(--ds-hairline);
box-shadow: var(--ds-elevation-1);
}
/* card-pricing-featured / card-dashboard-mockup — the inverted navy surfaces.
Level 2 elevation, 12px chrome. */
.landing-page .rounded.border.border-deep-teal.bg-deep-teal,
.landing-page .rounded.bg-graphite,
.landing-page .rounded.border.border-border.bg-graphite,
.landing-page .overflow-hidden.rounded.border.border-border.bg-background {
border-radius: var(--ds-radius-lg);
box-shadow: var(--ds-elevation-2);
}
/* Product-UI mockup chrome sits one step rounder. */
.landing-page-how-it-works-frame {
border-radius: var(--ds-radius-xl);
border-color: var(--ds-hairline);
background: var(--ds-canvas-soft);
box-shadow: var(--ds-elevation-2);
}
/* Icon tiles / avatars — compact 8px, not the card 12px. */
.landing-page .size-9.rounded.border,
.landing-page .size-10.rounded.border,
.landing-page .size-14.rounded.border,
.landing-page .size-20.rounded.border {
border-radius: var(--ds-radius-md);
border-color: var(--ds-hairline);
}
/* pill-tag-soft — subdued indigo chips. */
.landing-page .rounded.border.border-fern\/30.bg-fern\/10,
.landing-page .rounded.border.border-reef\/20.bg-reef\/10,
.landing-page .rounded.border.border-mist\/20.bg-mist\/10 {
border-radius: var(--ds-radius-button);
padding: var(--ds-space-xs) var(--ds-space-sm);
font-size: 10px;
line-height: 1.15;
font-weight: 400;
letter-spacing: 0.1px;
text-transform: uppercase;
}
.landing-page .rounded.border.border-fern\/30.bg-fern\/10 {
background-color: var(--ds-primary-subdued);
border-color: var(--ds-primary-subdued);
color: var(--ds-primary-deep);
}
/* Status dots and chart bars read as true circles / soft bars. Dots are the one
place the pill radius survives the 4px correction — they are circles, not
buttons. */
.landing-page .size-1\.5.rounded,
.landing-page .size-2.rounded,
.landing-page .size-3.rounded {
border-radius: var(--ds-radius-pill);
}
.landing-page .flex-1.rounded[class*='h-\['] {
border-radius: var(--ds-radius-xs);
}
/* The Security band — corrected from `card-cream-band` --------------------
This was built as the spec's warm interlude: `{colors.canvas-cream}` #f5e9d4
filling the band with the navy card floating on it. Measured against the live
site, that is wrong twice over.
There are **no warm surfaces on stripe.com at all** — a sweep of every element
over 300x120px for a light fill with red meaningfully above blue returns
nothing. `canvas-cream` is very probably from the same bad warm sample that
produced `lemon #9b6829`, which § 2 already corrects.
What the live site does have, and the spec never mentions, is a **full-bleed
dark band**: `section.hds-mode--dark`, 1440x2341, filled #0d1738 — a deep blue
navy, not the purple-leaning brand-dark-900. Multi-tone headline in white and
slate, filled indigo CTA, chips a step lighter than the field.
So the section becomes the band rather than a card sitting on one: the fill
moves to the section, and the card inside goes transparent and loses its
padding, since the section already carries the vertical rhythm. */
.landing-page > section#security {
background-color: var(--ds-band-dark);
background-image: radial-gradient(
92% 70% at 50% 0%,
color-mix(in srgb, var(--ds-primary) 16%, transparent),
var(--ds-primary-0) 72%
);
border-top-color: transparent;
color: var(--ds-canvas);
/* A fixed dark surface, so it holds the dark end of the ramp regardless of
what the page around it is doing — same treatment as the terminal. */
--ds-tone-strong: var(--ds-canvas);
--ds-tone-body: color-mix(in srgb, var(--ds-canvas) 70%, var(--ds-band-dark));
--ds-tone-caption: color-mix(in srgb, var(--ds-canvas) 52%, var(--ds-band-dark));
--ds-section-accent: var(--ds-primary-subdued);
--color-foreground: var(--ds-canvas);
--color-muted-foreground: color-mix(in srgb, var(--ds-canvas) 66%, var(--ds-band-dark));
}
/* The band's right half was empty — on the live site that space always carries a
graphic. This is a sibling to the hero ribbon rather than a repeat: same fan
geometry radiating from a focal point off the right edge, drawn as fine
line-work over a colour glow instead of blurred bands. It bookends the page,
opening and closing on the same device in two registers.
Bled past the section's right and vertical edges so it reads as a crop of
something larger, and masked back on its left so it never reaches the copy. */
.landing-page > section#security {
position: relative;
overflow: hidden;
isolation: isolate;
}
/* The fan turns continuously about the point its rays radiate from, which takes two layers
rather than one.
`::before` is the fan, and it carries no mask. Its `transform-origin` is the generator's
focal point: `tools/generate-security-fan.mjs` puts the focus at fx=1010, fy=470 in a
900x900 viewBox — off the right edge, so the burst opens leftward into the band — which is
112% 52% of that box, the same coordinate `#sf-reach` encodes as cx="1.12" cy="0.52".
Rotating about the element's own centre instead would swing the whole graphic across the
band rather than turning the rays in place.
`::after` is the reason the mask moved off the fan. `mask-image` transforms with its
element, so a rotating fan carries its own left-edge fade around with it and stops holding
the rays off the copy within a few degrees. Instead `::after` paints an exact copy of the
band's own background — same colour, same glow, same box — over the fan's left portion and
fades out to the right. Because what it paints *is* the backdrop, it is invisible as an
overlay and the composite is identical to the old single-layer version; it just does not
rotate. Both pseudo-elements sit at z-index -1, so they paint in document order and
`::after` lands over `::before`.
Note for `.ds-band-dark--fan`, the reusable version further down: it is still the
single-layer static fan. This id-keyed pair is the reference implementation if it ever
needs to move too. */
.landing-page > section#security::before {
content: '';
position: absolute;
z-index: -1;
pointer-events: none;
/* A square centred on the pivot, not a rectangle cropped to the band. The generator now
puts the focal point at the centre of the SVG (see the note at the top of
tools/generate-security-fan.mjs), so centring the element on the pivot makes a rotation
about it map the square onto itself — every direction stays painted through the whole
revolution, and `transform-origin` is an exact 50% 50% instead of a percentage corrected
for `background-size: cover`.
The pivot is 114% across and half way down: just off the section's right edge, which is
what makes the burst read as opening leftward across the band. Side is 170% of the
section's width; `aspect-ratio` keeps it square, and because the height then equals 170%
of the *width*, `margin-top: -85%` — also resolved against the width — is exactly half
of it. Both margins are therefore exact, with no `translate` to compose with the
animation's `transform`. */
left: 114%;
top: 50%;
width: 170%;
aspect-ratio: 1;
margin-left: -85%;
margin-top: -85%;
background: url('/stripe/security-fan.svg') no-repeat center;
background-size: 100% 100%;
opacity: 0.85;
transform-origin: 50% 50%;
/* One revolution every three minutes. */
animation: ds-security-fan-spin 180s linear infinite;
will-change: transform;
}
@keyframes ds-security-fan-spin {
to {
transform: rotate(360deg);
}
}
.landing-page > section#security::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-color: var(--ds-band-dark);
background-image: radial-gradient(
92% 70% at 50% 0%,
color-mix(in srgb, var(--ds-primary) 16%, transparent),
var(--ds-primary-0) 72%
);
/* The old fade in section coordinates rather than fan-element ones, and inverted, since
this layer hides where the fan used to be transparent. The fan starts 42% across the
section and is 64% of it wide, so the old stops at 26%/54%/74% of the fan land at
59%/77%/89% of the section. */
mask-image: linear-gradient(
to right,
#000 0%,
#000 42%,
rgba(0, 0, 0, 0.7) 59%,
rgba(0, 0, 0, 0.15) 77%,
transparent 89%
);
}
/* Same contract as the scroll reveals in landing-page.js: motion is decoration here, and the
band has to read identically without it. A permanently animating layer is also a permanent
compositor cost, so this is the opt-out that actually matters. */
@media (prefers-reduced-motion: reduce) {
.landing-page > section#security::before {
animation: none;
will-change: auto;
}
}
/* Below the two-column breakpoint the copy runs full width, so the fan retreats
to the top-right corner instead of sitting behind the text. */
@media (max-width: 1023px) {
/* The pivot moves up to the corner and the square shrinks; on a band this tall the square's
own size is what keeps the burst in the upper portion, so the old explicit `height: 48%`
is no longer needed. */
.landing-page > section#security::before {
left: 112%;
top: 14%;
width: 130%;
margin-left: -65%;
margin-top: -65%;
opacity: 0.6;
}
/* The corner crop starts 34% across and is 76% of the section wide, so this breakpoint's
stops at 34%/68% of the fan land at 60%/86% of the section. The overlay still spans the
whole band — it only has to be transparent wherever the fan is meant to show. */
.landing-page > section#security::after {
mask-image: linear-gradient(
to right,
#000 0%,
#000 34%,
rgba(0, 0, 0, 0.6) 60%,
transparent 86%
);
}
}
/* The card is now the band, so it stops being a card. */
.landing-page #security .rounded.border.border-deep-teal.bg-deep-teal {
background-color: transparent;
border-color: transparent;
box-shadow: none;
padding: 0;
}
.landing-page #security .text-mist\/70 {
color: var(--ds-tone-body);
}
/* Chips sit a step lighter than the field rather than as a translucent white. */
.landing-page #security .rounded.border.border-mist\/20.bg-mist\/10 {
background-color: color-mix(in srgb, var(--ds-canvas) 10%, var(--ds-band-dark));
border-color: color-mix(in srgb, var(--ds-canvas) 20%, var(--ds-band-dark));
color: var(--ds-canvas);
}
/* Small inline code/label chips. */
.landing-page .rounded.bg-surface.px-1\.5 {
border-radius: var(--ds-radius-xs);
}
/* --------------------------------------------------------------------------
7. Inputs
-------------------------------------------------------------------------- */
.landing-page-product-input-shell {
border-radius: var(--ds-radius-sm);
border-color: var(--ds-input-border);
background: var(--ds-input-bg);
padding: var(--ds-space-md);
box-shadow: var(--ds-elevation-1);
}
.landing-page-product-input-shell:focus-within {
border-color: var(--ds-primary);
box-shadow: var(--ds-elevation-1), 0 0 0 3px color-mix(in srgb, var(--ds-primary) 14%, transparent);
}
.landing-page-product-input-textarea,
.landing-page-product-input-animation {
font-size: 15px;
font-weight: var(--ds-weight-display);
line-height: 1.4;
color: var(--ds-input-fg);
}
.landing-page-product-input-textarea::placeholder {
color: var(--ds-input-placeholder);
}
.landing-page-product-input-caret {
background: var(--ds-primary);
}
/* --------------------------------------------------------------------------
8. Navigation & footer
-------------------------------------------------------------------------- */
/* nav-bar-on-mesh — canvas bar floating over the mesh, 16px/24px padding. */
[data-site-header] > div {
padding-block: var(--ds-space-lg);
}
[data-site-header] a,
[data-site-header] nav a {
font-size: 15px;
font-weight: 400;
line-height: 1.4;
}
[data-site-header] .text-xl.font-semibold {
font-size: 20px;
font-weight: 400;
letter-spacing: -0.2px;
}
/* Header dropdowns pick up the card treatment. */
[data-site-header] .rounded.border.border-border.bg-surface {
border-radius: var(--ds-radius-md);
border-color: var(--color-border);
background: var(--color-background);
box-shadow: var(--ds-elevation-2);
}
/* The brand logo is a fixed asset and is left alone; only its wordmark follows
the type system. */
/* footer-light — canvas ground, ink-mute caption type, 64px/24px padding. */
/* On the dark track the same rule resolves to the navy footer surface. */
footer {
background: var(--color-footer-background);
border-top-color: var(--color-border);
padding: var(--ds-space-huge) var(--ds-space-xl);
color: var(--color-muted-foreground);
}
footer .text-sm,
footer a.text-sm {
font-size: 13px;
line-height: 1.4;
font-weight: 400;
letter-spacing: -0.39px;
}
footer a.text-sm:hover {
color: var(--ds-primary);
}
footer .text-lg.font-bold {
font-size: 20px;
font-weight: 400;
letter-spacing: -0.2px;
}
/* --------------------------------------------------------------------------
9. Gradient mesh
"The gradient mesh is non-negotiable on marketing heroes." The existing
atmosphere element is repurposed: its two blurred CSS-gradient pseudo-elements
are replaced by the SVG mesh, washed across the upper third and faded into the
white canvas below. The mesh is inline in the document (`components/HeroMesh.tsx`)
rather than a background image, so the bands are addressable and can undulate.
-------------------------------------------------------------------------- */
.landing-page-hero-atmosphere::before,
.landing-page-hero-atmosphere::after {
/* The mesh is the depth medium; the original blurred blobs and conic ring,
which these two pseudo-elements painted, would fight it. */
content: none;
}
.ds-hero-mesh {
position: absolute;
overflow: hidden;
/* Anchored to the right, the way the live hero is — the ribbon bleeds off the
top-right corner rather than sitting as a band across the top. The box is
clipped to the right ~56% as well as masked inside the SVG: with the copy
centred rather than left-aligned, the mask alone is not enough headroom to
keep the headline on near-canvas. */
inset: -10% -4% -6% 34%;
/* The dissolve has to happen in page space, not in the SVG's own box: clipping
the box narrow enough to clear centred copy crops the art's internal fade off
and leaves a hard vertical seam. So the box stays wide and this mask does the
fading, angled to follow the ribbon rather than cutting straight down it. */
mask-image: linear-gradient(
100deg,
transparent 0%,
rgba(0, 0, 0, 0.18) 20%,
rgba(0, 0, 0, 0.62) 40%,
rgba(0, 0, 0, 0.92) 58%,
#000 72%
);
animation: ds-mesh-drift 30s ease-in-out infinite alternate;
}
.ds-hero-mesh-art {
display: block;
width: 100%;
height: 100%;
}
@keyframes ds-mesh-drift {
0% {
transform: translate3d(1%, 0, 0) scale(1.02);
}
100% {
transform: translate3d(-1%, -1.5%, 0) scale(1.06);
}
}
/* The swell. One keyframe set for every band, offset in time band by band, so the
crest travels down the fan instead of the whole ribbon pumping at once — the
negative delays below are the phase, not a start-up stagger.
Translation is in the rotated group's own space, i.e. across the band's width;
the small counter-rotation is what keeps the far end of a 1000-unit-long band
from moving in lockstep with the near end, which is what makes it read as a
wave rather than a slide. `fill-box` puts that rotation on the band's own
centre — the default `view-box` would swing all seven around the same point.
Cost: the bands sit inside the two feGaussianBlur groups, so a moving band
re-runs its blur every frame. On a GPU that is free — measured at 1440x900, the
hero holds the display's full refresh with the swell running, the same as with
it disabled. Software rasterisation is the case that pays: ~15fps against ~60
static. Hence `prefers-reduced-motion` below.
Amplitude is set against what the eye can actually resolve here, and the first
pass — 11 units over 13s — was under it. The art scales at ~1.18px per unit, so
that was 13px of travel spread over 6.5s: ~4px/s, on edges the 17-unit blur
turns into 60px ramps, underneath a container drift of larger amplitude than
the swell itself. It animated and nobody could see it. 30 units at 9s is ~8x
the rate and lands above the threshold.
The ceiling is the gap between bands, 46-66 units. Neighbours run an eighth of
a cycle apart, so their relative displacement is 2A·sin(22.5°) ≈ 0.77A — at
A=30 the gaps breathe by ~23 units, half their width, without any two bands
crossing. That squeeze-and-spread between neighbours is most of what reads as a
wave; the scaleY is the same idea inside one band. */
@keyframes ds-mesh-swell {
0%,
100% {
transform: translate(0, 30px) rotate(1.2deg) scaleY(1.08);
}
50% {
transform: translate(0, -30px) rotate(-1.2deg) scaleY(0.94);
}
}
.ds-mesh-band {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: ds-mesh-swell 9s ease-in-out infinite;
}
/* 9s / 8 ≈ 1.125s between bands: an eighth of a cycle each, so the seven sharp
bands span three quarters of the wave and the crest is always visible crossing
the fan. */
.ds-mesh-band-1 { animation-delay: 0s; }
.ds-mesh-band-2 { animation-delay: -1.125s; }
.ds-mesh-band-3 { animation-delay: -2.25s; }
.ds-mesh-band-4 { animation-delay: -3.375s; }
.ds-mesh-band-5 { animation-delay: -4.5s; }
.ds-mesh-band-6 { animation-delay: -5.625s; }
.ds-mesh-band-7 { animation-delay: -6.75s; }
/* The two washes are the fan's atmosphere rather than its structure: heavier blur
and nothing to collide with, so they swing wider and slower. */
.ds-mesh-wash-1,
.ds-mesh-wash-2 {
animation-name: ds-mesh-swell-wash;
animation-duration: 15s;
}
.ds-mesh-wash-1 { animation-delay: -1.5s; }
.ds-mesh-wash-2 { animation-delay: -8.5s; }
@keyframes ds-mesh-swell-wash {
0%,
100% {
transform: translate(0, 46px) rotate(1deg) scaleY(1.06);
}
50% {
transform: translate(0, -46px) rotate(-1deg) scaleY(0.95);
}
}
/* The closing band's copy of the fan. The page's last screen was the only body
band with no graphic at all: a headline and a button on flat white, with the
closing wash — centred at 118% of the band's height — sitting almost entirely
below the fold of its own section. The same ribbon that opens the page closes
it, turned through 180° so it enters from the bottom left instead of the top
right; #security's line-work fan already bookends the page in a second
register, and this is the first one.
Three things differ from the hero, all forced by the band being a fifth of the
height and the copy being centred in it rather than sitting above it:
- The rotation is on this box and folded into its own drift keyframes, not
put on the `
, which can't inherit
currentColor the way the header's inline mark does. Swapping the replaced
element's content is the only way to reach it from a stylesheet. */
[data-hiw-scope] .landing-how-it-works-sidebar-logo,
[data-hiw-scope] .landing-how-it-works-home-logo {
content: url('/stripe/logo.svg');
}
/* The bundle's headings carry their own bold; the display tier runs light
everywhere, inside the product mockup included. */
[data-hiw-scope] :is(h1, h2, h3) {
font-weight: var(--ds-weight-display);
letter-spacing: -0.26px;
}
/* --------------------------------------------------------------------------
3. Global type
`ss01` globally on the body is an explicit rule in DESIGN.md; body defaults to
body-md (15px / 1.4), at the substitution-corrected weight.
-------------------------------------------------------------------------- */
body {
font-family: var(--font-sans);
font-size: 15px;
font-weight: var(--ds-weight-body);
line-height: 1.4;
font-feature-settings: 'ss01';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* The brand runs light. `font-semibold` (600) and `font-bold` (700) in the
ported markup are pulled back to the 400 "regular" role so the editorial air
survives; the display tier is handled separately in § 4. */
.landing-page .font-semibold,
.landing-page .font-medium,
footer .font-semibold,
footer .font-medium,
[data-site-header] .font-semibold,
[data-site-header] .font-medium {
--tw-font-weight: 400;
font-weight: 400;
}
/* Body copy tiers. */
.landing-page p.text-lg,
.landing-page p.text-xl {
font-size: 1rem; /* body-lg */
line-height: 1.4;
font-weight: var(--ds-weight-body);
letter-spacing: 0;
}
.landing-page p.text-base {
font-size: 0.9375rem; /* body-md */
line-height: 1.4;
font-weight: var(--ds-weight-body);
}
/* Eyebrows — micro-cap: 10px / 400 / +0.1px, and always in the accent indigo. */
.landing-page .text-xs.uppercase,
footer h2.text-xs.uppercase {
font-size: 0.625rem; /* micro-cap, 10px */
line-height: 1.15;
font-weight: 400;
letter-spacing: 0.1em;
}
/* Fine print. */
.landing-page .text-\[0\.625rem\],
.landing-page .text-\[0\.6875rem\] {
font-weight: var(--ds-weight-display);
}
/* --------------------------------------------------------------------------
4. Display tier
Sizes stair-step 56 -> 48 -> 32 -> 26 -> 22px with tracking scaling from
-1.4px down to -0.22px. Values are expressed in px to match the spec exactly
and clamped so the mobile end lands on the documented 36px floor.
-------------------------------------------------------------------------- */
.landing-page .font-display,
footer .font-display {
font-family: var(--font-display);
font-weight: var(--ds-weight-display);
}
/* display-xxl — hero headline. 56px desktop, 36px mobile. */
.landing-page h1.font-display {
font-size: clamp(36px, 4.6vw, 56px);
line-height: 1.03;
letter-spacing: -1.4px;
font-weight: var(--ds-weight-display);
}
/* display-xl — section opener. */
.landing-page h2.font-display {
font-size: clamp(32px, 3.6vw, 48px);
line-height: 1.15;
letter-spacing: -0.96px;
font-weight: var(--ds-weight-display);
}
/* display-lg / display-md — card and sub-section titles. */
.landing-page h3.font-display,
.landing-page .font-display.text-xl,
.landing-page .font-display.text-2xl {
font-size: 26px;
line-height: 1.12;
letter-spacing: -0.26px;
font-weight: var(--ds-weight-display);
}
/* The hero's accent span is the one place indigo carries display type — it is
emphasis on a headline, not body text, which the spec permits. */
.landing-page h1.font-display .text-fern,
.landing-page h1.font-display .text-reef {
color: var(--ds-primary);
}
/* --------------------------------------------------------------------------
5. Buttons — pill geometry
"Don't replace the pill shape with rounded-rectangles for buttons." Every CTA,
nav affordance and tag in the ported markup is matched below and given
`{rounded.pill}`; padding floors at the documented 8px 16px.
-------------------------------------------------------------------------- */
/* button-primary-pill — the filled indigo CTA. */
.landing-page a.rounded.border.border-fern.bg-fern,
[data-site-header] a.rounded.border.border-fern.bg-fern,
.landing-page-product-input-submit {
background-color: var(--ds-primary);
border-color: var(--ds-primary);
color: var(--ds-on-primary);
border-radius: var(--ds-radius-button);
padding: var(--ds-space-sm) var(--ds-space-lg);
font-size: 16px;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
}
.landing-page a.rounded.border.border-fern.bg-fern:hover,
[data-site-header] a.rounded.border.border-fern.bg-fern:hover,
.landing-page-product-input-submit:hover {
background-color: var(--ds-primary-deep);
border-color: var(--ds-primary-deep);
}
.landing-page a.rounded.border.border-fern.bg-fern:active,
[data-site-header] a.rounded.border.border-fern.bg-fern:active,
.landing-page-product-input-submit:active {
background-color: var(--ds-primary-press);
border-color: var(--ds-primary-press);
}
/* The hero submit keeps its own fixed height from index.css; restate it so the
pill reads as a pill rather than a stadium-cornered slab. */
.landing-page-product-input-submit {
height: auto;
min-height: 40px;
padding-inline: var(--ds-space-lg);
transform: none;
}
.landing-page-product-input-submit:hover {
transform: none;
}
/* button-secondary — outline pill, indigo on canvas. */
.landing-page a.rounded.border.border-border.px-5.py-3,
.landing-page a.rounded.border.border-border.px-4.py-2 {
border-radius: var(--ds-radius-button);
border-color: var(--content-accent);
color: var(--content-accent);
background-color: var(--color-background);
padding: var(--ds-space-sm) var(--ds-space-lg);
font-size: 16px;
font-weight: 400;
line-height: 1;
}
.landing-page a.rounded.border.border-border.px-5.py-3:hover,
.landing-page a.rounded.border.border-border.px-4.py-2:hover {
border-color: var(--content-accent);
color: var(--content-accent);
background-color: color-mix(in srgb, var(--color-background) 92%, var(--ds-primary));
}
/* button-on-dark — sits inside the deep-navy band. */
.landing-page a.rounded.border.border-reef.bg-reef {
border-radius: var(--ds-radius-button);
background-color: var(--ds-primary);
border-color: var(--ds-primary);
color: var(--ds-on-primary);
padding: var(--ds-space-sm) var(--ds-space-lg);
font-size: 16px;
font-weight: 400;
line-height: 1;
}
.landing-page a.rounded.border.border-reef.bg-reef:hover {
background-color: var(--ds-primary-soft);
border-color: var(--ds-primary-soft);
color: var(--ds-on-primary);
}
/* Plain text-link buttons in the header ("Log in") and mobile menu. */
[data-site-header] a.rounded.px-3.py-2,
[data-site-header] a.rounded-md,
[data-site-header] .site-header-menu summary,
.landing-page a.rounded.px-3.py-2,
.landing-page-scroll-cue {
border-radius: var(--ds-radius-button);
}
/* link-on-light — inline links carry the primary, no underline. */
.landing-page a.text-fern-60,
.landing-page a:not([class*='bg-']):not(.rounded):hover {
text-decoration: none;
}
/* --------------------------------------------------------------------------
6. Cards & surfaces
-------------------------------------------------------------------------- */
/* card-feature-light / card-pricing — 12px, hairline border, level-1 lift. */
.landing-page .rounded.border.border-border.bg-surface,
.landing-page .rounded.border.border-border.bg-background,
.landing-page .rounded.border.border-dashed.border-border,
.landing-page .rounded.border.border-border.bg-surface\/50 {
border-radius: var(--ds-radius-lg);
border-color: var(--ds-hairline);
box-shadow: var(--ds-elevation-1);
}
/* card-pricing-featured / card-dashboard-mockup — the inverted navy surfaces.
Level 2 elevation, 12px chrome. */
.landing-page .rounded.border.border-deep-teal.bg-deep-teal,
.landing-page .rounded.bg-graphite,
.landing-page .rounded.border.border-border.bg-graphite,
.landing-page .overflow-hidden.rounded.border.border-border.bg-background {
border-radius: var(--ds-radius-lg);
box-shadow: var(--ds-elevation-2);
}
/* Product-UI mockup chrome sits one step rounder. */
.landing-page-how-it-works-frame {
border-radius: var(--ds-radius-xl);
border-color: var(--ds-hairline);
background: var(--ds-canvas-soft);
box-shadow: var(--ds-elevation-2);
}
/* Icon tiles / avatars — compact 8px, not the card 12px. */
.landing-page .size-9.rounded.border,
.landing-page .size-10.rounded.border,
.landing-page .size-14.rounded.border,
.landing-page .size-20.rounded.border {
border-radius: var(--ds-radius-md);
border-color: var(--ds-hairline);
}
/* pill-tag-soft — subdued indigo chips. */
.landing-page .rounded.border.border-fern\/30.bg-fern\/10,
.landing-page .rounded.border.border-reef\/20.bg-reef\/10,
.landing-page .rounded.border.border-mist\/20.bg-mist\/10 {
border-radius: var(--ds-radius-button);
padding: var(--ds-space-xs) var(--ds-space-sm);
font-size: 10px;
line-height: 1.15;
font-weight: 400;
letter-spacing: 0.1px;
text-transform: uppercase;
}
.landing-page .rounded.border.border-fern\/30.bg-fern\/10 {
background-color: var(--ds-primary-subdued);
border-color: var(--ds-primary-subdued);
color: var(--ds-primary-deep);
}
/* Status dots and chart bars read as true circles / soft bars. Dots are the one
place the pill radius survives the 4px correction — they are circles, not
buttons. */
.landing-page .size-1\.5.rounded,
.landing-page .size-2.rounded,
.landing-page .size-3.rounded {
border-radius: var(--ds-radius-pill);
}
.landing-page .flex-1.rounded[class*='h-\['] {
border-radius: var(--ds-radius-xs);
}
/* The Security band — corrected from `card-cream-band` --------------------
This was built as the spec's warm interlude: `{colors.canvas-cream}` #f5e9d4
filling the band with the navy card floating on it. Measured against the live
site, that is wrong twice over.
There are **no warm surfaces on stripe.com at all** — a sweep of every element
over 300x120px for a light fill with red meaningfully above blue returns
nothing. `canvas-cream` is very probably from the same bad warm sample that
produced `lemon #9b6829`, which § 2 already corrects.
What the live site does have, and the spec never mentions, is a **full-bleed
dark band**: `section.hds-mode--dark`, 1440x2341, filled #0d1738 — a deep blue
navy, not the purple-leaning brand-dark-900. Multi-tone headline in white and
slate, filled indigo CTA, chips a step lighter than the field.
So the section becomes the band rather than a card sitting on one: the fill
moves to the section, and the card inside goes transparent and loses its
padding, since the section already carries the vertical rhythm. */
.landing-page > section#security {
background-color: var(--ds-band-dark);
background-image: radial-gradient(
92% 70% at 50% 0%,
color-mix(in srgb, var(--ds-primary) 16%, transparent),
var(--ds-primary-0) 72%
);
border-top-color: transparent;
color: var(--ds-canvas);
/* A fixed dark surface, so it holds the dark end of the ramp regardless of
what the page around it is doing — same treatment as the terminal. */
--ds-tone-strong: var(--ds-canvas);
--ds-tone-body: color-mix(in srgb, var(--ds-canvas) 70%, var(--ds-band-dark));
--ds-tone-caption: color-mix(in srgb, var(--ds-canvas) 52%, var(--ds-band-dark));
--ds-section-accent: var(--ds-primary-subdued);
--color-foreground: var(--ds-canvas);
--color-muted-foreground: color-mix(in srgb, var(--ds-canvas) 66%, var(--ds-band-dark));
}
/* The band's right half was empty — on the live site that space always carries a
graphic. This is a sibling to the hero ribbon rather than a repeat: same fan
geometry radiating from a focal point off the right edge, drawn as fine
line-work over a colour glow instead of blurred bands. It bookends the page,
opening and closing on the same device in two registers.
Bled past the section's right and vertical edges so it reads as a crop of
something larger, and masked back on its left so it never reaches the copy. */
.landing-page > section#security {
position: relative;
overflow: hidden;
isolation: isolate;
}
/* The fan turns continuously about the point its rays radiate from, which takes two layers
rather than one.
`::before` is the fan, and it carries no mask. Its `transform-origin` is the generator's
focal point: `tools/generate-security-fan.mjs` puts the focus at fx=1010, fy=470 in a
900x900 viewBox — off the right edge, so the burst opens leftward into the band — which is
112% 52% of that box, the same coordinate `#sf-reach` encodes as cx="1.12" cy="0.52".
Rotating about the element's own centre instead would swing the whole graphic across the
band rather than turning the rays in place.
`::after` is the reason the mask moved off the fan. `mask-image` transforms with its
element, so a rotating fan carries its own left-edge fade around with it and stops holding
the rays off the copy within a few degrees. Instead `::after` paints an exact copy of the
band's own background — same colour, same glow, same box — over the fan's left portion and
fades out to the right. Because what it paints *is* the backdrop, it is invisible as an
overlay and the composite is identical to the old single-layer version; it just does not
rotate. Both pseudo-elements sit at z-index -1, so they paint in document order and
`::after` lands over `::before`.
Note for `.ds-band-dark--fan`, the reusable version further down: it is still the
single-layer static fan. This id-keyed pair is the reference implementation if it ever
needs to move too. */
.landing-page > section#security::before {
content: '';
position: absolute;
z-index: -1;
pointer-events: none;
/* A square centred on the pivot, not a rectangle cropped to the band. The generator now
puts the focal point at the centre of the SVG (see the note at the top of
tools/generate-security-fan.mjs), so centring the element on the pivot makes a rotation
about it map the square onto itself — every direction stays painted through the whole
revolution, and `transform-origin` is an exact 50% 50% instead of a percentage corrected
for `background-size: cover`.
The pivot is 114% across and half way down: just off the section's right edge, which is
what makes the burst read as opening leftward across the band. Side is 170% of the
section's width; `aspect-ratio` keeps it square, and because the height then equals 170%
of the *width*, `margin-top: -85%` — also resolved against the width — is exactly half
of it. Both margins are therefore exact, with no `translate` to compose with the
animation's `transform`. */
left: 114%;
top: 50%;
width: 170%;
aspect-ratio: 1;
margin-left: -85%;
margin-top: -85%;
background: url('/stripe/security-fan.svg') no-repeat center;
background-size: 100% 100%;
opacity: 0.85;
transform-origin: 50% 50%;
/* One revolution every three minutes. */
animation: ds-security-fan-spin 180s linear infinite;
will-change: transform;
}
@keyframes ds-security-fan-spin {
to {
transform: rotate(360deg);
}
}
.landing-page > section#security::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-color: var(--ds-band-dark);
background-image: radial-gradient(
92% 70% at 50% 0%,
color-mix(in srgb, var(--ds-primary) 16%, transparent),
var(--ds-primary-0) 72%
);
/* The old fade in section coordinates rather than fan-element ones, and inverted, since
this layer hides where the fan used to be transparent. The fan starts 42% across the
section and is 64% of it wide, so the old stops at 26%/54%/74% of the fan land at
59%/77%/89% of the section. */
mask-image: linear-gradient(
to right,
#000 0%,
#000 42%,
rgba(0, 0, 0, 0.7) 59%,
rgba(0, 0, 0, 0.15) 77%,
transparent 89%
);
}
/* Same contract as the scroll reveals in landing-page.js: motion is decoration here, and the
band has to read identically without it. A permanently animating layer is also a permanent
compositor cost, so this is the opt-out that actually matters. */
@media (prefers-reduced-motion: reduce) {
.landing-page > section#security::before {
animation: none;
will-change: auto;
}
}
/* Below the two-column breakpoint the copy runs full width, so the fan retreats
to the top-right corner instead of sitting behind the text. */
@media (max-width: 1023px) {
/* The pivot moves up to the corner and the square shrinks; on a band this tall the square's
own size is what keeps the burst in the upper portion, so the old explicit `height: 48%`
is no longer needed. */
.landing-page > section#security::before {
left: 112%;
top: 14%;
width: 130%;
margin-left: -65%;
margin-top: -65%;
opacity: 0.6;
}
/* The corner crop starts 34% across and is 76% of the section wide, so this breakpoint's
stops at 34%/68% of the fan land at 60%/86% of the section. The overlay still spans the
whole band — it only has to be transparent wherever the fan is meant to show. */
.landing-page > section#security::after {
mask-image: linear-gradient(
to right,
#000 0%,
#000 34%,
rgba(0, 0, 0, 0.6) 60%,
transparent 86%
);
}
}
/* The card is now the band, so it stops being a card. */
.landing-page #security .rounded.border.border-deep-teal.bg-deep-teal {
background-color: transparent;
border-color: transparent;
box-shadow: none;
padding: 0;
}
.landing-page #security .text-mist\/70 {
color: var(--ds-tone-body);
}
/* Chips sit a step lighter than the field rather than as a translucent white. */
.landing-page #security .rounded.border.border-mist\/20.bg-mist\/10 {
background-color: color-mix(in srgb, var(--ds-canvas) 10%, var(--ds-band-dark));
border-color: color-mix(in srgb, var(--ds-canvas) 20%, var(--ds-band-dark));
color: var(--ds-canvas);
}
/* Small inline code/label chips. */
.landing-page .rounded.bg-surface.px-1\.5 {
border-radius: var(--ds-radius-xs);
}
/* --------------------------------------------------------------------------
7. Inputs
-------------------------------------------------------------------------- */
.landing-page-product-input-shell {
border-radius: var(--ds-radius-sm);
border-color: var(--ds-input-border);
background: var(--ds-input-bg);
padding: var(--ds-space-md);
box-shadow: var(--ds-elevation-1);
}
.landing-page-product-input-shell:focus-within {
border-color: var(--ds-primary);
box-shadow: var(--ds-elevation-1), 0 0 0 3px color-mix(in srgb, var(--ds-primary) 14%, transparent);
}
.landing-page-product-input-textarea,
.landing-page-product-input-animation {
font-size: 15px;
font-weight: var(--ds-weight-display);
line-height: 1.4;
color: var(--ds-input-fg);
}
.landing-page-product-input-textarea::placeholder {
color: var(--ds-input-placeholder);
}
.landing-page-product-input-caret {
background: var(--ds-primary);
}
/* --------------------------------------------------------------------------
8. Navigation & footer
-------------------------------------------------------------------------- */
/* nav-bar-on-mesh — canvas bar floating over the mesh, 16px/24px padding. */
[data-site-header] > div {
padding-block: var(--ds-space-lg);
}
[data-site-header] a,
[data-site-header] nav a {
font-size: 15px;
font-weight: 400;
line-height: 1.4;
}
[data-site-header] .text-xl.font-semibold {
font-size: 20px;
font-weight: 400;
letter-spacing: -0.2px;
}
/* Header dropdowns pick up the card treatment. */
[data-site-header] .rounded.border.border-border.bg-surface {
border-radius: var(--ds-radius-md);
border-color: var(--color-border);
background: var(--color-background);
box-shadow: var(--ds-elevation-2);
}
/* The brand logo is a fixed asset and is left alone; only its wordmark follows
the type system. */
/* footer-light — canvas ground, ink-mute caption type, 64px/24px padding. */
/* On the dark track the same rule resolves to the navy footer surface. */
footer {
background: var(--color-footer-background);
border-top-color: var(--color-border);
padding: var(--ds-space-huge) var(--ds-space-xl);
color: var(--color-muted-foreground);
}
footer .text-sm,
footer a.text-sm {
font-size: 13px;
line-height: 1.4;
font-weight: 400;
letter-spacing: -0.39px;
}
footer a.text-sm:hover {
color: var(--ds-primary);
}
footer .text-lg.font-bold {
font-size: 20px;
font-weight: 400;
letter-spacing: -0.2px;
}
/* --------------------------------------------------------------------------
9. Gradient mesh
"The gradient mesh is non-negotiable on marketing heroes." The existing
atmosphere element is repurposed: its two blurred CSS-gradient pseudo-elements
are replaced by the SVG mesh, washed across the upper third and faded into the
white canvas below. The mesh is inline in the document (`components/HeroMesh.tsx`)
rather than a background image, so the bands are addressable and can undulate.
-------------------------------------------------------------------------- */
.landing-page-hero-atmosphere::before,
.landing-page-hero-atmosphere::after {
/* The mesh is the depth medium; the original blurred blobs and conic ring,
which these two pseudo-elements painted, would fight it. */
content: none;
}
.ds-hero-mesh {
position: absolute;
overflow: hidden;
/* Anchored to the right, the way the live hero is — the ribbon bleeds off the
top-right corner rather than sitting as a band across the top. The box is
clipped to the right ~56% as well as masked inside the SVG: with the copy
centred rather than left-aligned, the mask alone is not enough headroom to
keep the headline on near-canvas. */
inset: -10% -4% -6% 34%;
/* The dissolve has to happen in page space, not in the SVG's own box: clipping
the box narrow enough to clear centred copy crops the art's internal fade off
and leaves a hard vertical seam. So the box stays wide and this mask does the
fading, angled to follow the ribbon rather than cutting straight down it. */
mask-image: linear-gradient(
100deg,
transparent 0%,
rgba(0, 0, 0, 0.18) 20%,
rgba(0, 0, 0, 0.62) 40%,
rgba(0, 0, 0, 0.92) 58%,
#000 72%
);
animation: ds-mesh-drift 30s ease-in-out infinite alternate;
}
.ds-hero-mesh-art {
display: block;
width: 100%;
height: 100%;
}
@keyframes ds-mesh-drift {
0% {
transform: translate3d(1%, 0, 0) scale(1.02);
}
100% {
transform: translate3d(-1%, -1.5%, 0) scale(1.06);
}
}
/* The swell. One keyframe set for every band, offset in time band by band, so the
crest travels down the fan instead of the whole ribbon pumping at once — the
negative delays below are the phase, not a start-up stagger.
Translation is in the rotated group's own space, i.e. across the band's width;
the small counter-rotation is what keeps the far end of a 1000-unit-long band
from moving in lockstep with the near end, which is what makes it read as a
wave rather than a slide. `fill-box` puts that rotation on the band's own
centre — the default `view-box` would swing all seven around the same point.
Cost: the bands sit inside the two feGaussianBlur groups, so a moving band
re-runs its blur every frame. On a GPU that is free — measured at 1440x900, the
hero holds the display's full refresh with the swell running, the same as with
it disabled. Software rasterisation is the case that pays: ~15fps against ~60
static. Hence `prefers-reduced-motion` below.
Amplitude is set against what the eye can actually resolve here, and the first
pass — 11 units over 13s — was under it. The art scales at ~1.18px per unit, so
that was 13px of travel spread over 6.5s: ~4px/s, on edges the 17-unit blur
turns into 60px ramps, underneath a container drift of larger amplitude than
the swell itself. It animated and nobody could see it. 30 units at 9s is ~8x
the rate and lands above the threshold.
The ceiling is the gap between bands, 46-66 units. Neighbours run an eighth of
a cycle apart, so their relative displacement is 2A·sin(22.5°) ≈ 0.77A — at
A=30 the gaps breathe by ~23 units, half their width, without any two bands
crossing. That squeeze-and-spread between neighbours is most of what reads as a
wave; the scaleY is the same idea inside one band. */
@keyframes ds-mesh-swell {
0%,
100% {
transform: translate(0, 30px) rotate(1.2deg) scaleY(1.08);
}
50% {
transform: translate(0, -30px) rotate(-1.2deg) scaleY(0.94);
}
}
.ds-mesh-band {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: ds-mesh-swell 9s ease-in-out infinite;
}
/* 9s / 8 ≈ 1.125s between bands: an eighth of a cycle each, so the seven sharp
bands span three quarters of the wave and the crest is always visible crossing
the fan. */
.ds-mesh-band-1 { animation-delay: 0s; }
.ds-mesh-band-2 { animation-delay: -1.125s; }
.ds-mesh-band-3 { animation-delay: -2.25s; }
.ds-mesh-band-4 { animation-delay: -3.375s; }
.ds-mesh-band-5 { animation-delay: -4.5s; }
.ds-mesh-band-6 { animation-delay: -5.625s; }
.ds-mesh-band-7 { animation-delay: -6.75s; }
/* The two washes are the fan's atmosphere rather than its structure: heavier blur
and nothing to collide with, so they swing wider and slower. */
.ds-mesh-wash-1,
.ds-mesh-wash-2 {
animation-name: ds-mesh-swell-wash;
animation-duration: 15s;
}
.ds-mesh-wash-1 { animation-delay: -1.5s; }
.ds-mesh-wash-2 { animation-delay: -8.5s; }
@keyframes ds-mesh-swell-wash {
0%,
100% {
transform: translate(0, 46px) rotate(1deg) scaleY(1.06);
}
50% {
transform: translate(0, -46px) rotate(-1deg) scaleY(0.95);
}
}
/* The closing band's copy of the fan. The page's last screen was the only body
band with no graphic at all: a headline and a button on flat white, with the
closing wash — centred at 118% of the band's height — sitting almost entirely
below the fold of its own section. The same ribbon that opens the page closes
it, turned through 180° so it enters from the bottom left instead of the top
right; #security's line-work fan already bookends the page in a second
register, and this is the first one.
Three things differ from the hero, all forced by the band being a fifth of the
height and the copy being centred in it rather than sitting above it:
- The rotation is on this box and folded into its own drift keyframes, not
put on the `