Rebranding ​

Attention!

We strongly recommend to consult the ZDS Design team if you require to make a rebranding so they can help you obtaining the palette. Colors need to be adjusted for accessibility and checking that there are no conflicts.

How to rebrand ​

ZDS admits adjustments to change the look and feel to another brand. This is done vía custom CSS tokens, and the best way to do it is using the semantic tokens. You only need to override the required CSS tokens in the :root, or even creating a multi-brand with <body> selectors.

An example:

css
*[data-brand="my-brand"],
*[data-brand="my-brand"] *[z-theme="light"] {
  --z-sf-brand: #ECEEEF;
  /* #ECEEEF */
  --z-sf-base: #fff;
  /* #FFF    */
  --z-sf-subtle: #fff;
  /* #F4F9FC */
  --z-sf-subtle--negative: #fff;
  /* #FAEDEC */
  --z-sf-placeholder: #fff;
  /* #FFF    */
  // ...
css
*[data-brand="my-brand"] *[z-theme="dark"] {
  --z-sf-brand: #00717C;
  /* #2167AE */
  --z-sf-base: #054044;
  /* #23366F */
  --z-sf-subtle: #fff;
  /* #2C438B */
  --z-sf-subtle--negative: #fff;
  /* #FAEDEC */
  --z-sf-placeholder: #054044;
  /* #23366F */
  // ...

This will produce:

Tag 1 Tag 2
Action card content Visit Save
Tag 1 Tag 2
Action card content Visit Save

Provided re-branding themes ​

@zurich/design-tokens is the package that offers stylesheets that contains the necessary overrides for the rebranding that are distributed from ZDS.

For applying the style, we will use the data-brand attribute in the <body> tag.

The available themes are:

NOT READY!

The rebranding stylesheets are not ready yet. We are working on them.

For using them, you need to import the stylesheet in your project and apply the right selector in the <body> tag.

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://zds.zurich.com/0.5.22/@zurich/design-tokens/MyBrand.css">
  </head>
  <body data-brand="my-brand">
    <!-- Your content here -->
  </body>
</html>

Or directly in your CSS, but still using the data-brand attribute in the <body> tag:

css
@import "@zurich/design-tokens/MyBrand.css";