Landing page design

Landing Page Design

Marketing pages have a different job from product UI: guide someone to an action, not maximize information density. For the logged-in surface, use dashboard-design.

The two failure modes sit at opposite ends:

• Chaotic — too many components, crammed not crafted, everything competing
• Sterile — corporate AI mush, technically fine, completely forgettable

Somewhere along the way "modern" became a synonym for sterile. The goal is structure plus personality.

How landing pages differ from product UI

	Landing page	Dashboard
Type scale	Wide range, up to ~6 sizes	Compressed, rarely >24px
Grid	Guideline — routinely broken on purpose	Followed strictly
Motion	Expressive, storytelling	Tame, user-focused
Color	Brand-led, decorative allowed	Comes from the data
Success	Conversion	Task efficiency

Build pipeline

1. Structure before personality

The five-second test: if someone scrolled the page for five seconds, is it structured such that they'd understand the idea?

Wireframe it with the content removed. One version will have blocks of text, simple illustrations and bold numbers. The other will have text split into fragments, multiple popups, small ornamentation and complex shapes. You can tell instantly which is followable — and the complex one is not the sophisticated one.

Restraint in structure wins. A clear grid-driven layout with generous space around the text beats a busy one, and it isn't a function of having a simpler product — plenty of complex offerings have clear sites.

Say what the product is. A company name in the corner at 12px is not positioning. If a project management tool reads like a wellness retreat ad, the hierarchy is wrong: lead with the value, show the actual product.

2. Then add personality

Removing everything from a busy page doesn't make it clearer — it makes it empty. The elements were carrying context. Without reading a word, illustrations of money, an invoice and a coin tell you what the product is for.

The distinction is context vs. clutter, and it comes down to spacing:

• Maintain generous space around the text — that's what keeps supporting elements reading as context
• Draw the eye toward the center. Elements should trail off the further they get from it
• Know when to stop. There is a real line; one illustration too many crosses it, and you'll feel it before you can name it
• Since you're breaking the grid deliberately, be selective about arrangement. There's a lot of eyeballing — tilt something wrong and it just looks off

3. Pick a point on the spectrum

Commit to a position between playful and professional, and be consistent:

Vibe	Treatment
Playful	Blobs, bright colors, characters, neo-brutalist edges
Middle	Doodled illustrations, twinkles, tasteful scribbles
Professional	Realistic imagery, restrained palette, product screenshots

Then honor it everywhere — including the 404 page.

4. Motion that earns its place

Static is fine. But "just because things don't have to move doesn't mean they shouldn't."

The test for every animation: does it draw attention to the product, or to itself?

Good: an image that morphs and transitions into the next section as you scroll, deliberately pulling attention to the product and giving a first real look at it. Bad: complex animations that exist to be complex, making navigation harder.

See references/motion.md for the full catalogue — entrances, parallax, text animation, hover, scroll-triggered reveals.

5. Write like a person

Text is ~80% of most sites and it's usually the least considered part.

• "We sweat the details" beats "We take pride in our attention to detail"
• Natural language beats corporate jargon everywhere
• Friendly copy is a design decision, not a copywriting afterthought

6. Finish the edges

Design is often more about the things you don't see. The 404 page is the ultimate place to be quirky — the user literally doesn't belong there. Also: empty search results, form validation, the pricing page's fine print.

7. Audit

Run references/audit-checklist.md. Screenshot the page and grade it — balance, whitespace and unity can't be judged from source.

The critique vocabulary

Grade any page against these eight. They're the ingredients of "I know it when I see it" — detailed treatment in references/foundations.md.

Principle	Failing looks like
Contrast	No obvious focal point; everything competes equally
Hierarchy	Wordmark, tagline and section titles fight for the same attention
Alignment	Elements don't share edges or axes
Proximity	Related things not grouped; unrelated things jammed together
Repetition	Three type weights, two icon styles, four corner radii
Balance	Bottom-heavy or lopsided; one dense block dominates
Whitespace	Every pixel working; nothing breathes
Unity	Reads as a template with content poured in

Unity is what emerges when the other seven agree — if a page reads as generic, one of them is failing. Find which.

Reference files

• references/foundations.md — the eight principles, hierarchy, spacing, type, icons, shadows, overlays
• references/color.md — the four-layer color system, dark mode, semantic color, OKLCH for theming
• references/structure.md — section anatomy, hero, the five-second test, illustration placement, pricing, social proof
• references/motion.md — easing, entrances, parallax, text animation, scroll and hover, the unexpected
• references/reference-page.html — a working page implementing the system; read it when you need concrete structure rather than description
• references/audit-checklist.md — the full review rubric