Switch to WilmingtonOverview
Colors
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. Classes for predefined gradient and transparency styles are included here.
Colors
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 |
Fill Variants
Solid
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 |
Gradient
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 |
Transparent
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 |
None
Use for removing or customizing an existing fill.