Cameron Collis
Building a Semantic Colour System
August 21, 2023

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 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.

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

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.