diff --git a/css/styles.css b/css/styles.css
index 8ef1bed8c5f9088755cdb04e053db97a0f00c73f..87ed6ef30fd64c0323541b4c23f6af25526e0aa9 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -4380,28 +4380,105 @@ picture {
   margin-right: 0.5rem; }
 
 .tag {
-  color: #112E51;
-  text-decoration: underline;
-  border: 2px solid #4773aa;
-  border-radius: 70px;
+  color: #000;
+  text-decoration: none;
+  background: none;
   display: inline-block;
-  font-size: 1rem;
+  font-size: 0.88889rem;
   margin: 0 0 0.5rem 0;
-  padding: 0.25em 1.65em;
+  padding: 0.5rem;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
-  transition: box-shadow 200ms cubic-bezier(0.4, 0, 1, 1); }
+  transition: background 200ms cubic-bezier(0.4, 0, 1, 1); }
   .tag:visited {
-    color: #112E51; }
+    color: #000; }
   .tag:hover, .tag:focus {
-    color: #112E51;
+    color: #757575;
     text-decoration: none; }
   .tag:active {
-    color: #112E51; }
-  .tag:hover, .tag:focus {
-    box-shadow: 0 0 0 2px #4773aa;
-    outline: 0; }
+    color: #757575; }
+  .tag--normal {
+    font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+    font-size: 0.88889rem; }
+  .tag--small {
+    font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+    font-size: 0.702rem; }
+  .tag--full {
+    background: #fdd54f;
+    color: #000;
+    font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+    font-size: 0.702rem; }
+    .tag--full:hover, .tag--full:focus {
+      background: #000;
+      color: #fdd54f; }
+  .tag--simple {
+    color: #000;
+    text-decoration: none;
+    font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; }
+    .tag--simple:visited {
+      color: #000; }
+    .tag--simple:hover, .tag--simple:focus {
+      color: #757575;
+      text-decoration: none; }
+    .tag--simple:active {
+      color: #757575; }
+
+.org-default a.tag--full {
+  background-color: #000;
+  color: #fdd54f; }
+  .org-default a.tag--full:hover, .org-default a.tag--full:focus {
+    background-color: #fdd54f;
+    color: #000; }
+
+.org-ahs a.tag--full {
+  background-color: #005963;
+  color: #fff; }
+  .org-ahs a.tag--full:hover, .org-ahs a.tag--full:focus {
+    background-color: #97dfef;
+    color: #005963; }
+
+.org-art a.tag--full {
+  background-color: #d93f00;
+  color: #fff; }
+  .org-art a.tag--full:hover, .org-art a.tag--full:focus {
+    background-color: #ffd5a5;
+    color: #d93f00; }
+
+.org-eng a.tag--full {
+  background-color: #57058b;
+  color: #fff; }
+  .org-eng a.tag--full:hover, .org-eng a.tag--full:focus {
+    background-color: #d0b4ef;
+    color: #57058b; }
+
+.org-env a.tag--full {
+  background-color: #607000;
+  color: #fff; }
+  .org-env a.tag--full:hover, .org-env a.tag--full:focus {
+    background-color: #daf582;
+    color: #607000; }
+
+.org-mat a.tag--full {
+  background-color: #c60078;
+  color: #fff; }
+  .org-mat a.tag--full:hover, .org-mat a.tag--full:focus {
+    background-color: #ffbeef;
+    color: #c60078; }
+
+.org-sci a.tag--full {
+  background-color: #0033be;
+  color: #fff; }
+  .org-sci a.tag--full:hover, .org-sci a.tag--full:focus {
+    background-color: #b4d5ff;
+    color: #0033be; }
+
+.org-school a.tag--full {
+  background-color: #b71233;
+  color: #fff; }
+  .org-school a.tag--full:hover, .org-school a.tag--full:focus {
+    background-color: #ffa5aa;
+    color: #b71233; }
 
 .card--teaser .card__body {
   display: flex;
diff --git a/source/_macros/gesso.macro.twig b/source/_macros/gesso.macro.twig
index d0082dc08498cf5dd012a4807b92d3c036a4676a..5a03a4091808bb1bef3f7ef0280f59c2357d9094 100644
--- a/source/_macros/gesso.macro.twig
+++ b/source/_macros/gesso.macro.twig
@@ -13,6 +13,7 @@
     'url': url,
     'title': title,
     'type': type,
-    'size': size
+    'size': size,
+    'faculty':faculty
   } %}
 {% endmacro %}
diff --git a/source/_patterns/02-base/date-formats/date-formats.yml b/source/_patterns/02-base/date-formats/date-formats.yml
index 3bd7312b2c49f5d39c549ee996c4baeaef6996b1..e73585af342da032ba571eb54339b644130b3b71 100644
--- a/source/_patterns/02-base/date-formats/date-formats.yml
+++ b/source/_patterns/02-base/date-formats/date-formats.yml
@@ -1,2 +1,2 @@
 ---
-modifier_classes: ''
\ No newline at end of file
+date_modifier_classes: ''
\ No newline at end of file
diff --git a/source/_patterns/04-components/card/card.yml b/source/_patterns/04-components/card/card.yml
index ab1f4240bf2f8e2f4077d40383880595197108e0..30372e625a6499855450679e4ccfb2f7593da06c 100644
--- a/source/_patterns/04-components/card/card.yml
+++ b/source/_patterns/04-components/card/card.yml
@@ -12,12 +12,16 @@ show_hover: true
 tags:
   - url: '#'
     title: 'Tag 1'
+    type: 'simple'
   - url: '#'
     title: 'Tag 2'
+    type: 'simple'
   - url: '#'
     title: 'Tag 3'
+    type: 'simple'
   - url: '#'
     title: 'Tag 4'
+    type: 'simple'
 media: |-
   <picture>
      <source srcset="https://picsum.photos/1600/800?image=11" media="(min-width: 1024px)" type="image/jpeg">
diff --git a/source/_patterns/04-components/tag-list/tag-list.md b/source/_patterns/04-components/tag-list/tag-list.md
index 3bc1b9fc695c4831e55e3effe4227160be1694c1..a5ea69a28057bff85df2cdd823da60e06e5811f8 100644
--- a/source/_patterns/04-components/tag-list/tag-list.md
+++ b/source/_patterns/04-components/tag-list/tag-list.md
@@ -8,3 +8,11 @@ __Variables:__
 * list: [array] List items. Each item is an object containing:
   * url: [string] URL of the item.
   * title: [string] Title of the item.
+  * faculty: [string] One of the faculty variables wrapping the tag will make background color change 
+      * org-ahs
+      * org-art
+      * org-eng
+      * org-env
+      * org-mat
+      * org-sci
+      * org-school
diff --git a/source/_patterns/04-components/tag-list/tag-list.twig b/source/_patterns/04-components/tag-list/tag-list.twig
index 773bf4682964d49bc48a95aed6b43d1ff2063480..79fc5a6c1c097ebf9e7bb63855dc2642747efe93 100644
--- a/source/_patterns/04-components/tag-list/tag-list.twig
+++ b/source/_patterns/04-components/tag-list/tag-list.twig
@@ -2,8 +2,8 @@
 
 <ul class="tag-list {{ modifier_classes }}">
   {% for item in items %}
-    <li class="tag-list__item">
-      {{ macros.tag(item.url, item.title) }}
+    <li class="tag-list__item {%  if item.faculty %}{{ item.faculty }}{%  endif %}">
+       {{ macros.tag(item.url, item.title, item.type) }}
     </li>
   {% endfor %}
 </ul>
diff --git a/source/_patterns/04-components/tag-list/tag-list.yml b/source/_patterns/04-components/tag-list/tag-list.yml
index aa6e7d04cabbdb0e6061a1043c0d054b6e94febf..7df8b3623b22361c9a34c7daa04a4f38884ece26 100644
--- a/source/_patterns/04-components/tag-list/tag-list.yml
+++ b/source/_patterns/04-components/tag-list/tag-list.yml
@@ -1,9 +1,37 @@
+modifier_classes: ' '
 items:
   - url: '#'
-    title: 'Tag 1'
+    title: 'Campus'
+    faculty: 'org-default'
+    type: 'full'
   - url: '#'
-    title: 'Tag 2'
+    title: 'UW Default'
+    type: 'full'
   - url: '#'
-    title: 'Tag 3'
+    title: 'Science'
+    faculty: 'org-sci'
+    type: 'full'
   - url: '#'
-    title: 'Tag 4'
+    title: 'Engineering'
+    faculty: 'org-eng'
+    type: 'full'
+  - url: '#'
+    title: 'Environment'
+    faculty: 'org-env'
+    type: 'full'
+  - url: '#'
+    title: 'Math'
+    faculty: 'org-mat'
+    type: 'full'
+  - url: '#'
+    title: 'Art'
+    faculty: 'org-art'
+    type: 'full'
+  - url: '#'
+    title: 'Applied Health Science (AHS)'
+    faculty: 'org-ahs'
+    type: 'full'
+  - url: '#'
+    title: 'School'
+    faculty: 'org-school'
+    type: 'full'
\ No newline at end of file
diff --git a/source/_patterns/04-components/tag/_tag.scss b/source/_patterns/04-components/tag/_tag.scss
index 38f9f5dfb903d8d05d0bc4d459c2791c557e2cbe..4196aad7dde5eb31baad5b80dcca4c174338916b 100644
--- a/source/_patterns/04-components/tag/_tag.scss
+++ b/source/_patterns/04-components/tag/_tag.scss
@@ -1,21 +1,86 @@
+// @file
+$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school';
+$tag-font-family-small: gesso-font-family(systemmedium) !default;
+$tag-font-family-normal: gesso-font-family(systembold) !default;
+$tag-font-size-normal: rem(gesso-font-size(-1)) !default;
+$tag-font-size-small: rem(gesso-font-size(-3)) !default;
+
+
 .tag {
-  @include link(
-    gesso-color(ui, generic, accent-dark)
+  @include link-no-underline(
+                  $card-link-color,
+                  $card-link-color-hover
   );
-  border: 2px solid gesso-color(ui, generic, accent-light);
-  border-radius: 70px;
+  background:none;
   display: inline-block;
-  font-size: rem(gesso-font-size(0));
+  font-size: $tag-font-size-normal;
   margin: 0 0 rem(gesso-spacing(xs)) 0;
-  padding: 0.25em 1.65em;
+  padding: rem(gesso-spacing(xs));
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
-  transition: box-shadow gesso-duration(short) gesso-easing(ease-in);
+  transition:background gesso-duration(short) gesso-easing(ease-in);
 
   &:hover,
   &:focus {
-    box-shadow: 0 0 0 2px gesso-color(ui, generic, accent-light);
-    outline: 0;
+
+  }
+  &--normal{
+    font-family: $tag-font-family-normal;
+    font-size: $tag-font-size-normal;
+  }
+  &--small{
+    font-family: $tag-font-family-small;
+    font-size: $tag-font-size-small;
+
+  }
+  &--full{
+    background: gesso-brand(org-default,uw-gold,'primary');
+    color: gesso-brand(org-default,uw-black,'primary');
+    font-family: $tag-font-family-small;
+    font-size: $tag-font-size-small;
+    &:hover,
+    &:focus {
+      background: gesso-brand(org-default,uw-black,'primary');
+      color: gesso-brand(org-default,uw-gold,'primary');
+    }
+  }
+  &--simple{
+    @include link-no-underline(
+        $card-link-color,
+        $card-link-color-hover
+    );
+    font-family: $tag-font-family-normal;
   }
-}
\ No newline at end of file
+
+
+}
+
+@each $faculty in $faculties {
+  .#{$faculty} {
+    a.tag--full{
+      @if $faculty == org-default {
+        background-color:gesso-brand(org-default,uw-black,'primary');
+        color: gesso-brand(org-default,uw-gold,'primary');
+        &:hover,
+        &:focus {
+          background-color:gesso-brand(org-default,uw-gold,'primary');
+          color: gesso-brand(org-default,uw-black,'primary');
+        }
+
+      }
+      @else {
+        background-color:gesso-brand($faculty,'primary');
+        color: gesso-brand(org-default,uw-white,'primary');
+        &:hover,
+        &:focus {
+          background-color: gesso-brand($faculty, 'lvl1');
+          color:gesso-brand($faculty,'primary');
+        }
+      }
+    }
+  }
+}
+
+
+
diff --git a/source/_patterns/04-components/tag/tag.md b/source/_patterns/04-components/tag/tag.md
index 3888b839da4c24d1b6114fa91b4bcf716a7f3249..a478abd99ea65864b2626868c7707793b7f6b177 100644
--- a/source/_patterns/04-components/tag/tag.md
+++ b/source/_patterns/04-components/tag/tag.md
@@ -4,7 +4,19 @@ title: Tag
 ---
 
 __Variables:__
-* type: [string] Type of the tag.
+* type: [string] Type of the tag
+    * full
+    * simple
 * size: [string] Size of the tag.
+    * small
+    * normal
 * url: [string] URL of the tag.
 * title: [string] Title of the tag.
+* faculty: [string] One of the faculty variables wrapping the tag will make background color change 
+    * org-ahs
+    * org-art
+    * org-eng
+    * org-env
+    * org-mat
+    * org-sci
+    * org-school
\ No newline at end of file
diff --git a/source/_patterns/04-components/tag/tag.twig b/source/_patterns/04-components/tag/tag.twig
index 9b84a0fb107c2a6c0dc9f83d0cd9387b0243d9d8..530b041e7330741f3fc14207d3ebeb620d1befdf 100644
--- a/source/_patterns/04-components/tag/tag.twig
+++ b/source/_patterns/04-components/tag/tag.twig
@@ -3,6 +3,25 @@
   type ? 'tag--' ~ type,
   size ? 'tag--' ~ size
 ] %}
-<a href="{{ url }}" class="{{ classes|join(' ') }}" rel="tag">
+{% if is_demo %}
+<h4>This is a simple tag </h4>
+{% endif %}
+
+{%  if faculty %}
+<span class="{{ faculty }}">
+{%  endif %}
+  <a href="{{ url }}" class="{{ classes|join(' ') }}" rel="tag">
+    {{ title }}
+  </a>
+{%  if faculty %}
+</span>
+{%  endif %}
+
+
+{% if is_demo %}
+<br>
+<h4>This is a full tag </h4>
+<a href="{{ url }}" class="tag tag--full tag--normal" rel="tag">
   {{ title }}
 </a>
+{% endif %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/tag/tag.yml b/source/_patterns/04-components/tag/tag.yml
index ff3a03c17db162551cd0a976dcd89b8429c4e0cf..063342a20845f750bc834e04fdaf149e32e82e6b 100644
--- a/source/_patterns/04-components/tag/tag.yml
+++ b/source/_patterns/04-components/tag/tag.yml
@@ -1,5 +1,7 @@
 ---
+is_demo: true
 url: '#'
-title: 'Title'
-type: 'full'
-size: 'normal'
\ No newline at end of file
+title: 'Community'
+type: 'simple'
+size: 'normal'
+faculty: 'org-default'
diff --git a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml
index 4bc1c69de142af1f8f13116bd96c3b7a187d8ba8..07016bcd2737e1e29a56f7f3addd05f405cfbd27 100644
--- a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml
+++ b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml
@@ -7,12 +7,16 @@ author_link: '#'
 tags:
   - url: '#'
     title: 'Tag 1'
+    type: 'simple'
   - url: '#'
     title: 'Tag 2'
+    type: 'simple'
   - url: '#'
     title: 'Tag 3'
+    type: 'simple'
   - url: '#'
     title: 'Tag 4'
+    type: 'simple'
 media: |-
   <picture>
      <source srcset="https://picsum.photos/1600/800?image=11" media="(min-width: 1024px)" type="image/jpeg">
diff --git a/source/_patterns/04-components/teaser/teaser.yml b/source/_patterns/04-components/teaser/teaser.yml
index 6352089dbca8f8b433b1d7c4b8443f4697f3b97e..0f5646447d44c0b41eb35a712788205c750881b5 100644
--- a/source/_patterns/04-components/teaser/teaser.yml
+++ b/source/_patterns/04-components/teaser/teaser.yml
@@ -7,12 +7,16 @@ date: Thursday, September 28, 2018
 tags:
   - url: '#'
     title: 'Tag 1'
+    type: 'simple'
   - url: '#'
     title: 'Tag 2'
+    type: 'simple'
   - url: '#'
     title: 'Tag 3'
+    type: 'simple'
   - url: '#'
     title: 'Tag 4'
+    type: 'simple'
 media: |-
   <picture>
      <source srcset="https://picsum.photos/1600/800?image=11" media="(min-width: 1024px)" type="image/jpeg">