Colors

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

Theme color

Purpose

edX value

Primary

The primary color used for interactive elements like buttons or focus states on inputs.

Elm #00262B

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 #00262B (in edX’s case the dark background is the same as the primary color)

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

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=13%3A219

 

 

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

For Background Color

Legible Text Color

White
Light 200

  • Black

  • Gray-700

  • Dark-500

  • Dark-300

  • Gray-700

  • Brand-700

  • Brand-500

  • Info-500

Light 500

  • Black

  • Gray-700

  • Dark-500

  • Dark-300

  • Gray-700

  • Brand-700

  • Brand-500*
    (3:1) for large size only

Dark 500
Dark 400

  • White

  • Light 300

  • Light 500

  • Accent A

  • Accent B

  • Brand 500*
    (3:1) for large size only

Dark 300

  • White

  • Light 300

  • Light 500

  • Accent A

  • Accent B

 

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).