IxDF UI Kit

“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

neutral-01
#FFFFFF
neutral-02
#F9F9F9
neutral-03
#ECECEC
neutral-04
#BCBCBC
neutral-05
#6A6A6A
neutral-06
#2B2B2B

IxDF Colors

brand-01
#009CDE
brand-02
#0D6FBR
accent-01
#457205
accent-02
#F5851E
accent-03
#D21F18
accent-04
#800080
accent-05
#CF6DC8

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.