Text-Color usage

To apply a text color, add the color name with -text as a class to your element.

<div class="niagara-text">Element withe class </div>

To apply a shade of the text color, add a second class with the text-light- or text-dark- prefix and the variation-number.

<div class="niagara-text text-dark-3">Element withe class </div>

Border-Color usage

To apply a border color, add a class with the color name and -border suffix to your element.

<div class="niagara-border">Element withe class </div>

To apply a shade of the border color, add a second class with the border-light- or border-dark- prefix and the variation-number.

<div class="niagara-border border-dark-3">Element withe class </div>

Combinations

To apply a background color and a text color, add both -border and -text classes to your element.

<div class=" greenery kale-border kale-text">Element with class </div>

<div class="kale light-1 kale-border greenery-text text-light-3 ">Element with class </div>

Gradient

Learn how to create your own gradients at intensivstation.ch
Try to use a CSS Gradient Generator: colorzilla, cssmatic, angrytools, cssportal, css3factory

<div class="grad-niagara-lapisBlue">Element withe class </div>

You can combine all sorts of classes to make it look nice.

<div class="grad-niagara-lapisBlue-rq lapisBlue-text text-light-1">Element withe class </div>

Text Gradient

Warning: This is WebKit only, but the best way to solve this.
Check these articles: kulturbanause, css-tricks, wiki selfhtml, or just generate you CSS class with enjoycss.

 /* CSS -webkit only */
.gradient-text {
	font-family: Arial;
	color: #F7CAC9;
	font-size: 50px;
	font-weight: bold;
	background: -webkit-linear-gradient(#F7CAC9, #91A8D0);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}	

Horizontal Ruler

To apply a color to a horizontal ruler hr, add the color name as class to your element.

<hr class="greenery">
<hr class="islandParadise">
<hr class="pinkYarrow">
<hr class="niagara">
etc.

HR Design

Here are some more advanced horizontal rulers. To use this style, just copy one of the five elements to your HTML.

<hr class="grad-1-17">
<hr class="grad-2-17">
<hr class="grad-3-17">