Colour system for designers

Hey fellow designers.

I would like to share my colour system with you. I believe I got the naming convention right and it is easy to use. To illustrate how simple it is I re-coloured the original Figma UI from UI2: Figma’s Design System

I made it to support a dark theme with no effort at all

Here is a quick demo

Figma UI in light mode

Dark mode

Please note, the screenshots above are not a 1-to-1 replica, but a demonstration that I can take any design and rapidly introduce a brand new colour system that would support dark mode out of the box. I spent around 10 minutes on each screen and did not bother to re-align the accent part of the palette for the sake of speed.

And I wrote an article to expand on how it works and how exactly it was designed. It is a nice read with lots of illustrations, technical details and my thought process around decisions that have been made - Designing a colour system

My Figma files

  1. https://www.figma.com/file/Td2WoklGD5ACbYZrPashOQ/Colour-System%3A-Multi-Theme-Playground?node-id=604%3A18442&t=WK3l7rVEBrdvYlTz-1
  2. https://www.figma.com/file/fIyAnlG7h4HoPVZtrNdbn8/Colour-System%3A-Single-Theme-Playground?node-id=298%3A13889&t=7569IufCGJpkQYXQ-1
1 Like

This topic was automatically closed after 30 days. New replies are no longer allowed.