Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment