Beyond UI Kits: Building Truly Scalable Design Systems

Many teams confuse a Figma UI kit with a design system. While a collection of buttons and inputs in a design tool is a great start, a true design system is the shared language that bridges the gap between design and engineering.

The Problem with Disconnected Systems

We often see companies where designers maintain a pristine, pixel-perfect Figma file, while engineers rely on a messy, hardcoded CSS file. When a brand color changes, designers update a single hex code, but engineers have to hunt down dozens of hardcoded values across multiple repositories. This friction leads to visual inconsistencies and severely slows down development speed.

Token-Based Architecture

The solution is implementing design tokens. Design tokens are the smallest atomic units of a design system—values like colors, typography scales, and spacing units stored in a platform-agnostic format (usually JSON).

At Kewry, we approach design systems with the following structure:

• Core Tokens: Raw values (e.g., `color-blue-500: #0070F3`).
• Semantic Tokens: Meaning applied to raw values (e.g., `color-primary: $color-blue-500`).
• Component Tokens: Specific component styling (e.g., `button-bg-hover: $color-primary`).

Bridging the Gap

By using tools like Style Dictionary, we automate the translation of these JSON tokens into CSS Variables, Tailwind configs, and iOS/Android native formats. When a designer changes a semantic token in Figma (via a plugin like Tokens Studio), it automatically generates a Pull Request in the engineering repository.

This creates a single source of truth. Engineers stop writing custom CSS, designers stop worrying about implementation drift, and the entire team ships faster, more cohesive products.