Design System
Summary
Built allbranded's first shared design system, a documented, accessible source of truth for color, type, and components, so the merch shop, configurator, and marketing site stopped re-deciding the same design choices independently.
Outcome
The system now runs live across all three product surfaces (merch shop, configurator, marketing site), with every color pair meeting WCAG 4.5:1 contrast and every component state specified once instead of improvised per page.
Every product surface was reinventing its own colors, type, and buttons
Without a shared source of truth, the merch shop, configurator, and marketing pages each made their own calls on color, spacing, and component states. Contrast wasn't consistently checked, buttons looked different from page to page, and every new feature meant re-deciding decisions that should have already been made.
One documented system: accessible color, type, and components
The system defines a core palette — Blurpie, yellow, and charcoal — plus a full accent range, with every colour pair checked against WCAG contrast guidelines (4.5:1 minimum) so accessibility is built in rather than checked after the fact. A shared type scale covers desktop and mobile, and every button state — default, hover, pressed, disabled, with icons or social variants — is specified once instead of improvised per page.
Built for real product surfaces, not just a style guide
Components are documented down to real behaviour — dropdowns get a scroller after six items, filter dropdowns size to their longest label, and the navigation bar is specified across desktop, tablet, and mobile with the promo banner, Trustpilot rating, and search bar all accounted for. It's the same system running across the merch shop, the configurator, and the marketing site.
