Semantic colour palette

Semantic colours are unique to their designated roles. The four semantic colours in the Summit Design System are:

  • red - danger or error
  • yellow - caution
  • green - success
  • blue - information

Do

Use semantic colours for backgrounds, accents or icons only. 

Use our standard text colour for text.

Don't

Do not use decorative colours when there is a semantic colour designed for your context.

Do not use semantic colours in decorative capacity.

Danger and error

Danger and error red is for destructive interactive elements, errors, and critical messages that require users' immediate attention.

Pantone: 187C

CMYK: 0, 85, 72, 35

RGB: 166, 25, 46

Hex: #a6192e

CSS: coc-danger and coc-error

 

Text colour: #ffffff

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)

Caution

Caution yellow lets users know there is a risk factor if they continue their action without making adjustments. Users may still be able to proceed without detrimental consequences.

Pantone: 2013C

CMYK: 0, 40, 100, 0

RGB: 255, 153, 0

Hex: #ff9900

CSS: coc-caution

 

Text colour: #000000

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)

Success

Success green indicates positive state and outcome. Some examples would be a severe situation is resolved, a user action is completed or data visualization that express growth.

Pantone: 7481C

CMYK: 98, 0, 56, 30

RGB: 4, 179, 79

Hex: #04b34f

CSS: coc-success

 

Text colour: #000000

Text contrast: Pass (AAA)

Large text contrast: Pass (AAA)

Information

Information blue highlights important messages or elements that don't require immediate user actions. Examples include a notification banner that draws attention to a relevant new message on the page, progress bar or data visualization that express neutral information.

Pantone: 2935C

CMYK: 100, 53, 0, 28

RGB: 0, 87, 184

Hex: #0057b8

CSS: coc-information

 

Text colour: #ffffff

Text contrast: Pass (AA)

Large text contrast: Pass (AAA)