Design system showroom
One page per design family, rendered in that family's full DNA (canvas, type identity, texture, palette) with every variant in its pools. The candidate board shows unapproved variants against current ones.
Legacy trade (live sites, frozen)
palette 1 · canvas: legacy-white · type: legacy-system · shells: centered
Modern local trade — friendly, soft, phone-led
palette 3 · canvas: legacy-white · type: grotesk-modern · texture: dot-grid · shells: centered/sidebar-right/banded
Industrial technical — square, high-contrast, evidence-led
palette 3 · canvas: legacy-white · type: grotesk-modern · texture: grid-lines · shells: centered/sidebar-right/banded/boxed
Editorial authority — large type, narrow columns, prose-led
palette 3 · canvas: paper-cream · type: bitter-slab · shells: centered/sidebar-right/banded
Emergency response — urgent, compact, phone-everywhere, hi-vis CTA
palette 2 · canvas: legacy-white · type: archivo-strong · texture: diagonal-lines · shells: centered/sidebar-right/banded
Heritage trust — established/traditional, serif headings, burgundy
palette 2 · canvas: paper-cream · type: bitter-slab · texture: dot-grid · shells: centered/boxed
Royal service — vivid royal-blue hero, white CTA, pill shapes, friendly
palette 1 · canvas: paper-cream · type: manrope-soft · shells: centered/boxed
Forest eco — deep forest green, soft shapes, natural/reliable
palette 1 · canvas: paper-cream · type: bitter-slab · texture: dot-grid · shells: centered/sidebar-right/banded
Midnight premium — near-black with metallic gold, spacious, serif
palette 1 · canvas: dark-ink · type: archivo-strong · texture: dot-grid-light · shells: centered/banded
Live example sites
- pilot-locksmith-ascot.pages.dev — royal-service · paper-cream · BOXED shell · editorial masthead hero · Fraunces
- pilot-locksmith-batley.pages.dev — midnight-premium · full-dark canvas · banded shell
- pilot-locksmith-lichfield.pages.dev — forest-eco · paper-cream · banded shell
- pilot-locksmith-accrington.pages.dev — modern-local · cool-slate · sticky sidebar shell
- drainage-croydon.pages.dev — modern-local · teal/white · dot-grid · Manrope · sidebar shell
- drainage-bromley.pages.dev — modern-local · sky-slate · cool-slate canvas · banded shell
Palette pool
legacy-drain-green@1 — Legacy trade green (live sites)
trade-navy-amber@1 — Navy with amber call-to-action
trade-teal-orange@1 — Deep teal with orange call-to-action
trade-crimson-charcoal@1 — Crimson on charcoal (urgent trades)
trade-indigo-steel@1 — Indigo with steel neutrals
trade-bronze-stone@1 — Bronze with warm stone neutrals
trade-sky-slate@1 — Sky blue with slate neutrals
hivis-slate-yellow@1 — Hi-vis: slate with safety-yellow call-to-action
burgundy-cream@1 — Deep burgundy with warm cream tints
royal-blue-white@1 — Vivid royal blue hero with WHITE call-to-action
forest-cream@1 — Deep forest green with warm cream
midnight-gold@1 — Near-black with metallic gold accents (premium)