Primary
| Code | Example |
|---|---|
bg-deep-blue |
|
bg-deep-blue-subtle |
|
bg-deep-blue-tertiary |
|
bg-aquamarine |
|
bg-aquamarine-subtle |
|
bg-aquamarine-tertiary |
|
bg-reef |
|
bg-reef-subtle |
|
bg-reef-tertiary |
|
bg-burnt-orange |
|
bg-burnt-orange-subtle |
|
bg-burnt-orange-tertiary |
|
bg-bright-orange |
|
bg-bright-orange-subtle |
|
bg-bright-orange-tertiary |
Secondary
| Code | Example |
|---|---|
bg-success |
|
bg-success-subtle |
|
bg-info |
|
bg-info-subtle |
|
bg-warning |
|
bg-warning-subtle |
|
bg-danger |
|
bg-danger-subtle |
Grayscale
| Code | Example |
|---|---|
bg-body-secondary |
|
bg-body-tertiary |
Text and colors – contrast ratio 1.75
| Code | Example |
|---|---|
text-bg-dark |
Dark with contrasting color |
text-bg-deep-blue |
Deep blue with contrasting color |
text-bg-aquamarine |
Aquamarine with contrasting color |
text-bg-reef |
Reef with contrasting color |
text-bg-burnt-orange |
Burnt orange with contrasting color |
text-bg-primary |
Primary with contrasting color |
text-bg-secondary |
Secondary with contrasting color |
text-bg-light |
Light with contrasting color |
text-bg-success |
Success with contrasting color |
text-bg-info |
Info with contrasting color |
text-bg-warning |
Warning with contrasting color |
text-bg-danger |
Danger with contrasting color |