DESIGN SYSTEM
Dark Theme — a Colour token Case Study
PROBLEM STATEMENT
Create a system which can support designs for both dark and light theme.
ROLE
Product Designer
TEAM
Srishti - Designer, Another Designer
TIMELINE
June, 2024
TOOLS
Figma
OPPORTUNITY
While aligning with the orginisation's new brand framework, we revamped key UI elements like the logo, typography, and colors. This was the perfect opportunity to introduce dark mode, enhancing both user experience and accessibility, while staying in line with modern design trends.
Approaching the Colour System
The first step was to explore the organisation's colour palette, designed to support the brand’s diverse expressions. The palette includes 10 color sets, each with four tones, along with black and white.
The organisation's Design System default colour theme reflects masterbrand corporate colour usage and has been allocated with default colours from the red and blue colour sets. Of these colour, Brand Dark is the only fixed colour that cannot be changed.
As per brand guidelines, masterbrand corporate has access to a limited colour palette of greys, blues and reds, plus black and white.
Additional colours
In addition to NSW Government colour palette, Digital Design System uses additional colours for use in digital products like status.
Playground
Since we were provided with both dark and light colour from the brand, we didn’t need to focus on creating an accent color. When transitioning between dark and light palettes, simply inverting the colors isn’t ideal. Although invert or hue rotate might seem reasonable initially, the result often appears unnatural once applied.
Before
After
.jpg)
"Dark mode is not just a simple inversion of colours."
Next steps
The next step was to create color tokens for various layers, including Brand, Background, Text, Neutral, Status, and Border. These tokens ensured consistency and flexibility across the design, making it easier to apply colors across different components and states.
Step 1
Documenting the existing GEL 2 theme colour tokens along with organisation's primitives.
Brand Tokens
GEL 2 Tokens
Step 2
The next step was to list all the GEL 2 color tokens and incorporate the GEL 3 Dark tokens alongside them. This ensured a smooth transition between themes while maintaining consistency.
Then we created colour tokens for all the layers which includes Brand, Background, Text, Neutral, Status, and Border.
Step 3
Next, we began creating tokens in Figma while experimenting with a few components. One key observation was that certain components, like loaders, had their own specific color tokens rather than using the general palette.
Loader
Skeletal loader
There are some mixed naming conventions in the table because multiple references.
-
Existing GEL 2 tokens uses camel case eg. darkGrey
-
NSW / DDS colour uses space and indicated by a prefix eg. dds/blue 04 or dds/off white
The neutral color naming convention follows a scale where "0" represents no tint, and higher values indicate progressively more tint.
In such situations, it’s important to document the tokens and collaborate closely with engineers to ensure proper implementation and consistency across the design and development process.
RESULTS
FINALISING COLOUR TOKENS
Next steps