State colors
State colors are divided into five high-level role-based color families: info, error, warning, success, emergency, and disabled.
Additional color guidance
- Theme colors: The select pallet of colors for your projects.
- State colors: The colors for warnings, errors, and other states.
- USWDS System colors: The underlying palette of color tokens from USWDS.
State colors
Info
Info colors communicate neutral informational states such as tips or non-critical status messages.
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| info-lighter | #e7f6f8 | 231, 246, 248 | |
| info-light | #99deea | 153, 222, 234 | |
| info | #00bde3 | 0, 189, 227 | |
| info-dark | #009ec1 | 0, 158, 193 | |
| info-darker | #2e6276 | 46, 98, 118 |
Error
Error colors indicate problems or destructive actions that need attention.
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| error-lighter | #f4e3db | 244, 227, 219 | |
| error-light | #f39268 | 243, 146, 104 | |
| error | #d54309 | 213, 67, 9 | |
| error-dark | #b50909 | 181, 9, 9 | |
| error-darker | #6f3331 | 111, 51, 49 |
Warning
Warning colors call attention to potentially risky or noteworthy conditions.
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| warning-lighter | #faf3d1 | 250, 243, 209 | |
| warning-light | #fee685 | 254, 230, 133 | |
| warning | #ffbe2e | 255, 190, 46 | |
| warning-dark | #e5a000 | 229, 160, 0 | |
| warning-darker | #936f38 | 147, 111, 56 |
Success
Success colors indicate positive states such as completed actions or confirmations.
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| success-lighter | #ecf3ec | 236, 243, 236 | |
| success-light | #70e17b | 112, 225, 123 | |
| success | #00a91c | 0, 169, 28 | |
| success-dark | #008817 | 0, 136, 23 | |
| success-darker | #216e1f | 33, 110, 31 |
Emergency
Emergency colors are for urgent or critical alerts where immediate attention is required.
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| emergency | #9c3d10 | 156, 61, 16 | |
| emergency-dark | #332d29 | 51, 45, 41 |
Disabled
Disabled colors are neutral grays used to indicate inactive or unavailable elements.
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| disabled-lighter | #c9c9c9 | 201, 201, 201 | |
| disabled-light | #919191 | 145, 145, 145 | |
| disabled | #757575 | 117, 117, 117 | |
| disabled-dark | #454545 | 69, 69, 69 | |
| disabled-darker | #1b1b1b | 27, 27, 27 |
Related Utility classes
| Utility | Example | Code |
|---|---|---|
| .bg-color | .bg-primary-darker | class=("bg-primary-darker") |
| .border-color | .border-accent-cool-dark | class=("border-accent-cool-dark") |
| .outline-color | .outline-accent-warm-light | class=("outline-accent-warm-light") |
| .text-color | .text-ink | class=("text-ink") |
| .underline-color | .underline-secondary-lighter | class=("underline-secondary-lighter") |
- Use single-quoted strings in Utility classes.
- Do not quote numbers or px values. With the exception of half (
05), values like'105', and'205'should be treated as strings. - String tokens for half values (like
05) and negative values (likeneg-1) may also be written with their unquoted number token equivalent:0.5,1.5,2.5,-1,-1.5, etc. - If multiple utilities share the same prefix (ex:
.text-or.flex-) or a single utility accepts multiple kinds of values (ex:.borderaccepts both border weight and border color), their shared mixin can accept multiple comma-separated values:u-text('primary-darkest', 'no-underline', 'bold')u-border-top(2px, 'accent-warm')
- Output any utility mixin as
!importantby appending!importantto the mixin’s argument list: u-bg('red-warm-50v', !important)
