A layered-token design system built for expression, not just governance. Relay UI is a self-initiated design system that treats theming as a first-class capability. Rather than starting with components, it starts with a foundation: Primitive, Derivable, and Semantic tokens, that lets the same components adapt across Light, Dark, and IC themes without structural change. Built in Figma, Token Studio, and GitHub over two months and still evolving.

The Problem

Consistency at the cost of expression: Most systems optimise for governance and pay for it in flexibility. They feel enterprise-first, hard to customise, and disconnected from the aesthetic bar of modern products.

• Rigidity: once a system locks in appearance, evolving it means touching every component.

• Maintenance drag: separate token sets per visual mode multiply the surface area of every change.

• Friction for the people using it: designers and developers inherit complexity instead of leverage.

The question I set out to answer: Could a system provide the structure needed for scale while still feeling contemporary and enjoyable to design with? The challenge was a foundation that supports multiple themes, reduces maintenance overhead, and stays intuitive for both designers and developers.

"Great systems aren't defined by the number of components they contain. They're defined by the quality of the relationships between foundations, patterns, and products."

Why I Built It

Structure without limiting creativity: Relay UI started as a personal exploration of a different default. Maximising consistency solves one problem and creates another: systems that feel rigid and hard to evolve. I wanted one that felt modern and expressive while still supporting scale.

Foundation before components: I began with a foundation that could adapt over time, not a component checklist. The goal: design decisions that are predictable, themes that are easy to manage, and room for new patterns to emerge without introducing chaos.

Designing the Foundation

Primitive tokens: Foundational values that everything else references. Colours, typography, spacing, radii, and motion. Primitives act as the single source of truth for the entire system.

Derivable tokens: Primitives combined with modifiers to generate reusable values. This layer applies opacity and state variations to foundational values, creating reusable design values without introducing duplication.

Semantic tokens: Tokens that define purpose through roles rather than looks. Background, surface, text, border, success, warning. Instead of specifying appearance, semantic tokens describe interface intent, creating a clear relationship between design decisions and implementation.

Why the layering matters: The separation makes the system easier to scale, maintain, and evolve. A designer changes intent at the semantic layer; a developer reads that intent directly; the underlying primitive can shift without breaking either. Decisions stay decoupled from implementation.

Built for Themes, Not Variants

Semantics as the abstraction layer: Theming is a first-class capability, not an afterthought. Instead of maintaining a separate token set per visual mode, semantic tokens sit between interface intent and visual output. The same components adapt across Light, Dark, and IC themes without structural changes.

Components stay independent of raw values: Keeping components decoupled from raw values makes visual updates far easier to manage. Consistency holds across the product ecosystem, and the system supports multiple visual identities without adding complexity for designers or developers.

More Than a Component Library

A growing, token-native library: Every component is built directly on the token architecture. Relay UI includes a growing collection of reusable assets and production-ready components — consistent across patterns, and flexible enough for future expansion because they inherit from the foundation rather than hard-coding values.

Toolchain: Designed and maintained across a modern token pipeline. Figma for design, Token Studio for managing the token layers, and GitHub for versioning and developer handoff — connecting design decisions to implementation end to end.

What I Took Away

Relationships over inventory: The value of a system lives in the relationships between foundations, patterns, and products — not the component count. Building the foundation first proved that flexibility and structure aren't a trade-off; the right abstraction gives you both.

Still evolving: Relay UI remains an active place to experiment. It continues to be a testbed for design tokens, component architecture, and modern system thinking — a belief I carry directly into product design work.