Color token

Light Mode was consistently the most-requested feature on WOO X. But when we looked at what it would take to build it, the real challenge became clear: the existing design system had over 60 base colors with no consistent usage patterns and no semantic structure. You couldn't reliably map dark values to light equivalents because there was no underlying logic to map from.

Delivering Light Mode without fixing the foundation would have meant hardcoding workarounds that would break the next time anyone touched the UI. So the project became two things at once: ship a highly requested feature, and rebuild the color system underneath it.

WOO X's brand palette was built around black backgrounds with a signature green as the primary action color. On white, that green read as unpleasant — too saturated, too aggressive, and out of step with the calmer tone a light interface requires.

Rather than waiting for a brief, I proactively aligned with the brand team, who were undergoing rebranding, to guide the adjustment. The goal wasn't to change the brand — it was to create a UI-appropriate variant that preserved recognition while improving readability and visual comfort on light backgrounds. That conversation also set a precedent: design system decisions need brand sign-off, not just engineering review.

The existing system had designers scrolling endlessly in Figma just to find the right shade — and still making inconsistent choices. The fix wasn't adding more documentation. It was structural.

We consolidated 60+ base colors into 30 reference tokens, each mapped to a semantic system token that carries intent — not just a hex value. The two-layer architecture means changing a reference token applies automatically through every surface that references it, in both dark and light contexts.

Engineering's initial proposal was to batch-replace all color values in one pass. The risk was significant — edge cases in complex components, particularly trading charts and order panels, could break silently without visual regression testing at scale.

I coordinated a gradual migration approach instead: map old tokens to new tokens incrementally, validate each surface before expanding coverage, and sequence the rollout to contain risk.

Before the new system, any color change that involved specialized components — charts, trading panels, order books — required coordinated engineering effort. Changing a brand color could take months of development time across multiple teams.

With the semantic token architecture in place, designers can now update a reference token in Figma and validate the visual result on a real device without touching engineering. The system does the propagation automatically.

Light Mode started as a response to user demand. It became a case study in using concrete feature requests as leverage for broader structural change — something that's harder to get alignment on when proposed in the abstract.

The token architecture we built doesn't just support dark and light modes. It creates the foundation for any future theme, brand refresh, or color system evolution. What could have been months of engineering for each change is now a Figma update.

The deeper lesson: design maturity isn't built through process documents or design principles decks. It's built when a tangible deliverable forces the organization to confront its technical debt and align around a better way of working.