Color Library color variants for ui components
- Home
- UI Features
UI Collor Collection
Just apply the color class(e.g: .blue-madison
) to Metronic portlets, buttons, statistic blocks, tiles and other containers.
#ffffff
white
white
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-white"
Box with custom border color
class="border-white"
Box with custom background color
class="bg-white bg-font-white"
Button
class="btn white"
Button
class="c-btn-border-1x c-btn-white"
Button
class="btn btn-circle white"
#e1e5ec
default
default
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-default"
Box with custom border color
class="border-default"
Box with custom background color
class="bg-default bg-font-default"
Button
class="btn default"
Button
class="c-btn-border-1x c-btn-default"
Button
class="btn btn-circle default"
#2f353b
dark
dark
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-dark"
Box with custom border color
class="border-dark"
Box with custom background color
class="bg-dark bg-font-dark"
Button
class="btn dark"
Button
class="c-btn-border-1x c-btn-dark"
Button
class="btn btn-circle dark"
#3598dc
blue
blue
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-blue"
Box with custom border color
class="border-blue"
Box with custom background color
class="bg-blue bg-font-blue"
Button
class="btn blue"
Button
class="c-btn-border-1x c-btn-blue"
Button
class="btn btn-circle blue"
#578ebe
blue-madison
blue-madison
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-blue-madison"
Box with custom border color
class="border-blue-madison"
Box with custom background color
class="bg-blue-madison bg-font-blue-madison"
Button
class="btn blue-madison"
Button
class="c-btn-border-1x c-btn-blue-madison"
Button
class="btn btn-circle blue-madison"
#2C3E50
blue-chambray
blue-chambray
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-blue-chambray"
Box with custom border color
class="border-blue-chambray"
Box with custom background color
class="bg-blue-chambray bg-font-blue-chambray"
Button
class="btn blue-chambray"
Button
class="c-btn-border-1x c-btn-blue-chambray"
Button
class="btn btn-circle blue-chambray"
#22313F
blue-ebonyclay
blue-ebonyclay
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-blue-ebonyclay"
Box with custom border color
class="border-blue-ebonyclay"
Box with custom background color
class="bg-blue-ebonyclay bg-font-blue-ebonyclay"
Button
class="btn blue-ebonyclay"
Button
class="c-btn-border-1x c-btn-blue-ebonyclay"
Button
class="btn btn-circle blue-ebonyclay"
#67809F
blue-hoki
blue-hoki
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-blue-hoki"
Box with custom border color
class="border-blue-hoki"
Box with custom background color
class="bg-blue-hoki bg-font-blue-hoki"
Button
class="btn blue-hoki"
Button
class="c-btn-border-1x c-btn-blue-hoki"
Button
class="btn btn-circle blue-hoki"
#4B77BE
blue-steel
blue-steel
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-blue-steel"
Box with custom border color
class="border-blue-steel"
Box with custom background color
class="bg-blue-steel bg-font-blue-steel"
Button
class="btn blue-steel"
Button
class="c-btn-border-1x c-btn-blue-steel"
Button
class="btn btn-circle blue-steel"
#4c87b9
blue-soft
blue-soft
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-blue-soft"
Box with custom border color
class="border-blue-soft"
Box with custom background color
class="bg-blue-soft bg-font-blue-soft"
Button
class="btn blue-soft"
Button
class="c-btn-border-1x c-btn-blue-soft"
Button
class="btn btn-circle blue-soft"
#5e738b
blue-dark
blue-dark
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-blue-dark"
Box with custom border color
class="border-blue-dark"
Box with custom background color
class="bg-blue-dark bg-font-blue-dark"
Button
class="btn blue-dark"
Button
class="c-btn-border-1x c-btn-blue-dark"
Button
class="btn btn-circle blue-dark"
#5C9BD1
blue-sharp
blue-sharp
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-blue-sharp"
Box with custom border color
class="border-blue-sharp"
Box with custom background color
class="bg-blue-sharp bg-font-blue-sharp"
Button
class="btn blue-sharp"
Button
class="c-btn-border-1x c-btn-blue-sharp"
Button
class="btn btn-circle blue-sharp"
#32c5d2
green
green
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-green"
Box with custom border color
class="border-green"
Box with custom background color
class="bg-green bg-font-green"
Button
class="btn green"
Button
class="c-btn-border-1x c-btn-green"
Button
class="btn btn-circle green"
#1BBC9B
green-meadow
green-meadow
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-green-meadow"
Box with custom border color
class="border-green-meadow"
Box with custom background color
class="bg-green-meadow bg-font-green-meadow"
Button
class="btn green-meadow"
Button
class="c-btn-border-1x c-btn-green-meadow"
Button
class="btn btn-circle green-meadow"
#1BA39C
green-seagreen
green-seagreen
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-green-seagreen"
Box with custom border color
class="border-green-seagreen"
Box with custom background color
class="bg-green-seagreen bg-font-green-seagreen"
Button
class="btn green-seagreen"
Button
class="c-btn-border-1x c-btn-green-seagreen"
Button
class="btn btn-circle green-seagreen"
#36D7B7
green-turquoise
green-turquoise
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-green-turquoise"
Box with custom border color
class="border-green-turquoise"
Box with custom background color
class="bg-green-turquoise bg-font-green-turquoise"
Button
class="btn green-turquoise"
Button
class="c-btn-border-1x c-btn-green-turquoise"
Button
class="btn btn-circle green-turquoise"
#44b6ae
green-haze
green-haze
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-green-haze"
Box with custom border color
class="border-green-haze"
Box with custom background color
class="bg-green-haze bg-font-green-haze"
Button
class="btn green-haze"
Button
class="c-btn-border-1x c-btn-green-haze"
Button
class="btn btn-circle green-haze"
#26C281
green-jungle
green-jungle
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-green-jungle"
Box with custom border color
class="border-green-jungle"
Box with custom background color
class="bg-green-jungle bg-font-green-jungle"
Button
class="btn green-jungle"
Button
class="c-btn-border-1x c-btn-green-jungle"
Button
class="btn btn-circle green-jungle"
#3faba4
green-soft
green-soft
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-green-soft"
Box with custom border color
class="border-green-soft"
Box with custom background color
class="bg-green-soft bg-font-green-soft"
Button
class="btn green-soft"
Button
class="c-btn-border-1x c-btn-green-soft"
Button
class="btn btn-circle green-soft"
#4DB3A2
green-dark
green-dark
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-green-dark"
Box with custom border color
class="border-green-dark"
Box with custom background color
class="bg-green-dark bg-font-green-dark"
Button
class="btn green-dark"
Button
class="c-btn-border-1x c-btn-green-dark"
Button
class="btn btn-circle green-dark"
#2ab4c0
green-sharp
green-sharp
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-green-sharp"
Box with custom border color
class="border-green-sharp"
Box with custom background color
class="bg-green-sharp bg-font-green-sharp"
Button
class="btn green-sharp"
Button
class="c-btn-border-1x c-btn-green-sharp"
Button
class="btn btn-circle green-sharp"
#E5E5E5
grey
grey
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-grey"
Box with custom border color
class="border-grey"
Box with custom background color
class="bg-grey bg-font-grey"
Button
class="btn grey"
Button
class="c-btn-border-1x c-btn-grey"
Button
class="btn btn-circle grey"
#e9edef
grey-steel
grey-steel
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-grey-steel"
Box with custom border color
class="border-grey-steel"
Box with custom background color
class="bg-grey-steel bg-font-grey-steel"
Button
class="btn grey-steel"
Button
class="c-btn-border-1x c-btn-grey-steel"
Button
class="btn btn-circle grey-steel"
#fafafa
grey-cararra
grey-cararra
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-grey-cararra"
Box with custom border color
class="border-grey-cararra"
Box with custom background color
class="bg-grey-cararra bg-font-grey-cararra"
Button
class="btn grey-cararra"
Button
class="c-btn-border-1x c-btn-grey-cararra"
Button
class="btn btn-circle grey-cararra"
#555555
grey-gallery
grey-gallery
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-grey-gallery"
Box with custom border color
class="border-grey-gallery"
Box with custom background color
class="bg-grey-gallery bg-font-grey-gallery"
Button
class="btn grey-gallery"
Button
class="c-btn-border-1x c-btn-grey-gallery"
Button
class="btn btn-circle grey-gallery"
#95A5A6
grey-cascade
grey-cascade
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-grey-cascade"
Box with custom border color
class="border-grey-cascade"
Box with custom background color
class="bg-grey-cascade bg-font-grey-cascade"
Button
class="btn grey-cascade"
Button
class="c-btn-border-1x c-btn-grey-cascade"
Button
class="btn btn-circle grey-cascade"
#BFBFBF
grey-silver
grey-silver
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-grey-silver"
Box with custom border color
class="border-grey-silver"
Box with custom background color
class="bg-grey-silver bg-font-grey-silver"
Button
class="btn grey-silver"
Button
class="c-btn-border-1x c-btn-grey-silver"
Button
class="btn btn-circle grey-silver"
#ACB5C3
grey-salsa
grey-salsa
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-grey-salsa"
Box with custom border color
class="border-grey-salsa"
Box with custom background color
class="bg-grey-salsa bg-font-grey-salsa"
Button
class="btn grey-salsa"
Button
class="c-btn-border-1x c-btn-grey-salsa"
Button
class="btn btn-circle grey-salsa"
#bfcad1
grey-salt
grey-salt
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-grey-salt"
Box with custom border color
class="border-grey-salt"
Box with custom background color
class="bg-grey-salt bg-font-grey-salt"
Button
class="btn grey-salt"
Button
class="c-btn-border-1x c-btn-grey-salt"
Button
class="btn btn-circle grey-salt"
#525e64
grey-mint
grey-mint
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-grey-mint"
Box with custom border color
class="border-grey-mint"
Box with custom background color
class="bg-grey-mint bg-font-grey-mint"
Button
class="btn grey-mint"
Button
class="c-btn-border-1x c-btn-grey-mint"
Button
class="btn btn-circle grey-mint"
#e7505a
red
red
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-red"
Box with custom border color
class="border-red"
Box with custom background color
class="bg-red bg-font-red"
#E08283
red-pink
red-pink
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-red-pink"
Box with custom border color
class="border-red-pink"
Box with custom background color
class="bg-red-pink bg-font-red-pink"
Button
class="btn red-pink"
Button
class="c-btn-border-1x c-btn-red-pink"
Button
class="btn btn-circle red-pink"
#E26A6A
red-sunglo
red-sunglo
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-red-sunglo"
Box with custom border color
class="border-red-sunglo"
Box with custom background color
class="bg-red-sunglo bg-font-red-sunglo"
Button
class="btn red-sunglo"
Button
class="c-btn-border-1x c-btn-red-sunglo"
Button
class="btn btn-circle red-sunglo"
#e35b5a
red-intense
red-intense
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-red-intense"
Box with custom border color
class="border-red-intense"
Box with custom background color
class="bg-red-intense bg-font-red-intense"
Button
class="btn red-intense"
Button
class="c-btn-border-1x c-btn-red-intense"
Button
class="btn btn-circle red-intense"
#D91E18
red-thunderbird
red-thunderbird
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-red-thunderbird"
Box with custom border color
class="border-red-thunderbird"
Box with custom background color
class="bg-red-thunderbird bg-font-red-thunderbird"
Button
class="btn red-thunderbird"
Button
class="c-btn-border-1x c-btn-red-thunderbird"
Button
class="btn btn-circle red-thunderbird"
#EF4836
red-flamingo
red-flamingo
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-red-flamingo"
Box with custom border color
class="border-red-flamingo"
Box with custom background color
class="bg-red-flamingo bg-font-red-flamingo"
Button
class="btn red-flamingo"
Button
class="c-btn-border-1x c-btn-red-flamingo"
Button
class="btn btn-circle red-flamingo"
#d05454
red-soft
red-soft
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-red-soft"
Box with custom border color
class="border-red-soft"
Box with custom background color
class="bg-red-soft bg-font-red-soft"
Button
class="btn red-soft"
Button
class="c-btn-border-1x c-btn-red-soft"
Button
class="btn btn-circle red-soft"
#f36a5a
red-haze
red-haze
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-red-haze"
Box with custom border color
class="border-red-haze"
Box with custom background color
class="bg-red-haze bg-font-red-haze"
Button
class="btn red-haze"
Button
class="c-btn-border-1x c-btn-red-haze"
Button
class="btn btn-circle red-haze"
#e43a45
red-mint
red-mint
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-red-mint"
Box with custom border color
class="border-red-mint"
Box with custom background color
class="bg-red-mint bg-font-red-mint"
Button
class="btn red-mint"
Button
class="c-btn-border-1x c-btn-red-mint"
Button
class="btn btn-circle red-mint"
#c49f47
yellow
yellow
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-yellow"
Box with custom border color
class="border-yellow"
Box with custom background color
class="bg-yellow bg-font-yellow"
Button
class="btn yellow"
Button
class="c-btn-border-1x c-btn-yellow"
Button
class="btn btn-circle yellow"
#E87E04
yellow-gold
yellow-gold
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-yellow-gold"
Box with custom border color
class="border-yellow-gold"
Box with custom background color
class="bg-yellow-gold bg-font-yellow-gold"
Button
class="btn yellow-gold"
Button
class="c-btn-border-1x c-btn-yellow-gold"
Button
class="btn btn-circle yellow-gold"
#f2784b
yellow-casablanca
yellow-casablanca
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-yellow-casablanca"
Box with custom border color
class="border-yellow-casablanca"
Box with custom background color
class="bg-yellow-casablanca bg-font-yellow-casablanca"
Button
class="btn yellow-casablanca"
Button
class="c-btn-border-1x c-btn-yellow-casablanca"
Button
class="btn btn-circle yellow-casablanca"
#f3c200
yellow-crusta
yellow-crusta
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-yellow-crusta"
Box with custom border color
class="border-yellow-crusta"
Box with custom background color
class="bg-yellow-crusta bg-font-yellow-crusta"
Button
class="btn yellow-crusta"
Button
class="c-btn-border-1x c-btn-yellow-crusta"
Button
class="btn btn-circle yellow-crusta"
#F7CA18
yellow-lemon
yellow-lemon
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-yellow-lemon"
Box with custom border color
class="border-yellow-lemon"
Box with custom background color
class="bg-yellow-lemon bg-font-yellow-lemon"
Button
class="btn yellow-lemon"
Button
class="c-btn-border-1x c-btn-yellow-lemon"
Button
class="btn btn-circle yellow-lemon"
#F4D03F
yellow-saffron
yellow-saffron
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-yellow-saffron"
Box with custom border color
class="border-yellow-saffron"
Box with custom background color
class="bg-yellow-saffron bg-font-yellow-saffron"
Button
class="btn yellow-saffron"
Button
class="c-btn-border-1x c-btn-yellow-saffron"
Button
class="btn btn-circle yellow-saffron"
#c8d046
yellow-soft
yellow-soft
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-yellow-soft"
Box with custom border color
class="border-yellow-soft"
Box with custom background color
class="bg-yellow-soft bg-font-yellow-soft"
Button
class="btn yellow-soft"
Button
class="c-btn-border-1x c-btn-yellow-soft"
Button
class="btn btn-circle yellow-soft"
#c5bf66
yellow-haze
yellow-haze
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-yellow-haze"
Box with custom border color
class="border-yellow-haze"
Box with custom background color
class="bg-yellow-haze bg-font-yellow-haze"
Button
class="btn yellow-haze"
Button
class="c-btn-border-1x c-btn-yellow-haze"
Button
class="btn btn-circle yellow-haze"
#c5b96b
yellow-mint
yellow-mint
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-yellow-mint"
Box with custom border color
class="border-yellow-mint"
Box with custom background color
class="bg-yellow-mint bg-font-yellow-mint"
Button
class="btn yellow-mint"
Button
class="c-btn-border-1x c-btn-yellow-mint"
Button
class="btn btn-circle yellow-mint"
#8E44AD
purple
purple
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-purple"
Box with custom border color
class="border-purple"
Box with custom background color
class="bg-purple bg-font-purple"
Button
class="btn purple"
Button
class="c-btn-border-1x c-btn-purple"
Button
class="btn btn-circle purple"
#8775a7
purple-plum
purple-plum
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-purple-plum"
Box with custom border color
class="border-purple-plum"
Box with custom background color
class="bg-purple-plum bg-font-purple-plum"
Button
class="btn purple-plum"
Button
class="c-btn-border-1x c-btn-purple-plum"
Button
class="btn btn-circle purple-plum"
#BF55EC
purple-medium
purple-medium
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-purple-medium"
Box with custom border color
class="border-purple-medium"
Box with custom background color
class="bg-purple-medium bg-font-purple-medium"
Button
class="btn purple-medium"
Button
class="c-btn-border-1x c-btn-purple-medium"
Button
class="btn btn-circle purple-medium"
#8E44AD
purple-studio
purple-studio
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-purple-studio"
Box with custom border color
class="border-purple-studio"
Box with custom background color
class="bg-purple-studio bg-font-purple-studio"
Button
class="btn purple-studio"
Button
class="c-btn-border-1x c-btn-purple-studio"
Button
class="btn btn-circle purple-studio"
#9B59B6
purple-wisteria
purple-wisteria
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-purple-wisteria"
Box with custom border color
class="border-purple-wisteria"
Box with custom background color
class="bg-purple-wisteria bg-font-purple-wisteria"
Button
class="btn purple-wisteria"
Button
class="c-btn-border-1x c-btn-purple-wisteria"
Button
class="btn btn-circle purple-wisteria"
#9A12B3
purple-seance
purple-seance
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-purple-seance"
Box with custom border color
class="border-purple-seance"
Box with custom background color
class="bg-purple-seance bg-font-purple-seance"
Button
class="btn purple-seance"
Button
class="c-btn-border-1x c-btn-purple-seance"
Button
class="btn btn-circle purple-seance"
#8775a7
purple-intense
purple-intense
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-purple-intense"
Box with custom border color
class="border-purple-intense"
Box with custom background color
class="bg-purple-intense bg-font-purple-intense"
Button
class="btn purple-intense"
Button
class="c-btn-border-1x c-btn-purple-intense"
Button
class="btn btn-circle purple-intense"
#796799
purple-sharp
purple-sharp
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-purple-sharp"
Box with custom border color
class="border-purple-sharp"
Box with custom background color
class="bg-purple-sharp bg-font-purple-sharp"
Button
class="btn purple-sharp"
Button
class="c-btn-border-1x c-btn-purple-sharp"
Button
class="btn btn-circle purple-sharp"
#8877a9
purple-soft
purple-soft
Text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Background matching text font
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Some sample text goes here...
Icon font
Background matching icon font
Class usage
class="font-purple-soft"
Box with custom border color
class="border-purple-soft"
Box with custom background color
class="bg-purple-soft bg-font-purple-soft"
Button
class="btn purple-soft"
Button
class="c-btn-border-1x c-btn-purple-soft"
Button
class="btn btn-circle purple-soft"