Spectre CSS

Color ​

Color utilities are used for changing colors for text, link and background.

Text ​

Theme:
primary secondary
Tint:
dark gray light
Feedback:
success warning error
html
<!-- theme -->
<span class="text-primary">primary color</span>
<span class="text-secondary">secondary color</span>

<!-- tint -->
<span class="text-dark">dark color</span>
<span class="text-gray">gray color</span>
<span class="text-light">light color</span>

<!-- feedback -->
<span class="text-success">success color</span>
<span class="text-warning">warning color</span>
<span class="text-error">error color</span>

Background ​

Theme:
primary secondary
Tint:
dark gray light
Feedback:
success warning error
html
<!-- theme -->
<div class="bg-primary">primary bg</div>
<div class="bg-secondary">secondary bg</div>

<!-- tint -->
<div class="bg-dark">dark bg</div>
<div class="bg-gray">gray bg</div>

<!-- feedback -->
<div class="bg-success">success bg</div>
<div class="bg-warning">warning bg</div>
<div class="bg-error">error bg</div>