Solace Dark Mode
Achieving 100% WCAG AA compliance across 450+ components through an AI-enhanced token system.
Team
1 UX Designer + 2 Common UI Developers
My Role
UX Design Intern
Tools
Figma, Storybook, Jira, Claude Code
Duration
10 Weeks
(Jan 2026 – Mar 2026)
Overview
Solace is a global leader in middleware and event-streaming technology, providing critical infrastructure for enterprise-level data movement.
As Solace's product ecosystem expanded, teams started creating fragmented, temporary dark themes. To prevent visual inconsistency, I took ownership of an early-stage dark mode draft, overhauling it into a centralized, fully scalable, and WCAG AA-compliant Design System to ensure a unified user experience across the enterprise suite.
What I did
I optimized the foundational dark mode token system, audited over 450 UI components for WCAG AA compliance, and resolved critical layout visibility issues through targeted deep dives (assisted by AI tools like Claude Code). Finally, I delivered clear design specs and collaborated directly with developers to implement the system into our Storybook library.
My Impact
Draft → Production Dark Mode System
Transformed an initial prototype into a scalable, developer-ready token system.
100% WCAG AA Compliance
Ensured accessibility across all colour pairings.
450+ UI Components
Audited and upgraded across the Storybook component library.
1 Unified Standard
Eliminated fragmented themes across the product ecosystem.
Key Design Outcomes
The Comprehensive Dark Mode Token System
A centralized token architecture ensuring accessibility and visual consistency across all products.
Process & Results
The Problem
Solace lacked a unified, developer-ready dark mode. As our product ecosystem expanded, the absence of a central standard forced teams to "hack" together their own versions, leading to a broken experience for both users and engineers.
Key Challenges:
Scalable Accessibility
Ensuring 100% WCAG AA compliance across 450+ components. The complexity lay in auditing thousands of potential color combinations and states to guarantee readability.
1-to-1 Mapping Constraints
To minimize engineering overhead, every dark mode token had to map 1-to-1 with light mode. This forced a complete rethink of certain light-mode patterns, as elements like drop shadows or specific brand accents became invisible or broken in dark environments.
The Foundation: Refining the Legacy Draft
I inherited an early dark mode draft that was mostly approved but needed a final push to be "Dev-ready." My job was to clean up the edge cases and hand it over for testing as quickly as possible.
Instead of a total redesign, I used Figma AI (Make) to fast-track the tedious parts—like testing colour variations and fixing clashing brand colours that didn't feel right in the dark theme. I focused on making the token logic bulletproof, ensuring every colour had a clear 1-to-1 mapping that developers could implement in Storybook.
The Systematic Audit
With the foundation set, I needed to ensure the system worked across the entire Storybook component library. This meant moving from colour theory to a massive, systematic component audit.
I audited 450+ UI components and organized everything into a master tracking database. For every single component, I identified:
The Issue: What exactly is broken in dark mode?
The Root Cause: Is this a technical bug or a design logic gap?
The Solution: What is the specific fix or UX proposal?
Colour Mapping: Which tokens are involved for future traceability?
To make this massive amount of data digestible, I connected Figma MCP to Claude Code. This allowed the AI to analyze my design files directly and summarize the audit results. Instead of manual sorting, the team could instantly see the "big picture"—categorizing all issues and solutions at a glance, which significantly sped up our decision-making.
To turn the audit into action, I led a series of alignment meetings to bridge the gap between design and engineering:
With UX Teams: I presented proposals to rethink component behaviours where patterns failed.
With Dev Teams: I separated technical bugs from design updates, providing a clear roadmap for implementation and bug fixes.
Deep Dives: Solving the "Impossible" Cases
Out of the 450+ components, two specific patterns required more than just a colour swap—they required a complete rethink of our light mode design logic.
For these complex cases, I conducted targeted UX research and competitive analysis first. Then used Claude Code Figma MCP to translate my research findings into multiple design explorations, which I presented to the UX team for quick decision-making.
Case A: The Elevation Puzzle
In light mode, we relied on drop shadows for depth. In dark mode, these shadows became invisible, causing complex card layouts to lose their hierarchy and look cluttered.
Case B: The Semantic Clash (Learning Patterns)
The brand’s "vibrant blue" failed WCAG AA contrast or caused "visual vibration" (eye strain) against dark backgrounds.
The Handoff
Since my internship was nearing its end, I focused on making the transition as seamless as possible for the engineering team to ensure the system actually made it to production.
Jira Ticket Delivery I translated the audit results and design solutions into actionable Jira tickets. This allowed the developers to estimate effort and schedule the implementation into their sprints immediately.
End-Term Roadmap To ensure the project's long-term success after I left, I created a comprehensive End-term Handoff document. I clearly outlined the "To-Do" list for the post-launch phase, ensuring the team had a clear roadmap for validation and future updates.
Impact
Quantitative Results
Draft → Production
Transformed a fragmented prototype into a scalable, developer-ready token system.
100% WCAG AA Compliance
Audited every colour pairing to ensure a fully accessible experience across all 450+ UI components.
1 Unified Standard
Eliminated "hacked" themes, creating a single source of truth for the entire product ecosystem.
Qualitative Value
Future-Proofing
By establishing a robust token architecture, I’ve laid the foundation for future themability, allowing Solace to scale to new brands or custom themes with minimal effort.
Technical Efficiency
The 1-to-1 mapping logic significantly reduced engineering overhead and simplified maintenance, cutting down the time required for future UI updates.
Reflection
Systems Over Pixels (The Power of Communication)
This project taught me that system design is 20% visual and 80% logic and communication. Success wasn't just about finding the perfect shade of gray, but about storytelling—explaining the "why" behind decisions to build a framework that engineers could actually trust and implement.
Thinking Out of the Box (Constraints as Catalyst)
Learning to work within strict technical limitations—like 1-to-1 mapping—actually made me a better designer. Instead of compromising, it forced me to rethink original light-mode patterns to find unconventional solutions that worked for the entire ecosystem.
AI as a Strategic Partner
As AI capabilities evolve, I see it moving from a tool to a strategic partner. If I were to do this again, I’d move beyond manual audits by using Claude to build automated accessibility testing into the CI/CD pipeline, shifting the team’s focus from tedious checks to high-level strategy.