Colors & Themes

Colors

primary

#16006D

primary-light

#3843D0

primary-lightest

#8EA1FF

secondary

#E44434

secondary-light

#FC5F36

secondary-lightest

#FEAF31

gray

#6A666D

gray-light

#9d99a0

gray-lightest

##e9e8ea

commcare-default

#5D70D2

Gradient Slices

The full gradient goes from primary-light to secondary-light.

gradient-10

#4c46c1

gradient-20

#5f49b1

gradient-30

#734ba2

gradient-40

#864e92

gradient-50

#9a5183

gradient-60

#ae5474

gradient-70

#c15764

gradient-80

#d55955

gradient-90

#e85c45

secondary-light

#FC5F36

Gradient Backgrounds

gradient-main-bg

gradient-main-reversed-bg

gradient-sideways-bg

gradient-sideways-reversed-bg

Themes

You can apply a color theme to an element's class that will apply to all of its children.

For instance, the h1, h2, h3 elements inside the intro parent will inherit the theme's colors automatically. Very rarely, should the regular headings (h1, h2, h3, h4, etc) outside of intro get a color accent applied to it.

Heading 1 - Intro

Heading 2 - Intro

Heading 3 - Intro

Intro text

This is a tile Tile link

Tile Button

Color Text

Use the theme-color class to color text based on the parent theme.

<div class="primary-light-theme">
  <p>
    Add a <span class="theme-color">color accent</span>
  </p>
</div>

Add a color accent

Border Color

Use the theme-border class to apply the theme color to the border of an element that has an existing border.

<div class="secondary-light-theme">
  <p class="border-top theme-border">
    Top border color
  </p>
</div>

Top border color

Background Color

Use the theme-bg class to apply the theme color as the background on a block element

<div class="secondary-theme">
  <div class="theme-bg pad-small">
    Top border color
  </div>
</div>

Icon Color

Use the theme-icon to use the theme color as the background on a block element

<div class="primary-light-theme">
  <div class="theme-icon">
    <svg>...</svg>
  </div>
</div>

Background Colors

You can add <color>-bg to any block element to set the background-color to <color>, where <color> is any one of the colors mentioned above.

Example

<div class="tile gradient-60-bg"></div>

Text Colors

You can add a splash of color to any text or link by adding the <color>-color or <color> class to the wrapping element, where <color> is any one of the colors mentioned above.

Example

You can <strong class="green">accent</strong> any text.

You can accent any text.

You can color your <a href="#" class="secondary-color">links</a>.

You can color your links.

Icon Colors

You can change an icon's color by adding the <color>-icon to any parent element wrapping the icon(s), where <color> is any one of the colors mentioned above.

Example

<div class="gradient-20-icon"><svg>...</svg></div>

Button Colors

You can change a button's color by adding the button-<color> class to the button's classes, where <color> is any one of the colors mentioned above.

Example

<button class="button-gradient-80">A Button</button>

Border Colors

You can add <color>-border to any block element with and existing border defined (like a tile) to change the border color to <color>, where <color> is any one of the colors mentioned above.

Examples

<a href="#" class="tile gradient-50-border"></a>

Note: for tile this changes the border color only on hover.

Note: for border, border-top, etc classes, the colors will not apply because there is never a reason those borders should have an accent color.

Other Color Utils

There are a few utility classes for resetting colors to their base color, or inverting colors.

Inverting Colors

You can invert a theme-icon so that it turns white on any color background by wrapping theme-icon with the inverted class.

<div class="gradient-20-theme inverted">
  <div class="theme-bg pad-small gap-bottom-small">
    <div class="theme-icon"><svg>...</svg>
  </div>
</div>

Inverted Buttons

For any button, add the alt class to show the inverted (secondary) style of the button.

<a href="#" class="button button-gradient-30 inverted">
  A Button
</a>

A Button

Or if you have a button on a color / dark background, the alt inverted class combination will turn the button white.

<p class="gradient-40-bg pad-small">
  <a href="#" class="button alt inverted">
    A Button
  </a>
</p>

A Button

White Text

Use white to make text white (for instance if you have text on a color background.

<div class="tile gradient-50-bg"><p class="white">White Text</p></div>

White Text

Body Color

Use body-color to make text the regular / default color.

Example: Due to the css structure the body text inside the themed tile is the theme color, so use body-color to reset it.

<div class="gradient-60-theme">
  <a href="#" class="tile">
    <p class="body-color">Tile Text</p>
  </a>
</div>

Tile Text

Header Color

Use header-color to make text the default color for headings.

Link Gray Color

Use link-gray to make text the default color for links. example.

White Backgrounds

Use white-bg to make the background color of an element white.

Old Colors

These are colors from the previous palette and will be phased out after the site-wide redesign.

slate

#5f6a7d

slate-light

#949eae

accent-gray

#fafafa

neutral-dark

#373534

neutral

#685c53

neutral-light

#d6d6d4

neutral-lightest

#f7f7f6

blue-dark

#002c5f

blue

#004ebc

blue-light

#bcdeff

blue-lightest

#edf3fa

purple-dark

#5d3f82

purple

#9060c8

purple-light

#d6c5ea

purple-lightest

#faf6ff

turquoise-dark

#00799a

turquoise

#00bdc5

turquoise-light

#e5f8f9

turquoise-lightest

#f2fcfc

green-dark

#216f00

green

#47b700

green-light

#d5eaca

orange-dark

#994f00

orange

#ff8400

orange-light

#ffe3c2

orange-lightest

#f8f3ed

red-dark

#812627

red

#e53e30

red-light

#efcfcb