Text Color

For color: {value} use class .{color-name}.

Example	Class
The 7 habits of highly effective people	`.blue-darkest`
The 7 habits of highly effective people	`.blue-darker`
The 7 habits of highly effective people	`.blue-dark`
The 7 habits of highly effective people	`.blue`
The 7 habits of highly effective people	`.blue-light`
The 7 habits of highly effective people	`.blue-lighter`
The 7 habits of highly effective people	`.blue-lightest`
The 7 habits of highly effective people	`.indigo-darkest`
The 7 habits of highly effective people	`.indigo-darker`
The 7 habits of highly effective people	`.indigo-dark`
The 7 habits of highly effective people	`.indigo`
The 7 habits of highly effective people	`.indigo-light`
The 7 habits of highly effective people	`.indigo-lighter`
The 7 habits of highly effective people	`.indigo-lightest`
The 7 habits of highly effective people	`.purple-darkest`
The 7 habits of highly effective people	`.purple-darker`
The 7 habits of highly effective people	`.purple-dark`
The 7 habits of highly effective people	`.purple`
The 7 habits of highly effective people	`.purple-light`
The 7 habits of highly effective people	`.purple-lighter`
The 7 habits of highly effective people	`.purple-lightest`
The 7 habits of highly effective people	`.pink-darkest`
The 7 habits of highly effective people	`.pink-darker`
The 7 habits of highly effective people	`.pink-dark`
The 7 habits of highly effective people	`.pink`
The 7 habits of highly effective people	`.pink-light`
The 7 habits of highly effective people	`.pink-lighter`
The 7 habits of highly effective people	`.pink-lightest`
The 7 habits of highly effective people	`.red-darkest`
The 7 habits of highly effective people	`.red-darker`
The 7 habits of highly effective people	`.red-dark`
The 7 habits of highly effective people	`.red`
The 7 habits of highly effective people	`.red-light`
The 7 habits of highly effective people	`.red-lighter`
The 7 habits of highly effective people	`.red-lightest`
The 7 habits of highly effective people	`.orange-darkest`
The 7 habits of highly effective people	`.orange-darker`
The 7 habits of highly effective people	`.orange-dark`
The 7 habits of highly effective people	`.orange`
The 7 habits of highly effective people	`.orange-light`
The 7 habits of highly effective people	`.orange-lighter`
The 7 habits of highly effective people	`.orange-lightest`
The 7 habits of highly effective people	`.yellow-darkest`
The 7 habits of highly effective people	`.yellow-darker`
The 7 habits of highly effective people	`.yellow-dark`
The 7 habits of highly effective people	`.yellow`
The 7 habits of highly effective people	`.yellow-light`
The 7 habits of highly effective people	`.yellow-lighter`
The 7 habits of highly effective people	`.yellow-lightest`
The 7 habits of highly effective people	`.pear-darkest`
The 7 habits of highly effective people	`.pear-darker`
The 7 habits of highly effective people	`.pear-dark`
The 7 habits of highly effective people	`.pear`
The 7 habits of highly effective people	`.pear-light`
The 7 habits of highly effective people	`.pear-lighter`
The 7 habits of highly effective people	`.pear-lightest`
The 7 habits of highly effective people	`.green-darkest`
The 7 habits of highly effective people	`.green-darker`
The 7 habits of highly effective people	`.green-dark`
The 7 habits of highly effective people	`.green`
The 7 habits of highly effective people	`.green-light`
The 7 habits of highly effective people	`.green-lighter`
The 7 habits of highly effective people	`.green-lightest`
The 7 habits of highly effective people	`.mint-darkest`
The 7 habits of highly effective people	`.mint-darker`
The 7 habits of highly effective people	`.mint-dark`
The 7 habits of highly effective people	`.mint`
The 7 habits of highly effective people	`.mint-light`
The 7 habits of highly effective people	`.mint-lighter`
The 7 habits of highly effective people	`.mint-lightest`
The 7 habits of highly effective people	`.teal-darkest`
The 7 habits of highly effective people	`.teal-darker`
The 7 habits of highly effective people	`.teal-dark`
The 7 habits of highly effective people	`.teal`
The 7 habits of highly effective people	`.teal-light`
The 7 habits of highly effective people	`.teal-lighter`
The 7 habits of highly effective people	`.teal-lightest`
The 7 habits of highly effective people	`.gray-darkest`
The 7 habits of highly effective people	`.gray-darker`
The 7 habits of highly effective people	`.gray-dark`
The 7 habits of highly effective people	`.gray`
The 7 habits of highly effective people	`.gray-light`
The 7 habits of highly effective people	`.gray-lighter`
The 7 habits of highly effective people	`.gray-lightest`
The 7 habits of highly effective people	`.slategray-darkest`
The 7 habits of highly effective people	`.slategray-darker`
The 7 habits of highly effective people	`.slategray-dark`
The 7 habits of highly effective people	`.slategray`
The 7 habits of highly effective people	`.slategray-light`
The 7 habits of highly effective people	`.slategray-lighter`
The 7 habits of highly effective people	`.slategray-lightest`
The 7 habits of highly effective people	`.brown-darkest`
The 7 habits of highly effective people	`.brown-darker`
The 7 habits of highly effective people	`.brown-dark`
The 7 habits of highly effective people	`.brown`
The 7 habits of highly effective people	`.brown-light`
The 7 habits of highly effective people	`.brown-lighter`
The 7 habits of highly effective people	`.brown-lightest`
The 7 habits of highly effective people	`.wine-darkest`
The 7 habits of highly effective people	`.wine-darker`
The 7 habits of highly effective people	`.wine-dark`
The 7 habits of highly effective people	`.wine`
The 7 habits of highly effective people	`.wine-light`
The 7 habits of highly effective people	`.wine-lighter`
The 7 habits of highly effective people	`.wine-lightest`
The 7 habits of highly effective people	`.almond-darkest`
The 7 habits of highly effective people	`.almond-darker`
The 7 habits of highly effective people	`.almond-dark`
The 7 habits of highly effective people	`.almond`
The 7 habits of highly effective people	`.almond-light`
The 7 habits of highly effective people	`.almond-lighter`
The 7 habits of highly effective people	`.almond-lightest`

Gradient Text

In CSS, gradient text color doesn't support. To make text color gradient, first set text background color gradient .{start-color}-{end-color} and then clip the background with .text-gradient

.text-gradient .blue-indigo

.text-gradient .blue-purple

.text-gradient .blue-pink

.text-gradient .blue-red

.text-gradient .blue-orange

.text-gradient .blue-yellow

.text-gradient .blue-pear

.text-gradient .blue-green

.text-gradient .blue-mint

.text-gradient .blue-teal

.text-gradient .blue-gray

.text-gradient .blue-slategray

.text-gradient .blue-brown

.text-gradient .blue-wine

.text-gradient .blue-almond

.text-gradient .indigo-blue

.text-gradient .indigo-purple

.text-gradient .indigo-pink

.text-gradient .indigo-red

.text-gradient .indigo-orange

.text-gradient .indigo-yellow

.text-gradient .indigo-pear

.text-gradient .indigo-green

.text-gradient .indigo-mint

.text-gradient .indigo-teal

.text-gradient .indigo-gray

.text-gradient .indigo-slategray

.text-gradient .indigo-brown

.text-gradient .indigo-wine

.text-gradient .indigo-almond

.text-gradient .purple-blue

.text-gradient .purple-indigo

.text-gradient .purple-pink

.text-gradient .purple-red

.text-gradient .purple-orange

.text-gradient .purple-yellow

.text-gradient .purple-pear

.text-gradient .purple-green

.text-gradient .purple-mint

.text-gradient .purple-teal

.text-gradient .purple-gray

.text-gradient .purple-slategray

.text-gradient .purple-brown

.text-gradient .purple-wine

.text-gradient .purple-almond

.text-gradient .pink-blue

.text-gradient .pink-indigo

.text-gradient .pink-purple

.text-gradient .pink-red

.text-gradient .pink-orange

.text-gradient .pink-yellow

.text-gradient .pink-pear

.text-gradient .pink-green

.text-gradient .pink-mint

.text-gradient .pink-teal

.text-gradient .pink-gray

.text-gradient .pink-slategray

.text-gradient .pink-brown

.text-gradient .pink-wine

.text-gradient .pink-almond

.text-gradient .red-blue

.text-gradient .red-indigo

.text-gradient .red-purple

.text-gradient .red-pink

.text-gradient .red-orange

.text-gradient .red-yellow

.text-gradient .red-pear

.text-gradient .red-green

.text-gradient .red-mint

.text-gradient .red-teal

.text-gradient .red-gray

.text-gradient .red-slategray

.text-gradient .red-brown

.text-gradient .red-wine

.text-gradient .red-almond

.text-gradient .orange-blue

.text-gradient .orange-indigo

.text-gradient .orange-purple

.text-gradient .orange-pink

.text-gradient .orange-red

.text-gradient .orange-yellow

.text-gradient .orange-pear

.text-gradient .orange-green

.text-gradient .orange-mint

.text-gradient .orange-teal

.text-gradient .orange-gray

.text-gradient .orange-slategray

.text-gradient .orange-brown

.text-gradient .orange-wine

.text-gradient .orange-almond

.text-gradient .yellow-blue

.text-gradient .yellow-indigo

.text-gradient .yellow-purple

.text-gradient .yellow-pink

.text-gradient .yellow-red

.text-gradient .yellow-orange

.text-gradient .yellow-pear

.text-gradient .yellow-green

.text-gradient .yellow-mint

.text-gradient .yellow-teal

.text-gradient .yellow-gray

.text-gradient .yellow-slategray

.text-gradient .yellow-brown

.text-gradient .yellow-wine

.text-gradient .yellow-almond

.text-gradient .pear-blue

.text-gradient .pear-indigo

.text-gradient .pear-purple

.text-gradient .pear-pink

.text-gradient .pear-red

.text-gradient .pear-orange

.text-gradient .pear-yellow

.text-gradient .pear-green

.text-gradient .pear-mint

.text-gradient .pear-teal

.text-gradient .pear-gray

.text-gradient .pear-slategray

.text-gradient .pear-brown

.text-gradient .pear-wine

.text-gradient .pear-almond

.text-gradient .green-blue

.text-gradient .green-indigo

.text-gradient .green-purple

.text-gradient .green-pink

.text-gradient .green-red

.text-gradient .green-orange

.text-gradient .green-yellow

.text-gradient .green-pear

.text-gradient .green-mint

.text-gradient .green-teal

.text-gradient .green-gray

.text-gradient .green-slategray

.text-gradient .green-brown

.text-gradient .green-wine

.text-gradient .green-almond

.text-gradient .mint-blue

.text-gradient .mint-indigo

.text-gradient .mint-purple

.text-gradient .mint-pink

.text-gradient .mint-red

.text-gradient .mint-orange

.text-gradient .mint-yellow

.text-gradient .mint-pear

.text-gradient .mint-green

.text-gradient .mint-teal

.text-gradient .mint-gray

.text-gradient .mint-slategray

.text-gradient .mint-brown

.text-gradient .mint-wine

.text-gradient .mint-almond

.text-gradient .teal-blue

.text-gradient .teal-indigo

.text-gradient .teal-purple

.text-gradient .teal-pink

.text-gradient .teal-red

.text-gradient .teal-orange

.text-gradient .teal-yellow

.text-gradient .teal-pear

.text-gradient .teal-green

.text-gradient .teal-mint

.text-gradient .teal-gray

.text-gradient .teal-slategray

.text-gradient .teal-brown

.text-gradient .teal-wine

.text-gradient .teal-almond

.text-gradient .gray-blue

.text-gradient .gray-indigo

.text-gradient .gray-purple

.text-gradient .gray-pink

.text-gradient .gray-red

.text-gradient .gray-orange

.text-gradient .gray-yellow

.text-gradient .gray-pear

.text-gradient .gray-green

.text-gradient .gray-mint

.text-gradient .gray-teal

.text-gradient .gray-slategray

.text-gradient .gray-brown

.text-gradient .gray-wine

.text-gradient .gray-almond

.text-gradient .slategray-blue

.text-gradient .slategray-indigo

.text-gradient .slategray-purple

.text-gradient .slategray-pink

.text-gradient .slategray-red

.text-gradient .slategray-orange

.text-gradient .slategray-yellow

.text-gradient .slategray-pear

.text-gradient .slategray-green

.text-gradient .slategray-mint

.text-gradient .slategray-teal

.text-gradient .slategray-gray

.text-gradient .slategray-brown

.text-gradient .slategray-wine

.text-gradient .slategray-almond

.text-gradient .brown-blue

.text-gradient .brown-indigo

.text-gradient .brown-purple

.text-gradient .brown-pink

.text-gradient .brown-red

.text-gradient .brown-orange

.text-gradient .brown-yellow

.text-gradient .brown-pear

.text-gradient .brown-green

.text-gradient .brown-mint

.text-gradient .brown-teal

.text-gradient .brown-gray

.text-gradient .brown-slategray

.text-gradient .brown-wine

.text-gradient .brown-almond

.text-gradient .wine-blue

.text-gradient .wine-indigo

.text-gradient .wine-purple

.text-gradient .wine-pink

.text-gradient .wine-red

.text-gradient .wine-orange

.text-gradient .wine-yellow

.text-gradient .wine-pear

.text-gradient .wine-green

.text-gradient .wine-mint

.text-gradient .wine-teal

.text-gradient .wine-gray

.text-gradient .wine-slategray

.text-gradient .wine-brown

.text-gradient .wine-almond

.text-gradient .almond-blue

.text-gradient .almond-indigo

.text-gradient .almond-purple

.text-gradient .almond-pink

.text-gradient .almond-red

.text-gradient .almond-orange

.text-gradient .almond-yellow

.text-gradient .almond-pear

.text-gradient .almond-green

.text-gradient .almond-mint

.text-gradient .almond-teal

.text-gradient .almond-gray

.text-gradient .almond-slategray

.text-gradient .almond-brown

.text-gradient .almond-wine

Getting Started

Elements

Helper

Components

Theme

Background

Text

Flex Layout

Spacing

Size

Display Position

Interaction

Utilities

Text Color

Gradient Text