LIVE DEMO · CONFIG-DRIVEN UI
One mini app, four brands. Click a brand and the whole product swaps its skin, content, and features. No rebuild, no redeploy, just a different JSON. This is the idea that ran nine real brands on one codebase.
Gear for quiet winters.
Scandinavian outdoor equipment, engineered to disappear into the landscape.
Three layers, zero noise
Merino, traceable
Carry less, go further
BRAND = CONFIG · THE ONLY THING THAT CHANGES
{
"brand": "NORDMARK",
"theme": {
"bg": "#F4F6F7",
"surface": "#FFFFFF",
"ink": "#15191C",
"muted": "#6B7680",
"line": "#DFE5E9",
"accent": "#15191C",
"onAccent": "#FFFFFF",
"radius": "6px",
"font": "Space Grotesk",
"bodyFont": "Inter"
},
"copy": {
"tagline": "Gear for quiet winters.",
"sub": "Scandinavian outdoor equipment, engineered to disappear into the landscape.",
"cta": "SHOP THE DROP",
"secondaryCta": "FIELD NOTES",
"promo": null,
"nav": [
"SHELLS",
"LAYERS",
"PACKS"
],
"proof": [
"Three-layer shells",
"Traceable merino",
"Repairs for life"
],
"quote": null,
"footer": "Engineered to disappear."
},
"catalog": [
{
"name": "Shell jackets",
"blurb": "Three layers, zero noise",
"price": "€420",
"tag": "BESTSELLER",
"icon": "shield"
},
{
"name": "Base layers",
"blurb": "Merino, traceable",
"price": "€95",
"tag": null,
"icon": "shirt"
},
{
"name": "Field packs",
"blurb": "Carry less, go further",
"price": "€180",
"tag": "NEW",
"icon": "bag"
}
],
"art": {
"motif": "terrain",
"heroLayout": "split"
}
}The app on the left never changes. It reads a brand config: colors, type, radius, copy, catalog, art direction. Switching brands swaps the config object, nothing else. The JSON on the right is the live config, not an illustration.
The real version of this pattern carried nine brands in production, each with its own markets, languages, catalog, and promotions. Read the case study: One brand in, nine brands out →