From ce970f3b7615e6a34a24ec83149d71dd5a2c3c82 Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Mon, 22 May 2023 14:00:32 -0400
Subject: [PATCH 1/4] wip (45min)

---
 resources/styles/atoms/avatar/_index.scss     |  2 +-
 resources/styles/atoms/banner/banner.twig     |  8 ++--
 resources/styles/atoms/button/_index.scss     | 14 +++++-
 .../styles/atoms/button/button--icon.twig     | 29 ++++++++++++
 resources/styles/atoms/checkbox/_index.scss   |  6 ++-
 .../atoms/checkbox/checkbox--radio.twig       | 28 +++++------
 resources/styles/atoms/checkbox/checkbox.twig | 28 +++++------
 .../styles/atoms/utility-nav/_index.scss      |  7 +--
 resources/styles/base/_custom-properties.scss |  2 +-
 resources/styles/config/_index.scss           | 21 ++++++---
 .../styles/organisms/site-footer/_index.scss  | 16 ++++++-
 .../organisms/site-footer/site-footer.twig    | 47 ++++++++++---------
 12 files changed, 134 insertions(+), 74 deletions(-)
 create mode 100644 resources/styles/atoms/button/button--icon.twig

diff --git a/resources/styles/atoms/avatar/_index.scss b/resources/styles/atoms/avatar/_index.scss
index 9fa5f74..4c5a81b 100644
--- a/resources/styles/atoms/avatar/_index.scss
+++ b/resources/styles/atoms/avatar/_index.scss
@@ -8,7 +8,6 @@
     &__container {
         display: grid;
         grid: "photo name" 1fr "photo title" 1fr;
-        gap: config.$thin-v-space 0;
     }
 
     &__name {
@@ -26,6 +25,7 @@
     }
 
     &__title {
+        color: config.$gray-400;
         grid-area: title;
         padding: 0 config.$thin-h-space;
     }
diff --git a/resources/styles/atoms/banner/banner.twig b/resources/styles/atoms/banner/banner.twig
index 5edb2ad..a312a91 100644
--- a/resources/styles/atoms/banner/banner.twig
+++ b/resources/styles/atoms/banner/banner.twig
@@ -4,10 +4,12 @@
             Sit quisquam error ipsum atque odit ex At eum eius autem perspiciatis sit! Sint ab!
         </div>
         <button class="banner__dismiss">
-            <svg xmlns="http://www.w3.org/2000/svg" class="banner__dismissIcon" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <line x1="18" y1="6" x2="6" y2="18" />
-                <line x1="6" y1="6" x2="18" y2="18" />
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect width="31.2325" height="2.60271" rx="1.30135" transform="matrix(0.706026 0.708186 -0.706026 0.708186 1.94904 0)" fill="currentColor"/>
+                <rect x="10.3949" y="11.0784" width="2.59873" height="2.60668" rx="1.29937" fill="white"/>
+                <rect width="31.2325" height="2.60271" rx="1.30135" transform="matrix(0.706026 -0.708186 0.706026 0.708186 0 22.1568)" fill="currentColor"/>
             </svg>
+
         </button>
     </div>
 </div>
diff --git a/resources/styles/atoms/button/_index.scss b/resources/styles/atoms/button/_index.scss
index aa9b137..1e81e1f 100644
--- a/resources/styles/atoms/button/_index.scss
+++ b/resources/styles/atoms/button/_index.scss
@@ -23,7 +23,9 @@
     cursor: pointer;
     display: inline-block;
     font-weight: 700;
-    padding: config.$padding;
+    line-height: 1;
+    padding: 1rem 2rem;
+    border-radius: 4em;
     transition: background-color var(--duration-fast) config.$fade-easing;
 
     &:hover,
@@ -86,4 +88,14 @@
             color: var(--button-color-contrast);
         }
     }
+
+    &.-icon {
+        align-items: center;
+        border-radius: 100%;
+        display: inline-grid;
+        height: 3rem;
+        justify-items: center;
+        padding: 0;
+        width: 3rem;
+    }
 }
diff --git a/resources/styles/atoms/button/button--icon.twig b/resources/styles/atoms/button/button--icon.twig
new file mode 100644
index 0000000..12c7e99
--- /dev/null
+++ b/resources/styles/atoms/button/button--icon.twig
@@ -0,0 +1,29 @@
+<button class="button -icon">
+    <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+</button>
+<button class="button -secondary -icon">
+    <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+</button>
+
+<button class="button -danger -icon">
+    <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+</button>
+
+<button class="button -confirm -icon">
+    <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+</button>
+
+<button class="button -disabled -icon">
+    <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+</button>
+
diff --git a/resources/styles/atoms/checkbox/_index.scss b/resources/styles/atoms/checkbox/_index.scss
index 0226ac7..0e2f449 100644
--- a/resources/styles/atoms/checkbox/_index.scss
+++ b/resources/styles/atoms/checkbox/_index.scss
@@ -26,12 +26,14 @@
     }
 
     &__checkbox {
-        pointer-events: none;
-        grid-area: checkbox;
+        background: var(--checkbox-color);
         border-radius: .25em;
         border: 2px solid var(--checkbox-color);
         display: inline-block;
+        grid-area: checkbox;
         height: #{config.$line-height * 1em};
+        padding: .25rem;
+        pointer-events: none;
         vertical-align: middle;
         width: #{config.$line-height * 1em};
     }
diff --git a/resources/styles/atoms/checkbox/checkbox--radio.twig b/resources/styles/atoms/checkbox/checkbox--radio.twig
index 3229ec5..66ae6b6 100644
--- a/resources/styles/atoms/checkbox/checkbox--radio.twig
+++ b/resources/styles/atoms/checkbox/checkbox--radio.twig
@@ -1,8 +1,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="radio" name="radio1" id="radio1">
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
+            <circle cx="6" cy="6" r="6" fill="currentColor" />
         </svg>
     </div>
     <label class="checkbox__label" for="radio1">
@@ -13,8 +13,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="radio" name="radio1" id="radio2" checked>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
+            <circle cx="6" cy="6" r="6" fill="currentColor" />
         </svg>
     </div>
     <label class="checkbox__label" for="radio2">
@@ -25,8 +25,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="radio" id="radio3" disabled>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
+            <circle cx="6" cy="6" r="6" fill="currentColor" />
         </svg>
     </div>
     <label class="checkbox__label" for="radio3">
@@ -37,8 +37,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="radio" id="radio4" disabled checked>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
+            <circle cx="6" cy="6" r="6" fill="currentColor" />
         </svg>
     </div>
     <label class="checkbox__label" for="radio4">
@@ -49,8 +49,8 @@
 <div class="checkbox -secondary">
     <input class="checkbox__input" type="radio" id="radio5">
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
+            <circle cx="6" cy="6" r="6" fill="currentColor" />
         </svg>
     </div>
     <label class="checkbox__label" for="radio5">
@@ -61,8 +61,8 @@
 <div class="checkbox -secondary">
     <input class="checkbox__input" type="radio" id="radio6" checked>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
+            <circle cx="6" cy="6" r="6" fill="currentColor" />
         </svg>
     </div>
     <label class="checkbox__label" for="radio6">
@@ -73,8 +73,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="radio" name="radio1" id="radio7">
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
+            <circle cx="6" cy="6" r="6" fill="currentColor" />
         </svg>
     </div>
     <label class="checkbox__label" name="radio1" for="radio7">
diff --git a/resources/styles/atoms/checkbox/checkbox.twig b/resources/styles/atoms/checkbox/checkbox.twig
index a5700c8..e4cb62f 100644
--- a/resources/styles/atoms/checkbox/checkbox.twig
+++ b/resources/styles/atoms/checkbox/checkbox.twig
@@ -1,8 +1,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="checkbox" id="checkbox1">
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </div>
     <label class="checkbox__label" for="checkbox1">
@@ -13,8 +13,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="checkbox" id="checkbox2" checked>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </div>
     <label class="checkbox__label" for="checkbox2">
@@ -25,8 +25,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="checkbox" id="checkbox3" disabled>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </div>
     <label class="checkbox__label" for="checkbox3">
@@ -37,8 +37,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="checkbox" id="checkbox4" disabled checked>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </div>
     <label class="checkbox__label" for="checkbox4">
@@ -49,8 +49,8 @@
 <div class="checkbox -secondary">
     <input class="checkbox__input" type="checkbox" id="checkbox5">
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </div>
     <label class="checkbox__label" for="checkbox5">
@@ -61,8 +61,8 @@
 <div class="checkbox -secondary">
     <input class="checkbox__input" type="checkbox" id="checkbox6" checked>
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </div>
     <label class="checkbox__label" for="checkbox6">
@@ -73,8 +73,8 @@
 <div class="checkbox">
     <input class="checkbox__input" type="checkbox" id="checkbox7">
     <div class="checkbox__checkbox">
-        <svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
-            <path d="M3 6l2 2l4 -4" />
+        <svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </div>
     <label class="checkbox__label" for="checkbox7">
diff --git a/resources/styles/atoms/utility-nav/_index.scss b/resources/styles/atoms/utility-nav/_index.scss
index 70c7f96..08cd916 100644
--- a/resources/styles/atoms/utility-nav/_index.scss
+++ b/resources/styles/atoms/utility-nav/_index.scss
@@ -16,15 +16,10 @@
                 padding-right: 0;
             }
         }
-
-        & + & {
-            #{$b}__link {
-                border-left: 1px solid config.$border;
-            }
-        }
     }
 
     &__link {
         padding: 0 config.$thin-h-space;
+        text-decoration: underline;
     }
 }
diff --git a/resources/styles/base/_custom-properties.scss b/resources/styles/base/_custom-properties.scss
index d5a194f..73c6375 100644
--- a/resources/styles/base/_custom-properties.scss
+++ b/resources/styles/base/_custom-properties.scss
@@ -16,7 +16,7 @@
     }
 
     @include at(lg) {
-        --font-size-h1: 3.75rem;
+        --font-size-h1: 4rem;
         --font-size-h2: 3rem;
         --font-size-h3: 2rem;
         --font-size-h4: 1.5rem;
diff --git a/resources/styles/config/_index.scss b/resources/styles/config/_index.scss
index 4d0f7c3..b14912b 100644
--- a/resources/styles/config/_index.scss
+++ b/resources/styles/config/_index.scss
@@ -12,19 +12,19 @@ $row-gap: 1.5rem;
 ///
 $font-family: Arial, sans-serif;
 $font-size: 1rem;
-$line-height: 1.5;
+$line-height: 2;
 
 ///
 /// Heading font stack, line-height
 ///
 $font-family-heading: system-ui, sans-serif;
-$line-height-heading: 1;
+$line-height-heading: 1.125;
 
 ///
 /// Regular padding. Used for components like buttons, cards, and primary nav items.
 ///
-$v-space: 1rem;
-$h-space: 1.5rem;
+$v-space: 1.25rem;
+$h-space: 1.25rem;
 $padding: $v-space $h-space;
 
 ///
@@ -38,11 +38,18 @@ $thin-padding: $thin-v-space $thin-h-space;
 ///
 /// Media Query Breakpoints
 ///
+/// $breakpoints: (
+///     sm: (width:      0, gap: 16px),
+///     md: (width:  625px, gap: 32px),
+///     lg: (width: 1121px, gap: 48px),
+///     xl: (width: 1393px, gap: 48px),
+/// ) !default;
+
 $breakpoints: (
     sm: (width:      0, gap: 16px),
-    md: (width:  625px, gap: 32px),
-    lg: (width: 1121px, gap: 48px),
-    xl: (width: 1393px, gap: 48px),
+    md: (width:  793px, gap: 24px),
+    lg: (width: 1121px, gap: 32px),
+    xl: (width: 1365px, gap: 32px),
 ) !default;
 
 
diff --git a/resources/styles/organisms/site-footer/_index.scss b/resources/styles/organisms/site-footer/_index.scss
index 3c92b12..ba9128f 100644
--- a/resources/styles/organisms/site-footer/_index.scss
+++ b/resources/styles/organisms/site-footer/_index.scss
@@ -21,6 +21,7 @@
     &__identity {
         display: grid;
         grid-column: main;
+        grid-row: span 2;
         justify-items: center;
         row-gap: config.$thin-h-space;
         text-align: center;
@@ -44,6 +45,7 @@
     }
 
     &__socialLinks {
+        grid-column: span 2;
         display: flex;
         gap: config.$thin-h-space;
     }
@@ -75,9 +77,19 @@
 
     &__utility {
         color: config.$gray-300;
-        display: flex;
+        display: grid;
+        grid-template: auto / auto 1fr;
         font-size: .875rem;
         grid-column: main;
-        justify-content: space-between;
+        grid-row: 2;
+        gap: 1rem;
+
+        @include at(md) {
+            grid-column: 6 / main;
+        }
+
+        @include at(lg) {
+            grid-column: 5 / main;
+        }
     }
 }
diff --git a/resources/styles/organisms/site-footer/site-footer.twig b/resources/styles/organisms/site-footer/site-footer.twig
index a6ef2ce..8b0c9c6 100644
--- a/resources/styles/organisms/site-footer/site-footer.twig
+++ b/resources/styles/organisms/site-footer/site-footer.twig
@@ -25,30 +25,7 @@
                 <div><a href="tel:+19784628848">978-462-8848</a></div>
             </div>
 
-            <div class="siteFooter__socialLinks">
-                <a class="siteFooter__socialLink" href="">
-                    <span class="sr-only">Visit us on Facebook</span>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
-                    </svg>
-                </a>
-
-                <a class="siteFooter__socialLink" href="">
-                    <span class="sr-only">Visit us on Instagram</span>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <rect x="4" y="4" width="16" height="16" rx="4" />
-                    <circle cx="12" cy="12" r="3" />
-                    <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
-                    </svg>
-                </a>
 
-                <a class="siteFooter__socialLink" href="">
-                    <span class="sr-only">Visit us on Twitter</span>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
-                    </svg>
-                </a>
-            </div>
         </div>
 
         <div class="siteFooter__links">
@@ -100,6 +77,30 @@
         </div>
 
         <div class="siteFooter__utility">
+            <div class="siteFooter__socialLinks">
+                <a class="siteFooter__socialLink" href="">
+                    <span class="sr-only">Visit us on Facebook</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
+                    </svg>
+                </a>
+
+                <a class="siteFooter__socialLink" href="">
+                    <span class="sr-only">Visit us on Instagram</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="4" y="4" width="16" height="16" rx="4" />
+                    <circle cx="12" cy="12" r="3" />
+                    <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
+                    </svg>
+                </a>
+
+                <a class="siteFooter__socialLink" href="">
+                    <span class="sr-only">Visit us on Twitter</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
+                    </svg>
+                </a>
+            </div>
             <div class="siteFooter__copyright">© {{ "now"|date('Y') }} Boilerplate.</div>
 
             {% render "@utility-nav" %}

From 993bb057a4366c6908f32cdc5a50de205636100a Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Mon, 22 May 2023 18:06:46 -0400
Subject: [PATCH 2/4] wip 1h

---
 .../styles/atoms/button/button--ghost.twig    |   8 +-
 resources/styles/atoms/field/_index.scss      |   6 +-
 .../eyebrow/.null-ls_358407_eyebrow.twig      |  24 ++++
 .../styles/atoms/headings/eyebrow/_index.scss |   2 -
 .../atoms/headings/eyebrow/eyebrow.twig       |   8 +-
 resources/styles/atoms/select/_index.scss     |   3 +-
 resources/styles/base/_forms.scss             |   2 -
 resources/styles/base/_typography.scss        |   3 +-
 resources/styles/config/_index.scss           |   6 +-
 resources/styles/config/colors/_index.scss    |  20 +--
 resources/styles/config/colors/_palette.scss  | 117 ++++++++++--------
 resources/styles/molecules/search/_index.scss |  14 ++-
 resources/styles/molecules/search/search.twig |   5 +
 .../styles/molecules/testimonial/_index.scss  |   8 +-
 14 files changed, 141 insertions(+), 85 deletions(-)
 create mode 100644 resources/styles/atoms/headings/eyebrow/.null-ls_358407_eyebrow.twig

diff --git a/resources/styles/atoms/button/button--ghost.twig b/resources/styles/atoms/button/button--ghost.twig
index 25d1d2f..d43519f 100644
--- a/resources/styles/atoms/button/button--ghost.twig
+++ b/resources/styles/atoms/button/button--ghost.twig
@@ -1,4 +1,10 @@
-<button class="button -ghost">Primary</button>
+<button class="button -ghost">
+    Primary
+    <svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5841 11.7821C11.8695 12.0753 12.3323 12.0753 12.6177 11.7821L17.7859 6.47366C17.8634 6.39405 17.9199 6.301 17.9553 6.20182C17.9925 6.09773 18.0065 5.98687 17.9973 5.87768C17.9917 5.81144 17.9778 5.74765 17.9566 5.68744C17.9301 5.61203 17.8915 5.54011 17.8407 5.47487C17.8238 5.45312 17.8055 5.43211 17.7859 5.41197L17.7834 5.40941L12.733 0.221882C12.4475 -0.0712958 11.9848 -0.0712953 11.6993 0.221882C11.4139 0.51506 11.4139 0.990396 11.6993 1.28357L15.5046 5.19209H0.730891C0.327232 5.19209 -8.34465e-07 5.5282 -8.34465e-07 5.94282C-8.34465e-07 6.35743 0.32723 6.69354 0.730889 6.69354L15.5046 6.69355L11.5841 10.7204C11.2987 11.0136 11.2987 11.4889 11.5841 11.7821Z" fill="currentColor"/>
+</svg>
+
+</button>
 <button class="button -ghost -secondary">Secondary</button>
 <button class="button -ghost -danger">Danger</button>
 <button class="button -ghost -confirm">Confirm</button>
diff --git a/resources/styles/atoms/field/_index.scss b/resources/styles/atoms/field/_index.scss
index 223f03b..2395e1a 100644
--- a/resources/styles/atoms/field/_index.scss
+++ b/resources/styles/atoms/field/_index.scss
@@ -11,19 +11,23 @@
     }
 
     &__input {
-        border: 1px solid config.$border;
+        border: 2px solid config.$border;
+        border-radius: .25rem;
         font-family: config.$font-family;
         margin: 0 0 .5rem;
         padding: config.$thin-padding;
         width: 100%;
+        background-color: config.$gray-50;
     }
 
     &__help {
         color: config.$meta-text;
+        font-size: .75rem;
     }
 
     &__error {
         color: config.$error;
+        font-size: .75rem;
     }
 
     &.-error {
diff --git a/resources/styles/atoms/headings/eyebrow/.null-ls_358407_eyebrow.twig b/resources/styles/atoms/headings/eyebrow/.null-ls_358407_eyebrow.twig
new file mode 100644
index 0000000..1820e8c
--- /dev/null
+++ b/resources/styles/atoms/headings/eyebrow/.null-ls_358407_eyebrow.twig
@@ -0,0 +1,24 @@
+<div class="eyebrow">primary eyebrow</div>
+<h1>And the Headline</h1>
+<p>
+    Consectetur velit quia corporis explicabo necessitatibus, maiores odio. Nihil saepe temporibus ipsam voluptatibus voluptas Tempora voluptate dicta velit ut dicta! Vel sunt quidem numquam dicta dicta? Velit mollitia quas reprehenderit.
+</p>
+
+
+<div class="eyebrow -secondary">secondary eyebrow</div>
+<h2>And the Headline</h2>
+<p>
+    Ipsum eum suscipit sed dolores eum! Voluptates tenetur repellendus nesciunt qui et Provident quasi nam quod repellendus praesentium Sed ipsum veritatis molestias enim expedita, est harum? Neque repudiandae repudiandae velit.
+</p>
+
+<div class="eyebrow -highlighted">highlighted eyebrow</div>
+<h1>And the Headline</h1>
+<p>
+    Consectetur velit quia corporis explicabo necessitatibus, maiores odio. Nihil saepe temporibus ipsam voluptatibus voluptas Tempora voluptate dicta velit ut dicta! Vel sunt quidem numquam dicta dicta? Velit mollitia quas reprehenderit.
+</p>
+
+<div class="eyebrow -highlighted -secondary">secondary highlighted eyebrow</div>
+<h2>And the Headline</h2>
+<p>
+    Ipsum eum suscipit sed dolores eum! Voluptates tenetur repellendus nesciunt qui et Provident quasi nam quod repellendus praesentium Sed ipsum veritatis molestias enim expedita, est harum? Neque repudiandae repudiandae velit.
+</p>
diff --git a/resources/styles/atoms/headings/eyebrow/_index.scss b/resources/styles/atoms/headings/eyebrow/_index.scss
index d392db6..48a1b23 100644
--- a/resources/styles/atoms/headings/eyebrow/_index.scss
+++ b/resources/styles/atoms/headings/eyebrow/_index.scss
@@ -10,8 +10,6 @@
     color: var(--eyebrow-color);
     font-size: 1rem;
     font-weight: bold;
-    margin-bottom: .25rem;
-    text-transform: uppercase;
 
     &.-secondary {
         --eyebrow-color: var(--color, #{config.$secondary});
diff --git a/resources/styles/atoms/headings/eyebrow/eyebrow.twig b/resources/styles/atoms/headings/eyebrow/eyebrow.twig
index 1820e8c..7a1e71d 100644
--- a/resources/styles/atoms/headings/eyebrow/eyebrow.twig
+++ b/resources/styles/atoms/headings/eyebrow/eyebrow.twig
@@ -1,23 +1,23 @@
-<div class="eyebrow">primary eyebrow</div>
+<div class="eyebrow">Primary Eyebrow</div>
 <h1>And the Headline</h1>
 <p>
     Consectetur velit quia corporis explicabo necessitatibus, maiores odio. Nihil saepe temporibus ipsam voluptatibus voluptas Tempora voluptate dicta velit ut dicta! Vel sunt quidem numquam dicta dicta? Velit mollitia quas reprehenderit.
 </p>
 
 
-<div class="eyebrow -secondary">secondary eyebrow</div>
+<div class="eyebrow -secondary">Secondary Eyebrow</div>
 <h2>And the Headline</h2>
 <p>
     Ipsum eum suscipit sed dolores eum! Voluptates tenetur repellendus nesciunt qui et Provident quasi nam quod repellendus praesentium Sed ipsum veritatis molestias enim expedita, est harum? Neque repudiandae repudiandae velit.
 </p>
 
-<div class="eyebrow -highlighted">highlighted eyebrow</div>
+<div class="eyebrow -highlighted">Highlighted Eyebrow</div>
 <h1>And the Headline</h1>
 <p>
     Consectetur velit quia corporis explicabo necessitatibus, maiores odio. Nihil saepe temporibus ipsam voluptatibus voluptas Tempora voluptate dicta velit ut dicta! Vel sunt quidem numquam dicta dicta? Velit mollitia quas reprehenderit.
 </p>
 
-<div class="eyebrow -highlighted -secondary">secondary highlighted eyebrow</div>
+<div class="eyebrow -highlighted -secondary">Secondary Highlighted Eyebrow</div>
 <h2>And the Headline</h2>
 <p>
     Ipsum eum suscipit sed dolores eum! Voluptates tenetur repellendus nesciunt qui et Provident quasi nam quod repellendus praesentium Sed ipsum veritatis molestias enim expedita, est harum? Neque repudiandae repudiandae velit.
diff --git a/resources/styles/atoms/select/_index.scss b/resources/styles/atoms/select/_index.scss
index 15af169..1463325 100644
--- a/resources/styles/atoms/select/_index.scss
+++ b/resources/styles/atoms/select/_index.scss
@@ -5,7 +5,8 @@
     &__select {
         appearance: none;
         background: transparent url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzIgNCAyMCAxNicgZmlsbD0nbm9uZScgc3Ryb2tlPScjMTQxNDE0JyBzdHJva2Utd2lkdGg9JzAuMTI1cmVtJz48cGF0aCBkPSdtNiA5IDYgNiA2LTYnLz48L3N2Zz4=) right #{config.$h-space - .5rem} center / #{config.$line-height * 1em} no-repeat;
-        border: 2px solid config.$link;
+        border: 2px solid config.$border;
+        border-radius: 4px;
         padding: config.$thin-padding;
         height: auto;
     }
diff --git a/resources/styles/base/_forms.scss b/resources/styles/base/_forms.scss
index 44cba44..cf1af90 100644
--- a/resources/styles/base/_forms.scss
+++ b/resources/styles/base/_forms.scss
@@ -15,8 +15,6 @@ button {
 label {
     cursor: pointer;
     display: block;
-    font-weight: bold;
-    margin-bottom: 0.5em;
 }
 
 fieldset {
diff --git a/resources/styles/base/_typography.scss b/resources/styles/base/_typography.scss
index dc7e19f..834a964 100644
--- a/resources/styles/base/_typography.scss
+++ b/resources/styles/base/_typography.scss
@@ -18,8 +18,7 @@ em {
 blockquote {
     border-left: 1px solid config.$border;
     color: config.$meta-text;
-    font-style: italic;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
     padding-left: 1rem;
 }
 
diff --git a/resources/styles/config/_index.scss b/resources/styles/config/_index.scss
index b14912b..fb5c6d5 100644
--- a/resources/styles/config/_index.scss
+++ b/resources/styles/config/_index.scss
@@ -56,9 +56,9 @@ $breakpoints: (
 ///
 /// Shadows
 ///
-$low-shadow: 0 0px 0.5px rgba(0, 0, 0, 0.057), 0 0px 1.8px rgba(0, 0, 0, 0.083), 0 0px 8px rgba(0, 0, 0, 0.14);
-$med-shadow: 0 0.5px 1.1px rgba(0, 0, 0, 0.057), 0 1.8px 3.6px rgba(0, 0, 0, 0.083), 0 8px 16px rgba(0, 0, 0, 0.14);
-$high-shadow: 0 1.1px 2.1px rgba(0, 0, 0, 0.057), 0 3.6px 7.1px rgba(0, 0, 0, 0.083), 0 16px 32px rgba(0, 0, 0, 0.14);
+$low-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+$med-shadow: 0px 16px 64px rgba(0, 0, 0, 0.05);
+$high-shadow: 0px 16px 32px rgba(0, 0, 0, 0.1);
 
 
 ///
diff --git a/resources/styles/config/colors/_index.scss b/resources/styles/config/colors/_index.scss
index 41163bf..523cf15 100644
--- a/resources/styles/config/colors/_index.scss
+++ b/resources/styles/config/colors/_index.scss
@@ -4,25 +4,25 @@
 ///
 /// Site Colors
 ///
-$primary: $blue-500;
-$primary-hover: $blue-400;
-$secondary: $aqua-200;
-$secondary-hover: $aqua-100;
+$primary: $purple-500;
+$primary-hover: $purple-400;
+$secondary: $purple-200;
+$secondary-hover: $purple-100;
 
 
 
 ///
 /// Messaging colors
 ///
-$confirm: $green-400;
-$confirm-hover: $green-300;
-$danger: $red-400;
-$danger-hover: $red-300;
+$confirm: $green-300;
+$confirm-hover: $green-200;
+$danger: $red-500;
+$danger-hover: $red-400;
 $disabled: $gray-200;
 $error: $red-500;
 $info: $blue-400;
 $success: $green-300;
-$warning: $yellow-200;
+$warning: $yellow-300;
 
 
 ///
@@ -32,7 +32,7 @@ $plain-text: $gray-900;
 $meta-text: $gray-500;
 $link: $primary;
 $link-hover: $blue-300;
-$border: $gray-200;
+$border: $gray-300;
 
 
 ///
diff --git a/resources/styles/config/colors/_palette.scss b/resources/styles/config/colors/_palette.scss
index 45509af..0faa7c3 100644
--- a/resources/styles/config/colors/_palette.scss
+++ b/resources/styles/config/colors/_palette.scss
@@ -1,61 +1,70 @@
 $white: #ffffff !default;
-$gray-100: #d3d3d3 !default;
-$gray-200: #b8b7b7 !default;
-$gray-300: #959595 !default;
-$gray-400: #7f7f7f !default;
-$gray-500: #706f6f !default;
-$gray-600: #595959 !default;
-$gray-700: #494949 !default;
-$gray-800: #373736 !default;
-$gray-900: #1d1c1c !default;
+$gray-50: #f2f2f2 !default;
+$gray-100: #e5e5e5 !default;
+$gray-200: #cccccc !default;
+$gray-300: #b3b3b3 !default;
+$gray-400: #999999 !default;
+$gray-500: #808080 !default;
+$gray-600: #666666 !default;
+$gray-700: #4c4c4c !default;
+$gray-800: #333333 !default;
+$gray-900: #1a1a1a !default;
+$gray-950: #0d0d0d !default;
 $black: #000000 !default;
 
-$red-100: #fac7bf !default;
-$red-200: #fc9f92 !default;
-$red-300: #fc6253 !default;
-$red-400: #f82224 !default;
-$red-500: #d92121 !default;
-$red-600: #a52c24 !default;
-$red-700: #822b22 !default;
-$red-800: #5e251e !default;
-$red-900: #2e1512 !default;
 
-$green-100: #bedbb3 !default;
-$green-200: #8fc678 !default;
-$green-300: #56a731 !default;
-$green-400: #4f8e32 !default;
-$green-500: #497b31 !default;
-$green-600: #3f632d !default;
-$green-700: #365028 !default;
-$green-800: #2a3b21 !default;
-$green-900: #171f13 !default;
+$red-50: #fff3f1 !default; // from design
+$red-100: #fbe3de !default;
+$red-200: #f8c8be !default;
+$red-300: #f4a798 !default;
+$red-400: #ed6f56 !default;
+$red-500: #e53411 !default; // from design
+$red-600: #aa260d !default;
+$red-700: #791b09 !default;
+$red-800: #621607 !default;
+$red-900: #430f05 !default;
 
-$blue-100: #cad3e8 !default;
-$blue-200: #a7b7e1 !default;
-$blue-300: #7792e4 !default;
-$blue-400: #5b79e0 !default;
-$blue-500: #536bbc !default;
-$blue-600: #46578e !default;
-$blue-700: #3b476f !default;
-$blue-800: #2e354f !default;
-$blue-900: #191c26 !default;
+$green-50: #ebffee !default; // from design
+$green-100: #cdf2d3 !default;
+$green-200: #98e4a4 !default;
+$green-300: #28c642 !default; // from design
+$green-400: #23ab39 !default;
+$green-500: #1b872d !default;
+$green-600: #156722 !default;
+$green-700: #0f4818 !default;
+$green-800: #0c3a13 !default;
+$green-900: #08270d !default;
 
-$yellow-100: #ead273 !default;
-$yellow-200: #cbb768 !default;
-$yellow-300: #a4945a !default;
-$yellow-400: #8b7f50 !default;
-$yellow-500: #7a7048 !default;
-$yellow-600: #61593c !default;
-$yellow-700: #4f4933 !default;
-$yellow-800: #3b3727 !default;
-$yellow-900: #1f1c16 !default;
+$blue-50: #ebf8ff !default; // from design
+$blue-100: #d0edfc !default;
+$blue-200: #a0dbf9 !default;
+$blue-300: #66c5f5 !default;
+$blue-400: #1ba9f0 !default; // from design
+$blue-500: #147cb1 !default;
+$blue-600: #0f5f86 !default;
+$blue-700: #0b435e !default;
+$blue-800: #09364c !default;
+$blue-900: #062434 !default;
 
-$aqua-100: #85e5c1 !default;
-$aqua-200: #55cca3 !default;
-$aqua-300: #52a485 !default;
-$aqua-400: #4c8b73 !default;
-$aqua-500: #477a65 !default;
-$aqua-600: #3d6052 !default;
-$aqua-700: #344f43 !default;
-$aqua-800: #293b33 !default;
-$aqua-900: #171e1a !default;
+$yellow-50: #fff8ea !default; // from design
+$yellow-100: #fbe6ba !default;
+$yellow-200: #f8cc76 !default;
+$yellow-300: #f2a60f !default; // from design
+$yellow-400: #c7880c !default;
+$yellow-500: #9d6b0a !default;
+$yellow-600: #775207 !default;
+$yellow-700: #543905 !default;
+$yellow-800: #442e04 !default;
+$yellow-900: #2d1f03 !default;
+
+$purple-50: #f2e5ff !default;
+$purple-100: #e6ccff !default;
+$purple-200: #cc99ff !default;
+$purple-300: #b366ff !default;
+$purple-400: #9933ff !default;
+$purple-500: #8000ff !default;
+$purple-600: #6600cc !default;
+$purple-700: #4d0099 !default;
+$purple-800: #330066 !default;
+$purple-900: #1a0033 !default;
+$purple-950: #0b001a !default;
diff --git a/resources/styles/molecules/search/_index.scss b/resources/styles/molecules/search/_index.scss
index 31f4d3d..50aef64 100644
--- a/resources/styles/molecules/search/_index.scss
+++ b/resources/styles/molecules/search/_index.scss
@@ -6,13 +6,25 @@
     margin-bottom: 3rem;
 
     &__field {
-        display: flex;
+        display: grid;
+        grid-auto-flow: column;
+        grid-template-columns: 1fr auto;
         margin-bottom: 1rem;
     }
 
     &__input,
     input#{&}__input {
+        border-radius: 2em;
+        grid-area: 1 / 1 / 2 / 2;
         margin: 0;
+        padding-left: 2.5rem;
+    }
+
+    &__icon {
+        align-self: center;
+        color: config.$gray-400;
+        grid-area: 1 / 1 / 2 / 2;
+        margin-left: 1rem;
     }
 
     &__meta {
diff --git a/resources/styles/molecules/search/search.twig b/resources/styles/molecules/search/search.twig
index 67cdbef..39c11e4 100644
--- a/resources/styles/molecules/search/search.twig
+++ b/resources/styles/molecules/search/search.twig
@@ -4,6 +4,11 @@
 
         <div class="search__field">
             <input class="search__input" type="search" placeholder="Search...">
+            <svg class="search__icon" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12.5 12.752L19.5 19.752" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <circle cx="7.5" cy="7.75201" r="6.5" stroke="currentColor" stroke-width="2"/>
+            </svg>
+
             <button class="search__button button -primary" type="submit">Search</button>
         </div>
 
diff --git a/resources/styles/molecules/testimonial/_index.scss b/resources/styles/molecules/testimonial/_index.scss
index 29de829..37e20cb 100644
--- a/resources/styles/molecules/testimonial/_index.scss
+++ b/resources/styles/molecules/testimonial/_index.scss
@@ -4,8 +4,8 @@
 .testimonial {
     $b: &;
 
-    --testimonial-color: var(--color, #{config.$plain-text});
-    --testimonial-color-attribution: var(--color-attribution, #{config.$meta-text});
+    --testimonial-color: var(--color, #{config.$meta-text});
+    --testimonial-color-attribution: var(--color-attribution, #{config.$plain-text});
     --testimonial-color-punctuation: var(--color-punctuation, #{config.$primary});
 
     display: grid;
@@ -24,7 +24,7 @@
             color: var(--testimonial-color-punctuation);
             content: '”';
             display: inline-block;
-            font-size: 400%;
+            font-size: 8em;
             height: 1rem;
             line-height: 0;
             transform: translateY(150%);
@@ -33,7 +33,7 @@
 
         &::before {
             content: '“';
-            text-indent: -2.5rem;
+            text-indent: -5.5rem;
         }
     }
 

From 45306f53f3d9073d8c39c937778d952add1e5d03 Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Tue, 23 May 2023 17:20:00 -0400
Subject: [PATCH 3/4] wip

---
 .../atoms/avatar/.null-ls_702402_avatar.twig  | 11 ++++
 resources/styles/atoms/avatar/_index.scss     | 11 ++++
 .../styles/atoms/avatar/avatar.config.js      |  5 ++
 resources/styles/atoms/avatar/avatar.twig     |  2 +-
 resources/styles/atoms/button/_index.scss     |  1 +
 .../styles/atoms/field/field--checkbox.twig   | 10 ----
 resources/styles/atoms/link/link--icon.twig   | 14 +++--
 resources/styles/atoms/pagination/_index.scss |  5 +-
 .../styles/atoms/pagination/pagination.twig   | 14 +++--
 resources/styles/atoms/tag/_index.scss        | 14 +++++
 resources/styles/atoms/tag/tag.twig           |  6 +++
 resources/styles/config/colors/_index.scss    |  2 +-
 resources/styles/main.scss                    |  1 +
 .../molecules/accordion/BpAccordion.vue       | 30 +++++++----
 .../styles/molecules/accordion/_index.scss    | 22 +++++---
 resources/styles/molecules/card/_index.scss   | 28 ++++++++--
 .../molecules/card/card--alternate.twig       | 14 +++++
 resources/styles/molecules/card/card.twig     | 27 +++++++---
 .../styles/molecules/messaging/_index.scss    | 24 +++++++--
 .../styles/molecules/messaging/messaging.twig | 51 ++++++++++---------
 20 files changed, 211 insertions(+), 81 deletions(-)
 create mode 100644 resources/styles/atoms/avatar/.null-ls_702402_avatar.twig
 delete mode 100644 resources/styles/atoms/field/field--checkbox.twig
 create mode 100644 resources/styles/atoms/tag/_index.scss
 create mode 100644 resources/styles/atoms/tag/tag.twig
 create mode 100644 resources/styles/molecules/card/card--alternate.twig

diff --git a/resources/styles/atoms/avatar/.null-ls_702402_avatar.twig b/resources/styles/atoms/avatar/.null-ls_702402_avatar.twig
new file mode 100644
index 0000000..ebcd522
--- /dev/null
+++ b/resources/styles/atoms/avatar/.null-ls_702402_avatar.twig
@@ -0,0 +1,11 @@
+<div class="{{ class }} avatar">
+    <div class="avatar__container">
+        <img class='avatar__photo' src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='72' width='72' viewBox='0 0 1 1'><rect width='1' height='1' fill='%230001'/></svg>" alt="Jane Doe" />
+        <div class="avatar__name">
+            Jane Doe
+        </div>
+        <div class="avatar__title">
+            Executive Vice President of Operations
+        </div>
+    </div>
+</div>
diff --git a/resources/styles/atoms/avatar/_index.scss b/resources/styles/atoms/avatar/_index.scss
index 4c5a81b..5961613 100644
--- a/resources/styles/atoms/avatar/_index.scss
+++ b/resources/styles/atoms/avatar/_index.scss
@@ -40,4 +40,15 @@
             justify-self: end;
         }
     }
+
+    &.-small {
+        #{$b}__name {
+            font-size: 1rem;
+            line-height: 1.5;
+        }
+
+        #{$b}__photo {
+            max-height: 4rem;
+        }
+    }
 }
diff --git a/resources/styles/atoms/avatar/avatar.config.js b/resources/styles/atoms/avatar/avatar.config.js
index 3737d24..49ccfc3 100644
--- a/resources/styles/atoms/avatar/avatar.config.js
+++ b/resources/styles/atoms/avatar/avatar.config.js
@@ -5,5 +5,10 @@ module.exports = {
             label: 'Reversed',
             context: { class: '-reversed' },
         },
+        {
+            name: 'small',
+            label: 'Small',
+            context: { class: '-small' },
+        },
     ],
 }
diff --git a/resources/styles/atoms/avatar/avatar.twig b/resources/styles/atoms/avatar/avatar.twig
index ebcd522..58822c6 100644
--- a/resources/styles/atoms/avatar/avatar.twig
+++ b/resources/styles/atoms/avatar/avatar.twig
@@ -1,6 +1,6 @@
 <div class="{{ class }} avatar">
     <div class="avatar__container">
-        <img class='avatar__photo' src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='72' width='72' viewBox='0 0 1 1'><rect width='1' height='1' fill='%230001'/></svg>" alt="Jane Doe" />
+        <img class='avatar__photo' src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='96' width='96' viewBox='0 0 1 1'><rect width='1' height='1' fill='%230001'/></svg>" alt="Jane Doe" />
         <div class="avatar__name">
             Jane Doe
         </div>
diff --git a/resources/styles/atoms/button/_index.scss b/resources/styles/atoms/button/_index.scss
index 1e81e1f..d222354 100644
--- a/resources/styles/atoms/button/_index.scss
+++ b/resources/styles/atoms/button/_index.scss
@@ -30,6 +30,7 @@
 
     &:hover,
     &:focus {
+        color: var(--button-color-contrast);
         background-color: var(--button-color-hover);
     }
 
diff --git a/resources/styles/atoms/field/field--checkbox.twig b/resources/styles/atoms/field/field--checkbox.twig
deleted file mode 100644
index 6fbca81..0000000
--- a/resources/styles/atoms/field/field--checkbox.twig
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="{{ class }} field -checkbox">
-    <label class="field__label" for="accept">
-        Lorem repellendus consequuntur sunt fuga alias
-        Delectus quos sunt ducimus consectetur excepturi
-        Voluptatum doloribus excepturi omnis aspernatur
-        harum rerum animi? Facere iste harum nihil libero
-        autem obcaecati. Esse necessitatibus hic.
-    </label>
-    <input class="field__input" type="checkbox" id="accept">
-</div>
diff --git a/resources/styles/atoms/link/link--icon.twig b/resources/styles/atoms/link/link--icon.twig
index 320536a..7bac7c6 100644
--- a/resources/styles/atoms/link/link--icon.twig
+++ b/resources/styles/atoms/link/link--icon.twig
@@ -1,17 +1,23 @@
 Here's
 <a class="link" href="#">
-    <svg xmlns="http://www.w3.org/2000/svg" class="link__icon" width="16" height="16" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /> <line x1="10" y1="14" x2="20" y2="4" /> <polyline points="15 4 20 4 20 9" /> </svg>
     another link
+    <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11.5841 11.7801C11.8695 12.0733 12.3323 12.0733 12.6177 11.7801L17.7859 6.47166C17.8634 6.39205 17.9199 6.299 17.9553 6.19982C17.9925 6.09573 18.0065 5.98487 17.9973 5.87569C17.9917 5.80944 17.9778 5.74565 17.9566 5.68544C17.9301 5.61004 17.8915 5.53811 17.8407 5.47287C17.8238 5.45112 17.8055 5.43011 17.7859 5.40997L17.7834 5.40741L12.733 0.219883C12.4475 -0.0732947 11.9848 -0.0732942 11.6993 0.219883C11.4139 0.513061 11.4139 0.988397 11.6993 1.28157L15.5046 5.19009H0.730891C0.327232 5.19009 -8.34465e-07 5.5262 -8.34465e-07 5.94082C-8.34465e-07 6.35543 0.32723 6.69155 0.730889 6.69155L15.5046 6.69155L11.5841 10.7184C11.2987 11.0116 11.2987 11.4869 11.5841 11.7801Z" fill="currentColor"/>
+    </svg>
 </a>
 with an icon before, and
 <a class="link" href="#">
+    <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6.4159 0.219884C6.13047 -0.0732943 5.66769 -0.0732944 5.38226 0.219884L0.214074 5.52834C0.136565 5.60795 0.0801047 5.701 0.0446908 5.80018C0.00752214 5.90427 -0.00646207 6.01513 0.00273921 6.12431C0.00828171 6.19056 0.0222006 6.25435 0.0434024 6.31456C0.0698971 6.38996 0.108521 6.46189 0.159276 6.52713C0.176194 6.54888 0.19446 6.56989 0.214073 6.59003L0.216578 6.59259L5.26702 11.7801C5.55246 12.0733 6.01523 12.0733 6.30066 11.7801C6.58609 11.4869 6.58609 11.0116 6.30066 10.7184L2.49543 6.80991L17.2691 6.80991C17.6728 6.80991 18 6.4738 18 6.05918C18 5.64457 17.6728 5.30846 17.2691 5.30846L2.49542 5.30845L6.4159 1.28158C6.70133 0.988398 6.70133 0.513062 6.4159 0.219884Z" fill="currentColor"/>
+    </svg>
     one link
-    <svg xmlns="http://www.w3.org/2000/svg" class="link__icon" width="16" height="16" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /> <line x1="10" y1="14" x2="20" y2="4" /> <polyline points="15 4 20 4 20 9" /> </svg>
 </a>
-with the icon after.
+with the icon before.
 
 
 <a class="link" href="#">
     Read More
-    <svg class="link__icon" viewBox="0 0 24 24" stroke="currentColor" fill="none"><polyline points="9 6 15 12 9 18" /></svg>
+    <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11.5841 11.7801C11.8695 12.0733 12.3323 12.0733 12.6177 11.7801L17.7859 6.47166C17.8634 6.39205 17.9199 6.299 17.9553 6.19982C17.9925 6.09573 18.0065 5.98487 17.9973 5.87569C17.9917 5.80944 17.9778 5.74565 17.9566 5.68544C17.9301 5.61004 17.8915 5.53811 17.8407 5.47287C17.8238 5.45112 17.8055 5.43011 17.7859 5.40997L17.7834 5.40741L12.733 0.219883C12.4475 -0.0732947 11.9848 -0.0732942 11.6993 0.219883C11.4139 0.513061 11.4139 0.988397 11.6993 1.28157L15.5046 5.19009H0.730891C0.327232 5.19009 -8.34465e-07 5.5262 -8.34465e-07 5.94082C-8.34465e-07 6.35543 0.32723 6.69155 0.730889 6.69155L15.5046 6.69155L11.5841 10.7184C11.2987 11.0116 11.2987 11.4869 11.5841 11.7801Z" fill="currentColor"/>
+    </svg>
 </a>
diff --git a/resources/styles/atoms/pagination/_index.scss b/resources/styles/atoms/pagination/_index.scss
index 06215c0..18f11c1 100644
--- a/resources/styles/atoms/pagination/_index.scss
+++ b/resources/styles/atoms/pagination/_index.scss
@@ -17,15 +17,16 @@
     &__list {
         @include no-bullets;
         display: flex;
-        gap: .5rem;
+        gap: 1rem;
     }
 
     &__link {
+        background-color: config.$gray-100;
         border-radius: .25em;
         color: var(--pagination-color);
         display: block;
         font-weight: bold;
-        padding: config.$thin-padding;
+        padding: config.$thin-v-space config.$h-space;
         position: relative;
         transition: background-color var(--duration-fast) config.$fade-easing,
             color var(--duration-fast) config.$fade-easing;
diff --git a/resources/styles/atoms/pagination/pagination.twig b/resources/styles/atoms/pagination/pagination.twig
index 2f7a66e..7c6a8da 100644
--- a/resources/styles/atoms/pagination/pagination.twig
+++ b/resources/styles/atoms/pagination/pagination.twig
@@ -1,8 +1,11 @@
 <nav class="{{ class }} pagination">
     <ul class="pagination__list">
         <li class="pagination__item -previous">
-            <a class="pagination__link" href="" aria-label="Previous">
-                <svg class="link__icon" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none"><polyline points="15 6 9 12 15 18" /></svg>
+            <a class="pagination__button button" href="" aria-label="Previous">
+                <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.55453 15.7068C8.17395 16.0977 7.55692 16.0977 7.17634 15.7068L0.285431 8.62888C0.182086 8.52273 0.106805 8.39867 0.0595869 8.26643C0.0100288 8.12764 -0.00861679 7.97983 0.00365159 7.83425C0.0110416 7.74592 0.0296001 7.66087 0.0578692 7.58059C0.0931955 7.48005 0.144694 7.38415 0.212367 7.29716C0.234925 7.26816 0.259279 7.24015 0.285431 7.21329L0.288771 7.20988L7.0227 0.293178C7.40327 -0.0977263 8.02031 -0.0977256 8.40088 0.293178C8.78146 0.684082 8.78146 1.31786 8.40088 1.70877L3.32724 6.92012H23.0255C23.5637 6.92012 24 7.36827 24 7.92109C24 8.47391 23.5637 8.92206 23.0255 8.92206L3.32723 8.92206L8.55453 14.2912C8.9351 14.6821 8.9351 15.3159 8.55453 15.7068Z" fill="currentColor"/>
+                </svg>
+
             </a>
         </li>
 
@@ -14,8 +17,11 @@
         <li class="pagination__item"><a class="pagination__link" href="">6</a></li>
 
         <li class="pagination__item -next -disabled">
-            <a class="pagination__link link" href="" aria-label="Next">
-                <svg class="link__icon" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none"><polyline points="9 6 15 12 9 18" /></svg>
+            <a class="pagination__button button" href="" aria-label="Next">
+                <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M15.4494 15.7068C15.83 16.0977 16.447 16.0977 16.8276 15.7068L23.7185 8.62888C23.8218 8.52273 23.8971 8.39867 23.9443 8.26643C23.9939 8.12764 24.0125 7.97983 24.0003 7.83425C23.9929 7.74592 23.9743 7.66087 23.946 7.58059C23.9107 7.48005 23.8592 7.38415 23.7915 7.29716C23.769 7.26816 23.7446 7.24015 23.7185 7.21329L23.7151 7.20988L16.9812 0.293178C16.6006 -0.0977263 15.9836 -0.0977256 15.603 0.293178C15.2225 0.684082 15.2224 1.31786 15.603 1.70877L20.6767 6.92012H0.978429C0.440216 6.92012 0.00390577 7.36827 0.00390577 7.92109C0.00390768 8.47391 0.440214 8.92206 0.978427 8.92206L20.6767 8.92206L15.4494 14.2912C15.0688 14.6821 15.0688 15.3159 15.4494 15.7068Z" fill="currentColor"/>
+                </svg>
+
             </a>
         </li>
     </ul>
diff --git a/resources/styles/atoms/tag/_index.scss b/resources/styles/atoms/tag/_index.scss
new file mode 100644
index 0000000..f344201
--- /dev/null
+++ b/resources/styles/atoms/tag/_index.scss
@@ -0,0 +1,14 @@
+@use "/resources/styles/common" as *;
+@use "/resources/styles/config";
+
+.tag {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    color: config.$primary;
+    border: 1px solid;
+    border-radius: .25rem;
+    padding: config.$thin-padding;
+    font-size: .75rem;
+    line-height: 1.5;
+}
diff --git a/resources/styles/atoms/tag/tag.twig b/resources/styles/atoms/tag/tag.twig
new file mode 100644
index 0000000..d6b8221
--- /dev/null
+++ b/resources/styles/atoms/tag/tag.twig
@@ -0,0 +1,6 @@
+<div class="tag {{ class }}">
+    <svg class="tag__icon" width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0.00201416 5.91903V1.13501C0.00201416 0.513682 0.505686 0.0100098 1.12701 0.0100098H5.91103C6.2094 0.0100113 6.49555 0.128539 6.70652 0.339518L11.6725 5.3055C12.1118 5.74484 12.1118 6.45715 11.6725 6.89649L6.88849 11.6805C6.44916 12.1198 5.73685 12.1198 5.29751 11.6805L0.331522 6.71452C0.120543 6.50354 0.00201572 6.2174 0.00201416 5.91903H0.00201416ZM2.62702 1.51001C2.00569 1.51001 1.50201 2.01368 1.50201 2.63501C1.50201 3.25634 2.00569 3.76001 2.62702 3.76001C3.24834 3.76001 3.75202 3.25634 3.75202 2.63501C3.75202 2.01368 3.24834 1.51001 2.62702 1.51001Z" fill="currentColor"/>
+    </svg>
+    Simple Tag
+</div>
diff --git a/resources/styles/config/colors/_index.scss b/resources/styles/config/colors/_index.scss
index 523cf15..6a4a658 100644
--- a/resources/styles/config/colors/_index.scss
+++ b/resources/styles/config/colors/_index.scss
@@ -31,7 +31,7 @@ $warning: $yellow-300;
 $plain-text: $gray-900;
 $meta-text: $gray-500;
 $link: $primary;
-$link-hover: $blue-300;
+$link-hover: $purple-300;
 $border: $gray-300;
 
 
diff --git a/resources/styles/main.scss b/resources/styles/main.scss
index 3b62447..a7e3bd8 100644
--- a/resources/styles/main.scss
+++ b/resources/styles/main.scss
@@ -16,6 +16,7 @@
 @use "atoms/pagination";
 @use "atoms/progress";
 @use "atoms/table";
+@use "atoms/tag";
 @use "atoms/checkbox";
 @use "atoms/utility-nav";
 
diff --git a/resources/styles/molecules/accordion/BpAccordion.vue b/resources/styles/molecules/accordion/BpAccordion.vue
index 998015f..6b38341 100644
--- a/resources/styles/molecules/accordion/BpAccordion.vue
+++ b/resources/styles/molecules/accordion/BpAccordion.vue
@@ -9,17 +9,24 @@
         >
             <slot name="heading" />
             <slot name="icon">
-                <svg
-                    :class="[`${block}__${iconElement}`, { '-open': isOpen }]"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    stroke-width="2"
-                    stroke="currentColor"
-                    fill="none"
-                >
-                    <polyline points="6 9 12 15 18 9" />
-                </svg>
+                <div :class="`${block}__${iconWrapperElement}`">
+                    <svg
+                        :class="[`${block}__${iconElement}`, { '-open': isOpen }]"
+                        width="24"
+                        height="15"
+                        viewBox="0 0 26 15"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M1 1.00201L13 13.002L25 1.00201"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </div>
             </slot>
         </button>
         <Transition
@@ -52,6 +59,7 @@ defineProps({
     block: { type: String, default: 'accordion' },
     headerElement: { type: String, default: 'header' },
     iconElement: { type: String, default: 'icon' },
+    iconWrapperElement: { type: String, default: 'iconWrapper' },
     contentElement: { type: String, default: 'content' },
     contentWrapperElement: { type: String, default: 'contentWrapper' },
     id: { type: String, default: () => Math.random().toString(36).substr(2) },
diff --git a/resources/styles/molecules/accordion/_index.scss b/resources/styles/molecules/accordion/_index.scss
index 2e6c4ed..8637c31 100644
--- a/resources/styles/molecules/accordion/_index.scss
+++ b/resources/styles/molecules/accordion/_index.scss
@@ -1,6 +1,7 @@
 @use "/resources/styles/config";
 
 @mixin accordion() {
+    --accordion-color: var(--color, #{config.$primary});
     --accordion-color-hover: var(--color-hover, #{config.$primary-hover});
 
     $b: &;
@@ -14,23 +15,22 @@
         justify-content: space-between;
         align-items: center;
         text-align: left;
-        padding: 1rem;
+        gap: 1rem;
         transition: background-color var(--duration-fast) config.$fade-easing;
         width: 100%;
 
         &:hover {
-            background-color: var(--accordion-color-hover);
+            --accordion-color: var(--accordion-color-hover);
         }
     }
 
     &__heading {
+        padding: 1rem 1.5rem;
         margin-bottom: 0;
     }
 
     &__content {
-        border-top: 1px solid config.$gray-100;
-        margin: 0 1rem;
-        padding: .5rem 0;
+        padding: 0 config.$padding;
     }
 
     &__contentWrapper {
@@ -38,9 +38,17 @@
         height: 0;
     }
 
-    &__icon {
+    &__iconWrapper {
+        display: flex;
+        padding: .75rem;
+        aspect-ratio: 1;
+        align-items: center;
+        justify-content: center;
         flex-shrink: 0;
-        margin-left: 1rem;
+        background: var(--accordion-color);
+    }
+
+    &__icon {
         transition: transform var(--duration-fast) config.$ease-out-quint;
 
         &.-open {
diff --git a/resources/styles/molecules/card/_index.scss b/resources/styles/molecules/card/_index.scss
index c505774..70f9a21 100644
--- a/resources/styles/molecules/card/_index.scss
+++ b/resources/styles/molecules/card/_index.scss
@@ -8,33 +8,39 @@
     $b: &;
 
     background-color: config.$white;
+    border-radius: 1rem;
     box-shadow: config.$med-shadow;
     margin-bottom: config.$v-space;
+    overflow: hidden;
     z-index: 1;
 
     &__container {
         display: grid;
         grid-gap: 1rem;
-        grid-template: "icon" "heading" "content" 1fr "actions" / auto;
+        grid-template: "hero" "meta" "heading" "content" 1fr "actions" / auto;
         height: 100%;
     }
 
     &__icon,
+    &__meta,
     &__heading,
     &__content,
     &__actions {
-        justify-self: center; // For IE11 (instead of justify-items)
         padding-left: config.$h-space;
         padding-right: config.$h-space;
         position: relative;
     }
 
+    &__meta {
+        color: config.$meta-text;
+    }
+
     &__tag {
         align-self: start;
         color: config.$meta-text;
         font-size: .875rem;
         font-weight: bold;
-        grid-area: icon;
+        grid-area: hero;
         justify-self: start;
         padding: config.$thin-padding;
         text-transform: uppercase;
@@ -45,13 +51,14 @@
     }
 
     &__icon {
-        grid-area: icon;
+        grid-area: hero;
         padding-top: config.$v-space;
         text-align: center; // For IE11
     }
 
     &__heading {
         grid-area: heading;
+        font-weight: bold;
     }
 
     &__content {
@@ -59,11 +66,16 @@
         width: 100%;
     }
 
+    &__hero {
+        grid-area: hero;
+    }
+
 
     &__background {
         background: config.$gray-100 center/cover;
         grid-column: 1;
-        grid-row: icon / heading;
+        grid-area: hero;
+        grid-row: hero / heading;
         height: 100%;
         justify-self: stretch;
     }
@@ -89,6 +101,12 @@
         }
     }
 
+    &__tags {
+        display: flex;
+        flex-flow: row wrap;
+        gap: 1rem;
+    }
+
     &__action {
         flex-basis: max(9rem, 50%);
     }
diff --git a/resources/styles/molecules/card/card--alternate.twig b/resources/styles/molecules/card/card--alternate.twig
new file mode 100644
index 0000000..df1c7f0
--- /dev/null
+++ b/resources/styles/molecules/card/card--alternate.twig
@@ -0,0 +1,14 @@
+<div class="{{ class }} card">
+    <div class="card__container">
+        <div class="card__background" style="opacity: .3; background-image: url(https://placeimg.com/640/320/tech/grayscale)"></div>
+        <div class="card__tag -overlay">White Paper</div>
+        <div class="card__icon">
+            <svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 6 6" stroke-width=".25" stroke="currentColor" fill="none"><rect x="1" y="1" width="4" height="4" rx="1" /></svg>
+        </div>
+        <h4 class="card__heading">One Great Heading</h4>
+        <p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae. Elit vero est ipsa deleniti?</p>
+        <div class="card__actions">
+            <a href="" class="card__action button -primary">Learn More</a>
+        </div>
+    </div>
+</div>
diff --git a/resources/styles/molecules/card/card.twig b/resources/styles/molecules/card/card.twig
index df1c7f0..71577d1 100644
--- a/resources/styles/molecules/card/card.twig
+++ b/resources/styles/molecules/card/card.twig
@@ -1,14 +1,25 @@
 <div class="{{ class }} card">
     <div class="card__container">
-        <div class="card__background" style="opacity: .3; background-image: url(https://placeimg.com/640/320/tech/grayscale)"></div>
-        <div class="card__tag -overlay">White Paper</div>
-        <div class="card__icon">
-            <svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 6 6" stroke-width=".25" stroke="currentColor" fill="none"><rect x="1" y="1" width="4" height="4" rx="1" /></svg>
+        <div class="card__hero">
+            <svg width="100%" height="231px" xmlns="http://www.w3.org/2000/svg">
+              <defs>
+                <pattern patternUnits="userSpaceOnUse" id="Pattern" width="192" height="192" fill="black">
+                  <rect width="96" height="96" />
+                  <rect x="96" y="96" width="96" height="96" />
+                </pattern>
+              </defs>
+              <rect fill="url(#Pattern)" width="100%" height="100%" />
+            </svg>
         </div>
-        <h4 class="card__heading">One Great Heading</h4>
-        <p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae. Elit vero est ipsa deleniti?</p>
-        <div class="card__actions">
-            <a href="" class="card__action button -primary">Learn More</a>
+        <div class="card__meta">Posted on Aug 12, 2023</div>
+        <h3 class="card__heading">One Great Heading</h3>
+        <div class="card__content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae. Elit vero est ipsa deleniti?</p>
+
+            <div class="card__tags">
+                {% render "@tag" %}
+                {% render "@tag" %}
+            </div>
         </div>
     </div>
 </div>
diff --git a/resources/styles/molecules/messaging/_index.scss b/resources/styles/molecules/messaging/_index.scss
index 9a81024..dfb3f5f 100644
--- a/resources/styles/molecules/messaging/_index.scss
+++ b/resources/styles/molecules/messaging/_index.scss
@@ -8,11 +8,13 @@
     $b: &;
 
     --messaging-color: var(--color, #{config.$plain-text});
+    --messaging-background-color: var(--background-color, #{config.$gray-100});
     --messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$plain-text)});
-    --messaging-height-icon: var(--height-icon, 1.5rem);
+    --messaging-height-icon: var(--height-icon, 2rem);
 
-    background-color: config.$gray-100;
-    box-shadow: .25rem 0 0 var(--messaging-color) inset, config.$med-shadow;
+    background-color: var(--messaging-background-color);
+    border-radius: 4px;
+    box-shadow: 0px 1px 1px rgba(50, 8, 0, 0.2), 0px 8px 24px #{rgba(config.$plain-text, .1)};
     display: grid;
     gap: config.$h-space;
     grid: "icon content" #{config.$line-height * 1em} "_ content" / auto 1fr;
@@ -20,10 +22,16 @@
     padding: config.$padding;
 
     &__icon {
+        align-items: center;
         align-self: center;
+        aspect-ratio: 1;
+        background-color: var(--messaging-color);
+        border-radius: 4px;
+        color: var(--messaging-color-contrast);
+        display: flex;
         grid-area: icon;
         height: var(--messaging-height-icon);
-        color: var(--messaging-color);
+        justify-content: center;
     }
 
     &__content {
@@ -47,21 +55,29 @@
 
     &.-success {
         --messaging-color: var(--color, #{config.$success});
+        --messaging-background-color: var(--background-color, #{config.$green-50});
         --messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$success)});
+        box-shadow: 0px 1px 1px rgba(50, 8, 0, 0.2), 0px 8px 24px #{rgba(config.$success, .1)};
     }
 
     &.-warning {
         --messaging-color: var(--color, #{config.$warning});
+        --messaging-background-color: var(--background-color, #{config.$yellow-50});
         --messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$warning)});
+        box-shadow: 0px 1px 1px rgba(50, 33, 0, 0.2), 0px 8px 24px #{rgba(config.$warning, .1)};
     }
 
     &.-info {
         --messaging-color: var(--color, #{config.$info});
+        --messaging-background-color: var(--background-color, #{config.$blue-50});
         --messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$info)});
+        box-shadow: 0px 1px 1px rgba(34, 51, 0, 0.2), 0px 8px 24px #{rgba(config.$info, .1)};
     }
 
     &.-error {
         --messaging-color: var(--color, #{config.$error});
+        --messaging-background-color: var(--background-color, #{config.$red-50});
         --messaging-color-contrast: var(--color-contrast, #{blackwhite(config.$error)});
+        box-shadow: 0px 1px 1px rgba(50, 8, 0, 0.2), 0px 8px 24px #{rgba(config.$error, .1)};
     }
 }
diff --git a/resources/styles/molecules/messaging/messaging.twig b/resources/styles/molecules/messaging/messaging.twig
index ea8bec1..720fb5d 100644
--- a/resources/styles/molecules/messaging/messaging.twig
+++ b/resources/styles/molecules/messaging/messaging.twig
@@ -1,10 +1,10 @@
 <div class="messaging">
-    <svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" />
-        <line x1="12" y1="12" x2="12" y2="12.01" />
-        <line x1="8" y1="12" x2="8" y2="12.01" />
-        <line x1="16" y1="12" x2="16" y2="12.01" />
-    </svg>
+    <div class="messaging__icon">
+        <svg width="2" height="20" viewBox="0 0 2 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V13C0 13.5523 0.447715 14 1 14C1.55228 14 2 13.5523 2 13V1C2 0.447715 1.55228 0 1 0ZM1 17C0.447715 17 0 17.4477 0 18V19C0 19.5523 0.447715 20 1 20C1.55228 20 2 19.5523 2 19V18C2 17.4477 1.55228 17 1 17Z" fill="currentColor"/>
+        </svg>
+    </div>
+
     <div class="messaging__content">
         <p><strong>Default</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
 
@@ -13,10 +13,12 @@
 </div>
 
 <div class="messaging -success">
-    <svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <circle cx="12" cy="12" r="9" />
-        <path d="M9 12l2 2l4 -4" />
-    </svg>
+    <div class="messaging__icon">
+        <svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.9706 0.292894C15.5801 -0.0976307 14.9469 -0.0976307 14.5564 0.292894L5.31374 9.53555L1.70712 5.92893C1.3166 5.53841 0.683433 5.53841 0.292908 5.92893C-0.0976158 6.31946 -0.0976158 6.95262 0.292908 7.34315L4.53555 11.5858C4.70307 11.7533 4.91525 11.849 5.13376 11.8728C5.45978 11.9496 5.81687 11.8608 6.07112 11.6066L15.9706 1.70711C16.3611 1.31658 16.3611 0.683418 15.9706 0.292894Z" fill="#EBFFEE"/>
+        </svg>
+    </div>
+
     <div class="messaging__content">
         <p>
             <strong>Success</strong> – Message with a <a href="https://www.imarc.com/">link</a>.
@@ -28,11 +30,11 @@
 </div>
 
 <div class="messaging -error">
-    <svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z" />
-        <line x1="12" y1="8" x2="12" y2="12" />
-        <line x1="12" y1="16" x2="12.01" y2="16" />
-    </svg>
+    <div class="messaging__icon">
+        <svg width="2" height="20" viewBox="0 0 2 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V13C0 13.5523 0.447715 14 1 14C1.55228 14 2 13.5523 2 13V1C2 0.447715 1.55228 0 1 0ZM1 17C0.447715 17 0 17.4477 0 18V19C0 19.5523 0.447715 20 1 20C1.55228 20 2 19.5523 2 19V18C2 17.4477 1.55228 17 1 17Z" fill="currentColor"/>
+        </svg>
+    </div>
     <div class="messaging__content">
         <p><strong>Error</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
         <ul>
@@ -45,11 +47,11 @@
 </div>
 
 <div class="messaging -info">
-    <svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <circle cx="12" cy="12" r="9" />
-        <line x1="12" y1="8" x2="12.01" y2="8" />
-        <polyline points="11 12 12 12 12 16 13 16" />
-    </svg>
+    <div class="messaging__icon">
+        <svg width="2" height="20" viewBox="0 0 2 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V13C0 13.5523 0.447715 14 1 14C1.55228 14 2 13.5523 2 13V1C2 0.447715 1.55228 0 1 0ZM1 17C0.447715 17 0 17.4477 0 18V19C0 19.5523 0.447715 20 1 20C1.55228 20 2 19.5523 2 19V18C2 17.4477 1.55228 17 1 17Z" fill="currentColor"/>
+        </svg>
+    </div>
     <div class="messaging__content">
         <p><strong>Info</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
 
@@ -58,10 +60,11 @@
 </div>
 
 <div class="messaging -warning">
-    <svg class="messaging__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M12 9v2m0 4v.01" />
-        <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
-    </svg>
+    <div class="messaging__icon">
+        <svg width="2" height="20" viewBox="0 0 2 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V13C0 13.5523 0.447715 14 1 14C1.55228 14 2 13.5523 2 13V1C2 0.447715 1.55228 0 1 0ZM1 17C0.447715 17 0 17.4477 0 18V19C0 19.5523 0.447715 20 1 20C1.55228 20 2 19.5523 2 19V18C2 17.4477 1.55228 17 1 17Z" fill="currentColor"/>
+        </svg>
+    </div>
     <div class="messaging__content">
         <p><strong>Warning</strong> – Message with a <a href="https://www.imarc.com/">link</a>.</p>
 

From fe8d7a8a5bedd324927e7a1009dc3d7c16ab60ce Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Wed, 21 Jun 2023 16:49:53 -0400
Subject: [PATCH 4/4] delete temp file

---
 .../styles/atoms/avatar/.null-ls_702402_avatar.twig   | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 resources/styles/atoms/avatar/.null-ls_702402_avatar.twig

diff --git a/resources/styles/atoms/avatar/.null-ls_702402_avatar.twig b/resources/styles/atoms/avatar/.null-ls_702402_avatar.twig
deleted file mode 100644
index ebcd522..0000000
--- a/resources/styles/atoms/avatar/.null-ls_702402_avatar.twig
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="{{ class }} avatar">
-    <div class="avatar__container">
-        <img class='avatar__photo' src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='72' width='72' viewBox='0 0 1 1'><rect width='1' height='1' fill='%230001'/></svg>" alt="Jane Doe" />
-        <div class="avatar__name">
-            Jane Doe
-        </div>
-        <div class="avatar__title">
-            Executive Vice President of Operations
-        </div>
-    </div>
-</div>