Personal design system

Context

I wanted a portfolio that didn't just talk about systems thinking — I wanted it to prove it. Instead of showing screenshots of products I worked on (which are under NDA), I decided to build a design system from scratch for my own personal brand.

The idea: every button, every color, and every spacing decision on the site comes from the same system. That way the portfolio itself becomes the evidence — if you're browsing the site, you're using the design system.

In short: I built my own system to design my brand, demonstrate consistency and craft, and bring my two sides — design and code — together in a single piece.

Process

1. From brand to principles

Before touching a single variable, I defined the attributes the brand had to convey: warm, clear, direct, and technical.

Each attribute became a design rule. For example:

• Technical → a monospaced typeface for code and data details.
• Warm → an accent that brings energy without feeling corporate.
• Clear → strong hierarchy and generous whitespace.

2. From principles to tokens

I translated those attributes into measurable, reusable decisions:

• Color. A single warm accent — [confirm your final coral / hex] — over a neutral base, plus semantic colors (success, warning, error). All defined with accessible (AA) contrast in mind.
• Typography. Two typefaces — [display font] for headings and [body font] for longer reading — on a constrained scale with two weights (regular and medium) to keep everything consistent.
• Spacing & shape. A consistent spacing scale [based on 4px steps — confirm], border radii, and border rules.
• Theme. Everything is built on CSS variables, so light/dark mode works from the foundation, not as a patch.

3. From tokens to components

On that base I built the core components, each with its variants, states, and accessibility notes:

Button, Input, Badge, Card, Nav, Tags

Each component lives in Storybook with interactive controls, so anyone can change its props or theme and see it update in real time.

4. Key decisions

Why this accent?

I wanted the brand to feel warm and approachable — communication that gets straight to the point without hiding behind complex terms. The accent reflects that: energetic and human, never cold or corporate.

Why this type pairing?

I paired two typefaces: a display face that gives headings character and presence, and a highly readable face tuned for longer blocks of body content. The scale keeps a clear hierarchy between the two.

How did I solve light/dark?

I solved it at the token level — every color is a semantic token, so switching themes is just swapping token values. Light and dark come from one single source of truth, not a bolted-on override.

Solution

The result is a living playground — not static screenshots — where the tokens, components, and their states all work for real. Open the playground

Highlights as you explore it:

• Components with all their variants and states.
• Controls to change props and switch themes live.
• Every component paired with its code snippet and accessibility note.

Impact

• The entire portfolio is built on this system. Every page you see uses these tokens and components.
• Speed and consistency. Building a new page means assembling existing pieces, not starting from zero.
• A single source of truth. Change one token and it propagates across the whole site.

Learnings & next steps

Building the system before the site forced me to make foundational decisions early, and that accelerated everything afterward. The next step is to expand the pattern documentation, add more components, and spin the system off as its own npm package.