Colors
This design system comes with a bunch of colors of different luminosity level and hue.
100
200
300
400
500
600
700
800
900
red
100
200
300
400
500
600
700
800
900
orange
100
200
300
400
500
600
700
800
900
yellow
100
200
300
400
500
600
700
800
900
green
100
200
300
400
500
600
700
800
900
cyan
100
200
300
400
500
600
700
800
900
blue
100
200
300
400
500
600
700
800
900
purple
100
200
300
400
500
600
700
800
900
teal
100
200
300
400
500
600
700
800
900
gray
100
200
300
400
500
600
700
800
900
There are also additional palettes for some brand colors.
100
200
300
400
500
600
700
800
900
makigas
100
200
300
400
500
600
700
800
900
ngl
100
200
300
400
500
600
700
800
900
To compose either of these colors, use a CSS variable with the following structure:
--genshi-palette-lum . Some examples:
--genshi-red-400--genshi-blue-900--genshi-makigas-500