diff --git a/source/_patterns/01-global/01-colors-bars/_color-bar.twig b/source/_patterns/01-global/01-colors-bars/_color-bar.twig
new file mode 100644
index 0000000000000000000000000000000000000000..4c5eca49f0c29f2ac15fd7b0358998e8bbc17837
--- /dev/null
+++ b/source/_patterns/01-global/01-colors-bars/_color-bar.twig
@@ -0,0 +1,10 @@
+{% set lvls = 4 %}
+<div id="color-bar" class="uw_site--colors">
+  <div class="uw-section--innner">
+    <div class="uw-site--cbar">
+      {% for lvl in range(1,lvls) %}
+        <div class="uw-colors--lvl{{ lvl }}--background uw-cbar"></div>
+      {% endfor %}
+    </div>
+  </div>
+</div>
diff --git a/source/_patterns/03-layouts/header/header.twig b/source/_patterns/03-layouts/header/header.twig
index f874a8d8f8ae494557dceec68d7d5c442ada98b4..2d862a1d68f31b4216c5be5c08e96f8a94bf1284 100644
--- a/source/_patterns/03-layouts/header/header.twig
+++ b/source/_patterns/03-layouts/header/header.twig
@@ -1,4 +1,8 @@
-<header class="uw-header" role="banner">
+{% set additional_attributes = {
+    'class': classes,
+} %}
+
+<header {{ add_attributes(additional_attributes) }} role="banner">
     <div class="uw-header__wrapper">
         {% include "@components/site-logo/site-logo.twig"%}
         {% block content %}
@@ -7,4 +11,5 @@
             } %}
         {% endblock %}
     </div>
+    {% include "@global/01-colors-bars/_color-bar.twig" %}
 </header>
diff --git a/source/_patterns/03-layouts/header/header.yml b/source/_patterns/03-layouts/header/header.yml
index 344a21ed15b17b7795d796a755d96c7bb391e856..ba64de899a6b6e79da034a102207f4cd0dca3df9 100644
--- a/source/_patterns/03-layouts/header/header.yml
+++ b/source/_patterns/03-layouts/header/header.yml
@@ -35,4 +35,7 @@ items:
       options:
         attributes:
           class: ''
-    in_active_trail: false
\ No newline at end of file
+    in_active_trail: false
+classes:
+  - 'uw-header'
+  - 'default'
\ No newline at end of file