The main goal of a successful design system is for it to be easily manageable. When scaled a design system might be managing 500+ projects. It’s easy to keep a design system manageable when there is only one brand to deal with but imagine if the design system was managing 100+ brands, how do you deal with colour? 

The obvious solution is just to replace palette A with palette B, problem solved. That is all well and good as long as the brands share a similar palette. What happens when this is not the case, how do we compensate for accessibility? 

As you can see from the example above, palette B is not going to win any accessibility pageantry awards. What can we do to resolve this issue? We could manually replace the colours for each website, but that is not an elegant or time-efficient solution. We need to add some level of logic to our colours, a way of prescribing rules to specific parts of the website.

Colour aliases

We don’t want to be constrained by colour palettes, we want to make them work for us. Let’s turn the standard conventions of colour palettes on its head. Let’s define colour from a component level. So rather than giving a button the primary-500 colour style we are going to give it an alias style. Aliases are essentially the ‘middle men’ between colour palettes and components.

Normally, we create colour palettes for our design system, Primary, Secondary, Tertiary etc. You then assign those palettes to any element of the website. A button might use Primary-500 and a link might use Secondary-700. But for a large-scale design system with lots of brands at play we shouldn’t assume that Primary-500 is always going to be the solution for every brand. Rather than assigning colours directly to components, we need to create colour aliases as an intermediary between our palettes and components.

You are probably wondering at this point how this helps? Well, instead of the palette controlling the colours of components, components can now control colour. By introducing aliases the alias can be any colour we want it to be, it is essentially a holding area for colour. The first diagram below shows a design system using a traditional colour palette to define colours for a button for two separate brands. The second diagram shows the same brands utilising aliases to make better use of the colour palettes. 

From diagram one ‘Brand B’ failed accessibility as yellow and white don’t play nice. Using a predefined colour palette setup we had no control in assigning a different colour for the text of the button. The second diagram shows how by using colour aliases we now have full control of what colours we want to use for ‘Brand B’. In the eyes of the design system nothing has changed, it knows that the button text is referencing the colour style ‘Primary element foreground’ and the button is referencing ‘Primary element 1’ we simply change the value within that style. 

Creating colour aliases for your design system

You can be as granular as you want when setting up aliases, you may want to define colour styles to each individual component, or you may want to make things higher level, it essentially comes down to the needs of the design system. The first thing to do is establish your colour needs for the design system. A good exercise would be to visualise all the colours used on an example website that uses the design system.

The image above shows that the design system is currently using seven colours but a lot of those colours are being reused on different elements. If we were to just swap out those colours for another palette, chances are we would run into accessibility issues and also, it might just look a bit crap. So now is the time to create aliases for our colour palette. Identify which elements should have editable colours and assign meaningful names to control those colours.

In the above image, you can see we have now replaced the palette naming convention with something more semantic, this will help you and your team when attributing colours to components. The next thing to do is to add your colour aliases to your styles library. Now is the time to create aliases for our colour palette. Simply create a new colour style, name it and eyedropper the palette colour it is referencing.

I find it helpful to create an on-page palette for documentation. You can download my template here. Note. It is important to keep naming conventions identical to the original template you create otherwise you will run into importing issues later down the line. 

Applying colour aliases to your design system

The next job is to replace any colour palette styles with colour alias styles within your design system. For example, for any buttons in your design system, if the text is ‘light-50’ and the button is ‘primary-500’ you will want to replace those colours with alias styles such as ‘Primary element foreground’ and ‘Primary element 1’. This is a manual process which might involve a lot of back and forth to make sure everything is working as desired, but in the long run, it will be hugely beneficial and time efficient for new projects.

Once you have applied and published all of your styles you can start applying them to other brands. Duplicate the colour file you have created and then apply the new brand colours accordingly to your palettes. Then update the aliases as you wish and publish. You may just want to do a straight swap, or you might want to utilise the aliases differently depending on the brand’s needs. For example, if you have created a nav element alias, you could turn that nav bar from a light background to a dark one. 

When you compare a predefined colour palette swap vs an alias colour palette swap you can see that the predefined palette has quite a few accessibility issues which would require manual intervention whereas we have circumnavigated that problem with the alias palette by reassigning accessible colour ways. 

Applying colour aliases in Figma

1. Once you have made your first alias palette and published it, duplicate it and then edit the colours accordingly. 
2. Open the design system linked website you want to apply colour styles to.
3. Go to ‘Assets’ which is located above the ‘Pages’ panel, then select ‘Team library’ (Book icon). 
4. Select the library colour style file and then choose ‘Swap library’
5. Select the colour library you want to replace it with and hit ‘Swap library’

Applying colour aliases using Token Studio*

1. Create a new set and import your colour styles from Figma into Token Studio. 

2. Edit your alias colour palette so that it is linking directly to the palette within Token Studio.

3. Push.

4. Open another colour library in Figma with the same naming conventions.

5. Open Token Studio and link to relevant repo.

6. Pull. 

7. Delete the alias palette within the Figma file (for now).

8. Duplicate the set you made in Token Studio.

9. Import your colour styles from Figma into Token Studio. 

10. Adjust the alias palette as desired.

11. Push.

12. Put the alias style back into Figma by selecting ‘Styles -> Create styles’ in Token Studio

13. Now on any design system files that are utilising the colour aliases can be easily controlled within a few clicks.

*You will need to have set up a repo to import from different Figma files.

Applying colour aliases in Supernova*

1. Link your palette as a data source

2. Go to ‘Design System Data -> Tokens’

3. Create a new ‘Theme’

4. In the settings link the data source to the other brand palette

*You will need a paid plan to link more than one theme via Figma.

You have the power

You can use aliases for all sorts of scenarios such as branding and dark modes, you can even take it a step further and apply the same logic to typography. Once you have the basic concept in place you can mould it to suit your project needs.