Colour. Variables. Design System • Yellow

∴ 30 days of Design System • Yellow ∴ Day 3 ∴

Just continue to share with you my vision of some of the key parts of DS·Y.

Today it's a Colour section.

The colour system is one of the most important parts of any design system.The flexibility of the system and the ability to adapt it to different situations will depend on how well the model for naming and using colours is chosen.

How to work with colours

1. Choose a pair and additional colours for the main brand colour.There are many ways to do it. Here are the two most justified.- Use mathematical models (Canva's colour wheel: tetrad, analogy, triad) to determine complementary colours for brand colour.- Use services for selecting additional colours and ready-made colour combinations.

2. Form a palette for primary and additional colours. It will be Global colour tokens. I prefer to use the Figma plugin Foundation colour generator. Your colour pallet will be a Global token. Global tokens are context-agnostic and store raw values, like hex codes for colour. Global tokens also store information for typography, border radius, stroke width, and animation.

Thanks to new Figma features we have an opportunity to use a Variables option for this process. Variables in DS·Y for Figma design store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows.For the Token logic. This is a separate topic of conversation. You can find more in the documentation for the Design system Yellow inside the Figma file.

3. Form a list of Alias colour tokens for the main elements of the design system based on the palette (Global tokens).

The main point of using Alias tokens is that you can create a structure of colours tied to the system’s design elements based on this type of token. And most importantly, get colour control for each element. The consistency of the design system is guaranteed and the level of entry into the project for a new designer is reduced.

Alias tokens are created based on Global tokens by selecting the desired colour (token) from the colour palette (list of Global tokens).The more elements you want to control, the more Alias tokens you need to create.

The beginning of the Alias token name is strictly tied to the object of its use. For example Text, Icon, #Button, etc. The ending of the Alias token name is mostly neutral in nature andis tied to the data architecture. For example Primary, Secondary, Tertiary, Positive, Negative, etc.