Copyright © 2023 by Westpac Banking Corporation. All rights reserved.

Code with GEL

Marita Purins

The GEL coding framework has been built with serviceability in mind, supporting multiple platforms across the Bank that may use different libraries, languages and coding technologies.

The GEL design system provides the foundations you need to build accessible, multi-brand solutions that work across any device.


Prefabricated components, optimised for performance, scalability and accessibility.


Vanilla solution to support teams to integrate with their preferred JavaScript language.

Design tokens

Basic core elements of the system which provide an accurate representation of brand including colours, fonts and font sizes, spacing and breakpoints. Token formats include JSON, LESS, CSS, SCSS/SASS.

There are 3 levels of GEL design system adoption

Level 1: Follow the specifications

Achieve brand compliance.

In this scenario, you can use the GEL design system documentation and design tokens to achieve brand compliance.

Level 2: Adopt the design system and principles

Achieve brand compliance and scalability.

In this scenario, you can use the design system docs and apply the multi-brand, responsive principles to achieve scalability and brand consistency in your project.

Level 3: Integrate with the framework

Achieve brand compliance, scalability and speed.

In this scenario, you can consume the React JS or vanilla HTML code in your project to increase the speed at which your project can be created, and simplify future branding and accessibility updates.

Read more about the levels of design system adoption

Access the design system

Get started using the GEL design system