Colors

Here are the colors we use for our brand and throughout our app.

Brand Colors

Swatch

SCSS Variable

Hex Code

$d1-purple

#8252c6

$d4-purple

#441589

$l2-purple

#b89ade

Backgrounds

Swatch

SCSS Variable

Hex Code

$l3-light-gray

#f2f2f2

$l4-light-gray

#f9f9f9

$light-white

#fff

Typography

Swatch

SCSS Variable

Hex Code

$d2-dark-gray

#0d0d13

$l1-dark-gray

#4f4f4f

$l2-dark-gray

#5e5e5e

$d1-mid-gray

#74757b

$d3-light-gray

#c1c1c1

$d3-purple

#8252c6

$l2-purple

#b89ade

Icon Colors

Swatch

SCSS Variable

Hex Code

$d3-light-gray

#c1c1c1

$d2-light-gray

#cdcdcd

$base-mid-gray

#e7e7e7

$d2-dark-gray

#0d0d13

Border Colors

Swatch

SCSS Variable

Hex Code

$d1-light-gray

#d6d6d6

$base-light-gray

#e7e7e7

Status Colors

Swatch

SCSS Variable

Hex Code

$success-color

#118000

$success-light-color

#e1fbdf

$success-muted-color

#a5d09e

$error-color

#f00

$error-dark-color

#b30000

$error-light-color

#ffe7e7

$error-muted-color

#e6b2b2

$warning-color

#ffd02f

$warning-dark-color

#876a03

$warning-light-color

#fff1bd

$warning-muted-color

#dabe5f

$note-color

#1376ae

$note-light-color

#ebf8ff

$note-muted-color

#87c0e2

Cursor Colors

Swatch

SCSS Variable

Hex Code

$red-user-color

#d50000

$indigo-user-color

#483d8b

$teal-user-color

#00a4a6

$gold-user-color

#b8860b

$orange-user-color

#e65722

$blue-user-color

#1460aa

$brown-user-color

#804028

$gray-user-color

#939393