⬅

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-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

Class Name	Demo
`u-colorForest1`	Sample text
`u-colorForest2`	Sample text
`u-colorForest3`	Sample text
`u-colorForest4`	Sample text
`u-colorForest5`	Sample text
`u-colorForest6`	Sample text
`u-colorForest7`	Sample text
`u-colorForest8`	Sample text
`u-colorForest9`	Sample text

Class Name	Demo
`u-colorSunset1`	Sample text
`u-colorSunset2`	Sample text
`u-colorSunset3`	Sample text
`u-colorSunset4`	Sample text
`u-colorSunset5`	Sample text
`u-colorSunset6`	Sample text
`u-colorSunset7`	Sample text
`u-colorSunset8`	Sample text
`u-colorSunset9`	Sample text

Class Name	Demo
`u-colorMulberry1`	Sample text
`u-colorMulberry2`	Sample text
`u-colorMulberry3`	Sample text
`u-colorMulberry4`	Sample text
`u-colorMulberry5`	Sample text
`u-colorMulberry6`	Sample text
`u-colorMulberry7`	Sample text
`u-colorMulberry8`	Sample text
`u-colorMulberry9`	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

Class Name	Demo
`u-colorCaviar1`	Sample text
`u-colorCaviar2`	Sample text
`u-colorCaviar3`	Sample text
`u-colorCaviar4`	Sample text
`u-colorCaviar5`	Sample text
`u-colorCaviar6`	Sample text
`u-colorCaviar7`	Sample text
`u-colorCaviar8`	Sample text
`u-colorCaviar9`	Sample text
`u-colorCaviar10`	Sample text
`u-colorCaviar11`	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-bgBlue1`
`u-bgBlue2`
`u-bgBlue3`
`u-bgBlue4`
`u-bgBlue5`
`u-bgBlue6`
`u-bgBlue7`
`u-bgBlue8`
`u-bgBlue9`
`u-bgBlue10`
`u-bgBlue11`

Class Name	Demo
`u-bgForest1`
`u-bgForest2`
`u-bgForest3`
`u-bgForest4`
`u-bgForest5`
`u-bgForest6`
`u-bgForest7`
`u-bgForest8`
`u-bgForest9`

Class Name	Demo
`u-bgSunset1`
`u-bgSunset2`
`u-bgSunset3`
`u-bgSunset4`
`u-bgSunset5`
`u-bgSunset6`
`u-bgSunset7`
`u-bgSunset8`
`u-bgSunset9`

Class Name	Demo
`u-bgMulberry1`
`u-bgMulberry2`
`u-bgMulberry3`
`u-bgMulberry4`
`u-bgMulberry5`
`u-bgMulberry6`
`u-bgMulberry7`
`u-bgMulberry8`
`u-bgMulberry9`

Grayscale

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

Class Name	Demo
`u-bgCaviar1`
`u-bgCaviar2`
`u-bgCaviar3`
`u-bgCaviar4`
`u-bgCaviar5`
`u-bgCaviar6`
`u-bgCaviar7`
`u-bgCaviar8`
`u-bgCaviar9`
`u-bgCaviar10`
`u-bgCaviar11`

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`