Skip Navigation
React Magma

Design Guidelines

Color

Color helps express hierarchy, establish brand presence, give meaning, and indicate element states.

Introduction

Application of the color palette brings a unified and recognizable consistency to Cengage’s array of digital products and interfaces. We are committed to complying with the Web Content Accessibility Guidelines AA standard contrast ratios.

All text should be legible and meet accessibility standards. The WCAG 2.1 guidelines require a 4.5:1 color contrast between text and background for normal text, and 3:1 for large text. At Cengage we strive to always hit 4.5:1 to avoid any possible issues or questions about whether a piece of text is accessible. Additionally, any non-text visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors.

Primary

The primary colors are based on our main brand color. These colors are used in logical ways throughout product and marketing to guide the eye and highlight the important elements.

We use primary-500 to indicate primary actions, buttons, text links, etc.

A

FAIL

A

PASS

Name

primary-700

Space Cadet

Hex

#1A1E51

RGB

26,30,81

A

FAIL

A

PASS

Name

primary-600

Resolution Blue

Hex

#292F7C

RGB

41,47,124

A

FAIL

A

PASS

Name

primary-500

Free Speech Blue

Hex

#3942B0

RGB

57,66,176

A

FAIL

A

PASS

Name

primary-400

Slate Blue

Hex

#5D65CB

RGB

93,101,203

A

FAIL

A

FAIL

Name

primary-300

Blue Bell

Hex

#8B91DA

RGB

139,145,218

A

PASS

A

FAIL

Name

primary-200

Lavender Blue

Hex

#BABDE9

RGB

186,189,233

A

PASS

A

FAIL

Name

primary-100

Quartz

Hex

#E8E9F8

RGB

232,233,248

Secondary

The secondary colors are based off secondary-500 from the Cengage Higher Ed branding guidelines. It is commonly used for important calls to action on pages where purchases are made.

A

PASS

A

FAIL

Name

secondary-700

Golden Poppy

Hex

#ECC901

RGB

236,201,1

A

PASS

A

FAIL

Name

secondary-600

Sizzling Sunrise

Hex

#FEDA0D

RGB

254,218,13

A

PASS

A

FAIL

Name

secondary-500

Paris Daisy

Hex

#FEE449

RGB

254,228,73

Tertiary

The tertiary colors are based off tertiary-500 from the Cengage Higher Ed branding guidelines. It is commonly used in place of the primary colors on dark backgrounds.

A

FAIL

A

FAIL

Name

tertiary-700

Maya Blue

Hex

#79A5FF

RGB

121,165,255

A

PASS

A

FAIL

Name

tertiary-600

Columbia Blue

Hex

#A2C1FF

RGB

162,193,255

A

PASS

A

FAIL

Name

tertiary-500

Periwinkle Crayola

Hex

#CDDEFF

RGB

205,222,255

Neutrals

The neutrals come in varying levels of saturation to create the right level of contrast. Dark neutrals are the primary colors we use for typography. We commonly use light neutrals for type set on a dark background, or for subtle backgrounds that don’t take away from the cleanliness of a page.

A

FAIL

A

PASS

Name

neutral-900

Black

Hex

#000000

RGB

0,0,0

A

FAIL

A

PASS

Name

neutral-800

Jet

Hex

#2D2D2D

RGB

45,45,45

A

FAIL

A

PASS

Name

neutral-700

Onyx

Hex

#454545

RGB

69,69,69

A

FAIL

A

PASS

Name

neutral-600

Mortar

Hex

#5A5A5A

RGB

90,90,90

A

FAIL

A

PASS

Name

neutral-500

Sonic Silver

Hex

#707070

RGB

112,112,112

A

FAIL

A

FAIL

Name

neutral-400

Suva Gray

Hex

#8D8D8D

RGB

141,141,141

A

PASS

A

FAIL

Name

neutral-300

Light Gray

Hex

#D4D4D4

RGB

212,212,212

A

PASS

A

FAIL

Name

neutral-200

White Smoke

Hex

#F5F5F5

RGB

245,245,245

A

PASS

A

FAIL

Name

neutral-100

White

Hex

#FFFFFF

RGB

255,255,255

Info

The info colors are used to provide users with neutral, informational feedback. They are primarily used within alerts, and to indicate when an interactive element is in the focused state.

A

FAIL

A

PASS

Name

info-700

Blue Lagoon

Hex

#004A75

RGB

26,30,81

A

FAIL

A

PASS

Name

info-600

Sapphire Blue

Hex

#005F96

RGB

41,47,124

A

FAIL

A

PASS

Name

info-500

French Blue

Hex

#0074B7

RGB

57,66,176

A

FAIL

A

FAIL

Name

info-400

Deep Sky Blue

Hex

#009AF3

RGB

93,101,203

A

FAIL

A

FAIL

Name

info-300

Blue Jeans

Hex

#2FB3FF

RGB

139,145,218

A

PASS

A

FAIL

Name

info-200

Uranian Blue

Hex

#A6DEFF

RGB

186,189,233

A

PASS

A

FAIL

Name

info-100

Alice Blue

Hex

#E8F5FC

RGB

232,233,248

Danger

The danger colors are mainly used for backgrounds in messages and in error states to draw attention to important information or actions that are destructive or block workflow. You'll find red used in components such as alerts, buttons, and typography.

A

FAIL

A

PASS

Name

danger-700

Falu Red

Hex

#7F1714

RGB

127,23,20

A

FAIL

A

PASS

Name

danger-600

Carnelian

Hex

#A91F1A

RGB

169,31,26

A

FAIL

A

PASS

Name

danger-500

Maximum Red

Hex

#D32821

RGB

211,40,33

A

FAIL

A

FAIL

Name

danger-400

Cinnabar

Hex

#E24943

RGB

226,73,67

A

FAIL

A

FAIL

Name

danger-300

Light Coral

Hex

#E8716D

RGB

232,113,109

A

PASS

A

FAIL

Name

danger-200

Sundown

Hex

#FAAEB0

RGB

250,174,176

A

PASS

A

FAIL

Name

danger-100

Rose White

Hex

#FDEFEE

RGB

253,239,238

Warning

The warning colors are used to indicate a warning or that progress is impeded. It is primarily used within the alert components.

A

FAIL

A

PASS

Name

warning-700

Sepia

Hex

#6E340E

RGB

110,52,14

A

FAIL

A

PASS

Name

warning-600

Saddle Brown

Hex

#8D4311

RGB

141,67,17

A

FAIL

A

PASS

Name

warning-500

Windsor Tan

Hex

#AD5115

RGB

173,81,21

A

FAIL

A

FAIL

Name

warning-400

Spanish Orange

Hex

#E06A1C

RGB

224,106,28

A

FAIL

A

FAIL

Name

warning-300

Persian Orange

Hex

#E98B4C

RGB

233,139,76

A

PASS

A

FAIL

Name

warning-200

Apricot

Hex

#F6CDB2

RGB

246,205,178

A

PASS

A

FAIL

Name

warning-100

Linen

Hex

#FCEEE5

RGB

252,238,229

Success

We use green to celebrate success. The success colors are commonly used in the alerts and through typography.

A

FAIL

A

PASS

Name

success-700

Crusoe

Hex

#0F5323

RGB

15,83,35

A

FAIL

A

PASS

Name

success-600

Dartmouth Green

Hex

#136A2D

RGB

19,106,45

A

FAIL

A

PASS

Name

success-500

Dark Spring Green

Hex

#178037

RGB

23,128,55

A

FAIL

A

FAIL

Name

success-400

Lime Green

Hex

#21B94E

RGB

33,185,78

A

PASS

A

FAIL

Name

success-300

Emerald

Hex

#3EDD6E

RGB

62,221,110

A

PASS

A

FAIL

Name

success-200

Celadon

Hex

#ACF0C1

RGB

172,240,193

A

PASS

A

FAIL

Name

success-100

Honeydew

Hex

#E3FAEA

RGB

227,250,234

Deploys by Netlify