Design tokens at scale
Rebuilding the system to support themes, dark mode, and predictable design behavior.
A design systems case study built with limited resources, deep cross-functional collaboration, and a focus on long-term scalability.
Summary
In 2023, we began rebuilding Wrike's design token system to support multiple themes, a dual design language, accessibility (AA level), and dark mode. Since then, the system has continued to evolve.
Today, it includes several thousand tokens powering the product's visual language across components, modes, and surfaces from accessibility and branding to internal tooling and dynamic theming.
This case outlines how we reorganized our tokens around semantics and intent, introduced scalable patterns, and built a foundation for consistent, flexible UI design.
My role
I was part of a small internal engineering-design team working on Wrike's design system. Alongside my manager, I co-led all design-side efforts from defining token structure and semantics to implementing them in Figma and supporting developers through specs and documentation.
Our scope included developing infrastructure, writing token specifications, handling edge cases, and building internal tooling to support both designers and engineers. We ensured the system could grow without introducing ambiguity or inconsistency.
The problem
Before 2023, our token setup was flat and inflexible. It supported only basic properties (colors, typography, shadows) and relied on a fragile export workflow. Over 120 shades of gray were in use often visually identical but disconnected in logic.
There was no shared structure, no intent behind values. During the redesign, we had to support both the legacy and new design languages in parallel. The system quickly became unsustainable.
Constraints
- Minimal engineering resources
- Two visual systems running in parallel
- Theming was non-negotiable
- Designers needed a system they could actually use without memorizing token hierarchies
The system
We replaced the flat structure with a tiered model:
- Core — raw values (e.g. color hex, spacing, radii)
- Semantic — intent-based names (e.g.
surface.primary,feedback.warning-border) - Component — implementation-level tokens scoped to UI parts
- Legacy — maintained only for backwards compatibility
We enforced a simple rule: designers only work with semantic tokens.
Tokens could reference each other. Updating a single core token would cascade throughout the system surfaces, buttons, badges, and illustrations without breaking.
We also introduced semantic patterns — reusable token groups based on UI logic. For example, checkable defines styles shared across checkboxes, radios, and switches. This created consistency across otherwise unrelated components and reduced decision fatigue.
Patterns made design decisions repeatable and scalable. Instead of resolving the same styling questions repeatedly, designers could rely on the system to guide behavior and visual choices.
Impact
We shipped a full redesign while keeping the legacy UI intact. Designers could move between themes without rebuilding components. Updates that once required tedious overrides were now semantic-level changes.
Theme-related updates became 80% faster — what used to take a day now took an hour. Token changes propagated instantly across themes without touching component code.
Some of the most memorable feedback came from the Miami Dolphins — an enterprise customer who literally cheered when dark mode launched. In a public video, they showcased how Wrike's dark mode supported their NFL playoff workflows.
And they weren't alone comments poured in:
"THANK YOU! Finally! My eyes are happy again."
"Genuinely thrilled. Productivity just went up."
"This is a game-changer for night-time work."
More feedback: Wrike Community Discussion
Reflections
What worked
- Leading with semantics and intent
- Close collaboration with engineering from day one
- Token logic that scaled across teams and themes
What we'd improve
- Invest earlier in search and tooling for designers
- Lock naming conventions before scale kicks in
- Make onboarding smoother with clear examples and defaults
Evolving the system
The system continues to grow. We're expanding support for high contrast modes, brandable environments, and live previews in Figma. Token logic is now being extended into AI-assisted design and embedded interfaces.
Every UI component is built on top of semantic tokens. This lets us decouple visual values from design intent. Change brand.primary, and you update themes, components, and illustrations without rewriting code.
This wasn't just a migration. It changed how our team thinks about UI.