---
name: Stripe
description: "Precise, confident fintech UI: deep navy text, a single blurple accent and generous whitespace around dense technical content."
website: https://stripe.com
color: "#635BFF"
category: Fintech
icon: stripe
updated_at: "2026-10-29"
---

# Stripe — 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.
```