The true foundation. Color tokens, type styles, spacing, radii, shadows — every component in the system references these. Change a token; the update propagates everywhere. Variables are what make the system themeable, not just reusable.

The smallest named components, built from variables. Buttons, badges, price, review stars, swatch selectors, inputs, labels, image ratios. Each has full variant coverage. Update an atom once; it propagates through every card, section, and container that references it.

Purpose-built assemblies of atoms — a review block, a swatch selector group, a breadcrumb, a quantity stepper. Larger than atoms but not yet a card. Components live in the shared library and are composed into cards and master containers.

Master card types assembled from atoms and components: product, collection, blog, recommendation, metaobject, team, testimonial, brand. Every card shares the same slot structure — ratio container, metadata zone, action area. Swap the card type; the block stays intact.

Blocks combine to form sections. Each block carries a card — mix block types to compose a new section layout without rebuilding. Merchants reorder and toggle blocks in Shopify, and that structure maps directly to the file.

Formed by combining blocks. Each section maps to a Shopify theme section with its own layout strategy, color scheme, and spacing. Stack sections to build a full page template.

Sections stacked into a complete page template. The file includes 106 pages covering PDP, PLP, Homepage, Collections, Blog, Cart, Checkout, and more — each built from the same block and section system.

A global overlay layer above sections. Hold named slots for metaobjects and purpose-built component sets: dropdown navigation, email signups, tooltips, quick-buy modals, cart drawers. Reference the same atoms as the rest of the system — no separate trees, no duplication.