Brands
<div class="primary">Primary</div>
<div class="primary dark">Primary - Darker</div>
<div class="secondary">Secondary</div>
<div class="secondary dark">Secondary - Darker</div>
Status
// color
<div class="ga-success">Success</div>
<div class="ga-info">Info</div>
// color-light
<div class="ga-success">Success</div>
<div class="ga-info">Info</div>
Types
Basic
Text
Background
Light
Border
<div class="ga-primary bordered">Basic</div>
<div class="ga-primary-text">Text</div>
<div class="ga-primary-bg">Background</div>
<div class="ga-primary-light">Light</div>
<div class="ga-primary-border">Border</div>
Grayscale
White(0)
5
10
15
20
30
40
50
60
70
80
85
90
95
Black(100)
<div class="gray-bg-0"></div>
<div class="gray-bg-10"></div>
// number: 0 - 100
<div class="gray-bg-{number}"></div>
Palette Color
red
orange
yellow
lightgreen
green
lightblue
blue
deepblue
deeppurple
purple
brown
gray
red
orange
yellow
lightgreen
green
lightblue
blue
deepblue
deeppurple
purple
brown
gray
// color: red | orange | yellow | green | lightgreen | lightblue | blue | deepblue | deeppurple | purple | brown | gray
<div class="ga-{color}"></div>
<div class="ga-{color}-light"></div>