Skip to main content

Color Palette

Protrak supports following colors in the color palette.

ColorCSS variable name
PRIMARY_DARKvar(--primary-dark)
PRIMARYvar(--primary)
PRIMARY_LIGHTvar(--primary-light)
PRIMARY_SHADOWvar(--shadow-color)
SECONDARY_DARKvar(--secondary-dark)
SECONDARYvar(--secondary)
SECONDARY_LIGHTvar(--secondary-light)
SECONDARY_LIGHTERvar(--secondary-lighter)
PRIMARY_LIGHTERvar(--primary-lighter)
ERRORvar(--error)
SUCCESSvar(--success)
SURFACEvar(--surface)

These can be used in components like:

<H2 color="SECONDARY_LIGHT">

The default color palette has following colors:

image.png