Shipped on public pages or shared chrome today.
Public design lab
The lead-acquisition operating system is inspected in public.
This page labels the patterns behind Lead Caravan: what is live on buyer-facing pages, what is a specimen, and what is still being adopted into the system.
Rendered as real public reference markup without pretending to be a live conversion surface.
Useful pattern or QA lane that is still being promoted into more pages.
Page group
Layout
Reusable page structure, hero systems, and the public section catalogue.
Section gallery
Every reusable content-section shape rendered live, with page-specific shapes cross-linked to where they ship.
- Used on
- Home, services, features, pricing, tools, checkout
- Status note
- Real markup specimens for shipped section classes.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Hero sections
Every top-of-page layout we ship or are considering, shown live on one page.
- Used on
- Home and interior-page hero patterns
- Status note
- 2 shipped heroes are live; 0 of 8 candidates have been adopted.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Page group
Forms
Inputs, quizzes, booking states, chat surfaces, and conversion overlays.
Chat widgets
Every chat box shape we ship, shown live from the real part, with the colors behind each.
- Used on
- Site-wide chat widget, when enabled
- Status note
- Static specimens avoid binding a second live singleton.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Forms
Every form a visitor sees, on one page, shown live as design notes.
- Used on
- Contact, lead-gen, careers, checkout context
- Status note
- Form states mirror the public renderer and generated schema.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Surveys
Every quiz on one page, shown live as design notes.
- Used on
- Readiness, package-fit, and niche-fit quizzes
- Status note
- Quiz shells come from the shared quiz module.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Calendars
Every booking screen on one page, shown as design notes.
- Used on
- Booking and confirmation flows
- Status note
- Calendar states document the live scheduler shape.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Pop-ups
Every pop-up shape we ship, shown live on one page.
- Used on
- Announcement, consent, and conversion overlays
- Status note
- Overlay patterns are component-backed static specimens.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Page group
Motion
Movement that explains process, state, continuity, or safe progressive enhancement.
Carousels
Every carousel pattern the site ships, rendered live with progressive-enhancement notes.
- Used on
- Media references and product visuals
- Status note
- Scroll-snap baseline and enhanced controls stay separated.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Animations
Every animation the site ships, plus motion collections still available to adopt.
- Used on
- Reveal, rail, parallax, carousel, and microinteraction primitives
- Status note
- Shipped motion and candidate motion are labelled separately.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Masking
Mask, clip, and gradient-text treatments rendered from real CSS with support and accessibility notes.
- Used on
- Selective visual effects and reference pages
- Status note
- Some techniques are reference-only until promoted.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Page group
Media
Images, video frames, and QA lanes for the assets the public site uses.
Image gallery
Every picture the site ships, with file paths, notes, and page ownership.
- Used on
- Hero, product, guide, and social-preview assets
- Status note
- Public assets are inventoried from the shipped site tree.
- Data source
- Sourced from src/data/**, regenerated by a script. Cannot silently drift.
Image QA
The source-image checklist: copy coverage, theme derivatives, responsive exports, and file facts.
- Used on
- Image system and asset-improvement queue
- Status note
- Currently passing; flags any source image missing coverage.
- Data source
- Sourced from src/data/**, regenerated by a script. Cannot silently drift.
Videos
Every video spot the site ships, shown live with paths and page links.
- Used on
- VSL, webinar, and video reference surfaces
- Status note
- Video frames are shown as public specimens.
- Data source
- Sourced from src/data/**, regenerated by a script. Cannot silently drift.
Page group
Foundation
Chrome, type, icons, backgrounds, and tokens that keep the site coherent.
Header variants
The three header shapes, side by side, from the real shared header component.
- Used on
- All public pages
- Status note
- Shared chrome resolver chooses the live variant per page.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Footer gallery
Every footer shape, side by side, on one page.
- Used on
- All public pages
- Status note
- Footer variants are shared across the public site.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Backgrounds
Every background the site uses, including page backdrops, surface fills, gradients, and theme tokens.
- Used on
- All public pages
- Status note
- Theme tokens drive the live surface palette.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Fonts & typefaces
The complete type reference for Space Grotesk display, Inter body/UI, and the semantic type ramp.
- Used on
- All public pages
- Status note
- Vendored type assets and semantic sizes are live.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Icons
Every icon in the site, named and matched to the files that use it.
- Used on
- Navigation, cards, tools, forms, and proof sections
- Status note
- Icon index is generated from current source.
- Data source
- Sourced from src/data/**, regenerated by a script. Cannot silently drift.
Page group
Proof
Public proof styling, chart specimens, and the status tracker itself.
Design lab
Public design-system tracker with live, specimen, and adoption status for the site patterns.
- Used on
- Home page and public site map
- Status note
- Public tracker for the reference lane.
- Data source
- Sourced from src/data/**, regenerated by a script. Cannot silently drift.
Charts
Every chart shape we ship, including colors, stat tiles, line, bar, stacked bar, and donut charts.
- Used on
- Proof, estimates, reporting, and design-reference pages
- Status note
- Chart examples avoid unsourced outcome claims.
- Data source
- A const array in the page's own frontmatter. Consistent within the page, untied to source.
Design as proof
Patterns ship only when they help the lead path.
The lab is public because the site itself is the product demo: capture, qualify, book, hand off, follow up, and review are visible before an account is created.