Basic colors

Aesthetic visual consistency is ensured to a large extent by the usage of a proper color palette.

Here is the brand/primary color and five accent colors, with two shades and two tints each. There are also two neutral colors, used for the background (with three shades) and the main content color. You are encouraged to use these colors following the 60-30-10 rule: A background color should cover most of the page (60%), the content color should be used for all the main content elements (30%) and the brand with the accent 1 should be used for various other details (10%). The use of accent colors 2 to 5 is discouraged unless there is a definite need for that, such as color coding in an info visualization.

The code below shows the class names that assign the respective background-color to each html element.

<div>
    <div class="bg-color-brand-shade2"></div>
    <div class="bg-color-brand-shade1"></div>
    <div class="bg-color-brand"></div>
    <div class="bg-color-brand-tint1"></div>
    <div class="bg-color-brand-tint2"></div>
</div>
<div>
    <div class="bg-color-acc1-shade2"></div>
    <div class="bg-color-acc1-shade1"></div>
    <div class="bg-color-acc1"></div>
    <div class="bg-color-acc1-tint1"></div>
    <div class="bg-color-acc1-tint2"></div>
</div>

... Similarly for the rest accent colors ...

<div>
    <div class="bg-color-main"></div>
    <div class="bg-color-shade1"></div>
    <div class="bg-color-shade2"></div>
</div>

Gradients

There are also gradient versions of each color, plus one gradient combo.

<div class="gradient-brand">Brand gradient</div>
<div class="gradient-acc1">Acc1 gradient</div>

... Similarly for the rest accent colors ...

<div class="gradient-shade">Shade gradient</div>
<div class="gradient-combo">Gradient Combo</div>

Content colors usage

All the basic colors can also be used as content colors by using the classes as shown below. If there is not any specific color class, the content color is the default one.

<p class="txt-m txt-bold">Default content color</p>
<p class="txt-m txt-bold color-brand">Brand content color</p>
<p class="txt-m txt-bold color-acc1">Accent1 content color</p>
<p class="txt-m txt-bold color-acc2">Accent2 content color</p>
<p class="txt-m txt-bold color-acc3">Accent3 content color</p>
<p class="txt-m txt-bold color-acc4">Accent4 content color</p>
<p class="txt-m txt-bold color-acc5">Accent5 content color</p>