Building a Colour System for Software Interfaces

Step 5 Define the Colour System

Organise Colours by Their Type

Once the moodboard and overall direction are confirmed, define the colour system.

Start with the brand guidelines, but do not use every brand colour across the entire interface.

Coloured isometric cubes beside the Upslide character.

Organise Colours by Their Type

Once the moodboard and overall direction are confirmed, define the colour system.

Start with the brand guidelines, but do not use every brand colour across the entire interface.

A Brand Palette Is Not a UI Colour System

Colours should be organised based on the role they play within the software.

A UI colour system usually includes:

Primary colour
Secondary colours
Tertiary colours
Semantic colours

Primary color

Secondary color

Teritory color

Semantic color

A Brand Palette Is Not a UI Colour System

Colours should be organised based on the role they play within the software.

A UI colour system usually includes:

Primary colour
Secondary colours
Tertiary colours
Semantic colours

Primary color

Secondary color

Teritory color

Semantic color

Primary Colour

Primary colour is the main brand colour used to highlight the most important actions, active states, and key elements in the interface

Primary Colour

Primary colour is the main brand colour used to highlight the most important actions, active states, and key elements in the interface

Use the Primary Colour Selectively

Reserve the primary colour for the most important actions and elements, such as:

Primary buttons

Active navigation

Selected states

Key highlights

Using it selectively creates focus and hierarchy. Using it everywhere reduces its visual importance.

Use the Primary Colour Selectively

Reserve the primary colour for the most important actions and elements, such as:

Primary buttons

Active navigation

Selected states

Key highlights

Using it selectively creates focus and hierarchy. Using it everywhere reduces its visual importance.

Telangana Electricity App Example

For one Telangana Electricity App concept, blue was used as the primary colour because it communicates:

Trust
Reliability
Professionalism

Instead of applying it everywhere, use it for key actions such as: Pay Bill, Continue, Get Started, Active navigation, Selected states

Telangana Electricity App Example: Welcome Varun Kashetty Add USC USC No: 100545832 Varun Kashetty 22 Days left ₹450.75 Pay Bill View Bill USC No: 100545832 Varun Kashetty 22 Days left ₹1250/- Pay Bill View Bill USC No: 100545832 Mr Mohan & Other 22 Days left ₹1250/- Pay Bil

Welcome

Varun Kashetty

USC No: 100545832

Varun Kashetty

22 Days left

₹450.75

USC No: 100545832

Varun Kashetty

22 Days left

₹1250/-

USC No: 100545832

Mr Mohan & Other

22 Days left

₹1250/-

Qucik Actions

Pay Bills

Bill History

Services

Other Payments

Choose Renewable

Get your connections be powered by the sun today!

Helpful Tips

Telangana Electricity App Example

For one Telangana Electricity App concept, blue was used as the primary colour because it communicates:

Trust
Reliability
Professionalism

Instead of applying it everywhere, use it for key actions such as: Pay Bill, Continue, Get Started, Active navigation, Selected states

Secondary Colour

Secondary colours support the primary colour and add visual variety to supporting elements.

Secondary Colour

Secondary colours support the primary colour and add visual variety to supporting elements.

Support the Primary Colour

Secondary colours add visual variety without competing with the primary colour.

Charts

Support the Primary Colour

Secondary colours add visual variety without competing with the primary colour.

They Can Be Used For:

Charts

Control Supporting Colours

Green, red, and yellow may appear in the supporting palette.

Their use should depend on the meaning and context of each colour rather than decoration.

Illustration accompanying Control Supporting Colours

Yellow - Orange

HEX :

#FFD600

RGB :

RED : 255

GREEN : 214

BLUE : 0

Orange

HEX :

#FD9800

RGB :

RED : 253

GREEN : 152

BLUE : 0

Orange - Red

HEX :

#FF4C00

RGB :

RED : 255

GREEN : 76

BLUE : 0

Control Supporting Colours

Green, red, and yellow may appear in the supporting palette.

Their use should depend on the meaning and context of each colour rather than decoration.

Tertiary Colour

Tertiary colours are neutral supporting colours used for backgrounds, borders, surfaces, and text hierarchy.

Tertiary Colour

Tertiary colours are neutral supporting colours used for backgrounds, borders, surfaces, and text hierarchy.

Use Neutrals to Create Structure

Neutral colours create structure and balance without drawing attention away from key actions.

Backgrounds

Cards

Borders

Table lines

Text hierarchy

Input fields

Disabled states

Tertiary colours are mostly neutral shades used for:

Use Neutrals to Create Structure

Neutral colours create structure and balance without drawing attention away from key actions.

Tertiary colours are mostly neutral shades used for:

Backgrounds

Cards

Borders

Table lines

Text hierarchy

Input fields

Disabled states

Balance Stronger Brand Colours

In the Telangana Electricity App:

Light greys support backgrounds and cards

Dark neutrals support headings, labels, and body text

Subtle borders separate information

This keeps the interface clean and readable.

Welcome

Varun Kashetty

USC No: 100545832

Varun Kashetty

22 Days left

₹450.75

USC No: 100545832

Varun Kashetty

22 Days left

₹1250/-

USC No: 100545832

Mr Mohan & Other

22 Days left

₹1250/-

Qucik Actions

Pay Bills

Bill History

Services

Other Payments

Choose Renewable

Get your connections be powered by the sun today!

Helpful Tips

Balance Stronger Brand Colours

In the Telangana Electricity App:

Light greys support backgrounds and cards

Dark neutrals support headings, labels, and body text

Subtle borders separate information

This keeps the interface clean and readable.

Welcome

Varun Kashetty

USC No: 100545832

Varun Kashetty

22 Days left

₹450.75

USC No: 100545832

Varun Kashetty

22 Days left

₹1250/-

USC No: 100545832

Mr Mohan & Other

22 Days left

₹1250/-

Qucik Actions

Pay Bills

Bill History

Services

Other Payments

Choose Renewable

Get your connections be powered by the sun today!

Helpful Tips

Semantic Colours

Colours Must Communicate Meaning

Define separate semantic colours for: Success, Warning, Error, Information. These may be required even when they are not part of the brand guidelines.

Emerald Pulse

HEX : #00B75D

RBG : rgb(0, 183, 93)

Success

Golden Wheat

HEX : #DDAD65

RBG : rgb(221, 173, 101)

Warning

Crimson Blaze

HEX : #FB343C

RBG : rgb(251, 52, 60)

Error

Colours Must Communicate Meaning

Define separate semantic colours for: Success, Warning, Error, Information. These may be required even when they are not part of the brand guidelines.

Success

Warning

Error

HEX : #00B75D

RBG : rgb(0, 183, 93)

HEX : #DDAD65

RBG : rgb(221, 173, 101)

HEX : #FB343C

RBG : rgb(251, 52, 60)

Emerald Pulse

Golden Wheat

Crimson Blaze

Semantic Colours Improve Scanning

Consistent semantic colours help users understand the status of an action or system response without reading every detail.

Semantic Colours Improve Scanning

Consistent semantic colours help users understand the status of an action or system response without reading every detail.

Do Not Display the Brand Colour Everywhere

Visual Hierarchy

Clear Emphasis

Better Readability

Clear
Meaning

Brand
Recognition

Use Colour Thoughtfully To Create:

Do Not Display the Brand Colour Everywhere

Visual Hierarchy

Clear Emphasis

Better Readability

Clear
Meaning

Brand
Recognition

Use Colour Thoughtfully To Create:

Handling Different Brand Palettes

What If the Logo Has Multiple Colours?

When a logo contains multiple colours, assign each one a clear role.

For the RanaBOM concept:

Brown was used as the primary colour

Blue was used as the secondary colour

For each selected colour, we created a tonal palette and chose the most suitable shades for the interface.

Primary

Secondary

What If the Logo Has Multiple Colours?

When a logo contains multiple colours, assign each one a clear role.

For the RanaBOM concept:

Brown was used as the primary colour

Blue was used as the secondary colour

For each selected colour, we created a tonal palette and chose the most suitable shades for the interface.

Primary

Secondary

What If the Logo Uses a Gradient?

A gradient does not need to appear across the entire interface. Use it selectively for secondary elements, highlights, illustrations, or branded moments.

In AssetWyn, we selected two key colours from the logo gradient, created a tonal palette for each, and chose suitable shades for the interface.

This maintained the brand connection without overwhelming the UI.

by

#CD0957

#351FAB

What If the Logo Uses a Gradient?

A gradient does not need to appear across the entire interface. Use it selectively for secondary elements, highlights, illustrations, or branded moments.

In AssetWyn, we selected two key colours from the logo gradient, created a tonal palette for each, and chose suitable shades for the interface.

This maintained the brand connection without overwhelming the UI.

by

#CD0957

#351FAB

What If the Client Wants a Monotonous Look?

Some B2B SaaS clients prefer a restrained, single-colour direction.

In this case, select one base colour, create a tonal palette from it, and choose suitable shades for the interface.

Semantic colours should remain separate for success, warning, error, and information states.

Two overlapping product screens demonstrating a restrained colour palette.

What If the Client Wants a Monotonous Look?

Some B2B SaaS clients prefer a restrained, single-colour direction.

In this case, select one base colour, create a tonal palette from it, and choose suitable shades for the interface.

Semantic colours should remain separate for success, warning, error, and information states.

Choose the Direction Based on Context

Brand guidelines

Stakeholder preferences

Accessibility

Visual tone

Product context

The Final Colour Direction Should Depend on:

Choose the Direction Based on Context

The Final Colour Direction Should Depend on:

Stakeholder preferences

Brand guidelines

Visual tone

Accessibility

Product context

Colours Checklist

The Final Check Before moving to next process

If the answer is no for even one or if there is even the tiniest bit ambiguity, the team should not proceed. Understand the context before moving further.

Is the primary colour clearly defined?

Are secondary colours controlled?

Are neutral colours available?

Are semantic colours consistent?

Does the palette align with the brand?

Does it meet accessibility requirements?

Have you understood:

Is the primary colour clearly defined?
Are secondary colours controlled?
Are neutral colours available?
Are semantic colours consistent?
Does the palette align with the brand?
Does it meet accessibility requirements?

Have you understood:

The Final Check Before moving to next process

If the answer is no for even one or if there is even the tiniest bit ambiguity, the team should not proceed. Understand the context before moving further.

Is the primary colour clearly defined?

Are secondary colours controlled?

Are neutral colours available?

Are semantic colours consistent?

Does the palette align with the brand?

Does it meet accessibility requirements?

Final Step-5 Takeaway

Use Colour With a Clear Purpose

A strong colour system connects the brand with the interface while creating hierarchy, readability, and meaning.

Final Step-5 Takeaway

Use Colour With a Clear Purpose

A strong colour system connects the brand with the interface while creating hierarchy, readability, and meaning.

The colour system

Step 5 Define the Colour System

Organise Colours by Their Type

Organise Colours by Their Type

A Brand Palette Is Not a UI Colour System

A Brand Palette Is Not a UI Colour System

Primary Colour

Primary Colour

Use the Primary Colour Selectively

Use the Primary Colour Selectively

Telangana Electricity App Example

Telangana Electricity App Example

Secondary Colour

Secondary Colour

Support the Primary Colour

Support the Primary Colour

Control Supporting Colours

Control Supporting Colours

Tertiary Colour

Tertiary Colour

Use Neutrals to Create Structure

Use Neutrals to Create Structure

Balance Stronger Brand Colours

Balance Stronger Brand Colours

Semantic Colours

Colours Must Communicate Meaning

Colours Must Communicate Meaning

Semantic Colours Improve Scanning

Semantic Colours Improve Scanning

Do Not Display the Brand Colour Everywhere

Do Not Display the Brand Colour Everywhere

Handling Different Brand Palettes

What If the Logo Has Multiple Colours?

What If the Logo Has Multiple Colours?

What If the Logo Uses a Gradient?

What If the Logo Uses a Gradient?

What If the Client Wants a Monotonous Look?

What If the Client Wants a Monotonous Look?

Choose the Direction Based on Context

Choose the Direction Based on Context

Colours Checklist

The Final Check Before moving to next process

Have you understood:

Is the primary colour clearly defined?

Are secondary colours controlled?

Are neutral colours available?

Are semantic colours consistent?

Does the palette align with the brand?

Does it meet accessibility requirements?

The Final Check Before moving to next process

Final Step-5 Takeaway

Final Step-5 Takeaway

UI Concepts Framework