Updated July 2026 · principles, not a gallery
Coming soon page design: the rules, then the page, in ten minutes
Inspiration galleries show you a hundred pretty pages and leave you exactly where you started. This does the opposite: the small set of design decisions that actually move a pre-launch page — anatomy, hierarchy, contrast, one action — each written so you can apply it in the builder immediately. Every palette below is a real, contrast-checked set of hex values you can paste straight in.
One number frames the whole thing: body and label text should clear 4.5:1 contrast against its background (WCAG AA), large headings 3:1. Most good-looking coming soon pages that convert badly fail here — pale grey on white looks refined and reads like a blur on a phone in daylight.
Anatomy of a page that converts
Five parts, in this vertical order. That order is the design — the eye should land on the headline, drop to the countdown, and stop at the email field, in that sequence, without a decision to make.
- 1
Hero headline · the promise
One line that names the thing and why to care. Big enough to be the first thing read, benefit before brand. If someone reads only this, they should know what they’re waiting for.
- 2
One-line subhead · the terms
The two facts the headline can’t carry: when it opens, and what happens if you leave your email. “We open 1 September — leave your address and we email once, at launch.” That’s the whole job.
- 3
Countdown · the urgency
A real date, ticking. It turns a vague “soon” into a reason to act now and a reason to come back. Skip it entirely if the date might move — a wrong clock is worse than none.
- 4
One email field + button · the single action
Exactly one input and one button. Every extra field (name, company, phone) measurably lowers completion. You can ask for more after they’ve said yes, never before.
- 5
A sliver of proof · the reassurance
One honest signal: a real logo you’ve worked with, a count of people already waiting, or a single line about who’s building it. One is enough; a wall of badges reads as trying too hard.
Five principles, each with a do and a don’t
Not abstract theory — every one maps to a single control in the builder. The “apply it” line is the exact move.
Visual hierarchy: one thing is biggest, on purpose
The eye needs a path. Headline largest, subhead clearly smaller, everything else quieter still. When three elements shout at the same size, the visitor picks none of them.
DoMake the headline 2–3× the body size and give the email field the only bright colour on the page.
Don’tGive the logo, headline and a stock photo equal visual weight so nothing leads.
Apply it: Set a large heading and put your brand hex only on the button — the accent field does this in one move.
Contrast: readable beats tasteful
Text must clear 4.5:1 against its background (3:1 for large headings). Low-contrast grey-on-white photographs well and fails on a phone outdoors — where a lot of your traffic actually is.
DoPick a background/text pair that passes AA, then check the button label against the accent too.
Don’tUse a pale grey subhead on white because it “looks premium” — it reads as a blur.
Apply it: Start from a contrast-checked palette below; the light templates like Lumen are built to pass with room to spare.
One action, nothing competing
A coming soon page has exactly one job: capture the email. Every other link — social icons, a nav bar, “learn more” — is an exit. The highest-converting pages have no way off them but the form.
DoMake the email field the only interactive element above the fold.
Don’tAdd a full navigation, three social buttons and a “read our story” link that all lead away.
Apply it: Choose a template with a single form and resist adding a nav — you don’t have other pages yet anyway.
Mobile-first: design the phone view, scale up
Most pre-launch traffic arrives from a phone — a link in a DM, a bio, a story. If the countdown wraps, the headline is four lines, or the button sits below the fold on a small screen, that’s the version most people see.
DoCheck the page on a narrow viewport first: headline two lines max, button visible without scrolling.
Don’tPerfect it on a wide monitor and assume the phone “will be fine”.
Apply it: Every template here is responsive by default — preview the live demo on your own phone before you share the link.
One idea does the explaining
You have seconds and one screen. Either one strong visual carries the mood, or one sharp sentence does — not both fighting, and never a paragraph. Dropbox used a single demo video; a plain page with a great headline beats a busy one with a weak idea.
DoPick the single strongest element you have — a line, an image, or a colour — and let the rest be quiet.
Don’tFill the space with a hero image, a paragraph, three features and a testimonial before launch.
Apply it: Use the Minimal or Mono template when you have no assets yet — restraint reads as confidence.
Copy-paste palettes (contrast-checked)
Three hex values is a whole coming soon page: background, text, accent. These are the real palettes behind the site’s templates — each one already balanced so text clears AA on its background. Click a swatch column to open that template in the builder.
Lumen
White page, blue button, 17.85:1. The one that just works.
- bg
- #FFFFFF
- text
- #0F172A
- accent
- #2563EB
Minimal
Dark navy, one violet accent, nothing else. The safe default.
- bg
- #1A1B2E
- text
- #FFFFFF
- accent
- #7C5CFC
Ocean
Deep blue with a cyan accent. The default look of software.
- bg
- #0A1628
- text
- #E0F2FE
- accent
- #38BDF8
Sunrise
Warm off-white and burnt orange. Reads friendly, not corporate.
- bg
- #FFF5F0
- text
- #2D1B0E
- accent
- #FF6B35
Paper
Off-white stock, serif headline, amber rule. Looks printed.
- bg
- #FAF7F2
- text
- #1C1917
- accent
- #B45309
Midnight
Near-black, one red. Built for a date and a door.
- bg
- #050505
- text
- #FAFAFA
- accent
- #E11D48
Why these and not a random generator: an accent that fails contrast as a button label is the most common palette bug on launch pages. A saturated mid-tone like coral or amber can look great as a fill and be unreadable with white text on it. Pick a background/text pair first, then choose an accent that survives as a button — the templates above have already made that trade.
Typography pairings that need no thought
A coming soon page has one headline and one line of body — you don’t need a type system, you need one pairing that doesn’t fight itself. Each of these is a single Google Font used for both, or two that are known to sit well together. All load fast.
| Headline | Body | Reads as | Good for |
|---|---|---|---|
| Space Grotesk | Inter | Technical, current | App / SaaS waitlists |
| Playfair Display | Inter | Editorial, premium | Fashion, beauty, print-feel brands |
| Poppins | Poppins | Friendly, rounded | Consumer products, community |
| DM Sans | DM Sans | Calm, neutral | When in doubt — the safe default |
| Montserrat | Inter | Confident, geometric | Agencies, events, launches |
| Outfit | Outfit | Clean, modern | Light, minimal layouts |
Rule of thumb behind the table: pairing a font with itself (one weight bold for the headline, one regular for the body) never clashes and is the safest choice when you’re not sure. Only reach for two faces when the headline face is a display type that would be tiring to read at body size — Playfair, for instance.
Five design mistakes that quietly cost signups
None of these break the page. It renders, it looks designed, and it converts worse than a plain one would.
✕ More than one form field
Name, company, phone “while we’re at it” — each one drops completion. Before launch you need the email and nothing else. Ask for the rest once they’ve already said yes.
✕ No reason to sign up
A bare “Coming soon” with a field gives no incentive. Say what they get for their address: first access, a launch discount, a spot in line. The value is the whole pitch.
✕ A fake or resettable countdown
A timer that restarts on refresh, or that you quietly extend, is the fastest way to lose the exact people who trusted the date. If it’s not real, don’t show one.
✕ Low-contrast “designer” text
Pale grey on white, thin weights, tiny labels. Elegant on your Retina display, unreadable on a phone in sunlight — which is where most of the traffic is.
✕ Exits everywhere
A nav bar, social icons and “learn more” links all lead away from the one thing you want. On a launch page, every link that isn’t the form is a leak.
Want to see these principles applied to pages real companies shipped? The teardown of 11 real launches annotates the headline, layout and colour decision behind each one — the same anatomy above, in the wild.
Coming soon page design questions
What makes a coming soon page design convert?
A clear hierarchy (one element is obviously biggest), text that clears 4.5:1 contrast, a single email field with a reason to fill it, and no exits competing with that form. The mechanic beats the decoration — a plain page with a strong headline and one clear action out-converts a beautiful one that asks for three fields and links away five times.
How many fields should the signup form have?
One: the email address. Every additional field measurably lowers completion, and before launch you have no use for a name or phone number yet. Collect the minimum now and enrich later, once the person has already opted in. If you truly need a name, that’s the absolute ceiling — never three fields on a pre-launch page.
What colours work best for a coming soon page?
It’s less about the specific colour and more about the pairing passing contrast. Pick a background and text colour that clear WCAG AA (4.5:1), then choose one accent that still reads as a button label. Dark backgrounds with a single bright accent are the safe default when you have no brand yet — they hide the absence of a logo and photos. The palettes on this page are all real, contrast-checked sets you can paste in.
Should a coming soon page have a countdown timer?
Only if the date is real and fixed. A countdown turns “soon” into urgency and a reason to return — but it ticks to zero in front of the people who trusted it, so a date you might move is worse than no timer at all. If the launch is genuinely uncertain, design the page without one; several templates ship with the countdown switched off for exactly this reason.
Do I need a designer to make one?
No — a coming soon page is one screen with one job, which is why a set of rules plus a checked palette gets you further than a blank canvas would. Start from a template that already follows the hierarchy, contrast and single-action principles here, change the headline, colour and date, and you have a designed page in minutes without opening a design tool.
Now build the page these rules describe
Every principle here is a control in the builder — paste a palette, set one headline, one email field, one date. Publish it on a real URL in a click, or start from a template that already follows the rules.
Free plan: 3 pages, 100 leads, no card.