The color system is designed to support clarity, hierarchy, and consistency across all brand applications. Each color in the system serves a specific purpose within the interface and brand communication.
Accent Color
The accent color is strategically implemented to highlight key elements and guide user attention across the interface. It is specifically recommended for active states, highlights, key indicators, and interactive elements. To preserve its visual impact and maintain a clean hierarchy, this color should be used sparingly throughout the design system.
Copy HEX
HEX:
1F6F78
RGB:
30, 113, 120
CMYK:
83, 34, 44, 22
Copy HEX
HEX:
33BDCC
RGB:
59, 186, 202
CMYK:
68, 0, 23, 0
Neutral Colors
Background
Used in a progression from dark to light (BG-Primary to BG-Quaternary) to establish layout depth. Apply deeper tones for base foundations and lighter variants to create subtle relief and contrast between structural containers.
Text
Organized in a descending scale from pure white to grey (Text-Primary to Text-Quaternary) to define information priority. Use primary tones for high-impact headlines and secondary variants for body copy and metadata to ensure optimal legibility.
Copy HEX
HEX:
0A0A0A
RGB:
9, 10, 10
CMYK:
0, 0, 0, 98
Copy HEX
HEX:
171717
RGB:
23, 23, 23
CMYK:
0, 0, 0, 96
Copy HEX
HEX:
262626
RGB:
38, 38, 38
CMYK:
0, 0, 0, 93
Copy HEX
HEX:
404040
RGB:
64, 64, 64
CMYK:
0, 0, 0, 88
Copy HEX
HEX:
FFFFFF
RGB:
255, 255, ,255
CMYK:
0, 0, 0, 0
Copy HEX
HEX:
E5E5E5
RGB:
229, 229, 229
CMYK:
0, 0, 0, 14
Copy HEX
HEX:
CCCCCC
RGB:
206, 206, 206
CMYK:
0, 0, 0, 26
Copy HEX
HEX:
B3B3B3
RGB:
180, 180, 180
CMYK:
0, 0, 0, 39
Usage Guidelines
Prioritize neutral colors in most layouts.
Use the accent color only where emphasis is required.
Avoid using accent colors as primary backgrounds.
Maintain a consistent color application across all brand touchpoints and digital platforms