Colors

On this page you'll find all generic colors. Our color names are based on Boostrap variables. Each color has a name, such as $primary and could have a different implementation per brand. For example; the $primary color is red for the Vodafone brand and orange for the Ziggo brand. When you develop generic component it's important that the component works with each brand. Instead of using hardcoded color-values in css you should use variables.

When a variable with the correct color is not present on this page it's probably not a generic color. All non-generic (specific) colors should be defined in the specific clientlibs - for example to override generic styling or to style a brand specific component.

Adding new colors or changing the existing colors should be discussed with the design CoP.

Primary

$primary
$secondary

Background

$light
$dark

States

$success
$danger
$warning
$info

Grayscale

$gray-100
$gray-200
$gray-300
$gray-400
$gray-500
$gray-600
$gray-700
$gray-800
$gray-900