Coded Design Systems Across Three Frameworks

Building token-based design systems from zero in code, not just Figma

Visuals in this case study are limited due to NDAs and proprietary information.

How a screen gets styled: theme first, custom code last

Timeline

2024 – present

My Role

Founding design system lead

Skills Used

Design Systems & Libraries

Style Guides

Style Sheets (CSS, SCSS, SASS)

Front-end (HTML, React, Angular, Vue)

Design to Code Workflows

Figma Code Connect

Accessible & Inclusive Design (WCAG, UDL)

Design-Engineering Collaboration Leadership

Systems Thinking

UI Documentation

Goal

Create a single source of truth for each product that lives in code - design tokens and variables that directly drive theming and components - so that design and engineering are building from the same system instead of translating designs into code.

Constraints

Three different tech stacks: Angular Material (Learning.com), React with PrimeReact (Transcend) and Vue with PrimeVue (LessonLoop)
No dedicated design system team, so each system needed to be maintainable alongside product work
WCAG 2.2 AA accessibility as the baseline for every system

Summary

I have built design systems from zero at every organization I’ve worked with. My three current systems share the same approach: a layered token architecture, a custom design system repository with a UI for viewing and editing component specimens, and an AI-assisted workflow where I use Claude Code to iterate quickly and then refine designs by hand within the component system.

3

Coded, token-based design systems built from zero (Angular, React, Vue)

>90%

Accurate UI generation with Figma Code Connect + MCP

100% Compliant

Responsive & WCAG 2.2 AA

Process

A Layered Token Architecture

Problem

Design systems that only live in Figma require engineers to translate every design decision into code, resulting in drift between the design files and the product.

Solution

I built each system directly in code, with design tokens and variables that drive theming and components in the actual product.

Hard-coded values make it difficult to make consistent changes across a product.

I structured the tokens in layers: a palette of raw values (colors and a numeric spacing scale), semantic roles that point to the palette (padding, gap, radius, size and border), shadow effects, component tokens that map the component library’s own variables to those roles, and typography. Changing a role once updates every component that uses it.

Layered token architecture feeding components in the product

Problem

Design systems that only live in Figma require engineers to translate every design decision into code, resulting in drift between the design files and the product.

Solution

I built each system directly in code, with design tokens and variables that drive theming and components in the actual product.

Hard-coded values make it difficult to make consistent changes across a product.

Guiding Principle

The single source of truth for a design system needs to live in code, where the product is actually built, so that design decisions reach users exactly as intended.

Guiding Principle

The single source of truth for a design system needs to live in code, where the product is actually built, so that design decisions reach users exactly as intended.

Specimen Editors for Each System

For each organization, I built a design system repository with its own UI for viewing and editing component specimens. It shows every component in each of its states and across its props, the layers of variables behind it, and an inspector that shows which variables a component is actually reading. On Transcend’s live design system site, editing a token and saving it commits the change directly to the repository.

The specimen editor loop from token edit to product update

Impact

Design decisions are made on real components, and engineering receives them as code changes instead of redlines and annotated mockups.

Impact

Design decisions are made on real components, and engineering receives them as code changes instead of redlines and annotated mockups.

AI-Assisted, Hand-Refined Workflow

I use Claude Code and Claude Design for rapid iteration, and then take the strongest direction and continue designing by hand within the coded component system. At Learning.com, a Figma Code Connect and MCP pipeline generates UI with over 90% accuracy.

AI-assisted exploration refined by hand within the component system

Takeaway

AI speeds up exploration and iteration, while the coded design system keeps what ships consistent, accessible and aligned with the product’s design standards.

Takeaway

AI speeds up exploration and iteration, while the coded design system keeps what ships consistent, accessible and aligned with the product’s design standards.

‹ LessonLoop v3 Product Overhaul

AI-powered Lesson Sequence Builder ›