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

Source: https://github.com/openfoodfoundation/openfoodnetwork/blob/backoffice-ui-uplift/app/webpacker/css/admin_v3/globals/palette.scss

Color groups

These colors follow the same palette, just different tone

	Name	Should be primarily used for
	Sherpa Blue	Visited links, table headers
	Orient	Primary button hover
	Allports	Buttons, links
	Mystic	Secondary button hover

	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

Shadow styles

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);