Personal Design System - Foundations

Every designer has been there. A new project lands, the brand colours are completely different from your last one, and suddenly you're staring down the barrel of manually updating hundreds of components across dozens of files. It's tedious, error-prone, and about as enjoyable as a root canal. I wanted to fix that.

I built Foundations, a personal design system in Figma that treats variables as the single source of truth for everything visual. The system is structured around atomic-level design tokens, covering colour, typography, border radius, elevation, and iconography. Every decision flows through Figma's native variables and scoping, which means swapping an entire brand identity is a matter of updating primitive values rather than hunting through component layers with Find and Replace.

The architecture follows a deliberate two-tier token structure:

Primitive tokens define the raw palette. These are the actual hex values, the full spectrum of hues, tints, and shades that a brand might need. Think of them as the paint on your shelf. You probably won't use all of them, but they're there when you need them.

Semantic tokens reference those primitives and assign meaning. A colour stops being "Blue 600" and becomes "Primary Background" or "Error Border." This is where the magic happens. Because semantic tokens point to primitives rather than hard-coded values, rebranding becomes a simple remapping exercise. Swap the primitives, and the entire system updates in seconds.

Both light and dark mode are handled through variable modes, scoped appropriately so that background colours can't accidentally end up applied to text, and border tokens stay in their lane. The scoping is deliberate and strict because a flexible system that lets you do the wrong thing easily isn't really flexible. It's just messy.

The system's foundation layer includes:

Colour with a comprehensive primitive palette feeding into scoped semantic variables for backgrounds, text, borders, and interactive states across both light and dark modes.

Typography using variable-driven type scales that control size, weight, and line height, keeping text styles consistent without manual overrides.

Radius with token-based corner radius values, from sharp to fully rounded, applied consistently across every component that needs them.

Elevation handling depth through layered shadow tokens that adapt across themes, so cards and modals feel grounded regardless of the surface they sit on.

Icons integrated as a cohesive set within the system, sized and coloured through the same variable pipeline as everything else.