Color
Vocabulary
Color
Syntax
The brand green is reserved for primary actions and is the go-to accent color. The grey colors are primarily handy for background colors in call outs or other content sections. You can vary the contrast to communicate the importance of that section, in relation to the other sections. Topic colors are used when referencing specific topics or courses.
Semantics
Use color intentionally. If referring to course content, use topic colors wherever it's appropriate. Users often assiciate topics with their associated topic color, so this improves readability and scanability. If only one accent color is needed, choose the brand green.
Brand Colors
There are only 2 main brand colors for Treehouse. Use the color class for
any of these classes, just replace [color] with the name of the color you
want.
| Class | Property |
|---|---|
.brand-bg-[color] |
background-color |
.brand-color-[color] |
color |
- green #5fcf80
- gray #3e474f
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 |
- gray-darker #2d3339 gray-dark #3f4850 gray #c6ccd2 gray-light #edeff0 gray-lighter #f9fafa
Text Colors
To 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 |
- dark #40484a medium #4b5658 base #576366 light #7b8b8e white #fff
Do - Use white text for primary buttons
Don't - Use other text colors for primary buttons
Topic Colors
These are 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. NOTE TO SELF: Add these to the
email CSS.
| Class | Property |
|---|---|
.topic-bg-[color]-[value] |
background-color |
.topic-color-[color]-[value] |
color |
.topic-border-[color]-[value] |
border-color |
- html-light #62bedb html-base #39ADD1 html-dark #298fae
- css-light #4494ca css-base #3079AB css-dark #255d83
- js-light #d07e94 js-base #c25975 js-dark #aa3e5b
- ruby-light #e97d82 ruby-base #e15258 ruby-dark #d9272e
- business-light #fba98c business-base #F9845B business-dark #f75f2a
- wordpress-light #a6add7 wordpress-base #838CC7 wordpress-dark #606bb7
- php-light #9885b2 php-base #7D669E php-dark #645180
- ios-light #78c9c4 ios-base #53BBB4 ios-dark #3e9d97
- android-light #80c783 android-base #5cb860 android-dark #449d48
- design-light #efaf3c design-base #e59a13 design-dark #b67a0f
- devtools-light #7f94a8 devtools-base #637a91 devtools-dark #4e6173
- java-light #38bd95 java-base #2c9676 java-dark #206f57
- python-light #f6bfd0 python-base #f092b0 python-dark #ea6590
- diglit-light #d6b1e2 diglit-base #c38cd4 diglit-dark #b067c6
- gamedev-light #29b2b6 gamedev-base #20898c gamedev-dark #176062
- csharp-light #b6689c csharp-base #9e4d83 csharp-dark #7c3c67
- databases-light #ef9557 databases-base #eb7728 databases-dark #cd5e13
- virtual-reality-light #b5e296 virtual-reality-base #95D26C virtual-reality-dark #6c9e4a
- apis-light #c36479 apis-base #993c50 apis-dark #712e3d
- data-analysis-light #8d81ab data-analysis-base #645a7e data-analysis-dark #4f4667
- security-light #D1897D security-base #C66C5D security-dark #955146
- undefined-light #8c959d undefined-base #717b85 undefined-dark #5a6269