Health's colour palette is applied to components of the Health Design System by default.
However Health-aligned products such as applications or portfolio agencies can override the colour palette to achieve co-branding.
To simply applying an alternative colour palette, all colours in the Health Design System are provided as SASS variables in sass/themes and are mapped to specific applications.
By using SASS variables, colours can be change in one place to be updated globally.
By mapping variable names to applications, users of the system are no stuck with a variable called $blue every though they have changed it to red!
Health's primary blue colour uses the variable $colour-primary-blue and is used in many places in the HDS. Instead of using directly against components, the following SASS variable mapping is used:
$header-border-colour: $colour-primary-blue
$footer-bg-colour: $colour-primary-blue;
$callout-primary-border-colour: $colour-primary-blue;
To predictably apply new colours, new variables can be created and assigned like this:
$my-product-red: #FF0000;
$my-product-yellow: #FFFF0;
$header-border-colour: $my-product-red;
$footer-bg-colour: $my-product-yellow;
$callout-primary-border-colour: $my-product-red;
More information coming soon about default SASS colour variables and their overrides for 'aligned' Health products