Implementing Dark Mode & Design Tokens to Improve Accessibility & Consistency
I led the integration of dark mode, accessible colours, and design tokens into the Jostle Platform. This effort fulfilled a major user request and ensured accessible design elements and a design consistency framework.
role + timeline:
Directed the strategy and proposal to shift from global colors to semantic design tokens, ensuring scalability and clarity, and ran workshops with the design team to define an accessible and cohesive new colour system. I also collaborated with my dev lead to gain support and provide education on the move to design tokens.
We delivered all of this in just over a year, starting with an internal alpha then a full customer release in Q2 2024.
success metrics:
Top request delievered
dark mode delivery was a top priority for customers
A co-created language
creating shared understanding of token values between dev and design
Addressing issues:
Up to 2023, Jostle was facing challenges with the design system:
- Inconsistent colours being applied to elements, which affected the polish of the product
- A colour palette that was inaccessible, which impacted sales and product quality
- A lack of dark mode – our number one requested feature
Jostle previously had an existing colour system that was limited in colour choices, and did not meet accessibility. We conducted a platform-wide colour audit – and which revealed:
- links and buttons failed to maintain the required 4.5:1 contrast ratio set by WCAG 2.2 AA
- alternative text colours lacked sufficient contrast, often falling below the minimum 4.5:1 ratio
- some icons failed to meet the minimum 3:1 contrast ratio
Upgrading colours with intention:
By updating our complete colour palette, this gave us the opportunity to be intentional with the choices we make – having a colour palette that didn't overextend or not have enough colour scales to be future-proof.
To address these issues, we led a series of workshops with the design team to re-evaluate our colour palette. The result was helping to solve and ensure that we meet WCAG 2.2 AA requirements for text, such as ensuring text-to-background has sufficient contrast.
Step strategy:
One of our initiatives was to have an elevation strategy. This allowed us to have intention with how many steps in colour we needed.
Intentional colour mapping:
We ensured that colours were intentional, with colours serving a specific purpose.
Design tokens and dark mode:
I led a series of internal workshops that allowed us define a co-created naming convention between design, development, and QA. This also allowed us to get buy-in early, in order to get everyone on the same page working towards a goal.
To implement dark mode, we led the implementation of our design token strategy. Our naming system focused on delivering the minimum amount of tokens required. We avoided overloading tokens, but created the minimum amount in order to have flexibility.
Our naming system focused on delivering the minimum amount of tokens required. We avoided overloading tokens, but created the minimum amount in order to have flexibility.
Tokens allowed us to achieve dark mode – meaning that we could map a semantic token to a colour in light and dark mode.
With 8 months we led naming workshops involving co-creation between design, dev and QA teams – because this new language would be shared between these teams. It was important that we collaborated to come together to create understandable and consistent language that could be applied to future use cases.
With our updated colours, we were able to pass full WCAG 2.2 contrast standards for our colours across light and dark modes – and allow designers and developers to create experiences that would work across light and dark from release.
🎉
Beyond Jostle...
We also talked about tokens and change management at various events!
We've appeared at the Stockholm Experience Conference to talk about accessibility and change management, the UXxUX Conference in Vancouver, along with presenting a workshop for Vancouver Design Community about design tokens!