Colors that have significance:
<!-- example -->
<div class="shape-circle fill-primary">primary</div>
From solid colors to discreet gradients:
<!-- example -->
<div class="shape-circle fill-primary fill-gradient">primary</div>
Adjusted tones can be exploited obtaining sematics blocks of info.
<!-- example -->
<div class="shape-square fill-primary-container">primary</div>
From solid colors to discreet gradients:
<!-- example -->
<div class="shape-square fill-primary-container fill-gradient">primary</div>
Standard colors adapted that fits the actual theme:
<!-- example -->
<div class="shape-circle fill-green">green</div>
From solid colors to discreet gradients:
<!-- example -->
<div class="shape-circle fill-green fill-gradient">green</div>
Adjusted tones can be exploited obtaining colored blocks of info.
<!-- example -->
<div class="shape-square fill-green-container">green</div>
Adjusted tones can be exploited obtaining colored blocks of info.
<!-- example -->
<div class="shape-square fill-green-container fill-gradient">green</div>
Text can be colorized as it follows:
<!-- example -->
<span class="text-primary">primary</span>
Hover/focus intereactivity feedback can be requested to filled DOMElement
s 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 can be colorized as it follows:
<!-- example -->
<div class="shape-square border-solid border-size--2 border-primary">primary</div>
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>
Glass effects, per-color, can be applied as it follows:
<!-- glassmorphism -->
<div class="shape-circle fill-primary fill-glass">primary</div>
Generate palette from a specific set of colors:
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.