Colors

Primary colors

Always provide different shades of the primary colors. For a more high-level approach on color use, head over to IBM Design Language.

{% for name, color in COLORS.COLORS %}
• ${{ name }}
  {{ color.raw }}
{% endfor %}

Border colors

{% for name, color in COLORS.BORDER_COLORS %}
• ${{ name }}
  {{ color.raw }}
{% endfor %}

Text colors

Use different shades for text to express the hierarchy of information. Text, icons, borders and dividers will benefit when their color is defined with alpha values, as a result they will work on any background. Text colors are derived from primary black/white colors.

{% for name, color in COLORS.FONT_COLORS %}
• ${{ name }}
  {{ color.raw }}
{% endfor %}

UI-kit colors

Primary colors for interaction feedback, notifications and states: error (red), warning (orange), highlight (yellow), success (green) and information (blue). UI-kit colors should always be aligned with the tone of voice of the application/brand.

{% for name, color in COLORS.UI_COLORS %}
• ${{ name }}
  {{ color.raw }}
{% endfor %}