Colors

Base

$white

#FFFFFF

$black

#000000

$green-edsurge

#00998A

$blue-higher-ed

#018AAA

Secondary Palette

$red

#CD0B00

$green

#00998A

Greyscale

$grey-0

#f5f6fa

$grey-1

#E4E6E9

$grey-2

#CBCED3

$grey-3

#ADB5BE

$grey-4

#919DA6

$grey-5

#768492

$grey-6

#59636D

$grey-7

#434A52

$grey-8

#2D3237

$grey-9

#16191B

$grey-10

#000000

Greens

$green-dark3

#012623

$green-dark2

#064D46

$green-dark1

#0E7368

$green-light3

#39AEA2

$green-light2

#68C2B9

$green-light1

#9BD5D1

$green-light0

#F5FAFA

Blues

$blue-dark3

#012229

$blue-dark2

#064554

$blue-dark1

#0F687F

$blue-light3

#3BA1B9

$blue-light2

#6AB9CB

$blue-light1

#9BD0DC

$blue-light0

#EDF6F8

Yellows

$yellow

#F6CA58

$yellow-2

#DFB549

$sponsored-gold

#f1a33f

Social Media

Use these colors only to create social media buttons, which are composed of white icons for each social media and the corresponding background color.

$facebook

#3b5998

$x-company

#55acee

$linkedin

#0074B3

$pinterest

#bd081c

$gplus

#de5246

$email

#5e738a

Helper Classes

Base

.red

.blue

.black

.white

Greens

.green-dark3

.green-dark2

.green-dark1

.green-light3

.green-light2

.green-light1

Blues

.blue-dark3

.blue-dark2

.blue-dark1

.blue-light3

.blue-light2

.blue-light1

.blue-light0

Yellows

.yellow

.yellow-2

Greys

.grey-10

.grey-9

.grey-8

.grey-7

.grey-6

.grey-5

.grey-4

.grey-3

.grey-2

.grey-1

Social Media

.facebook

.x-company

.linkedin

.pinterest

.gplus

.email

Backgrounds

Base

.red-bg

.blue-bg

.black-bg

.white-bg

Greens

.green-dark3-bg

.green-dark2-bg

.green-dark1-bg

.green-light3-bg

.green-light2-bg

.green-light1-bg

Blues

.blue-dark3-bg

.blue-dark2-bg

.blue-dark1-bg

.blue-light3-bg

.blue-light2-bg

.blue-light1-bg

.blue-light0-bg

Yellows

.yellow-bg

.yellow-2-bg

Greys

.grey-10-bg

.grey-9-bg

.grey-8-bg

.grey-7-bg

.grey-6-bg

.grey-5-bg

.grey-4-bg

.grey-3-bg

.grey-2-bg

.grey-1-bg

Social Media

.facebook-bg

.x-company-bg

.linkedin-bg

.pinterest-bg

.gplus-bg

.email-bg

this block has the .gradient-bg on it.

this block has the .gradient-bg-reverse on it.