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


Use semantic colours for backgrounds, accents or icons only

Use our standard text colour for text.


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