Utilities Color
Color

Color utilities are used to convey meaning through color. Use color utilities for text, background, and border for different kinds of emphasis and visual expression.

Theme colors

Different projects have different themes. The primary and secondary colors may differ from one project to another, but they can consistently be referred to as "primary" and "secondary"

Primary primary-500
Secondary secondary-500
Semantic Colors

Colors that communicate purpose. They help users convey messages.
Typically, red represents danger or error; orange represents a serious warning; yellow represents a regular warning, and green represents normal or success and blue represents informative message.

Danger red-500
Information cyan-500
Success green-500
Warning yellow-500
Platform Colors

Versatility is at the heart of the Color System. While a limited palette has been selected for the Brand Color Palette and for the UI Color Palette, a full spectrum of colors exist to accomodate unique color requirements on a case-by-case basis.

Blue
blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
Green
green-50
green-100
green-200
green-300
green-400
green-500
green-600
Grey
grey-50
grey-100
grey-200
grey-300
grey-400
grey-500
grey-600
Red
red-50
red-100
red-200
red-300
red-400
red-500
red-600
yellow
yellow-50
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
Cyan
cyan-50
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
Purple
purple-50
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
Claret
claret-50
claret-100
claret-200
claret-300
claret-400
claret-500
claret-600
                        
                        
<div class="font-primary-500">font-primary-500</div>
Background gradient

Easily set the backround by using .ds-bg-*-gradient color classes

primary
secondary
green
blue
purple
cyan
red
claret
yellow
                        
                        <div class="ds-bg-primary-gradient"></div>
                        
                    
                        
                        <div class="ds-bg-secondary-gradient"></div>
                        
                    
                        
                        <div class="ds-bg-green-gradient"></div>
                        
                    
                        
                        <div class="ds-bg-blue-gradient"></div>
                        
                    
                        
                        <div class="ds-bg-purple-gradient"></div>
                        
                    
                        
                        <div class="ds-bg-cyan-gradient"></div>
                        
                    
                        
                        <div class="ds-bg-red-gradient"></div>
                        
                    
                        
                        <div class="ds-bg-claret-gradient"></div>
                        
                    
                        
                        <div class="ds-bg-yellow-gradient"></div>
Warm & cool gradients

Easily set the backround by using .ds-bg-*-gradient color classes

silence
seashore
orange
amour
beach
sunny
                        
                        <div class="ds-bg-silence-gradient"></div>
                        
                    
                        
                        <div class="ds-bg-seashore-gradient"></div>
                        
                    
                        
                        <div class="ds-bg-orange-gradient"></div>
                        
                    
                        
                        <div class="ds-bg-amour-gradient"></div>
                        
                    
                        
                        <div class="ds-bg-beach-gradient"></div>
                        
                    
                        
                        <div class="ds-bg-sunny-gradient"></div>
Background color

Easily set the background by using .ds-bg-* color classes

ds-bg-primary-50 Light
ds-bg-primary-100
ds-bg-primary-200
ds-bg-primary-300
ds-bg-primary-400
ds-bg-primary-500 Default
ds-bg-primary-600 Dark 
                                
                                <div class="ds-bg-primary-50"></div>
                                
                    
                        
                        <div class="ds-bg-primary-100"></div>
                        
                    
                        
                        <div class="ds-bg-primary-200"></div>
                        
                    
                        
                        <div class="ds-bg-primary-300"></div>
                        
                    
                        
                        <div class="ds-bg-primary-400"></div>
                        
                    
                        
                        <div class="ds-bg-primary-500"></div>
                        
                    
                        
                        <div class="ds-bg-primary-600"></div>
Text color

Easily set the text by using .text-* color classes

font-primary-600
font-primary-500
font-primary-400
font-primary-300
font-primary-200
font-primary-100
text-dark
text-white
                        
                        <div class="ds-font-primary-600">font-primary-600</div>
                        
                    
                        
                        <div class="ds-font-primary-500">font-primary-500</div>
                        
                    
                        
                        <div class="ds-font-primary-400">font-primary-400</div>
                        
                    
                        
                        <div class="ds-font-primary-300">font-primary-300</div>
                        
                    
                        
                        <div class="ds-font-primary-200">font-primary-200</div>
                        
                    
                        
                        <div class="ds-font-primary-100">font-primary-100</div>
                        
                    
                        
                        <div class="ds-font-dark">text-dark</div>
                        
                    
                        
                        <div class="ds-font-white">text-white</div>
On this page