Product launch page

A product launch page has one job: turn a warm click from a launch email or a press mention into a signup or a demo request. Everything else is negotiable. The mockup below is a portfolio exercise for a fictional workflow tool called Levers, and the commentary is the set of decisions I keep coming back to when I build real launch pages.

Above the fold

The hero commits early. The headline finishes in two lines, both left-aligned at the same size, and the subhead runs two short lines under it so the eye lands on the primary CTA without any scrolling. The CTA is filled black on cream because the rest of the page uses almost no black, so the button becomes the loudest object on screen. The secondary "Book a demo" sits next to it as an outlined ghost so booking is present but never competes with the trial signup for visual weight.

The product visual on the right is a snapshot of the first screen a new user sees inside the app. Not a stylized abstraction, not a floating device shot. If the marketing screenshot and the real interface look nothing alike, the signup-to-first-value moment feels like a bait and switch. I show a live-looking snapshot and trust the reader to recognize it once they are inside.

Social proof placement

The logo strip sits between the hero and the feature grid because that is exactly when the first flicker of doubt shows up. The eyebrow above it reads "Trusted by teams at" instead of a quote. Long testimonials get more room lower on the page where a full paragraph can breathe. Above the fold, I want the reader to register recognizable brand shapes in peripheral vision, not read a review.

Below this section (not shown in the crop) sits a single testimonial band with a large photo, a two-sentence quote, and a title. One person, not a wall. If I need three quotes to make the case, the case is not strong enough.

The feature grid

Three tiles, not six. Every launch page I have watched analytics on tells the same story: readers scan three, tap a CTA, or leave. Six tiles get skimmed at the same rate as three and dilute what the product actually does. Each tile leads with a verb ("Plan the release," "Coordinate the team," "Report the outcome") and then explains in one sentence. The icon is a single filled shape in the same warm gold so the row reads as one system rather than three separate features.

The conversion path

There are three CTAs on the full page: hero, mid-page, and footer. Same label, same colour, same size. Analytics on real launches usually show the mid-page CTA doing the heaviest lifting because that is where a scanner has finally read enough to convert. Keeping the copy identical across all three makes the click feel like the same action every time, which lowers the mental cost of tapping it.

Design decisions

• Cream, not white. Warm off-white background (#faf8f2) reads as considered rather than templated. Pure white on a launch page looks like a Figma export.
• One accent colour. Gold reserved for a single tile in the hero product visual and for feature icons. Every other decorative element stays neutral so the accent has meaning.
• Type scale that snaps. Hero at 32, section headings at 22, body at 14. Three sizes for the whole page. Consistency does more for perceived quality than a clever font pairing.
• Copy that matches the product. The headline names the tension the buyer feels ("spreadsheet") in plain language. No metaphors, no product-marketing abstractions.

The stack

Platform

Next.js on Vercel with MDX for the launch post itself.

Design tools

Figma for layout, Rive for a hero micro-interaction.

Front-end

React, Tailwind, GSAP for scroll pinning on the feature grid.

Instrumentation

PostHog for funnels, Plausible for aggregate traffic.