YEAR
MAR 2025 - JUL 2025
ROLES
Product Design Lead
RESPONSIBILITY
Design system strategy, Cross-team alignment, Brand collaboration, Developer handoff
TEAM
1 Product Designer, 1 Front-end Engineer, Brand team, Marketing and PM
Turn on the Light, Trade Brighter
WOO X Light mode
Light Mode was one of the most requested features, but delivering it required rebuilding our fragmented design system of 60+ base colors. I led the initiative to consolidate them into semantic tokens, align with brand guidelines, and ensure usability across dark and light themes. The result: not only Light Mode, but a scalable color foundation that raised platform consistency, boosted team efficiency, and set the tone for future growth.”
INITIATE
Rebuild System for Light Mode
Background & challenge
​​
When we decided to introduce Light Mode in mid-2025, the challenge went far beyond creating a new theme. Our legacy design system had over 60 fragmented base colors, often used inconsistently and without semantic meaning. This made it impossible to scale across dark and light environments. In addition, the brand identity was originally designed only for dark backgrounds, so using the signature green on white created readability and comfort issues. The core challenges were:
​
-
Consolidating 60+ base colors into a manageable, semantic token system
-
Ensuring accessibility and contrast across both dark and Light Mode
-
Adapting brand guidelines to support a white-background interface without losing identity
These constraints turned Light Mode into an opportunity to rebuild our color system from the ground up—laying the foundation for scalable, consistent, and brand-aligned design.
Competitors use organized colors for unified look and feel
ALIGN
Brand & Identity
Our brand palette was originally designed for dark backgrounds, with black and green as the core. When applied to a white canvas, the green became overly harsh and inconsistent with the brand tone. I initiated discussions with the brand team and guided the adaptation of the green into a softer, UI-appropriate version. This allowed Light Mode to remain visually aligned with our identity while improving readability and comfort for traders.
WOO X branding only provide black background with bright green
SIMPLIFY
Token Consolidation
The legacy system contained more than 60 base colors in multiple color themes with limited semantic structure, forcing designers to scroll endlessly in Figma and often creating inconsistencies across different products. I led the consolidation of these into 30 reference tokens and mapped them into semantic system tokens with dark and Light Mode flexibility. This change reduced complexity, made color choice more intuitive, and gave both designers and engineers a single source of truth for consistent use across modes.
V1 token were defined in many levels easily causing confusion
V2 tokens in dark and Light Mode with semantic system
While transforming tokens, I defined risks to ensure flexibility in the long term for challenges encountered, like reusing Primary (green) and Critical (red) tokens for trading actions(Long and Short). While efficient in the short term, market color conventions might reverse in the future. So I separated Long/Short into dedicated trading tokens, ensuring flexibility for future changes without breaking the entire system. This approach balanced immediate usability with long-term adaptability.
Separate semantic tokens to secure future flexibility
DELIVER
Cross-team Rollout
Rolling out the new token system required close collaboration with developers. Initially, the engineering team proposed bulk replacing colors, which risked breaking existing components. I coordinated an incremental approach—mapping old to new tokens step by step, testing internally, and gradually rolling out from 10% to 50% to 100% of users. This ensured stability, minimized risk, and allowed us to capture user feedback along the way. After the mobile rollout, we learned from the issues and applied the lessons to web.
OUTCOME & IMPACT
From Feature Delivery to Cultural Shift
Strategic goals
​
-
Higher platform consistency: token simplification was not only about efficiency, but also about enforcing a unified visual language across products and platforms
-
Cultural transformation: shifting from ad-hoc color choices to semantic, system-driven decisions empowered designers to align their daily work with broader design strategy—improving both efficiency and shared understanding of design goals
​
Quantitative results
​
-
Reduced 60+ fragmented base colors to ~20 semantic tokens working for both dark and Light Mode → 70% complexity reduction
-
Enabled consistent Dark/Light Mode coverage across desktop and mobile
-
Designers gained faster workflows with intuitive token usage; engineers benefited from a single source of truth for updates
Qualitative feedback
​
Luke(Trader):
​​
"I love this light mode. Maybe my trade would be brighten"
​
Jin(Product Designer)
"Choosing colors is now intuitive—I don’t have to scroll endlessly to find the right shade."
​​
REFLECTION
Catalyst for Design Maturity
Delivering Light Mode taught us that introducing a feature can become the trigger for systemic change. What started as a response to user demand evolved into a redesign of our entire color foundation, aligning brand, product, and engineering under a shared system. The experience reinforced that consistency and clarity are not only outcomes of design tokens but also cultural practices that help teams scale effectively. For me as a design lead, the project highlighted the importance of spotting these opportunities—using a concrete feature request as leverage to drive broader alignment, elevate design maturity, and shape a sustainable design culture.
