Use the colors classes to alter the color of font or background colors. Be sure to follow our color guidelines and use colors at sufficient contrast to meet accessibility standards. Predefined gradient and transparency styles are included here.
These utilities control CSS properties related to color and background color.
Token | Hex | Font Class | Background Class |
---|---|---|---|
PrimaryBase | #007856 | .u-color--primary-base | .u-bg--primary-base |
PrimaryLight | #7AB800 | .u-color--primary-light | .u-bg--primary-light |
PrimaryDark | #005C42 | .u-color--primary-dark | .u-bg--primary-dark |
YellowBase | #FFB300 | .u-color--yellow-base | .u-bg--yellow-base |
OrangeBase | #B55612 | .u-color--orange-base | .u-bg--orange-base |
OrangeLight | #FFE4CB | .u-color--orange-light | .u-bg--orange-light |
RedBase | #BE4940 | .u-color--red-base | .u-bg--red-base |
RedLight | #FFD4D1 | .u-color--red-light | .u-bg--red-light |
GreenBase | #327E75 | .u-color--green-base | .u-bg--green-base |
GreenLight | #D8F3E4 | .u-color--green-light | .u-bg--green-light |
BlueBase | #6E86A6 | .u-color--blue-base | .u-bg--blue-base |
BlueLight | #E7EBF3 | .u-color--blue-light | .u-bg--blue-light |
GrayBase | #BABABA | .u-color--gray-base | .u-bg--gray-base |
GrayLight | #D7D7D7 | .u-color--gray-light | .u-bg--gray-light |
GrayLighter | #EFEFEF | .u-color--gray-lighter | .u-bg--gray-lighter |
GrayDark | #767676 | .u-color--gray-dark | .u-bg--gray-dark |
GrayDarker | #333333 | .u-color--gray-darker | .u-bg--gray-darker |
White | #FFFFFF | .u-color--white | .u-bg--white |
Black | #000000 | .u-color--black | .u-bg--black |
Use for filling objects with a single, solid color.
Hex | |
---|---|
Green / Primary / Base | #007856 |
Green / Secondary | #EAF7EF |
Gray / Lighter | #EFEFEF |
Gray / Darker | #333333 |
White | #FFFFFF |
Use for filling objects with a predefined gradient between two colors.
Start | Finish | Class | |
---|---|---|---|
Green / Primary / Base | color: #18864A x, y: 0%, 0% | color: #007856 x, y: 100%, 100% | .u-bg--gradient-primary-base |
Gray / Light | color: #EFEFEF x, y: 0%, 0% | color: #D7D7D7 x, y: 100%, 100% | .u-bg--gradient-gray-lighter |
Use for filling objects with a single color at a predefined opacity.
Hex | Opacity | Class | |
---|---|---|---|
Green / Primary / Base / 85% | #007856 | 85% | .u-bg--transparent-primary-base-85 |
Black / 15% | #000 | 15% | .u-bg--transparent-black-15 |
Black / 25% | #000 | 25% | .u-bg--transparent-black-25 |
Use for removing or customizing an existing fill.