---
name: Landing Page (Figma)
description: Marketing landing page on a responsive web canvas — hero, value props, social proof, pricing teaser, CTA. One page, one conversion goal.
triggers:
  - landing page
  - marketing page
  - saas landing
  - product page
  - homepage
  - website landing
cd:
  mode: page
  platform: figma-responsive
  scenario: marketing
  preview: figma_frames
  fidelity: high
  speaker_notes: false
  animations: false
  featured: true
  design_system:
    requires: true
    sections: [palette, type, spacing, components]
  craft:
    requires:
      - typography
      - typography-hierarchy-editorial
      - color
      - anti-ai-slop
      - accessibility-baseline
      - laws-of-ux
  inputs:
    - product (one-line)
    - audience (who it's for — concrete, not "everyone")
    - primary CTA (single verb — "Start free trial", "Book a demo")
    - social proof available (logos / testimonials / numbers)
  parameters:
    - canvas (default desktop 1440; also emit 375 mobile)
    - sections (default 5 — hero, value, social proof, feature detail, CTA)
  outputs:
    primary: figma_frames
    capabilities_required:
      - figma_execute
  default_for:
    - landing-page
    - marketing-page
  example_prompt: "Landing page for a usage-based observability tool, DevOps audience, one CTA 'Start free trial'"
---

## One page, one goal

A landing page has exactly one conversion goal. Before composing, name it aloud — "Get visitor to click Start free trial". Every section either (a) earns trust toward that goal or (b) gets cut. A landing page is not a product tour.

## Section rhythm

Five sections is the mature default. More is usually churn, not substance.

1. **Hero** — headline (value-specific, not tagline-generic), sub (one sentence), primary CTA, secondary weak CTA ("See how it works" scroll, or docs link). Optional single visual or screenshot — not a stock illustration.
2. **Value props / outcomes** — 3 items maximum. Each: a short verb-led title + 1–2 sentences. No icons unless they carry meaning; avoid emoji icons entirely.
3. **Social proof** — one of: 4–6 customer logos in a muted row, OR one sharp testimonial with name/role/company, OR one credible number with a labelled source. Pick one, not all three stacked.
4. **Feature detail or "how it works"** — split layout: left text, right screenshot OR three-step diagram. Use real product language.
5. **Final CTA** — repeat the hero CTA, bigger, with a reassurance line ("Free forever for solo devs.") underneath.

Pricing teaser, FAQ, or footer nav are additive — only include if the brief calls for them.

## Canvas

- Desktop: 1440 wide, content max-width 1200, outer margin 120.
- Mobile: 375 wide, outer margin 20, content stacks vertically.
- Emit both canvases side-by-side in the Figma file. Don't promise responsive without rendering at least the mobile pass.

## Hero discipline

The hero is 60% of the page's job. Get these three right and the page works:

- **Headline**: specific, outcome-shaped. "Ship 40% fewer bugs" beats "Modern observability for modern teams". If the claim needs a number, the number must be real.
- **Sub-headline**: one sentence, ≤ 20 words, answers "so what?".
- **CTA**: one primary button, accent-colored, verb-led. The secondary is a link, not a second button fighting for attention.

No two-stop gradient background behind the hero. A flat surface with intentional type is the restrained move.

## Palette discipline

- `color.bg` across the page. Alternate `color.surface` for every other section only if you genuinely need the visual break — two-color zebra is enough.
- `color.accent` reserved for: primary CTA, one inline link emphasis per section, the live underline on the selected nav item. At most 2 visible uses per viewport.
- `color.muted` for section eyebrow labels ("How it works", "Pricing"), caption text under social proof, footnote copy.

## Typography

- Display (hero H1): 56–72pt, the direction's display font stack. Weight per the DS.
- H2 (section headers): 36–44pt, same family.
- Body: 17–19pt with 1.6 line-height. Width capped at ~65 characters for readability.
- Avoid a 4th size below 14pt unless it's legal/footnote copy in the footer.

## Social proof — be specific or don't include it

- Customer logos: use the actual company marks the brief references. If you have fewer than 4, do not pad; drop the row.
- Testimonials: use real quotes with real names/roles from the brief. If the brief has none, show a placeholder labelled "[REPLACE with customer quote]" rather than fabricating one.
- Numbers ("10× faster", "99.9% uptime") are **only** permitted if the brief supplied them. Invented metrics are a P0 anti-slop hit.

## Anti-patterns

- Hero with a two-stop purple→blue gradient. Textbook AI slop.
- Feature-list row with emoji icons (✨ 🚀 🎯). Use monoline SVG with `currentColor` or nothing.
- Three-column "Feature One / Feature Two / Feature Three" placeholder card set. An empty section is a design problem; "Feature One" is a fabrication.
- Indigo accent (`#6366f1`, `#4f46e5`) when the DS accent is something else.
- Six different accent-tinted cards competing on the same screen. Accent is a spotlight, not a floodlight.
- Stock hero illustration (purple humans talking to laptops). Use a real product screenshot or nothing.

## Quality bar

Re-read the hero out loud. If a stranger couldn't tell from that sentence alone what the product does and for whom, rewrite it — don't decorate around it. Run `craft_lint` against the concatenated section copy before replying.