Skip to main content

Start Designing

What it means to create experiences with Chroma​

Creating experiences with Chroma means designing and building white-label apps that are:

  • User-focused - Puts user needs at the forefront of the experience.

  • Re-themeable - Using tokens and brand-agnostic components to enable any brand theme to be applied.

Chroma helps design and build white-label apps by providing:

  • Consistency - Chroma’s consistent visual language creates familiarity across products and platforms to reduce confusion and improve usability.

  • Flexibility - Chroma enables modular experiences that can be easily adapted and customized to accommodate various use cases and requirements.

  • Branding - Themes built by Chroma align with brand compliance and foundation/component token inheritance. Meaning digital teams don’t have to think about branding.

  • Accessibility - Chroma components are designed and built to meet WCAG 2.1 AA standard accessibility.

Designer libraries​

The Chroma Design System contains designer assets available in Figma. These assets align with code and consist of:

  • Chroma Component library - Chroma’s set of brand agnostic components are available for use in any application. Components use Chroma for their default styling, and can be re-themed to the available brands in Chroma. The component library also contains colour, border radius and padding that make up a brand's look and feel. Changing these styles to a different brand can be done via the variables theme dropdown.

  • Theme libraries - Theme libraries contain the typography styles, logos and icons for each brand.

For designers, these theme libraries are available in Figma.

Getting started​

Chroma’s Figma Libraries are built to design brand agnostic. By using the Chroma Component Library with the Chroma Theme Library, designers can focus on the experience before a brand theme is applied.

In order to use the Figma Libraries effectively:

  • Launch core libraries - Follow the Set up core libraries instructions to launch Chroma Component Library (v6) and Chroma - Theme Library (v6).

  • Design brand agnostic - Design using these core libraries, focusing on meeting the user needs.

  • Swap theme libraries - Once the experience is finalised, follow the swap themes instructions to swap the Chroma theme library out for the required Brand theme library.

  • Made an update? Swap again - If a design is updated once the theme has been swapped, it may show Chroma - Theme Library (v6) colours or fonts. This is because the components are still brand agnostic and Figma cannot swap layers it cannot see or that weren’t there previously. To update any changed/reverted styles back to the required theme, simply swap themes again.

Special case: working with v1 libraries​

There are some version 1 libraries still in existence. They can be recognised by the absence of the “v6” label in the file name. In the rare event you inherit a design using a v1 library, contact the Chroma team for support.