Variables

The Framework

A framework that eliminates visual inconsistency across products while remaining approachable enough that designers reach for it by choice, not obligation. Designer NPS jumped from +70 to +90. Developer NPS held at a perfect +100.

The Cost of Visual Drift

Design teams working on large, long-running products accumulate debt quietly. A button style gets overridden here. A color outside the guide gets used there. By the time anyone notices, the codebase has 30+ button variants and no one can explain why.

Existing tools like component libraries and color styles helped at the margins, but broke down the moment a designer needed something custom — which was constantly. Without a deeper layer of structure, visual drift was inevitable. The inconsistency wasn't laziness; it was a system gap. Designers lacked a reliable, flexible shared language with developers, and the gap kept widening with every sprint.

Granular Control at Scale

Simple Variables introduces a two-tier token architecture — global tokens that define raw values, and alias tokens that apply meaning to them — giving designers intuitive handles like "primary background" instead of hex codes, and giving developers a clean JSON file they can implement directly.

In V2, surfaces, borders, and text are treated as distinct entities with their own contrast needs rather than forced into a rigid shared scale. Text hierarchy is expressed through opacity rather than separate token sets, cutting cognitive load dramatically. State changes — hover, pressed, disabled — are applied as universal layer modifiers instead of requiring designers to decode and swap entire token names.

Light and dark mode logic moves to the alias level, freeing global tokens for true multi-theme support, so a team can switch brand palettes and modes independently without breaking anything.

Design Autonomy

The goal was a system that designers would actually adopt, not just tolerate. V1 solved the consistency problem but created a new one: complexity. V2 keeps everything V1 got right and removes the friction that was slowing designers down — enabling them to use the right tokens as a design choice, not the other way around.