Skip to content
Kit

Marketing / Landing Site

A site that has to persuade in one scroll — with signature moments that earn their weight.

For the page that has to do persuasion in one scroll. Ten skills, and the shape differs from the product kits in one specific way: it has a Signature Moments phase, because a landing page is one of the few places where an expressive flourish is the right call rather than a distraction.

That phase comes with a warning built into the ordering. It sits after motion principles, not before, so the frequency gate and the context weighting get applied first — a falling-leaves field or a live landscape should be a decision you made, not a thing you added because it was available. One signature moment per page is usually right. Two is usually one too many.

The pre-ship phase is shorter than the full-redesign kit’s, and deliberately so: there’s no mobile-review skill here. Not because marketing pages don’t need mobile work — they need it badly — but because a landing page’s mobile problems are usually design problems (what earns the first screen), which the build phase already covers. If your marketing site has real app-like surfaces, reach for the Mobile-First Review kit alongside this one.

01 · Brand foundation

Brand Guidelines

A landing page is the brand's loudest surface; the rules have to exist before the hero does.

Frontend Design

Names a direction and self-critiques against the defaults every AI-built landing page collapses toward.

02 · Build

Make Interfaces Feel Better

The small physical details that make a page feel expensive rather than assembled.

03 · Motion & storytelling

Design Motion Principles

A marketing page is the rare context where expressive motion is correct — this decides where, and how much.

Scroll-Scrubbed Visual Sequence

The Apple-style product story, built as a reversible instrument driven by native scroll rather than a hijacked one.

04 · Signature moments

Falling Leaves

Ambient motion that reads as the real thing rather than confetti — for one atmospheric section, not the whole page.

Three.js Landscape

A live backdrop designed to put the subject somewhere and then get out of the way.

05 · Pre-ship

Better Writing

Marketing copy is the product here; verb-first CTAs and plain claims beat clever every time.

Better Accessibility

Heavy motion and full-bleed art are exactly where keyboard paths and reduced-motion support get dropped.

Artifacts