Design Guidelines

Color

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

Color Palette

* Contrast ratio on each color is based on a white background.

Primary

The primary color is the main brand color. A brand color can be used in key moments, in ways that associate that color with specific actions and information.

primary#006298rgb(0,98,152)6.56:1

Focus

The focus color is used to visually highlight elements that are in focus on the UI. This color compliments the palette, while standing out against light colors to make the focus states visually distinct. This color will meet the 3:1 contrast ratio required as long as you use neutral07 or neutral08 as your background. If you are using dark backgrounds, then the focus color should use the focusInverse color instead, which is a semi-transparent white.

focus#027EE1rgb(2, 126, 225)contrast ratio: 4.13:1

focusInversergba(255, 255, 255, 0.7)contrast ratio: 1.0:1

Foundation

Our blues are just like us: confident, cool and collected. They also, just like us, play nicely with others. Go ahead and use multiple shades of blue in webpages to show off the dynamic palette.

foundation#00263Ergb(0,38,62)contrast ratio: 15.59:1

foundation02#003865rgb(0,56,101)contrast ratio: 11.97:1

foundation03#00A9E0rgb(0,169,224)contrast ratio: 2.70:1

foundation04#71C5E8rgb(113,197,232)contrast ratio: 1.93:1

Feedback

Feedback colors should be used to reinforce positive or negative feedback to users.

success#3A8200rgb(58,130,0)contrast ratio: 4.80:1

success02#48A200rgb(72,162,0)contrast ratio: 3.25:1

danger#C61D23rgb(198,29,35)contrast ratio: 5.83:1

Pops

The goal of our pop colors is to create some buzzy vibrations with our blues. Let’s try to just use one pop (or two pops that are next to each other in the palette) at a time to keep the Cengage vibe going strong. Do not create tonal versions of these colors.

pop#E0004Drgb(224,0,77)contrast ratio: 4.91:1

pop02#FC4C02rgb(252,76,2)contrast ratio: 3.40:1

pop03#F2A900rgb(242,169,0)contrast ratio: 2.0:1

pop04#FFC72Crgb(255,199,44)contrast ratio: 1.56:1

pop05#92278Frgb(146, 39, 143)contrast ratio: 7.21:1

pop06#007A6Drgb(0,122,109)contrast ratio: 5.24:1

Neutral

Sometimes, going subtle makes a statement, too. Use our neutrals for the ultimate in legibility or to provide a rest from the buzzy bolds.

neutral#3F3F3Frgb(63,63,63)contrast ratio: 10.53:1

neutral02#575757rgb(87,87,87)contrast ratio: 7.22:1

neutral03#707070rgb(112,112,112)contrast ratio: 4.95:1

neutral04#8f8f8frgb(143,143,143)contrast ratio: 3.23:1

neutral05#BFBFBFrgb(191,191,191)contrast ratio: 1.83:1

neutral06#DFDFDFrgb(223,223,223)contrast ratio: 1.33:1

neutral07#F7F7F7rgb(247,247,247)contrast ratio: 1.07:1

neutral08#FFFFFFrgb(255,255,255)contrast ratio: 1.0:1

Inverse Colors

The inverse colors are designed to be used against dark backgrounds.

primaryInverse#70CDFFrgb(112 205 255)contrast ratio: 5.95:1 (against #3F3F3F)

successInverse#91CF60rgb(145,207,96)contrast ratio: 5.66:1 (against #3F3F3F)

dangerInverse#F59295rgb(245,146,149)contrast ratio: 4.72:1 (against #3F3F3F)

Principles

Consistent

Color should be applied throughout a UI consistently and be compatible with the brand it represents.

Hierarchical

Color indicates which elements are interactive, how they relate to other elements, and their level of prominence. Important elements should stand out the most.

Legible

Text and important elements, like icons, should meet legibility standards when appearing on colored backgrounds, across all screen and device types.

Expressive

Reinforce your brand by showing brand colors at memorable moments that reinforce your brand’s style.

Accessibility

All text should be legible and meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.1) level AA requires a 4.5:1 color contrast between text and background for normal text, and 3:1 to large text. Large text is at least 18 point or 14 point bold. 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.

The contrast ratio displayed on each color above is based on that color on a white background. If you are using a background color other than white, make sure you check the contrast ratio using a tool like the one found at webaim.org*