Design Elements
Colors
Icons
Typography
Fonts
Logos

Colors

User-interface colors with their corresponding SASS variable names.

Branding

  • Variable $red
    RGB
    HEX
  • Variable $red-alt
    RGB
    HEX
  • Variable $red-bright
    RGB
    HEX

UI Context & Events

  • Variable $primary-color
    RGB
    HEX
  • Variable $secondary-color
    RGB
    HEX
  • Variable $alert-color
    RGB
    HEX
  • Variable $success-color
    RGB
    HEX
  • Variable $warning-color
    RGB
    HEX
  • Variable $info-color
    RGB
    HEX

Grayscale

  • Variable $white
    RGB
    HEX
  • Variable $ghost
    RGB
    HEX
  • Variable $snow
    RGB
    HEX
  • Variable $vapor
    RGB
    HEX
  • Variable $white-smoke
    RGB
    HEX
  • Variable $silver
    RGB
    HEX
  • Variable $smoke
    RGB
    HEX
  • Variable $gainsboro
    RGB
    HEX
  • Variable $iron
    RGB
    HEX
  • Variable $base
    RGB
    HEX
  • Variable $aluminum
    RGB
    HEX
  • Variable $jumbo
    RGB
    HEX
  • Variable $monsoon
    RGB
    HEX
  • Variable $steel
    RGB
    HEX
  • Variable $charcoal
    RGB
    HEX
  • Variable $tuatara
    RGB
    HEX
  • Variable $oil
    RGB
    HEX
  • Variable $jet
    RGB
    HEX
  • Variable $black
    RGB
    HEX

Helper Classes 

// Any of the color names above have a corresponding helper class as shown below.
// Sets the element text color
.primary-color
// Sets the element background color
.primary-bg-color
Example 
%div(class='snow oil-bg-color')

Rendered HTML