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
Here's a list of Mojo's predefined colors, along with a palette of each to help you get started.
On this page