The GEL colour system is designed to meet AA accessibility contrast standards. Our multi-brand colour tokens are organised around four key elements: background, surface, text, and border. This structure ensures that all our current colour pairings remain accessible in both light and dark modes. Before using colour tokens, always refer to these usage guidelines.
Background colour tokens
Backgrounds are fundamental to establishing emphasis and hierarchy. We already use a flexible, accessible background system across all touchpoints, and these tokens replicate that system while also providing dark-mode equivalents. As a general rule, background tokens should be applied to screen backgrounds, but they can also be used for components when needed. If you have any questions about how to apply the background tokens, please contact the GEL team.
- background-white
If you need a white background use this token.
- background-pale
If you need a grey background use this token. Note: this token replaces the current Background colour style.
- background-faint
If you need a light grey background use this token. Note: this token replaces the current Light colour style. Do not use this token as a screen background.
Surface colour tokens
We use surface tokens to apply colour to shapes. These shapes are used to draw UI elements like Alerts, Buttons, Badges, Icons etc. Surface tokens differ to text tokens as they require less contrast, this provides more flexibility when creating accessible colour combinations. Avoid using the restricted tokens and always consult the brand guidelines if you’re unsure which colours to apply.
- surface-primary
Replaces the current Primary colour style.
- surface-primary-faint
Restricted do not use.
Restricted - surface-hero
Replaces the current Hero colour style.
- surface-hero-faint
Restricted do not use.
Restricted - surface-pop
Replaces the current Pop colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines.
- surface-pop-faint
Replaces the current Pop Light colour style. Use for embellishment only as it may not be accessible in all brands. Always use sparingly and in accordance with the brand guidelines.
- surface-holler
Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands.
New - surface-holler-faint
Use with caution: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands.
New
Brand surface tokens
- surface-muted
Replaces the current Muted colour style.
- surface-muted-strong
Restricted do not use.
Restricted - surface-muted-mild
Restricted do not use.
Restricted - surface-muted-soft
Restricted do not use.
Restricted - surface-muted-pale
Replaces the current Background colour style. Tip: In light mode this colour is the same as background-pale however they behave differently in dark mode.
- surface-muted-faint
Replaces the current Light colour style. Tip: In light mode this colour is the same as background-faint however they each behave differently in dark mode.
- surface-muted-vivid
Use for surfaces that need to be the same colour as body text (icons, arrows etc).
- surface-mono
White in light mode and black in dark mode. Use with caution, black often creates too much contrast which defeats the object of reducing glare. Tip: Use background-white. This will provide the same results with less contrast in dark mode.
- surface-reversed
Always white. Use with caution, in Dark Mode white often creates too much contrast which defeats the object of reducing glare. Tip: Use surface-mono or background-white as these tokens are designed to work in dark mode.
Muted surface tokens
- surface-success
Only use for success alert components, do not use for anything else.
- surface-success-faint
Only use for success alert components, do not use for anything else. Note: this surface should always be used with border-success-mild as shown here.
- surface-info
Only use for info alert components, do not use for anything else.
- surface-info-faint
Only use for info alert components, do not use for anything else. Note: this surface should always be used with border-info-mild as shown here.
- surface-warning
Only use for warning alert components, do not use for anything else.
- surface-warning-faint
Only use for warning alert components, do not use for anything else. Note: this surface should always be used with border-warning-mild as shown here.
- surface-danger
Only use for danger alert components, do not use for anything else.
- surface-danger-faint
Only use for danger alert components, do not use for anything else. Note: this surface should always be used with border-danger-mild as shown here.
- surface-system-error
Only use for system alert components, do not use for anything else.
- surface-system-error-dark
Only use for system alert components, do not use for anything else.
Alert surface tokens
Text colour tokens
Text tokens differ from surface tokens because they require higher contrast ratios to ensure accessible colour pairings. Some text tokens serve specific functions, such as text-heading or text-link, while others are more flexible. All text tokens must be used in accordance with the brand guidelines. Avoid using restricted text tokens, and always consult the guidelines if you’re unsure which tokens to apply.
- text-body
Use for paragraph text and UI elements - labels, buttons, inputs etc
- text-heading
Use for headings only. Note: Using text-heading on anything other than headings may produce unexpected results in multi-brand applications.
- text-link
Use for text links only. Note: In Westpac this colour is exactly the same as text-primary however this may not be the case in other brands.
- text-muted
Use for text that requires less emphasis like hint text etc.
- text-primary
Use with caution and in accordance with the brand guidelines. Tip: If your text is a link always use the text-link token.
- text-hero
Use for text that requires more emphasis, call outs, quotes etc.
- text-holler
Use for text that requires more emphasis, call outs, quotes etc. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands.
- text-mono
Similar to surface-mono, text-mono is white in light mode and black in dark mode. It’s typically used for UI elements like buttons, tabs, panel heading etc.
- text-reversed
Similar to surface-reversed, text-reversed is always white. Use with caution, in dark mode white creates too much contrast which defeats the object of reducing glare. Tip: Try using text-mono
Brand text tokens
- text-success
Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components.
- text-info
Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components.
- text-warning
Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components.
- text-danger
Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components.
- text-system-error
Only for system error alert messages, do not use for anything else. Tip: Use the pre-built alert message components.
Alert text tokens
Border colour tokens
Like surface tokens border tokens require less contrast, this gives us more flexibility when creating accessible colour pairings. Avoid using the restricted border tokens and always refer to the the brand guidelines if you’re unsure about which colours to apply.
- border-muted
For borders that require more emphasis. Use with caution and in accordance with the brand guidelines.
- border-muted-strong
Replaces the current Border Dark colour style. Use for UI components that require accessible contrast ratios eg. Inputs, Selects etc
- border-muted-mild
Restricted do not use.
Restricted - border-muted-soft
Replaces the current Border colour style. Use for UI components and page elements that don’t require accessible borders - Selectors, Flexi-cell, Tabs, section dividers etc
Muted border tokens
- border-hero
For borders that require more emphasis. Use with caution and in accordance with the brand guidelines.
- border-primary
For borders that require more emphasis. Use with caution and in accordance with the brand guidelines.
- border-pop
For borders that require more emphasis. Use with caution and in accordance with the brand guidelines.
- border-holler
For borders that require more emphasis. Note: GEL cannot endorse the use of this colour token until it's approved and documented as part of the Master Brand. This applies to all our brands.
Brand border tokens
- border-success
Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components.
- border-success-mild
Only for success alert messages, do not use for anything else. Tip: Use the pre-built alert message components.
- border-info
Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components.
- border-info-mild
Only for info alert messages, do not use for anything else. Tip: Use the pre-built alert message components.
- border-warning
Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components.
- border-warning-mild
Only for warning alert messages, do not use for anything else. Tip: Use the pre-built alert message components.
- border-danger
Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components.
- border-danger-mild
Only for danger alert messages, do not use for anything else. Tip: Use the pre-built alert message components.
Alert border tokens
Chart colour tokens
Data visualization tokens are specifically designed for use in charts and other data visualizations. Each brand provides six core colors (A–F), each with a corresponding 50% tint and 30% opacity, giving a total of 18 colors. This range provides significant flexibility for creating complex visualizations. These tokens are strictly restricted for charts and must not be used for any other purpose.
- data-a-solid
Only for use in charts. This token is an intentionally accessible fill colour for simple pie charts, bar charts etc.
- data-a-tint
Only for use in charts. This token is used as a comparison colour with it’s corresponding solid colour.
- data-a-opacity
Only for use in charts. This token is used in area charts with it’s corresponding solid colour.
- data-b-solid
Only for use in charts. This token is an intentionally accessible fill colour for simple pie charts, bar charts etc.
- data-b-tint
Only for use in charts. This token is used as a comparison colour with it’s corresponding solid colour.
- data-b-opacity
Only for use in charts. This token is used in area charts with it’s corresponding solid colour.
- data-c-solid
Only for use in charts. This token is a fill colour for simple pie charts, bar charts etc.
- data-c-tint
Only for use in charts. This token is used as a comparison colour with it’s corresponding solid colour.
- data-c-opacity
Only for use in charts. This token is used in area charts with it’s corresponding solid colour.
- data-d-solid
Only for use in charts. This token is a fill colour for simple pie charts, bar charts etc.
- data-d-tint
Only for use in charts. This token is used as a comparison colour with it’s corresponding solid colour.
- data-d-opacity
Only for use in charts. This token is used in area charts with it’s corresponding solid colour.
- data-e-solid
Only for use in charts. This token is a fill colour for simple pie charts, bar charts etc.
- data-e-tint
Only for use in charts. This token is used as a comparison colour with it’s corresponding solid colour.
- data-e-opacity
Only for use in charts. This token is used in area charts with it’s corresponding solid colour.
- data-f-solid
Only for use in charts. This token is a fill colour for simple pie charts, bar charts etc.
- data-f-tint
Only for use in charts. This token is used as a comparison colour with it’s corresponding solid colour.
- data-f-opacity
Only for use in charts. This token is used in area charts with it’s corresponding solid colour.
Related information
Articles
Colour
Speed up your workflow, ensure you're on brand and stay accessible with our multi-brand colour system. Read more about our colour system
Dark Mode
Design principles and guidelines to help you understand how we approach dark mode in our UI design. Read more about our dark mode design principles
DataViz for everyone
The data visualisation system, how it works and how you can use it to create accessible, multi-brand charts. Read more about our data visualisation system