Colors
This design system comes with a bunch of colors of different luminosity level and hue.
50
100
200
300
400
500
600
700
800
900
950
red
50
100
200
300
400
500
600
700
800
900
950
orange
50
100
200
300
400
500
600
700
800
900
950
yellow
50
100
200
300
400
500
600
700
800
900
950
green
50
100
200
300
400
500
600
700
800
900
950
cyan
50
100
200
300
400
500
600
700
800
900
950
blue
50
100
200
300
400
500
600
700
800
900
950
purple
50
100
200
300
400
500
600
700
800
900
950
teal
50
100
200
300
400
500
600
700
800
900
950
gray
50
100
200
300
400
500
600
700
800
900
950
There are also additional palettes for some brand colors.
50
100
200
300
400
500
600
700
800
900
950
makigas
50
100
200
300
400
500
600
700
800
900
950
ngl
50
100
200
300
400
500
600
700
800
900
950
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