Default
The base theme colors override the default Bootstrap values with on-brand values and can be overriden themselves in a child theme.
| Swatch | Name | Hex |
|---|---|---|
| $gray-darkest | #151515 | |
| $gray-darker | #333333 | |
| $gray-dark | #444444 | |
| $gray | #707070 | |
| $gray-light | #cccccc | |
| $gray-lighter | #e8e8e8 | |
| $gray-lightest | #f5f5f5 | |
| $brand-primary | #0078aa | |
| $brand-success | #76bd23 | |
| $brand-info | #00cbed | |
| $brand-warning | #ffb700 | |
| $brand-danger | #c93325 |
myLT
Even though some variables seem to duplicate colors from the Base Theme they are kept separate so that either can be modified without impacting the other. The myLT Theme contains a larger spectrum of neutral values to handle more subtleties in the UI. Although Sass color functions could be used to create these values, the end result is always output as hexadecimal in the CSS so for brevity and consistency they are used as values.
| Swatch | Name | Hex |
|---|---|---|
| $black | #000000 | |
| $gray-1 | #151515 | |
| $gray-2 | #222222 | |
| $gray-3 | #333333 | |
| $gray-4 | #444444 | |
| $gray-5 | #707070 | |
| $gray-6 | #888888 | |
| $gray-7 | #999999 | |
| $gray-8 | #aaaaaa | |
| $gray-9 | #cccccc | |
| $gray-10 | #dddddd | |
| $gray-11 | #e8e8e8 | |
| $gray-12 | #f5f5f5 | |
| $white | #ffffff | |
| $white | #ffffff | |
| $aqua-darker | #004d77 | |
| $aqua-dark | #00698d | |
| $aqua | #0078aa | |
| $aqua-light | #009fcb | |
| $aqua-lighter | #00cbed | |
| $aqua-lightest | #5ee8ff | |
| $green | #437b00 | |
| $brand-accent | #fcb52d |
myLT Pastels
Pastels are used for subtle differentiation between elements and typically have consistant association.
| Swatch | Name | Hex |
|---|---|---|
| $pastel-blue-1 | #60b6ce | |
| $pastel-blue-2 | #e9f6ff | |
| $pastel-yellow-1 | #f1ea8f | |
| $pastel-yellow-2 | #faf9ed | |
| $pastel-orange-1 | #f1bf8f | |
| $pastel-orange-2 | #faf2ed | |
| $pastel-purple-1 | #c29cd4 | |
| $pastel-purple-2 | #f1edfa | |
| $pastel-green-1 | #9eecb7 | |
| $pastel-green-2 | #edfaf3 | |
| $pastel-aqua-1 | #98e0e1 | |
| $pastel-aqua-2 | #e4fdff |
Accessibility
The following guidelines aim to satisfy the Website Content Accessibility Guidelines (WCAG) AA Compliance for contrast.
$gray-5is the lightest text should be on white$gray-6is the darkest text should be on$gray-2$gray-8is the darkest gray that should be used on$gray-3$gray-9is the darkest text should be on$gray-4$aquashould be the lightest blue for a text link on white
- Last updated March 20, 2018
- Authorable - Yes
- Core - Colors