Stripe style guide
A complete style guide inspired by the stripe design language. Use it with Windframe AI to generate pages, sections, and components for your own project that follow these same design principles, or start from one of the templates below and customize it in the editor.
HTML
React
Next.js
Vue
Nuxt
AngularSvelte
Astro
SolidJS
RailsDesign System
The Stripe design language
Conversion-focused interfaces built around Stripe's precise product language: lightweight Sohne typography, persistent grid rails, compact controls, vivid theme-derived accents, and disciplined light and pure-black dark surfaces.
Typography
Sohne Var
300 body; 400 headings
The quick brown fox
Design is not how it looks. Design is how it works.
Small body copy, clear and readable
Spacing
8px grid with persistent rails
40px content inset from outer rails, 64-80px dense gaps, 96-128px marketing gaps, and 20-32px card padding.
Border Radius
4-8px surfaces, pill conversion controls
rounded-[4px] / rounded-[6px] / rounded-full
Colors
Design paletteCanvas
Primary page and dark-mode canvas
Primary Text
Headings and primary UI text
Muted Text
Body copy and supporting labels
Primary Theme
Actions, links, focus, charts, and selected states
Quiet Surface
Grouped regions, inputs, and bounded controls
More pronounced swatches for quick light/dark comparison.
Shadows
Structure comes from rails, dividers, scale, and whitespace. Use broad soft shadows only on deliberately floating forms, comparisons, segmented navigation, or overlapping callouts.
Stripe in practice
Polished designs inspired by the best design systems
Companies like Linear, Notion, and Vercel invest heavily in their design systems. Windframe studies those systems and bakes their principles into styles you can use out of the box, so your project gets the same level of polish. These are some example images of UIs generated with this style.
Every component, every page: consistent by design. Browse all Stripe templates →
AI Playground
Build something new with the Stripe style
Describe any UI and Windframe generates it using the same Stripe design tokens shown above. Your output stays consistent with every template on this page.
Try an example:
Pre-built components and pages
Browse 14 production-ready templates built with Stripe design principles. Preview any template, export the code to your framework, or open it in the visual editor to customize.
Stripe Landing Page
Full Page
Hero Section
Hero
Features Section
Features
Call to Action Section
CTA
Stats Section
Stats
Content Section
Contents
Customer Stories Section
Blogs
Content Section 2
Contents
Testimonials Section
Testimonials
Content Section 3
Contents
Blog Section
Blogs
Content Section 4
Contents
Call to Action Section 2
CTA
Footer Section
Footer
Stripe Landing Page
Full Page
Features Section
Features
Stats Section
Stats
Customer Stories Section
Blogs
Testimonials Section
Testimonials
Blog Section
Blogs
Call to Action Section 2
CTA
Hero Section
Hero
Call to Action Section
CTA
Content Section
Contents
Content Section 2
Contents
Content Section 3
Contents
Content Section 4
Contents
Footer Section
Footer
Stripe Landing Page
Full Page
Call to Action Section
CTA
Customer Stories Section
Blogs
Content Section 3
Contents
Call to Action Section 2
CTA
Hero Section
Hero
Stats Section
Stats
Content Section 2
Contents
Blog Section
Blogs
Footer Section
Footer
Features Section
Features
Content Section
Contents
Testimonials Section
Testimonials
Content Section 4
Contents
Explore Styles
Windframe gives you more than one beautiful style
Pick another style below to preview its design language and templates.
Windframe
You have seen what a design style in Windframe can do. Now see everything Windframe can do.
Windframe brings the full workflow into one platform: generate with AI, edit visually, test responsiveness, reuse templates, and export clean code to your framework. It is built to help teams ship polished UI faster, from first prompt to production.
15,000+ developersAI generation with real design systems
Describe any component and get polished, production-ready Tailwind CSS that follows actual design rules, not generic output.
Visual drag-and-drop editor
Fine-tune any component without touching code. Move elements, adjust spacing, swap colors, all visually in real time.
Live preview at every breakpoint
See exactly how your UI looks on mobile, tablet, and desktop before you ship a single line.
Export to 10+ frameworks
React, Next.js, Vue, Nuxt, Svelte, Angular, HTML and more. Clean Tailwind code ready to drop straight into your project.
1,000+ ready-made templates
Browse polished pages, sections, and components across multiple styles. Use them as-is or as a starting point.
Multiple beautiful styles
Linear precision, Notion clarity, Apple polish, Stripe structure and more. Each is a complete design system, not just a color swap.