Collapsed stone blocks, a skull, and broken UI components lay on the ground with a thriving city in the distance. A metaphor for building a design system from the ground up.

Blogs

Design systems don't usually break all at once. They decay.

Over time, styling stops feeling intentional and starts feeling fragile.

If this sounds familiar, the problem is rarely tooling. It's architecture.

On this site, I explore how design tokens, primitives and a small set of definitive boundaries come together to form a composable styling system.

Choose your adventure

All Posts

  • A designer's desk with UI panels showing appearance options, variant styles, and style controls, alongside four button variants and design tools scattered around

    Building a Theming System

    build a robust, library and framework agnostic design system

    design-systemtooling
  • Four stone blocks in ascending size, each engraved with progressively more specific HTML — from the raw </> through <input type="button"> and <a role="button"> to a fully realised <button> — illustrating the evolution from a basic primitive to a complete interactive element

    Design System Primitives

    design-systemfoundations
  • CSS token variables for spacing, typography, and breakpoints arranged on a structured grid, representing the raw values a design system depends on

    Design System Utility Tokens

    design-systemfoundations