Color

Owned by Jesilyn Barnes (Deactivated)
Last updated: Jun 02, 2019 by Karen Jennings
4 min read

Color, on Ferguson.com, is used to guide the users attention and focus through a layout to the most important elements to help them achieve their goals faster. We do this by being purposeful and consistent in our use of color, allowing the user to learn what certain colors mean over time.

We primarily have 3 categories of colors which help drive their use.

Brand Colors

Brand colors are colors that are either derived from the brand of Ferguson or have been discovered to compliment or contrast the brand colors as needed to stand out on the site. We use these colors to create focus points in our layouts that will help the users identify the red routes through their experience.

Brand - #00446A

The brand color is defined by Marketing and has been adapted to Ferguson.com to identify key elements with the Ferguson brand. It's primary use is in the main navigation to reassure the user that they are in fact on Ferguson.com.

Brand Alt - #03324C

The brand alt color is designed to create contrast with the brand color. It is primarily used to create separate sections in an element that uses the brand color as the background, as in the main navigation of the site.

Primary - #1C88C7

The primary color is used on Ferguson.com for 3 main purposes:

  1. Primarily, to identify the main action on a page
  2. Secondarily, to show which elements are "active"
  3. Finally, to highlight elements that need to be identified as interactive.

The use of the primary color should reflect the priority of the purpose it's being used for. (used more heavily when being used for its primary purpose rather than for its secondary purpose.)

Secondary - #D8E8F5

The secondary color can be used to compliment the primary color and assist it in achieving its minor purposes without distracting the user from the major purpose of the primary color.

State Colors

State colors are primarily used to set a severity level for messaging on Ferguson.com. Each color has an alternative version which can be used behind text to maintain contrast that meet WC3 standards for accessibility. Text should NOT be set in a state color.

Info - #3E6787

The info color is used to identify elements that are at the informative-level of severity

Success - #1ABC81

The success color is used to identify elements that are at the success-level of severity

Warning - #FF9D35

The warning color is used to identify elements that are at the warning-level of severity

Error - #ED3B38

The error color is used to identify elements that are at the error-level of severity

Info Alt - #DBE3E9

Success Alt - #D5F2E8

Warning Alt - #FFEDDA

Error Alt - #FBDBDA


Neutral Colors

Neutral colors are primarily used to separate UI elements and create contrast throughout a layout. Secondarily, they can be used to show if elements are disabled.

Emphasis - #F0F3F5

The emphasis color can be used if special attention needs to be drawn to a specific section. Alternatively, it can be used as the canvas color of the site in order to draw attention to non-emphasized sections (as in card-style layouts).

Disabled - #B3B3B3

The disabled color can be used to communicate when an element is in the disabled state. Often times it is used with the border color if more contrast is needed.

Border - #E4E3E3

The border color is the default color for input borders and horizontal rules's throughout the site. It can also be used to show that an element is disabled if more contrast is needed than what the disabled color provides.

Dark - #595454

The dark color is the primary color for text on the site. It provides sufficient contrast with the common background colors used by the site according to WC3 accessibility standards.