72yonk Semantic Colour System began after realising I didn't know enough about colour. Starting as a small exploration into an area of design I wanted to learn more about, and gradually turning into a large exploration. Into colour, 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. This approach to colour systems and the ability to rapidly create new visual 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. As it seemed to have all the functionality I needed without a steep learning curve. There was some dumb luck in this decision. As I didn't know at the time, Primer Prism used the HSLuv colour space. Looking back, it seems I unintentionally stumbled upon HSLuv.

HSLuv allowed me to build accessibility into the 72yonk 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. This is 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 in the nuances. Such as ensuring the background base colours had the right amount of contrast and aligned with their intended purpose.

While working on the project, Figma announced Variables at Config 2023. Everyone was raving about this new functionality, and excited to plug Variables into their own projects. This gave me the push I needed to finally wrap up this project. Before I knew it, Variables were setup in the 72yonk Figma files and I was switching between themes in a few clicks.

At some point, while playing around with curves in Primer Prism or testing the semantic colours in Figma, things simply 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.

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. Used minimally, but it would give a designer more options. Secondary accent colours would be useful for a 'Filled Secondary' button style or text button, icons, base colours, and branding.
• Experiment with different saturation values. For example, I’d experiment with decreasing the saturation levels for the light theme’s surface colour scale, from 30% to ~5%. This will make the base colours appear more ‘white’, and give the interface a more generic feel. But it would also give more visual prominence to the accent colours.
• Create components with inverted colours. For example, a light theme should support dark backgrounds for a sidebar and toast. Like creating a secondary accent scale. Inverted colours give a designer more options and used minimally.

What’s a project without countless learnings? The learnings which stand above the rest.

• The more I learnt about colour, the more I realised 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.
• 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.
• 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.
• 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 a 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 abundance of free tools and knowledge. 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.