GEL

GEL is one of the clearer references we've seen for how to run a four-brand system without forking anything. The components live in @westpac/ui and the tokens live in @westpac/style-config, so switching brand is a data-brand attribute on the HTML tag or any parent container rather than a different build, and Tailwind variants like wbc: and stg: cover the occasional brand-specific style. Each of the four brands brings its own typeface (Brown Pro, Aller, Dragon Bold, Westpac's own) and its own token values, but the component layer underneath doesn't move.

The current version, GEL-next, is also a public rewrite rather than a gradual port. The old 0.x repo has been archived, the new one is on React 18 and Tailwind with W3C-format tokens, and the team has started shipping AI agent skills alongside the component docs. For an Australian big-four bank – not an industry known for publishing in the open – that's a lot of the system laid out in public.

GEL fits React web teams working across several consumer brands who want one component layer themed through tokens rather than a system per brand. The multi-brand token architecture, the data-brand switching and the W3C token format are the parts most teams can learn from, whether they're in banking or not.

Good to know: the system is tuned to Westpac's four brands and their typefaces, which are proprietary, so adopting GEL directly outside the group means swapping those out. Light and dark mode use a separate data-theme attribute, but dark mode is switched off in the current release. The old GEL repo is archived, so new work should start on GEL-next.