Ee Yern Ng
All work

Chameleon A multi-branded design system for mx51

Chameleon components rendered in three bank brands

Chameleon is the design system mx51 uses to design, build and test dashboards and payment apps for some of Australia's major banks, POS partners and payment providers. It let a small team keep up with a fast-growing customer base without giving up consistency, accessibility or speed.

Impact the short version

  • New tenant onboarding cut from two weeks to half a day
  • One component library serving every brand, so features ship once
  • WCAG 2.1 met by default across bank-grade products
  • No more design-to-dev back and forth on the basics

Brew guide how to make one of these

Dose
2 designers, 3 front-end engineers
Grind
Tokens first, then components, then documentation
Temperature
Bank-grade accessibility, held throughout
Time
12 months to build, then ongoing support
Yield
A new tenant themed in half a day, down from two weeks

The challenge: growth without drift

As mx51 took on major Australian banks and more than a hundred POS partners, the existing setup could not keep up. Each product had drifted into its own UI patterns, every new tenant meant hand-rebuilding screens in their colours, and bank-grade accessibility was being checked by hand at the end instead of built in.

The approach was two-fold: design everything once in a generic brand we called Gecko Bank, then swap the whole thing to any real brand through the system.

the yellow bank, the blue bank, the red bank
  • Inconsistent designs across products
  • High effort to onboard each new tenant
  • Accessibility that had to hold to bank standards
  • Slow, repetitive handoffs between design and engineering

Creating a new brand

half a day, down from two weeks
  1. 1

    Generate the palettes

    Build the Alpha and Brand colour ramps for the new tenant.

  2. 2

    Map the semantics

    Point semantic colours at the palette and tune contrast. Set radius and spacing.

  3. 3

    Swap the brand

    Duplicate Gecko Bank, the generic brand, and apply the palette and tokens.

  4. 4

    Publish

    Publish the library, add the theme to the switcher plugin, and hand engineers the JSON from Tokens Studio.

Adding a tenant to Chameleon: design once in Gecko Bank, then swap the brand.

The system

Chameleon became the single source of truth for design and development at mx51: design tokens, a UI component library, and documentation that engineers and designers both work from. Tenant branding is generated from tokens in minutes rather than rebuilt by hand.

  • Consistency: unified components across every brand
  • Efficiency: less time designing and building the same thing twice, faster releases
  • Accessibility: WCAG 2.1 confidence built into the components
  • Scalability: new tenant branding in minutes
The short explainer made for mx51 staff, including the early colour mapping where the atomic elements were settled first so every product stayed consistent.

What changed

Onboarding a tenant went from two weeks to half a day. Development time dropped noticeably, so updates and releases came faster. And the daily design-to-dev conversation shifted from pixels to product decisions, because the basics were already agreed.