While redesigning our entire platform, we realised the existing design system couldn't support our new direction. We decided to rebuild it from scratch, but first, we had to understand why the old one failed.
I led a deep dive audit into our legacy system to identify what was working and what was causing friction. We found a huge gap between design and code: many components were either inconsistent, missing from Storybook altogether, or implemented differently across the platform. This gap analysis allowed us to keep the parts users loved while fixing the technical debt that was slowing us down.
As Lead Designer, I managed the component lifecycle from start to finish, overseeing a team of designers and ensuring every atom and molecule met our quality standards before moving to handover.
Central to this rebuild was architecting a comprehensive Design Token structure from the ground up, defining the logic for primitive and semantic tokens so that every color, spacing, and typographic value was aligned with the codebase.
I worked closely with frontend developers to build a robust Storybook, acting as the final gatekeeper to ensure our Figma variables perfectly mirrored the live platform's CSS, creating a shared language that eliminated guesswork and turned our system into a single source of truth.
I audited our four main products to see what we were dealing with. The same components were built differently in every app, and our Storybook didn't match what was actually live. I mapped out all these inconsistencies to prove why we needed a single source of truth.
Before pushing any pixels, I developed a Gantt chart and delivery roadmap, mapping every component and guideline against a strict timeline, giving engineering a clear look ahead so no developer was ever blocked waiting for a spec.
We adopted Atomic Design and extended it. Inspired by Brad Frost's model, we added Tokens as the foundational layer before Atoms: the raw values every component inherits. Complex interfaces emerge from a small set of unbreakable building blocks.
Organised into four Functional Libraries co created with Engineering to ensure a shared mental map and optimised developer handoff.
The Foundations section is the "DNA" of our design system. Instead of picking colors or sizes on the fly, we rely on a pre defined set of rules to keep everything polished and predictable. By limiting our options, we made design decisions faster without sacrificing consistency.
We opted for a streamlined, single tier structure. Removing theoretical barriers reduces cognitive load and improves discoverability across the library.
Every component ships with comprehensive states and variant properties that let designers switch between configurations instantly, without detaching instances or rebuilding from scratch.
Every component ships with comprehensive states, Default, Hover, Focus, Disabled, Error, ensuring a predictable UX and seamless handoff to engineering.
Figma Variants and Properties allow a single master component change to propagate globally with minimal friction. One source, infinite reach.
Components are flexible enough that designers should never need to detach an instance, every layout requirement is covered by the property system.
Intuitive naming for variants (Size, Type, Hierarchy) makes it trivial to toggle between component versions based on immediate context.
BuildingMinds displays complex sustainability data. We defined four distinct chart colour scales, each optimised for a different type of data story, ensuring every visualisation is consistent, accessible, and meaningful.
One hue at varying lightness for ordered magnitude. Used for energy consumption rankings and carbon intensity by site.
Lighter values indicate lower intensity, darker indicate higher. Used for heat maps and density analysis with directional meaning.
Data with a meaningful midpoint, performance above and below target. Two hues diverge from a neutral centre.
Maximum perceptual distance between hues for distinct, unordered groups, asset types, portfolio categories, system classifications.
By leveraging Component Properties and Variants, designers can toggle between data visualisations instantly while maintaining pixel perfect accuracy. Every chart type lives as a single composable component, switchable by a single property toggle without rebuilding.
Standardised blueprints for how components are assembled to solve user problems, defining the consistent logic behind how users create, edit, view, customise, and share data across the entire platform.
A three tier model ensuring changes at the foundation propagate through the entire system without any manual updates, Primitive, Semantic, and Component layers.
The primitive layer holds raw values. The semantic layer maps meaning (color.background.primary). The component layer allows per component overrides without breaking the global scale.
Raw, context free values. The single source of truth. color.blue.500 → #FFF75D and spacing.4 → 16px
Named by purpose, not value. color.action.primary maps to color.blue.500 and spacing.component.gap maps to spacing.4
Component scoped overrides referencing semantic tokens. Allows per component customisation without breaking the global scale or requiring primitive changes.
Data visualisation tokens are intentionally separated from the base colour system. UI components reference color.petrol.50 while chart colours live under color.chart.purple.*, giving developers a clear, self contained palette with no guesswork.
Standalone series colours for charts with a fixed number of data categories. Each series maps to a dedicated chart token, ensuring visual consistency across every chart instance.
Cross chart consistent colour scales for comparable visualisations. Ensures the same data category always uses the same colour across dashboards, reports, and embedded analytics.
To build and maintain the system at speed, I developed a custom terminal based Figma skill powered by Claude AI, automating component generation from design tokens, layer naming, variant binding, and file organisation. Tasks that would take hours per component reduced to seconds.
