# Stripe Gradient
순백 캔버스와 딥 네이비 텍스트 위에 인디고(#533afd) 브랜드와 시그니처 대각선 그라디언트 메시 히어로를 얹은, 개발자 신뢰감의 클린 코퍼레이트 SaaS 스타일.
- taxonomy: corporate-clean · gradient-hero, fintech, developer-credible, indigo-brand, light-native, dense-precise-type, soft-large-shadows, navy-sections, saas-marketing · complexity=medium
- page types: landing, marketing, docs, dashboard
- best for: 핀테크·결제·B2B SaaS 랜딩 페이지, 개발자 대상 제품 마케팅과 문서 사이트, 신뢰와 스케일을 동시에 보여줘야 하는 엔터프라이즈 홈페이지, 제품 스크린샷·코드 샘플이 주인공인 기능 소개 페이지
- avoid for: 다크 네이티브 게이밍·크리에이티브 포트폴리오, 따뜻한 수공예·오가닉 라이프스타일 브랜드, 장식을 배제하는 브루탈리스트·에디토리얼 지면, 그라디언트가 촌스러워 보일 수 있는 초미니멀 럭셔리 브랜드
- provenance: website (Stripe | Financial Infrastructure to Grow Your Revenue) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, shadows=computed-css, color_roles=vision-inferred, gradient_hues=vision-inferred, destructive=vision-inferred, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred, light=computed-css, dark=vision-inferred
## Design rules
# 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.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Stripe Gradient — theme.css (generated, do not edit) */
:root {
--radius: 8px;
--radius-selector: 4px;
--radius-field: 6px;
--font-sans: "sohne-var", "Söhne", "SF Pro Display", -apple-system, "Segoe UI", "Inter", Roboto, sans-serif;
--font-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
--font-display: "sohne-var", "Söhne", "SF Pro Display", -apple-system, "Inter", sans-serif;
--spacing: 4px;
--shadow: 0px 16px 32px 0px color-mix(in oklab, oklch(0.35 0.05 275) 12%, transparent);
--ks-display-weight: 300;
--ks-display-tracking: -0.025em;
--background: oklch(1 0 0);
--foreground: oklch(0.219 0.051 251.7);
--card: oklch(1 0 0);
--card-foreground: oklch(0.219 0.051 251.7);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.219 0.051 251.7);
--primary: oklch(0.521 0.268 277.4);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.942 0.014 248);
--secondary-foreground: oklch(0.217 0.066 267.9);
--muted: oklch(0.942 0.014 248);
--muted-foreground: oklch(0.488 0.045 257.9);
--accent: oklch(0.926 0.037 282.3);
--accent-foreground: oklch(0.472 0.237 277.6);
--destructive: oklch(0.577 0.225 27);
--destructive-foreground: oklch(1 0 0);
--border: oklch(0.942 0.014 248);
--input: oklch(0.894 0.048 281.5);
--ring: oklch(0.521 0.268 277.4);
--chart-1: oklch(0.521 0.268 277.4);
--chart-2: oklch(0.669 0.175 272.9);
--chart-3: oklch(0.767 0.201 152.1);
--chart-4: oklch(0.75 0.155 55);
--chart-5: oklch(0.66 0.24 350);
}
.dark {
--background: oklch(0.19 0.055 268);
--foreground: oklch(0.955 0.01 260);
--card: oklch(0.235 0.062 267);
--card-foreground: oklch(0.955 0.01 260);
--popover: oklch(0.255 0.062 267);
--popover-foreground: oklch(0.955 0.01 260);
--primary: oklch(0.669 0.175 272.9);
--primary-foreground: oklch(0.15 0.05 268);
--secondary: oklch(0.28 0.06 266);
--secondary-foreground: oklch(0.9 0.02 260);
--muted: oklch(0.26 0.055 266);
--muted-foreground: oklch(0.68 0.035 259);
--accent: oklch(0.3 0.09 278);
--accent-foreground: oklch(0.85 0.08 281);
--destructive: oklch(0.64 0.21 26);
--destructive-foreground: oklch(0.97 0.01 260);
--border: oklch(0.31 0.055 266);
--input: oklch(0.34 0.06 268);
--ring: oklch(0.669 0.175 272.9);
--chart-1: oklch(0.669 0.175 272.9);
--chart-2: oklch(0.6 0.24 277.4);
--chart-3: oklch(0.767 0.201 152.1);
--chart-4: oklch(0.78 0.15 55);
--chart-5: oklch(0.7 0.22 350);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/stripe-gradient.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `