Colors
Brand Colors
Use the color class for any of these classes, just replace [color] with the name of the color you want. The last six colors are used exclusively for the Ubora brand.
| Class | Property |
|---|---|
.brand-bg-[color] |
background-color |
.brand-color-[color] |
color |
.brand-border-[color] |
border-color |
.brand-fill-[color] |
fill (Used for SVGs) |
.brand-stroke-[color] |
stroke (Used for SVGs) |
UI Colors
Treehouse utilizes colors in various parts of our app UI. Most of our app is gray, so color is rather important. Each of the UI colors has utility classes you can use to apply the color to different parts of an element. Use the color class for any of these classes, just replace [color] with the name of the color you want.
| Class | Property |
|---|---|
.bg-[color] |
background-color |
.color-[color] |
color |
.border-[color] |
border-color |
.fill-[color] |
fill (Used for SVGs) |
.stroke-[color] |
stroke (Used for SVGs) |
Pop Colors
These accent colors are used in illustrations and throughout the UI. Each of the UI colors has utility classes you can use to apply the color to different parts of an element. Use the color class for any of these classes, just replace [color] with the name of the color you want.
| Class | Property |
|---|---|
.pop-bg-[color] |
background-color |
.pop-color-[color] |
color |
.pop-border-[color] |
border-color |
.pop-fill-[color] |
fill (Used for SVGs) |
.pop-stroke-[color] |
stroke (Used for SVGs) |
Gray Colors
Use the color class for any of these classes, just replace [color] with the name of the color you want.
| Class | Property |
|---|---|
.bg-[color] |
background-color |
.color-[color] |
color |
.border-[color] |
border-color |
.fill-[color] |
fill (Used for SVGs) |
.stroke-[color] |
stroke (Used for SVGs) |
Text Colors
Use the color class for any of these classes, just replace [color] with the name of the color you want.
| Class | Property |
|---|---|
.text-bg-[color] |
background-color |
.text-color-[color] |
color |
.text-border-[color] |
border-color |
.text-fill-[color] |
fill (Used for SVGs) |
.text-stroke-[color] |
stroke (Used for SVGs) |
Category Colors
Leap contains utility classes for all variations of topic colors within Treehouse. These colors are used to denote the topic of courses and for various UI associated with a course. Use the color class for any of these classes, just replace [color] with the name of the color you want.
| Class | Property |
|---|---|
.category-bg-[color]-[value] |
background-color |
.category-color-[color]-[value] |
color |
.category-border-[color]-[value] |
border-color |
.category-fill-[color]-[value] |
fill (Used for SVGs) |
.category-stroke-[color]-[value] |
stroke (Used for SVGs) |