Colors & Typescale
Primary
The brand color is your "primary" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.
50
#fdf2ea
100
#fbe4d5
200
#f9d7bf
300
#f4af80
400
#f09455
500 (Main)
#ec792b
600
#bd6122
700
#8e491a
800
#5e3011
900
#2f1809
Secondary
Along with primary colors, it's helpful to have a selection of secondary colors to use in components such as pills, alerts and labels.
50
#e6ecf0
100
#ccd8e1
200
#99b1c2
300
#668ba4
400
#336485
500 (Main)
#003d67
600
#003152
700
#00253e
800
#001829
900
#000c15
Tertiary
Tertiary colors are the hues formed by mixing a primary color with a secondary color in equal parts.
50
#e6e9ea
100
#ccd3d6
200
#99a6ad
300
#667a83
400
#334d5a
500 (Main)
#002131
600
#001a272
700
#00141d
800
#000d14
900
#00070a
Gray/Text Colour
Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.
50
#e8e8e8
100
#d0d0d0
200
#a1a1a1
300
#727272
400
#434343
500 (Main)
#141414
600
#101010
Error
Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from your team.
50
#f8dcda
100
#f1b9b5
200
#ea958f
300
#e3726a
400 (Main)
#DC4F45
500
#DC4F45
600
#b03f37
700
#842f29
800
#58201c
850
#912018
Success
Success colors communicate a positive action, positive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.
50
#ecfcf3
100
#daf8e8
200
#b5f1d0
300
#8feab9
400
#6ae3a1
500 (Main)
#45DCA6
600
#37b06e
700
#298453
800
#1c5837
850
#0e2c1c
HK Grotesk
Sans-Serif Typeface
Display Text, Headings, Captions & Tags
D1
48px / 140%
The quick brown fox jumps over the lazy dog.
D2
40px / 140%
The quick brown fox jumps over the lazy dog.
D3
32px / 140%
The quick brown fox jumps over the lazy dog.
H1
34px / 140%
The quick brown fox jumps over the lazy dog.
H2
24px / 140%
The quick brown fox jumps over the lazy dog.
H3
20px / 140%
The quick brown fox jumps over the lazy dog.
H3 (Semibold)
20px / 140%
The quick brown fox jumps over the lazy dog.
H4 (Medium)
16px / 140%
The quick brown fox jumps over the lazy dog.
C1
14px / 140%
The quick brown fox jumps over the lazy dog.
H5 (Medium)
12px / 140%
The quick brown fox jumps over the lazy dog.
Nunito Sans
Sans-Sherif Typeface
Body, CTA
B1 (Semi-Bold)
16px / 140%
The quick brown fox jumps over the lazy dog.
B1 (Regular)
16px / 140%
The quick brown fox jumps over the lazy dog.
B1 (Italic)
16px / 140%
The quick brown fox jumps over the lazy dog.
B2 (Bold) - CTA
14px / 140%
The quick brown fox jumps over the lazy dog.
B2 (Bold Underline)
14px / 140%
The quick brown fox jumps over the lazy dog.
B2 (Semi-Bold)
14px / 140%
The quick brown fox jumps over the lazy dog.
B2 (Semi-Bold Underline)
14px / 140%
The quick brown fox jumps over the lazy dog.
B2 (Regular)
14px / 140%
The quick brown fox jumps over the lazy dog.
B2 (Italic)
14px / 140%
The quick brown fox jumps over the lazy dog.
B3 (Semi-Bold)
12px / 140%
The quick brown fox jumps over the lazy dog.
B3 (Regular)
12px / 140%
The quick brown fox jumps over the lazy dog.
