Primary
#001EFF
rgba(255, 89, 0, 1)
Primary Dark
#001ADD
rgba(255, 128, 0, 1)
Primary Darker
#0013A1
rgba(255, 128, 0, 1)
Accent1
#FF5000
rgba(255, 89, 0, 1)
Accent1 Dark
#DC4500
rgba(255, 128, 0, 1)
Accent1 Darker
#993500
rgba(255, 128, 0, 1)
Accent2
#D0D3D4
rgba(255, 128, 0, 1)
Complementary1
#00D0D4
rgba(255, 89, 0, 1)
Complementary1 Dark
#0A8285
rgba(255, 128, 0, 1)
Complementary2
#DC0A0A
rgba(255, 89, 0, 1)
Complementary2 Dark
#A00000
rgba(255, 128, 0, 1)
Complementary3
#498502
rgba(255, 89, 0, 1)
Complementary3 Dark
#387C2B
rgba(255, 128, 0, 1)
Complementary4
#6E3AB7
rgba(255, 89, 0, 1)
Complementary4 Dark
#621F95
rgba(255, 128, 0, 1)
Complementary5
#FFC800
rgba(255, 128, 0, 1)
Lightest Grey
#F4F4F4
rgba(244, 244, 244, 1)
Lighter Grey
#EAEAEA
rgba(234, 234, 234, 1)
Muted Grey
#DDDDDD
rgba(221, 221, 221, 1)
Light Grey
#AFAFAF
rgba(175, 175, 175, 1)
Grey
#666666
rgba(102, 102, 102, 1)
Dark Grey
#4D4D4D
rgba(77, 77, 77, 1)
Darker Grey
#3D3D3D
rgba(61, 61, 61, 1)
Darkest Grey
#262626
rgba(38, 38, 38, 1)
Utility classes for setting text color
<!-- classes for text color -->
<p class="ui-color__text--white">...</p>
<p class="ui-color__text--primary">...</p>
<p class="ui-color__text--primary--dark">...</p>
<p class="ui-color__text--accent1">...</p>
<p class="ui-color__text--accent1--dark">...</p>
<p class="ui-color__text--accent2">...</p>
<p class="ui-color__text--complementary1">...</p>
<p class="ui-color__text--complementary1--dark">...</p>
<p class="ui-color__text--complementary2">...</p>
<p class="ui-color__text--complementary2--dark">...</p>
<p class="ui-color__text--complementary3">...</p>
<p class="ui-color__text--complementary3--dark">...</p>
<p class="ui-color__text--complementary4">...</p>
<p class="ui-color__text--complementary4--dark">...</p>
<p class="ui-color__text--complementary5">...</p>
<p class="ui-color__text--grey--darkest">...</p>
<p class="ui-color__text--grey--darker">...</p>
<p class="ui-color__text--grey--dark">...</p>
<p class="ui-color__text--grey">...</p>
<p class="ui-color__text--grey--light">...</p>
<p class="ui-color__text--grey--muted">...</p>
<p class="ui-color__text--grey--lighter">...</p>
<p class="ui-color__text--grey--lightest">...</p>
Utility classes for setting background color
<!-- classes for background color -->
<p class="ui-color__bg--white">...</p>
<p class="ui-color__bg--primary">...</p>
<p class="ui-color__bg--primary--dark">...</p>
<p class="ui-color__bg--accent1">...</p>
<p class="ui-color__bg--accent1--dark">...</p>
<p class="ui-color__bg--accent2">...</p>
<p class="ui-color__bg--complementary1">...</p>
<p class="ui-color__bg--complementary1--dark">...</p>
<p class="ui-color__bg--complementary2">...</p>
<p class="ui-color__bg--complementary2--dark">...</p>
<p class="ui-color__bg--complementary3">...</p>
<p class="ui-color__bg--complementary3--dark">...</p>
<p class="ui-color__bg--complementary4">...</p>
<p class="ui-color__bg--complementary4--dark">...</p>
<p class="ui-color__bg--complementary5">...</p>
<p class="ui-color__bg--grey--darkest">...</p>
<p class="ui-color__bg--grey--darker">...</p>
<p class="ui-color__bg--grey--dark">...</p>
<p class="ui-color__bg--grey">...</p>
<p class="ui-color__bg--grey--light">...</p>
<p class="ui-color__bg--grey--muted">...</p>
<p class="ui-color__bg--grey--lighter">...</p>
<p class="ui-color__bg--grey--lightest">...</p>
Utility classes for setting flag color (3px border left)
<!-- classes for flag color (3px border-left) -->
<p class="ui-color__flag--primary">...</p>
<p class="ui-color__flag--primary--dark">...</p>
<p class="ui-color__flag--accent1">...</p>
<p class="ui-color__flag--accent1--dark">...</p>
<p class="ui-color__flag--accent2">...</p>
<p class="ui-color__flag--complementary1">...</p>
<p class="ui-color__flag--complementary1--dark">...</p>
<p class="ui-color__flag--complementary2">...</p>
<p class="ui-color__flag--complementary2--dark">...</p>
<p class="ui-color__flag--complementary3">...</p>
<p class="ui-color__flag--complementary3--dark">...</p>
<p class="ui-color__flag--complementary4">...</p>
<p class="ui-color__flag--complementary4--dark">...</p>
<p class="ui-color__flag--complementary5">...</p>
<p class="ui-color__flag--grey--darkest">...</p>
<p class="ui-color__flag--grey--darker">...</p>
<p class="ui-color__flag--grey--dark">...</p>
<p class="ui-color__flag--grey">...</p>
<p class="ui-color__flag--grey--light">...</p>
<p class="ui-color__flag--grey--muted">...</p>
<p class="ui-color__flag--grey--lighter">...</p>
<p class="ui-color__flag--grey--lightest">...</p>