Design teardown
Stripe
Editorial scale on a light page. Navy text, a rare blurple, and room to breathe.
stripe.com
Design character
A printed page that learned product design
Stripe’s marketing site is light, confident, and typographically large. Text is a deep navy rather than black, which keeps the page from feeling like default CSS. The famous gradient lives in illustration. The interface itself is restrained: white surfaces, one blurple for action, and soft depth only when something floats.
Typography
A custom grotesque (Söhne) does both jobs: huge tightly leaded headlines and a modest, highly readable body. The jump in size is the drama. Weight stays medium. Italic is rare.
Color system
White and a cool off-white do most of the work. Navy carries text. Blurple is the action color. Cyan, pink, and violet appear in gradients and diagrams, then leave the components alone.
Spacing and geometry
The page is spacious on purpose. Components are comfortable, and the distance between sections is what makes the big type feel expensive rather than loud.
Layout
A centered column, often narrower than the illustrations around it. Headlines can run long. Sections alternate white and cool gray. Alignment is mostly left, with the hero sometimes optically centered.
Motion
Motion is smooth and a little luxurious, mostly in illustrated diagrams and in the way sections settle. Controls themselves are simple.
UI fingerprint
- Headlines are enormous and tightly leaded. Body copy stays modest. The scale jump is the design. A 72px headline with line-height near 1, followed by 18px body, feels editorial. Equalizing those sizes would flatten the page into a template.
- Text is navy, not black. Pure black on white would feel harsher and more generic. The navy (#0a2540) is doing brand work without a logo in every section.
- Blurple is for action and diagrams. It does not wash the page. The gradient language is famous, and it stays in pictures. Buttons get a flat blurple. Using the gradient as a background behind type would turn this into a different, louder product.
- Primary controls are pills, with soft shadow only when something floats. The pill is a Stripe tell. Cards that float earn a wide, low-opacity shadow. Everything else sits flat on white or on the cool gray band.
- Sections breathe. Density lives inside a component, never across the page. Large gaps are not empty space to fill. They are how the big type stays legible and how each idea gets a clean start.