Product Page Patterns

Product pages should be composed from named primitives and registry-backed components, not page-specific utility classes.

Use the canonical repository guide for the full recipe set: docs/PRODUCT-PAGE-PATTERNS.md.

Use This When

• A product needs a first-viewport claim and clear primary action.
• Proof should appear near the hero before deep feature copy.
• A page explains product lifecycle jobs such as build, observe, evaluate, and deploy.
• Related products, frameworks, customer stories, or final CTAs need consistent structure.

Blessed Surfaces

• hero, page_hero, band, container, stack, cluster, and grid.
• btnfor calls to action.
• logo_cloudfor customer, partner, device, integration, or ecosystem proof.
• lifecycle_showcasefor stable job sequences.
• index_card or resource_indexfor product choice surfaces.
• story_cardfor customer outcomes.
• cta_bandfor mid-page and final calls to action.

Checks

• The H1 names the product or literal offer.
• CTAs use existing button variants.
• Logo images have text alternatives.
• The proof band appears before long feature copy.
• Product choice cards explain decision criteria.
• The CTA band does not hide section chrome inside a nested card.