Brand guidelines `#533afd`

May 18, 2026

# stripe.com

A reading of the visual language at https://stripe.com. Every token, every rule, every component — captured from the live site.

Page intent
  landing
System grade
  B 88/100
Tokens
  29 colours · 14 sizes
Generated
  designlang

Chapter 01

## About

Page intent
  landing 75% confidence
Material language
  flat
Imagery style
  flat-illustration
Component library
  unknown
Stack
  next
Voice tone
  neutral

Chapter 02

## Logo

stripe.com

Source
  inferred
Dimensions
  —
Aspect
  —
Format
  unknown

Chapter 03

## Colour

1 primary · 1 secondary · 1 accent · 6 neutrals · 29 total

Primary #533AFD

RGB
  `83, 58, 253`
HSL
  `248°, 98%, 61%`

Secondary #E5EDF5

RGB
  `229, 237, 245`
HSL
  `210°, 44%, 93%`

Accent #FFE0D1

RGB
  `255, 224, 209`
HSL
  `20°, 100%, 91%`

### Neutrals

`#000000`
`#50617A`
`#FFFFFF`
`#64748D`
`#101010`
`#F2F7FE`

### Full palette

`#000000`
`#533AFD`
`#50617A`
`#061B31`
`#FFFFFF`
`#64748D`
`#0000EE`
`#E5EDF5`
`#7F7DFC`
`#3C4F69`
`#273951`
`#7389FF`
`#1A2C44`
`#FF6118`
`#B9B9F9`
`#6480B2`
`#D6D9FC`
`#839BC8`
`#101010`
`#A3B5D6`
`#81B81A`
`#000EFF`
`#2D2564`
`#FFE0D1`
`#635BFF`
`#00D66F`
`#4834DB`
`#182659`

WCAG 79% · 11 passing pairs · 3 failing. Full breakdown in §11.

Chapter 04

## Typography

1 families · 14 sizes · 3 weights

Display
  sohne-var
Body
  sohne-var
Weights
  400, 300, 500

### Specimen

Flexible solutions for every business model.
Accept and optimize payments globally—online and in person

### Scale

Step | Size | Sample
--- | --- | ---
`t00` | `56px` | Flexible solutions for every
`t01` | `48px` | Flexible solutions for every
`t02` | `32px` | Flexible solutions for every
`t03` | `26px` | Flexible solutions for every
`t04` | `22px` | Flexible solutions for every
`t05` | `20px` | Flexible solutions for every
`t06` | `18px` | Flexible solutions for every
`t07` | `16px` | Flexible solutions for every
`t08` | `14px` | Flexible solutions for every
`t09` | `12px` | Flexible solutions for every

Chapter 05

## Spacing

Base 2px · 13 steps captured

### Rhythm

`1px`
`28px`
`32px`
`40px`
`48px`
`52px`
`60px`
`64px`
`72px`
`80px`
Chapter 06

## Shape

5 radii · 5 elevation tiers

### Border radii

`1px`
`4px`
`8px`
`16px`
`100px`

### Elevation

`xs`
`sm`
`md`
`lg`
`xl`
Chapter 07

## Iconography

unknown · 24 captured

Library
  unknown
Confidence
  0%
Stroke style
  —

`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
Chapter 08

## Motion

Feel: responsive · 5 durations · 12 easings

### Duration scale

`100ms`
`200ms`
`300ms`
`500ms`
`800ms`

### Easings

- `custom`
- `custom`
- `custom`
- `ease-out`

Chapter 09

## Components

unknown · 4 component patterns captured

### Mocks

Card

#### Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

### Detected patterns

#### card

Slots
  heading, description, media, footer
Variants
  link
Sizes
  md

#### button

Slots
  label, icon, badge
Variants
  secondary, primary, link
Sizes
  —

#### other

Slots
  —
Variants
  —
Sizes
  —

#### link

Slots
  —
Variants
  —
Sizes
  —

Chapter 10

## Voice

neutral · — · —

### Headlines from the site

- Financial infrastructure to grow your revenue. Accept payments, offer financial services, and implement custom revenue models—from your first transaction to your billionth.
- Financial infrastructure to grow your revenue. Accept payments, offer financial services, and implement custom revenue models—from your first transaction to your billionth.
- Flexible solutions for every business model.
- Accept and optimize payments globally—online and in person

### CTA verbs

- ``×20
- ``×10
- ``×6
- ``×5
- ``×4
- ``×4
- ``×3
- ``×2

Chapter 11

## Accessibility

79% WCAG 2.1 contrast
11 passing · 3 failing

### Failing pairs

Aa 1.19:1

Foreground
  `#ffffff`
Background
  `#e3ecf7`
Rule
  AA-large

### Suggested replacements

- `#ffffff` → `` (1.19:1)

Chapter 12

## Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variables variables.css

    :root {
      --color-primary: #533afd;
      --font-display: "sohne-var";
      --space-base: 2px;
      --radius-md: 4px;
    }

Tailwind config tailwind.config.js

    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          colors: { brand: '#533afd' },
          fontFamily: { display: ['sohne-var', 'serif'] },
          spacing: { base: '2px' },
          borderRadius: { md: '4px' },
        },
      },
    };

Run `npx designlang pack stripe.com` for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

## Usage

1. ### Lead with the primary.

   It belongs on calls-to-action and one accent moment per screen. Not on body copy.

2. ### Two type families, three weights.

   Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

3. ### Snap to the spacing scale.

   Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

4. ### Treat accessibility as a hard constraint.

   When a colour pair fails WCAG, fix the colour — not the contrast check.