Semantic Colors

Colors that have significance:

<!-- example -->
<div class="shape-circle fill-primary">primary</div>

Semantic Gradients

From solid colors to discreet gradients:

<!-- example -->
<div class="shape-circle fill-primary fill-gradient">primary</div>

Semantic Containers

Adjusted tones can be exploited obtaining sematics blocks of info.

<!-- example -->
<div class="shape-square fill-primary-container">primary</div>

Semantic Gradient Containers

From solid colors to discreet gradients:

<!-- example -->
<div class="shape-square fill-primary-container fill-gradient">primary</div>

Palette

Standard colors adapted that fits the actual theme:

<!-- example -->
<div class="shape-circle fill-green">green</div>

Palette Gradients

From solid colors to discreet gradients:

<!-- example -->
<div class="shape-circle fill-green fill-gradient">green</div>

Paletted Containers

Adjusted tones can be exploited obtaining colored blocks of info.

<!-- example -->
<div class="shape-square fill-green-container">green</div>

Paletted Gradient Containers

Adjusted tones can be exploited obtaining colored blocks of info.

<!-- example -->
<div class="shape-square fill-green-container fill-gradient">green</div>

Text

Text can be colorized as it follows:

<!-- example -->
<span class="text-primary">primary</span>

Interactivity

Hover/focus intereactivity feedback can be requested to filled DOMElements or colored text content by adding .fill-interactive and .text-interactive css classes respectively.

<!-- examples -->
<span class="fill-primary fill-interactive">primary</span>
<span class="fill-primary-container fill-interactive">primary-container</span>
<span class="text-primary text-interactive">primary</span>

Borders

Borders can be colorized as it follows:

<!-- example -->
<div class="shape-square border-solid border-size--2 border-primary">primary</div>

Halo Effect

Halo effect either inner or outer can be applied as it follows:

<!-- halo effect (outer) -->
<div class="shape-circle halo-primary">out</div>

<!-- halo effect (inner) -->
<div class="shape-circle halo-primary halo-in">in</div>

<!-- halo effect (both inner and outer) -->
<div class="shape-circle halo-primary halo-in-out">in-out</div>

Glassmorphism

Glass effects, per-color, can be applied as it follows:

<!-- glassmorphism -->
<div class="shape-circle fill-primary fill-glass">primary</div>

Dynamic Colors

Generate palette from a specific set of colors: