Stripe · scrub to study layout
Stripe
> Stripe
indigo-ink ledger on frosted glass Stripe uses a near-monochrome financial-instrument language: a soft cool-white canvas with deep navy headings, almost no decorative chrome, and one vivid indigo (#533afd) that earns the right to be a button, link, or icon stroke. Typography is exclusively sohne-var at weight 300 — even at 56px display size — which reads as confident restraint rather than corporate shouting; letter-spacing tightens aggressively as size grows. Buttons are small, squared at 4px, and use violet fills or hairline violet outlines. The system avoids shadows entirely; depth comes from background tint shifts (white → #f8fafd → #e5edf5 → violet washes) rather than elevation. The whole interface behaves like a ledger or terminal: dense information, crisp rules, generous whitespace between sections, and color appearing only when something needs to be acted on.
↗ https://stripe.comColor Palette
BRAND
Indigo Ink
#533afd
Violet action color for filled buttons, selected navigation states, and focused conversion moments.
Indigo Hover
#7389ff
Violet text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color
ACCENT
Lavender Border
#b9b9f9
Hairline outline button border (1px) — the violet companion to indigo fills; pairs with white text for ghost CTAs
Lilac Border
#d6d9fc
Secondary outline button border and softer dividers; a paler sibling of lavender for tertiary ghost actions
Periwinkle Wash
#e8e9ff
Lightest violet surface — soft tinted backgrounds for highlighted cards, tag pills, and subtle emphasis blocks
Deep Violet
#182659
Heaviest accent stroke — rare use for emphasized borders or graphic frames; reads almost as a navy
Amethyst Edge
#7f71e6
Mid-violet outline border for developer-facing buttons; sits between indigo ink and lavender border
NEUTRALS
Midnight Ink
#061b31
Primary heading and body text — deep near-black with a cool blue undertone that anchors the entire type system
Steel
#50617a
Tertiary body text and helper copy — sits between slate and the muted violet tints used on sub-labels
Slate
#64748d
Gray text accent for links, tags, and emphasized short phrases.
Smoke
#839bc8
Muted violet-tinted text for large decorative headings and supporting copy — never for body paragraphs
Frost
#e5edf5
Primary border color, subtle surface tint, and button hover backgrounds; the workhorse neutral that divides content
Mist
#f8fafd
Footer background and section banding — a barely-perceptible cool tint that separates regions without a visible line
Pure White
#ffffff
Page canvas and elevated card surfaces; the default background against which everything else is measured)
Typography
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
THE QUICK BROWN FOX JUMPS
The quick brown fox jumps
FONTS
Spacing & Shape
Guidelines
✓ DO
- Use #8052ff (Electric Iris) exclusively for primary action buttons
- Set headlines at weight 400 with aggressive negative letter spacing (-0.04em)
- Use weight 200 (ultra-light) for 18px body text for airy readability
- Maintain pure #000000 black as section canvas background
✕ DON'T
- Do not use filled violet for large background surface containers
- Do not set body text at standard weight 400
- Do not introduce card containers with heavy borders or drop shadows
- Do not add color gradients to flat UI components
Similar Design Systems
Explore related DESIGN.md specifications & token sets.
Dala
Dala design tokens and UI patterns as AI-ready DESIGN.md for Cursor, Claude Code, and v0.
Caldera
Caldera runs on a warm limestone canvas flooded with molten orange. The interface is flat and unshadowed, letting ultrabold compressed type at near-architectural scale (up to 189px) carry all structural weight. A single vivid orange (#fc5000) acts as the only aggressive chromatic accent against monochrome warm grays, with a violet plasma reserved for the hero halftone and a sulfur yellow for tags. The visual language is volcanic: condensed heavy letterforms, halftone dot patterns, 40px radii on cards and buttons, and 800px pill controls — heat contained within a soft, paper-like surface. https://caldera.xyz
Awesomic
editorial zinc grid with confetti-orange punctuation. Awesomic operates in a restrained, neutral-first visual register: a zinc-gray scale carries nearly the entire interface, with one vivid orange badge accent and almost no other chromatic intrusion. The geometry is defined by generous corner rounding — 36px cards, 14px buttons, 10000px pills — and hairline 1px borders replace drop shadows as the primary elevation tool. Typography is a single custom geometric sans (Cosmica) deployed at bold display weights (56–64px / weight 600) for editorial headlines, paired with compact 14px body text that signals efficiency. The atmosphere is that of a confident, infrastructure-grade marketplace: quiet surfaces, precise density, and color deployed as functional punctuation rather than decoration.