Case Study

Personal Design System - Foundations

Personal Design System - Foundations

Technologies

  • figma
  • variables
  • scoping

Overview

# Foundations: A Variable-First Design System Built for Speed

The Problem

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.

The Solution

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.