Colors

Dealing with specificity

Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div> with the class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Color Theory

Colors should enhance glance-ability, as well as a means to quickly signpost states (e.g. green means success). Since our brand color is red, a well-known color noting an error or something wrong, our goal should be to minimize the use of red, and when used, to deploy red carefully and with intent. Most of our main actions are red, supported by other colors in the grey palette as well as green, gold, and navy.

With that in mind, color can be pushed too far away from red, resulting in a page that isn’t properly branded. Further, make careful note of the shade of color being used. The main and secondary palette should do most of the work, with dark and light variants used for accents, and never for a page’s main style.

Main Palette

Overall color usage should support the open, airy essence of Cirrus. Avoid using solid blocks of color; avoid using heavy, dark colors. The goal is to achieve a natural balance of color that communicates a sense of space, openness, and air.

Red: Used for main actions. Be conservative.

Green: Shows successful states, or that something went correctly. Avoid red/green combinations when possible.

Navy: Tertiary color, and often appears in charts or on-page navigation.

Gold: Available for charts, or, an intermediate state.

Text color utilities

All the lennox colors are supported for easy inline class usage. These work great for titles and applying different colors to icons.

Red Text Example

Dark Red Text Example

Light Red Text Example

Green Text Example

Dark Green Text Example

Light Green Text Example

Gold Text Example

Dark Gold Text Example

Light Gold Text Example

Blue Text Example

Dark Blue Text Example

Light Blue Text Example

Light Blue Alt Text Example

Black Text Example

Dark Grey Text Example

Medium Grey Text Example

Grey Text Example

Light Grey Text Example

<p class="p-4 color-red">Red Text Example</p>
<p class="p-4 color-red-dark">Dark Red Text Example</p>
<p class="p-4 color-red-light">Light Red Text Example</p>
<p class="p-4 color-green">Green Text Example</p>
<p class="p-4 color-green-dark">Dark Green Text Example</p>
<p class="p-4 color-green-light">Light Green Text Example</p>
<p class="p-4 color-gold">Gold Text Example</p>
<p class="p-4 color-gold-dark">Dark Gold Text Example</p>
<p class="p-4 color-gold-light">Light Gold Text Example</p>
<p class="p-4 color-blue">Blue Text Example</p>
<p class="p-4 color-blue-dark">Dark Blue Text Example</p>
<p class="p-4 color-blue-light">Light Blue Text Example</p>
<p class="p-4 color-blue-light-alt">Light Blue Alt Text Example</p>
<p class="p-4 color-black">Black Text Example</p>
<p class="p-4 color-dark-grey">Dark Grey Text Example</p>
<p class="p-4 color-medium-grey">Medium Grey Text Example</p>
<p class="p-4 color-lennox-grey">Grey Text Example</p>
<p class="p-4 color-light-grey">Light Grey Text Example</p>

Background color utilities

All the lennox colors are supported for easy background color usage. These work great standalone content or needing to style any elements with a custom background color. The `p-4` class is just to make the content show larger. That padding class can be removed when used on a project.

Make sure the color contrast is legible to users with decreased vision or color blindness.