Typography
Noto Sans, with responsive roles for application headings, labels and values.
Configuration overview
- Value size
- Label weight
Main Brand Bases
Copy CSS
Primary (P)
#00457E
P30 / Brand Base
Used for the most prominent components across the UI, such as high-emphasis buttons, FABs, and active navigation states.
Copy CSS
Secondary (S)
#9CB0BF
Slate / Brand Base
Used for less prominent components in the UI, such as filter chips, secondary buttons, and borders.
Functional Bases
Copy CSS
Error (E)
#C1001F
E40 / Semantic Base
Used to communicate error states and critical system alerts, f.ex. an incorrect password input or system malfunction.
Copy CSS
Success (Suc)
#007E39
Suc40 / Semantic Base
Used for describing a positive result, successful operations, online indicators, and completion states.
Copy CSS
Warning (W)
#DA931A
W40 / Functional Base
Used for communicating risky operations or states that require user awareness before proceeding.
Copy CSS
Caution (C)
#FFD511
C50 / Functional Base
Used to indicate a need for caution or standby attention without immediate system danger.
Accent Hues
Vibrant design tokens for custom visualization highlights and status categorization.
Copy CSS
Cyan Accent
#00E3E3
Accent
Copy CSS
Sky Blue
#00B2FF
Accent
Copy CSS
Bright Blue
#0087FF
Accent
Copy CSS
Deep Blue
#0050FF
Accent
Copy CSS
Steel Gray
#8492AC
Accent
Copy Hex
Light Accent Blue
#B3D3FF
Accent
Copy Hex
Vibrant Red
#FF3330
Accent
Copy Hex
Vibrant Orange
#F39100
Accent
Copy Hex
Vibrant Yellow
#FFC000
Accent
Copy Hex
Vibrant Green
#00B050
Accent
15-Step Color Scale Matrix
Ranging from index 0 (black) to 100 (white) for each core hue. Click any cell to copy its CSS token variable.
P Scale
0
10
20
25
30
35
40
50
60
70
80
90
95
98
99
100
S Scale
0
10
20
25
30
35
40
50
60
70
80
90
95
98
99
100
E Scale
0
10
20
25
30
35
40
50
60
70
80
90
95
98
99
100
Suc Scale
0
10
20
25
30
35
40
50
60
70
80
90
95
98
99
100
W Scale
0
10
20
25
30
35
40
50
60
70
80
90
95
98
99
100
C Scale
0
10
20
25
30
35
40
50
60
70
80
90
95
98
99
100