Why I'm building a design system for my portfolio site
I want to get better at building design systems, and I want a base system I understand well enough to reuse, extend, and theme for each new side project.
Besides, what is a personal project for a designer if not a potentially unnecessary deep dive?
This series will document how I structure the system from the simplest first steps, the principles and resources I'm using, and the nitty-gritty details about accessibility, responsiveness, architecture, and best practices. My goal is to learn in public and create a useful resource for others building a system of their own.
Where it started
In 2019, GoDaddy was developing a new themeable backend that leadership wanted to implement on the new GoDaddy Pro experience. I was an associate designer who liked systems enough to take on the challenge.
Working with my design director, we redefined main-brand tokens for the new theme and built components around those values. We assumed the structure of the new theming system aligned with the existing design system, but the new system used a completely different architecture.
That mismatch made implementation near impossible without changing how we structured our design language. It taught me that a system is not only its colors, type styles, and components. The naming, organization, and relationships between values form an architecture, and that architecture needs to make sense in the technology that implements it.
That lesson is shaping this project. Before defining components or polishing visual details, I'm diving deep into the best practices for design system structure in 2026.
What’s next
The next post maps the foundations of my design system and how the tech stack shapes them. They're the tokens that form the basis of a system, organized into three layers: primitive, semantic, and component.
I'll also cover:
- How I'm designing the system to expedite work in other tools like Claude, Figma, and Paper.
- How I make accessible choices.
- How token decisions translate into reusable foundations and components.
- What changes as I build, test, and revise the system in real time.
You can also follow the work in progress on the Design System page.