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 Library contains designer assets available in Figma. These assets align with code and consist of brand-agnostic components and themes for all brands in the Chroma Design System. Components are styled in the Chroma theme by default, but can be re-styled to any Brand using the variables theme dropdown. It also contains essential elements like logos, icons, typography, colour, border radius, and spacing, as well as other foundational utility tokens for creating user interfaces.

Getting started​

The Chroma Design System Figma Library is built to design brand agnostic.

In order to use the Figma Library effectively:

  • Launch Library - Follow the Set up library instructions to launch Chroma Design System Figma Library.

  • Design brand agnostic - Design using this library, focusing on meeting the user needs.

  • Swap brand theme - Once the experience is finalised, follow the swap themes instructions to apply different brand themes.