Color System

Mojo redefines color usage in your projects. With its built-in color engine, you can seamlessly access and utilize any color, along with its limitless tints and shades.

Simply specify the color and then indicate how much tinting or shading you want. It is essentially a color palette maker on the go.

<div>
    <div class="bg-c-primary:-- -10**"></div>
    <div class="bg-c-primary:-- -5**"></div>
    <div class="bg-c-primary"></div>
    <div class="bg-c-primary:-- +5**"></div>
    <div class="bg-c-primary:-- +10**"></div>
</div>

To specify the tinting level, append a colon (:) to the color utility followed by a plus sign (+) and the desired intensity value, as in bg-c-blue:+10.

Similarly, to modify the shading, replace the plus sign (+) with a minus sign (-) and specify the desired intensity value like: bg-c-blue:-10

Changing Lightness Separately

You can lighten or darken a color with a separate utility:

<div class="bg-c-primary --bg-c:+2**">...</div>

<div class="bg-c-blue --bg-c:-8**">...</div>

This comes in handy when you have various shades of a color in an element and don't want to name each one. When you change the main color, all the other shades change too.

<div class="bg-c-primary" -- hover="bg-c:+2" ** -- focus="bg-c:+3" **>
    ...
</div>

Default Color Palette

Here's a list of Mojo's predefined colors, along with a palette of each to help you get started.