Design Language

Colors

Brand
primary950
hsl(255 45% 8%)
primary900
hsl(255 50% 15%)
primary800
hsl(255 55% 25%)
primary700
hsl(255 60% 35%)
primary600
hsl(255 65% 45%)
primary500
hsl(255 70% 55%)
primary400
hsl(255 75% 65%)
primary300
hsl(255 80% 75%)
primary200
hsl(255 85% 85%)
primary100
hsl(255 90% 92%)
primary50
hsl(255 100% 97%)
Intents
green900
hsl(142 60% 14%)
green800
hsl(142 60% 22%)
green700
hsl(142 60% 29%)
green600
hsl(142 60% 37%)
green500
hsl(142 60% 44%)
green400
hsl(142 60% 57%)
green300
hsl(142 60% 69%)
green200
hsl(142 60% 82%)
green100
hsl(142 60% 94%)
green50
hsl(142 60% 98%)
red900
hsl(0 70% 14%)
red800
hsl(0 70% 22%)
red700
hsl(0 70% 29%)
red600
hsl(0 70% 37%)
red500
hsl(0 70% 44%)
red400
hsl(0 70% 57%)
red300
hsl(0 70% 69%)
red200
hsl(0 70% 82%)
red100
hsl(0 70% 94%)
red50
hsl(0 70% 98%)
yellow900
hsl(38 85% 24%)
yellow800
hsl(38 85% 29%)
yellow700
hsl(38 85% 34%)
yellow600
hsl(38 85% 39%)
yellow500
hsl(38 85% 44%)
yellow400
hsl(38 85% 57%)
yellow300
hsl(38 85% 69%)
yellow200
hsl(38 85% 82%)
yellow100
hsl(38 85% 94%)
yellow50
hsl(38 85% 98%)
blue900
hsl(224 64% 13%)
blue800
hsl(222 71% 40%)
blue700
hsl(221 78% 46%)
blue600
hsl(219 84% 53%)
blue500
hsl(217 91% 60%)
blue400
hsl(217 93% 68%)
blue300
hsl(216 93% 76%)
blue200
hsl(215 95% 85%)
blue100
hsl(214 95% 93%)
blue50
hsl(216 100% 98%)
Grayscale
black
hsl(0 0% 0%)
gray900
hsl(0 0% 10%)
gray800
hsl(0 0% 15%)
gray700
hsl(0 0% 25%)
gray600
hsl(0 0% 38%)
gray500
hsl(0 0% 50%)
gray400
hsl(0 0% 60%)
gray300
hsl(0 0% 70%)
gray200
hsl(0 0% 80%)
gray100
hsl(0 0% 90%)
gray50
hsl(0 0% 97%)
white
hsl(0 0% 100%)
No logs yet