Show Sections Hide Sections
Colors
Using the Colors
Background Colors
To give something a background color use the bg-{color_name} class where the "{color-name}" is one of the colors below.
<p class='bg-brown'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, provident.</p>
Text Colors
To give something a text color use the text-{color_name} class where the "{color-name}" is one of the colors below.
<p class='text-brown'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, provident.</p>
Colors by Name
brown
- Hex:
#b15e28 - RGBA:
rgba(177, 94, 40, 1) - Less:
@color-brown
blue
- Hex:
#1392b0 - RGBA:
rgba(19, 146, 176, 1) - Less:
@color-blue
green
- Hex:
#93964b - RGBA:
rgba(147, 150, 75, 1) - Less:
@color-green
Colors by Usage
primary
- Hex:
#b15e28 - RGBA:
rgba(177, 94, 40, 1) - Less:
@primary__color
secondary
- Hex:
#1392b0 - RGBA:
rgba(19, 146, 176, 1) - Less:
@secondary__color
success
- Hex:
#93964b - RGBA:
rgba(147, 150, 75, 1) - Less:
@success__color
warning
- Hex:
#ff5501 - RGBA:
rgba(255, 85, 1, 1) - Less:
@warning__color
error
- Hex:
#d12c01 - RGBA:
rgba(208, 44, 1, 1) - Less:
@error__color
Neutrals
black
- Hex:
#000000 - RGBA:
rgba(0, 0, 0, 1) - Less:
@color-black
white
- Hex:
#ffffff - RGBA:
rgba(255, 255, 255, 1) - Less:
@color-white
dark
- Hex:
#444444 - RGBA:
rgba(51, 51, 51, 0.93) - Less:
@color-dark
light
- Hex:
#ededed - RGBA:
rgba(255, 255, 255, 0.93) - Less:
@color-light
neutral1
- Hex:
#f2f2f2 - RGBA:
rgba(0, 0, 0, 0.05) - Less:
@color-neutral1
neutral2
- Hex:
#e5e5e5 - RGBA:
rgba(0, 0, 0, 0.1) - Less:
@color-neutral2
neutral3
- Hex:
#cccccc - RGBA:
rgba(0, 0, 0, 0.2) - Less:
@color-neutral3
neutral4
- Hex:
#b2b2b2 - RGBA:
rgba(0, 0, 0, 0.3) - Less:
@color-neutral4
neutral5
- Hex:
#999999 - RGBA:
rgba(0, 0, 0, 0.4) - Less:
@color-neutral5
neutral6
- Hex:
#7f7f7f - RGBA:
rgba(0, 0, 0, 0.5) - Less:
@color-neutral6
neutral7
- Hex:
#666666 - RGBA:
rgba(0, 0, 0, 0.6) - Less:
@color-neutral7
neutral8
- Hex:
#4c4c4c - RGBA:
rgba(0, 0, 0, 0.7) - Less:
@color-neutral8
neutral9
- Hex:
#333333 - RGBA:
rgba(0, 0, 0, 0.8) - Less:
@color-neutral9
neutral10
- Hex:
#191919 - RGBA:
rgba(0, 0, 0, 0.9) - Less:
@color-neutral10