Industry
B2B SaaS
Client
Design Systems
Building Scalable Foundations for Products and Teams
Overview
Throughout my career, I’ve approached design systems as products rather than libraries. Their purpose extends far beyond reusable components - they establish the architecture, governance, and shared language that enable organisations to scale consistently. My work spans designing core foundations, defining token strategies, structuring modular libraries, governing component ecosystems, and aligning design with engineering. Whether supporting a growing SaaS platform or an enterprise organisation, the objective remains the same: create systems that teams can trust, extend, and maintain over time.
Foundations
I view foundations as the architectural layer that defines how a design system behaves long before components or patterns are introduced.
Rather than treating colour, typography, spacing, grids, or elevation as isolated styling assets, I structure them as interconnected systems with clearly defined relationships, constraints, and governance.
Well-designed foundations establish a common language shared across design and engineering. They reduce ambiguity, eliminate subjective decisions, and create predictable rules that scale from individual interfaces to entire product ecosystems. This allows teams to focus on solving user problems instead of repeatedly redefining visual behaviour.
Foundations also provide the stability required for higher-order abstractions such as design tokens, reusable components, and contextual patterns. By investing in a robust architectural base, products can evolve, expand into new domains, or support multiple brands without compromising consistency or accumulating unnecessary design debt.
In enterprise environments, the value of foundations extends beyond visual consistency. They enable scalable collaboration, simplify maintenance, accelerate onboarding, and ensure that growth is driven by systematic principles rather than one-off design decisions.
Foundations
I view foundations as the architectural layer that defines how a design system behaves long before components or patterns are introduced.
Rather than treating colour, typography, spacing, grids, or elevation as isolated styling assets, I structure them as interconnected systems with clearly defined relationships, constraints, and governance.
Well-designed foundations establish a common language shared across design and engineering. They reduce ambiguity, eliminate subjective decisions, and create predictable rules that scale from individual interfaces to entire product ecosystems. This allows teams to focus on solving user problems instead of repeatedly redefining visual behaviour.
Foundations also provide the stability required for higher-order abstractions such as design tokens, reusable components, and contextual patterns. By investing in a robust architectural base, products can evolve, expand into new domains, or support multiple brands without compromising consistency or accumulating unnecessary design debt.
In enterprise environments, the value of foundations extends beyond visual consistency. They enable scalable collaboration, simplify maintenance, accelerate onboarding, and ensure that growth is driven by systematic principles rather than one-off design decisions.
Design Tokens
I treat design tokens as the contract between design and engineering rather than a collection of styling variables. Their primary role is to abstract visual decisions into a structured system that can be shared, governed, and evolved independently of individual components or products.
To achieve this, I organise tokens into multiple layers with clearly defined responsibilities. Core tokens contain immutable primitives such as colour scales, spacing values, typography metrics, radii, and elevation levels. Semantic tokens introduce meaning by mapping those primitives to concepts like surfaces, borders, text, or status, allowing products to evolve visually without changing implementation logic. Component tokens then translate semantic decisions into the specific needs of reusable UI elements, ensuring consistency across variants, states, and interaction patterns.
This separation of concerns enables safe and predictable change management. Adjustments made at the foundation level can propagate through semantic mappings into components without requiring widespread manual updates, reducing maintenance costs and minimising the risk of inconsistencies.
In enterprise environments, a well-designed token architecture becomes essential for scaling. It supports theming, white-label solutions, multi-brand ecosystems, accessibility adaptations, and cross-platform development while preserving a single source of truth shared between design and engineering teams.
More importantly, tokens establish an architectural boundary between visual language and implementation. As products, teams, and requirements grow, this layered approach allows systems to evolve incrementally instead of accumulating design debt or relying on duplicated styling decisions.
Design Tokens
I treat design tokens as the contract between design and engineering rather than a collection of styling variables. Their primary role is to abstract visual decisions into a structured system that can be shared, governed, and evolved independently of individual components or products.
To achieve this, I organise tokens into multiple layers with clearly defined responsibilities. Core tokens contain immutable primitives such as colour scales, spacing values, typography metrics, radii, and elevation levels. Semantic tokens introduce meaning by mapping those primitives to concepts like surfaces, borders, text, or status, allowing products to evolve visually without changing implementation logic. Component tokens then translate semantic decisions into the specific needs of reusable UI elements, ensuring consistency across variants, states, and interaction patterns.
This separation of concerns enables safe and predictable change management. Adjustments made at the foundation level can propagate through semantic mappings into components without requiring widespread manual updates, reducing maintenance costs and minimising the risk of inconsistencies.
In enterprise environments, a well-designed token architecture becomes essential for scaling. It supports theming, white-label solutions, multi-brand ecosystems, accessibility adaptations, and cross-platform development while preserving a single source of truth shared between design and engineering teams.
More importantly, tokens establish an architectural boundary between visual language and implementation. As products, teams, and requirements grow, this layered approach allows systems to evolve incrementally instead of accumulating design debt or relying on duplicated styling decisions.
