Skip to main content

About Chroma

Overview​

Chroma is IAG’s Digital Design System. Chroma provides design and code resources, reusable components, Digital multi-branding and guidelines for creating cohesive customer experiences across IAG’s digital products. These resources allow teams to design and build websites and web applications more quickly and efficiently – allowing teams to focus on solving the problems that matter. Designing and developing using Chroma offers a range of benefits including:

  • Quality and consistency across all assets.
  • A single source of truth for design and code.
  • Reduced Redundancy - problems solved once.
  • Robustness - all resources are heavily tested.
  • Speed of delivery - reducing the need to “craft”.
  • Accessibility across design and code assets.

Chroma Principles​

All of Chroma’s components and brand attributes are:

  • Reusable – can be reused across different applications.

  • Repurposable - can be adapted for multiple purposes.

  • Rebrandable – built for seamless re-branding.

  • Stable - tested across all relevant devices.

  • Accessible – to WCAG 2.1 AA compliance.

  • Evidence-based - User tested.

Chroma Resources​

Chroma maintains design libraries in Figma. These libraries contain components, foundations and brand tokens. Chroma supports a React code base. The code is maintained by the core Chroma team. If you’re using a different framework, you can still use the brands we have available in the design system to ensure consistency and quality. Design components, patterns and examples are harvested from products built using Chroma. These have become part of the design system. Teams can use these well-defined elements in their applications and contribute elements back to the system.

Who Uses Chroma?​

Chroma is for every member of a cross-functional delivery team – Designers, Developers, Business Analysts and QA testers.

Designers​

Chroma helps to provide value for our users with accessible, full tested elements and assets, and guidance that designers can rely on to create cohesive experiences across IAG Digital products. Here are some ways designers can begin engaging with Chroma:

Getting Started​

  • Find additional information about starting to work with Chroma

  • Familiarise yourself with the Chroma foundations, components and patterns.

  • Check out the brands available in Chroma.

Tools​

Find information on getting started with Chroma and how to set up core libraries.

Developers​

By leveraging Chroma’s pre-built assets, developers free themselves up to solve problems and be innovative, that ultimately elevates the user experience for end users. Here are some ways developers can begin engaging with Chroma:

Getting started​

  • Familiarise yourself with the Chroma foundations, components, and patterns.

  • Check out the brands available in Chroma.
  • Visit the Developer Getting Started section to find out what’s needed to begin using Chroma.

Tools​

Find all of the up to date technical information on Chroma components and included brands in the Components section or visit the documentation site for chroma-react.

QA testers​

Chroma is a valuable resource for QA testers, making it easier to check which components have been used in design, how they’ve been implemented in code, and the accuracy of Brand implementation. The links and resources in both the Designer and Developer sections will be useful to QA Testers who are looking to use Chroma.

Connect with the team​

Accessibility​

The Chroma Design System components are designed and built to meet WCAG 2.1 AA Accessibility standards. Go to our Accessibility page for more information or look for specific help in the Accessibility section of the individual component pages.