colors-by-use.md

Example colors by use

// General
$color-primary:           $cyan;
$color-secondary:         $tomato;

// Backgrounds
$highlight-background:    $white;
$main-background:         $off-white;
$recessed-background:     $paper;
$reverse-background:      $black;
$dark-wall:               linear-gradient(to bottom, $midnight-blue, lighten($midnight-blue, 10%) 40%, lighten($midnight-blue, 10%), $midnight-blue);

// Buttons
$primary-button:          $color-primary;

// Icons
$quiet-icon:              $light-gray;
$quiet-icon-hover:        $base-gray;

// Type
$primary-heading:         $coal;
$reverse-heading:         $white;
$primary-text:            $steel;
$secondary-text:          $base-gray;
$reverse-secondary-text:  rgba($white, .6);
$quiet-text:              $light-gray;
$dark-text:               $denim;

// Interactive
$primary-link:            $cyan;
$primary-link-hover:      lighten($primary-link, 15%);

// Borders
$primary-border:         rgba($coal, .15);
$light-border:           rgba($coal, .2);