1.13Colors
An entire color palette is included in Concise that you can use for various elements in your design.
You can view and modify the color palette inside of the $colors
map in /custom/_globals.scss.
Base Colors
base, primary
base, selection
base, lines
Text Colors
text, primary
text, secondary
text, heading
text, UI
Background Colors
background, dark
background, light
background, body
State Colors
state, muted
state, primary
state, success
state, warning
state, error
Blue Colors
blue, darker
blue, dark
blue, base
blue, light
blue, lighter
Green Colors
green, darker
green, dark
green, base
green, light
green, lighter
Cream Colors
cream, darker
cream, dark
cream, base
cream, light
cream, lighter
Red Colors
red, darker
red, dark
red, base
red, light
red, lighter
Gray Colors
gray, darker
gray, dark
gray, base
gray, light
gray, lighter
Helper Function
The getColor() function has been included to help easily retrieve
colors from our color palette. Please refer to the documentation
on functions to see how to use
the getColor() function.
You can view and modify the color palette inside of the $colors
map in /custom/_globals.scss.
Text Colors
Helper classes have been included so you can easily change the color of text.
Background Colors
If you want to change the background of an element, you can do so by using
one of the .bg--* classes provided by Concise. These classes can
be used on any element or with any class provided by Concise
(eg: buttons, tables, etc).