Interface: Marketing Pages

Rule

Quality bar: Build marketing sites worthy of siteinspire.com. Distinctive, refined, memorable — not generic template work.

Hero Section

The hero is the first impression. It sets the tone for everything below.

  • MUSTHeadline communicates the core value proposition in one sentence
  • SHOULDTypography creates drama — large size contrast between headline and subtext
  • SHOULDOne primary CTA, visually dominant. Secondary CTA (if present) clearly subordinate.
  • NEVERGeneric stock imagery that could belong to any product
  • NEVERMore than 2 CTAs in the hero
  • NEVERAuto-playing video without user consent

Hero patterns (pick one, don't combine):

PatternWhen to use
Text-centeredStrong copy, no product to show yet
Split (text + visual)Product screenshot, illustration, or demo
Full-bleed mediaPhotography-driven, lifestyle brands
Interactive/demoProduct speaks for itself

Section Composition

Marketing pages are narratives. Each section advances the story.

  • MUSTConsistent vertical rhythm between sections (pick a value: 96px, 128px, or 160px and commit)
  • SHOULDAlternate visual weight — dense section followed by spacious, text followed by visual
  • SHOULDEach section has one clear purpose (don't combine testimonials with feature lists)
  • SHOULDVisual transitions between sections — background color shifts, not just whitespace
  • NEVERCookie-cutter repeating layout (3-column cards, 3-column cards, 3-column cards)
  • NEVERMore than 7-8 sections total (if you need more, you're not editing)

Section rhythm matters more than individual section design. A page with 5 well-paced sections beats a page with 10 beautifully designed sections that feel relentless.

Social Proof

Social proof converts. But generic social proof repels.

  • SHOULDReal names, real photos, real companies — not "John D., CEO"
  • SHOULDSpecific outcomes over vague praise ("Cut deploy time from 45min to 2min" > "Great product!")
  • SHOULDLogo bars with recognizable brands, monochrome, consistent sizing
  • SHOULDTestimonials placed after the claim they support (feature section → proof of that feature)
  • NEVERFake or obviously AI-generated testimonials
  • NEVERStar ratings without context (everyone has 5 stars)
  • NEVERCarousel of testimonials that auto-advances (let users read at their pace)

Animation

  • SHOULDMarketing animations can be longer than product UI
  • NEVERScroll-triggered animations (fade-up, translate-Y on scroll)
  • NEVERParallax, scroll hijacking, auto-advancing carousels
  • SHOULDSkip intro animation if seen this session:
useEffect(() => {
  if (sessionStorage.getItem('introSeen')) return setSkipIntro(true);
  sessionStorage.setItem('introSeen', 'true');
}, []);

CTAs

  • MUSTVary CTA by auth state:
StateCTA
Logged out"Get Started" / "Sign Up"
Logged in"Go to Dashboard" / "Open App"

Navigation

  • MUSTSubmenu content in DOM even when hidden (SEO/a11y)
<nav>
  <button aria-expanded="false">Products</button>
  <div class="submenu" aria-hidden="true"><!-- content here --></div>
</nav>

Docs

  • MUSTCopy button on all code snippets
  • SHOULDSupport .md URL extension for markdown export
  • SHOULDVisual examples alongside code

Blog/Changelog

  • MUSTRSS feeds at /blog/rss.xml, /changelog/rss.xml
  • SHOULDtext-wrap: balance on headings

Illustrations

  • SHOULDaria-label on code-based illustrations
  • SHOULDuser-select: none; pointer-events: none on decorative

Performance

  • MUSTStatic generation for blog/docs/changelog (not request-time fetch)
  • SHOULDPreload above-fold images and fonts