Author
Modestas Sekstela
Modestas is a product designer at EDL, specialising in enterprise-level design systems.
The rise of dark mode
Have you noticed that almost every product now supports dark mode? Dark mode is a UI theme that uses a dark colour scheme instead of a light one. From social media apps to complex enterprise software, users increasingly expect dark mode as a standard feature in their digital experiences. In fact, studies show that around 82% of users prefer dark mode, and 64% expect their digital tools to automatically adjust based on user preferences or time of day.
ARIS Robotics is a technology company specialising in AI and vision solutions for monitoring and sorting waste. Read our case story about how we helped them to lay the foundations for their design system.
Building a dynamic colour system
Last year, we partnered with a company that provides network orchestration software as a service (SaaS). They wanted a completely new look for their web application, with a focus on modernising their UI.
One of the most important deliverables was a dynamic colour system that supports dark and light theme UI while ensuring consistency, usability, and scalability across their platform.
Building a dynamic colour system is more than just flipping a switch between light and dark modes. It requires a clear design foundation that accounts for accessibility, branding, and integration with the design system. The challenge was to create a transition between themes while maintaining clarity and visual hierarchy in a complex enterprise environment.
We structured our approach into 5 key steps
1. The pilot – getting the visuals right
Before diving into system-wide changes, we started with a pilot project focused on dark mode. Much like a television pilot tests audience reception before committing to a full series, our pilot allowed us to test our design in a controlled environment before rolling it out on a larger scale. This approach allowed us to validate our choices and make informed refinements before committing to full implementation.
2. Translation – from dark to light
Converting the dark mode theme to light mode was more complex than simply inverting neutral colours. Human perception of colour changes based on surrounding brightness. Colours in dark mode might appear more saturated due to the surrounding dark background increasing contrast, while in light mode, the same colours may seem less intense against the lighter surroundings. To maintain readability, accessibility, and reduce eye strain, we adjusted the saturation and brightness of colours accordingly using HSL colour model.
The difference in perception of avatar colours depending on the background.
3. Style definition – defining reusable styling properties
Once the design for both modes were approved by stakeholders, we conducted a quick audit to identify the most commonly used colours across the design.
Using this as a foundation, we built a structured colour scale system to serve as a foundation that allows our colour system to grow and evolve over time. The core colour tokens were documented in Figma and organised into six key categories:
Neutral (e.g., grays from 50 to 950)
Accent Purple (e.g., light to deep purples from 50 to 950)
Accent Blue (e.g., sky blue to deep navy from 50 to 950)
Success (e.g., green shades from 50 to 950)
Warning (e.g., yellow to brown shades from 50 to 950)
Error (e.g., pink to deep red shades from 50 to 950)
Each colour category followed a scale, starting at 50 (lightest) and ending at 950 (darkest), ensuring clear transitions between shades.
A preview of the accent colour scales ranging from the lightest to the darkest shade.
4. Design tokens – defining the logic for variable-based colour system
To enable a transition between themes, we structured a variable-based system using a three-tier token system:
Tier 1: core tokens – These are foundational and not tied to any specific use case. They define neutral values like colours, spacing, and typography.
Tier 2: alias tokens – These introduce context by mapping to core tokens while carrying specific meanings based on usage, such as theme variations, brand identities, or light and dark modes.
Tier 3: component-specific tokens – These are the most detailed and reference alias tokens used to define styles for individual UI components.
Component-specific tokens should be reserved for components requiring high styling precision, such as buttons with varying colour variants and interactive states. Over-reliance on them can create an operational nightmare. Instead, the alias token layer should be flexible enough to cover most use cases, ensuring a shared, reusable approach that cascades fluidly throughout the application.
A well-structured token system at the right levels makes UI theming more scalable and easier to manage.
A diagram showing how variables cascade within our client's Figma workspace.
By setting a foundation for the design token structure, we were finally ready for the next step – token theming.
5. Theming – assigning each token to light and dark UI modes
With the right structure in place, we could finally move on to colour theming. Since we had already defined our dark mode colours as alias tokens in Figma, all we had to do at this point was:
Assigning light mode – We added it as a mode within the same variable collection.
Identifying hard-coded values – We selected our light mode designs and used the ‘Selection colors’ panel to find any hard-coded values.
Mapping variables – In the Variables panel, we mapped each colour to its corresponding dark mode token and defined its light mode equivalent using the ‘Variable modes’ feature.
Variable modal containing a list of alias tokens with dark and light modes assigned.
Once all colours were assigned, we applied light mode across our designs and tested the transition to ensure a smooth swap. Finally, we validated different UI states and checked contrast ratios to maintain accessibility. This structured approach kept our design system scalable, easy to maintain, and adaptable for future iterations.
The results
We managed to put together a scalable design token system that made life easier for the client’s internal design team. Now, they can easily reference and apply tokens across projects, ensuring consistency while also making the developer hand-off more efficient.
A quick demonstration of how mode switching process works in Figma.
Figma structure
We created two distinct Figma libraries:
Core tokens library – Stores foundational design elements such as colors, typography, and spacing. These tokens are neutral and brand-agnostic, forming the basis of all themes and styles.
Alias tokens & styles library – References core tokens while introducing contextual meaning, such as theme variations, brand-specific adjustments, and mode-specific (light/dark) styling. This file also includes component-specific (tier 3) tokens, which follow a structured naming convention to describe UI elements, their priority, and state.
Publishing workflow & designer access
Core token and Alias token libraries are published in Figma and linked to all relevant design files, allowing designers to pull updates automatically and ensure all projects stay aligned with the latest token definitions. Any updates to core tokens cascade through alias tokens, keeping the system consistent and adaptable across different themes and components.
This setup allows designers to work more efficiently and enables developers to integrate updates without disrupting the design flow.
Recommendations for future improvements
As a final step, we provided recommendations to further improve the efficiency of the system. We suggested automating the sync between Figma and the codebase using tools like Supernova or Tokens Studio, allowing for a more streamlined process from design to development.
Additionally, we recommended launching a reference site for internal documentation to enhance collaboration between designers and developers, ensuring that design decisions and updates are easily accessible and well-documented.
Final thoughts
Designing a dynamic colour system for enterprise software is not just about aesthetics—it’s about creating a scalable, accessible framework that enhances the user experience for developers, designers, and most importantly - the end user!
By following a structured approach and maintaining close collaboration between design and development teams, we successfully delivered a system that ensures consistency across light and dark themes while allowing for future growth and adaptability.
