It’s important to understand how the colour system works in a multi-brand environment and adhere to the accessibility guidelines.
Primary UI palette
The core colours used in the digital brand. Each colour has a variable name (token) which also serves as a guide to describe its intended use.
- Primary#DA1710R:218 G:23 B:16
- Hero#1F1C4FR:31 G:28 B:79
- Neutral#2A2E42R:42 G:46 B:66
- Heading#1F1C4FR:31 G:28 B:79
- Text#181B25R:24 G:27 B:37
- Link#DA1710R:218 G:23 B:16
- Muted#595767R:89 G:87 B:103
- Border#DEDEE1R:222 G:222 B:225
- Background#F3F4F6R:243 G:244 B:246
- Light#F9F9FBR:249 G:249 B:251
Secondary colours
The secondary palette is a collection of bespoke, brand specific colours. Unlike the primary palette secondary colours do not map to the other brands. Secondary colours are generally used for bespoke brand embellishment: headers, promos, charts, diagrams etc. They are unique to the brand and must not be used anywhere else.
- Bright Purple#991AD6R:153 G:26 B:214
- Bright Pink#FF3DDBR:255 G:61 B:219
- Dark Red#990000R:153 G:0 B:0
- Light Grey#E8E8EDR:232 G:232 B:237
- Light Purple#E0BAF2R:224 G:186 B:242
- Light Pink#FFD9F7R:255 G:217 B:247
Reserved colours
The reserved colours convey meaning through colour, they’re used for contextual messaging and designed to clearly separate messaging from content. Only use these colours in the alert and messaging components, using them for any other purpose or in any other interface element is off-brand.
- Success#008000R:0 G:128 B:0
- Info#0074C4R:0 G:116 B:196
- Warning#C53B00R:197 G:59 B:0
- Danger#C40000R:196 G:0 B:0
- System#FF0R:255 G:255 B:0
Data visualisation colours
- data-a-solid#DA1710R:218 G:23 B:16
- data-a-tint#EC8A87R:236 G:138 B:135
- data-a-opacity#DA17104DR:218 G:23 B:16 A:77
- data-b-solid#1F1C4FR:31 G:28 B:79
- data-b-tint#8E8DA6R:142 G:141 B:166
- data-b-opacity#1F1C4F4DR:31 G:28 B:79 A:77
- data-c-solid#FF3DDBR:255 G:61 B:219
- data-c-tint#FF9DECR:255 G:157 B:236
- data-c-opacity#FF3DDB4DR:255 G:61 B:219 A:77
- data-d-solid#991AD6R:153 G:26 B:214
- data-d-tint#CB8CEAR:203 G:140 B:234
- data-d-opacity#991AD64DR:153 G:26 B:214 A:77
- data-e-solid#990000R:153 G:0 B:0
- data-e-tint#CB7F7FR:203 G:127 B:127
- data-e-opacity#9900004DR:153 G:0 B:0 A:77
- data-f-solid#F57A0FR:245 G:122 B:15
- data-f-tint#FABC87R:250 G:188 B:135
- data-f-opacity#F57A0F4DR:245 G:122 B:15 A:77
User experience
Colour can impact a design greatly by influencing decision making or undermining design intent. Bold colours can draw attention but design with too many bold colours and it will have the opposite result.
When using colour careful consideration needs to be centred around a number of aspects such as the use of brand colours, how colour may be perceived for certain tasks, how colours interact with one another (discord, analogous, complementary), and how colour is impacted by accessibility requirements.
The colour palette available is dictated by the brand, with accessibility an increasingly important factor.
Visual design
Each brand in the Westpac Group uses a unique colour palette as part of its identity. These colours permeate across every touchpoint in the customer journey. Each brand's colour palette is mapped to the core UI palette and uses variables (tokens) to identify the colour. This allows brands to be switched quickly, efficiently and accurately. Correct use of the core colours plays a crucial role in brand recognition, customer experience, accessibility and consistency. When the colour palette is not applied correctly the integrity of the brand is diluted and the customer journey fragmented. When using colour, make sure you are using approved brand colours.
Related information
Articles
Colour system
Why we've done it, how it works and why you should use it. Read about the colour system.
Multi-brand
Strategic approach to digital brand management and delivery. Find out how to think multi-brand.