72yonk Semantic Colour System began after realising I didn't know enough about colour. What stared out as a small exploration into an area of design I wanted to learn more about. Became a large exploration into colour spaces, design systems, semantic colour systems, visual themes, and accessibility.
Inspired by Google Material 3's documentation on Colour Systems and all the Linear themes available from Linear.style. Semantic colour systems and the ability to rapidly create new themes was unlike anything I had experienced. It was hard to stop thinking about colour and what was possible.
Research turned into experimentation. Which turned into trial and error, then back to research. I needed an easy way to create colour scales. Which is when I trialed different tools, before committing to Primer Prism. This tool had the functionality I needed without a steep learning curve, and unknown to me at the time. Primer Prism used the HSLuv colour space. In hindsight, it seems I unintentionally stumbled upon HSLuv.
Using the HSLuv colour space allowed me to build accessibility into the semantic colour system. This means, when a designer follows the documentation while creating a new theme. They don't have to do the monotonous task of testing the contrast ratio of each new colour pairing. Because the HSLuv colour space is purposefully built for perceptual consistency. Two HSLuv colours sharing a common lightness value will have the same contrast ratio from an accessibility perspective.
As I was experimenting with colour scales, I was also creating interactive components and mockups to test the colours. This evolved into a fairly small but robust design system. Which as expected, was a lengthy process to create. But the effort was well spent, and went hand in hand with assigning semantic associations to colours.
Assigning a semantic association to a colour tone was a cycle of iterative adjustments. Jumping back and fourth, altering colour curves in Primer Prism, exporting the scales into Figma, tweaking the semantic associations, and testing the new colour system. The challenge was getting the semantic colours to work together. Such as ensuring the three background colours had the right amount of contrast and aligned with their intended purpose.
While working on the project, Figma announced Variables at Config 2023. The design community was raving about this new functionality, and excited to plug Variables into their own work. The excitement was motivation to setup Variables in the Figma files and finish the project.
While playing around with curves in Primer Prism and testing the semantic colours in Figma, things fell into place. The semantic colour system gave me the ability to rapidly create new visual themes. While maintaining consistency and accessibility standards. The most enjoyable part came at the end. When I was able to create and test a theme in 20 minutes, and switch between themes in a few clicks.
Eventually it was time to stop working on this project. I learnt what I wanted to learn, 72yonk was better than my original expectations, and there were now other things I wanted to spend my time doing. If I was to continue working on this project, here is were I'd start.
- Improve the semantic colour names. I was predominantly building the semantic colour system for myself. The semantic names made sense to me and my mental model, and that was fine. I simply didn't consider how other people would interpret the semantic names. Should it be Background Base, Background Surface or Background Dim?
- Create a secondary accent scale. I imagine a secondary accent scale would be used minimally, but it would give a designer more options. Secondary accent colours would be useful for a secondary button style or text button, icons, base colours, and branding.
- Experiment with different saturation values. During the project I experimented with decreasing the saturation levels for the light theme’s surface colour scale, from 30% to ~5%. This made the base colours appear more ‘white’, and gave the interface a more generic feel. But it also gave more visual prominence to the accent colours. This is a design challenge I'd enjoy working on again.
- Create components with inverted colours. For example, a light theme should have support for a toast component with a dark background, and a sidebar component with an accent colour as the background. Like creating a secondary accent scale, components with inverted colours give a designer more options.
What’s a project without countless learnings? The learnings which stand above the rest.
- The more I learn about colour, the more I realise I don’t know much. It's just so complex and I was barely scratching the surface. I could spend a lifetime learning about colour.
- Dark themes require a different framework. I've been living in a world of light themes for 99% of my designer life, but it turns out this doesn't mean much when creating a dark theme. With dark themes, accent colours need to be less saturated, a scale's lightness curve is different, and contrast ratios were never what I expected them to be.
- How changing hue, saturation, and lightness impacts a colour. The result of way too much experimenting.
- How to think about colours systematically. How they interact, their relationships with each other. How to define a colour's purpose, how different colours work together, how to communicate interactivity with colour. All the fun stuff really.
- It takes time. The project was a big experiment lasting many months. With a lot of trial and error. It was important to find ways to work efficiently, cut back on scope, and to not be so hard on myself when things weren't working out.
- 268 is my favourite hue. A blue-indigo colour. Beautiful as an accent colour with mid-to-high saturation, or as a background colour with low saturation and high lightness.
- Figma is great. Variables are great. It doesn’t get enough credit and I need to learn to not take it for granted.
This project wouldn’t have been possible without the many free tools and knowledge available. From Primer Prism, to the HSLuv colour space, Google Material Symbols, and all the people who have shared knowledge online. It makes me so happy to publish the documentation for free, so other people can build off this knowledge and have fun with colour.