Color: Requirements

---

Color: Black & White

Black and White cannot be lightened or darkened with class name extensions (use gray).

---

Color: Class Prefix Options (Required)

The Color Class Prefix can be written in different ways depending on your desired specificity.

Minimal	.cl
Strict	.color

Color: Class Color Extensions (Required)

The following color extensions can be customized and extended in the variable-settings.scss file.

-gray	-primary	-success	-danger
-warning	-info	-harvest	-royal

Color: Class Brightness Extensions (Optional)

The following breakpoint extension can be customized and extended in the variable-settings.scss file.

-darkest	-darker	-dark
-light	-lighter	-lightest

Color: Example Code

<!-- Minimal: Creates red text. -->
<div class="cl-red">Red Text</div>

<!-- Minimal: Creates light blue text. -->
<div class="cl-primary-light">Light Blue Text</div>

<!-- Strict: Creates darker purple text. -->
<div class="color-royal-darker">Dark Purple Text</div>

Color: Examples