From Agency Dependency to Internal Scale
Tokenisation
Component Architecture Documentation
The Agency Bottleneck
Previously, our website design was 100% outsourced. This created a critical dependency loop: we lacked internal infrastructure, had no "design memory," and every minor iteration to the design system incurred fees and scheduling delays.
Bringing Website Design In House
To gain control of our velocity, we needed to break away from static agency deliverables. The objective was to build a design system that would allow our new internal team of designers, product managers, and engineers to take full ownership of the product roadmap and iterate.
Predicting Future Complexity
The system needed to be lightweight enough for immediate adoption but robust enough (using tokens and atomic strictness) to handle use cases we hadn't even imagined yet, without requiring a total refactor in six months.
From Atoms to Organisms
This system used the Atomic Design Methodology. We started with the smallest indivisible units (Atoms) and combined them to create complex, responsive interface patterns.
Colour, typography, icons, shadows
Page layouts
Speaking the Language of Code
To ensure seamless handoff, we moved away from hard-coded values, and towards Semantic Design Tokens. This defined tokens by usage, not just value (e.g., primary-action-background).
If required for future brand changes, it will allow us to update the brand's core colour in one location and have it cascade across the entire product instantly, mirroring the engineering CSS variable structure.
Built-in Guardrails
Due to tight timelines, we couldn't afford to write extensive external documentation. Instead, I focused on making the system self-documenting.I utilised advanced Figma component properties (booleans, instance swaps) to bake the rules directly into the UI. This meant the system enforces the guidelines automatically, removing the need for a heavy manual.
