diff --git a/src/components/Aside.astro b/src/components/Aside.astro
index 1c0ae1ee2..3bf5370f2 100644
--- a/src/components/Aside.astro
+++ b/src/components/Aside.astro
@@ -32,18 +32,14 @@ const icons = {
 
 <style>
   aside {
-    --aside-bg: var(--color-background-info);
-
-    padding: var(--space-4x);
-    gap: var(--space-4x);
-    background-color: var(--aside-bg);
-    border-radius: var(--border-radius-10);
-    color: var(--color-text-info);
-
     /* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */
     outline: 1px solid transparent;
 
+    --aside-bg: var(--color-background-info);
+    background-color: var(--aside-bg);
+
     display: flex;
+    @apply p-4 gap-4 rounded-[4px] text-info;
   }
 
   .title {
@@ -53,7 +49,7 @@ const icons = {
   }
 
   aside p {
-    color: var(--color-text-info);
+    @apply text-info;
   }
 
   .icon {
@@ -67,16 +63,16 @@ const icons = {
 
   aside :global(a),
   aside :global(a > code:not([class*="language"])) {
-    color: var(--color-text-link);
+    @apply text-link;
   }
 
   aside :global(p),
   aside.content :global(ul) {
-    color: var(--theme-text);
+    @apply text-text;
   }
 
   :global(.theme-dark) aside :global(code:not([class*="language"])) {
-    color: var(--theme-code-text);
+    @apply text-code-text;
   }
 
   aside :global(pre) {
@@ -102,6 +98,6 @@ const icons = {
   }
 
   .asideContent :global(p + p) {
-    margin-top: var(--space-2x);
+    @apply mt-2;
   }
 </style>
diff --git a/src/components/Footer/Footer.astro b/src/components/Footer/Footer.astro
index 8a978b821..25502d65d 100644
--- a/src/components/Footer/Footer.astro
+++ b/src/components/Footer/Footer.astro
@@ -2,8 +2,8 @@
 // TODO: Replace all footer elements -- INCLUDING SOCIAL MEDIA ICONS!
 ---
 
-<footer class="footer">
-  <div class="footer-grid container">
+<footer class="pt-[82px] bg-gray-800 text-base">
+  <div class="footer-grid grid pb-16 gap-8 container">
     <nav class="footer-col">
       <h3 class="h3 footer-heading">Column 1</h3>
       <ul role="list" class="footer-list">
@@ -110,44 +110,30 @@
 </footer>
 
 <style>
-  .footer {
-    padding: 82px 0 0;
-    background-color: var(--gray-800);
-    font-size: 16px;
-  }
-  .footer-grid {
-    display: grid;
-    padding-bottom: 64px;
-    gap: 32px;
-  }
   .footer-heading {
-    color: var(--white);
-    font-size: 18px;
+    @apply text-white text-[18px];
   }
   .footer-chainlinkreg {
-    white-space: nowrap;
+    @apply whitespace-nowrap;
   }
 
   .footer-list-item {
-    display: flex;
-    margin-bottom: 16px;
-    align-items: center;
+    @apply flex mb-4 items-center;
   }
 
   .footer-list-item.footer-list-item-hidden {
-    display: none;
+    @apply hidden;
   }
 
   .footer-list-item-link {
-    color: #9ea2ab;
+    @apply text-[#9ea2ab];
   }
   .footer-list-item-link:hover {
-    color: white;
+    @apply text-white;
   }
 
   .footer-list-item-social {
-    display: flex;
-    margin-bottom: 16px;
+    @apply flex mb-4;
   }
 
   .footer-list-item-social-icon {
@@ -155,69 +141,53 @@
   }
 
   .footer-copyright-wrapper {
-    width: 100%;
-    background-color: var(--gray-900);
-    padding: var(--space-8x);
-    font-size: 14px;
+    @apply w-full bg-gray-900 p-8 text-sm;
   }
   .footer-copyright {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-8x);
+    @apply flex flex-col gap-8;
   }
   .footer-registry {
-    flex-wrap: wrap;
-    flex-direction: column;
+    @apply flex-wrap flex-col;
   }
   .footer-privacyandterms {
-    justify-content: space-evenly;
-    gap: var(--space-8x);
+    @apply place-content-evenly gap-8;
+    /* justify-content: space-evenly; */
   }
   .footer-privacyandterms a {
-    color: var(--white);
+    @apply text-white;
   }
 
   @media (min-width: 50em) {
     .footer-grid {
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+      @apply grid-cols-6;
     }
     .footer-copyright {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+      @apply flex flex-row justify-between;
     }
     .footer-registry {
-      flex-direction: row;
+      @apply flex-row;
     }
     .footer-copyright-logo {
-      margin-right: var(--space-8x);
+      @apply mr-8;
     }
     .footer-chainlinkreg {
-      margin-right: var(--space-4x);
+      @apply mr-4;
     }
   }
 
   /** Utilities */
   .col {
-    display: flex;
-    align-items: center;
+    @apply flex items-center;
   }
   .footer-logo-text-hide {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: -1;
-    width: 0;
-    height: 0;
-    min-width: 0;
-    opacity: 0;
+    @apply absolute left-0 top-0 z-[-1] w-0 h-0 min-w-0 opacity-0;
   }
   .hidden-sm {
-    display: none;
+    @apply hidden;
   }
   @media (min-width: 50em) {
     .hidden-sm {
-      display: block;
+      @apply block;
     }
   }
 </style>
diff --git a/src/components/Footer/NewsletterCTA.css b/src/components/Footer/NewsletterCTA.css
index 1a233006a..1750b80af 100644
--- a/src/components/Footer/NewsletterCTA.css
+++ b/src/components/Footer/NewsletterCTA.css
@@ -1,77 +1,44 @@
 .newsletter-cta {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: var(--space-16x) var(--space-8x);
-  background-image: url(/images/newsletter_bg.svg);
-  background-position: center;
-  background-size: cover;
-}
-
-.newsletter-cta .hiddenLabel {
-  overflow: hidden;
-  display: none;
-  width: var(--space-0x);
-  height: var(--space-0x);
-  text-indent: 100%;
-  white-space: nowrap;
+  @apply flex flex-col items-center py-16 px-8 bg-center bg-cover bg-[url('/images/newsletter_bg.svg')];
 }
 
 .newsletter-cta :is(h2) {
-  margin-bottom: var(--space-12x);
+  @apply mb-12;
 }
 
 .newsletter-cta .w-inline-block {
-  max-width: 100%;
-  display: inline-block;
+  @apply max-w-full inline-block;
 }
 
 .form-subscribe {
-  max-width: 550px;
-  width: 100%;
+  @apply max-w-[550px] w-full;
 }
 
 .form-subscribe-field-wrapper {
-  display: flex;
-  gap: var(--space-2x);
-  flex-direction: column;
+  @apply flex gap-2 flex-col;
 }
 
 @media (min-width: 50em) {
   .form-subscribe-field-wrapper {
-    flex-direction: row;
-
-    gap: var(--space-4x);
+    @apply flex-row gap-4;
   }
 }
 .newsletter-cta .cta-subscribe-input {
-  width: 100%;
-  height: 56px;
-  max-height: 56px;
-  padding-right: 24px;
-  padding-left: 24px;
-  border-style: solid;
-  border-width: var(--border-width-secondary);
-  border-color: var(--gray-300);
-  border-radius: var(--border-radius-primary);
-  box-shadow: 0 12px 32px -12px rgb(12 22 44 / 32%);
+  @apply w-full h-[56px] max-h-[56px] px-6 border-solid border-2 border-gray-300 rounded-primary shadow-[0_12px_32px_-12px_rgba(12,22,44,0.32)];
 }
 .newsletter-cta .cta-subscribe-input::placeholder {
-  font-style: italic;
+  @apply italic;
 }
 
 /* #subscribe-button {
   width: 100%;
 } */
 .subscribe-form-success-social {
-  margin-right: 4px;
-  margin-left: 4px;
+  @apply mx-1;
   transition: transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
 }
 .subscribe-success-social {
-  margin-top: var(--space-2x);
-  display: flex;
-  justify-content: center;
+  @apply mt-2 flex justify-center;
 }
 
 .subscribe-form-success-social:hover {
@@ -79,7 +46,5 @@
 }
 
 .newsletter-cta .form-subscribe-checkbox {
-  display: block;
-  margin-top: var(--space-4x);
-  cursor: pointer;
+  @apply block mt-4 cursor-pointer;
 }
diff --git a/src/components/Footer/NewsletterCTA.tsx b/src/components/Footer/NewsletterCTA.tsx
index cf6ed8a13..932a90d18 100644
--- a/src/components/Footer/NewsletterCTA.tsx
+++ b/src/components/Footer/NewsletterCTA.tsx
@@ -8,7 +8,7 @@ export type NewsletterCTAProps = {
 }
 export const NewsletterCTA = ({ title = "Stay updated on the latest Scroll news" }: NewsletterCTAProps) => {
   return (
-    <section className={"newsletter-cta"}>
+    <section className="newsletter-cta">
       <h2 className="cta-subscribe-h1 heading-600">{title}</h2>
       <NewsletterSignupForm />
     </section>
diff --git a/src/components/Footer/NewsletterSignupForm.tsx b/src/components/Footer/NewsletterSignupForm.tsx
index 64e3033c1..81c32427a 100644
--- a/src/components/Footer/NewsletterSignupForm.tsx
+++ b/src/components/Footer/NewsletterSignupForm.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "preact/hooks"
 import "./NewsletterCTA.css"
-import button from "../../styles/cl-design-system/button.module.css"
+import button from "../../styles/design-system/button.module.css"
 import { clsx } from "~/lib"
 import jsonp from "jsonp"
 import toQueryString from "to-querystring"
@@ -54,7 +54,7 @@ export const NewsletterSignupForm = () => {
           onSubmit={onSubmit}
         >
           <div className="form-subscribe-field-wrapper">
-            <label htmlFor="Email" className="hiddenLabel ">
+            <label htmlFor="Email" className="overflow-hidden hidden w-0 h-0 indent-[100%] whitespace-nowrap">
               Email Address
             </label>
             <input
diff --git a/src/components/HeadCommon.astro b/src/components/HeadCommon.astro
index 838fbfc86..c705693fe 100644
--- a/src/components/HeadCommon.astro
+++ b/src/components/HeadCommon.astro
@@ -5,7 +5,7 @@ import "../styles/migrated.css"
 import "../styles/prism-darcula.css"
 import "../styles/copy-to-clipboard.css"
 
-import "../styles/cl-design-system/global-styles.css"
+import "../styles/design-system/global-styles.css"
 ---
 
 <!-- Global Metadata -->
diff --git a/src/components/Header/AstroLogo.astro b/src/components/Header/AstroLogo.astro
index b81c75d86..268bb9314 100644
--- a/src/components/Header/AstroLogo.astro
+++ b/src/components/Header/AstroLogo.astro
@@ -5,10 +5,10 @@ const { size } = Astro.props
 <svg class="logo" width={size} height={size} viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
   <style>
     #flame {
-      fill: var(--theme-text-accent);
+      @apply fill-accent;
     }
     #a {
-      fill: var(--theme-text-accent);
+      @apply fill-accent;
     }
   </style>
   <title>Logo</title>
diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
index 5c3bb2367..5ec0fcc03 100644
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@@ -22,7 +22,7 @@ const section = frontmatter?.section ?? ""
 <header>
   <SkipToContent />
   <nav class="nav-wrapper" title="Top Navigation">
-    <div class="logo flex">
+    <div class="logo flex items-center">
       <a href="/">
         <img src="/scroll-docs.svg" style="height:40px; width: 183px" alt={CONFIG.SITE.title ?? "Documentation"} />
       </a>
@@ -57,23 +57,22 @@ const section = frontmatter?.section ?? ""
 <style>
   header {
     z-index: 11;
-    height: var(--theme-navbar-height);
     width: 100%;
-    background-color: var(--white);
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     position: sticky;
     top: 0;
+    @apply h-navbar bg-white;
   }
 
   .nav-link {
-    color: var(--color-text-primary);
+    @apply text-primary;
   }
 
   .nav-link:hover {
-    color: var(--color-text-link);
+    @apply text-link;
   }
 
   .logo {
@@ -101,12 +100,12 @@ const section = frontmatter?.section ?? ""
 
   .logo a {
     transition: color 100ms ease-out;
-    color: var(--theme-text);
+    @apply text-text;
   }
 
   .logo a:hover,
   .logo a:focus {
-    color: var(--theme-text-accent);
+    @apply text-accent;
   }
 
   .logo h1 {
@@ -171,7 +170,7 @@ const section = frontmatter?.section ?? ""
       justify-content: center;
     }
     .navbar a[aria-current="true"] {
-      border-bottom: 2px solid var(--color-text-link);
+      @apply border-0 border-b-2 border-solid border-link;
     }
     .github-url {
       width: 24px;
diff --git a/src/components/Header/Search/Search.module.css b/src/components/Header/Search/Search.module.css
index 34bea105b..547d90a71 100644
--- a/src/components/Header/Search/Search.module.css
+++ b/src/components/Header/Search/Search.module.css
@@ -1,6 +1,6 @@
 /** Style Algolia */
 #searchModal {
-  padding: var(--space-6x);
+  @apply p-6;
 }
 
 .searchInput {
@@ -13,9 +13,6 @@
   overflow: visible;
   font-weight: 500;
   font-size: 1rem;
-  background-color: var(--theme-divider);
-  border-color: var(--theme-divider);
-  color: var(--color-text-placeholder);
   border-style: solid;
   border-width: 1px;
   border-radius: 0.25rem;
@@ -25,9 +22,9 @@
   transition-duration: 0.2s;
   transition-property: border-color, color;
   align-items: center;
-  gap: var(--space-2x);
   width: 180px;
   font-style: italic;
+  @apply bg-divider border-divider text-placeholder gap-2;
 }
 .searchInputMobile {
   background: transparent;
@@ -40,15 +37,14 @@
 }
 .searchInput:hover,
 .searchInput:focus {
-  color: var(--theme-text);
-  border-color: var(--theme-text-light);
+  @apply text-text border-light;
 }
 .searchInput:hover::placeholder,
 .searchInput:focus::placeholder {
-  color: var(--color-text-placeholder);
+  @apply text-placeholder;
 }
 .searchInput::placeholder {
-  color: var(--color-text-placeholder);
+  @apply text-placeholder;
 }
 .searchHint {
   position: absolute;
@@ -61,14 +57,12 @@
   justify-content: center;
   letter-spacing: 0.125em;
   font-size: 13px;
-  font-family: var(--font-mono);
   pointer-events: none;
-  border-color: var(--theme-text-lighter);
-  color: var(--theme-text-light);
   border-style: solid;
   border-width: 1px;
   border-radius: 0.25rem;
   line-height: 14px;
+  @apply font-mono border-lighter text-light;
 }
 
 @media (min-width: 50em) {
@@ -94,10 +88,10 @@
 }
 
 .modalDivider {
-  background: var(--blue-200);
   height: 1px;
   border: 0;
   margin: var(--space-0x) calc(var(--space-6x) * -1);
+  @apply bg-blue-200;
 }
 
 .noQueryFallback {
@@ -105,16 +99,14 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: var(--space-8x) 0;
-  margin-left: var(--space-2x);
-  padding: var(--space-6x);
+  @apply my-8 mr-0 ml-2 p-6;
 }
 .noQueryFallback > div {
   text-align: center;
 }
 
 .resultsWrapper {
-  margin: var(--space-4x) 0;
+  @apply my-4 mx-0;
   overflow: overlay;
   max-height: calc(100vh - 109px);
   margin: 0 calc(var(--modal-padding) * -1) calc(var(--modal-padding) * -1);
@@ -125,7 +117,7 @@
   list-style: none;
 }
 .hit {
-  margin-bottom: var(--space-2x);
+  @apply mb-2;
 }
 
 .queryResults {
@@ -134,17 +126,17 @@
 }
 
 .queryResults h6 {
-  margin-top: var(--space-4x);
+  @apply mt-4;
 }
 .hitList {
-  color: var(--theme-text-secondary);
+  @apply text-secondary;
 }
 .hitList li:hover {
-  background: var(--color-background-secondary);
+  @apply bg-background-secondary;
 }
 .hitList li {
   list-style: none;
-  padding-left: var(--space-2x);
+  @apply pl-2;
 }
 
 .hitList li a {
@@ -158,7 +150,7 @@
 .hit {
   line-height: 32px;
   display: block;
-  color: var(--color-text-secondary);
+  @apply text-secondary;
 }
 .hideSm {
   display: none;
@@ -168,18 +160,18 @@
     top: 50px;
     height: fit-content;
     transform: translateX(-50%);
-    padding: var(--space-8x);
     max-height: 80vh;
+    @apply p-8;
   }
   .queryResults {
     grid-template-columns: 1fr 1fr;
-    gap: var(--space-4x);
+    @apply gap-4;
   }
   .queryResults h6 {
-    margin-top: var(--space-0x);
+    @apply mt-0;
   }
   .hitList li {
-    padding-left: var(--space-0x);
+    @apply pl-0;
   }
   .hideSm {
     display: block;
diff --git a/src/components/Header/Search/SearchInput.module.css b/src/components/Header/Search/SearchInput.module.css
index e610e04f6..09f6f4c7f 100644
--- a/src/components/Header/Search/SearchInput.module.css
+++ b/src/components/Header/Search/SearchInput.module.css
@@ -2,11 +2,7 @@
   display: flex;
   align-items: center;
   gap: 1rem;
-  background: var(--white);
-  padding: var(--modal-padding);
-  padding-bottom: var(--space-6x);
-  margin: calc(var(--modal-padding) * -1);
-  margin-bottom: 0;
+  @apply bg-white p-modal pb-6 m-[calc(theme('padding.modal')_*_-1)] mb-0;
 }
 
 .input {
@@ -14,7 +10,6 @@
   font-size: 16px;
   width: 100%;
   color: rgb(12, 22, 44);
-  background-color: var(--bg-white);
   outline: 0px;
   display: block;
   background-repeat: no-repeat;
@@ -24,12 +19,12 @@
   background-image: url(/assets/search.svg);
   background-position: left 16px top 50%;
   background-size: 16px;
-  padding: var(--space-4x) var(--space-4x) var(--space-4x) 40px;
   flex-grow: 1;
+  @apply bg-white p-4 pl-[40px];
 }
 .input:focus {
   outline: 2px solid var(--color-text-link);
-  border-radius: var(--border-radius-primary);
+  @apply rounded-primary;
 }
 .input::placeholder {
   font-style: italic;
@@ -49,8 +44,8 @@
   padding: 0;
   font-size: 1rem;
   line-height: 24px;
-  color: var(--color-text-link);
   border-bottom: 2px solid;
+  @apply text-link;
 }
 @media (min-width: 50em) {
   .wrapper {
@@ -61,7 +56,7 @@
     font-size: 20px;
     line-height: 24px;
     background-size: 24px;
-    padding: var(--space-4x) var(--space-4x) var(--space-4x) 52px;
+    @apply p-4 pl-[52px];
   }
 
   .closeButton {
diff --git a/src/components/Header/SidebarToggle.module.css b/src/components/Header/SidebarToggle.module.css
index 58cb10eb2..2ecf36dea 100644
--- a/src/components/Header/SidebarToggle.module.css
+++ b/src/components/Header/SidebarToggle.module.css
@@ -1,13 +1,12 @@
 .button {
   background: transparent;
   border: 0;
-  padding: var(--space-2x);
   display: block;
   background-color: transparent;
   border: none;
   padding: 0;
-  color: var(--color-text-link);
   text-decoration: underline;
   text-underline-offset: 2px;
   text-decoration-thickness: 2px;
+  @apply p-2 text-link;
 }
diff --git a/src/components/Header/SkipToContent.astro b/src/components/Header/SkipToContent.astro
index d55f83490..218995097 100644
--- a/src/components/Header/SkipToContent.astro
+++ b/src/components/Header/SkipToContent.astro
@@ -13,10 +13,9 @@
     z-index: 9;
     display: block;
     text-align: center;
-    background-color: var(--theme-text-accent);
-    color: var(--theme-bg);
     border-radius: 0.25em;
     outline: var(--theme-bg) solid 1px;
     outline-offset: 0;
+    @apply bg-accent text-bg;
   }
 </style>
diff --git a/src/components/LeftSidebar/LeftSidebar.astro b/src/components/LeftSidebar/LeftSidebar.astro
index 685390f9f..e7e4a6324 100644
--- a/src/components/LeftSidebar/LeftSidebar.astro
+++ b/src/components/LeftSidebar/LeftSidebar.astro
@@ -112,7 +112,7 @@ const currentPageMatch = removeSlashes(currentPage.slice(1))
 
 <style>
   .menu-separator {
-    border-top: 1px solid var(--theme-divider);
+    @apply border-0 border-t-[1px] border-t-divider border-solid;
   }
   @media (min-width: 50em) {
     #mobile-menu,
@@ -138,12 +138,12 @@ const currentPageMatch = removeSlashes(currentPage.slice(1))
   }
 
   .nav-groups > :first-child {
-    padding-top: var(--doc-padding);
+    @apply pt-doc;
   }
 
   .nav-groups > :last-child {
     padding-bottom: 2rem;
-    margin-bottom: var(--theme-navbar-height);
+    @apply mb-navbar;
   }
 
   .nav-group-title {
@@ -166,13 +166,12 @@ const currentPageMatch = removeSlashes(currentPage.slice(1))
 
   .nav-link a:hover,
   .nav-link a:focus {
-    background-color: var(--theme-bg-hover);
+    @apply bg-bg-hover;
   }
 
   .nav-link a[aria-current="page"] {
-    color: var(--theme-text-accent);
-    background-color: var(--theme-bg-accent);
     font-weight: 600;
+    @apply text-accent bg-bg-accent;
   }
 
   :global(:root.theme-dark) .nav-link a[aria-current="page"] {
@@ -180,7 +179,7 @@ const currentPageMatch = removeSlashes(currentPage.slice(1))
   }
 
   .nested {
-    padding-left: var(--space-4x);
+    @apply pl-4;
   }
 
   @media (min-width: 50em) {
diff --git a/src/components/PageContent/Feedback.tsx b/src/components/PageContent/Feedback.tsx
index 88c56ba17..12e573794 100644
--- a/src/components/PageContent/Feedback.tsx
+++ b/src/components/PageContent/Feedback.tsx
@@ -1,5 +1,5 @@
 import { useState } from "preact/hooks"
-import button from "../../styles/cl-design-system/button.module.css"
+import button from "../../styles/design-system/button.module.css"
 
 const star = (
   <svg style={{ width: "var(--space-6x)", height: "var(--space-6x)" }} viewBox="0 0 24 24">
diff --git a/src/components/PageContent/WhatsNext.astro b/src/components/PageContent/WhatsNext.astro
index 51b387f98..3f563e99a 100644
--- a/src/components/PageContent/WhatsNext.astro
+++ b/src/components/PageContent/WhatsNext.astro
@@ -41,23 +41,23 @@ const { content = {} } = Astro.props as Props
   }
 
   .whats-next {
-    border: 1px solid var(--color-border-primary);
     padding: 0;
+    @apply border-[1px] border-solid border-border-primary;
   }
   .whats-next li:first-child {
     border-top: 0;
   }
   .whats-next li {
     list-style: none;
-    border-top: 1px solid var(--color-border-primary);
     margin: 0;
+    @apply border-0 border-t-[1px] border-solid border-border-primary;
   }
   .whats-next li a {
-    padding: var(--space-4x);
     width: 100%;
     display: inline-flex;
+    @apply p-4;
   }
   .whats-next li a:hover {
-    background: var(--theme-bg-accent);
+    @apply bg-bg-accent;
   }
 </style>
diff --git a/src/components/RightSidebar/RightSidebar.astro b/src/components/RightSidebar/RightSidebar.astro
index dd55b1039..21a971322 100644
--- a/src/components/RightSidebar/RightSidebar.astro
+++ b/src/components/RightSidebar/RightSidebar.astro
@@ -25,8 +25,7 @@ const { content, githubEditUrl, headings, clientSideToc } = Astro.props
 
 <style>
   .feedback-wrapper {
-    padding-left: var(--space-4x);
-    margin-top: var(--space-2x);
+    @apply pl-4 mt-2;
   }
   .sidebar-nav {
     width: 100%;
@@ -37,8 +36,8 @@ const { content, githubEditUrl, headings, clientSideToc } = Astro.props
   .sidebar-nav-inner {
     height: 100%;
     padding: 0;
-    padding-top: var(--doc-padding);
     overflow: auto;
+    @apply pt-doc;
   }
   .sidebar-nav-inner > * {
     margin-top: 1rem;
@@ -48,6 +47,6 @@ const { content, githubEditUrl, headings, clientSideToc } = Astro.props
   }
 
   .sidebar-nav-inner h2 {
-    margin: var(--space-4x) 0 0 0;
+    @apply m-0 mt-4;
   }
 </style>
diff --git a/src/components/Tabs/Tabs.module.css b/src/components/Tabs/Tabs.module.css
index 3cf2bad5c..59cf80bd9 100644
--- a/src/components/Tabs/Tabs.module.css
+++ b/src/components/Tabs/Tabs.module.css
@@ -1,8 +1,7 @@
 .container {
-  margin-top: var(--space-4x);
+  @apply mt-4;
 }
 
 .tab {
-  padding: var(--space-1x) var(--space-2x);
-  margin-right: var(--space-2x);
+  @apply py-1 px-2 mr-2;
 }
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index dbbcb338f..6860905bc 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -3,7 +3,7 @@ import type { ComponentChild } from "preact"
 import { useRef } from "preact/hooks"
 import { useTabState } from "./useTabState"
 import styles from "./Tabs.module.css"
-import button from "../../styles/cl-design-system/button.module.css"
+import button from "../../styles/design-system/button.module.css"
 import { clsx } from "~/lib"
 const tabSlotKey = "tab." as const
 const panelSlotKey = "panel." as const
diff --git a/src/features/landing/components/ProductCard.module.css b/src/features/landing/components/ProductCard.module.css
index ce6c56450..fed6302b6 100644
--- a/src/features/landing/components/ProductCard.module.css
+++ b/src/features/landing/components/ProductCard.module.css
@@ -1,13 +1,11 @@
 .chainsWrapper {
   display: flex;
-  gap: var(--space-2x);
   flex-wrap: wrap;
-  margin-top: var(--space-4x);
+  @apply gap-2 mt-4;
 }
 
 .chainIcon {
-  width: var(--space-6x);
-  height: var(--space-6x);
+  @apply w-6 h-6;
 }
 
 .productCard {
@@ -34,18 +32,16 @@
 }
 
 .firstCol img {
-  margin-right: var(--space-8x);
-  width: var(--space-16x);
+  @apply mr-8 w-16;
 }
 
 .firstCol p {
-  margin: var(--space-2x) 0 var(--space-4x) 0;
+  @apply mt-2 mx-0 mb-4;
 }
 
 .networks {
-  background: var(--gray-100);
-  border-radius: var(--border-radius-primary);
   padding: 1rem;
+  @apply bg-gray-100 rounded-primary;
 }
 
 .links-wrapper {
@@ -53,13 +49,13 @@
 }
 
 .links > * {
-  margin-top: var(--space-4x);
+  @apply mt-4;
 }
 
 .links .separator {
-  border-top: 1px solid var(--gray-200);
+  @apply border-0 border-t-[1px] border-solid border-gray-200;
 }
 
 .links > *:first-child {
-  margin: var(--space-0x);
+  @apply m-0;
 }
diff --git a/src/features/landing/components/Search.css b/src/features/landing/components/Search.css
index 468fcc58a..e5083962f 100644
--- a/src/features/landing/components/Search.css
+++ b/src/features/landing/components/Search.css
@@ -15,8 +15,6 @@
   font-size: 1rem;
   font-family: inherit;
   line-height: inherit;
-  background-color: var(--theme-divider);
-  color: var(--color-text-placeholder);
   border-radius: 0.25rem;
   cursor: pointer;
   transition-timing-function: ease-out;
@@ -24,25 +22,24 @@
   transition-property: border-color, color;
   -webkit-font-smoothing: antialiased;
   font-style: italic;
-  padding: var(--space-4x);
   border: none;
+  @apply bg-divider text-placeholder p-4;
 }
 .search-cta-input img {
   width: 16px;
   height: 16px;
-  margin-right: var(--space-2x);
+  @apply mr-2;
 }
 .search-input:hover,
 .search-input:focus {
-  color: var(--theme-text);
-  border-color: var(--theme-text-light);
+  @apply text-text border-light;
 }
 .search-input:hover::placeholder,
 .search-input:focus::placeholder {
-  color: var(--theme-text-light);
+  @apply text-light;
 }
 .search-input::placeholder {
-  color: var(--theme-text-light);
+  @apply text-light;
 }
 .search-hint {
   position: absolute;
@@ -55,14 +52,12 @@
   justify-content: center;
   letter-spacing: 0.125em;
   font-size: 13px;
-  font-family: var(--font-mono);
   pointer-events: none;
-  border-color: var(--theme-text-lighter);
-  color: var(--theme-text-light);
   border-style: solid;
   border-width: 1px;
   border-radius: 0.25rem;
   line-height: 14px;
+  @apply font-mono border-lighter text-light;
 }
 
 @media (min-width: 50em) {
@@ -82,5 +77,5 @@
 
 .DocSearch-Modal .DocSearch-Hit a {
   box-shadow: none;
-  border: 1px solid var(--theme-accent);
+  @apply border-[1px] border-solid border-accent;
 }
diff --git a/src/features/landing/components/Tabs.module.css b/src/features/landing/components/Tabs.module.css
index d3f0fb46f..4dabdd020 100644
--- a/src/features/landing/components/Tabs.module.css
+++ b/src/features/landing/components/Tabs.module.css
@@ -3,7 +3,7 @@
 }
 
 .tabElement {
-  margin-top: var(--space-6x);
+  @apply mt-6;
 }
 
 .active {
@@ -14,22 +14,21 @@
   display: flex;
   list-style: none;
   margin: 0;
-  border-bottom: 2px solid var(--gray-200);
+  @apply border-0 border-b-[2px] border-solid border-gray-200;
 }
 
 .navTabs li a {
-  padding: var(--space-4x);
-  gap: var(--space-4x);
   display: inline-flex;
+  @apply p-4 gap-4;
 }
 
 .navTabs li:hover {
-  border-bottom: 2px solid var(--gray-300);
   margin-bottom: -2px;
+  @apply border-0 border-b-[2px] border-solid border-gray-300;
 }
 
 .activeTab,
 .navTabs .activeTab:hover {
-  border-bottom: 2px solid var(--color-text-link);
   margin-bottom: -2px;
+  @apply border-0 border-b-[2px] border-solid border-link;
 }
diff --git a/src/features/landing/sections/HeroCTA.astro b/src/features/landing/sections/HeroCTA.astro
index 9ea9a79ba..2965b5664 100644
--- a/src/features/landing/sections/HeroCTA.astro
+++ b/src/features/landing/sections/HeroCTA.astro
@@ -1,6 +1,6 @@
 ---
 import heroBg from "../assets/hero-bg.png"
-import button from "../../styles/cl-design-system/button.module.css"
+import button from "../../styles/design-system/button.module.css"
 import { clsx } from "../../../lib"
 import { SearchCTA } from "../components/SearchCTA.tsx"
 ---
@@ -17,11 +17,11 @@ import { SearchCTA } from "../components/SearchCTA.tsx"
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: var(--space-10x) 0;
+    @apply py-10 px-0;
   }
 
   #hero-search h2 {
-    color: var(--color-text-contrast);
+    @apply text-contrast;
   }
 
   #hero-search:before {
diff --git a/src/features/landing/sections/LinksCTA.astro b/src/features/landing/sections/LinksCTA.astro
index d6039eaba..8be6a29b7 100644
--- a/src/features/landing/sections/LinksCTA.astro
+++ b/src/features/landing/sections/LinksCTA.astro
@@ -47,7 +47,7 @@ const data = [
   .community-links-cta {
     display: grid;
     grid-template-columns: 1fr;
-    gap: var(--space-4x);
+    @apply gap-4;
   }
 
   .community-links-cta > a {
@@ -61,7 +61,7 @@ const data = [
     .community-links-cta {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
-      gap: var(--space-8x);
+      @apply gap-8;
     }
   }
 
@@ -78,7 +78,7 @@ const data = [
   }
 
   .community-links-cta .card .text > a {
-    margin-top: var(--space-2x);
+    @apply mt-2;
   }
 
   .img-circle {
@@ -86,9 +86,9 @@ const data = [
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    background: var(--color-background-secondary);
     width: 64px;
     height: 64px;
     flex-shrink: 0;
+    @apply bg-background-secondary;
   }
 </style>
diff --git a/src/features/landing/sections/NewUserCTA.astro b/src/features/landing/sections/NewUserCTA.astro
index 589b3643d..8235b9802 100644
--- a/src/features/landing/sections/NewUserCTA.astro
+++ b/src/features/landing/sections/NewUserCTA.astro
@@ -1,6 +1,6 @@
 ---
 import newToChainlink from "../assets/new-to-chainlink.svg"
-import button from "../../../styles/cl-design-system/button.module.css"
+import button from "../../../styles/design-system/button.module.css"
 import { clsx } from "~/lib"
 ---
 
@@ -17,11 +17,11 @@ import { clsx } from "~/lib"
 <style>
   .card {
     text-align: center;
-    background: var(--blue-100);
     border: 0;
+    @apply bg-blue-100;
   }
   .copy p {
-    color: var(--color-text-value);
+    @apply text-value;
   }
 
   @media (min-width: 50em) {
@@ -29,13 +29,13 @@ import { clsx } from "~/lib"
       text-align: left;
       display: flex;
       align-items: center;
-      gap: var(--space-4x);
+      @apply gap-4;
     }
     .spacer {
       flex-grow: 1;
     }
     .copy p {
-      margin: var(--space-0x);
+      @apply m-0;
     }
     .img {
       width: 80px;
diff --git a/src/features/landing/sections/NodesCTA.astro b/src/features/landing/sections/NodesCTA.astro
index 2e77e7836..18372bf66 100644
--- a/src/features/landing/sections/NodesCTA.astro
+++ b/src/features/landing/sections/NodesCTA.astro
@@ -1,5 +1,5 @@
 ---
-import button from "../../../styles/cl-design-system/button.module.css"
+import button from "../../../styles/design-system/button.module.css"
 import nodesIcon from "../assets/nodes-icon.svg"
 import { clsx } from "~/lib"
 ---
@@ -17,33 +17,31 @@ import { clsx } from "~/lib"
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: var(--space-8x);
     text-align: center;
-    background: var(--blue-600);
-    border-radius: var(--border-radius-primary);
+    @apply p-8 bg-blue-600 rounded-primary;
   }
 
   .cta-container > :is(h3, p) {
-    color: var(--color-text-contrast);
+    @apply text-contrast;
   }
 
   .cta-container > img {
-    margin: var(--space-0x);
+    @apply m-0;
   }
 
   .cta-container > h3 {
-    margin: var(--space-8x) var(--space-0x) var(--space-0x) var(--space-0x);
+    @apply m-0 mt-8;
   }
 
   .cta-container > p {
-    margin: var(--space-2x) var(--space-0x) var(--space-0x) var(--space-0x);
+    @apply m-0 mt-2;
   }
 
   .cta-container > a {
-    margin: var(--space-6x) var(--space-0x) var(--space-0x) var(--space-0x);
+    @apply m-0 mt-6;
   }
 
   .cta-container > * {
-    margin: var(--space-0x);
+    @apply m-0;
   }
 </style>
diff --git a/src/features/landing/sections/ResourcesCTA.astro b/src/features/landing/sections/ResourcesCTA.astro
index bf4219af6..80433e18d 100644
--- a/src/features/landing/sections/ResourcesCTA.astro
+++ b/src/features/landing/sections/ResourcesCTA.astro
@@ -13,28 +13,24 @@
 
 <style>
   .resources-cta {
-    background: var(--color-background-secondary);
     display: grid;
     grid-template-columns: 1fr;
-    gap: var(--space-4x);
-    padding: var(--space-8x);
-    border-radius: var(--border-radius-primary);
+    @apply bg-background-secondary gap-4 p-8 rounded-primary;
   }
   @media (min-width: 50em) {
     .resources-cta {
-      background: var(--color-background-secondary);
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
-      gap: var(--space-8x);
+      @apply bg-background-secondary gap-8;
     }
   }
 
   .resources-cta div a {
     display: block;
-    margin-top: var(--space-4x);
+    @apply mt-4;
   }
 
   .resources-cta div a:first-child {
-    margin-top: var(--space-0x);
+    @apply mt-0;
   }
 </style>
diff --git a/src/features/landing/sections/TutorialsCTA.astro b/src/features/landing/sections/TutorialsCTA.astro
index 79c8c0b58..44e17d4cf 100644
--- a/src/features/landing/sections/TutorialsCTA.astro
+++ b/src/features/landing/sections/TutorialsCTA.astro
@@ -1,5 +1,5 @@
 ---
-import button from "../../../styles/cl-design-system/button.module.css"
+import button from "../../../styles/design-system/button.module.css"
 import VideoPlayerIcon from "../assets/VideoPlayerIcon.astro"
 import tutorialPreview from "../assets/video-preview.png"
 import avatarAustin from "../assets/people/austin-griffith.png"
@@ -57,7 +57,7 @@ const people = [
     >
       <img
         class="videoPreview"
-        src={tutorialPreview}
+        src={tutorialPreview.src}
         alt="Learn more about the technology we are building on our YouTube channel"
       />
     </a>
@@ -92,7 +92,7 @@ const people = [
       people.map((people) => (
         <a href={people.link} target="_blank" rel="noopener">
           <img
-            src={people.image}
+            src={people.image.src}
             style="width: var(--space-6x); height: var(--space-6x); border-radius: 50%"
             alt={people.name}
           />
@@ -108,37 +108,34 @@ const people = [
     border-radius: 4px;
   }
   .tutorials-cta {
-    background: var(--color-background-secondary);
     display: grid;
     grid-template-columns: 1fr;
-    gap: var(--space-4x);
-    padding: var(--space-8x);
-    border-radius: var(--border-radius-primary);
+    @apply bg-background-secondary gap-4 p-8 rounded-primary;
   }
 
   @media (min-width: 50em) {
     .tutorials-cta {
       grid-template-columns: 1fr 1fr 1fr 1fr;
-      gap: var(--space-8x);
+      @apply gap-8;
     }
   }
 
   .resources-cta div a {
     display: block;
-    margin-top: var(--space-4x);
+    @apply mt-4;
   }
 
   .resources-cta div a:first-child {
-    margin-top: var(--space-0x);
+    @apply mt-0;
   }
 
   .linklist a {
-    margin-top: var(--space-4x);
     display: flex;
     align-items: center;
+    @apply mt-4;
   }
 
   .linklist a:first-child {
-    margin-top: var(--space-0x);
+    @apply mt-0;
   }
 </style>
diff --git a/src/features/landing/styles/EthereumLandingPage.module.css b/src/features/landing/styles/EthereumLandingPage.module.css
index 1c7f7ae21..e9a1d18ac 100644
--- a/src/features/landing/styles/EthereumLandingPage.module.css
+++ b/src/features/landing/styles/EthereumLandingPage.module.css
@@ -1,7 +1,7 @@
 .productCardGrid {
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--space-4x);
+  @apply gap-4;
 }
 
 @media (min-width: 50em) {
@@ -20,7 +20,7 @@
 }
 .clSectionCards {
   text-align: center;
-  margin: var(--space-4x) 0;
+  @apply my-4 mx-0;
 }
 .clProductCard {
   text-align: center;
@@ -30,13 +30,12 @@
   flex-direction: column;
   width: 150px;
   height: 190px;
-  padding: var(--space-8x);
-  background-color: var(--white);
   transition: all 0.2s;
+  @apply p-8 bg-white;
 }
 .clProductCard:hover {
-  background: var(--blue-100);
   transform: translateY(-4px);
+  @apply bg-blue-100;
 }
 .clProductCard h5 {
   margin: 0;
diff --git a/src/features/notifications/components/HeaderBanner.tsx b/src/features/notifications/components/HeaderBanner.tsx
index 3cc37bf18..05f97fb86 100644
--- a/src/features/notifications/components/HeaderBanner.tsx
+++ b/src/features/notifications/components/HeaderBanner.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import headerbanner from "../../../styles/cl-design-system/headerbanner.module.css"
+import headerbanner from "../../../styles/design-system/headerbanner.module.css"
 
 type BannerType = "info" | "success" | "warning" | "danger"
 export type BannerContent = {
diff --git a/src/features/resources/components/DeveloperCommunicationsCallout.astro b/src/features/resources/components/DeveloperCommunicationsCallout.astro
index cba0484ce..cf34de8a7 100644
--- a/src/features/resources/components/DeveloperCommunicationsCallout.astro
+++ b/src/features/resources/components/DeveloperCommunicationsCallout.astro
@@ -31,12 +31,11 @@ import { NewsletterCTA } from "@components/Footer/NewsletterCTA"
     text-align: center;
   }
   .cl-box-blue h3 {
-    color: var(--white);
+    @apply text-white;
   }
   .cl-box-blue a {
-    color: var(--white);
-    border: 1px solid var(--white);
     padding: 2px;
     border-radius: 2px;
+    @apply text-white border-[1px] border-solid border-white;
   }
 </style>
diff --git a/src/layouts/LandingLayout.astro b/src/layouts/LandingLayout.astro
index 950a083a8..c95ed4fca 100644
--- a/src/layouts/LandingLayout.astro
+++ b/src/layouts/LandingLayout.astro
@@ -43,9 +43,9 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
       }
       #grid-left {
         position: fixed;
-        background-color: var(--theme-bg);
         z-index: 10;
         display: none;
+        @apply bg-bg;
       }
       #grid-main {
         padding: 0 var(--gutter);
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 36c12d664..e14b44166 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -18,14 +18,14 @@ import LandingLayout from "../layouts/LandingLayout.astro"
 
 <style>
   .highlight {
-    color: var(--color-text-link);
     font-size: 96px;
+    @apply text-link;
   }
   .wrapper {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: var(--space-16x) var(--space-4x);
+    @apply py-16 px-4;
   }
 </style>
diff --git a/src/pages/developers.mdx b/src/pages/developers.mdx
index 00da2e210..7e1bd0513 100644
--- a/src/pages/developers.mdx
+++ b/src/pages/developers.mdx
@@ -4,7 +4,7 @@ section: developers
 title: "Developers Landing Title"
 ---
 
-import button from "../styles/cl-design-system/button.module.css"
+import button from "../styles/design-system/button.module.css"
 
 Scroll is great.
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3b5fc3a0e..0b1033b99 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,7 +11,7 @@ import NewUserCTA from "~/features/landing/sections/NewUserCTA.astro"
 
 <LandingLayout>
   <HeroCTA />
-  <div class="home-wrapper" id="article">
+  <div class="flex flex-col gap-12 mt-16" id="article">
     <NewUserCTA />
     <!-- <ProductTabs /> -->
     <ResourcesCTA />
@@ -20,12 +20,3 @@ import NewUserCTA from "~/features/landing/sections/NewUserCTA.astro"
     <LinksCTA />
   </div>
 </LandingLayout>
-
-<style>
-  .home-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-12x);
-    margin-top: var(--space-16x);
-  }
-</style>
diff --git a/src/pages/infrastructure.mdx b/src/pages/infrastructure.mdx
index 8402144db..8f8f5bd3e 100644
--- a/src/pages/infrastructure.mdx
+++ b/src/pages/infrastructure.mdx
@@ -4,7 +4,7 @@ section: infrastructure
 title: Infra page Title
 ---
 
-import button from "../styles/cl-design-system/button.module.css"
+import button from "../styles/design-system/button.module.css"
 import styles from "@features/landing/styles/EthereumLandingPage.module.css"
 
 Operating a Chainlink node allows you to be part of the Chainlink Network, helping developers build hybrid smart contracts, giving them access to real-world data and services.
diff --git a/src/pages/user-guide/bridge.mdx b/src/pages/user-guide/bridge.mdx
index da242257c..5dc7c57ac 100644
--- a/src/pages/user-guide/bridge.mdx
+++ b/src/pages/user-guide/bridge.mdx
@@ -29,11 +29,11 @@ It takes about **2 minutes** (6 block confirmations on Scroll L1) before the tok
 
 1. Click your wallet address at the top-right corner of the Bridge web app. The pop-up panel lists the most recent 3 transactions that you made in the Bridge app (see the image below).
 
-   <img src={bridgeTransactions} alt="A preview of the Bridge UI showing recent transactions." />
+   <img src={bridgeTransactions.src} alt="A preview of the Bridge UI showing recent transactions." />
 
 1. Click the transaction hash of the recent deposit. It will open the _Transaction Details_ page in a new tab. You can find the block number containing this transaction.
 
-   <img src={transactionDetails} alt="Viewing the transaction details and block number of bridging an asset." />
+   <img src={transactionDetails.src} alt="Viewing the transaction details and block number of bridging an asset." />
 
 1. You can then check the latest block height in the [Scroll L1 Block Explorer]('https://l1scan.scroll.io/'). If the difference between the latest block height and the block number in Step 2 is greater than 6, the deposited token should be funded in your Scroll L2 wallet.
 
@@ -59,12 +59,12 @@ You can check the progress of withdrawal transactions as follows:
 
 1. Click your wallet address at the top-right corner of the Bridge web app. The pop-up panel lists the most recent 3 transactions you made in the Bridge app (see the image below).
 
-   <img src={bridgeTransactions} alt="A preview of the Bridge UI showing recent transactions." />
+   <img src={bridgeTransactions.src} alt="A preview of the Bridge UI showing recent transactions." />
 
 1. Click the transaction hash of the recent withdrawal. It will open the Transaction Details page in a new tab. You can find the block number containing this transaction.
 
    <img
-     src={transactionDetailsWithdraw}
+     src={transactionDetailsWithdraw.src}
      alt="Viewing the transaction details and block number of a widthdrawn asset."
    />
 
diff --git a/src/scripts/copy-to-clipboard.ts b/src/scripts/copy-to-clipboard.ts
index 3ff000d2b..fa54cf650 100644
--- a/src/scripts/copy-to-clipboard.ts
+++ b/src/scripts/copy-to-clipboard.ts
@@ -1,6 +1,6 @@
 import ClipboardJS from "clipboard"
-// import button from "../../styles/cl-design-system/button.module.css"
-import button from "../styles/cl-design-system/button.module.css"
+// import button from "../../styles/design-system/button.module.css"
+import button from "../styles/design-system/button.module.css"
 
 const clipboard = new ClipboardJS(".copy-iconbutton")
 
diff --git a/src/scripts/link-to-wallet.ts b/src/scripts/link-to-wallet.ts
index 33a0be68a..1c79dc375 100644
--- a/src/scripts/link-to-wallet.ts
+++ b/src/scripts/link-to-wallet.ts
@@ -5,7 +5,7 @@ import { Web3Provider } from "@ethersproject/providers"
 // import LinkToken from "@chainlink/contracts/abi/v0.4/LinkToken.json"
 // import chains from "./reference/chains.json"
 // import linkNameSymbol from "./reference/linkNameSymbol.json"
-import buttonStyles from "../styles/cl-design-system/button.module.css"
+import buttonStyles from "../styles/design-system/button.module.css"
 
 // disable unnecessary warnings
 ethers.utils.Logger.setLogLevel(ethers.utils.Logger.levels.ERROR)
diff --git a/src/styles/cl-design-system/button.module.css b/src/styles/cl-design-system/button.module.css
deleted file mode 100644
index 85f02b6cb..000000000
--- a/src/styles/cl-design-system/button.module.css
+++ /dev/null
@@ -1,159 +0,0 @@
-.primary,
-.secondary {
-  composes: paragraph-100 from global;
-  appearance: none;
-  border-radius: var(--border-radius-primary);
-  border-style: solid;
-  border-width: var(--border-width-secondary);
-  display: inline-block;
-  font-weight: var(--font-weight-medium);
-  /*
-  * In the design guide the border (2px in this case) is on the inside and it is not accounted towards the total height of the component.
-  * In order to make up for this and avoid having a larger button, this line-height was reduced by 4px.
-  */
-  line-height: 20px;
-  padding: var(--space-2x) var(--space-6x);
-  text-align: center;
-  text-decoration: none;
-}
-
-.primary:focus,
-.secondary:focus {
-  outline: 0;
-  box-shadow: 0px 0px 0px 4px var(--color-border-interactive-focus), 0px 12px 32px -12px rgba(12, 22, 44, 0.32);
-}
-
-.primary:disabled,
-.secondary:disabled {
-  cursor: not-allowed;
-  outline: 0;
-  box-shadow: none;
-}
-
-.primary {
-  color: var(--white);
-  background-color: var(--blue-600);
-  border-color: var(--blue-600);
-}
-
-.primary:active {
-  border-color: var(--gray-900);
-  background-color: var(--gray-900);
-}
-
-.primary:focus {
-  border-color: var(--gray-900);
-  background-color: var(--blue-800);
-}
-
-.primary:hover {
-  border-color: var(--gray-900);
-  background-color: var(--blue-800);
-}
-
-.primary:disabled {
-  border-color: var(--gray-200);
-  background-color: var(--gray-200);
-  color: var(--gray-500);
-}
-
-.secondary {
-  color: var(--blue-600);
-  background-color: var(--white);
-  border-color: var(--blue-600);
-}
-
-.secondary:active {
-  border-color: var(--gray-900);
-  background-color: var(--blue-100);
-  color: var(--gray-900);
-}
-
-.secondary:focus {
-  border-color: var(--blue-800);
-  background-color: var(--white);
-}
-
-.secondary:hover {
-  border-color: var(--blue-800);
-  background-color: var(--blue-100);
-  color: var(--blue-800);
-}
-
-.secondary:disabled {
-  border-color: var(--gray-300);
-  background-color: var(--white);
-  color: var(--gray-300);
-}
-
-.tertiary {
-  composes: paragraph-100 from global;
-  appearance: none;
-  display: inline-flex;
-  gap: var(--space-1x);
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  outline: none;
-  font-weight: var(--font-weight-medium);
-  line-height: 1rem;
-  color: var(--color-text-link);
-  padding: var(--space-3x) 0;
-  text-decoration: underline;
-  text-decoration-thickness: var(--border-width-secondary);
-  text-underline-position: under;
-}
-
-.tertiary svg {
-  color: var(--color-text-link);
-}
-
-.tertiary:active,
-.tertiary:active svg {
-  color: var(--color-text-link-pressed);
-}
-.tertiary:focus,
-.tertiary:focus svg {
-  color: var(--color-text-link-hover);
-  text-decoration-thickness: var(--space-1x);
-}
-.tertiary:hover,
-.tertiary:hover svg {
-  color: var(--color-text-link-hover);
-}
-.tertiary:disabled,
-.tertiary:disabled svg {
-  color: var(--color-text-disabled);
-}
-
-.reset {
-  background: transparent;
-  border-radius: var(--border-radius-primary);
-  border: none;
-}
-
-.reset:focus-visible {
-  outline-offset: var(--border-width-secondary);
-  outline: var(--border-width-primary) solid var(--blue-600);
-}
-
-.tag {
-  background: var(--blue-200);
-  border-radius: var(--border-radius-primary);
-  padding: var(--space-1x) var(--space-2x);
-  color: var(--blue-600);
-  border: var(--border-width-primary) solid transparent;
-  text-align: start;
-}
-
-.tag:focus-visible,
-.tag:hover {
-  background: transparent;
-  border: var(--border-width-primary) solid var(--blue-300);
-}
-
-.tag:active {
-  background: var(--blue-800);
-  color: var(--blue-200);
-}
diff --git a/src/styles/cl-design-system/components/layout.css b/src/styles/cl-design-system/components/layout.css
deleted file mode 100644
index 99f458fb5..000000000
--- a/src/styles/cl-design-system/components/layout.css
+++ /dev/null
@@ -1,21 +0,0 @@
-main {
-  margin-bottom: var(--main-margin-bottom);
-}
-
-.container {
-  margin-left: var(--container-margin);
-  margin-right: var(--container-margin);
-}
-
-:where(.card) {
-  padding: var(--space-6x);
-  border: var(--border-width-primary) solid var(--color-border-primary);
-  background-color: var(--color-background-primary);
-  border-radius: var(--border-radius-primary);
-}
-
-@media screen and (min-width: 992px) {
-  .container {
-    max-width: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x)));
-  }
-}
diff --git a/src/styles/cl-design-system/components/typography.css b/src/styles/cl-design-system/components/typography.css
deleted file mode 100644
index 3859210fa..000000000
--- a/src/styles/cl-design-system/components/typography.css
+++ /dev/null
@@ -1,246 +0,0 @@
-/* Global tags - Tags are defined before classes in order to be able to correctly override tags with a class*/
-
-/* Heading styles */
-:where(h1, h2, h3, h4, h5, h6) {
-  font-family: var(--font-family-text);
-  line-height: 1.3;
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-heading);
-}
-
-:where(h6) {
-  font-size: 1rem; /* 16px */
-  margin-bottom: var(--space-2x);
-}
-
-:where(h5) {
-  font-size: 1.25rem; /* 20px */
-  margin-bottom: var(--space-2x);
-}
-
-:where(h4) {
-  font-size: 1.5rem; /* 24px */
-  margin-bottom: var(--space-4x);
-  letter-spacing: -0.015rem;
-}
-
-:where(h3) {
-  font-size: 1.5rem; /* 24px on mobile */
-  margin-bottom: var(--space-4x); /* 16px */
-  letter-spacing: -0.015rem;
-}
-
-:where(h2) {
-  font-size: 1.75rem; /* 28px on mobile */
-  margin-bottom: var(--space-4x); /* 16px */
-  letter-spacing: -0.035rem;
-}
-
-:where(h1) {
-  font-size: 2rem; /* 32px on mobile */
-  margin-bottom: var(--space-4x); /* 16px on mobile */
-  letter-spacing: -0.04rem;
-}
-
-@media screen and (min-width: 768px) {
-  :where(h3) {
-    font-size: 1.75rem;
-    letter-spacing: -0.0175rem;
-  }
-
-  :where(h2) {
-    font-size: 2rem;
-    letter-spacing: -0.04rem;
-  }
-
-  :where(h1) {
-    font-size: 2.5rem;
-    margin-bottom: var(--space-6x);
-    letter-spacing: -0.05rem;
-  }
-}
-
-/* Paragraph  */
-:where(body, p) {
-  font-family: var(--font-family-text);
-  line-height: 1.5;
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-primary); /* --gray-600 or #6d7380 */
-}
-
-:where(p) {
-  font-size: 1rem; /* 16px */
-  max-width: 640px;
-  margin-bottom: var(--space-6x);
-  max-width: 640px;
-}
-
-/* Text  */
-:where(span, label) {
-  font-family: var(--font-family-text);
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-primary);
-  line-height: 1rem;
-  font-size: 0.875rem; /* 14px */
-}
-
-:where(button, input, select, textarea) {
-  font-family: var(--font-family-text);
-}
-
-/* Typography Classes */
-
-/* Heading styles */
-:where(.heading, .heading-100, .heading-200, .heading-300, .heading-400, .heading-500, .heading-600) {
-  font-family: var(--font-family-text);
-  line-height: 1.3;
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-heading);
-}
-
-:where(.heading-100) {
-  font-size: 1rem; /* 16px */
-  margin-bottom: var(--space-2x);
-}
-
-:where(.heading-200) {
-  font-size: 1.25rem; /* 20px */
-  margin-bottom: var(--space-2x);
-}
-
-:where(.heading-300) {
-  font-size: 1.5rem; /* 24px */
-  margin-bottom: var(--space-4x);
-  letter-spacing: -0.015rem;
-}
-
-:where(.heading-400) {
-  font-size: 1.5rem; /* 24px on mobile */
-  margin-bottom: var(--space-4x); /* 16px */
-  letter-spacing: -0.015rem;
-}
-
-:where(.heading-500) {
-  font-size: 1.75rem; /* 28px on mobile */
-  margin-bottom: var(--space-4x); /* 16px */
-  letter-spacing: -0.035rem;
-}
-
-:where(.heading-600) {
-  font-size: 2rem; /* 32px on mobile */
-  margin-bottom: var(--space-4x); /* 16px on mobile */
-  letter-spacing: -0.04rem;
-}
-
-@media screen and (min-width: 768px) {
-  :where(.heading-400) {
-    font-size: 1.75rem;
-    letter-spacing: -0.0175rem;
-  }
-
-  :where(.heading-500) {
-    font-size: 2rem;
-    letter-spacing: -0.04rem;
-  }
-
-  :where(.heading-600) {
-    font-size: 2.5rem;
-    margin-bottom: var(--space-6x);
-    letter-spacing: -0.05rem;
-  }
-}
-
-/* Paragraph styles */
-:where(.paragraph, .paragraph-100, .paragraph-200, .paragraph-300) {
-  font-family: var(--font-family-text);
-  line-height: 1.5;
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-primary); /* --gray-600 or #6d7380 */
-  max-width: 640px;
-}
-
-:where(.paragraph-100) {
-  font-size: 0.875rem; /* 14px */
-}
-
-:where(.paragraph-200) {
-  margin-bottom: var(--space-6x);
-  font-size: 1rem; /* 16px */
-}
-
-:where(.paragraph-300) {
-  font-size: 1.25rem;
-}
-
-/* Text styles */
-:where(.text, .text-100, .text-200, .text-300, ) {
-  font-family: var(--font-family-text);
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-primary);
-  line-height: 1rem;
-}
-
-:where(.text-100) {
-  font-size: 0.75rem; /* 12px */
-}
-
-:where(.text-200) {
-  font-size: 0.875rem; /* 14px */
-}
-
-:where(.text-300) {
-  font-size: 1rem;
-}
-
-/* Label style */
-:where(.label) {
-  font-family: var(--font-family-text);
-  font-size: 0.875rem; /* 14px */
-  line-height: 1rem;
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-label);
-  display: block;
-}
-
-/* Display styles, primarily used on Marketing sites */
-:where(.display, .display-400, .display-500, .display-600) {
-  font-family: var(--font-family-text);
-  line-height: 1.2;
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-heading);
-}
-
-:where(.display-400) {
-  font-size: 2rem; /* 32px on mobile */
-  margin-bottom: var(--space-4x);
-  letter-spacing: -0.04rem;
-}
-
-:where(.display-500) {
-  font-size: 2.5rem; /* 40px on mobile */
-  margin-bottom: var(--space-6x);
-  letter-spacing: -0.05rem;
-}
-
-:where(.display-600) {
-  font-size: 3rem; /* 48px on mobile */
-  margin-bottom: var(--space-6x);
-  letter-spacing: -0.06rem;
-}
-
-@media screen and (min-width: 768px) {
-  :where(.display-400) {
-    font-size: 2.5rem;
-    letter-spacing: -0.05rem;
-  }
-
-  :where(.display-500) {
-    font-size: 3rem;
-    letter-spacing: -0.06rem;
-  }
-
-  :where(.display-600) {
-    font-size: 3.5rem;
-    letter-spacing: -0.07rem;
-  }
-}
diff --git a/src/styles/copy-to-clipboard.css b/src/styles/copy-to-clipboard.css
index 9d79717f7..de76d76b7 100644
--- a/src/styles/copy-to-clipboard.css
+++ b/src/styles/copy-to-clipboard.css
@@ -1,5 +1,4 @@
 .copy-code-button-wrapper {
-  padding: var(--space-2x) var(--space-2x) var(--space-0x) var(--space-0x);
   margin-top: 0 !important;
   display: flex;
   z-index: 999;
@@ -7,11 +6,12 @@
   position: absolute;
   transform: translateY(5px);
   right: 0;
+  @apply pt-2 pr-2 pb-0 pl-0;
 }
 
 .copy-code-button-wrapper > button {
-  padding: var(--space-1x);
   display: flex;
+  @apply p-1;
 }
 
 .copy-code-button-wrapper > button > img {
diff --git a/src/styles/cl-design-system/LICENSE b/src/styles/design-system/LICENSE
similarity index 100%
rename from src/styles/cl-design-system/LICENSE
rename to src/styles/design-system/LICENSE
diff --git a/src/styles/cl-design-system/README.md b/src/styles/design-system/README.md
similarity index 100%
rename from src/styles/cl-design-system/README.md
rename to src/styles/design-system/README.md
diff --git a/src/styles/design-system/button.module.css b/src/styles/design-system/button.module.css
new file mode 100644
index 000000000..ebf4c79d4
--- /dev/null
+++ b/src/styles/design-system/button.module.css
@@ -0,0 +1,128 @@
+.primary,
+.secondary {
+  @apply rounded-primary border-w-secondary font-medium py-2 px-6;
+  composes: paragraph-100 from global;
+  appearance: none;
+  border-style: solid;
+  display: inline-block;
+  /*
+  * In the design guide the border (2px in this case) is on the inside and it is not accounted towards the total height of the component.
+  * In order to make up for this and avoid having a larger button, this line-height was reduced by 4px.
+  */
+  line-height: 20px;
+  text-align: center;
+  text-decoration: none;
+}
+
+.primary:focus,
+.secondary:focus {
+  outline: 0;
+  box-shadow: 0px 0px 0px 4px var(--color-border-interactive-focus), 0px 12px 32px -12px rgba(12, 22, 44, 0.32);
+}
+
+.primary:disabled,
+.secondary:disabled {
+  cursor: not-allowed;
+  outline: 0;
+  box-shadow: none;
+}
+
+.primary {
+  @apply text-white bg-blue-600 border-blue-600;
+}
+
+.primary:active {
+  @apply border-gray-900 bg-gray-900;
+}
+
+.primary:focus {
+  @apply border-gray-900 bg-gray-800;
+}
+
+.primary:hover {
+  @apply border-gray-900 bg-gray-800;
+}
+
+.primary:disabled {
+  @apply border-gray-200 bg-gray-200 text-gray-500;
+}
+
+.secondary {
+  @apply text-blue-600 bg-white border-blue-600;
+}
+
+.secondary:active {
+  @apply text-gray-900 bg-blue-100 border-gray-600;
+}
+
+.secondary:focus {
+  @apply border-blue-800 bg-white;
+}
+
+.secondary:hover {
+  @apply border-blue-800 bg-blue-100 text-blue-800;
+}
+
+.secondary:disabled {
+  @apply border-gray-300 bg-white text-gray-300;
+}
+
+.tertiary {
+  @apply gap-1 font-medium text-link py-3 px-0  decoration-secondary;
+  composes: paragraph-100 from global;
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  outline: none;
+  line-height: 1rem;
+  text-decoration: underline;
+  text-underline-position: under;
+}
+
+.tertiary svg {
+  @apply text-link;
+}
+
+.tertiary:active,
+.tertiary:active svg {
+  @apply text-link-pressed;
+}
+.tertiary:focus,
+.tertiary:focus svg {
+  @apply decoration-4 text-link-hover;
+}
+.tertiary:hover,
+.tertiary:hover svg {
+  @apply text-link-hover;
+}
+.tertiary:disabled,
+.tertiary:disabled svg {
+  @apply text-disabled;
+}
+
+.reset {
+  background: transparent;
+  border: none;
+  @apply rounded-primary;
+}
+
+.reset:focus-visible {
+  outline-offset: var(--border-width-secondary);
+  outline: var(--border-width-primary) solid var(--blue-600);
+}
+
+.tag {
+  @apply text-start bg-blue-200 rounded-primary py-1 px-2 text-blue-600 border-w-primary border-solid border-transparent;
+}
+
+.tag:focus-visible,
+.tag:hover {
+  @apply bg-transparent border-w-primary border-solid border-blue-300;
+}
+
+.tag:active {
+  @apply text-blue-200 bg-blue-800;
+}
diff --git a/src/styles/cl-design-system/components/all.css b/src/styles/design-system/components/all.css
similarity index 100%
rename from src/styles/cl-design-system/components/all.css
rename to src/styles/design-system/components/all.css
diff --git a/src/styles/cl-design-system/components/button.css b/src/styles/design-system/components/button.css
similarity index 90%
rename from src/styles/cl-design-system/components/button.css
rename to src/styles/design-system/components/button.css
index f4c96369b..6052d0668 100644
--- a/src/styles/cl-design-system/components/button.css
+++ b/src/styles/design-system/components/button.css
@@ -4,5 +4,5 @@
  * e.g. modal close button may not share styles with primary button.
  */
 button {
-  cursor: pointer;
+  @apply cursor-pointer;
 }
diff --git a/src/styles/design-system/components/layout.css b/src/styles/design-system/components/layout.css
new file mode 100644
index 000000000..2a7a8721b
--- /dev/null
+++ b/src/styles/design-system/components/layout.css
@@ -0,0 +1,17 @@
+main {
+  @apply mb-16;
+}
+
+.container {
+  @apply mx-6 lg:mx-auto md:mx-8;
+}
+
+:where(.card) {
+  @apply p-6 border-w-primary border-solid border-border-primary bg-background-primary rounded-primary;
+}
+
+@media screen and (min-width: 992px) {
+  .container {
+    max-width: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x)));
+  }
+}
diff --git a/src/styles/design-system/components/typography.css b/src/styles/design-system/components/typography.css
new file mode 100644
index 000000000..6c6efda35
--- /dev/null
+++ b/src/styles/design-system/components/typography.css
@@ -0,0 +1,178 @@
+/* Global tags - Tags are defined before classes in order to be able to correctly override tags with a class*/
+
+/* Heading styles */
+:where(h1, h2, h3, h4, h5, h6) {
+  @apply font-text leading-[1.3] font-medium text-heading;
+}
+
+:where(h6) {
+  @apply text-base mb-2;
+}
+
+:where(h5) {
+  @apply text-[1.25rem] mb-2;
+}
+
+:where(h4) {
+  @apply text-[1.5rem] mb-4 tracking-[-0.015rem];
+}
+
+:where(h3) {
+  @apply text-[1.5rem] mb-4 tracking-[-0.015rem];
+}
+
+:where(h2) {
+  @apply text-[1.75rem] mb-4 tracking-[-0.035rem];
+}
+
+:where(h1) {
+  @apply text-[2rem] mb-4 tracking-[-0.04rem];
+}
+
+@media screen and (min-width: 768px) {
+  :where(h3) {
+    @apply text-[1.75rem] tracking-[-0.0175rem];
+  }
+
+  :where(h2) {
+    @apply text-[2rem] tracking-[-0.04rem];
+  }
+
+  :where(h1) {
+    @apply text-[2.5rem] mb-6 tracking-[-0.05rem];
+  }
+}
+
+/* Paragraph  */
+:where(body, p) {
+  @apply leading-[1.5] font-normal font-text text-primary;
+}
+
+:where(p) {
+  @apply text-base max-w-[640px] mb-6;
+}
+
+/* Text  */
+:where(span, label) {
+  @apply font-text font-normal text-primary leading-[1rem] text-[0.875rem];
+}
+
+:where(button, input, select, textarea) {
+  @apply font-text;
+}
+
+/* Typography Classes */
+
+/* Heading styles */
+:where(.heading, .heading-100, .heading-200, .heading-300, .heading-400, .heading-500, .heading-600) {
+  @apply font-text leading-[1.3] font-medium text-heading;
+}
+
+:where(.heading-100) {
+  @apply text-base mb-2;
+}
+
+:where(.heading-200) {
+  @apply text-[1.25rem] mb-2;
+}
+
+:where(.heading-300) {
+  @apply text-[1.5rem] mb-4 tracking-[-0.015rem];
+}
+
+:where(.heading-400) {
+  @apply text-[1.5rem] mb-4 tracking-[-0.015rem];
+}
+
+:where(.heading-500) {
+  @apply text-[1.75rem] mb-4 tracking-[-0.035rem];
+}
+
+:where(.heading-600) {
+  @apply text-[2rem] mb-4 tracking-[-0.04rem];
+}
+
+@media screen and (min-width: 768px) {
+  :where(.heading-400) {
+    @apply text-[1.75rem] tracking-[-0.0175rem];
+  }
+
+  :where(.heading-500) {
+    @apply text-[2rem] tracking-[-0.04rem];
+  }
+
+  :where(.heading-600) {
+    font-size: 2.5rem;
+    @apply text-[2.5rem] tracking-[-0.05rem] mb-6;
+  }
+}
+
+/* Paragraph styles */
+:where(.paragraph, .paragraph-100, .paragraph-200, .paragraph-300) {
+  @apply font-text leading-[1.5] font-normal text-primary max-w-[640px];
+}
+
+:where(.paragraph-100) {
+  @apply text-[0.875rem];
+}
+
+:where(.paragraph-200) {
+  @apply mb-6 text-base;
+}
+
+:where(.paragraph-300) {
+  @apply text-[1.25rem];
+}
+
+/* Text styles */
+:where(.text, .text-100, .text-200, .text-300, ) {
+  @apply font-text font-normal text-primary leading-[1rem];
+}
+
+:where(.text-100) {
+  @apply text-[0.75rem];
+}
+
+:where(.text-200) {
+  @apply text-[0.875rem];
+}
+
+:where(.text-300) {
+  @apply text-base;
+}
+
+/* Label style */
+:where(.label) {
+  @apply font-text text-[0.875rem] leading-[1rem] font-normal text-label block;
+}
+
+/* Display styles, primarily used on Marketing sites */
+:where(.display, .display-400, .display-500, .display-600) {
+  @apply font-text leading-[1.2] font-medium text-heading;
+}
+
+:where(.display-400) {
+  @apply text-[2rem] mb-4 tracking-[-0.04rem];
+}
+
+:where(.display-500) {
+  @apply text-[2.5rem] mb-6 tracking-[-0.05rem];
+}
+
+:where(.display-600) {
+  @apply text-[3rem] mb-6 tracking-[-0.06rem];
+}
+
+@media screen and (min-width: 768px) {
+  :where(.display-400) {
+    @apply text-[2.5rem]  tracking-[-0.05rem];
+  }
+
+  :where(.display-500) {
+    @apply text-[3rem] tracking-[-0.06rem];
+  }
+
+  :where(.display-600) {
+    @apply text-[3.5rem] tracking-[-0.07rem];
+  }
+}
diff --git a/src/styles/cl-design-system/css-reset.css b/src/styles/design-system/css-reset.css
similarity index 100%
rename from src/styles/cl-design-system/css-reset.css
rename to src/styles/design-system/css-reset.css
diff --git a/src/styles/cl-design-system/fonts.css b/src/styles/design-system/fonts.css
similarity index 100%
rename from src/styles/cl-design-system/fonts.css
rename to src/styles/design-system/fonts.css
diff --git a/src/styles/cl-design-system/global-styles.css b/src/styles/design-system/global-styles.css
similarity index 100%
rename from src/styles/cl-design-system/global-styles.css
rename to src/styles/design-system/global-styles.css
diff --git a/src/styles/cl-design-system/headerbanner.module.css b/src/styles/design-system/headerbanner.module.css
similarity index 76%
rename from src/styles/cl-design-system/headerbanner.module.css
rename to src/styles/design-system/headerbanner.module.css
index b4329cdf0..9231caf60 100644
--- a/src/styles/cl-design-system/headerbanner.module.css
+++ b/src/styles/design-system/headerbanner.module.css
@@ -9,22 +9,20 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: var(--border-radius-primary);
   padding: 2px 6px;
-  margin-right: var(--space-4x);
   flex-shrink: 0;
+  @apply rounded-primary mr-4;
 }
 
 .badge span {
-  color: var(--white);
   letter-spacing: 1px;
-  line-height: var(--space-6x);
+  @apply text-white leading-6;
 }
 
 .container p {
   margin-bottom: 0;
-  color: var(--white);
   max-width: 1200px;
+  @apply text-white;
 }
 
 .container p a {
@@ -32,7 +30,7 @@
   text-underline-offset: 5px;
   text-decoration-thickness: 2px;
   white-space: nowrap;
-  color: var(--white);
+  @apply text-white;
 }
 
 .additionalinfo {
diff --git a/src/styles/cl-design-system/hero.module.css b/src/styles/design-system/hero.module.css
similarity index 66%
rename from src/styles/cl-design-system/hero.module.css
rename to src/styles/design-system/hero.module.css
index 8364a316d..75182c42a 100644
--- a/src/styles/cl-design-system/hero.module.css
+++ b/src/styles/design-system/hero.module.css
@@ -1,33 +1,31 @@
 .container {
   composes: container from global;
-  margin-top: var(--space-6x);
+  @apply mt-6;
 }
 
 .container p {
-  color: var(--gray-700);
   max-width: 640px;
   margin-bottom: 0;
+  @apply text-gray-700;
 }
 
 .container button,
 .container a {
   width: 100%;
-  margin-top: var(--space-4x);
+  @apply mt-4;
 }
 
 .container > p + a,
 .container > p + button {
-  margin-top: var(--space-6x);
+  @apply mt-6;
 }
 
 .container h1 > img {
-  margin-right: var(--space-2x);
-  height: var(--space-6x);
-  width: var(--space-6x);
+  @apply mr-2 h-6 w-6;
 }
 
 .container h1 button {
-  margin-top: var(--space-6x);
+  @apply mt-6;
 }
 
 .container h1 a {
@@ -35,13 +33,13 @@
 }
 
 .container p a {
-  color: var(--blue-600);
   text-decoration: none;
+  @apply text-blue-600;
 }
 
 @media screen and (min-width: 768px) {
   .container {
-    margin-top: var(--space-12x);
+    @apply mt-12;
   }
   .container h1 {
     display: flex;
@@ -62,7 +60,6 @@
 
   .container > p + a,
   .container > p + button {
-    margin-right: var(--space-4x);
-    margin-top: var(--space-4x);
+    @apply mx-4;
   }
 }
diff --git a/src/styles/cl-design-system/hexAddress.module.css b/src/styles/design-system/hexAddress.module.css
similarity index 75%
rename from src/styles/cl-design-system/hexAddress.module.css
rename to src/styles/design-system/hexAddress.module.css
index c42b887bc..9b922e590 100644
--- a/src/styles/cl-design-system/hexAddress.module.css
+++ b/src/styles/design-system/hexAddress.module.css
@@ -3,10 +3,10 @@
 */
 .value-large span {
   font-size: 1rem;
-  color: var(--color-text-value);
+  @apply text-value;
 }
 .value span {
-  color: var(--color-text-value);
+  @apply text-value;
 }
 
 .link-large a {
diff --git a/src/styles/cl-design-system/input-validation.module.css b/src/styles/design-system/input-validation.module.css
similarity index 56%
rename from src/styles/cl-design-system/input-validation.module.css
rename to src/styles/design-system/input-validation.module.css
index fb6af8c56..d737a8226 100644
--- a/src/styles/cl-design-system/input-validation.module.css
+++ b/src/styles/design-system/input-validation.module.css
@@ -1,8 +1,7 @@
 .error {
-  margin-top: var(--space-2x);
-  /* margin-bottom: var(--space-6x); */
   display: flex;
   align-items: center;
+  @apply mt-2;
 }
 
 .error img {
@@ -12,5 +11,5 @@
 .invalid,
 input.invalid,
 textarea.invalid {
-  border-color: var(--red-600);
+  @apply border-red-600;
 }
diff --git a/src/styles/cl-design-system/package.json b/src/styles/design-system/package.json
similarity index 100%
rename from src/styles/cl-design-system/package.json
rename to src/styles/design-system/package.json
diff --git a/src/styles/cl-design-system/statusIndicator.module.css b/src/styles/design-system/statusIndicator.module.css
similarity index 83%
rename from src/styles/cl-design-system/statusIndicator.module.css
rename to src/styles/design-system/statusIndicator.module.css
index bd6b0e9d3..1424d3a84 100644
--- a/src/styles/cl-design-system/statusIndicator.module.css
+++ b/src/styles/design-system/statusIndicator.module.css
@@ -4,6 +4,6 @@
 
 .container {
   display: flex;
-  min-height: var(--space-6x);
   align-items: center;
+  @apply min-h-[24px];
 }
diff --git a/src/styles/cl-design-system/tokens/0_xs.css b/src/styles/design-system/tokens/0_xs.css
similarity index 100%
rename from src/styles/cl-design-system/tokens/0_xs.css
rename to src/styles/design-system/tokens/0_xs.css
diff --git a/src/styles/cl-design-system/tokens/1_sm.css b/src/styles/design-system/tokens/1_sm.css
similarity index 100%
rename from src/styles/cl-design-system/tokens/1_sm.css
rename to src/styles/design-system/tokens/1_sm.css
diff --git a/src/styles/cl-design-system/tokens/2_md.css b/src/styles/design-system/tokens/2_md.css
similarity index 100%
rename from src/styles/cl-design-system/tokens/2_md.css
rename to src/styles/design-system/tokens/2_md.css
diff --git a/src/styles/cl-design-system/tokens/3_lg.css b/src/styles/design-system/tokens/3_lg.css
similarity index 100%
rename from src/styles/cl-design-system/tokens/3_lg.css
rename to src/styles/design-system/tokens/3_lg.css
diff --git a/src/styles/cl-design-system/tokens/4_xl.css b/src/styles/design-system/tokens/4_xl.css
similarity index 100%
rename from src/styles/cl-design-system/tokens/4_xl.css
rename to src/styles/design-system/tokens/4_xl.css
diff --git a/src/styles/cl-design-system/tokens/all.css b/src/styles/design-system/tokens/all.css
similarity index 100%
rename from src/styles/cl-design-system/tokens/all.css
rename to src/styles/design-system/tokens/all.css
diff --git a/src/styles/cl-design-system/tokens/background.css b/src/styles/design-system/tokens/background.css
similarity index 100%
rename from src/styles/cl-design-system/tokens/background.css
rename to src/styles/design-system/tokens/background.css
diff --git a/src/styles/cl-design-system/tokens/border.css b/src/styles/design-system/tokens/border.css
similarity index 100%
rename from src/styles/cl-design-system/tokens/border.css
rename to src/styles/design-system/tokens/border.css
diff --git a/src/styles/cl-design-system/tokens/fill.css b/src/styles/design-system/tokens/fill.css
similarity index 100%
rename from src/styles/cl-design-system/tokens/fill.css
rename to src/styles/design-system/tokens/fill.css
diff --git a/src/styles/cl-design-system/tokens/shadow.css b/src/styles/design-system/tokens/shadow.css
similarity index 100%
rename from src/styles/cl-design-system/tokens/shadow.css
rename to src/styles/design-system/tokens/shadow.css
diff --git a/src/styles/cl-design-system/tokens/typography.css b/src/styles/design-system/tokens/typography.css
similarity index 100%
rename from src/styles/cl-design-system/tokens/typography.css
rename to src/styles/design-system/tokens/typography.css
diff --git a/src/styles/cl-design-system/values/all.css b/src/styles/design-system/values/all.css
similarity index 100%
rename from src/styles/cl-design-system/values/all.css
rename to src/styles/design-system/values/all.css
diff --git a/src/styles/cl-design-system/values/colors.css b/src/styles/design-system/values/colors.css
similarity index 100%
rename from src/styles/cl-design-system/values/colors.css
rename to src/styles/design-system/values/colors.css
diff --git a/src/styles/cl-design-system/values/font.css b/src/styles/design-system/values/font.css
similarity index 100%
rename from src/styles/cl-design-system/values/font.css
rename to src/styles/design-system/values/font.css
diff --git a/src/styles/cl-design-system/values/space.css b/src/styles/design-system/values/space.css
similarity index 100%
rename from src/styles/cl-design-system/values/space.css
rename to src/styles/design-system/values/space.css
diff --git a/src/styles/index.css b/src/styles/index.css
index f977ea063..d354a9d84 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,5 +1,7 @@
 /* Starter file. Has to be replaced with styles from design-system */
 
+@tailwind utilities;
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -55,17 +57,17 @@ nav ul {
 }
 
 :where(a) {
-  color: var(--color-text-link);
   text-decoration: none;
   align-items: center;
   gap: 0.3rem;
+  @apply text-link;
 }
 
 :where(a:hover) {
-  color: var(--color-text-link-hover);
+  @apply text-link-hover;
 }
 :where(a:focus) {
-  color: var(--color-text-link-clicked);
+  @apply text-link-pressed;
 }
 article > section :is(ul, ol) > * + * {
   margin-top: 0.75rem;
@@ -98,7 +100,7 @@ article > section nav {
 
 article > section ::marker {
   font-weight: bold;
-  color: var(--theme-text-light);
+  @apply text-light;
 }
 
 article > section iframe {
@@ -125,9 +127,9 @@ article > section iframe {
 
 a > code {
   position: relative;
-  color: var(--theme-text-accent);
   background: transparent;
   text-underline-offset: var(--padding-block);
+  @apply text-accent;
 }
 
 a > code::before {
@@ -138,9 +140,8 @@ a > code::before {
   bottom: 0;
   left: 0;
   display: block;
-  background: var(--theme-accent);
-  opacity: var(--theme-accent-opacity);
   border-radius: var(--border-radius);
+  @apply bg-accent opacity-accent;
 }
 
 a:focus {
@@ -163,14 +164,13 @@ strong {
   --padding-block: 0.1rem;
   --padding-inline: 0.33rem;
 
-  font-family: var(--font-mono);
   font-size: 0.85em;
   color: inherit;
-  background-color: var(--theme-code-inline-bg);
   padding: var(--padding-block) var(--padding-inline);
   margin: calc(var(--padding-block) * -1) -0.125em;
   border-radius: var(--border-radius);
   word-break: break-word;
+  @apply font-mono bg-code-inline-bg;
 }
 
 pre.astro-code > code {
@@ -190,12 +190,12 @@ pre {
   padding-right: calc(var(--padding-inline) * 2);
   margin-left: calc(var(--padding-inline) * -1);
   margin-right: calc(var(--padding-inline) * -1);
-  font-family: var(--font-mono);
 
   line-height: 1.5;
   font-size: 0.85em;
   overflow-y: hidden;
   overflow-x: auto;
+  @apply font-mono;
 }
 
 table {
@@ -203,22 +203,18 @@ table {
   padding: var(--padding-block) 0;
   margin: 0;
   border-collapse: collapse;
-  color: var(--color-text-primary);
-  font-family: var(--font-family-text);
   background: #fff;
-  border: 1px solid var(--color-border-primary);
   line-height: 2;
+  @apply text-primary font-text border-[1px] border-solid border-border-primary;
 }
 
 table thead tr {
-  font-family: var(--font-family-text);
   line-height: 2.2;
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-heading);
+  @apply font-text font-medium text-heading;
 }
 
 table tbody tr {
-  border-top: 1px solid var(--color-border-primary);
+  @apply border-0 border-t-[1px] border-solid border-border-primary;
 }
 
 table code {
@@ -237,12 +233,11 @@ th {
 }
 
 pre {
-  background-color: var(--theme-code-bg);
-  color: var(--theme-code-text);
+  @apply text-code-text bg-code-bg;
 }
 
 blockquote code {
-  background-color: var(--theme-bg);
+  @apply bg-bg;
 }
 
 @media (min-width: 37.75em) {
@@ -257,10 +252,9 @@ blockquote code {
 blockquote {
   margin: 2rem 0;
   padding: 1.25em 1.5rem;
-  border-left: 3px solid var(--theme-text-light);
-  background-color: var(--theme-bg-offset);
   border-radius: 0 0.25rem 0.25rem 0;
   line-height: 1.7;
+  @apply border-0 border-l-[3px] border-solid border-light bg-bg-offset;
 }
 
 img {
@@ -269,7 +263,7 @@ img {
 
 .flex {
   display: flex;
-  align-items: center;
+  /* align-items: center; */
 }
 
 h2.heading {
@@ -283,18 +277,17 @@ h2.heading {
 .header-link {
   font-size: 1rem;
   padding: 0.1rem 0 0.1rem 1rem;
-  border-left: 4px solid var(--theme-divider);
+  @apply border-0 border-l-[4px] border-solid border-divider;
 }
 
 .header-link.active,
 .header-link:hover,
 .header-link:focus {
-  border-left-color: var(--theme-accent);
-  color: var(--theme-accent);
+  @apply border-l-accent text-accent;
 }
 .header-link:focus-within {
-  color: var(--theme-text-light);
   border-left-color: hsla(var(--color-gray-40), 1);
+  @apply text-light;
 }
 .header-link svg {
   opacity: 0.6;
diff --git a/src/styles/migrated.css b/src/styles/migrated.css
index 7ee31b526..bcb2b5e9e 100644
--- a/src/styles/migrated.css
+++ b/src/styles/migrated.css
@@ -1,61 +1,30 @@
 /* Callout buttons for Remix and other redirects*/
 /* Applies to the first button, then applies different style to n+2 buttons */
-.remix-callout {
-  display: inline-flex;
-  flex-wrap: wrap;
-  margin-bottom: 0.5em;
-}
+@tailwind utilities;
 
-.remix-callout > a:nth-of-type(1) {
-  padding: 8px;
-  padding-left: 20px;
-  padding-right: 20px;
-  border: 2px solid #375bd2;
-  margin: 0px 6px;
-  border-radius: 6px;
-  box-sizing: border-box;
-  text-decoration: none !important;
-  color: #ffffff;
-  background-color: #375bd2;
-  text-align: center;
-  transition: all 0.2s;
-}
+@layer utilities {
+  .remix-callout {
+    @apply inline-flex flex-wrap mb-[0.5em];
+  }
 
-.remix-callout > a:nth-of-type(1):hover {
-  color: #ffffff;
-  background-color: #1a2b6b;
-  border: 2px solid #0c162c;
-}
+  .remix-callout > a:nth-of-type(1),
+  .remix-callout > a:nth-of-type(n + 2) {
+    @apply p-2 px-5 border-2 border-solid border-blue-600 my-0 mx-[8px] rounded-[8px] box-border text-white bg-blue-600 text-center transition-all duration-200;
+  }
 
-.remix-callout > a:nth-of-type(1):active {
-  color: #ffffff;
-  background-color: #0c162c;
-  border: 2px solid #0c162c;
-}
+  .remix-callout > a:nth-of-type(1):hover {
+    @apply text-white border-2 border-solid border-gray-900 bg-blue-800;
+  }
 
-.remix-callout > a:nth-of-type(n + 2) {
-  padding: 8px;
-  padding-left: 20px;
-  padding-right: 20px;
-  border: 2px solid #375bd2;
-  margin: 0px 6px;
-  border-radius: 6px;
-  box-sizing: border-box;
-  text-decoration: none !important;
-  color: #375bd2;
-  background-color: #ffffff;
-  text-align: center;
-  transition: all 0.2s;
-}
+  .remix-callout > a:nth-of-type(1):active {
+    @apply text-white border-2 border-solid border-gray-900 bg-gray-900;
+  }
 
-.remix-callout > a:nth-of-type(n + 2):hover {
-  color: #1a2b6b;
-  background-color: #f5f7fd;
-  border: 2px solid #1a2b6b;
-}
+  .remix-callout > a:nth-of-type(n + 2):hover {
+    @apply text-blue-800  bg-blue-100 border-2 border-solid border-blue-800;
+  }
 
-.remix-callout > a:nth-of-type(n + 2):active {
-  color: #0c162c;
-  background-color: #f5f7fd;
-  border: 2px solid #0c162c;
+  .remix-callout > a:nth-of-type(n + 2):active {
+    @apply text-gray-900  bg-blue-100 border-2 border-solid border-gray-900;
+  }
 }
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index f5368a76a..b5a7a9a1b 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,8 +1,175 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    screens: {
+      xs: "375px",
+      sm: "480px",
+      md: "768px",
+      lg: "992px",
+      xl: "1200px",
+    },
+    extend: {
+      borderRadius: {
+        primary: "var(--border-radius-primary)" /* Inputs, Buttons */,
+        secondary: "var(--border-radius-secondary)" /* Cards */,
+        reset: "var(--border-radius-reset)" /* Border reset */,
+        round: "var(--border-radius-round)" /* Rounded icon buttons*/,
+      },
+      borderWidth: {
+        "w-primary": "var(--border-width-primary)" /* Inputs */,
+        "w-secondary": "var(--border-width-secondary)" /* Buttons */,
+        "w-reset": "var(--border-width-reset)" /* Border reset */,
+      },
+      colors: {
+        blue: {
+          100: "var(--blue-100)",
+          200: "var(--blue-200)",
+          300: "var(--blue-300)",
+          400: "var(--blue-400)",
+          500: "var(--blue-500)",
+          600: "var(--blue-600)",
+          700: "var(--blue-700)",
+          800: "var(--blue-800)",
+          900: "var(--blue-900)",
+        },
+        gray: {
+          100: "var(--gray-100)",
+          200: "var(--gray-200)",
+          300: "var(--gray-300)",
+          400: "var(--gray-400)",
+          500: "var(--gray-500)",
+          600: "var(--gray-600)",
+          700: "var(--gray-700)",
+          800: "var(--gray-800)",
+          900: "var(--gray-900)",
+        },
+        green: {
+          100: "var(--green-100)",
+          200: "var(--green-200)",
+          300: "var(--green-300)",
+          400: "var(--green-400)",
+          500: "var(--green-500)",
+          600: "var(--green-600)",
+          700: "var(--green-700)",
+          800: "var(--green-800)",
+          900: "var(--green-900)",
+        },
+        orange: {
+          100: "var(--orange-100)",
+          200: "var(--orange-200)",
+          300: "var(--orange-300)",
+          400: "var(--orange-400)",
+          500: "var(--orange-500)",
+          600: "var(--orange-600)",
+          700: "var(--orange-700)",
+          800: "var(--orange-800)",
+          900: "var(--orange-900)",
+        },
+        purple: {
+          100: "var(--purple-100)",
+          200: "var(--purple-200)",
+          300: "var(--purple-300)",
+          400: "var(--purple-400)",
+          500: "var(--purple-500)",
+          600: "var(--purple-600)",
+          700: "var(--purple-700)",
+          800: "var(--purple-800)",
+          900: "var(--purple-900)",
+        },
+        red: {
+          100: "var(--red-100)",
+          200: "var(--red-200)",
+          300: "var(--red-300)",
+          400: "var(--red-400)",
+          500: "var(--red-500)",
+          600: "var(--red-600)",
+          700: "var(--red-700)",
+          800: "var(--red-800)",
+          900: "var(--red-900)",
+        },
+        yellow: {
+          100: "var(--yellow-100)",
+          200: "var(--yellow-200)",
+          300: "var(--yellow-300)",
+          400: "var(--yellow-400)",
+          500: "var(--yellow-500)",
+          600: "var(--yellow-600)",
+          700: "var(--yellow-700)",
+          800: "var(--yellow-800)",
+          900: "var(--yellow-900)",
+        },
+        primary: "var(--color-text-primary)",
+        secondary: "var(--color-text-secondary)",
+        heading: "var(--color-text-heading)",
+        error: "var(--color-text-error)",
+        warning: "var(--color-text-warning)",
+        success: "var(--color-text-success)",
+        info: "var(--color-text-info)",
+        contrast: "var(--color-text-contrast)",
+        link: "var(--color-text-link)",
+        "link-hover": "var(--color-text-link-hover)",
+        "link-pressed": "var(--color-text-link-pressed)",
+        disabled: "var(--color-text-disabled)",
+        placeholder: "var(--color-text-placeholder)",
+        value: "var(--color-text-value)",
+        label: "var(--color-text-label)",
+        text: "var(--theme-text)",
+        accent: "var(--theme-text-accent)",
+        light: "var(--theme-text-light)",
+        lighter: "var(--theme-text-lighter)",
+        bg: "var(--theme-bg)",
+        "bg-hover": "var(--theme-bg-hover)",
+        "bg-offset": "var(--theme-bg-offset)",
+        "bg-accent": "var(--theme-bg-accent)",
+        divider: "var(--theme-divider)",
+        accent: "var(--theme-accent)",
+        "code-text": "var(--theme-code-text)",
+        "code-bg": "var(--theme-code-bg)",
+        "background-primary": "var(--color-background-primary)",
+        "background-secondary": "var(--color-background-secondary)",
+        "background-error": "var(--color-background-error)",
+        "background-contrast": "var(--color-background-contrast)",
+        "background-warning": "var(--color-background-warning)",
+        "background-success": "var(--color-background-success)",
+        "background-info": "var(--color-background-info)",
+        "background-disabled": "var(--color-background-disabled)",
+        "code-inline-bg": "var(--theme-code-inline-bg)",
+        "border-primary": "var(--color-border-primary)",
+        "border-secondary": "var(--color-border-secondary)",
+        "border-contrast": "var(--color-border-contrast)",
+        "border-interactive": "var(--color-border-interactive)",
+        "border-disabled": "var(--color-border-disabled)",
+        "border-separator": "var(--color-border-separator)",
+        "interactive-focus": "var(--color-border-interactive-focus)",
+        "interactive-hover": "var(--color-border-interactive-hover)",
+        "interactive-pressed": "var(--color-border-interactive-pressed)",
+        "interactive-error": "var(--color-border-interactive-error)",
+      },
+      fontFamily: {
+        text: "var(--font-family-text)",
+        code: "var(--font-family-code)",
+        mono: "var(--font-family-code)",
+      },
+      fontWeight: {
+        normal: "var(--font-weight-normal)",
+        medium: "var(--font-weight-medium)",
+        bold: "var(--font-weight-bold)",
+      },
+      height: {
+        navbar: "var(--theme-navbar-height)",
+      },
+      margin: {
+        navbar: "var(--theme-navbar-height)",
+      },
+      opacity: {
+        accent: "var(--theme-accent-opacity)",
+      },
+      padding: {
+        modal: "var(--modal-padding)",
+        doc: "var(--doc-padding)",
+      },
+    },
+  },
+  plugins: [],
 }