stripe.com

Page intent

landing 75% confidence

Material language

flat

Imagery style

flat-illustration

Component library

unknown

Stack

next

Voice tone

neutral

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

Neutrals

Full palette

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

1 families · 14 sizes · 3 weights

Display

sohne-var

Body

sohne-var

Weights

400, 300, 500

Specimen

Scale

Base 2px · 13 steps captured

Rhythm

5 radii · 5 elevation tiers

Border radii

Elevation

unknown · 24 captured

Library

unknown

Confidence

0%

Stroke style

—

Feel: responsive · 5 durations · 12 easings

Duration scale

Easings

• custom
• custom
• custom
• ease-out

unknown · 4 component patterns captured

Mocks

Detected patterns

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

Failing pairs

Suggested replacements

• #ffffff → (1.19:1)

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

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

// 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).

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.