Colors
- Adam Butterworth (Deactivated)
- Juliana Kang
Paragon is a descendant of Bootstrap 4 and its color system is heavily influenced by Bootstrap, but has been augmented in some significant ways. The description below aims to describe the color system irrespective of origin (Bootstrap or edX). If you would like to know more reach out to the Paragon Working Group.
Theme colors
Theme colors are the core set of colors that are used throughout Paragon and available in a consuming application. They are generally named for their purpose, not for their color (semantic naming).
Theme color | Purpose | edX value |
|---|---|---|
Primary | The primary color used for interactive elements like buttons or focus states on inputs. | Elm |
Brand | A brand color used for interactive elements or branded links. In some themes this color may be identical to the primary color. | Garnet #d23228 |
Gray | Grays used primarily for text. (This name breaks the semantic naming rule, since it could be used for any number of things) | #707070 or #454545 |
Light | A color for backgrounds that are not white. | Limestone #e1dddb |
Dark | A color for backgrounds that need to be inverted from the rest of the page | Elm # |
Accent A | An accent for decorations | Isotope Blue #03c7e8 |
Accent B | Another accent for decorations | Oxide Yellow #f0cc00 |
Info | Used for informational elements or links | #00688D |
Success | Used to indicate successful interactions | #0D7D4D |
Danger | Used to highlight errors | #AB0D02 |
Warning | Used to highlight warnings | #D6B600 |
Color levels
For each theme color there are a set of tint levels. The default level is 500 and the scale ranges from 100 to 900. Theme colors don’t specify a color for every level, since they are so infrequently used. The implementation in Paragon today will generate colors for these unspecified color levels, but they should generally be avoided. For detail on how to use these colors in code see the Paragon color documentation.
If you cannot view the Figma embeds below, you can see the Figma file itself here: https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=0%3A1
Legible text
In order for text to be considered legible from an accessibility perspective a 4.5:1 contrast ratio between the text color and the background color is required. For large text these requirement is relaxed some; only a 3:1 contrast ratio is required. A paragon theme should ensure that the colors below meet the contrast requirements. Examples of text with color can be seen on the typography section.
For Background Color | Legible Text Color |
|---|---|
White |
|
Light 500 |
|
Dark 500 |
|
Dark 300 |
|
On light
On Dark
Dos and Don’ts
Color combinations to avoid with edX’s brand theme colors applied.
Do not use white text on Accent A (Isotope Blue) You may use black text on Accent A (Isotope Blue).
| 
|
|
|