# Color

The color palette is currently available as SCSS variables as part of the SCSS toolkit. Please make use of the available color variables below when building your projects:

# Color palette

# Intent scale

$color-app-background

#f4f7f5

$color-text

#242626

$color-brand

#3fa534

$color-error

#dd1b1b

$color-info

#2c87ea

$color-warning

#f4ce2b

# Base scale

$color-pink

#e11970

$color-dark-green

#235f3a

$color-light-green

#9bc31c

$color-goco-green

#3fa534

$color-peach

#ea6e3a

$color-grey

#c7cfd0

$color-red

#dd1b1b

$color-blue

#2c87ea

$color-white

#ffffff

$color-black

#242626

$color-yellow

#f4ce2b

# Pink scale

$color-pink-0

#fff2f9

$color-pink-10

#fd9acb

$color-pink-20

#f44d9b

$color-pink-30 (Base)

#e11970

$color-pink-40

#b80454

$color-pink-50

#80023a

$color-pink-60

#40001d

# Dark green scale

$color-dark-green-0

#eaf7f0

$color-dark-green-10

#afecc8

$color-dark-green-20

#7cd9a2

$color-dark-green-30

#56bd80

$color-dark-green-40

#3a955e

$color-dark-green-50 (Base)

#235f3a

$color-dark-green-60

#0c4221

# Light green scale

$color-light-green-0

#f9fff2

$color-light-green-10

#d1f398

$color-light-green-20

#b2e04d

$color-light-green-30 (Base)

#9bc31c

$color-light-green-40

#7aa202

$color-light-green-50

#567101

$color-light-green-60

#2b3800

# GoCo green scale

$color-goco-green-0

#deebdf

$color-goco-green-10

#a6e6a5

$color-goco-green-20

#75db72

$color-goco-green-30

#54c64d

$color-goco-green-40 (Base)

#3fa534

$color-goco-green-50

#1f7016

$color-goco-green-60

#0a3306

# Peach scale

$color-peach-0

#fff1eb

$color-peach-10

#ffc0a5

$color-peach-20

#f89267

$color-peach-30 (Base)

#ea6e3a

$color-peach-40

#c84e1a

$color-peach-50

#9a3509

$color-peach-60

#662003

# Grey scale

$color-grey-0

#ebebeb

$color-grey-10

#dadfe0

$color-grey-20 (Base)

#c7cfd0

$color-grey-30

#b0b8b9

$color-grey-40

#8d9495

$color-grey-50

#5c6162

$color-grey-60

#242626

# Red scale

$color-red-0

#fff5f5

$color-red-10

#fecaca

$color-red-20

#f15050

$color-red-30 (Base)

#dd1b1b

$color-red-40

#b80a0a

$color-red-50

#850404

$color-red-60

#4a0000

# Blue scale

$color-blue-0

#deeeff

$color-blue-10

#acd2fb

$color-blue-20

#7cb7f8

$color-blue-30 (Base)

#2c87ea

$color-blue-40

#0065d3

$color-blue-50

#0054ae

$color-blue-60

#003b7b

← Installation Typography →