Every page across the redesigned IA in static-HTML mock form. Homepage with featured product and intent paths, PDP with sticky sidebar nav and stacked content sections, collection with spec-driven filter rail, Compare tool, Find Your Fit wizard, Learn hub and article template, FAQ + Glossary, Support pages, About / Distributors / Contact. Each mock annotated with the data sources it depends on.
Five color schemes (Foundry, Studio, Forge, Lab, Field) and five typography systems (Plex, Inter, Geist, Industrial, Workhorse) — twenty-five combinations, all WCAG 2.2 AA. Each rendered as a live specimen with contrast tables and CSS token contract.
The strategic frame — IA collapse from 9 to 5 top-level items, 6-token palette, typography stack, square corners with hairline rules, performance gates (Lighthouse 90+, WCAG 2.2 AA). Read first if you're new to the redesign.
All ten metaobject types specified with field tables, example entries, bindings, and notes — plus the complete metafield binding reference grouped by owner (product, variant, collection, article, shop) and GraphQL mutations for creating the whole data layer in one script run. Replaces the earlier two markdown schema docs and consolidates the four newly-identified metaobjects (product_video, faq_item, glossary_term, distributor) with the original six.
Maps every UI element on every Mock to the exact metafield, metaobject, or Shopify primitive that feeds it. Six-cluster data overview, full coverage matrix (17 data sources × 14 pages), and per-page schematic diagrams showing data flow. The audit doc — if a page can't be built, this surfaces why.
Initial markdown specification of product_document, product_relationship, ai_policy, and ai_crawler_policy. Content is now consolidated into Mock R — kept here for textual back-up.
Initial markdown specification of product_spec_group and product_spec_row, plus the migration plan from prose-spec descriptions to structured rows (~12 hours of human review for 120 products). Content now consolidated into Mock R.
The full component inventory across the fourteen page mocks, classified by source — twelve Skeleton components used as-is, eight Horizon-referenced patterns rebuilt in Skeleton, nineteen manufacturing-new builds (spec table, document list, compare, compatibility matrix, FYF wizard, sticky page nav, quote form, volume pricing, video gallery, product resources block, predictive search, plus eight others). The high-priority eleven get detail cards with data dependencies, variants, events, and notes. Plus the web-component naming convention, the design-token contract every component reads, a page × component matrix, and a six-stage build sequence.
Visual page mockup of the new /pages/resources library. Lives under Support alongside parts-by-model, install hub, warranty, contact. Hero with scoped search, sticky filter rail (product family · resource type · audience · language), sticky family sidebar with scroll-spy, and per-product blocks that pair the videos gallery with the documents list in a single panel. Uses the <product-resources> component spec'd in Mock S, populated by the product_video and product_document metaobjects from Mock R — no new data layer required.
The component library hub. Sixteen components organized into six categories — containers (Section, Flexible Columns, Flexible Rows), typography (Headings, Text, Image), composite (Hero, Tabs, Collapsible), forms (Form, Buttons), product (Rating, Price), and navigation (Nav, Search, Filters). Each card declares its type (section · block · snippet, sometimes multi-typed) and links to its playground when built. Explains the playground pattern, the three Shopify component types, and the build order.
The first live component playground. Section is the primary top-level container. Twelve settings organized in four collapsible groups (Layout · Appearance · Heading · Advanced). Live preview updates as settings change. Background scheme swatches, padding radio strips, container width selector, top/bottom border options, kicker + heading + intro fields, alignment, heading size, anchor ID. Outputs schema JSON, rendered HTML, and the complete sections/section.liquid file — all with copy-to-clipboard. Viewport toggle for desktop/tablet/mobile preview.