Colors

Check the customization page to know how to update the theme color.

Text Color

Since each of the section/ element has multiple backgrounds (Light, Dark, Dark Blue, other gradients) options we declared those section with an identifier class. The colors are nested with those classes. It means the same class will be generated a different color that fits with the background.

Text color on light/white background (Dynamic Color)

text-color--200 on light/white background

text-color--300 on light/white background

text-color--400 on light/white background

text-color--500 on light/white background

Markup example:

<p class="text-color--200">text-color--200 on light/white background</p>
<p class="text-color--300">text-color--300 on light/white background</p>
<p class="text-color--400">text-color--400 on light/white background</p>
<p class="text-color--500">text-color--500 on light/white background</p>
Copy

Text color on dark background (Dynamic Color)

text-color--200 on Dark background

text-color--300 on Dark background

text-color--400 on Dark background

text-color--500 on Dark background

Markup example:

<div class="section--dark bg-color--dark--1">
    <p class="text-color--200">text-color--200 on Dark background</p>
    <p class="text-color--300">text-color--300 on Dark background</p>
    <p class="text-color--400">text-color--400 on Dark background</p>
    <p class="text-color--500">text-color--500 on Dark background</p>
</div>
Copy

Text color on dark blue background (Dynamic Color)

text-color--200 on Darkblue background

text-color--300 on Darkblue background

text-color--400 on Darkblue background

text-color--500 on Darkblue background

Markup example:

<div class="section--darkblue bg-color--darkblue--1">
    <p class="text-color--200">text-color--200 on Darkblue background</p>
    <p class="text-color--300">text-color--300 on Darkblue background</p>
    <p class="text-color--400">text-color--400 on Darkblue background</p>
    <p class="text-color--500">text-color--500 on Darkblue background</p>
</div>
Copy

More color (Static Color)

text-color--700

color--primary

color--orange

color--coral

color--green

text-color--cta--2

text-color--cta--3

text-color--cta--4

text-color--cta--5

Markup example:

<p class="text-color--700">text-color--700</p>
<p class="color--primary">color--primary</p>
<p class="color--orange">color--orange</p>
<p class="color--coral">color--coral</p>
<p class="color--green">color--green</p>
<p class="text-color--cta--2">text-color--cta--2</p>
<p class="text-color--cta--3">text-color--cta--3</p>
<p class="text-color--cta--4">text-color--cta--4</p>
<p class="text-color--cta--5">text-color--cta--5</p>
Copy

Class Reference


Classes that will generate different color on different background (Dynamic Color Classes)
text-color--200
text-color--300
text-color--400
text-color--500
Classes that won't generate different color on different background (Static Color Classes)
text-color--700
text-color--cta--1
text-color--cta--2
text-color--cta--3
text-color--cta--4
text-color--cta--5
color--primary
color--orange
color--coral
color--green

Border Color

The same method of text color applied on border. It means the same class will be generated a different border color that fits with the background.

Border color on light/white background

border on light/white background

Markup example:

<div class="section--light">
    <div class="border--around">...</div>
</div>
Copy

Border color on dark background

border on light/white background

Markup example:

<div class="section--dark bg-color--dark--1">
    <div class="border--around">...</div>
</div>
Copy

Border color on dark background

border on light/white background

Markup example:

<div class="section--darkblue bg-color--darkblue--1">
    <div class="border--around">...</div>
</div>
Copy
Class Reference
border--none
border--around
border--top
border--bottom
border--left
border--right

Background Colors

.bg-color--primary

.bg-color--dark--1

.bg-color--dark--2

.bg-color--dark--3

.bg-color--darkblue--1

.bg-color--green

.bg-color--purple

.bg-color--transparent

.bg-color--primary-opacity--05

.bg-color--primary-opacity--10

.bg-color--primary-opacity--15

.bg-color--primary-opacity--20

.bg-color--blue-opacity--10

.bg-color--blue-opacity--15

.bg-color--blue-opacity--20

.bg-color--black-opacity--10

.bg-color--black-opacity--15

.bg-color--black-opacity--20

.bg-color--white-opacity--05

.bg-color--white-opacity--10

.bg-color--white-opacity--15

.bg-color--white-opacity--20

.bg-gradient-primary--1

.bg-gradient--1

.bg-gradient--2

.bg-gradient--3

.bg-gradient--4

.bg-gradient--5

.bg-gradient--6

.bg-gradient--7

.bg-gradient--8

.bg-gradient--darkblue--1

.bg-gradient--darkblue--2

.bg-gradient--darkblue--3

.bg-gradient--darkblue--4

.bg-gradient--darkblue--5

.bg-gradient--darkblue--6

.bg-gradient-purple--1

Markup example:

<div class="card d-block p-2 mb-3 bg-color--primary">
    <p class="color--white">.bg-color--primary</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--dark--1">
    <p class="color--white">.bg-color--dark--1</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--dark--2">
    <p class="color--white">.bg-color--dark--2</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--dark--3">
    <p class="color--white">.bg-color--dark--3</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--darkblue--1">
    <p class="color--white">.bg-color--darkblue--1</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--green">
    <p class="color--white">.bg-color--green</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--purple">
    <p class="color--white">.bg-color--purple</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--transparent">
    <p class="color--dark">.bg-color--transparent</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--primary-opacity--05">
    <p class="color--dark">.bg-color--primary-opacity--05</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--primary-opacity--10">
    <p class="color--dark">.bg-color--primary-opacity--10</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--primary-opacity--15">
    <p class="color--dark">.bg-color--primary-opacity--15</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--primary-opacity--20">
    <p class="color--dark">.bg-color--primary-opacity--20</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--blue-opacity--10">
    <p class="color--dark">.bg-color--blue-opacity--10</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--blue-opacity--15">
    <p class="color--dark">.bg-color--blue-opacity--15</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--blue-opacity--20">
    <p class="color--dark">.bg-color--blue-opacity--20</p>
</div>

<div class="card d-block p-2 mb-3 bg-color--black-opacity--10">
    <p class="color--dark">.bg-color--black-opacity--10</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--black-opacity--15">
    <p class="color--dark">.bg-color--black-opacity--15</p>
</div>
<div class="card d-block p-2 mb-3 bg-color--black-opacity--20">
    <p class="color--dark">.bg-color--black-opacity--20</p>
</div>
<div class="card bg-color--primary p-2 mb-3">
    <div class="card d-block p-2 bg-color--white-opacity--05">
        <p class="color--white">.bg-color--white-opacity--05</p>
    </div>
</div>
<div class="card bg-color--primary p-2 mb-3">
    <div class="card d-block p-2 bg-color--white-opacity--10">
        <p class="color--white">.bg-color--white-opacity--10</p>
    </div>
</div>
<div class="card bg-color--primary p-2 mb-3">
    <div class="card d-block p-2 bg-color--white-opacity--15">
        <p class="color--white">.bg-color--white-opacity--15</p>
    </div>
</div>
<div class="card bg-color--primary p-2 mb-3">
    <div class="card d-block p-2 bg-color--white-opacity--20">
        <p class="color--white">.bg-color--white-opacity--20</p>
    </div>
</div>
<div class="card d-block p-2 mb-3 bg-gradient-primary--1">
    <p class="color--dark">.bg-gradient-primary--1</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient--1">
    <p class="color--white">.bg-gradient--1</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient--2">
    <p class="color--white">.bg-gradient--2</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient--3">
    <p class="color--white">.bg-gradient--3</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient--4">
    <p class="color--white">.bg-gradient--4</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient--5">
    <p class="color--white">.bg-gradient--5</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient--6">
    <p class="color--white">.bg-gradient--6</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient--7">
    <p class="color--white">.bg-gradient--7</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient--8">
    <p class="color--white">.bg-gradient--8</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient--darkblue--1">
    <p class="color--white">.bg-gradient--darkblue--1</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient--darkblue--2">
    <p class="color--white">.bg-gradient--darkblue--2</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient--darkblue--3">
    <p class="color--white">.bg-gradient--darkblue--3</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient--darkblue--4">
    <p class="color--white">.bg-gradient--darkblue--4</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient--darkblue--5">
    <p class="color--white">.bg-gradient--darkblue--5</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient--darkblue--6">
    <p class="color--white">.bg-gradient--darkblue--6</p>
</div>
<div class="card d-block p-2 mb-3 bg-gradient-purple--1">
    <p class="color--white">.bg-gradient-purple--1</p>
</div>
Copy
Class Reference
bg-color--primary
bg-color--dark--1
bg-color--dark--2
bg-color--dark--3
bg-color--darkblue--1
bg-color--green
bg-color--purple
bg-color--transparent
bg-color--primary-opacity--05
bg-color--primary-opacity--10
bg-color--primary-opacity--15
bg-color--primary-opacity--20
bg-color--blue-opacity--10
bg-color--blue-opacity--15
bg-color--blue-opacity--20
bg-color--black-opacity--10
bg-color--black-opacity--15
bg-color--black-opacity--20
bg-color--white-opacity--05
bg-color--white-opacity--10
bg-color--white-opacity--15
bg-color--white-opacity--20
bg-gradient-primary--1
bg-gradient--1
bg-gradient--2
bg-gradient--3
bg-gradient--4
bg-gradient--5
bg-gradient--6
bg-gradient--7
bg-gradient--8
bg-gradient--darkblue--1
bg-gradient--darkblue--2
bg-gradient--darkblue--3
bg-gradient--darkblue--4
bg-gradient--darkblue--5
bg-gradient--darkblue--6
bg-gradient-purple--1

primary color and its class is always generate dynamic color. Such as this documentation was set to theme-blue which is why it's rendering blue as primary color. If it was set to theme-orange it would render orange color instead of current blue color.