Skip to main content

Extending Chroma

How to build upon existing foundations and components to create tailored solutions.

Creating custom components​

Chroma provides context agnostic components and patterns. There may be times when custom UI elements need to be designed and built to meet a specific user need that's not covered in Chroma. While these may not come out-of-the-box, they can be created using Chroma.

To maintain consistent design language and interactions that users are familiar with, utilise Chroma's foundations (colour, typography, border radius etc) and existing components in Chroma as a starting point to build and adapt upon. This will also save time and effort by building with already tested and accessible solutions. By utilising the foundations of Chroma, designers can create UIs that can be built by developers and be re-themed per brand.

Some examples of custom components can include:

  • Sidenavs
  • Side bars
  • Progress indicators
  • Sliders

Using tokens​

When designing custom components, use Chroma tokens for colour, border widths, border radius, spacing and box shadows. Chroma tokens are available both in Figma and code to ensure consistency and build-ability, with utility classes also available to developers mapped directly to the CHroma tokens. This provides the flexibility to design and develop UIs without requiring everything to be a component within Chroma.

Examples where Chroma has provided a base example for custom components to be created from:

Choosing the right token​

Foundation and component tokens are available. It is important to use the correct token to ensure the intended outcome is achieved.

Using the right colour tokens is important when brand switching, to ensure brand compliance and accessibility. You can use utility classes for things such bored radius or spacing, or component tokens if you need your custom component to align with an already existing one. For example, if you create a new form field, leveraging the inputs border radius will mean the border radius will change as required per brand to match all form fields.

Building in tailwind or css​

To build simple UIs, developers can leverage tailwind classes for styling and layout. Where more complexity is required, create your own css using Chroma's design tokens.

Leveraging the design community​

There is a high chance that a solution has been explored before. Designers can check in with IAG’s design community via the #chroma-support slack channel for teams who have faced similar user needs or researched similar solutions.

Leveraging the great minds in our design community and encouraging re-use will help us maintain consistent and user friendly experiences across all platforms and apps. It will also bring us closer to the goal of solving problems once.