Cameron Collis
designer
About the Semantic Colour System Project
August 21, 2023

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.

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

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.