Stripe Homepage in Sketch
Last Updated on August 11, 2026 by Editorial Team
The amazing design of Stripe’s homepage, crafted in Sketch App by Andrew Eddy. Many thanks to the author for sharing this freebie.
What makes this Stripe homepage recreation worth studying is how much restraint is built into it.
The diagonal blue-to-teal gradient at the top gives the page a sense of motion without a single icon or illustration doing the heavy lifting.
Everything below that hero section shifts to a clean white canvas, letting product screenshots from companies like DigitalOcean, Postmates, and Asana carry the visual weight instead.
That contrast between a bold gradient header and a quiet, content-first body is the real lesson here for anyone designing a SaaS or fintech landing page.
Typography stays minimal throughout: a short headline, a tight paragraph of supporting copy, and two clearly weighted buttons, one solid green, one outlined white.
This is the kind of hierarchy that works well for products with a technical audience, where founders and developers want to scan quickly rather than read marketing fluff.
If you’re building a homepage for a payments platform, developer tool, or B2B SaaS product, this Sketch file gives you a proven structural pattern rather than a blank canvas.
Adapting the Gradient Hero Section
The diagonal gradient band is the signature element of this design, and it’s worth treating carefully if you rework it.
Start by isolating the gradient shape as its own layer so you can swap colors without disturbing the text or navigation sitting on top.
Try shifting the hue while keeping the same diagonal angle and saturation level; a purple-to-pink or teal-to-green version can carry the same energy for a different brand.
Keep the overlaid navigation and headline text in a color with enough contrast against the gradient, since that’s what keeps the hero readable at a glance.
The floating device mockups tucked into the corner of the hero are a nice touch worth preserving even if you change the color scheme, since they anchor the abstract gradient to something concrete.
Reworking the Product Showcase Grid
Below the fold, the layout settles into a two-column arrangement: a short pitch on the left, paired screenshots on the right.
This is an easy section to repurpose for your own case studies or client logos.
Swap in your own app screenshots at the same aspect ratio, and keep the drop shadows subtle so the images feel like they’re resting on the page rather than pasted onto it.
The small green icon badge next to the subheading is a simple detail that helps break up long stretches of white space, and it’s an easy element to recolor to match a new brand palette.
Because the whole file is built around a real, well-tested product page, it also works nicely as a teaching reference.
Designers new to SaaS layouts can pull it apart to see how spacing, button hierarchy, and copy length were balanced on an actual high-traffic site, rather than guessing at proportions from scratch.
Pair it with a simple icon set or a UI kit for form elements if you’re extending it into a full multi-page site, such as pricing or documentation screens that need to match the same visual tone.
