⬅

Colors

Text Colors

Use color utility classes to add/modify text colors.

Brand Colors

Class Name	Demo
`u-colorPrimary`	Sample text
`u-colorPrimaryLight`	Sample text
`u-colorPrimaryDark`	Sample text
`u-colorSecondary`	Sample text
`u-colorSecondaryLight`	Sample text
`u-colorSecondaryDark`	Sample text

Accent Colors

Class Name	Demo
`u-colorAccentPurple`	Sample text
`u-colorBlue1`	Sample text
`u-colorBlue2`	Sample text
`u-colorBlue3`	Sample text
`u-colorBlue4`	Sample text
`u-colorBlue5`	Sample text
`u-colorBlue6`	Sample text
`u-colorBlue7`	Sample text
`u-colorBlue8`	Sample text
`u-colorBlue9`	Sample text
`u-colorBlue10`	Sample text
`u-colorBlue11`	Sample text

Grayscale

Class Name	Demo
`u-colorWhite`	Sample text
`u-colorGray`	Sample text
`u-colorGrayLight`	Sample text
`u-colorGrayLighter`	Sample text
`u-colorGrayLightest`	Sample text
`u-colorGrayDark`	Sample text
`u-colorGrayDarker`	Sample text
`u-colorGrayDarkest`	Sample text
`u-colorBlackish`	Sample text
`u-colorBlack`	Sample text

Validations

Class Name	Demo
`u-colorSuccess`	Sample text
`u-colorError`	Sample text

Background Colors

Use background color utility classes to add/modify background colors.

Brand Colors

Class Name	Demo
`u-bgPrimary`
`u-bgPrimaryLight`
`u-bgPrimaryDark`
`u-bgSecondary`
`u-bgSecondaryLight`
`u-bgSecondaryDark`

Accent Colors

Class Name	Demo
`u-bgAccentPurple`
`u-bgBlue1`
`u-bgBlue2`
`u-bgBlue3`
`u-bgBlue4`
`u-bgBlue5`
`u-bgBlue6`
`u-bgBlue7`
`u-bgBlue8`
`u-bgBlue9`
`u-bgBlue10`
`u-bgBlue11`

Grayscale

Class Name	Demo
`u-bgWhite`
`u-bgGray`
`u-bgGrayLight`
`u-bgGrayLighter`
`u-bgGrayLightest`
`u-bgGrayDark`
`u-bgGrayDarker`
`u-bgGrayDarkest`
`u-bgBlackish`
`u-bgBlack`

Validations

Class Name	Demo
`u-bgError`
`u-bgSuccess`

Fill Colors

Fill colors are for adding color to SVG’s.

Brand Colors

Class Name	Demo
`u-fillPrimary`
`u-fillPrimaryLight`
`u-fillPrimaryDark`
`u-fillSecondary`
`u-fillSecondaryLight`
`u-fillSecondaryDark`

Grayscale

Class Name	Demo
`u-fillWhite`
`u-fillGray`
`u-fillGrayLight`
`u-fillGrayLighter`
`u-fillGrayLightest`
`u-fillGrayDark`
`u-fillGrayDarker`
`u-fillGrayDarkest`
`u-fillBlackish`
`u-fillBlack`