One shop, two designs, no code either way.
A theme is a record, not a folder of files. Nine colours, two typefaces, the radii and rhythm everything is spaced by, and a handful of structural choices — swap it and the same pages, the same products and the same blocks come back looking like a different shop.
Nothing below changed but the theme.
Identical blocks in both: a hero, a rail of products, a footer. What moved is the palette, the corner radius, the image ratio and where the wordmark sits.
wardrobe.
wardrobe.
Everything a look is made of, as values.
Colour
Nine tokens, used everywhere. Change accent and every button, badge and link follows it.
Type
A display face for headings and a body face for the rest, with a scale and two tracking values.
Shape
Pill, card and panel radii, the product image ratio, control height, gutters, vertical rhythm and three shadows.
Structure
Header layout, hero layout and category shape — choices between constructions rather than numbers.
Content it points at
The menu it shows, the header and footer records it wears, its hero and its top bar.
Some things spacing cannot get you to.
A centred wordmark with the nav beneath it is a different header, not a differently spaced one. Those are picked from a list, so a theme can only ask for a layout the storefront actually has.
- InlineLogo left, nav alongside.
- CenteredLogo over its own nav row.
- Logo centreNav left, wordmark centred, actions right.
- OverlayCopy over a full-bleed picture.
- SplitCopy beside the picture.
- SquareCards in a grid.
- CircleA row of rounds.
Every panel here is drawn from the tokens beside it, the same way the storefront reads them.