Showcase
Harbour, Orchard and Marigold are fictional example brands, each generated from four inputs. Below, the same components render three times; only the data-brand attribute changes.
Switch one panel
Book a repair before the weekend
The same heading, text and buttons. The brand file decides the colours, the fonts and whether buttons are depth or solid.
Showing Harbour.
HTML
<div data-brand="orchard" data-theme="light">...</div>All three, side by side
Opening late on Thursdays
Brand harbour, default button depth
Evening appointments every Thursday until 8pm, booked online.
The same brand in its dark palette.
Can I book by phone?
Yes, during opening hours.
Opening late on Thursdays
Brand orchard, default button depth
Evening appointments every Thursday until 8pm, booked online.
The same brand in its dark palette.
Can I book by phone?
Yes, during opening hours.
Opening late on Thursdays
Brand marigold, default button solid
Evening appointments every Thursday until 8pm, booked online.
The same brand in its dark palette.
Can I book by phone?
Yes, during opening hours.