diff --git a/source/_patterns/00-config/_breakpoints.scss b/source/_patterns/00-config/_breakpoints.scss
new file mode 100644
index 0000000000000000000000000000000000000000..76c5bb7d69902d2e8aa3bb78b7b0170edd1c1dc2
--- /dev/null
+++ b/source/_patterns/00-config/_breakpoints.scss
@@ -0,0 +1,67 @@
+/**
+ * Breakpoint Configuration
+ * @see https://github.com/Team-Sass/breakpoint/wiki
+ *
+ */
+
+/////////
+// Singularity variables
+//
+@include breakpoint-set('to ems', true);
+
+// Breakpoints variables
+$main-menu-medium: 43em;
+$xs: 15em;
+$small: 25em;
+$medium: 30em;
+$large: 49.81em;
+$xl: 63.19em;
+$max-width: $xl;
+
+/// Mixin - xs Breakpoint
+/// Allows easier @include xs {} syntax
+@mixin xs {
+  @include breakpoint($xs) {
+    @content;
+  }
+}
+
+/// Mixin - small Breakpoint
+/// Allows easier @include small {} syntax
+@mixin small {
+  @include breakpoint($small) {
+    @content;
+  }
+}
+
+/// Mixin - medium Breakpoint
+/// Allows easier @include medium {} syntax
+@mixin medium {
+  @include breakpoint($medium) {
+    @content;
+  }
+}
+
+/// Mixin - large Breakpoint
+/// Allows easier @include large {} syntax
+@mixin large {
+  @include breakpoint($large) {
+    @content;
+  }
+}
+
+/// Mixin - xl Breakpoint
+/// Allows easier @include xl {} syntax
+@mixin xl {
+  @include breakpoint($xl) {
+    @content;
+  }
+}
+
+/// Mixin - max-width Breakpoint
+/// Allows easier @include max-width {} syntax
+@mixin max-width {
+  @include breakpoint($max-width) {
+    @content;
+  }
+}
diff --git a/source/_patterns/03-layouts/footer/_footer.scss b/source/_patterns/03-layouts/footer/_footer.scss
index 0d64cd006812ccff6c958f0f3d9bef7fa1685ffc..a21e21480961c47a721963adb5e99f1e6c0c16d1 100644
--- a/source/_patterns/03-layouts/footer/_footer.scss
+++ b/source/_patterns/03-layouts/footer/_footer.scss
@@ -1,4 +1,32 @@
 // @file
 // Styles for Footer Layout.
 
-// .l-footer {}
+.uw-footer {
+  background-color: #000;
+  margin-top: 0;
+  padding: 0;
+  width: 100%;
+
+  &__wrapper {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: auto auto auto;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 63rem;
+    padding: 1rem;
+
+    @include large {
+      grid-template-columns: 25% auto 30%;
+      grid-template-rows: auto;
+    }
+
+    .uw-footer-address {
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+      margin-left: auto;
+      margin-right: auto;
+      padding-bottom: 1rem;
+    }
+  }
+}
diff --git a/source/_patterns/03-layouts/footer/footer.twig b/source/_patterns/03-layouts/footer/footer.twig
index 46755d029dcf4b26995b85d15b0a4bbd2adb7269..f848ba82d13bc6e538dd0c0a98314604fd26edf5 100644
--- a/source/_patterns/03-layouts/footer/footer.twig
+++ b/source/_patterns/03-layouts/footer/footer.twig
@@ -1,11 +1,10 @@
-<footer class="l-footer" role="contentinfo">
-  {% if has_constrain %}
-    <div class="l-constrain {{ constrain_modifier_classes }}">
-  {% endif %}
-  {% block content %}
-    Footer Content
-  {% endblock %}
-  {% if has_constrain %}
+<footer class="uw-footer" role="contentinfo">
+    <div class="uw-footer__wrapper">
+        <div class="uw-footer__address">
+            {% include "@components/contact-info/contact-info.twig" %}
+        </div>
+        {% block content %}
+            I AM THE FOOTER
+        {% endblock %}
     </div>
-  {% endif %}
 </footer>
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/site-container/_site-container.scss b/source/_patterns/03-layouts/site-container/_site-container.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1c8dc25ed82120a765d4fe8f2f30c9138ad38843
--- /dev/null
+++ b/source/_patterns/03-layouts/site-container/_site-container.scss
@@ -0,0 +1,10 @@
+.uw-site-container {
+  display: grid;
+  grid-template-columns: 100%;
+
+  .uw-header {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+  }
+
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/contact-info/_contact-info.scss b/source/_patterns/04-components/contact-info/_contact-info.scss
new file mode 100644
index 0000000000000000000000000000000000000000..726729bbea8e4bcfe7ff1e5fa27842c32600369f
--- /dev/null
+++ b/source/_patterns/04-components/contact-info/_contact-info.scss
@@ -0,0 +1,15 @@
+.uw-footer-address {
+  background-color: #000;
+  color: #fff;
+
+  .uw-footer-phone {
+    a {
+      color: #fdd54f;
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+}
diff --git a/source/_patterns/04-components/contact-info/contact-info.twig b/source/_patterns/04-components/contact-info/contact-info.twig
new file mode 100644
index 0000000000000000000000000000000000000000..dcee5406c23a1feecac3b7ced5318beb35153216
--- /dev/null
+++ b/source/_patterns/04-components/contact-info/contact-info.twig
@@ -0,0 +1,24 @@
+<div class="uw-footer-address" about="//uwaterloo.ca/" typeof="v:VCard">
+  <div class="hidden">
+    <div property="v:fn">University of Waterloo</div>
+    <div rel="v:org">
+      <div property="v:organisation-name">University of Waterloo</div>
+    </div>
+    <div rel="v:geo">
+      <div property="v:latitude">43.471468</div>
+      <div property="v:longitude">-80.544205</div>
+    </div>
+  </div>
+  <div rel="v:adr">
+    <div property="v:street-address">200 University Avenue West</div>
+    <div>
+      <span property="v:locality">Waterloo</span>,
+      <span property="v:region">ON</span>,
+      <span property="v:country-name">Canada</span>&nbsp;
+      <span property="v:postal-code">N2L 3G1</span>
+    </div>
+  </div>
+  <div class="uw-footer-phone" rel="v:tel">
+    <a href="tel:+1-519-888-4567" property="rdf:value">+1 519 888 4567</a>
+  </div>
+</div>
\ No newline at end of file