INTERACTIVE DEMO — SYNTHETIC DATA

Seven Colours, Twenty-Four Sections

A Shopify theme where nothing hard-codes a colour. Change one setting and the whole storefront repaints — type, rules, fields and buttons together — because every section resolves through the same seven brand tokens.

Every record on this page is fabricated. No production system, customer, employee or credential is involved.

The production code behind this demo is my own work — theme development, handover.

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.