Released patterns
Section Templates
Static catalog records only. Executable template source remains in the Design Forge release artifact.
Showcases
Capabilities Bento
A mixed-size capability grid that gives the primary feature the largest visual weight while keeping supporting capabilities scannable.
Feature Card Grid
A responsive icon-card grid that makes a capability set easy to compare without turning every feature into a separate page.
Image Sequence Scroll
An Apple-style frame sequence that reveals a product through scroll while retaining a deterministic first-frame fallback for reduced motion.
Pinned Timeline Showcase
A phased, pinned product story that sequences title, subtitle, metrics, and a visual before handing control back to the page.
Metrics
Counter Bar
A compact metric bar that turns a small set of measured outcomes into an animated, readable proof row.
Spec Comparison
A side-by-side specification grid that gives a product decision concrete, aligned evidence instead of a loose feature list.
Stats Showcase
A quiet statistics presentation for trust-sensitive surfaces where the numbers should carry the visual emphasis.
Content
FAQ Accordion
An accessible expandable Q&A section with single- or multi-open behavior for resolving objections near the end of a page.
Interactive Demo
A tabbed demo container that presents one focused playground at a time with a visible loading state and responsive frame.
Sticky Sidebar Content
A documentation-shaped section with a sticky table of contents and scroll-spied content blocks for long-form reading.
Navigation
Footer Navigation
A utility-rich footer column layout derived from the shared navigation data so hubs, legal links, and contact paths stay aligned.
Mega Menu Navigation
A segmented hub-to-spoke navigation panel that keeps top-level choices bounded while giving each destination useful context.
Navbar
A compact marketing header with shared navigation data, one primary action, and a mobile drawer fallback.
Media
Full-Bleed Media
An edge-to-edge image section with a positioned text overlay and scrim that keeps the message legible over visual media.
Parallax Layers
A layered media composition that separates background and foreground depth while disabling scroll choreography for reduced-motion and minimal intensity.
Video Scroll Reveal
A poster-first video section that uses scroll to reveal the media while retaining a still frame when motion or playback is unavailable.
Ctas
Gradient CTA
A closing call-to-action with a restrained gradient field, clear hierarchy, and explicit primary and secondary paths.
Newsletter CTA
A low-friction email capture section that shows pending, success, and failure states without leaving the page.
Product Options CTA
A plan or product option comparison that makes the recommended choice visually explicit while keeping alternatives scannable.
Heroes
Gradient Headline Hero
A centered opening statement that pairs a high-contrast headline with supporting copy, announcement context, and conversion actions.
Product Reveal Hero
A full-viewport product entrance driven by image-sequence progress, with a static hero image as the no-motion path.
Split Media Hero
A two-column opening layout that balances concise positioning copy with a responsive media surface.
Social Proof
Logo Marquee
A trust strip that moves partner marks as a CSS loop and degrades to a static, accessible logo group under reduced motion.
Testimonial Carousel
A keyboard-navigable testimonial rotation that pauses on interaction and turns customer voice into a focused proof moment.
Trust Signals
A compact row of certification badges and measured claims for health, finance, legal, and service contexts.