Colors

Unsure what color combinations are safe? See this contrast chart for full WCAG recommendations.

u-color-white
#ffffff		 u-color-grey-white
#f7f7f7
u-color-blue-lightest
#d6f0ff		 u-color-turquoise-lightest
#d2f9f8		 u-color-yellow-lightest
#fff8db		 u-color-grey-lightest
#ececec
u-color-blue-lighter
#a3ddff		 u-color-turquoise-lighter
#8ff0ec		 u-color-yellow-lighter
#ffec99		 u-color-grey-lighter
#ced2d4
u-color-blue-base
#33b4ff		 u-color-turquoise-base
#1ccfc9		 u-color-yellow-base
#ffd72e		 u-color-grey-base
#a3aaaf
u-color-grey-dark
#6b7780
u-color-blue-darker
#0069a6		 u-color-turquoise-darker
#0f828a		 u-color-yellow-darker
#ffb71b		 u-color-grey-darker
#485c6a
u-color-blue-darkest
#004166		 u-color-turquoise-darkest
#0b5f65		 u-color-yellow-darkest
#835c07		 u-color-grey-darkest
#243846
u-color-black
#131e29		 u-color-turquoise-black
#07383c
Extra colors
u-color-green-lightest
#bfdfd3		 u-color-red-lightest
#f3c2c9
u-color-green-lighter
#66b395		 u-color-red-lighter
#eb7577
u-color-green
#00804f		 u-color-red
#d6334c
u-color-green-darker
#008a55		 u-color-red-darker
#962435

Color variables

Variable name Light mode value Dark mode value
--co-link --blue-darker --blue-base
--co-text --black --white
--co-text-dim --grey-dark --grey-base
--co-back --white --black
--co-back-dim --grey-white --grey-darkest
--co-back-dimmer --grey-lightest --grey-darker
--co-back-selected --yellow-lightest --turquoise-darkest
--co-accent --blue-darker --blue-base
--co-accent-text --white --black
--co-accent-dark --blue-darkest --blue-lighter
--co-secondary --blue-lightest --blue-lightest
--co-secondary-text --blue-darker --blue-darker
--co-secondary-dark --blue-lighter --blue-lighter
--co-positive --green-base --green-lighter
--co-positive-text --white --black
--co-positive-dark --green-darker --green-lightest
--co-negative --red-base --red-lighter
--co-negative-text --white --black
--co-negative-dark --red-darker --red-lightest