Atoms

Colors

Neutral

These colors are used as supporting secondary colors in backgrounds, text, colors, separators, models etc.
50
#FAFAFA
100
#F4F4F4
200
#EAEAEB
300
#DFE0E1
400
#C4C6C8
500
#8F9397
600
#5A6066
700
#3F464D
800
#242C34
900
#15181C

Primary

The primary color palette is used across interactive elements such as CTAs, links, inputs, active states, etc.
50
#D2F1F0
300
#A5E3E3
500
#77D5D4
700
#0FB9B6
900
#196D80

Secondary

The secondary color palette is used alongside the primary to indicate to the user it’s the secondary focus
50
#D3CFED
300
#A7A0DD
500
#7D70CB
700
#2400A7
900
#070053

Success

These colors depict an emotion of positivity. Generally used across success, complete states
50
#D2F1F0
300
#A5E3E3
500
#77D5D4
700
#0FB9B6
900
#196D80

Warning

These colors depict an emotion of holding. Generally used across warning or on-hold states
50
#FFF4D4
300
#FFE9AA
500
#FFDD7F
700
#FFC612
900
#CC9B00

Error

These colors depict an emotion of negativity. Generally used across error states.
50
#FCDADC
300
#F9B6B7
500
#F69092
700
#F04649
900
#C30003

Shades

These colors are used as supporting secondary colors in backgrounds, text colors, seperators, models, etc.
0
#FFFFFF
100
#000000
Atoms

Typography

Display 01

Display 01
Semi Bold

Display 01
Bold

Display 01
Extra Bold

Display 02

Display 02
Semi Bold

Display 02
Bold

Display 02
Extra Bold

Heading 01

Heading 01
Bold

Heading 01
Extra Bold

Heading 01 (S)
Bold

Heading 01 (S)
Extra Bold

Heading 02

Heading 02
Bold

Heading 02
Extra Bold

Heading 02 (S)
Extra Bold

Heading 02 (S)
Extra Bold

Heading 03

Heading 03
Semi Bold

Heading 03
Bold

Heading 03
Extra Bold

Heading 03 (s)
Semi Bold

Heading 03 (s)
Bold

Heading 03 (s)
Extra Bold

Subheading
Subheading
Semi Bold
Subheading
Semi Bold
Paragraph 01
Paragraph 01
Normal
Paragraph 01
Bold
Paragraph 02
Paragraph 02
Normal
Paragraph 02
Bold
Caption
Caption
Atoms

Shadows

Bevel
Emboss