Aesthetic

Stripe templates

Palette

The Stripe aesthetic

Stripe's design language communicates trust and precision through surgical accent colors on a high-contrast neutral foundation. Indigo-violet (#635BFF) primary on cool off-white, Inter for interface copy and JetBrains Mono for data — every spacing decision earns its place. The restrained palette and monospace data layer make it ideal for SaaS products, developer tools, and financial applications where clarity signals credibility.

Every Stripe product line

Landing Page Template

Standalone Next.js 15 + Tailwind v4 landing-page project. Edit `content/site.ts`, deploy to Vercel in one click.

View landing page template

AI-Coder Vibe Pack

Tokens, Tailwind preset, system-prompt for Claude/Cursor/v0, and reference screenshots — drop the vibe into any AI-coder workflow.

View ai-coder vibe pack

Editor Theme

VS Code + Cursor + terminal color schemes (Warp / iTerm / Ghostty) generated from the same theme tokens.

View editor theme

Portfolio Template

Standalone Next.js 15 portfolio site — Hero, project grid, skills, case study, testimonials, contact. Edit `content/portfolio.ts` to make it yours.

View portfolio template

Dashboard Template

Full 4-route analytics SaaS shell — Sidebar, TopBar, Recharts charts, user table, settings form. Edit `content/dashboard.ts` to make it yours.

View dashboard template

Email Templates

7 themed HTML emails per pack — welcome, receipt, password-reset, newsletter, re-engagement, and 2-part drip. Pre-compiled to inbox-safe HTML, ready to paste into Mailchimp, Resend, Loops, or any provider.

View email templates

Billing Templates

5 print-ready HTML documents per theme — invoice, quote, receipt, credit note, payment reminder. A4 print-CSS, Handlebars placeholders, ready to plug into Stripe Invoice Templates, Lexoffice, sevDesk, or any Puppeteer/Playwright PDF pipeline.

View billing templates

Questions

What's included in a Stripe template?

Each Stripe template is a production React + Tailwind CSS v4 build driven by the Stripe design tokens — palette, typography, radius, and spacing. You get full source with dark-mode support, ready to drop in or lift the tokens into an existing project.

Is the code copy-paste ready?

Yes. Every template is real, copy-pasteable React + Tailwind code — not a Figma mockup or a screenshot. Live demos render the actual output.

Can I use it commercially?

Yes — unlimited personal and commercial use, for you and your clients. No attribution required.