source/_patterns/00-atoms/01-text/text-shadow.mustache

+<div>
+  <h1 class="head-alt-xl text-shadow-xs">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow-sm">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow-md">{{ headline.short }}</h1>
+  <h1 class="head-alt-xl text-shadow-lg">{{ headline.short }}</h1>
+</div>

source/_patterns/00-atoms/02-contact-lines/basic-contact-line.mustache

-<a href="mailto:example@example.com" class="contact-line {{ classes }}">
-  <i class="{{ icon }}"></i>{{ caption }}{{^caption}}example@example.com{{/caption}}
-</a>

source/_patterns/00-atoms/03-buttons/00-basic-button.mustache

-<button class="btn {{ classes }}">
+<button class="btn {{ classes }}" {{# disabled }}disabled{{/ disabled }}>
   <div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
 </button>

source/_patterns/00-atoms/03-buttons/01-icon-button.mustache

-<button class="btn btn--icon {{ classes }}">
+<button class="btn btn--icon {{ classes }}" {{# disabled }}disabled{{/ disabled }}>
   <div class="btn__body-wrap">
     <div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
     <div class="btn__icon {{ iconClasses }}">

source/_patterns/00-atoms/03-buttons/02-button-colors.mustache

@@ -7,10 +7,27 @@
     {{> atoms-basic-button(classes: "btn--white") }}
     {{> atoms-basic-button(classes: "btn--blue-300") }}
     {{> atoms-basic-button(classes: "btn--cyan-200") }}
-    {{> atoms-basic-button(classes: "btn--green-200") }}
+    {{> atoms-basic-button(classes: "btn--green-400") }}
+    {{> atoms-basic-button(classes: "btn--green-300") }}
     {{> atoms-basic-button(classes: "btn--orange-300") }}
     {{> atoms-basic-button(classes: "btn--violet-400") }}
     {{> atoms-basic-button(classes: "btn--violet-500") }}
+    {{> atoms-basic-button(classes: "btn--red-600") }}
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-basic-button(classes: "btn--black", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--grey-700", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--grey-500", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--grey-125", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--white", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--blue-300", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--cyan-200", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--green-400", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--green-300", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--orange-300", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--violet-400", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--violet-500", disabled: true) }}
+    {{> atoms-basic-button(classes: "btn--red-600", disabled: true) }}
   </div>
   <div class="inline-flex flex-col space-y-2">
     {{> atoms-icon-button(classes: "btn--black") }}
@@ -20,9 +37,26 @@
     {{> atoms-icon-button(classes: "btn--white") }}
     {{> atoms-icon-button(classes: "btn--blue-300") }}
     {{> atoms-icon-button(classes: "btn--cyan-200") }}
-    {{> atoms-icon-button(classes: "btn--green-200") }}
+    {{> atoms-icon-button(classes: "btn--green-400") }}
+    {{> atoms-icon-button(classes: "btn--green-300") }}
     {{> atoms-icon-button(classes: "btn--orange-300") }}
     {{> atoms-icon-button(classes: "btn--violet-400") }}
     {{> atoms-icon-button(classes: "btn--violet-500") }}
+    {{> atoms-icon-button(classes: "btn--red-600") }}
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-icon-button(classes: "btn--black", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--grey-700", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--grey-500", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--grey-125", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--white", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--blue-300", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--cyan-200", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--green-400", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--green-300", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--orange-300", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--violet-400", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--violet-500", disabled: true) }}
+    {{> atoms-icon-button(classes: "btn--red-600", disabled: true) }}
   </div>
 </div>

source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache

@@ -7,7 +7,8 @@
     {{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--blue-300 btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--cyan-200 btn--hoveractive") }}
-    {{> atoms-basic-button(classes: "btn--green-200 btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--green-400 btn--hoveractive") }}
+    {{> atoms-basic-button(classes: "btn--green-300 btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--orange-300 btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--violet-400 btn--hoveractive") }}
     {{> atoms-basic-button(classes: "btn--violet-500 btn--hoveractive") }}
@@ -20,7 +21,8 @@
     {{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--blue-300 btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--cyan-200 btn--hoveractive") }}
-    {{> atoms-icon-button(classes: "btn--green-200 btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--green-400 btn--hoveractive") }}
+    {{> atoms-icon-button(classes: "btn--green-300 btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--orange-300 btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--violet-400 btn--hoveractive") }}
     {{> atoms-icon-button(classes: "btn--violet-500 btn--hoveractive") }}

source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache

@@ -7,7 +7,8 @@
     {{> atoms-basic-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
     {{> atoms-basic-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
     {{> atoms-basic-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
-    {{> atoms-basic-button(cta: "btn--to-green-200", classes: "btn--hoveractive btn--to-green-200") }}
+    {{> atoms-basic-button(cta: "btn--to-green-400", classes: "btn--hoveractive btn--to-green-400") }}
+    {{> atoms-basic-button(cta: "btn--to-green-300", classes: "btn--hoveractive btn--to-green-300") }}
     {{> atoms-basic-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
     {{> atoms-basic-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
     {{> atoms-basic-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
@@ -21,7 +22,8 @@
     {{> atoms-icon-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
     {{> atoms-icon-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
     {{> atoms-icon-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
-    {{> atoms-icon-button(cta: "btn--to-green-200", classes: "btn--hoveractive btn--to-green-200") }}
+    {{> atoms-icon-button(cta: "btn--to-green-400", classes: "btn--hoveractive btn--to-green-400") }}
+    {{> atoms-icon-button(cta: "btn--to-green-300", classes: "btn--hoveractive btn--to-green-300") }}
     {{> atoms-icon-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
     {{> atoms-icon-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
     {{> atoms-icon-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}

source/_patterns/00-atoms/03-buttons/loading-button.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-basic-button(classes: "text-sm btn--loading" )}}
+    {{> atoms-basic-button(classes: "text-base btn--loading" )}}
+    {{> atoms-basic-button(classes: "text-lg btn--loading" )}}
+  </div>
+</div>

source/_patterns/00-atoms/04-animations/ping.mustache

+<span class="inline-flex h-4 w-4 mr-4 relative">
+  <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-green-400"></span>
+  <span class="relative inline-flex rounded-full w-4 h-4 mr-4 bg-green-400" title="Online"></span>
+</span>

source/_patterns/00-atoms/04-lists/dense-unordered-list.mustache

+<ul class="unordered-list unordered-list--dense">
+  <li>{{{ list.item }}}</li>
+  <li>{{{ list.item }}}</li>
+  <li>{{{ list.item }}}</li>
+  <li>{{{ list.item }}}</li>
+  <li>{{{ list.item }}}</li>
+  <li>{{{ list.item }}}</li>
+</ul>

source/_patterns/00-atoms/lists/linked-unordered-list.mustache → source/_patterns/00-atoms/04-lists/linked-unordered-list.mustache

 <ul class="unordered-list unordered-list--linked {{ classes }}">
   <li>
-    <a href="#" class="font-bold">{{ cta }}</a>
+    <a href="#" class="font-bold content-block--nostyle">{{ cta }}</a>
   </li>
   <li>
-    <a href="#">{{ cta }}</a>
+    <a href="#" class="content-block--nostyle">{{ cta }}</a>
   </li>
   <li>
-    <a href="#">{{ cta }}</a>
+    <a href="#" class="content-block--nostyle">{{ cta }}</a>
   </li>
   <li>
-    <a href="#">{{ cta }}</a>
+    <a href="#" class="content-block--nostyle">{{ cta }}</a>
   </li>
 </ul>

source/_patterns/00-atoms/04-lists/unordered-list-leading-variants.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list leading-tight">
+      <li>
+        {{{ list.item }}}
+        <ul class="unordered-list">
+          <li>{{{ list.item }}}</li>
+          <li>{{{ list.item }}}</li>
+        </ul>
+      </li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list leading-snug">
+      <li>
+        {{{ list.item }}}
+        <ul class="unordered-list">
+          <li>{{{ list.item }}}</li>
+          <li>{{{ list.item }}}</li>
+        </ul>
+      </li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list leading-normal">
+      <li>
+        {{{ list.item }}}
+        <ul class="unordered-list">
+          <li>{{{ list.item }}}</li>
+          <li>{{{ list.item }}}</li>
+        </ul>
+      </li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list leading-relaxed">
+      <li>
+        {{{ list.item }}}
+        <ul class="unordered-list">
+          <li>{{{ list.item }}}</li>
+          <li>{{{ list.item }}}</li>
+        </ul>
+      </li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+    </ul>
+  </div>
+</div>

source/_patterns/00-atoms/04-lists/unordered-list-sizes.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list text-xs">
+      <li>
+        {{{ list.item }}}
+        <ul class="unordered-list">
+          <li>{{{ list.item }}}</li>
+          <li>{{{ list.item }}}</li>
+        </ul>
+      </li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list text-sm">
+      <li>
+        {{{ list.item }}}
+        <ul class="unordered-list">
+          <li>{{{ list.item }}}</li>
+          <li>{{{ list.item }}}</li>
+        </ul>
+      </li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list text-lg">
+      <li>
+        {{{ list.item }}}
+        <ul class="unordered-list">
+          <li>{{{ list.item }}}</li>
+          <li>{{{ list.item }}}</li>
+        </ul>
+      </li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list text-xl">
+      <li>
+        {{{ list.item }}}
+        <ul class="unordered-list">
+          <li>{{{ list.item }}}</li>
+          <li>{{{ list.item }}}</li>
+        </ul>
+      </li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+      <li>{{{ list.item }}}</li>
+    </ul>
+  </div>
+</div>

source/_patterns/00-atoms/04-lists/unordered-list.mustache

+<ul class="unordered-list">
+  <li>{{{ list.item }}}</li>
+  <li>{{{ list.item }}}</li>
+  <li>{{{ list.item }}}</li>
+  <li>{{{ list.item }}}</li>
+  <li>{{{ list.item }}}</li>
+  <li>{{{ list.item }}}</li>
+</ul>