diff --git a/gulpfile.js b/gulpfile.js
index 2a59c0a6317bea4dd37f4e631bb2ae8a31421fba..51186ebfa98f6103312bbf86e4f1190f2a20880a 100755
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -41,6 +41,7 @@ const postcssPurgecss = require("@fullhuman/postcss-purgecss")({
     /grid-cols-\d\d?/, // grid columns
     /col-span-\d\d?/, // grid spans
     /row-span-\d\d?/, // grid spans
+    /grid-flow/, // grid flow
     /(sm|md|lg|xl)(\\:)text-.*/,
     // /text-*/,
     /ico--*/, // icons
diff --git a/source/_patterns/00-atoms/lists/dense-unordered-list.mustache b/source/_patterns/00-atoms/lists/dense-unordered-list.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..601404507763edbdd03a2c94d77d1fae31364fc0
--- /dev/null
+++ b/source/_patterns/00-atoms/lists/dense-unordered-list.mustache
@@ -0,0 +1,8 @@
+<ul class="unordered-list unordered-list--dense">
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+</ul>
diff --git a/source/_patterns/00-atoms/lists/unordered-list-leading-variants.mustache b/source/_patterns/00-atoms/lists/unordered-list-leading-variants.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..9348b4c8347db5101f62519308f936880c882bbb
--- /dev/null
+++ b/source/_patterns/00-atoms/lists/unordered-list-leading-variants.mustache
@@ -0,0 +1,42 @@
+<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>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list leading-snug">
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list leading-normal">
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list leading-relaxed">
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+</div>
diff --git a/source/_patterns/00-atoms/lists/unordered-list-sizes.mustache b/source/_patterns/00-atoms/lists/unordered-list-sizes.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..c7ad18af18fd0745957c8ff8ca3151b67ecaab5d
--- /dev/null
+++ b/source/_patterns/00-atoms/lists/unordered-list-sizes.mustache
@@ -0,0 +1,42 @@
+<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>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list text-sm">
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list text-lg">
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list text-xl">
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+</div>
diff --git a/source/css/atoms/list.pcss b/source/css/atoms/list.pcss
index c1d80f6e2c7ad469cd5cf3ba79cc7e82558c5307..f82a4ed57c7d230fc44c4cb460e8995c10bcd979 100644
--- a/source/css/atoms/list.pcss
+++ b/source/css/atoms/list.pcss
@@ -5,37 +5,59 @@
 
 .unordered-list,
 .content-block ul {
+  @apply grid gap-4;
+
   li {
-    @apply relative flex items-center;
+    @apply grid items-start;
+
+    grid-gap: .5em;
+    grid-template-columns: auto 1fr;
 
     &:before {
-      @apply text-black pr-2;
+      @apply text-black;
 
       font-family: "pirati-ui";
       content: "\e919";
-      font-size: 7px;
+      font-size: .5em;
       font-weight: 600;
+      margin-top: .5em;
     }
   }
 
-  &.text-sm li:before {
-    font-size: 5px;
+  &.leading-tight li:before {
+    margin-top: .8em;
+  }
+
+  &.leading-snug li:before {
+    margin-top: .6em;
+  }
+
+  &.leading-normal li:before {
+    margin-top: .7em;
+  }
+
+  &.leading-relaxed li:before {
+    margin-top: .6em;
   }
 }
 
+.unordered-list--dense {
+  @apply row-gap-2;
+}
+
 .unordered-list--linked {
+  li {
+    grid-template-columns: auto 1fr auto;
+  }
+
   li:after {
-    @apply text-black pl-2 ml-auto;
+    @apply text-black;
 
     font-family: "pirati-ui";
     content: "\e923";
-    font-size: 10px;
+    font-size: 1em;
     font-weight: 300;
   }
-
-  &.text-sm li:after {
-    font-size: 8px;
-  }
 }
 
 .ordered-list,