Theme colors

Primary theme colors are used for elements that must reflect Purpose’s brand. Each color has a darker and a lighter shade. These can be customized to represent your brand identity using Sass and our build tools.

Gradient

We love gradients. That is why we created these variations that are built dynamically based on the theme’s colors described above. By changing a theme color the gradient will adapt.

Translucent

If you want add a little transparency to your backgrounds you can use the .bg-translucent-* modifier class. The opacity level can be modified from the variables file.

Text colors

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Gray colors

Grey colors are used for text, backgrounds, lines and borders. The grays from 100 to 300 are used for backgrounds, while the ones from 400 to 600 are used for icons.

Brand colors

Reversible grays

The grey colors are reversible. Each light grey color has a complementary dark grey color. This helps keeping the colors well balanced and also makes it easier to implement light/dark themes. Good example of this is the Marvel editor, which is implemented in the dark theme.