Stripe

stripe.com

Precise, confident fintech UI: deep navy text, a single blurple accent and generous whitespace around dense technical content.

Raw DESIGN.md

An independent summary of Stripe's public design language, written by UI Skillbook for coding agents. Not affiliated with or endorsed by Stripe. Color values are approximate.

Overview

Stripe pairs documentation-grade clarity with marketing polish. Pages read like well-typeset reference material: tight grids, careful hierarchy, and color used to point, not decorate.

Color

Role	Value	Use
Blurple (accent)	`#635BFF`	Primary buttons, links, focus
Navy (text)	`#0A2540`	Headings and body
Slate	`#425466`	Secondary text
Surface	`#F6F9FC`	Alternating sections, code panels

Typography

A custom neo-grotesk (Söhne) for everything, set tight at display sizes with light-to-medium weights. Body copy is 16–18px with roomy 1.5–1.6 line height. Code samples use a clean monospace on a pale surface.

Spacing and layout

An 8px grid with wide outer margins. Content sits in a strict 12-column grid; diagonal section breaks and angled backgrounds are the signature layout move.

Components

Pill-shaped primary buttons with an arrow that nudges right on hover.
Code blocks with tabbed language switchers and copy buttons.
Cards with soft, layered shadows rather than hard borders.
Inline product mockups that animate subtly to explain flows.

Do

Let one accent color carry interactive meaning.
Write UI copy that is short, literal and technical.

Don't

Don't stack multiple saturated colors in one view.
Don't use heavy borders where spacing can separate content.

Prompt for your agent

Style this interface in the spirit of Stripe's design language, without copying its logo or brand assets.
Precise, confident fintech UI: deep navy text, a single blurple accent and generous whitespace around dense technical content.
Follow the color roles, type and component notes in this DESIGN.md.

Back to all Design.md files