What a design system actually is

Click a brand in the demo and every component re-skins at once, because components reference named tokens, not raw values. Who owns the system (design team and Figma versus the frontend engineer's seat this tutorial takes), tokens as the contract between design and code, hardcoded values as tech debt, and why two token layers is the default with a third only for libraries.

Design tokens in depth

Take design tokens apart. Why every mature system (shadcn, Material, Radix) lands on the same role names, and the rule underneath: name by role, not value, so the name survives a rebrand, dark mode, and scale tweaks. The naming convention, three rules worth enforcing in code review, and when a system actually needs a third primitive layer.

Color and the other scales

Why oklch beats hex and hsl: its L channel tracks perceived lightness, so derivation stays predictable. How a whole palette falls out of a few seeds, why states and form fields are just the accent moved a step, why dark mode is a palette you design rather than an inverted one, and how type, spacing, radius, and elevation run on the same one-base-to-many idea.

Theming architecture in React

Build a small, library-agnostic theming layer from scratch: CSS variables as the runtime token layer, the Tailwind v4 @theme inline mapping that keeps utilities swappable at runtime, dark mode and multi-brand as a variable swap, scoped theming on a subtree, cascade layers for clean overrides, and a typed variant helper so a theme change never rebuilds a component. Ends with the goals any theming stack has to hit.

How you'd start a design system today

You almost never start from a blank file anymore. The common ways in (a UI library like shadcn or Radix, a generated palette from Design System Studio, or letting AI draft one) and why none matter as much as understanding your tokens: how they're named and wired to your components. Then generate a set in the Design System Studio and read the tokens you just learned to own.

Home
Tutorials
React Design Systems

Indie Dev ToolkitPart 5 of 9

Chapter 2: Modern Frontend Development with React

React Design Systems

Name: React Design Systems
Author: Vu Nguyen

Vu Nguyen

Lead Engineer, NAB - Jul 16, 2026

This is Part 5 of the Modern Frontend Development series. A design system is a set of standards, principles, that acts as the single source of truth for both designers and developers, keeping the product consistent and easy to extend. Components reference token names, never raw values, so a rebrand, dark mode, or a second brand is a value swap instead of a rewrite.

I'll cover how tokens are named and layered, why oklch lets a whole palette derive from a few seeds, and how it all wires into React: CSS variables, Tailwind v4 @theme, dark mode as a swap, and typed component variants. At the end, we look at where you'd actually start a design system today.

Prerequisites

Comfortable with CSS custom properties (variables) and modern CSS
Familiar with Tailwind CSS; Tailwind v4 @theme helps but isn't required
Part 2 (Frontend Architecture) recommended for how the token layer fits the wider app

React Design Systems

About the author

Vu Nguyen

NAB, Lead Engineer

I'm Vu, a Lead Engineer at NAB (National Australia Bank). I started on Home Lending products and now lead a team building products for HICAPS, Australia's largest point of sale claiming service for private health insurance. Before NAB, I worked at startups and across a range of teams and stacks.

Upskills is where I share practical, real-world knowledge to help others build and maintain projects better. Beyond tutorials, more content is coming: project showcases, interview prep, and AI tools as resources for your learning journey. I'm excited to share what I've learned and keep learning together as we build cool things.

From the Upskills newsletter

Hope you liked React Design Systems. Want the next one in your inbox?

Practical web development deep-dives, every other week, written by an engineer who ships them. No fluff, no hot takes.

Real-world, production-grade examples
No spam, ever
Unsubscribe in one click

We respect your privacy. Unsubscribe anytime.

Home
Tutorials
React Design Systems

Indie Dev ToolkitPart 5 of 9

Chapter 2: Modern Frontend Development with React

React Design Systems

Vu Nguyen

Lead Engineer, NAB - Jul 16, 2026

Prerequisites

Comfortable with CSS custom properties (variables) and modern CSS
Familiar with Tailwind CSS; Tailwind v4 @theme helps but isn't required
Part 2 (Frontend Architecture) recommended for how the token layer fits the wider app

React Design Systems

About the author

Vu Nguyen

NAB, Lead Engineer

From the Upskills newsletter

Hope you liked React Design Systems. Want the next one in your inbox?

Practical web development deep-dives, every other week, written by an engineer who ships them. No fluff, no hot takes.

Real-world, production-grade examples
No spam, ever
Unsubscribe in one click

We respect your privacy. Unsubscribe anytime.