# Stripe Gradient

## Overview
Extracted from stripe.com (2026-07-11). A light-native, corporate-clean fintech aesthetic: a pure white canvas, deep navy text, and blue-tinted neutrals form a deliberately quiet foundation — so the one loud element, the famous diagonal gradient mesh sweeping across the hero, lands with full force. Everything communicates trust and engineering precision: light-weight display type with tight tracking, dense 14–16px UI text, small radii, soft blue shadows, and a single indigo brand color that owns every interactive affordance.

## Colors & Roles
All light-mode values are measured (computed-css):
- `background` / `card` / `popover`: pure white `oklch(1 0 0)` (#ffffff, dominant area weight).
- `foreground`: deep navy `oklch(0.219 0.051 251.7)` (#061b31) — the measured heading/body ink; never pure black for reading text.
- `primary` / `ring` / `chart-1`: brand indigo `oklch(0.521 0.268 277.4)` (#533afd) — measured on the "Contact sales" filled button and 372 text occurrences. CTAs, links, icons.
- `secondary` / `muted` / `border`: blue-gray `oklch(0.942 0.014 248)` (#e5edf5) — the measured surface tint and dominant hairline.
- `secondary-foreground`: section navy `oklch(0.217 0.066 267.9)` (#0d1738) — the full-bleed dark band color.
- `muted-foreground`: `oklch(0.488 0.045 257.9)` (#50617a) — measured secondary text.
- `accent` / `accent-foreground`: lavender tint `oklch(0.926 0.037 282.3)` (#e2e4ff) with measured indigo `#4834db` text — badge/highlight pairing.
- `input`: indigo-tinted border `oklch(0.894 0.048 281.5)` (#d6d9fc).
- Charts: indigo #533afd, periwinkle #7389ff (measured), green #00d66f (measured), orange (hue from measured peach #ffe0d1, deepened) and pink (from the hero gradient — vision-inferred).
- `destructive` is synthesized (no error UI on the homepage).

Dark mode is fully authored (vision-inferred): the measured section navy #0d1738 is lightened slightly into the canvas (`oklch(0.19 0.055 268)`); primary shifts to the measured periwinkle #7389ff for contrast on dark.

## Typography Rules
Measured family is Söhne variable (`sohne-var`) → practical Google Fonts fallback: **Inter**. The signature is *lightness*: H1 measured at 48px / weight 300 / −0.96px (≈ −0.02em) tracking; H2 32px/300, H3 26px/300. Only three weights exist: 300 (display/headings), 400 (body, buttons), 500 (labels/emphasis). UI text is dense and precise at 14–16px. Never use bold (700+) headlines in this style.

## Layout Principles
Centered ~1080px container on a 12-column / 24px-gutter grid. Hero is asymmetric: left-aligned copy column with the gradient ribbon crossing the upper right. Sections alternate white and full-bleed navy (#0d1738) bands for rhythm; each section opens with an indigo eyebrow label, a light oversized heading, then two-column body text and arrow-link CTAs (`Learn more →`). Section gap `clamp(5rem, 9vw, 8rem)`.

## Depth & Elevation
Mostly flat. Hairline 1px borders (#e5edf5) divide content. Shadows are large, soft, and blue-tinted — measured `rgba(50,50,93,0.12) 0 16px 32px` — reserved for product screenshots and floating cards only. No glassmorphism, no noise.

## Signature Gradient
The hero gradient mesh flows orange → pink → magenta → purple → indigo → sky blue as a diagonal ribbon, skewed roughly −8deg, laid over the white page. In token terms: `linear-gradient(105deg, var(--chart-4), var(--chart-5), var(--primary), var(--chart-2))`, optionally softened with `color-mix(... , var(--background))` at the edges. It appears in the hero (and occasionally as a thin section band) — never on buttons, cards, or body backgrounds.

## Shapes
Small radii by rule: buttons 4px, inputs 6px, cards 8px (measured set: 2–8px, 16px for large media). Avatars/dots use 100%.

## Component Stylings
- **Button**: primary = indigo fill, white text, radius 4px, 14px/400, padding ~12–16px 20px, trailing `→`; hover darkens fill one step and nudges the arrow 3px right. Secondary = white/transparent with indigo text. On navy sections, invert to white fill + navy text. Focus = 2px offset indigo ring.
- **Card**: white or `secondary`-tinted, hairline border, radius 8px, padding 24–32px; soft large shadow only on screenshot/floating cards.
- **Input**: white, 1px #d6d9fc border, radius 6px; focus border → `ring` indigo.
- **Nav**: slim light bar, wordmark left, 14px dropdown links, ghost "Sign in" + filled indigo "Contact sales" right; text inverts to white when over the gradient.
- **Badge**: lavender `accent` pill with indigo text; green #00d66f for success signals.

## Motion
Calm and trustworthy: 150–250ms standard easing; arrow nudge on link hover; opacity + 12px translateY fade-ups on scroll; optionally a very slow drift in the hero gradient. No bounce or spring overshoot.

## Do's and Don'ts
**Do:** confine the gradient to the hero; keep headlines light (300) and tightly tracked; give every CTA the arrow; alternate white/navy sections; keep neutrals blue-undertoned.
**Don't:** spread gradients onto cards/buttons; use bold headlines or bubbly radii; go dark-native; desaturate neutrals to plain gray; add playful bounce motion.

## Responsive Behavior
Hero collapses to stacked copy-over-gradient; the two-column body text drops to one column; nav condenses to wordmark + CTA + menu. Display type scales via `clamp(3rem, 5.5vw, 4.5rem)`.

## Known Gaps / Confidence
- Dark mode does not exist on stripe.com — the entire dark set is vision-inferred/authored.
- The gradient's orange/pink stops were not directly measurable (canvas/WebGL rendering); hues are inferred from screenshots, anchored to the measured peach #ffe0d1 and lavender #e2e4ff tints.
- `destructive` is conventional, not measured.
- Söhne is commercial; Inter is the reproduction fallback and slightly rounder than the original.
- Homepage had no measurable inputs; input styling is inferred from measured borders and site conventions.