elyseholladay
1/16/2013 - 8:04 PM

SASS color naming setup

SASS color naming setup

// -------------------------------------------------------------- //
// COLORS ------------------------------------------------------- //
// -------------------------------------------------------------- //


$black: #000000
$greydark: #464646
$greymedium: #686868
$grey: #9d9d9d
$greylight: #adadad
$greypale: #d0d0d0
$silver: #f9f9f9
$white: #ffffff




// STYLEABLE COLORS

// primary color: use main brand color.
$primary_color_bright: #c2002b

// darker version of the primary color. can be replaced by a specified brand color if one exists. used mainly for hover states.
$primary_color_dark: darken($primary_color_bright,10%)

// highlight color, should be bright and provide significant contrast to primary color.
$highlight_color_bright: #0073cb

// darker version of the primary color. can be replaced by a specified brand color if one exists. used mainly for hover states.
$highlight_color_dark: darken($highlight_color_bright,10%) 

// tertiary brand color, used sparingly.
$tertiary_color: $greylight


// MESSAGE COLORS

$alert: $highlight_color_bright
$error: $primary_color_dark
$success: #81a635