Design system
About
In this case study, on a high level, I document my approach, thoughts about design systems, what has worked for me a bit about my experience.
Case Study
Methodology
When it comes to design systems, I follow Brad Frosts atomic design principles, to build a scalable and agile design system, I don’t follow it rigidly, but the core idea shapes how I work: start small, get the foundations right, and build up from there.
Foundation
I always begin with the Foundation. These are things like colors, typography, spacing, and basic UI elements. I combine them into larger components, & eventually into more complex patterns.
Tokens
A big part of my process lives in Figma. I enjoy working with variables and tokens, especially using a clear structure with primitives and semantic aliases, in my experience, naming tokens and get messy, so it always important to collaborate with different teams :)
Components
When building components, I start at the atomic level with small pieces. These are combined into more complex components and reusable patterns, eventually forming a cohesive ecosystem where everything works together consistently.
Template
Because I work in an agency environment, scalability across brands is critical. Creating a completely new design system for every brand can quickly become inefficient. To solve this, I maintain a design system template — a base system where components are already built and structured. When a new brand comes in, I duplicate the template and customize it
Documentation & collaboration
Cross-functional collaboration is a key part of how I build and maintain design systems. I focus on creating clear documentation that helps both designers and developers understand how the system works, why decisions were made, and how components should be used. In Figma, I use a dedicated Documentation / Getting Started page that explains the system structure, naming conventions, and where to find key styles, tokens, and components. I also maintain a simple changelog section within the file to track updates, component changes, and new additions, so anyone jumping into the file can quickly understand what’s new and how the system has evolved.