Bright white canvas, light-weight Söhne display, navy ink, blurple #533afd, fluid gradients, soft colored shadows, crisp 4-6px radii.
Browse Stripe in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: stripe.com (live DOM, computed styles + color census), 2026-07-06; motion + backgrounds re-captured 2026-07-07. Coverage: marketing site + embedded product UI mockups. Dashboard: needs-dashboard (test-mode login required). Responsive: not captured (stylesheets cross-origin).
Bright, optimistic, and immaculately crafted: a white canvas lit by Stripe's signature fluid gradient (blurple → cyan → orange → magenta), rendered as large soft-blurred organic shapes behind heroes and product mockups. Large display type is light-weight — the Stripe signature — set against a deep navy ink ladder for text. Elevation comes from soft, colored shadows rather than hard borders. Small 4–6px radii keep everything crisp, not rounded; warm hues stay inside decorative gradients and never become UI chrome. Feels: premium, optimistic, effortless, trustworthy.
| Token | Hex | Role / usage |
|---|---|---|
| blurple | #533afd | Primary accent — buttons, links, active. (Historic canonical #635bff) |
| blurple-lite | #7f7dfc | Gradient lavender, hover tints |
| lavender-100 | #e8e9ff | Accent surface fill |
| lavender-200 | #e2e4ff | Accent surface, chip bg |
| border-lavender | #d6d9fc | Outline-button border |
| orange | #ff6118 | Secondary accent (gradient, highlights) |
| cyan | #00d4ff | Gradient stop |
| Token | Hex | Role / usage |
|---|---|---|
| ink | #0a2540 | Canonical dark navy (headings) |
| ink-nav | #061b31 | Nav links, marketing headings |
| navy-700 | #1a2c44 | Strong text |
| navy-600 | #273951 | Headings on light |
| navy-500 | #3c4f69 | Body strong |
| slate-500 | #50617a | Body / secondary text (most common) |
| slate-400 | #64748d | Tertiary text, captions |
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Page bg, cards |
| surface-50 | #f8fafd | Inset panels, subtle sections |
| surface-100 | #f6f9fc | Canonical light section bg |
| blue-gray | #e5edf5 | Dividers, muted panels, table stripes |
| peach-tint | #ffe0d1 | Warm gradient wash |
Rule: chrome is white + navy text; blurple is the single interactive accent. Warm hues (orange/pink) appear only inside decorative gradients, never as UI chrome.
"sohne-var" (Söhne), "SF Pro Display", -apple-system, sans-serif. Söhne is proprietary; fall back to SF Pro / system.300, not bold.#50617a on white; navy #0a2540 for emphasis.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | 47 / 54 | 300 | -0.94px (-2%) |
| Section (h2) | 32 / 35 | 300 | -0.64px (-2%) |
| Subhead | 21 / 30 | 400 | -0.2px |
| Body | 16 / 26 | 400 | 0 |
| UI / nav | 14 / 20 | 400–500 | 0 |
| Caption | 13 / 18 | 400 | 0 |
Pattern: big type is light and tightly tracked; body stays 400. Weight rarely exceeds 500. The famous two-tone headline runs the first sentence in solid navy and the continuation in a blurple→slate gradient.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.