Edd free Sketch landing page template

Last Updated on July 7, 2026 by Editorial Team

Edd is a beautiful landing page designed by Alan Podemski and targeted for showcasing apps or digital products. Clean, modern and colorful and design, in the gorgeous style of Stripe’s redesign.

The Visual Language Behind Edd’s Design

What makes Edd stand out is the wave-shaped gradient band that runs through the middle of the page. Instead of a flat hero background or a plain divider, the gradient dips and curves like a ribbon, moving through teal, purple, pink, and coral. This single element does a lot of visual work: it separates the hero from the content below, adds energy to an otherwise minimal layout, and gives the whole page a sense of movement without any actual animation.

The rest of the page stays deliberately quiet so that gradient can shine. White space dominates, text is centered and restrained, and the dark code editor mockups provide a strong tonal contrast against the light background. That contrast between soft pastel gradients and near-black UI panels is the core visual trick of this template, and it is worth studying if you want to recreate a similar effect elsewhere.

Where This Template Fits Best

Edd was clearly built with a code editor or developer tool in mind, given the syntax-highlighted screens and callouts like “Code Completion” and “Organized assets.” But the underlying structure works for any product that benefits from a bold, colorful introduction followed by calm, detailed feature sections. Consider it for:

• Developer tools, IDEs, and productivity software
• SaaS dashboards or admin products that want to feel approachable rather than corporate
• App landing pages that need a strong first impression above the fold
• Portfolio case studies for a single flagship product

The layout also includes a logo strip near the bottom, featuring recognizable brand marks, which suggests this template is well suited for products that want to lead with credibility and social proof before asking for a signup.

Adapting the Gradient Wave to Your Own Brand

The colorful wave shape is the centerpiece, so if you plan to reuse this template for a different product, start there. In most vector editors you can select the wave shape as a path and edit its gradient stops directly, swapping in your own brand colors while keeping the same curve and blend direction. A few tips for keeping it cohesive:

• Keep at least three color stops so the transition still feels smooth rather than a simple two-color fade.
• Match the saturation level of the original if you want the same soft, glowing quality; overly saturated stops can make the wave feel harsh against the white background.
• Adjust the dark screenshots to sit comfortably on top of your new palette. Since the mockups use a near-black background, most gradient colors will still read well behind them.

If you swap out the code editor screenshots for your own product UI, try to keep the same dark theme for those panels. It preserves the contrast effect that makes the layout pop, and it keeps the floating circular accents and soft shadow details from feeling out of place.

Working With the Layered Mockup Sections

Edd uses stacked, overlapping screenshots rather than a single large hero image. This layered approach, seen in the second column of screens showing sidebar file trees and code completion popups, is a good pattern to borrow for any product with multiple key features. When adapting it:

• Group each mockup with its own caption and short description as a single unit before you start repositioning things, so labels do not become disconnected from their screenshots.
• Keep consistent spacing between overlapping panels. In the original, the offset between stacked screens is fairly small, which keeps the composition tight rather than scattered.
• Use the soft pastel circles as connective tissue between sections rather than as standalone decoration. They help guide the eye from one screenshot cluster to the next.

Typography and Copy Tone

The headline treatment in Edd is short and confident: a big centered statement followed by a single supporting line and one clear call-to-action button. This structure works because it does not compete with the busy gradient behind it. When writing your own copy for this layout, aim for:

• A headline under seven words, since longer text can crowd the hero area
• One supporting sentence that explains the core benefit, not a full feature list
• A single, unambiguous button label rather than multiple competing calls to action

Lower on the page, the tone shifts to short section titles paired with a sentence or two of body copy, mirroring how the feature callouts describe things like organized assets and code completion. Keep that same rhythm if you extend the page with more sections: a short bold title, a calm one-line description, and a supporting visual.

Quick Questions About Using Edd

Does this template only work for developer-focused products?
No. The gradient wave and layout structure are generic enough to support any product story, as long as you can supply your own screenshots or mockups to replace the code editor panels.

Can I use a different color palette?
Yes. The wave gradient is the most flexible part of the design. Changing its colors is usually enough to make the template feel like a different brand entirely, even if you keep everything else the same.

What if I only have one product screenshot instead of several?
Simplify the layered mockup section into a single centered screenshot beneath the hero, and keep the logo strip and closing signup section as they are. The page will still read as complete.