Color

The colors for a design system is important because it reflects the consistency that a design system maintains. The color system in palette is quite simple, straight forward and easy to follow.

The Palette component library also exports a palette object which has access to all the color constants mention below. For Example in order to access the color constant primary, it can be done like this,

palette.primary.primary;

Hover over the color box to get to know the color constant value

Palette Primary (Blue)#

Primary
#2952CC
Secondary
#e5f2fd

Palette Secondary#

Primary
#ffffff
Secondary
#F3F6FF

Green#

Primary
#52BD95
Secondary
#eaf7ee

Yellow#

Primary
#e89f29
Secondary
#fef7e9

Red#

Primary
#D04443
Secondary
#ffdde0

Grey#

Primary
#475967
Secondary
#ebeff3