Color

Cyan Design System uses a color palette that is based on the Cyan "chroma" color scales. The color palette is designed to be accessible, and to provide a consistent and harmonious look and feel across the App(s).

The color scale is also designed to be "themeable" by changing the "chroma" with a custom set of colors with a set with same luminance and saturation values. This allows for a consistent look and feel across the app, while allowing for customization of the color palette.

Base theme

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