Design styleguide: colors and shadows

Colors

name	technical name	old name	html code
White	`$white`	`$color-1`	`#ffffff`
Green (Key Lime Pie)	`$green`	`$color-2`	`#9fc820`
Teal (Allports)	`$teal`	`$color-3`	`#008397`
Sherpa Blue	`$dark-blue`	`$color-4`	`#004E5B`
Red/Orange (Mojo)	`$red`	`$color-5`	`#c85136`
Yellow (Pizazz)	`$yellow`	`$color-6`	`#ff9300`
Light grey (Porcelain)	`$light-grey`	`$color-7`	`#EFF1F2`
Near-black (Shark)	`$near-black`	`$color-8`	`#191C1D`
Dark grey (Outer Space)	`$dark-grey`	`$color-9`	`#2E3132`
Orient	`$orient`		`#006878`
Mystic	`$mystic`		`#D9E8EB`
Silver Sand	`$silver-sand`		`#BABDBE`
Athens Grey	`$athens-grey`		`#F8F9FA`
Fair Pink	`$fair-pink`		`#FFEFEB`
Roof Terracotta	`$roof-terracotta`		`#B83B1F`
Totem Pole	`$totem-pole`		`#9A260C`

These colors follow the same palette, just different tone

	Name	Should be primarily used for
	Totem Pole	Disruptive buttons
	Roof Terracotta	Disruptive buttons
	Mojo	Menu, Navigation, Disruptive buttons
	Fair Pink	Disruptive buttons

	Name	Should be primarily used for
	Shark	Body text, Headers, any text that's not interactive
	Outer Space	Primary and secondary nav
	Silver Sand	Placeholder text
	Porcelain	Table backgrounds, dividers (see secondary nav bottom line, dividers between condensed rows in tables
	Athens Grey	Primary text fields/dropdowns (search on a page)
	White	Body background, colored button labels

Name	Primarily used for	Baseline color	Code snippet
Main menu shadow	Main menu	Shark	box-shadow: 0px 1px 0px rgba(25, 28, 29, 0.05), 0px 2px 2px rgba(25, 28, 29, 0.07);
Table relaxed row shadow	Underline for rows (relaxed - 56px height) of a table	Shark	box-shadow: 0px 1px 0px rgba(25, 28, 29, 0.05);
Dropdown list shadow	For when a dropdown is open	Shark	box-shadow: 0px 0px 8px 0px rgba(25, 28, 29, 0.25);

Development environment setup

Contributing

Development

Testing

Releasing

Specific features

Data and APIs

Instance-specific configuration

External services

Design