Modern system

Component lab before homepage rebuild

This is where the mockups get decomposed into reusable, editable pieces: mascot poses, cards, page previews, pricing tickets, audit callouts, and section modules.

Build order

  1. Atoms: tokens, mascot, stickers, buttons, chrome.
  2. Cards: search, social, proof, previews, receipts, tickets.
  3. Modules: hero, mismatch, audit, before/after, pricing.
  4. Homepage: assemble from approved lab parts.
01

Atoms

Mascot, stickers, dots, CTA pills, nav, browser chrome, scribbles.

 02

Cards

Search results, social ads, proof cards, page previews, audit cards, receipts, pricing tickets.

 03

Modules

Composite sections assembled from the reusable pieces.

 04

Inventory

The 50-ish parts list mapped back to source references.