Color
Without color there would be no Brand.
Background
List of color background CSS modifiers approved for the brand
Backgrounds have the capability to have hover states to do so you need to add -hover example would be bg-b5-hover
Primary greens
Primary neutrals
white
bg-n1
bg-n2
bg-n3
bg-n4
bg-n5
bg-n6
bg-black
Secondary / accent colors
bg-b7
bg-b8
UI / specialty states
Opacity
Add class to an <img> or background color to apply opacity opacity-??, where ?? is 90, 80, 70, 60, 50, 40, 30, 20, 10.
<img src="..." class="opacity-90 opacity-30-hover" alt="...">
<img src="..." class="opacity-30 opacity-100-hover" alt="...">Transparency
Add the .bg-transparent class to an element or background color to override the background property.
.bg-transparent
<div class="well bg-transparent">
.bg-transparent
</div>Background gradients
Primary greens
bg-b1-b2-ttb
bg-b2-b4-ttb
bg-b4-b5-ttb
bg-b1-b2-btt
bg-b2-b4-btt
bg-b4-b5-btt
bg-b1-b2-ltr
bg-b2-b4-ltr
bg-b4-b5-ltr
bg-b1-b2-rtl
bg-b2-b4-rtl
bg-b4-b5-rtl
Primary neutrals
bg-white-n1-ttb
bg-white-n2-ttb
bg-white-n1-btt
bg-white-n2-btt
bg-white-n1-ltr
bg-white-n2-ltr
bg-white-n1-rtl
bg-white-n2-rtl
bg-n1-n2-ttb
bg-n1-n3-ttb
bg-n2-n4-ttb
bg-n4-n6-ttb
bg-n1-n2-btt
bg-n1-n3-btt
bg-n2-n4-btt
bg-n4-n6-btt
bg-n1-n2-ltr
bg-n1-n3-ltr
bg-n2-n4-ltr
bg-n4-n6-ltr
bg-n1-n2-rtl
bg-n1-n3-rtl
bg-n2-n4-rtl
bg-n4-n6-rtl
Border
List of option color border CSS modifiers approved for the brand
Borders have the capability to have hover states to do so you need to add -hover
example would be border-b5-hover
Primary greens
border-b1
border-b2
border-b3
border-b4
border-b5
Secondary/accent colors
border-b7
border-b8
UI/specialty states
border-b6
border-b9
border-b10
Primary neutrals
border-n1
border-n2
border-n3
border-n4
border-n5
border-n6
border-black
border-white
Text
List of option color text CSS modifiers approved for the brand
Text has the capability to have hover states to do so you need to add -hover
example would be text-b5-hover
Text color Accessibility
Class .text-b1 is not included in the text classes, since they did not meet AA accessibility standards.
Primary greens
text-b2
text-b3
text-b4
text-b5
Secondary/accent colors
text-b7
text-b8
UI/specialty states
text-b6
text-b9
text-b10
Primary neutrals
text-n1
text-n2
text-n3
text-n4
text-n5
text-n6
text-black