Back to home

Case Study

Semantic Colors, Seamless Modes

Architected a next-generation color system and workflows that brought clarity, speed, and reliability to dark mode and design consistency across one of the world’s leading crypto platforms.

Context

OKX is one of the world’s largest crypto exchanges, scaling fast with a complex product ecosystem. The design org needed its system foundations to keep pace with rapid growth, but adoption and consistency were faltering.

When I joined the team, I wanted to understand how designers were actually using the system day-to-day. I set up workflow walkthroughs with product designers across the org. Very quickly, I noticed a massive pain point: the color tokens.

Problem

Designers and developers had lost trust in the color system:

Dark mode was broken

Developers had to apply manual overrides because tokens didn’t swap correctly.

Semantic naming was unclear

Designers often chose colors visually, not semantically.

Duplication & ambiguity

Too many similar tokens made decisions confusing.

Inefficiency & inconsistency

Workarounds created drift between design and code.

This wasn’t just a technical issue; it slowed teams down and undermined confidence in the entire design system.

The Opportunity

I saw an opportunity to transform how the org thought about color:

Simplify the architecture with clear, semantic categories.

Make dark/light mode reliable and automatic.

Reduce duplication and cognitive load for designers.

Rebuild trust through education and adoption support.

My Role

Project Initiation

Observed designer workflows, identified critical color system gaps, and proposed a systemic overhaul.

Stakeholder Presentation

Communicated risks and a structured redesign plan to the design org and leadership.

Leadership Alignment

Built confidence and gained organizational support to move forward.

End-to-end Execution

Owned design, documentation, training, and rollout of the new color foundation.

Process

1. Research & Analysis

Interviewed designers and observed workflows to uncover pain points

Documented token misuse, inconsistencies, and reliance on overrides

Interviewed designers and observed workflows to uncover pain points

Documented token misuse, inconsistencies, and reliance on overrides

Interviewed designers and observed workflows to uncover pain points

Documented token misuse, inconsistencies, and reliance on overrides

2. Early Engineering Alignment

Engaged infra dev team early to validate feasibility

Defined token structures and long-term adoption processes

Engaged infra dev team early to validate feasibility

Defined token structures and long-term adoption processes

Engaged infra dev team early to validate feasibility

Defined token structures and long-term adoption processes

3. Architecture Redesign

Reorganized into 4 categories with clear intents

Built in dark/light mode and theming flexibility
Reduced duplication and clarified semantics

Reorganized into 4 categories with clear intents

Built in dark/light mode and theming flexibility
Reduced duplication and clarified semantics

Reorganized into 4 categories with clear intents

Built in dark/light mode and theming flexibility
Reduced duplication and clarified semantics

4. Brand Color & Component Integration

Partnered with component designer to apply tokens across the DS library

Updated core components (buttons, inputs, alerts, etc.)
Established guidelines for brand color usage

Partnered with component designer to apply tokens across the DS library

Updated core components (buttons, inputs, alerts, etc.)
Established guidelines for brand color usage

Partnered with component designer to apply tokens across the DS library

Updated core components (buttons, inputs, alerts, etc.)
Established guidelines for brand color usage

5. Implementation & Rollout

Published tokens into code with infra dev team

Rolled out in phases: DS components → product teams
Allowed old/new tokens to coexist for smooth migration

Published tokens into code with infra dev team

Rolled out in phases: DS components → product teams
Allowed old/new tokens to coexist for smooth migration

Published tokens into code with infra dev team

Rolled out in phases: DS components → product teams
Allowed old/new tokens to coexist for smooth migration

6. Education & Workshops

Built before/after templates and guides

Hosted training sessions and workshops
Embedded with teams for adoption support

Built before/after templates and guides

Hosted training sessions and workshops
Embedded with teams for adoption support

Built before/after templates and guides

Hosted training sessions and workshops
Embedded with teams for adoption support

7. Iteration & Feedback

Refined primitives and semantics from usage feedback

Added missing semantics during rollout
Improved documentation for clarity and longevity

Refined primitives and semantics from usage feedback

Added missing semantics during rollout
Improved documentation for clarity and longevity

Refined primitives and semantics from usage feedback

Added missing semantics during rollout
Improved documentation for clarity and longevity

Solution

Semantic color system that was intuitive and easy to navigate.

Dark/light mode switching that worked instantly without overrides.

Fewer, clearer variables with meaningful names.

Comprehensive documentation, guidelines, and training assets that ensured adoption.

Impact / Results

60%

Reduction in duplicated tokens, simplifying decisions across design and code.

7+

Product teams actively migrated during the initial rollout.

70%

Faster onboarding time for new designers learning color semantics.

0

Developer overrides required: dark mode now works flawlessly out of the box.

What designers said…

“I’m so excited about the new color variables! They’re so much easier to use and way faster than what we had before.”

"It feels magical to switch to dark mode now — everything just works instantly."

“The new structure just makes sense — I don’t have to guess which token to use anymore.”