Stripe

Light-first canvas — pure white (#ffffff) with near-black (#000000) text handling dominant surface. Indigo #533afd handles every brand-accent moment; a cool slate gray ladder (#50617a → #64748d → #3c4f69 → #273951) carries secondary text. A radial gradient trio (purple → pink → amber) appears sparingly for hero and section atmosphere — never structural, never as fill. Signature warm accent #ff6118 (orange) reserved for small bursts of emphasis. No dark-mode commitment — the brand lives in light.

• Near-black #000000 as dominant text — the most frequent color on the page (~1881 measured uses)
• Indigo #533afd as single brand accent — primary CTA, link hover, active states (~799 observed uses)
• Cool slate gray family #50617a / #64748d / #3c4f69 / #273951 for progressive secondary text de-emphasis
• Deep navy #061b31 as heading surface or footer-dense background (hsl lightness ~11%)
• Warm orange #ff6118 used homeopathically — CTA accent moments, never decorative
• Gradient palette restricted to radial atmospheric lifts; linear gradients only for a few 90deg hero strokes

radial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237, 245) 66%)
linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgb(67, 4, 234) 50%, rgba(0, 0, 0, 0) 100%)
radial-gradient(50% 50%, rgba(83, 58, 253, 0.8) 62.5%, rgba(83, 58, 253, 0) 100%)

• Primary family: Sohne variable (self-hosted, preloaded). Mono fallback: Source Code Pro Medium (also preloaded). No third display family — the voice is carried by weight shift inside Sohne.
• Weight ladder: 300 (display + reading) / 400 (dense UI labels). Weights 500+ are not observed — large type stays light, emphasis comes from size and tracking.
• Display tracking in px, not em: -0.22px on 22px headings, -0.26px on 26px, -0.64px on 32px, -0.96px on 48px — the larger the type, the more aggressive the optical tightening.
• Line-height ratios are precise: heading-1 48px/55.2px (1.15), heading-2 32px/35.2px (1.1), text-14 18px/25.2px (1.4), body 14px/14px (1.0 for dense UI rows).
• Tabular numerals mandatory on aligned financial figures: `font-variant-numeric: tabular-nums`. Source Code Pro handles inline code and API reference automatically.
• No italic for emphasis — Sohne 300 → 400 weight shift carries it. Italic is reserved for editorial quotes only.
• Paragraph width 45-55 ch at body 14-16px; editorial runs extend to 60 ch at 18px `text-14`.

• 2px base unit. Scale: 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 18 / 20 / 22 / 24 — micro-density with no gaps above 24 in the observable range.
• Container max-widths are narrow and stepped: 392 / 400 / 504 / 608 / 752 / 764 px. The page never exceeds 764 px for content — it's a reading column, not a lateral canvas.
• Section vertical rhythm is driven by content density, not a single rule; pad sections generously when type is display-scale, tighten aggressively around dense UI.
• Card padding: 16-24px on desktop, 12-16px on mobile. Always pick from the 2px scale; no magic numbers.
• Gutter values for flex/grid layouts stay within the 2px ladder — no 7, 9, 11, 13 irregulars.

• Elevation is delivered through stacked subtle drop shadows — not a single layer. The signature card lift is `rgba(50, 50, 93, 0.12) 0px 16px 32px 0px`, sometimes paired with a second offset for dramatic surface moments.
• Shadow opacity stays in the 6-12% range for standard cards; up to 25% for editorial hero cards with larger offsets.
• No inset shadows observed — depth comes outward. Border hairlines (1px) handle surface delineation when shadow is not warranted.
• Focus states use the brand indigo #533afd as a 2px ring, never a glow.

• Radius scale is micro-granular: 1 / 2 / 3 / 4 / 5 / 6 / 8 px. The 1-8 range (no 12, 16, 20) is a precision signature — every corner resolved to the nearest integer.
• Buttons default 4-6px radius, cards 6-8px, inputs 4px, pills `rounded-full` reserved for badges and status chips only.
• Icons stroke-based at 1.5-2px weight; custom Stripe icons appear as simplified line drawings, no filled or duotone variants.
• Tap targets minimum 40×40 on desktop, 44×44 on touch — standard Stripe accessibility floor.

• button-primary

  backgroundColor

  #533afd

  textColor

  #ffffff

  radius

  4px

  padding

  8px 16px

  border

  1px solid transparent

  boxShadow

  none

  fontWeight

  400

  fontSize

  14px

  lineHeight

  14px

  Tailwind

  Copy

  inline-flex min-h-[32px] items-center gap-1.5 rounded-[4px] bg-[#533afd] px-4 py-2 text-[14px] font-normal leading-[14px] text-white transition-colors duration-[300ms] ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#533afd] focus-visible:ring-offset-2

• button-secondary

  backgroundColor

  #ffffff

  textColor

  #000000

  radius

  4px

  padding

  8px 16px

  border

  1px solid #e5edf5

  boxShadow

  none

  fontWeight

  400

  fontSize

  14px

  Tailwind

  Copy

  inline-flex min-h-[32px] items-center gap-1.5 rounded-[4px] border border-[#e5edf5] bg-white px-4 py-2 text-[14px] font-normal text-[#000000] transition-colors duration-[300ms] ease-[cubic-bezier(0.25,1,0.5,1)] hover:border-[#50617a] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#533afd] focus-visible:ring-offset-2

• card-surface

  backgroundColor

  #ffffff

  textColor

  #000000

  radius

  6px

  padding

  20px 24px

  border

  none

  boxShadow

  rgba(50, 50, 93, 0.12) 0px 16px 32px 0px

  Tailwind

  Copy

  rounded-[6px] bg-white p-6 text-[#000000] shadow-[rgba(50,50,93,0.12)_0_16px_32px_0] transition-shadow duration-[300ms] ease-[cubic-bezier(0.25,1,0.5,1)] hover:shadow-[rgba(0,0,0,0.1)_0_30px_60px_-50px,rgba(50,50,93,0.25)_0_30px_60px_-10px]

• input-field

  backgroundColor

  #ffffff

  textColor

  #000000

  radius

  4px

  padding

  8px 12px

  border

  1px solid #e5edf5

  boxShadow

  none

  fontWeight

  300

  fontSize

  14px

  lineHeight

  14px

  letterSpacing

  -0.42px

  Tailwind

  Copy

  w-full rounded-[4px] border border-[#e5edf5] bg-white px-3 py-2 text-[14px] font-light leading-[14px] tracking-[-0.42px] text-[#000000] placeholder:text-[#64748d] focus-visible:outline-none focus-visible:border-[#533afd] focus-visible:ring-2 focus-visible:ring-[#533afd]/30

• link-inline

  color

  #533afd

  textDecoration

  none

  textUnderlineOffset

  3px

  transition

  color 150ms cubic-bezier(0.25, 1, 0.5, 1), text-decoration-color 150ms cubic-bezier(0.25, 1, 0.5, 1)

  Tailwind

  Copy

  text-[#533afd] no-underline underline-offset-[3px] transition-colors duration-[150ms] ease-[cubic-bezier(0.25,1,0.5,1)] hover:underline hover:decoration-[#533afd] focus-visible:outline-none focus-visible:underline focus-visible:decoration-[#533afd]

• Primary easing: cubic-bezier(0.25, 1, 0.5, 1) — an ease-out quart variant. Used across color, fill, stroke, opacity, and transform transitions.
• Secondary easings: cubic-bezier(0.165, 0.84, 0.44, 1) and cubic-bezier(0.16, 1, 0.3, 1) — reserved for longer 0.8s transform choreography on hero surfaces. CSS keywords (linear, ease) appear on simpler color and opacity transitions.
• Linear easing only for pure opacity fades (0.15s linear) — keeps fast UI feedback from feeling over-engineered.
• Five captured durations: 0.15s (fade), 0.25s (compound state), 0.3s (standard state change), 0.4s (mid-tier reveal), 0.8s (hero choreography).
• useReducedMotion mandatory: all animations collapse to opacity-only or disable.
• Spring animations forbidden — deterministic cubic-bezier or CSS keywords only.
• `color`, `fill`, `stroke`, `opacity`, `transform` are first-class animated properties — SVG-heavy surfaces animate multiple attributes in parallel.

• Primary CTAs prominent and solid-filled with indigo; secondary actions border-only on white.
• Tooltips reveal on hover + focus with 400ms delay, dismiss instantly on blur.
• Modals for destructive confirmations; inline expansions for progressive disclosure; drawers reserved for mobile-only contextual panels.
• Form validation: inline below field on blur; submit disabled until pristine validation passes.
• Empty states: small icon + one-line caption + primary 400-weight action link. No illustrations.
• Loading states: skeleton shimmer for content; inline spinner for buttons. No full-page overlays except for destructive confirmations.
• Links underline on hover; never underlined by default — typography weight carries the affordance.

Desktop-first because the audience reads carefully — financial operators, developers, billing leads. The page is a narrow reading column (max 764px content width) that flows gracefully on mobile without reinventing its architecture. No hamburger-revealed alternate information architecture; mobile is a reflow, not a rewrite.

• Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 — standard Tailwind ladder.
• Container widths step through 392 → 400 → 504 → 608 → 752 → 764 for bounded reading columns at each tier.
• Hide-on-mobile is banned — if a control exists on desktop, it reaches mobile via reflow.
• Tap target minimum 44×44 on touch; 40×40 on pointer devices.
• Typography scales proportionally: hero drops from 48 → 32 → 26, body holds 14-16px across the board.

• focus-visible: 2px ring in indigo #533afd, never a diffuse glow. Mandatory on every interactive element.
• All interactive elements reachable via Tab key in logical reading order; never rely on hover to expose actions.
• Color contrast: #000000 on #ffffff = 21:1 (AAA); secondary text #50617a on #ffffff ≈ 6.5:1 (AA+). Never drop below 4.5:1 for body text.
• ARIA labels on icon-only buttons; aria-expanded on collapsible regions; aria-live='polite' on toast + status updates.
• Motion respects prefers-reduced-motion — animations reduce to opacity-only or disable entirely.
• Tap targets minimum 44×44 on touch; 40×40 on pointer.
• Screen reader-only content uses `sr-only`; never `display:none` for meaningful context.
• Form errors announced via aria-describedby on the associated input; never color-only signaling.

Motion library is not directly observable in the extract (chunk-name regex did not match any known JS animation framework). Stripe's motion profile runs on CSS transitions: color/fill/stroke/opacity/transform at 300ms on cubic-bezier(0.25, 1, 0.5, 1), plus 800ms cubic-bezier(0.165, 0.84, 0.44, 1) for hero choreography. Your implementation can use a JS animation library (Framer Motion, Motion One) or stay on CSS — either matches the observable pattern. Images are overwhelmingly PNG (33 png vs 8 jpg across 30 observed assets) — Stripe leans on vector-style raster diagrams over photography.

• CSS transitions (or equivalent Framer Motion primitives): `transition: <prop> 0.3s cubic-bezier(0.25, 1, 0.5, 1)` for standard state change; reserve 0.8s + cubic-bezier(0.165, 0.84, 0.44, 1) for hero choreography
• Linear easing only for pure opacity fades (0.15s) — fast UI feedback
• useReducedMotion guard wraps every animation primitive if using JS framework; `@media (prefers-reduced-motion)` if CSS-only
• Next/Image with `sizes` attribute always set; 98% of images `loading='lazy'`; `priority` only on hero candidate (1392×975 png)
• No canvas, no WebGL — the visual language is SVG-forward, raster-hero, animated-discreet

• Apply the single indigo #533afd as brand accent — CTA, focus ring, active state — and keep its surface area under ~5% of the page.
• Use tabular-nums on aligned numerics; reach for a mono family (Source Code Pro, JetBrains Mono) for code and API reference.
• Keep heading tracking in px (-0.22 to -0.96px) proportional to size — the larger the type, the tighter the optical correction.
• Reach for stacked subtle drop shadows before any single-layer glow.
• Pass every page through useReducedMotion before shipping.
• Use the primary easing cubic-bezier(0.25, 1, 0.5, 1) for every state change transition; reserve cubic-bezier(0.165, 0.84, 0.44, 1) for hero choreography.
• Keep images lazy-by-default (target ≥ 95% lazy); reserve `priority` for the single LCP candidate.

• Don't copy the purple-pink-amber gradient trio verbatim — it reads 'Stripe-adjacent' instantly, weakening your own brand.
• Don't ship dark-mode-first — Stripe's authority lives in light-first, and cross-mode here would dilute the brand.
• Don't widen content containers beyond ~764px — Stripe's narrow reading discipline is part of its editorial voice.
• Don't use weights 500+ in Sohne-style typography — the 300/400 ladder is the signature; heavier weights break the optical calm.
• Don't animate `height: auto` — use measured transforms or scaleY.
• Don't replace the 1-8px micro-radius ladder with generic 12/16/24 — precision breaks if the scale coarsens.
• Don't use em for tracking — the px-based scale (-0.22 to -0.96) is an optical constant, not a layout-relative value.

• Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS.
• Spacing base 2px, scale 2/4/6/8/10/12/14/16/18/20/22/24.
• Container max 764px — do not exceed.
• Single font family + mono fallback: Sohne-style variable + Source Code Pro (or equivalents).
• Weight ladder strictly 300 / 400.
• Motion: five captured durations (0.15 / 0.25 / 0.3 / 0.4 / 0.8 s), three cubic-bezier easings (primary cubic-bezier(0.25, 1, 0.5, 1), supporting cubic-bezier(0.165, 0.84, 0.44, 1) and cubic-bezier(0.16, 1, 0.3, 1)) plus linear and ease keywords. No springs.
• Radius scale: 1 / 2 / 3 / 4 / 5 / 6 / 8 px.

• Container width: no page exceeds 764px content width.
• Spacing grep: no values outside the 2/4/6/8/10/12/14/16/18/20/22/24 ladder.
• Font weight grep: only 300 and 400 appear — no 500, 600, 700.
• Transition grep: `transition-timing-function` values draw from {cubic-bezier(0.25, 1, 0.5, 1), cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.16, 1, 0.3, 1), linear, ease}. Primary cubic-bezier(0.25, 1, 0.5, 1) carries most interactive transitions.
• Transition duration grep: values draw from {0.15s, 0.25s, 0.3s, 0.4s, 0.8s}.
• Shadow audit: hero elevation uses stacked offsets (two layers); non-hero stays single-layer, ≤ 0.12 opacity.
• Image audit: loading='lazy' on ≥ 95% images; priority only on hero LCP candidate.
• Tracking audit: display-size text uses px-based negative tracking (-0.22 to -0.96), not em.
• Contrast audit: body text on white background ≥ 4.5:1 (WCAG AA); dominant #000000 on #ffffff = 21:1 (AAA).