Color
Color helps communicate meaning and is important to our brand
Demo & API
Red
| Color | Custom Property | Value (for reference only) |
|---|---|---|
Orange
| Color | Custom Property | Value (for reference only) |
|---|---|---|
Yellow
| Color | Custom Property | Value (for reference only) |
|---|---|---|
Green
| Color | Custom Property | Value (for reference only) |
|---|---|---|
Blue
| Color | Custom Property | Value (for reference only) |
|---|---|---|
Purple
| Color | Custom Property | Value (for reference only) |
|---|---|---|
Gray
| Color | Custom Property | Value (for reference only) |
|---|---|---|
White
| Color | Custom Property | Value (for reference only) |
|---|---|---|
| --color-white | #ffffff |
Color Aliases
| Color | Custom Property | Alias to |
|---|---|---|
| --color-orange-medium | ||
| --color-blue-medium | ||
| --color-blue-dark | ||
| --color-green-medium | ||
| --color-yellow-medium | ||
| --color-red-medium | ||
| --color-gray-medium | ||
| --color-blue-dark | ||
| --color-blue-medium | ||
| --color-blue-light |
Gradients
| Gradient Name | Custom Property |
|---|---|
| --gradient-blue-dark | |
| --gradient-blue-medium | |
| --gradient-gold-medium | |
| --gradient-gold-light | |
| --gradient-purple-dark | |
| --gradient-purple-light | |
| --gradient-teal-darkest | |
| --gradient-teal-dark | |
| --gradient-teal-medium | |
| --gradient-teal-light | |
| --gradient-teal-lightest |
Guidelines
Use Custom Properties
To ensure consistent branding and meaning, you must use the Custom Properties and not hard-coded values. If colors change, they need to change globally and this will not happen if you have hard-coded color values.
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com