Colors

A colour palette comprises primary and accent colours that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other. The colour palette starts with primary colours and secondary colours in a meaningful hierachy that conveys specific meanings.

The following colour hierarchy was created to address some branding needs and also to keep it clear to users what is more important in the flow.

primary
#1fab2e
$ys-color-digital-grass
#fff
$ys-color-white
#000
$ys-color-black
typography
#191919
$ys-color-grey-10
ui-details
#002219
$ys-color-midnight-green
#0c4d33
$ys-color-digital-moss
#1A8924
$ys-color-digital-dark-grass
splashes
#27a4d7
$ys-color-digital-turquoise
#ffb700
$ys-color-digital-sunset-yellow
feedback
#d31a20
$ys-color-error-red
#fae8e8
$ys-color-error-red-10
#ff8a00
$ys-color-warning-yellow
#fff7e5
$ys-color-warning-yellow-10
#266df5
$ys-color-info-blue
#e8f0ff
$ys-color-info-blue-10
accent
#ebf9ec
$ys-color-digital-grass-10
accent-greys
#383838
$ys-color-grey-22
#484848
$ys-color-grey-28
#767676
$ys-color-grey-46
#929292
$ys-color-grey-57
#a2a2a2
$ys-color-grey-64
#d9d9d9
$ys-color-grey-85
#f0f0f0
$ys-color-grey-94
#fafafa
$ys-color-grey-98