Skip to content
#ask-design-system

Colour

CAT Design System colour palette and usage guidelines

Our colour palette is bold and bright to help us to stand out in a crowded landscape. We are a red, blue and white brand and our specific colours have been chosen to feel contemporary, warm and energising.

Each colour has several tints that can be used in conjunction with our primary palette to create harmonious design applications.

Primary Palette

Our signature Bright Red takes centre stage, shaping a bold yet friendly visual identity. It’s all about energy and warmth—unmistakably us. Accents of blue bring confidence and calm, striking the perfect balance.

Bright Red

#ff3f3f
Pantone 1787 C
RGB: 255,63,63
CMYK: 0,83,81,0
--brand-primary-300

Bright Blue

#5263ff
Pantone 2728 C
RGB: 96,111,255
CMYK: 74,55,0,0
--brand-secondary-300

Deep Red

#4d0000
Pantone 7623 C
RGB: 77,0,0
CMYK: 0,100,60,70
--brand-primary-500

Deep Blue

#040154
Pantone 2748 C
RGB: 4,1,84
CMYK: 100,95,4,42
--brand-secondary-500

Primary palette in use

In marketing, we lead with confidence—bold, full-bleed colour makes an instant impact. Our primary palette isn’t just a backdrop; it brings the punch, creating a strong, recognisable presence across all brand communications.

Example of our colour palette in use

Colour tints

Tints and shades are in addition to our primary palette and provide extra versatility throughout the brand system. We have an expanded set of tints and shades for use in app and web. More details of these are available in the UI section of this document.

In digital spaces like app and web, we keep things clean—primarily white, with red and blue accents for clarity and impact.

Our use of bright colour flexes with intent—bold when we need to grab attention, subtle when we step back to let content shine.

We keep the colours tonal, so when we’re using a blue tint background we use a blue CTA in combination. The same with a red tint and a red background.

Example of our tints in use

Pale Red

#ffd9d9
Pantone 705 C
RGB: 255,217,217
CMYK: 0,25,28,0
--brand-primary-100

Light Red

#ff9f9f
Pantone 706 C
RGB: 255,159,159
CMYK: 0,50,49,0
--brand-primary-200

Dark Red

#aa2a2a
Pantone 7621 C
RGB: 170,42,42
CMYK: 20,98,98,12
--brand-primary-400

Pale Blue

#cacfff
Pantone 2707 C
RGB: 202,207,255
CMYK: 22,17,0,0
--brand-secondary-100

Light Blue

#959fff
Pantone 2726 C
RGB: 149,159,255
CMYK: 44,33,0,0
--brand-secondary-200

Dark Blue

#3a3787
Pantone 2746 C
RGB: 58,55,135
CMYK: 60,57,2,25
--brand-secondary-400

Utility Colors

For the full utility colour palette used in product — neutral, accent, positive, and caution ramps — see the Colours token reference.


Colour combinations

Our brand colour palette offers many colour combinations, therefore it is important that the correct colour combinations are used.

These colour combinations help us create rich, lively designs. Alternating between light and dark backgrounds keep our brand fresh and make sure we always look our best.

To ensure the best contrast and colour balance, always use the colour combinations provided on this page.

Ooo very nice!

Navy on Light Gray (1/9)

Click arrows or use keyboard ←/→ to navigate

#F5F5F5Background
#040154Text
Example colour combinations