Colors

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)
#000000
color: darken($black50, 30%);

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

$black60
#0d0e0e
color: darken($black50, 10%);

$black50 (Base)
#252729
color: $black50;

$black40
#3d4144
color: lighten($black50, 10%);

$black30
#555a5f
color: lighten($black50, 20%);

$black20
#6e7479
color: lighten($black50, 30%);

$gray80
#747476
color: darken($gray50, 30%);

$gray70
#8e8e8f
color: darken($gray50, 20%);

$gray60
#a7a7a9
color: darken($gray50, 10%);

$gray50 (Base)
#c1c1c2
color: $gray50;

$gray40
#dbdbdb
color: lighten($gray50, 10%);

$gray30
#f4f4f5
color: lighten($gray50, 20%);

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

$yellow80
#d39100
color: darken($yellow50, 30%);

$yellow70
#ffb107
color: darken($yellow50, 20%);

$yellow60
#ffc13a
color: darken($yellow50, 10%);

$yellow50 (Base)
#ffd16d
color: $yellow50;

$yellow40
#ffe1a0
color: lighten($yellow50, 10%);

$yellow30
#fff1d3
color: lighten($yellow50, 20%);

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

Secondary Colors

$blue80
#21465d
color: darken($blue50, 30%);

$blue70
#2e6383
color: darken($blue50, 20%);

$blue60
#3b7fa9
color: darken($blue50, 10%);

$blue50 (Base)
#5499c3
color: $blue50;

$blue40
#7ab0d0
color: lighten($blue50, 10%);

$blue30
#a0c6dd
color: lighten($blue50, 20%);

$blue20
#c5ddeb
color: lighten($blue50, 30%);

$red80
#812020
color: darken($red50, 30%);

$red70
#aa2a2a
color: darken($red50, 20%);

$red60
#ce3939
color: darken($red50, 10%);

$red50 (Base)
#d86262
color: $gray50;

$red40
#e28b8b
color: lighten($red50, 10%);

$red30
#ecb4b4
color: lighten($red50, 20%);

$red20
#f6dddd
color: lighten($red50, 30%);

$green80
#223d3e
color: darken($green50, 30%);

$green70
#355e5e
color: darken($green50, 20%);

$green60
#477e7f
color: darken($green50, 10%);

$green50 (Base)
#599FA0
color: $green50;

$green40
#78b3b4
color: lighten($green50, 10%);

$green30
#99c6c6
color: lighten($green50, 20%);

$green20
#bad8d8
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.

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

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

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

results matching ""

    No results matching ""