The digital brand color palette is shared across all products, including the Rivendell design system. Please also view the section on Color ↗ in our Digital Foundations documentation for more information on the use of color in our products.

General Guidelines

  • $black50 is the primary color used for all copy and headers on a $white background.
  • Be sure the color you use for text passes accessibility tests, for legibility.
  • $yellow50 is used for all primary buttons (an action color).
  • $blue50 is used for navigational links that take you to another page, or anchor you up/down the current page.
  • $gray50 is used for placeholder text on form elements.
  • $gray40 is used for text in a disabled state on form elements.
  • $white is used for text for buttons in a disabled state, when on a $gray50 background.
  • $gray50 is used for the border or background in a disabled state.
  • $red50 is used for warnings and errors.

Color Spectrum & Sass Variables

In an effort to bridge the gap between design and engineering, we use Sass variable naming conventions for our digital colors. Each color has a base value of 50 (e.g. $blue50). Then a range of 7 colors is created from that base color. Using the darken and lighten CSS functions, we generate three darker, and three lighter variations of the base color, in increments of 10% (e.g. lightest $blue20 to darkest $blue80). You can see this in action in all color examples above.

Primary Colors

$black80 ($black)
color: darken($black50, 30%);

$black ($black70)
color: darken($black50, 20%);

color: darken($black50, 10%);

$black50 (Base)
color: $black50;

color: lighten($black50, 10%);

color: lighten($black50, 20%);

color: lighten($black50, 30%);

color: darken($gray50, 30%);

color: darken($gray50, 20%);

color: darken($gray50, 10%);

$gray50 (Base)
color: $gray50;

color: lighten($gray50, 10%);

color: lighten($gray50, 20%);

$white ($gray20)
color: lighten($gray50, 30%);

color: darken($yellow50, 30%);

color: darken($yellow50, 20%);

color: darken($yellow50, 10%);

$yellow50 (Base)
color: $yellow50;

color: lighten($yellow50, 10%);

color: lighten($yellow50, 20%);

$yellow20 ($white)
color: lighten($yellow50, 30%);

Secondary Colors

color: darken($blue50, 30%);

color: darken($blue50, 20%);

color: darken($blue50, 10%);

$blue50 (Base)
color: $blue50;

color: lighten($blue50, 10%);

color: lighten($blue50, 20%);

color: lighten($blue50, 30%);

color: darken($red50, 30%);

color: darken($red50, 20%);

color: darken($red50, 10%);

$red50 (Base)
color: $gray50;

color: lighten($red50, 10%);

color: lighten($red50, 20%);

color: lighten($red50, 30%);

color: darken($green50, 30%);

color: darken($green50, 20%);

color: darken($green50, 10%);

$green50 (Base)
color: $green50;

color: lighten($green50, 10%);

color: lighten($green50, 20%);

color: lighten($green50, 30%);

Background Colors

An additional color palette exists only for background colors. Designed for subtlety. To be used sparingly to define section breaks, or for emphasis.

background-color: rgba($black50, .05);

background-color: rgba($black50, .03);

background-color: rgba($black50, .01);

results matching ""

    No results matching ""