Design Promo — Landing Pages
A subtype lens for design-core. Load this after design-core has run its three entry steps and confirmed the goal is sale, signup, or conversion.
This file does not redefine the eight elements, the four layers, the two modes, or the two phases. It only adds what is specific to landing pages.
Focus
The first screen is a promise: what this is, who it's for, why it matters — understood within 3 seconds. Everything below the first screen is proof and path. The gaze moves promise → proof → action.
Marketing leads by default when the goal is sale. See design-core/references/marketing.md. Air serves focus, not beauty.
Typical failures
- Multiple equal CTAs. The eye doesn't know where to go. Fix: one primary, everything else visibly subordinate.
- First screen about the company, not the visitor. "We are..." instead of "You get...". Fix: rewrite from the visitor's side.
- Proof buried at the bottom. Trust must appear where hesitation appears, not after it.
- Broken mobile. Landing pages are read on phones first. A desktop-first hero fails on arrival.
- Decorative hero. A beautiful image that promises nothing. Fix: make the hero carry the promise, not sit behind it.
Layer-by-layer
Frame (composition, space). The composition follows the gaze path — Z or F, chosen deliberately. Space groups blocks: tight space clusters related ideas, wide space separates them. The first screen owns the strongest composition on the page.
Body (form, color). Color carries trust or energy depending on the subject. Button forms are large and obvious — primary button visibly dominates secondary. One accent color, used almost exclusively for the primary CTA.
Surface (texture, typography). Typography is readable, not decorative. The headline is a real headline, not a slogan in display weight. Body text stays plain so proof (numbers, testimonials) can be scanned.
Accent (point, line). Icons and dividers support comprehension, not fill space. Every icon earns its place by helping the visitor understand something faster.
Reading order
The landing page has one reading order and it does not vary by taste:
- Promise (first screen)
- Proof (why you can be trusted)
- Path (the one action)
If the composition puts anything else in the top 3, revise it.
Audit specifics
Beyond the common grid, these are the landing-page breakages to hunt:
- Space → Frame → the hero asks for attention in six places (headline, subhead, two CTAs, image, logos) → one job per hero; the promise owns it.
- Typography → Surface → the headline is a slogan about the company, not a promise to the visitor → rewrite from the visitor's side (see
design-core/references/copy.md). - Point → Accent → icons decorate instead of explain → remove every non-functional icon.
- Color → Body → accent spread across links, badges, and borders erases the CTA → accent belongs to the primary action.
- Line → Frame → proof buried below trust-breaking sections → where hesitation starts, proof answers.
Return to core
For the method (three entry steps, modes, phases, error handling), see design-core/SKILL.md. For the marketing filter, see design-core/references/marketing.md. For the layers protocol, see design-core/references/layers.md.
