Stripe

stripe.com ↗

Confident fintech platform defined by an electric indigo-purple brand accent against clean white space and understated dark neutrals.

Financial infrastructure to grow your revenue. Accept payments, offer financial services, and implement custom revenue models—from your first transaction to your billionth.

What Coherent builds from this

generated · not Stripe's site

An original page Coherent generated from Stripe's tokens — its palette, type, and shape applied to fresh content. This is the output, not a screenshot of Stripe.

generated-with-coherent · stripe

A landing page generated by Coherent from Stripe's design tokens

Build on these tokens

Download the file and seed any AI tool — or install it into a real Next.js project so every generated page shares this palette, type, and shape.

Download stripe.mdthen, in your project:

$ npm i -g @getcoherent/cli
$ coherent import design stripe.md

Colour

#533afd

brand · icon text

#81b81a

accent · h1 text

#ffffff

background · a text

#000000

text · body text

#061b31

neutral · h2 text

#64748d

neutral · p text

Typography

Families: sohne-var · SF Pro Display · sans-serif

display48pxw300/55.2px

h132pxw300/35.2px

h226pxw300/29.12px

h322pxw300/24.2px

h418pxw300/25.2px

body16pxw400/normal

small14pxw400/14px

Spacing

8px10px16px17px24px28px

Radius

0px

2px

3px

4px

5px

6px

8px

16px

Elevation

rgba(23, 23, 23, 0.08) 0px 15px 35px 0px

rgba(23, 23, 23, 0.06) 0px 3px 6px 0px

rgba(50, 50, 93, 0.12) 0px 16px 32px 0px

rgba(55, 39, 37, 0.15) 0px 10px 50px -7.79776px

Gradients

radialradial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237, 245) 66%)

radialradial-gradient(50% 50%, rgba(83, 58, 253, 0.8) 62.5%, rgba(83, 58, 253, 0) 100%)

radialradial-gradient(50% 50%, rgba(243, 99, 243, 0.8) 53.85%, rgba(243, 99, 243, 0) 100%)

radialradial-gradient(50% 50%, rgb(255, 207, 94) 41.35%, rgba(255, 207, 94, 0) 100%)

linearlinear-gradient(rgb(255, 255, 255) 41.35%, rgba(255, 255, 255, 0))

linearlinear-gradient(90deg, rgb(114, 50, 241) 3.13%, rgb(251, 118, 250) 50%, rgb(255, 207, 94))

radial

radial-gradient(103.12% 100% at 50% 100%, rgb(255, 165, 119) 0px, rgb(255, 144, 161) 15.52%, rgb(221, 173, 255) 30.09%, rgb(236, 216, 255) 45.72%, rgb(245, 234, 255) 54.96%, rgb(248, 250, 253) 88.16%)

radialradial-gradient(circle, rgb(247, 45, 243), rgb(83, 58, 253) 33%, rgb(229, 237, 245) 66%)

radialradial-gradient(circle, rgb(255, 173, 0), rgb(255, 118, 0) 33%, rgb(229, 237, 245) 66%)

linearlinear-gradient(68deg, rgba(83, 58, 253, 0.08) 0.78%, rgba(255, 140, 108, 0.8) 30.61%, rgba(218, 75, 254, 0.8) 79.02%)

Borders

1px solid #ffffff

1px solid #b9b9f9

1px solid #e5edf5

1px solid #d6d9fc

1px solid #e2e4ff

1px solid #4834db

Motion

800mscubic-bezier(0.165, 0.84, 0.44, 1)transform

100mssteps(1)z-index

300mscubic-bezier(0.25, 1, 0.5, 1)background-color

300mscubic-bezier(0.25, 1, 0.5, 1)color

300mscubic-bezier(0.25, 1, 0.5, 1)outline-color

300mscubic-bezier(0.25, 1, 0.5, 1)border

240mscubic-bezier(0.45, 0.05, 0.55, 0.95)color

240mscubic-bezier(0.45, 0.05, 0.55, 0.95)background-color

240mscubic-bezier(0.45, 0.05, 0.55, 0.95)border-color

800mscubic-bezier(0.165, 0.84, 0.44, 1)clip-path

1000mscubic-bezier(0.16, 1, 0.3, 1)transform

1200mscubic-bezier(0.65, 0, 0.35, 1)color

1200mscubic-bezier(0.65, 0, 0.35, 1)opacity

400mscubic-bezier(0.3, 0, 0.2, 1)background

Glassmorphism

blur(12px)

Surfaces

#ffffff

section

Layout

Container widths

958.642px1232px816px1349px

z-index ladder

123

Extracted from live CSS by Coherent (light mode). Numeric fields reflect the site at capture time; roles and the summary are inferred. Tokens and prose only — a description, not a copy.

Save stripe.md to your device

Open it on your desktop to run the CLI.