Brands in Chroma
Chroma components and patterns use brand themes to match the visual identity of IAG’s direct brands and partners. Apps designed in Chroma can switch brands in Figma and code, meaning a UI created for one brand can easily be used with other brands, avoiding redesign.
Chroma’s token based system allows for visual identity to be defined through a set of pre-defined attributes, tailoring the overall interface to embrace a brands unique look and feel. Utilisation of component and pattern variants allow for further tailoring to suit the needs of each individual brand.
Everything in Chroma can be used by all brands, ensuring quality and consistency through a single source of truth. Allowing focus to be on creating optimal customer experiences by ensuring brand integrity is maintained and delivered for all current and future brands.
How to use Brands
The Brand Provider component contols how to apply brands within your application.
<BrandProvider brand={BRAND_STRING} />
// or
<BrandProvider brand={BRAND_STRING} theme={THEME_STRING} />
Available Brands
Direct Brands
| Logo | Brand Name | Brand String | Brand Colours | Text Colours |
|---|
Partner Brands
These are Logo only brands and therefore you cannot use the <BrandProvider> to reference them.