Interactive demo · synthetic dataEvery record on this page is fabricated.

Seven Colours, Twenty-Four Sections

A Shopify theme where every colour resolves through seven brand tokens, so changing one repaints the whole storefront.

The production code behind this demo is my own work — theme development, handover, on a project I did with Stephanie Monique.

Read about the system

PALETTE

LIVE PREVIEW — 4 OF 4 SECTIONS

MERIDIAN

Knitwear for a long winter

Made in small runs. Sold until they run out.

SEE THE COLLECTION

THE HOUSE

We make eleven things, and we make them again every year.

A short catalogue is a decision, not a limitation. Each piece stays in production until the yarn is gone, and returns the following autumn in the same weight and a different colour.

SHOP BY CATEGORY

  • CREWNECKS

    4 pieces · from 180

  • CARDIGANS

    3 pieces · from 240

  • ACCESSORIES

    4 pieces · from 45

One letter, each October

The new weights, the restocks, and nothing else.

you@example.invalid

SUBSCRIBE

NOT A FORM — NOTHING HERE SUBMITS ANYWHERE

Real DOM, painted entirely from the seven custom properties beside it. Nothing in it is clickable — it is a rendering of a storefront, not a shop — and every word, price and category in it is invented.

THE MAPPING

THEME SETTINGS · COLOURS

All seven, in the order the schema declares them.

  • color_ink

    Body type, headings, the primary button fill

  • color_paper

    The page ground under most sections

  • color_true_black

    Full-bleed hero and any inverted block

  • color_white

    Type on inverted blocks, input fields

  • color_concrete

    Muted surfaces — tiles, the newsletter band

  • color_line

    Structural rules and field borders

  • color_line_light

    Hairlines inside a block

SECTIONS

Order and presence are merchant state, not code.

  1. Hero

    sections/hero.liquid

    1 snippet · 5 settings · 5 colours, all tokens

  2. Brand intro

    sections/brand-intro.liquid

    1 snippet · 4 settings · 3 colours, all tokens

  3. Category grid

    sections/category-grid.liquid

    2 snippets · 4 settings · 5 colours, all tokens

  4. Newsletter

    sections/newsletter.liquid

    1 snippet · 4 settings · 6 colours, all tokens

CONTRAST READOUT

Added by this demo, not by the theme. Seven settings is what makes a whole storefront checkable in one table.

WCAG contrast ratio for each token pair the four sections use
PAIRRATIOMIN
Body type15.14 — passes4.5
Hero type21.00 — passes4.5
Newsletter type11.66 — passes4.5
Primary button15.14 — passes4.5
Field border3.40 — passes3

Every pair clears its minimum.

What is real, and what is simulated

Runs in your browser

  • The seven brand settings, carrying the ids the theme's settings schema actually declares
  • The settings → CSS custom property mapping, and the one Liquid line per setting that emits it
  • The section composition model: reorder or remove a section without editing a file
  • The audit behind the claim — every colour in every section here is a setting id, never a literal

27 tests assert this. The seven setting ids are verbatim. The CSS custom property names are derived from them by rule here rather than reproduced, and the UI says so. The theme was built for ANATOMY, a real label, so none of its copy, photography or repository paths appear on this page or in the code behind it.

Simulated

  • Liquid itself, and the Shopify theme editor. This is a port to the browser, not a Shopify instance
  • All store data. MERIDIAN does not exist — every heading, category, price and address on the preview is invented
  • Four of the theme's 24 sections. Imagery is flat colour and generated SVG; there is no photography here
  • The cart drawer's commerce behaviour, and everything a storefront does that is not colour and composition
  • The contrast readout is the demo's own addition. The theme does not check contrast — centralising colour is what makes checking it possible in one pass