Color

Brand color: the brand color palette is usually managed separately from the design system colors. Not all brand colors are necessarily used in the Design System, and not all colors in the Design System are brand colors.

Feedback color:

• Danger color: should receive a high level attention. The universal "traffic light" danger color is red. This is a separate concept from the error color, although the colors may be configured to be the same.
• Warning color: should be a color that receives less attention that the danger color. The universal "traffic light" warning color is amber.
• Safe color: The universal "traffic light" warning color is green. Internationally there are differences in the shade of green. For example: in Japan this color is not called "green", but it is called blue and is a blue-ish green color.
• Neutral feedback color
• Neutral color: you might need a neutral color, but in case you do need a color to express "neutral", make sure not to use any of the "traffic light colors": red, amber, green.

Status color:

• Success color
• Error color

Action color:

• primary action
• alternative / secondary action
• destructive action: removal or otherwise making content unavailable
• publication action: making private content or drafted content public

Validation color:

• Invalid input color: invalid input is usually styled using the error color.
• Valid input color: while you may not always want to express a valid input, it might be useful in some cases. For example when choosing a password that needs to meet to certain safety requirements.

Number colors:

• positive
• negative

Text colors:

• default
• heading
• caption
• table header
• non-essential info:
  • copyright

Line color:

• hairline
• separator
• grid lines

Dataviz color / dataviz color scale:

• tag / category
• maps
• chart and graph

• Numbered dataviz color

• Named dataviz color: colors have meaning in a domain. For example: Democratic and Republican might be represented by "blue" and "red". It doesn't necessarily need to be a specific color of red, but it does need to be a red that matches the design system color palette. That's why "dataviz-red" and "dataviz-blue" might need to be made available as design tokens.

Accessibility

• Hidde de Vries: Content and colour at #idea11y in Rotterdam
• Lea Verou: Contrast ratio

UX Design

• Apple - Human Interface Guidelines: macOS - Color
• Nathan Curtis: Color in Design Systems

Example Color Systems

• Gemeente Amsterdam - Design System - Color
• KOOP - Kleuren
• DSO Toolkit - Kleuren
• Bootstrap - Utilities - Colors
• Atlassian - Foundations - Color
• Rijkswaterstaat - Design - Kleuren
• Rijkshuisstijl - Basiselementen - Online kleuren
• Rijkshuisstijl - Basiselementen - Print kleuren
• Discovery Education / Comet - Visual Language - Color

Example