Documentation Is the Marketing
The hero puts a working code sample beside the headline instead of a stock photo. Showing the API in the first screen tells a developer the product is real — and it converts better than any adjective.
Stripe-Style Website Design System
Use a fintech page brief that reads like infrastructure: a slate navy hero cut by an angled gradient, one Blurple for every action, slate body copy and a code sample beside the headline. Copy the prompt, then open MeDo to build it.
Prepare a Stripe-Style Page Prompt
Edit the prompt here, then copy it into the tool you use.
Start with a proven prompt
Stripe's Design Tokens, In One File
Colors, type scale, button variants, layout rhythm and motion — read as tokens, then copy the whole DESIGN.md.
01 — Color Palette
One Blurple. Navy Instead of Black.
The palette is cool all the way through: slate navy replaces black, off-white leans blue, and a single Blurple carries every action. Gradients appear only behind the hero.
Brand & Accent
primary (Blurple)
#635bff
Every primary action and inline product link.
primary-hover
#7a73ff
Hover state — lighten, never darken.
accent-cyan
#00d4ff
Gradient stop and data highlights.
accent-mint
#00d924
Success states and live-mode badges.
Surface
canvas
#ffffff
Default page surface for docs and body sections.
canvas-wash
#f6f9fc
The cool off-white behind cards and alternating bands.
surface-navy
#0a2540
Hero canvas and footer — the signature slate navy.
surface-code
#0d1b2a
Inline code panels and terminal blocks.
Text & Hairlines
ink
#0a2540
All headlines and strong copy on light surfaces.
ink-muted
#425466
Body copy — the slate that keeps long text readable.
ink-subtle
#8792a2
Captions, table labels, eyebrow text.
body-on-dark
#adbdcc
Secondary copy on the navy hero.
hairline
#e3e8ee
1px card borders and table dividers.
Stripe's Design Aesthetic
Stripe's website language is engineered restraint: navy where other sites use black, slate where they use gray, one Blurple reserved for action, and a code sample given the same billing as the headline. These principles come from publicly observable patterns on stripe.com — not from copying any single page.
Navy Instead of Black
Every dark surface is slate navy, every off-white leans cool, and body copy sits in slate rather than black. The palette reads technical and calm, so one saturated Blurple can own every action on the page.
Depth Through Angles and Shadow
A diagonal clip-path cuts the hero into the next band, and product cards float on a wide, soft shadow. Motion stays under 240ms — the page feels engineered, never animated.
What to Build With the Stripe-Style System
The style rewards products where trust and technical proof do the selling — describe your own page in a focused prompt.
Fintech and Payments Landing Pages
The style was built for money products: a navy hero, a floating checkout card and a code sample that proves the integration is three lines long.
API and Developer Platform Pages
Put the request and response side by side in the hero, then let a three-up product grid explain the rest of the platform. Developers read code before copy.
SaaS Pricing and Plan Pages
Cool off-white bands, hairline tables and Blurple pills make a pricing page feel trustworthy — which matters more than clever wording when a card number is involved.
Docs and Quickstart Front Doors
An 1080px measure, 18px slate body copy and monospace treated as first-class content give documentation entry pages a readable, official feel.
Restyling a Page You Already Have
Describe the structure of your current page in a prompt, then ask MeDo to rebuild it on the Stripe-style palette and spacing scale.
Investor and Launch Announcements
One angled gradient band, one metric row and one action. The restraint reads as a company that already has customers.
How to Use a Website Style Prompt
From a style brief to a working page in MeDo in about four steps.
Write a Style Prompt
Describe the fintech or API page you want, then copy the brief into MeDo. (~15s)
Shape the Structure
Use the prompt to specify the layout skeleton — nav, hero, product grid, pricing, docs links and footer — with your own copy, images and logos. (~30s)
Apply the Stripe-Style Tokens
Your page is rebuilt on the Blurple palette, slate navy surfaces, angled dividers, card shadows and 240ms motion documented above. (~1min)
Build in MeDo
Open MeDo with the copied brief and continue the real build there. (~2min)
Explore More Website Style Systems
Same tokens-first approach, different visual language.
Apple-Style Minimal
Oversized display type, grayscale palette with one accent, huge whitespace and quiet scroll reveals.
Notion-Style Warm Productivity
Cream canvas, serif marketing headlines, pastel tag tints and a 708px document measure.
Coming soon
Developer Tool Dark
Near-black canvas, sharp small type, gradient glow, tight product grid. For infra and dev tools.
Coming soon
High-Contrast Mono
Pure black, geometric sans, monospace labels, terminal panels. For deploy and platform products.
Stripe-Style Website FAQ
It is a fintech and developer-platform layout language: a slate navy hero cut by an angled mesh gradient, one saturated Blurple reserved for actions, slate body copy at 18px instead of black, floating white cards on a wide soft shadow, an uppercase accent eyebrow opening every section, and a real code sample treated as hero content rather than decoration.
Take a Stripe-Style Prompt Into MeDo
Copy a Stripe-style prompt, then open MeDo to build the page with the main app's real generation flow.
Disclaimer: MeDo is an independent product and is not affiliated with, endorsed by or sponsored by Stripe, Inc. “Stripe-style” here describes a general design approach — palette direction, spacing rhythm and typographic scale. All previews on this page use the fictional brand “Atlas” and contain no Stripe trademarks, product names or assets. Do not reproduce another company’s trademarks, imagery or marketing copy in pages you publish.