--- name: canon-marketing-site description: >- Canon's Marketing / Landing Site kit, distilled into one file: how to make a page argue in one scroll — the page's job, craft floor, motion and signature moments, persuasion copy, accessibility under heavy motion, and mobile discipline. Use when designing, building, or reviewing a landing page, marketing site, or any page that has to persuade. compatibility: >- A portable reference distilled from a Canon kit. Works in any agent or design tool that accepts a single Markdown skill file; the kit's full multi-file skills install separately. metadata: source: https://jamesmadson.github.io/canon/kits/marketing-site/ kit: marketing-site --- # Marketing / Landing Site — Kit Digest Canon's ten-skill Marketing / Landing Site kit, distilled into one self-contained file. It carries the kit's judgment — what to decide, and what the trade-off is — and needs nothing else installed to be useful. Where the individual skills it draws on are present, they hold more detail on their own subjects and are worth deferring to. Provenance: distilled from skills by Jakub Krehel (make-interfaces-feel-better, better-writing, better-accessibility), Kyle Zantos (design-motion-principles), and Meng To (scroll-scrubbed-visual-sequence, falling-leaves, threejs-landscape) — MIT; Anthropic (frontend-design, brand-guidelines) — Apache-2.0; and Vercel Labs (web-design-guidelines) — no license stated. This digest itself is Canon's own writing, distilled from those skills rather than copied from them — curated by Canon. --- ## 1 · Brand foundation > FILL IN before first use: the real palette, type families and scale, logo > rules, and three adjectives for the voice. A landing page is the brand's loudest surface, so the rules exist before the hero does. Name the subject and its world, write a compact token plan (color, type, layout, one signature element), then self-critique against the defaults every AI-built landing page collapses toward: the gradient hero on white, the cream-and-terracotta wellness look, near-black with one acid accent, Inter-as-safe-choice. Pick one deliberately or avoid them deliberately — but decide. ## 2 · The page's job One page, one argument. Before any layout: what should a visitor understand, believe, and do? Every section either advances that or gets cut. The hero states the thesis rather than decorating it. Social proof sits where doubt appears, not in a band at the bottom because that's where logos go. ## 3 · UI craft floor - Depth, radius, and spacing from a scale. Concentric radii: inner = outer − padding. - Every interactive element looks interactive; hover, focus-visible, active, and loading states all exist. - Real copy and real images in mockups. Marketing pages are where lorem hides the fact that the argument doesn't work yet. - Set the type scale for the widest hero and the narrowest phone in the same pass, not in sequence. ## 4 · Motion & signature moments The frequency gate still applies — but a marketing page is one of the few contexts where the top row is the right answer: | Frequency | Motion budget | | --- | --- | | Rare (a visitor sees it once) | Expressive motion welcome | | Occasional | Subtle and fast | | Frequent (nav, forms) | Minimal or none | | Keyboard-initiated | Never animate | Rules that don't bend: animate `transform` and `opacity` only; enters slightly slower than exits; `prefers-reduced-motion` fully supported with a static poster state that still communicates. **Scroll sequences**: native scroll position is the only source of truth — never wheel deltas, elapsed time, or autoplay. Define the sequence as data (scroll length, frame count, poster frame, reduced-motion frame, copy stops) before building. It must be reversible and usable with motion off. **Signature moments**: one per page, usually. Ambient motion (drifting foliage, a live landscape) belongs behind a subject, never competing with it — a backdrop's job is to make the subject look like it's *somewhere*, then get out of the way. If a flourish would survive being described in a sentence to a stakeholder, it's probably earning its place. ## 5 · Copy rules Marketing copy is the product on this surface. - Verb-first CTAs naming the action: "Start a project", "See pricing" — never "Learn more" twice on one page, never "Click here". - Plain claims beat clever ones. Specific beats aspirational: a number, a named customer, a concrete outcome. - One voice; tone can be warm here, but errors (forms, failed submissions) stay calm and plain. - Address the reader as "you". Delete every word not doing work. - Links describe their destination. One capitalization policy throughout. ## 6 · Accessibility floor Heavy motion and full-bleed art are exactly where these get dropped: - Native elements first; `