Color

The Cyan "chroma" color scales are based on following hierarchy of colors:
S/K
K/S
C
N
A
  • S/K - Surface / Key
  • K/S - Key / Surface
  • C - Primary color
  • N - Highlight color
  • A - Accent color

These colors, and the scales based on the said colors should not be directly. Instead, use the variables provided in the design tokens to ensure theming consistency and maintainability.

Surface and Key

--chroma-bright-white

#f3f9fd
hsl(204deg, 78%, 97%)

--chroma-303-c

#002A3A
hsl(197deg , 100% , 11%)

--chroma-surface-[code]

10
20
30
40
50
60
70
80
90
95
99

--chroma-key-[code]

30
40
50
60
70
80
90
95
99

Primary colors

--chroma-primary-[code]

10
20
30
40
50
60
70
80
90
95
99
--chroma-secondary-[code]
10
20
30
40
50
60
70
80
90
95
99