Colors

As part of the web brand identity standards we have outlined a suite of approved web colors. The combination of background, text and link colors have been thoroughly tested for color contrast and are compliant with our accessibility policy.

While the Be Boulder visual guidelines advise adding color through photography, this styleguide provides a variety of colors to be used for backgrounds on elements of your site or application.

It is important to implement the color guidelines exactly as they are outlined to meet the required color contrast. Do not introduce variants in the combinations as this can cause issues with color contrast requirements.

While there are a variety of colors available, we suggest either using one of the secondary or tertiary colors per page, or using multiple colors on a single element (for example, a row of 3 colored boxes).

Brand Colors

Neutral Colors

White
Link Example
Light Gray
Link Example
Dark Gray
Link Example

Links & Buttons

Secondary Colors

We recommended only using a single secondary or tertiary color per page.

Light Blue
Link Example
Light Green
Link Example
Light Gold
Link Example
Medium Blue
Link Example
Dark Blue
Link Example
Brick
Link Example

Application Colors

These colors are meant to be used in web applications for highlighting error, warning, and success messages and elements.

Notification/Message Colors

These colors can be used as backgrounds for messages and notifications.

Light Red
Link Example
Light Green
Link Example
Yellow
Link Example

Additional Colors

Should you need other colors for your web application, we suggest choosing colors from the Google Material Color Palette, from which these colors were chosen.

Text Color

When applying the background classes, an accessible text color is also set.

Usage

Black

<div class="padding background-black">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Gold

<div class="padding background-gold">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

White

<div class="padding background-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Light Gray

<div class="padding background-gray-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Dark Gray

<div class="padding background-gray-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Blue

<div class="padding background-blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Light Blue

<div class="padding background-blue-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Light Green

<div class="padding background-green-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Light Gold

<div class="padding background-gold-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Medium Blue

<div class="padding background-blue-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Dark Blue

<div class="padding background-blue-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Brick

<div class="padding background-brick">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Red

<div class="padding background-red">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Green

<div class="padding background-green">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Amber

<div class="padding background-amber">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Light Red

<div class="padding background-red-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Light Green

<div class="padding background-green-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Yellow

<div class="padding background-yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Shades of Gray

There are also some utility classes for shades of gray.

<div class="padding background-gray-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

<div class="padding background-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

<div class="padding background-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

<div class="padding background-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

<div class="padding background-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

<div class="padding background-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

<div class="padding background-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

<div class="padding background-gray-800">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

<div class="padding background-gray-900">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Background Color Only

If you only need to apply a background color, but not set text or link colors within the element, you can use the .background-color-COLORNAME classes. These classes should only be used when the elements within do not display properly when text and link colors are set. Some of these colors will not meet color contrast accessibility standards.

Usage

Black

  
    <div class="padding background-color-black"></div>
  

Gold

  
    <div class="padding background-color-gold"></div>
  

White

  
    <div class="padding background-color-white"></div>
  

Light Gray

  
    <div class="padding background-color-gray-light"></div>
  

Dark Gray

  
    <div class="padding background-color-gray-dark"></div>
  

Blue

  
    <div class="padding background-color-blue"></div>
  

Light Blue

  
    <div class="padding background-color-blue-light"></div>
  

Light Green

  
    <div class="padding background-color-green-light"></div>
  

Light Gold

  
    <div class="padding background-color-gold-light"></div>
  

Medium Blue

  
    <div class="padding background-color-blue-medium"></div>
  

Dark Blue

  
    <div class="padding background-color-blue-dark"></div>
  

Brick

  
    <div class="padding background-color-brick"></div>
  

Red

  
    <div class="padding background-color-red"></div>
  

Green

  
    <div class="padding background-color-green"></div>
  

Amber

  
    <div class="padding background-color-amber"></div>
  

Light Red

  
    <div class="padding background-color-red"></div>
  

Light Green

  
    <div class="padding background-color-green-light"></div>
  

Yellow

  
    <div class="padding background-color-yellow"></div>