Hero
First viewport signal with media, value, proof, and one primary action.
Full-section pattern DNA
The complete set of full page-section types that downstream websites, CMS pages, workshop tools, dashboards, and agent surfaces can display without fragmenting the primitive system.
Production answer
Full-section pattern DNA is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview Full-section pattern DNA states
Generative search brief
Full-section pattern DNA: The complete set of full page-section types that downstream websites, CMS pages, workshop tools, dashboards, and agent surfaces can display without fragmenting the primitive system.
Section taxonomy
The full-section basis of the system
These are the section-level building blocks. Existing section-library groups can keep their local content, but their structure should map to this taxonomy so future pages align by default.
Proof
Reviews, logos, before-after, metrics, compliance, and workshop evidence.
Feature
Single feature row, grid, comparison, or spotlight with reversible layout.
Process
Stepper, timeline, workflow, checklist, and service flow sections.
Pricing
Service packages, comparison tables, tier cards, and quote prompts.
FAQ
Searchable question groups, accordions, support notes, and edge-case copy.
CTA
Conversion band, sticky action, newsletter, booking, and quote request.
Footer
Megamap, contact, service areas, socials, legal, and local business proof.
Dashboard
KPI header, work queue, charts, activity feed, and command bar.
Workshop
Job board, hoist bay, fitment, handover, quote, and proof capture.
Product
Product media, fitment, specs, supplier, price, and add-to-quote action.
Form
Contact, booking, quote, survey, upload, auth, and checkout flows.
Media
Video hero, gallery, before-after, audio, 3D, and lightbox patterns.
State
Empty, loading, error, offline, success, maintenance, and 404 sections.
Utility
Search, filter, file browser, docs, command, and developer surfaces.
Promotion rules
How sections graduate into the library
Manifest first
Section-library entries keep BlockManifest shape unchanged and declare token dependencies.
Foundation trace
Every section names the wireframe, layout, sizing, surface, action, and state primitive it consumes.
No local buttons
Sections use Actions DNA for command sizing and visual variants.
No local cards
Section cards consume Surfaces and Sizing DNA before domain styling.
Responsive proof
Each pattern documents desktop, tablet, and mobile behavior before promotion.