UI is business, and business is best built on systems. Here is how I created a full colour system for a gaming product.

The desire to make things aesthetically pleasing has made many UI designers lose track of what really matters, which is business conversion.

The question investors and founders are always asking is how can this bring in money?

How can this design enhance conversion and bring in leads?

When you have this understanding, then you’ll realise that UI design isn’t just about beautiful colours, which are most often inconsistently used across the design, but it’s about building systems that keep everything consistent.

For you to be able to come up with a colour system, it means you’ve researched about the product, and you have thought about it from the beginning to the end even before starting the project.

This simply means by the time you start working on the project, there is no guesswork on the colour usage. You have designed an entire system that will work for the entire project, thereby keeping things consistent.

My approach in creating a full colour system.

Step 1: Research

I had to do in-depth research about the gaming industry to understand what the norm is.

I researched user behaviours and discovered that for a gaming product, one thing that’s very important is attention.

You have to grab attention and also retain the attention.

Making use of colours that are present to make a statement helps in grabbing attention; keeping everything consistent helps in retaining users’ attention.

I also had to consider users with special abilities. This is where the principle of accessibility comes in.

I put this into consideration by making sure to create a colour system that can work for light mode and dark mode.

Step 2: Coming up with primitive colours

After doing my research I came up with some colours that can help bring this product to life and communicate its essence effectively.

Primary colour: This is also the brand colour.

Used for:

Primary CTA

Active states

Selected tabs

Key highlights

Secondary colour: this is a colour that complements the primary colour, and it’s mostly used for secondary actions like buttons and for some highlights.

I made sure that the secondary colour complements the main colour without dragging attention with it, as this can cause users to experience mental fatigue.

Used for:

Navigation background

App frame

Large surfaces

Tertiary colour: this is carefully selected to aid both the primary and secondary colours.

Neutral and Neutral Variants: This is where most happen. The neutral colour system is the backbone of the UI.

It’s the main UI design colour; every other one just makes the design beautiful and colourful.

It’s the colour that will be used for the product design.

This is because they are friendly to the eyes.

Accent colour: For key information highlight

Semantic colours: In a game UI, feedback is very important, and it must be instant.

I made sure there is a specific colour for every form of feedback so as to avoid confusion.

Success

Warning

Error

Step 3: Colour Scale

After getting the primitive colours, moved on to work on the scales.

This is a method that helps you have different values of the same colour. It enables designers to have options without using different colours.

To achieve this in Figma, I made use of the HSL colour properties.

I reduced the colour lightening in percentage values as follows: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100. Zero being absolute black and 100 being pure white.

Step 4: Deriving colour roles.

Sustainable design isn’t built on guesswork. After creating a colour palette, I went further to derive colour roles that will be needed across the design.

From the text colour to buttons, frames, backgrounds, and icons, everything was assigned a colour role.

Step 5: staging my colour system in Figma.

After deriving the colour roles, I moved on to stage my colour in Figma using the Figma colour variables.

I saved the primitive colours and also the colour palette derived using the hex code values.

Then I moved to save the roles already assigned to each colour by referencing from the primitive colours.

Conclusion

This system makes a design scalable because it’s built to last. It is not built on guesswork.

With a system in place, a brand can employ a new designer, and the person is able to work on the product without confusion because everything is clearly defined right from the start.

Using systems, we are able to keep the interface calm, consistent and predictable, which helps users to stay.

It is time to stop guesswork and start designing products with systems for scalability.