Backgrounds
Use backgrounds to style elements to match a particular design. Background colors automatically adjust the foreground colors for accessible contrast and clear legibility.
Examples and Code
Section titled “Examples and Code”
Open Full Example
<div class="grid grid--2col grid--strict grid--flush text-align-center">
<div class="grid__item card--borders palette-bg-uo-green">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>UO Green</strong></h3>
<p class="text-align-center"><strong>Class:</strong></p>
<p class="text-align-center">palette-bg-uo-green</p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders palette-bg-uo-yellow">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>UO Yellow</strong></h3>
<p class="text-align-center"><strong>Class:</strong></p>
<p class="text-align-center">palette-bg-uo-yellow</p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders palette-bg-uo-legacy-green">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>UO Legacy Green</strong></h3>
<p class="text-align-center"><strong>Class:</strong></p>
<p class="text-align-center">palette-bg-uo-legacy-green</p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders palette-bg-grass-green">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Grass Green</strong></h3>
<p class="text-align-center"><strong>Class:</strong></p>
<p class="text-align-center">palette-bg-grass-green</p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders palette-bg-lime-green">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Lime Green</strong></h3>
<p class="text-align-center"><strong>Class:</strong></p>
<p class="text-align-center">palette-bg-lime-green</p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders palette-bg-chartreuse">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Chartreuse</strong></h3>
<p class="text-align-center"><strong>Class:</strong></p>
<p class="text-align-center">palette-bg-chartreuse</p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders palette-bg-dark-blue">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Dark Blue</strong></h3>
<p class="text-align-center"><strong>Class:</strong></p>
<p class="text-align-center">palette-bg-dark-blue</p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders palette-bg-light-blue">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Light Blue</strong></h3>
<p class="text-align-center"><strong>Class:</strong></p>
<p class="text-align-center">palette-bg-light-blue</p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders palette-bg-berry">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Berry</strong></h3>
<p class="text-align-center"><strong>Class:</strong></p>
<p class="text-align-center">palette-bg-berry</p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders palette-bg-dark-gray">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Dark Gray</strong></h3>
<p class="text-align-center"><strong>Class:</strong></p>
<p class="text-align-center">palette-bg-dark-gray</p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders palette-bg-medium-gray">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Medium Gray</strong></h3>
<p class="text-align-center"><strong>Class:</strong></p>
<p class="text-align-center">palette-bg-medium-gray</p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders palette-bg-light-gray">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Light Gray</strong></h3>
<p class="text-align-center"><strong>Class:</strong></p>
<p class="text-align-center">palette-bg-light-gray</p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders palette-bg-black">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Black</strong></h3>
<p class="text-align-center"><strong>Class:</strong></p>
<p class="text-align-center">palette-bg-black</p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders palette-bg-white">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>White</strong></h3>
<p class="text-align-center"><strong>Class:</strong></p>
<p class="text-align-center">palette-bg-white</p>
<p class="text-align-center"> </p>
</div>
</div>
Open Full Example
<div class="grid grid--2col palette-bg-uo-green grid--flush text-align-center">
<div class="grid__item card--borders bg-pattern-waves">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Waves</strong></h3>
<p class="text-align-center"><strong>Classes:</strong></p>
<p class="text-align-center">palette-bg-uo-green</p>
<p class="text-align-center"><strong>bg-pattern-waves</strong></p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders bg-pattern-diagonal">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Diagonal Lines</strong></h3>
<p class="text-align-center"><strong>Classes:</strong></p>
<p class="text-align-center">palette-bg-uo-green</p>
<p class="text-align-center"><strong>bg-pattern-diagonal</strong></p>
</div>
<div class="grid__item card--borders bg-pattern-prisms">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Geometric Prisms</strong></h3>
<p class="text-align-center"><strong>Classes:</strong></p>
<p class="text-align-center">palette-bg-uo-green</p>
<p class="text-align-center"><strong>bg-pattern-prisms</strong></p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders bg-pattern-molecules">
<p> </p>
<h3 class="text-align-center"><strong>Molecules</strong></h3>
<p class="text-align-center"><strong>Classes:</strong></p>
<p class="text-align-center">palette-bg-uo-green</p>
<p class="text-align-center"><strong>bg-pattern-molecules</strong></p>
</div>
<div class="grid__item card--borders bg-pattern-circles">
<p> </p>
<h3 class="text-align-center"><strong>Circles</strong></h3>
<p class="text-align-center"><strong>Classes:</strong></p>
<p class="text-align-center">palette-bg-uo-green</p>
<p class="text-align-center"><strong>bg-pattern-circles</strong></p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders bg-pattern-topo">
<p> </p>
<h3 class="text-align-center"><strong>Topographic</strong></h3>
<p class="text-align-center"><strong>Classes:</strong></p>
<p class="text-align-center">palette-bg-uo-green</p>
<p class="text-align-center"><strong>bg-pattern-topo</strong></p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders bg-pattern-dots">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Dots</strong></h3>
<p class="text-align-center"><strong>Classes:</strong></p>
<p class="text-align-center">palette-bg-uo-green</p>
<p class="text-align-center"><strong>bg-pattern-dots</strong></p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders bg-pattern-confetti">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Confetti</strong></h3>
<p class="text-align-center"><strong>Classes:</strong></p>
<p class="text-align-center">palette-bg-uo-green</p>
<p class="text-align-center"><strong>bg-pattern-confetti</strong></p>
<p class="text-align-center"> </p>
</div>
</div>
Open Full Example
<div class="grid grid--2col context--foreground-light grid--strict grid--flush text-align-center">
<div class="grid__item card--borders bg-yellow-green-gradient context--foreground-light">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Yellow to Green</strong></h3>
<p class="text-align-center"><strong>Classes:</strong></p>
<p class="text-align-center">bg-yellow-green-gradient</p>
<p class="text-align-center"><strong>context--foreground-light</strong></p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders bg-green-gradient-1">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Green to Yellow</strong></h3>
<p class="text-align-center"><strong>Classes:</strong></p>
<p class="text-align-center">bg-green-gradient-1</p>
<p class="text-align-center"><strong>context--foreground-light</strong></p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders bg-green-gradient-2">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Dark Green to Light Green</strong></h3>
<p class="text-align-center"><strong>Classes:</strong></p>
<p class="text-align-center">bg-green-gradient-2</p>
<p class="text-align-center"><strong>context--foreground-light</strong></p>
<p class="text-align-center"> </p>
</div>
<div class="grid__item card--borders bg-green-gradient-3">
<p class="text-align-center"> </p>
<h3 class="text-align-center"><strong>Light Green to Dark Green</strong></h3>
<p class="text-align-center"><strong>Classes:</strong></p>
<p class="text-align-center">bg-green-gradient-3</p>
<p class="text-align-center"><strong>context--foreground-light</strong></p>
<p class="text-align-center"> </p>
</div>
</div>
Open Full Example
<h2>Green Textures</h2>
<div class="grid grid--2col grid--strict grid--flush text-align-center">
<div class="grid__item card--borders image-bg-item bg-green-1 context--foreground-light">
<h4><br>Green Texture 1</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-1</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-2 context--foreground-light">
<h4><br>Green Texture 2</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-2</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-3 context--foreground-light">
<h4><br>Green Texture 3</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-3</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-4 context--foreground-light">
<h4><br>Green Texture 4</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-4</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
</div>
<h2>Green Leaves</h2>
<div class="grid grid--2col grid--strict grid--flush text-align-center">
<div class="grid__item card--borders image-bg-item bg-green-leaves-1 context--foreground-light">
<h4><br>Green Leaves 1</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-leaves-1</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-leaves-2 context--foreground-light">
<h4><br>Green Leaves 2</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-leaves-2</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-leaves-3 context--foreground-light">
<h4><br>Green Leaves 3</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-leaves-3</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-leaves-4 context--foreground-light">
<h4><br>Green Leaves 4</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-leaves-4</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-leaves-5 context--foreground-light">
<h4><br>Green Leaves 5</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-leaves-5</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
</div>
<h2>Green Trees</h2>
<div class="grid grid--2col grid--strict grid--flush text-align-center">
<div class="grid__item card--borders image-bg-item bg-green-trees-1 context--foreground-light">
<h4><br>Green Trees 1</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-trees-1</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-trees-2 context--foreground-light">
<h4><br>Green Trees 2</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-trees-2</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-trees-3 context--foreground-light">
<h4><br>Green Trees 3</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-trees-3</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-trees-4 context--foreground-light">
<h4><br>Green Trees 4</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-trees-4</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-trees-5 context--foreground-light">
<h4><br>Green Trees 5</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-trees-5</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-trees-6 context--foreground-light">
<h4><br>Green Trees 6</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-trees-6</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
</div>
<h2>Green Grasses</h2>
<div class="grid grid--2col grid--strict grid--flush text-align-center">
<div class="grid__item card--borders image-bg-item bg-green-grass-1 context--foreground-light">
<h4><br>Green Grasses 1</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-grass-1</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-grass-2 context--foreground-light">
<h4><br>Green Grasses 2</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-grass-2</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-grass-3 context--foreground-light">
<h4><br>Green Grasses 3</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-grass-3</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-grass-4 context--foreground-light">
<h4><br>Green Grasses 4</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-grass-4</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-grass-5 context--foreground-light">
<h4><br>Green Grasses 5</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-grass-5</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-green-grass-6 context--foreground-light">
<h4><br>Green Grasses 6</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-green-grass-6</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
</div>
<h2>Yellow Textures</h2>
<div class="grid grid--2col grid--strict grid--flush text-align-center">
<div class="grid__item card--borders image-bg-item bg-yellow-1">
<h4><br>Yellow Texture 1</h4>
<p><strong>Class</strong>:</p>
<p><strong>bg-yellow-1</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-yellow-2">
<h4><br>Yellow Texture 2</h4>
<p><strong>Class</strong>:</p>
<p><strong>bg-yellow-2</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-yellow-3">
<h4><br>Yellow Texture 3</h4>
<p><strong>Class</strong>:</p>
<p><strong>bg-yellow-3</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-yellow-4">
<h4><br>Yellow Texture 4</h4>
<p><strong>Class</strong>:</p>
<p><strong>bg-yellow-4</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-yellow-5">
<h4><br>Yellow Texture 5</h4>
<p><strong>Class</strong>:</p>
<p><strong>bg-yellow-5</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-yellow-6">
<h4><br>Yellow Texture 6</h4>
<p><strong>Class</strong>:</p>
<p><strong>bg-yellow-6</strong><br> </p>
</div>
</div>
<h2>Yellow Leaves</h2>
<div class="grid grid--2col grid--strict grid--flush text-align-center">
<div class="grid__item card--borders image-bg-item bg-yellow-leaves-1">
<h4><br>Yellow Leaves 1</h4>
<p><strong>Class</strong>:</p>
<p><strong>bg-yellow-leaves-1</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-yellow-leaves-2">
<h4><br>Yellow Leaves 2</h4>
<p><strong>Class</strong>:</p>
<p><strong>bg-yellow-leaves-2</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-yellow-leaves-3">
<h4><br>Yellow Leaves 3</h4>
<p><strong>Class</strong>:</p>
<p><strong>bg-yellow-leaves-3</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-yellow-leaves-4">
<h4><br>Yellow Leaves 4</h4>
<p><strong>Class</strong>:</p>
<p><strong>bg-yellow-leaves-4</strong><br> </p>
</div>
</div>
<h2>Gray Textures</h2>
<div class="grid grid--2col grid--strict grid--flush text-align-center">
<div class="grid__item card--borders image-bg-item bg-gray-1 context--foreground-light">
<h4><br>Gray Textures 1</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-gray-1</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-gray-2 context--foreground-light">
<h4><br>Gray Textures 2</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-gray-2</strong></p>
<p><strong>context--foreground-light</strong><br> </p>
</div>
</div>
<h2>Soaring and Swimming Ducks</h2>
<div class="grid grid--2col grid--strict grid--flush text-align-center">
<div class="grid__item card--borders image-bg-item bg-soaring-ducks-green">
<h4><br>Soaring Ducks Green</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-soaring-ducks-green</strong></p>
<p> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-soaring-ducks-yellow">
<h4><br>Soaring Ducks Yellow</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-soaring-ducks-yellow</strong></p>
<p> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-soaring-ducks-white">
<h4><br>Soaring Ducks White</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-soaring-ducks-white</strong></p>
<p> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-swimming-ducks-green">
<h4><br>Swimming Ducks Green</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-swimming-ducks-green</strong></p>
<p> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-swimming-ducks-yellow">
<h4><br>Swimming Ducks Yellow</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-swimming-ducks-yellow</strong></p>
<p> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-swimming-ducks-white">
<h4><br>Swimming Ducks White</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-swimming-ducks-white</strong></p>
<p> </p>
</div>
</div>
<h2>Soaring and Swimming Ducks (Edge Style)</h2>
<div class="grid grid--1col grid--strict grid--flush text-align-center">
<div class="grid__item card--borders image-bg-item bg-soaring-ducks-edges-green">
<h4><br>Soaring Ducks (Edges) Green</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-soaring-ducks-edges-green</strong></p>
<p> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-soaring-ducks-edges-yellow">
<h4><br>Soaring Ducks (Edges) Yellow</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-soaring-ducks-edges-yellow</strong></p>
<p> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-soaring-ducks-edges-yellow-alt">
<h4><br>Soaring Ducks (Edges) Yellow (Alt)</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-soaring-ducks-edges-yellow-alt</strong></p>
<p> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-soaring-ducks-edges-white">
<h4><br>Soaring Ducks (Edges) White</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-soaring-ducks-edges-white</strong></p>
<p> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-soaring-ducks-edges-green-alt">
<h4><br>Soaring Ducks (Edges) Green (Alt)</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-soaring-ducks-edges-green-alt</strong></p>
<p> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-swimming-ducks-edges-green">
<h4><br>Swimming Ducks (Edges) Green</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-swimming-ducks-edges-green</strong></p>
<p> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-swimming-ducks-edges-yellow">
<h4><br>Swimming Ducks (Edges) Yellow</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-swimming-ducks-edges-yellow</strong></p>
<p> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-swimming-ducks-edges-yellow-alt">
<h4><br>Swimming Ducks (Edges) Yellow (Alt)</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-swimming-ducks-edges-yellow-alt</strong></p>
<p> </p>
</div>
<div class="grid__item card--borders image-bg-item bg-swimming-ducks-edges-white">
<h4><br>Swimming Ducks (Edges) White</h4>
<p><strong>Classes</strong>:</p>
<p><strong>bg-swimming-ducks-edges-white</strong></p>
<p> </p>
</div>
</div>Apply the class for the given style to the element. When using the patterns, apply the background color class first in the list, and then the pattern class, like class="palette-bg-uo-green bg-pattern-diagonal"
Background Colors
Section titled “Background Colors”These classes set a solid color as the background and a light or dark base color for the foreground.
| Classname | Color | Foreground Color | Brand Color Type | Hex Value |
|---|---|---|---|---|
palette-bg-uo-green | UO Green | Dark | Primary | #007030 |
palette-bg-uo-yellow | UO Yellow | Dark | Primary | #FEE11A |
palette-bg-uo-legacy-green | UO Legacy Green | Light | Secondary | #104735 |
palette-bg-grass-green | Grass Green | Dark | Secondary | #489D46 |
palette-bg-lime-green | Lime Green | Dark | Secondary | #8ABB40 |
palette-bg-chartreuse | Chartreuse | Dark | Secondary | #E2E11B |
palette-bg-dark-blue | Dark Blue | Light | Secondary | #004F6E |
palette-bg-light-blue | Light Blue | Dark | Secondary | #00A5B5 |
palette-bg-berry | Berry | Light | Secondary | #8D1D58 |
palette-bg-dark-gray | Dark Gray | Light | Secondary | #4D5859 |
palette-bg-medium-gray | Medium Gray | Dark | Secondary | #A2AAAD |
palette-bg-light-gray | Light Gray | Dark | Secondary | #D8DCDA |
palette-bg-black | Black | Light | System | #000000 |
palette-bg-white | White | Dark | Sytem | #FFFFFF |
Background Patterns
Section titled “Background Patterns”These classes apply a texture pattern to an existing background, they should be used in conjunction with a solid background color.
| Classname | Pattern |
|---|---|
| bg-pattern-waves | Waves |
| bg-pattern-diagonal | Diagonal Lines |
| bg-pattern-prisms | Geometric Prisms |
| bg-pattern-molecules | Molecules |
| bg-pattern-circles | Circles |
| bg-pattern-topo | Topographic |
| bg-pattern-dots | Dots |
| bg-pattern-confetti | Confetti |
Image and Gradient Backgrounds
Section titled “Image and Gradient Backgrounds”These classes apply a while background color and image to a background. These will need a foreground color context set manually using context--foreground-light or context--foreground-dark.
| Classname | Background | Background Style | Recommended Foreground Context |
|---|---|---|---|
| bg-green-grass-1 | Green Grasses 1 | Green Grasses | context--foreground-light |
| bg-green-grass-2 | Green Grasses 2 | Green Grasses | context--foreground-light |
| bg-green-grass-3 | Green Grasses 3 | Green Grasses | context--foreground-light |
| bg-green-grass-4 | Green Grasses 4 | Green Grasses | context--foreground-light |
| bg-green-grass-5 | Green Grasses 5 | Green Grasses | context--foreground-light |
| bg-green-grass-6 | Green Grasses 6 | Green Grasses | context--foreground-light |
| bg-yellow-1 | Yellow Texture 1 | Yellow Textures | context--foreground-dark |
| bg-yellow-2 | Yellow Texture 2 | Yellow Textures | context--foreground-dark |
| bg-yellow-3 | Yellow Texture 3 | Yellow Textures | context--foreground-dark |
| bg-yellow-4 | Yellow Texture 4 | Yellow Textures | context--foreground-dark |
| bg-yellow-5 | Yellow Texture 5 | Yellow Textures | context--foreground-dark |
| bg-yellow-6 | Yellow Texture 6 | Yellow Textures | context--foreground-dark |
| bg-yellow-leaves-1 | Yellow Leaves 1 | Yellow Leaves | context--foreground-dark |
| bg-yellow-leaves-2 | Yellow Leaves 2 | Yellow Leaves | context--foreground-dark |
| bg-yellow-leaves-3 | Yellow Leaves 3 | Yellow Leaves | context--foreground-dark |
| bg-yellow-leaves-4 | Yellow Leaves 4 | Yellow Leaves | context--foreground-dark |
| bg-gray-1 | Gray Textures 1 | Gray Textures | context--foreground-light |
| bg-gray-2 | Gray Textures 2 | Gray Textures | context--foreground-light |
| bg-soaring-ducks-green | Soaring Ducks Green | Soaring Ducks | Automatic |
| bg-soaring-ducks-yellow | Soaring Ducks Yellow | Soaring Ducks | Automatic |
| bg-soaring-ducks-white | Soaring Ducks White | Soaring Ducks | Automatic |
| bg-swimming-ducks-green | Swimming Ducks Green | Swimming Ducks | Automatic |
| bg-swimming-ducks-yellow | Swimming Ducks Yellow | Swimming Ducks | Automatic |
| bg-swimming-ducks-white | Swimming Ducks White | Swimming Ducks | Automatic |
| bg-soaring-ducks-edges-green | Soaring Ducks (Edges) Green | Soaring Ducks (Edge Style) | Automatic |
| bg-soaring-ducks-edges-yellow | Soaring Ducks (Edges) Yellow | Soaring Ducks (Edge Style) | Automatic |
| bg-soaring-ducks-edges-yellow-alt | Soaring Ducks (Edges) Yellow (Alt) | Soaring Ducks (Edge Style) | Automatic |
| bg-soaring-ducks-edges-white | Soaring Ducks (Edges) White | Soaring Ducks (Edge Style) | Automatic |
| bg-soaring-ducks-edges-green-alt | Soaring Ducks (Edges) Green (Alt) | Soaring Ducks (Edge Style) | Automatic |
| bg-swimming-ducks-edges-green | Swimming Ducks (Edges) Green | Swimming Ducks (Edge Style) | Automatic |
| bg-swimming-ducks-edges-yellow | Swimming Ducks (Edges) Yellow | Swimming Ducks (Edge Style) | Automatic |
| bg-swimming-ducks-edges-yellow-alt | Swimming Ducks (Edges) Yellow (Alt) | Swimming Ducks (Edge Style) | Automatic |
| bg-swimming-ducks-edges-white | Swimming Ducks (Edges) White | Swimming Ducks (Edge Style) | Automatic |
Guidance
Section titled “Guidance”Usage Guidance
Section titled “Usage Guidance”- Give envelopes a distinct tone: Use on an envelope or other “section” of content to give that content a distinct tone.
- Add to cards: Use on an a card or group of cards to make them stand out.
- Use primary brand colors: Use the primary brand colors for larger element background and the secondary brand colors for smaller accent elements.
- Don’t apply to inline text for highlight effects
- Avoid legacy green: Don’t use the UO Legacy Green color for core branding elements, use UO Green instead.
- Avoid secondary colors for prominent elements
Further usage guidance is available on the Oregon Brand Guide
Accessibility Guidance
Section titled “Accessibility Guidance”- Ensure good contrast: The background color classes will change the foreground color by default to provide proper contrast, however, all your content within that may not have proper contrast if font colors are overridden. Always check to ensure that the text content in front of the background has sufficient contrast.