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.
ReactJS
Prefabricated components, optimised for performance, scalability and accessibility.
HTML CSS
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.