“Color” Design Component

Design: zeplin.

Overview

Color is used in the IxDF UI Kit to draw attention, add visual interest, as well as indicate different states of a component. It should be used only when appropriate to prevent visual overload.

Neutral colors

IxDF Colors

Corresponding Color Names in Code

All these shades have a corresponding name in css so that we can create simple classes like “background-accent-01”.

Design Name	Name in Code
neutral-01	white
neutral-02	neutral-02
neutral-03	neutral-03
neutral-04	gray
neutral-05	neutral-05
neutral-06	neutral-06
brand-01	blue
brand-02	brand-02
accent-01	green
accent-02	orange
accent-03	red
accent-04	purple
accent-05	pink

Accessibility

To comply with WCAG AA standards, the color contrast of text and components should be at least 4.5:1.

Color contrast is concerned with the relative colors of the foreground and background elements. Hence, there are different permitted colors for text and components (like forms and buttons) based on the different background colors used.

Note that since external brand colors cannot be changed, they shall be used even if they violate WCAG’s AA standards for color contrast.