diff --git a/source/_patterns/00-global/00-config/colors-bars/_colors-bars.scss b/source/_patterns/00-global/00-config/colors-bars/_colors-bars.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dae49b2235941137bd63984a3b54853ab5e9cf22
--- /dev/null
+++ b/source/_patterns/00-global/00-config/colors-bars/_colors-bars.scss
@@ -0,0 +1,72 @@
+@import "../colors/colors.scss";
+
+// Classes attached to the body or header that color bars colors.
+$different-color-bars: (
+  default: $uw-colors-uw-golds-hex,
+  fac-ahs: $uw-colors-fac-ahs-hex,
+  fac-art: $uw-colors-fac-art-hex,
+  fac-eng: $uw-colors-fac-eng-hex,
+  fac-env: $uw-colors-fac-env-hex,
+  fac-mat: $uw-colors-fac-mat-hex,
+  fac-sci: $uw-colors-fac-sci-hex,
+  sch: $uw-colors-school-hex,
+);
+
+// All the colors are for the bars are already generated in base-colors
+// The only one that is not, is when there is no class.
+@each $ckey, $hex in $uw-colors-uw-golds-hex {
+  header.default .uw-colors--#{$ckey}--background {
+    background: $hex;
+  }
+
+  header.default .uw-colors--#{$ckey}--foreground {
+    color: $hex;
+  }
+}
+
+.uw-site--colours {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+}
+
+.uw-site--cbar {
+  display: flex;
+  flex-direction: row wrap;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+@media screen and (min-width: 1rem) {
+  .uw-cbar {
+    height: 0.625rem;
+  }
+}
+
+@media screen and (min-width: 40.0625rem) {
+  .uw-cbar {
+    height: 0.875rem;
+  }
+}
+
+@media screen and (min-width: 48.0625rem) {
+  .uw-cbar {
+    height: 1rem;
+  }
+}
+
+@media screen and (min-width: 63.1875rem) {
+  .uw-cbar {
+    height: 1.125rem;
+  }
+}
+
+.uw-cbar {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin: 0;
+  padding: 0;
+}
diff --git a/source/_patterns/00-global/00-config/colors-bars/colors-bars.twig b/source/_patterns/00-global/00-config/colors-bars/colors-bars.twig
new file mode 100644
index 0000000000000000000000000000000000000000..a4ea3f7a83e612d052df047761f00754c830455d
--- /dev/null
+++ b/source/_patterns/00-global/00-config/colors-bars/colors-bars.twig
@@ -0,0 +1,36 @@
+{%  set lvl = 0 %}
+{%  set cbar_num = 0 %}
+{% for group in items.groups %}
+  <h1> {{ group.name }}</h1>
+  {% if (group.sub_groups) %}
+    {% for sub_group in group.sub_groups %}
+      <h2>{{ sub_group.name }}</h2>
+      <div id="color-bar{{ cbar_num }}" class="uw_site--colors">
+        <div class="uw-cbar" style="background: black"></div>
+        <div class="uw-section--innner">
+          <div class="uw-site--cbar">
+            {%  set lvl = 0 %}
+            {% for hex in sub_group.colors %}
+              {% set lvl = lvl + 1 %}
+              <div class="uw-colors--lvl{{ lvl }} uw-cbar" style="background: {{ hex }}"></div>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    {%  endfor %}
+  {% else %}
+    <div id="color-bar{{ cbar_num }}" class="uw_site--colors">
+      <div class="uw-cbar" style="background: black"></div>
+      <div class="uw-section--innner">
+        <div class="uw-site--cbar">
+            {%  set lvl = 0 %}
+            {% for hex in group.colors %}
+                {% set lvl = lvl + 1 %}
+              <div class="uw-colors--lvl{{ lvl }} uw-cbar" style="background: {{ hex }}"></div>
+            {% endfor %}
+        </div>
+      </div>
+    </div>
+
+  {% endif %}
+{%  endfor %}
diff --git a/source/_patterns/00-global/00-config/colors-bars/colors-bars.yml b/source/_patterns/00-global/00-config/colors-bars/colors-bars.yml
new file mode 100644
index 0000000000000000000000000000000000000000..73cb2fd1826cabd3bbfca2a567b77073d650a79c
--- /dev/null
+++ b/source/_patterns/00-global/00-config/colors-bars/colors-bars.yml
@@ -0,0 +1,70 @@
+items:
+  groups:
+    -
+      name: "University of Waterloo"
+      abbv: uw
+      colors:
+        - '#ffffaa'
+        - '#ffea3d'
+        - '#ffd54f'
+        - '#e4b429'
+    -
+      name: "Faculties"
+      abbv: fac
+      sub_groups:
+        -
+          name: "Faculty of Arts"
+          abbv: art
+          colors:
+            - '#ffd5a5'
+            - '#fbaf00'
+            - '#e78100'
+            - '#d93f00'
+        -
+          name: "Faculty of Applied Health Sciences"
+          abbv: ahs
+          colors:
+            - '#97dfef'
+            - '#00bed0'
+            - '#0098a5'
+            - '#005963'
+        -
+          name: "Faculty of Engineering"
+          abbv: eng
+          colors:
+            - '#d0b4ef'
+            - '#be33da'
+            - '#8100b4'
+            - '#57058b'
+        -
+          name: "Faculty of Environment"
+          abbv: env
+          colors:
+            - '#daf582'
+            - '#bed500'
+            - '#b4be00'
+            - '#607000'
+        -
+          name: "Faculty of Math"
+          abbv: mat
+          colors:
+            - '#ffbeef'
+            - '#ff63aa'
+            - '#df2498'
+            - '#c60078'
+        -
+          name: "Faculty of Science"
+          abbv: sci
+          colors:
+            - '#b4d5ff'
+            - '#63a0ff'
+            - '#0073ce'
+            - '#0033be'
+    -
+      name: "Schools and Satellite Campuses"
+      abbv: sch
+      colors:
+        - '#ffA5aa'
+        - '#e41740'
+        - '#b71233'
+        - '#80001f'