diff --git a/.prettierignore b/.prettierignore
index bcc212213e..f8dfafd431 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -5,4 +5,7 @@ src/pages/**/*.md
 examples/**/README.md
 
 # Fixture files should not be formatted by Prettier
-data/onPostBuild/__fixtures__/*.mdx
\ No newline at end of file
+data/onPostBuild/__fixtures__/*.mdx
+
+# Vendored @ably/ui design tokens, reset and component CSS (DX-1128) - do not reformat
+src/styles/ui/
diff --git a/src/styles/global.css b/src/styles/global.css
index 3a407f6c3b..f17c58f5fa 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,12 +2,12 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-@import '@ably/ui/reset/styles.css';
-@import '@ably/ui/core/styles.css';
-@import '@ably/ui/core/Slider/component.css';
-@import '@ably/ui/core/Code/component.css';
-@import '@ably/ui/core/Flash/component.css';
-@import '@ably/ui/core/utils/syntax-highlighter.css';
+@import './ui/reset/styles.css';
+@import './ui/core/styles.css';
+@import './ui/core/Slider/component.css';
+@import './ui/core/Code/component.css';
+@import './ui/core/Flash/component.css';
+@import './ui/core/utils/syntax-highlighter.css';
 
 :root {
   --top-nav-height: 64px;
diff --git a/src/styles/ui/core/Code/component.css b/src/styles/ui/core/Code/component.css
new file mode 100644
index 0000000000..29a84c3efa
--- /dev/null
+++ b/src/styles/ui/core/Code/component.css
@@ -0,0 +1 @@
+@import "../utils/syntax-highlighter.css";
diff --git a/src/styles/ui/core/Flash/component.css b/src/styles/ui/core/Flash/component.css
new file mode 100644
index 0000000000..0900ddf571
--- /dev/null
+++ b/src/styles/ui/core/Flash/component.css
@@ -0,0 +1,28 @@
+@layer components {
+  .ui-flash {
+    @apply w-full fixed;
+    top: 5.5rem;
+    z-index: calc(var(--stacking-context-page-meganav) - 10);
+    transition: margin-top 200ms;
+  }
+
+  .ui-flash-message {
+    @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-2 opacity-0 relative;
+    transition:
+      opacity 200ms,
+      transform 200ms,
+      height 200ms 200ms,
+      margin-top 200ms 200ms;
+    transform: translateY(-200%) rotateX(-90deg);
+  }
+
+  /* dynamic content inside flash, can't add classes */
+  .ui-flash-text a {
+    @apply underline;
+  }
+
+  .ui-flash-message-enter {
+    @apply opacity-100;
+    transform: translateY(0) rotateX(0);
+  }
+}
diff --git a/src/styles/ui/core/Slider/component.css b/src/styles/ui/core/Slider/component.css
new file mode 100644
index 0000000000..165c8ebbbe
--- /dev/null
+++ b/src/styles/ui/core/Slider/component.css
@@ -0,0 +1,40 @@
+@layer components {
+  .ui-slider-marker {
+    font-size: 0.5rem;
+    top: -1px;
+
+    @apply leading-none px-1 relative;
+  }
+
+  @keyframes fillAnimation {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+
+  .ui-icon-cta {
+    @apply cursor-pointer overflow-hidden;
+    @apply rounded border-2 border-mid-grey hover:border-active-orange;
+    transition: all 0.4s;
+  }
+
+  @screen sm {
+    .ui-icon-cta-left:hover .ui-icon-cta-holder {
+      transform: translateX(-100%);
+    }
+    .ui-icon-cta-right .ui-icon-cta-holder {
+      transform: translateX(-100%);
+    }
+    .ui-icon-cta-right:hover .ui-icon-cta-holder {
+      transform: translateX(0%);
+    }
+  }
+
+  .ui-icon-cta-holder {
+    @apply w-full h-full;
+    transition: all 0.4s;
+  }
+}
diff --git a/src/styles/ui/core/styles.base.css b/src/styles/ui/core/styles.base.css
new file mode 100644
index 0000000000..ba4b59f3a0
--- /dev/null
+++ b/src/styles/ui/core/styles.base.css
@@ -0,0 +1 @@
+@import "./styles/properties.css";
diff --git a/src/styles/ui/core/styles.components.css b/src/styles/ui/core/styles.components.css
new file mode 100644
index 0000000000..a5157c8043
--- /dev/null
+++ b/src/styles/ui/core/styles.components.css
@@ -0,0 +1,67 @@
+@import "./styles/utils.css";
+@import "./styles/buttons.css";
+@import "./styles/legacy-buttons.css";
+@import "./styles/dropdowns.css";
+@import "./styles/forms.css";
+@import "./styles/layout.css";
+@import "./styles/shadows.css";
+@import "./styles/text.css";
+
+@layer components {
+  /* Basis for icon component */
+  .ui-icon-cool-black {
+    stroke: var(--color-cool-black);
+  }
+
+  .ui-icon-white {
+    stroke: var(--color-white);
+  }
+
+  .ui-icon-dark-grey {
+    stroke: var(--color-dark-grey);
+  }
+
+  .ui-version-tag {
+    @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
+
+    position: relative;
+    vertical-align: super;
+    margin-left: 3px;
+    font-size: 8px;
+  }
+
+  .ui-section-spacing {
+    @apply my-20 sm:my-24 md:my-32;
+  }
+
+  /* The *-collapse classes remove the spacing between adjacent .ui-section-spacing classes,
+     in a way that handles margin collapsing as well (hence not an exact opposite) */
+  .ui-section-spacing-collapse,
+  .ui-section-spacing-collapse-full {
+    @apply -my-4 sm:-my-8 md:-my-16 first:-mb-8 sm:first:-mb-16 md:first:-mb-32 last:-mt-8 sm:last:-mt-16 md:last:-mt-32;
+  }
+
+  .ui-section-spacing-collapse-half {
+    @apply -my-2 sm:-my-4 md:-my-8 first:-mb-4 sm:first:-mb-8 md:first:-mb-16 last:-mt-4 sm:last:-mt-8 md:last:-mt-16;
+  }
+
+  .ui-section-spacing-collapse-quarter {
+    @apply -my-1 sm:-my-2 md:-my-4 first:-mb-2 sm:first:-mb-4 md:first:-mb-8 last:-mt-2 sm:last:-mt-4 md:last:-mt-8;
+  }
+
+  .ui-section-spacing-collapse-eighth {
+    @apply -my-0.5 sm:-my-1 md:-my-2 first:-mb-1 sm:first:-mb-2 md:first:-mb-4 last:-mt-1 sm:last:-mt-2 md:last:-mt-4;
+  }
+
+  .ui-content-spacing {
+    @apply my-10 sm:my-12 md:my-16;
+  }
+
+  .ui-divider-spacing {
+    @apply my-5 sm:my-6 md:my-8;
+  }
+
+  .ui-container-padding {
+    @apply px-6 py-10 sm:px-10 sm:py-12 md:p-16;
+  }
+}
diff --git a/src/styles/ui/core/styles.css b/src/styles/ui/core/styles.css
new file mode 100644
index 0000000000..ca8ba904e8
--- /dev/null
+++ b/src/styles/ui/core/styles.css
@@ -0,0 +1,2 @@
+@import "./styles.base.css";
+@import "./styles.components.css";
diff --git a/src/styles/ui/core/styles/buttons.css b/src/styles/ui/core/styles/buttons.css
new file mode 100644
index 0000000000..f755d9f38a
--- /dev/null
+++ b/src/styles/ui/core/styles/buttons.css
@@ -0,0 +1,133 @@
+@layer components {
+  .ui-button-base {
+    @apply inline-flex rounded justify-center items-center gap-3 text-neutral-000 transition-colors focus-base;
+  }
+
+  .ui-button-lg-base {
+    @apply ui-button-base ui-text-label1 font-bold h-14 px-7 py-[1.0625rem] gap-3 [&>svg]:!w-6 [&>svg]:!h-6;
+  }
+
+  .ui-button-md-base {
+    @apply ui-button-base ui-text-label2 font-bold h-12 px-6 py-[0.8125rem] gap-2.5 [&>svg]:!w-6 [&>svg]:!h-6;
+  }
+
+  .ui-button-sm-base {
+    @apply ui-button-base ui-text-label3 font-bold h-10 px-5 py-2.5 gap-2 [&>svg]:!w-5 [&>svg]:!h-5;
+  }
+
+  .ui-button-xs-base {
+    @apply ui-button-base ui-text-label4 font-bold h-9 px-3 py-[0.5625rem] gap-1.5 [&>svg]:!w-4 [&>svg]:!h-4;
+  }
+
+  .ui-button-disabled-base {
+    @apply disabled:cursor-not-allowed disabled:bg-gui-unavailable disabled:text-gui-unavailable-dark disabled:hover:bg-gui-unavailable;
+  }
+
+  .ui-button-disabled-base-dark {
+    @apply disabled:cursor-not-allowed disabled:bg-gui-unavailable-dark disabled:text-gui-unavailable disabled:hover:bg-gui-unavailable-dark;
+  }
+
+  .ui-button-priority-base {
+    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000 active:text-neutral-000 transition-[background-position] disabled:bg-none ui-button-disabled-base;
+  }
+
+  .ui-theme-dark .ui-button-priority-base {
+    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000 active:text-neutral-000 transition-[background-position] disabled:bg-none ui-button-disabled-base-dark;
+  }
+
+  .ui-button-primary-base {
+    @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1100 active:bg-neutral-1200 active:text-neutral-300 ui-button-disabled-base;
+  }
+
+  .ui-theme-dark .ui-button-primary-base {
+    @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-200 active:bg-neutral-100 active:text-neutral-1000 ui-button-disabled-base-dark;
+  }
+
+  .ui-button-secondary-base {
+    @apply text-neutral-1300 active:text-neutral-1000 border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 disabled:border-gui-unavailable disabled:text-gui-unavailable;
+  }
+
+  .ui-theme-dark .ui-button-secondary-base {
+    @apply text-neutral-000 active:text-neutral-300 border-neutral-900 hover:border-neutral-700 active:border-neutral-800 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
+  }
+
+  .ui-button-priority-lg {
+    @apply ui-button-lg-base ui-button-priority-base;
+  }
+
+  .ui-button-priority {
+    @apply ui-button-md-base ui-button-priority-base;
+  }
+
+  .ui-button-priority-sm {
+    @apply ui-button-sm-base ui-button-priority-base;
+  }
+
+  .ui-button-priority-xs {
+    @apply ui-button-xs-base ui-button-priority-base;
+  }
+
+  .ui-button-primary-lg {
+    @apply ui-button-lg-base ui-button-primary-base;
+  }
+
+  .ui-button-primary {
+    @apply ui-button-md-base ui-button-primary-base;
+  }
+
+  .ui-button-primary-sm {
+    @apply ui-button-sm-base ui-button-primary-base;
+  }
+
+  .ui-button-primary-xs {
+    @apply ui-button-xs-base ui-button-primary-base;
+  }
+
+  .ui-button-secondary-lg {
+    @apply ui-button-lg-base ui-button-secondary-base;
+  }
+
+  .ui-button-secondary {
+    @apply ui-button-md-base ui-button-secondary-base;
+  }
+
+  .ui-button-secondary-sm {
+    @apply ui-button-sm-base ui-button-secondary-base;
+  }
+
+  .ui-button-secondary-xs {
+    @apply ui-button-xs-base ui-button-secondary-base;
+  }
+
+  .ui-button-lg-left-icon {
+    @apply pl-6;
+  }
+
+  .ui-button-left-icon {
+    @apply pl-5;
+  }
+
+  .ui-button-sm-left-icon {
+    @apply pl-[1.125rem];
+  }
+
+  .ui-button-lg-right-icon {
+    @apply pr-6;
+  }
+
+  .ui-button-right-icon {
+    @apply pr-5;
+  }
+
+  .ui-button-sm-right-icon {
+    @apply pr-[1.125rem];
+  }
+
+  .ui-button-disabled {
+    @apply select-none pointer-events-none bg-gui-unavailable text-gui-unavailable-dark hover:bg-gui-unavailable;
+  }
+
+  .ui-theme-dark .ui-button-disabled {
+    @apply select-none pointer-events-none bg-gui-unavailable-dark text-gui-unavailable hover:bg-gui-unavailable-dark;
+  }
+}
diff --git a/src/styles/ui/core/styles/dropdowns.css b/src/styles/ui/core/styles/dropdowns.css
new file mode 100644
index 0000000000..85b835d48f
--- /dev/null
+++ b/src/styles/ui/core/styles/dropdowns.css
@@ -0,0 +1,49 @@
+@layer components {
+  .ui-dropdown-base {
+    @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-4 pr-14 appearance-none select-none focus-base;
+    @apply bg-no-repeat text-p2 flex font-medium bg-neutral-100 transition-colors;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
+    background-position: center right 16px;
+  }
+
+  .ui-theme-dark .ui-dropdown-base {
+    @apply text-neutral-000 bg-neutral-1200 border-neutral-900 hover:border-neutral-700 active:border-neutral-800;
+  }
+
+  .ui-dropdown-base option:disabled {
+    @apply text-neutral-800;
+  }
+
+  .ui-dropdown {
+    @apply ui-dropdown-base py-3;
+  }
+
+  .ui-dropdown-small {
+    @apply ui-dropdown-base py-2.5 text-[14px];
+  }
+
+  /* Special wrapper styles for overriding default Select2 functionality */
+  .ui-dropdown-select2-wrapper .select2 {
+    @apply !w-full;
+  }
+
+  .ui-dropdown-select2-wrapper .select2-selection {
+    @apply ui-dropdown-small;
+  }
+
+  .ui-dropdown-select2-wrapper .select2-selection--single {
+    @apply !h-auto;
+  }
+
+  .ui-dropdown-select2-wrapper .select2-selection__rendered {
+    @apply !leading-relaxed !px-0;
+  }
+
+  .ui-dropdown-select2-wrapper .select2-selection__arrow {
+    @apply hidden;
+  }
+
+  .ui-dropdown-dark {
+    @apply text-neutral-300 bg-neutral-1200 border-neutral-800;
+  }
+}
diff --git a/src/styles/ui/core/styles/forms.css b/src/styles/ui/core/styles/forms.css
new file mode 100644
index 0000000000..c661005b1a
--- /dev/null
+++ b/src/styles/ui/core/styles/forms.css
@@ -0,0 +1,161 @@
+@layer components {
+  .ui-checkbox-p1 {
+    @apply flex items-start mb-4 font-sans font-medium;
+  }
+
+  .ui-checkbox-p2 {
+    @apply flex items-start mb-3 font-sans font-medium;
+  }
+
+  .ui-checkbox-input {
+    @apply opacity-0 absolute h-5 w-5;
+  }
+
+  .ui-checkbox-styled {
+    @apply w-5 h-5 mr-4;
+    @apply bg-white flex flex-shrink-0 justify-center items-center;
+    @apply border border-neutral-500 rounded-md focus-within:border-active-orange;
+  }
+
+  .ui-theme-dark .ui-checkbox-styled,
+  .ui-theme-dark .ui-checkbox-input:focus + .ui-checkbox-styled {
+    @apply bg-neutral-1300 border-neutral-900;
+  }
+
+  .ui-checkbox-styled-tick {
+    @apply hidden text-white;
+  }
+
+  .ui-checkbox-label-p1 {
+    @apply select-none;
+    @apply text-p1 font-medium text-neutral-1300;
+  }
+
+  .ui-checkbox-label-p2 {
+    @apply select-none;
+    @apply text-p2 font-medium text-neutral-1300;
+  }
+
+  .ui-theme-dark .ui-checkbox-label-p1,
+  .ui-theme-dark .ui-checkbox-label-p2 {
+    @apply text-neutral-000;
+  }
+
+  .ui-checkbox-input:focus + .ui-checkbox-styled {
+    border-width: 0.125rem;
+    @apply border-gui-focus;
+  }
+
+  .ui-checkbox-input:checked + .ui-checkbox-styled {
+    @apply bg-active-orange border-dark-grey border;
+  }
+
+  .ui-checkbox-input:checked + .ui-checkbox-styled svg {
+    @apply block;
+  }
+
+  .ui-checkbox-input:disabled + .ui-checkbox-styled {
+    @apply bg-neutral-300;
+  }
+
+  .ui-theme-dark .ui-checkbox-input:disabled + .ui-checkbox-styled {
+    @apply bg-neutral-1000 border border-gui-unavailable-dark;
+  }
+
+  .ui-theme-dark .ui-checkbox-input:checked + .ui-checkbox-styled {
+    @apply bg-active-orange border-gui-unavailable-dark;
+  }
+
+  .ui-textarea {
+    @apply font-sans font-medium text-cool-black text-p1;
+    @apply p-input mb-4;
+    @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
+    @apply hover:bg-white hover:shadow-input hover:border-transparent;
+    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-none focus-visible:outline-gui-focus;
+  }
+
+  .ui-textarea::placeholder {
+    /* CSS vars don't work in ::placeholder in Webkit :( */
+    /* color: var(--text-dark-grey); */
+    color: #76767c;
+  }
+
+  .ui-toggle {
+    @apply h-8 w-14 rounded-full relative inline-block;
+  }
+
+  .ui-toggle:has(:disabled) {
+    @apply pointer-events-none;
+  }
+
+  .ui-toggle input {
+    @apply w-0 h-0 opacity-0;
+  }
+
+  .ui-toggle-slider {
+    @apply absolute cursor-pointer inset-0 transition-all bg-neutral-600 rounded-full;
+  }
+
+  .ui-theme-dark .ui-toggle-slider {
+    @apply bg-neutral-700;
+  }
+
+  .ui-toggle-slider:before {
+    @apply absolute h-7 w-7 left-0.5 bottom-0.5 bg-white rounded-full transition-transform drop-shadow-toggle;
+    content: "";
+  }
+
+  .ui-toggle input:checked + .ui-toggle-slider {
+    @apply bg-orange-600;
+  }
+
+  .ui-toggle input:disabled + .ui-toggle-slider {
+    @apply bg-gui-unavailable;
+  }
+
+  .ui-toggle input:checked + .ui-toggle-slider:before {
+    @apply translate-x-6;
+  }
+
+  .ui-toggle input:disabled + .ui-toggle-slider:before {
+    @apply bg-neutral-500;
+  }
+
+  .ui-input {
+    @apply ui-text-p2 font-medium bg-neutral-100 rounded p-input w-full leading-none appearance-none border border-neutral-400 transition-colors placeholder-neutral-600;
+    @apply hover:border-neutral-700 focus:bg-white focus-base;
+    @apply max-w-screen-sm invalid:border-gui-error-red;
+  }
+
+  .ui-theme-dark .ui-input {
+    @apply bg-neutral-1200 hover:bg-neutral-1000 focus:bg-neutral-1000 text-neutral-300 border-neutral-900 placeholder-neutral-700 invalid:border-gui-error-red;
+  }
+
+  .ui-input:disabled {
+    @apply bg-gui-unavailable placeholder-neutral-500 text-neutral-500;
+  }
+
+  .ui-theme-dark .ui-input:disabled {
+    @apply bg-gui-unavailable-dark text-neutral-800 placeholder-neutral-800;
+  }
+
+  .ui-radio {
+    @apply border border-neutral-600 w-5 h-5 appearance-none cursor-pointer rounded-full focus-base;
+  }
+
+  .ui-radio:checked {
+    @apply bg-orange-600 border-orange-600 border;
+  }
+
+  .ui-radio:checked::after {
+    @apply content-[''] mt-[0.3125rem] w-2 h-2 block bg-white rounded-full m-auto;
+  }
+
+  .ui-radio:disabled {
+    @apply bg-neutral-300;
+  }
+
+  .ui-theme-dark .ui-radio:disabled {
+    @apply bg-neutral-1000;
+  }
+}
diff --git a/src/styles/ui/core/styles/layout.css b/src/styles/ui/core/styles/layout.css
new file mode 100644
index 0000000000..d21bccbed7
--- /dev/null
+++ b/src/styles/ui/core/styles/layout.css
@@ -0,0 +1,29 @@
+@layer components {
+  .ui-standard-container {
+    @apply w-full max-w-screen-xl mx-auto px-6 sm:px-8 md:px-10 lg:px-16;
+  }
+
+  .ui-grid-gap {
+    @apply gap-2 sm:gap-4 md:gap-6 xl:gap-8;
+  }
+
+  .ui-grid-gap-x {
+    @apply gap-x-2 sm:gap-x-4 md:gap-x-6 xl:gap-x-8;
+  }
+
+  .ui-grid-px {
+    @apply px-6 sm:px-8 md:px-10 lg:px-16;
+  }
+
+  .ui-grid-mx {
+    @apply mx-6 sm:mx-8 md:mx-10 lg:mx-16;
+  }
+
+  .ui-full-borderless-container-override {
+    @apply w-[625rem] ml-[calc(50%-5000px)];
+  }
+
+  .ui-full-container-override {
+    @apply ml-[calc(-50vw+50%)] !px-0 w-screen;
+  }
+}
diff --git a/src/styles/ui/core/styles/legacy-buttons.css b/src/styles/ui/core/styles/legacy-buttons.css
new file mode 100644
index 0000000000..295187c8fc
--- /dev/null
+++ b/src/styles/ui/core/styles/legacy-buttons.css
@@ -0,0 +1,95 @@
+@layer components {
+  .ui-btn {
+    @apply text-white bg-cool-black text-label2 font-sans font-bold inline-block rounded p-btn;
+    @apply hover:text-white hover:bg-neutral-1100;
+    @apply active:text-white active:bg-neutral-1200;
+    @apply focus:text-white focus:bg-cool-black focus-base;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-alt {
+    transition: background-position 0.2s;
+    background: linear-gradient(
+      61.2deg,
+      var(--color-active-orange) 5%,
+      #fe5215 19%,
+      #fc4a13 27%,
+      #f73c10 33%,
+      #f1280a 39%,
+      #e90f04 44%,
+      var(--color-red-orange) 50%
+    );
+    background-size: 200% 100%;
+    background-position: 0% 0%;
+
+    @apply text-white text-label2 font-sans font-bold inline-block rounded p-btn;
+    @apply focus-base;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-alt:hover,
+  .ui-btn-alt:focus {
+    background-position: 100% 0%;
+  }
+
+  .ui-btn-alt:disabled {
+    background: linear-gradient(var(--gradient-transparent));
+    @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
+  }
+
+  .ui-btn-invert {
+    @apply text-cool-black bg-white text-label2 font-sans font-bold inline-block rounded p-btn;
+    @apply hover:text-white hover:bg-active-orange;
+    @apply active:text-white active:bg-red-orange;
+    @apply focus:text-white focus:bg-cool-black focus-base;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-secondary {
+    @apply text-cool-black bg-white text-label2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
+    @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
+    @apply active:border-red-orange active:bg-white;
+    @apply focus:border-cool-black focus:bg-white focus-base;
+    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
+    @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-secondary-invert {
+    @apply text-white bg-cool-black text-label2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
+    @apply hover:text-white hover:border-active-orange;
+    @apply active:border-red-orange;
+    @apply focus-base;
+    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-icon {
+    @apply w-6 h-6 mr-4;
+  }
+
+  .ui-btn-icon-small {
+    @apply w-5 h-5 mr-3;
+  }
+
+  .ui-btn-icon-xsmall {
+    @apply w-4 h-4 mr-2;
+  }
+  .ui-btn.ui-btn-disabled,
+  .ui-btn-invert.ui-btn-disabled {
+    @apply text-mid-grey bg-gui-unavailable cursor-not-allowed pointer-events-none select-none;
+  }
+
+  .ui-btn-secondary.ui-btn-disabled {
+    @apply text-gui-unavailable border-gui-unavailable bg-white cursor-not-allowed pointer-events-none select-none;
+  }
+
+  .ui-btn-secondary-invert.ui-btn-disabled {
+    @apply text-gui-unavailable border-gui-unavailable cursor-not-allowed pointer-events-none select-none;
+  }
+}
diff --git a/src/styles/ui/core/styles/properties.css b/src/styles/ui/core/styles/properties.css
new file mode 100644
index 0000000000..b462ff9599
--- /dev/null
+++ b/src/styles/ui/core/styles/properties.css
@@ -0,0 +1,272 @@
+@layer base {
+  :root {
+    /* Neutral colors */
+    --color-neutral-000: #ffffff;
+    --color-neutral-100: #f6f8fa;
+    --color-neutral-200: #eef1f6;
+    --color-neutral-300: #e6eaf0;
+    --color-neutral-400: #e2e7ef;
+    --color-neutral-500: #c6ced9;
+    --color-neutral-600: #a7b1be;
+    --color-neutral-700: #8992a4;
+    --color-neutral-800: #687288;
+    --color-neutral-900: #575d71;
+    --color-neutral-1000: #3f4555;
+    --color-neutral-1100: #2c3344;
+    --color-neutral-1200: #141924;
+    --color-neutral-1300: #03020d;
+
+    /* Ably orange */
+    --color-orange-100: #fff5f1;
+    --color-orange-200: #ffe3d8;
+    --color-orange-300: #ffc4ae;
+    --color-orange-400: #ff9c79;
+    --color-orange-500: #ff723f;
+    --color-orange-600: #ff5416;
+    --color-orange-700: #ff2739;
+    --color-orange-800: #e40000;
+    --color-orange-900: #b82202;
+    --color-orange-1000: #751500;
+    --color-orange-1100: #2a0b00;
+
+    /* Secondary colours */
+    --color-yellow-100: #fffbef;
+    --color-yellow-200: #fff0ba;
+    --color-yellow-300: #ffe27c;
+    --color-yellow-400: #ffd43d;
+    --color-yellow-500: #f8c100;
+    --color-yellow-600: #e8a700;
+    --color-yellow-700: #ac8600;
+    --color-yellow-800: #654f00;
+    --color-yellow-900: #291c01;
+    --color-green-100: #f1fff1;
+    --color-green-200: #b8ffbb;
+    --color-green-300: #80ff85;
+    --color-green-400: #08ff13;
+    --color-green-500: #00e80b;
+    --color-green-600: #00c008;
+    --color-green-700: #008e06;
+    --color-green-800: #005303;
+    --color-green-900: #002a02;
+    --color-blue-100: #f1fbff;
+    --color-blue-200: #b8eaff;
+    --color-blue-300: #80d9ff;
+    --color-blue-400: #4ad4ff;
+    --color-blue-500: #2cc0ff;
+    --color-blue-600: #00a5ec;
+    --color-blue-700: #0284cd;
+    --color-blue-800: #004b75;
+    --color-blue-900: #001b2a;
+    --color-violet-100: #f7f2fe;
+    --color-violet-200: #d8bcfb;
+    --color-violet-300: #b986f8;
+    --color-violet-400: #9951f5;
+    --color-violet-500: #7a1bf2;
+    --color-violet-600: #5f0bc9;
+    --color-violet-700: #460894;
+    --color-violet-800: #2d055e;
+    --color-violet-900: #130228;
+    --color-pink-100: #fff1fc;
+    --color-pink-200: #ffb8f1;
+    --color-pink-300: #ff80e6;
+    --color-pink-400: #ff47db;
+    --color-pink-500: #ff17d2;
+    --color-pink-600: #d400ab;
+    --color-pink-700: #9c007e;
+    --color-pink-800: #630050;
+    --color-pink-900: #2a0022;
+
+    /* GUI colours */
+    /* Note: The ‘Light and ‘Dark’ refers to the colour of the background on which the colour is used. */
+    --color-gui-blue-default-light: #006edc;
+    --color-gui-blue-hover-light: #0862b9;
+    --color-gui-blue-active-light: #074095;
+    --color-gui-blue-default-dark: #4da6ff;
+    --color-gui-blue-hover-dark: #2894ff;
+    --color-gui-blue-active-dark: #0080ff;
+    --color-gui-blue-focus: #80b9f2;
+    --color-gui-unavailable: #AFB9C5;
+    --color-gui-unavailable-dark: #676B7A;
+    --color-gui-disabled-light: #AFB9C5;
+    --color-gui-disabled-dark: #676B7A;
+    --color-gui-success-green: #11cb24;
+    --color-gui-error-red: #fb0c0c;
+    --color-gui-focus: #80b9f2;
+    --color-gui-focus-outline: #80b9f2;
+    --color-gui-visited: #4887c2;
+
+    /* Colours replaced by neutral colours */
+    --color-white: var(--color-neutral-000);
+    --color-extra-light-grey: var(--color-neutral-100);
+    --color-light-grey: var(--color-neutral-200);
+    --color-mid-grey: var(--color-neutral-500);
+    --color-dark-grey: var(--color-neutral-800);
+    --color-charcoal-grey: var(--color-neutral-1000);
+    --color-cool-black: var(--color-neutral-1300);
+
+    /* Colours replaced by orange colours */
+    --color-active-orange: var(--color-orange-600);
+    --color-bright-red: var(--color-orange-700);
+    --color-red-orange: var(--color-orange-800);
+
+    /* Colours replaced by secondary colours */
+    --color-electric-cyan: var(--color-blue-400);
+    --color-zingy-green: var(--color-green-400);
+    --color-jazzy-pink: var(--color-pink-500);
+
+    /* Colours replaced by GUI colours */
+    --color-gui-default: var(--color-gui-blue-default-light);
+    --color-gui-hover: var(--color-gui-blue-hover-light);
+    --color-gui-active: var(--color-gui-blue-active-light);
+    --color-gui-error: var(--color-gui-error-red);
+    --color-gui-success: var(--color-gui-success-green);
+    --color-gui-default-dark: var(--color-gui-blue-default-dark);
+    --color-gui-hover-dark: var(--color-gui-blue-hover-dark);
+    --color-gui-active-dark: var(--color-gui-blue-active-dark);
+
+    /* flat colors for social icons */
+    --icon-color-linkedin: #1269bf;
+    --icon-color-twitter: #2caae1;
+    --icon-color-glassdoor: #0baa41;
+    --icon-color-github: #000000;
+    --icon-color-discord: #5865f2;
+    --icon-color-stackoverflow: #f48024;
+    --icon-color-youtube: #ff0000;
+
+    --gradient-active-orange: linear-gradient(
+      61.2deg,
+      var(--color-active-orange) 10.46%,
+      #fe5215 38.63%,
+      #fc4a13 54.38%,
+      #f73c10 67.07%,
+      #f1280a 78.13%,
+      #e90f04 88.02%,
+      var(--color-red-orange) 92.73%
+    );
+
+    --gradient-priority-button: linear-gradient(
+      61.2deg,
+      var(--color-active-orange) 5%,
+      #fe5215 19%,
+      #fc4a13 27%,
+      #f73c10 33%,
+      #f1280a 39%,
+      #e90f04 44%,
+      var(--color-orange-800) 50%
+    );
+
+    /* Used for smooth transitions from gradient to non-gradient backgrounds */
+    --gradient-transparent: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0)
+    );
+
+    --gradient-hot-pink: linear-gradient(
+      80.2deg,
+      var(--color-orange-700) 0%,
+      var(--color-jazzy-pink) 100%
+    );
+
+    --fs-title-xl: 3rem;
+    --fs-title: 2.75rem;
+    --fs-title-xs: 2.5rem;
+    --fs-h1-xl: 2.5rem;
+    --fs-h1: 2.25rem;
+    --fs-h1-xs: 2rem;
+
+    --fs-h2-xl: 2.125rem;
+    --fs-h2: 2rem;
+    --fs-h2-xs: 1.75rem;
+
+    --fs-h3: 1.5rem;
+    --fs-h4: 1.25rem;
+    --fs-h5: 1rem;
+
+    --fs-p1: 1rem;
+    --fs-p2: 0.938rem;
+    --fs-p3: 0.875rem;
+    --fs-p4: 0.813rem;
+    --fs-standfirst-xl: 2.25rem;
+    --fs-standfirst: 1.5rem;
+    --fs-sub-header: 1.125rem;
+    --fs-sub-header-xs: 1.063rem;
+    --fs-overline1: 0.875rem;
+    --fs-overline2: 0.75rem;
+    --fs-label1: 1rem;
+    --fs-label2: 0.938rem;
+    --fs-label3: 0.875rem;
+    --fs-label4: 0.813rem;
+    --fs-quote: 1.25rem;
+    --fs-code: 0.813rem;
+    --fs-code2: 0.688rem;
+
+    --lh-none: 1;
+    --lh-dense: 1.125;
+    --lh-min-normal: 1.2;
+    --lh-snug: 1.4;
+    --lh-relaxed: 1.6;
+
+    --ls-tighten-0_025: -0.025em;
+    --ls-tighten-0_02: -0.02em;
+    --ls-tighten-0_015: -0.015em;
+    --ls-tighten-0_01: -0.01em;
+    --ls-tighten-0_005: -0.005em;
+    --ls-tighten-0_0025: -0.0025em;
+    --ls-tighten-0_0015: -0.0015em;
+    --ls-widen-0_1: 0.1em;
+    --ls-widen-0_16: 0.16em;
+    --ls-widen-0_15: 0.15em;
+    --ls-widen-0_04: 0.04em;
+
+    --spacing-0: 0px;
+    --spacing-1: 1px;
+    --spacing-2: 0.125rem;
+    --spacing-4: 0.25rem;
+    --spacing-6: 0.375rem;
+    --spacing-8: 0.5rem;
+    --spacing-12: 0.75rem;
+    --spacing-14: 0.875rem;
+    --spacing-16: 1rem;
+    --spacing-20: 1.25rem;
+    --spacing-24: 1.5rem;
+    --spacing-32: 2rem;
+    --spacing-36: 2.25rem;
+    --spacing-40: 2.5rem;
+    --spacing-48: 3rem;
+    --spacing-64: 4rem;
+    --spacing-72: 4.5rem;
+    --spacing-80: 5rem;
+    --spacing-88: 5.5rem;
+    --spacing-96: 6rem;
+    --spacing-128: 8rem;
+    --spacing-160: 10rem;
+    --spacing-256: 16rem;
+
+    --spacing-btn-small: 0.875rem 1.25rem; /* 14px 16px */
+    --spacing-btn-xsmall: 0.875rem 1rem; /* 14px 16px */
+    --spacing-btn: 0.875rem 1.5rem; /* 14px 24px */
+    --spacing-btn-large: 0.875rem 1.75rem; /* 14px 28px */
+    --spacing-menu-row: 0.625rem 0.5rem 0.6875rem; /* 10px 8px 11px */
+    --spacing-menu-row-snug: 0.4375rem 0.5rem 0.375rem; /* 7px 8px 6px */
+    --spacing-menu-row-title: 0.6875rem 0.5rem; /* 11px 8px */
+    --spacing-media: 0.5rem; /* 8px */
+    --spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */
+    --spacing-overline: 0.6875rem 0; /* 11px 0 */
+
+    /* In components, when looking at implementing viewport margin and spacing between elements,
+       the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
+       alternatively, look for ui-grid-* helpers. */
+    --bp-xs: 428px; /* gutters 8px, side-margin 24px */
+    --bp-sm: 768px; /* gutters 16px, side-margin 32px */
+    --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
+    --bp-lg: 1280px; /* gutters 24px, side-margin 64px */
+    --bp-xl: 1440px; /* gutters 32px, side-margin 64px */
+
+    /* Page stacking context. If components create new stacking contexts z-index values should be defined within them. */
+    --stacking-context-page-meganav: 100;
+
+    /* Expose component values for cross-component usage */
+    --ui-meganav-height: 4rem;
+  }
+}
diff --git a/src/styles/ui/core/styles/shadows.css b/src/styles/ui/core/styles/shadows.css
new file mode 100644
index 0000000000..cb9da2c69c
--- /dev/null
+++ b/src/styles/ui/core/styles/shadows.css
@@ -0,0 +1,136 @@
+@layer components {
+  .ui-shadow-xs-soft {
+    box-shadow:
+      0px 13.699px 3.805px 0px rgba(3, 2, 13, 0),
+      0px 9.133px 3.805px 0px rgba(3, 2, 13, 0.01),
+      0px 5.327px 3.044px 0px rgba(3, 2, 13, 0.03),
+      0px 2.283px 2.283px 0px rgba(3, 2, 13, 0.05),
+      0px 0.761px 1.522px 0px rgba(3, 2, 13, 0.06);
+  }
+
+  .ui-shadow-sm-soft {
+    box-shadow:
+      0px 32.725px 9.133px 0px rgba(3, 2, 13, 0),
+      0px 21.309px 8.371px 0px rgba(3, 2, 13, 0.01),
+      0px 12.177px 6.849px 0px rgba(3, 2, 13, 0.03),
+      0px 5.327px 5.327px 0px rgba(3, 2, 13, 0.05),
+      0px 1.522px 3.044px 0px rgba(3, 2, 13, 0.06);
+  }
+
+  .ui-shadow-md-soft {
+    box-shadow:
+      0px 105.024px 29.681px 0px rgba(3, 2, 13, 0),
+      0px 66.972px 26.637px 0px rgba(3, 2, 13, 0.01),
+      0px 38.052px 22.831px 0px rgba(3, 2, 13, 0.02),
+      0px 16.743px 16.743px 0px rgba(3, 2, 13, 0.03),
+      0px 4.566px 9.133px 0px rgba(3, 2, 13, 0.04);
+  }
+
+  .ui-shadow-lg-soft {
+    box-shadow:
+      0px 200.915px 56.317px 0px rgba(20, 25, 36, 0),
+      0px 128.616px 51.751px 0px rgba(20, 25, 36, 0.01),
+      0px 72.299px 43.379px 0px rgba(20, 25, 36, 0.02),
+      0px 31.964px 31.964px 0px rgba(20, 25, 36, 0.03),
+      0px 8.371px 17.504px 0px rgba(20, 25, 36, 0.04);
+  }
+
+  .ui-shadow-xl-soft {
+    box-shadow:
+      0px 210.048px 58.6px 0px rgba(20, 25, 36, 0),
+      0px 134.705px 54.034px 0px rgba(20, 25, 36, 0.01),
+      0px 75.343px 45.663px 0px rgba(20, 25, 36, 0.03),
+      0px 33.486px 33.486px 0px rgba(20, 25, 36, 0.04),
+      0px 8.371px 18.265px 0px rgba(20, 25, 36, 0.05);
+  }
+
+  .ui-shadow-xs-medium {
+    box-shadow:
+      0px 14px 4px 0px rgba(3, 2, 13, 0),
+      0px 9px 4px 0px rgba(3, 2, 13, 0.02),
+      0px 5px 3px 0px rgba(3, 2, 13, 0.08),
+      0px 2px 2px 0px rgba(3, 2, 13, 0.14),
+      0px 1px 1px 0px rgba(3, 2, 13, 0.16);
+  }
+
+  .ui-shadow-sm-medium {
+    box-shadow:
+      0px 33px 9px 0px rgba(3, 2, 13, 0),
+      0px 21px 8px 0px rgba(3, 2, 13, 0.02),
+      0px 12px 7px 0px rgba(3, 2, 13, 0.08),
+      0px 5px 5px 0px rgba(3, 2, 13, 0.14),
+      0px 1px 3px 0px rgba(3, 2, 13, 0.16);
+  }
+
+  .ui-shadow-md-medium {
+    box-shadow:
+      0px 105px 29px 0px rgba(3, 2, 13, 0),
+      0px 67px 27px 0px rgba(3, 2, 13, 0.02),
+      0px 38px 23px 0px rgba(3, 2, 13, 0.06),
+      0px 17px 17px 0px rgba(3, 2, 13, 0.1),
+      0px 4px 9px 0px rgba(3, 2, 13, 0.12);
+  }
+
+  .ui-shadow-lg-medium {
+    box-shadow:
+      0px 201px 56px 0px rgba(20, 25, 36, 0),
+      0px 129px 51px 0px rgba(20, 25, 36, 0.02),
+      0px 72px 43px 0px rgba(20, 25, 36, 0.06),
+      0px 32px 32px 0px rgba(20, 25, 36, 0.1),
+      0px 8px 18px 0px rgba(20, 25, 36, 0.12);
+  }
+
+  .ui-shadow-xl-medium {
+    box-shadow:
+      0px 210px 59px 0px rgba(20, 25, 36, 0),
+      0px 134px 54px 0px rgba(20, 25, 36, 0.02),
+      0px 76px 45px 0px rgba(20, 25, 36, 0.08),
+      0px 34px 34px 0px rgba(20, 25, 36, 0.13),
+      0px 8px 18px 0px rgba(20, 25, 36, 0.15);
+  }
+
+  .ui-shadow-xs-strong {
+    box-shadow:
+      0px 14px 4px 0px rgba(3, 2, 13, 0.01),
+      0px 9px 4px 0px rgba(3, 2, 13, 0.09),
+      0px 5px 3px 0px rgba(3, 2, 13, 0.3),
+      0px 2px 2px 0px rgba(3, 2, 13, 0.51),
+      0px 1px 1px 0px rgba(3, 2, 13, 0.59);
+  }
+
+  .ui-shadow-sm-strong {
+    box-shadow:
+      0px 49px 14px 0px rgba(3, 2, 13, 0.01),
+      0px 32px 13px 0px rgba(3, 2, 13, 0.09),
+      0px 18px 11px 0px rgba(3, 2, 13, 0.3),
+      0px 8px 8px 0px rgba(3, 2, 13, 0.51),
+      0px 2px 4px 0px rgba(3, 2, 13, 0.59);
+  }
+
+  .ui-shadow-md-strong {
+    box-shadow:
+      0px 105px 29px 0px rgba(3, 2, 13, 0.01),
+      0px 67px 27px 0px rgba(3, 2, 13, 0.09),
+      0px 38px 23px 0px rgba(3, 2, 13, 0.3),
+      0px 17px 17px 0px rgba(3, 2, 13, 0.51),
+      0px 4px 9px 0px rgba(3, 2, 13, 0.59);
+  }
+
+  .ui-shadow-lg-strong {
+    box-shadow:
+      0px 201px 56px 0px rgba(0, 0, 0, 0.01),
+      0px 129px 51px 0px rgba(0, 0, 0, 0.08),
+      0px 72px 43px 0px rgba(0, 0, 0, 0.28),
+      0px 32px 32px 0px rgba(0, 0, 0, 0.47),
+      0px 8px 18px 0px rgba(0, 0, 0, 0.54);
+  }
+
+  .ui-shadow-xl-strong {
+    box-shadow:
+      0px 210px 59px 0px rgba(0, 0, 0, 0.01),
+      0px 134px 54px 0px rgba(0, 0, 0, 0.09),
+      0px 76px 45px 0px rgba(0, 0, 0, 0.3),
+      0px 34px 34px 0px rgba(0, 0, 0, 0.51),
+      0px 8px 18px 0px rgba(0, 0, 0, 0.59);
+  }
+}
diff --git a/src/styles/ui/core/styles/text.css b/src/styles/ui/core/styles/text.css
new file mode 100644
index 0000000000..0682ae6c8b
--- /dev/null
+++ b/src/styles/ui/core/styles/text.css
@@ -0,0 +1,176 @@
+@layer components {
+  .ui-text-title {
+    @apply font-sans font-bold text-cool-black;
+    @apply text-title-xs xs:text-title xl:text-title-xl;
+    @apply tracking-[-0.015em] xs:tracking-[-0.02em] xl:tracking-[-0.02em];
+  }
+
+  .ui-text-h1 {
+    @apply font-sans font-bold text-cool-black;
+    @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
+    @apply tracking-[-0.0125em] xs:tracking-[-0.015em];
+  }
+
+  .ui-text-h2 {
+    @apply font-sans font-bold text-cool-black;
+    @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
+    @apply tracking-[-0.015em] xs:tracking-[-0.01em];
+  }
+
+  .ui-text-h3 {
+    @apply font-sans font-bold text-cool-black;
+    @apply text-h3;
+    @apply tracking-[-0.005em];
+  }
+
+  .ui-text-h4 {
+    @apply font-sans font-bold text-cool-black;
+    @apply text-h4;
+    @apply tracking-[-0.0015em];
+  }
+
+  .ui-text-h5 {
+    @apply font-sans font-bold text-cool-black;
+    @apply text-h5;
+    @apply tracking-[-0.0025em];
+  }
+
+  .ui-text-p1 {
+    @apply font-sans font-medium text-charcoal-grey text-p1;
+  }
+
+  .ui-text-p2 {
+    @apply font-sans font-medium text-charcoal-grey text-p2;
+  }
+
+  .ui-text-p3 {
+    @apply font-sans font-medium text-charcoal-grey text-p3;
+  }
+
+  .ui-text-p4 {
+    @apply font-sans font-medium text-charcoal-grey text-p4;
+  }
+
+  .ui-text-standfirst {
+    @apply font-sans font-light text-active-orange;
+    @apply text-standfirst xl:text-standfirst-xl;
+    @apply tracking-tight xl:tracking-[-0.015em];
+  }
+
+  .ui-text-quote {
+    @apply font-sans font-normal text-cool-black;
+    @apply text-quote leading-normal;
+    @apply tracking-[-0.0015em];
+  }
+
+  .ui-text-sub-header {
+    @apply font-sans font-semibold text-neutral-800;
+    @apply text-sub-header-xs xs:text-sub-header leading-normal;
+  }
+
+  .ui-text-overline1 {
+    @apply font-mono font-medium text-active-orange uppercase;
+    @apply text-overline1 leading-normal;
+    @apply tracking-[0.16em];
+  }
+
+  .ui-text-overline2 {
+    @apply font-mono font-medium text-active-orange uppercase;
+    @apply text-overline2 leading-normal;
+    @apply tracking-[0.16em];
+  }
+
+  .ui-text-label1 {
+    @apply font-sans text-neutral-900 text-label1 font-semibold;
+  }
+
+  .ui-text-label2 {
+    @apply font-sans text-neutral-900 text-label2 font-semibold;
+  }
+
+  .ui-text-label3 {
+    @apply font-sans text-neutral-900 text-label3 font-semibold;
+  }
+
+  .ui-text-label4 {
+    @apply font-sans text-neutral-900 text-label4 font-semibold;
+  }
+
+  .ui-theme-dark .ui-text-label1,
+  .ui-theme-dark .ui-text-label2,
+  .ui-theme-dark .ui-text-label3,
+  .ui-theme-dark .ui-text-label4 {
+    @apply text-neutral-300;
+  }
+
+  .ui-text-code {
+    @apply font-mono font-normal text-code;
+  }
+
+  .ui-text-code2 {
+    @apply font-mono font-normal text-code2;
+  }
+
+  .ui-text-code-inline {
+    @apply inline-flex font-mono px-[0.1875rem] py-1 text-code text-neutral-1000 font-medium bg-neutral-200 border border-neutral-400 rounded-md;
+  }
+
+  .dark .ui-text-code-inline {
+    @apply text-neutral-300 bg-neutral-1000 border-neutral-900;
+  }
+
+  .ui-unordered-list {
+    @apply text-p1 font-medium text-charcoal-grey;
+    @apply ml-8 my-4;
+    @apply list-disc;
+  }
+
+  .ui-ordered-list {
+    @apply text-p1 font-medium text-charcoal-grey;
+    @apply ml-8 my-4;
+    @apply list-decimal;
+  }
+
+  .ui-ordered-list li,
+  .ui-unordered-list li {
+    @apply mb-2;
+  }
+
+  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
+  .ui-ordered-list li > *:last-of-type:not(ul):not(ol) {
+    margin-bottom: 0;
+  }
+
+  .ui-unordered-list ul {
+    @apply ml-6 my-2 list-circle;
+  }
+
+  .ui-ordered-list ol {
+    @apply ml-6 my-4 list-decimal;
+  }
+
+  .ui-unordered-list ul ul {
+    @apply list-square my-2;
+  }
+
+  .ui-unordered-list ul ul {
+    @apply my-2;
+  }
+
+  .ui-link {
+    @apply text-gui-default;
+    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
+    @apply focus:text-gui-default focus-base;
+    @apply no-underline;
+  }
+
+  .ui-link-neutral {
+    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
+    @apply focus:text-charcoal-grey focus-base;
+    @apply underline;
+  }
+
+  .ui-figcaption {
+    @apply font-mono text-p3 text-neutral-800;
+  }
+}
diff --git a/src/styles/ui/core/styles/utils.css b/src/styles/ui/core/styles/utils.css
new file mode 100644
index 0000000000..e2e9df68e3
--- /dev/null
+++ b/src/styles/ui/core/styles/utils.css
@@ -0,0 +1,3 @@
+.focus-base {
+  @apply focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-focus;
+}
diff --git a/src/styles/ui/core/utils/syntax-highlighter.css b/src/styles/ui/core/utils/syntax-highlighter.css
new file mode 100644
index 0000000000..f8c1a05d27
--- /dev/null
+++ b/src/styles/ui/core/utils/syntax-highlighter.css
@@ -0,0 +1,162 @@
+/* Light theme for code blocks pulled from highlight.js directly*/
+@import "highlight.js/styles/github.min.css";
+
+/* Dark theme for code blocks pulled from highlight.js and manually prefixed with ui-theme-dark */
+@layer components {
+  /*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+
+  .ui-theme-dark .hljs {
+    color: #c9d1d9;
+    background: #0d1117;
+  }
+
+  .ui-theme-dark .hljs-doctag,
+  .ui-theme-dark .hljs-keyword,
+  .ui-theme-dark .hljs-meta .hljs-keyword,
+  .ui-theme-dark .hljs-template-tag,
+  .ui-theme-dark .hljs-template-variable,
+  .ui-theme-dark .hljs-type,
+  .ui-theme-dark .hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #ff7b72;
+  }
+
+  .ui-theme-dark .hljs-title,
+  .ui-theme-dark .hljs-title.class_,
+  .ui-theme-dark .hljs-title.class_.inherited__,
+  .ui-theme-dark .hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #d2a8ff;
+  }
+
+  .ui-theme-dark .hljs-attr,
+  .ui-theme-dark .hljs-attribute,
+  .ui-theme-dark .hljs-literal,
+  .ui-theme-dark .hljs-meta,
+  .ui-theme-dark .hljs-number,
+  .ui-theme-dark .hljs-operator,
+  .ui-theme-dark .hljs-variable,
+  .ui-theme-dark .hljs-selector-attr,
+  .ui-theme-dark .hljs-selector-class,
+  .ui-theme-dark .hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #79c0ff;
+  }
+
+  .ui-theme-dark .hljs-regexp,
+  .ui-theme-dark .hljs-string,
+  .ui-theme-dark .hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #a5d6ff;
+  }
+
+  .ui-theme-dark .hljs-built_in,
+  .ui-theme-dark .hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #ffa657;
+  }
+
+  .ui-theme-dark .hljs-comment,
+  .ui-theme-dark .hljs-code,
+  .ui-theme-dark .hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #8b949e;
+  }
+
+  .ui-theme-dark .hljs-name,
+  .ui-theme-dark .hljs-quote,
+  .ui-theme-dark .hljs-selector-tag,
+  .ui-theme-dark .hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #7ee787;
+  }
+
+  .ui-theme-dark .hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #c9d1d9;
+  }
+
+  .ui-theme-dark .hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #1f6feb;
+    font-weight: bold;
+  }
+
+  .ui-theme-dark .hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #f2cc60;
+  }
+
+  .ui-theme-dark .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #c9d1d9;
+    font-style: italic;
+  }
+
+  .ui-theme-dark .hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #c9d1d9;
+    font-weight: bold;
+  }
+
+  .ui-theme-dark .hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #aff5b4;
+    background-color: #033a16;
+  }
+
+  .ui-theme-dark .hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #ffdcd7;
+    background-color: #67060c;
+  }
+
+  .ui-theme-dark .hljs-char.escape_,
+  .ui-theme-dark .hljs-link,
+  .ui-theme-dark .hljs-params,
+  .ui-theme-dark .hljs-property,
+  .ui-theme-dark .hljs-punctuation,
+  .ui-theme-dark .hljs-tag {
+    /* purposely ignored */
+  }
+
+  /* Line highlighting styles – rail + subtle tint */
+  .code-line-addition {
+    background-color: var(--color-green-100);
+    box-shadow: inset 3px 0 0 var(--color-green-400);
+  }
+
+  .code-line-removal {
+    background-color: var(--color-orange-100);
+    box-shadow: inset 3px 0 0 var(--color-gui-error-red);
+  }
+
+  .code-line-highlight {
+    background-color: var(--color-yellow-100);
+    box-shadow: inset 3px 0 0 var(--color-yellow-400);
+  }
+
+  .ui-theme-dark .code-line-addition {
+    background-color: var(--color-green-900);
+    box-shadow: inset 3px 0 0 var(--color-green-600);
+  }
+
+  .ui-theme-dark .code-line-removal {
+    background-color: var(--color-orange-1100);
+    box-shadow: inset 3px 0 0 var(--color-gui-error-red);
+  }
+
+  .ui-theme-dark .code-line-highlight {
+    background-color: var(--color-yellow-900);
+    box-shadow: inset 3px 0 0 var(--color-yellow-600);
+  }
+}
diff --git a/src/styles/ui/reset/styles.css b/src/styles/ui/reset/styles.css
new file mode 100644
index 0000000000..7810f8c948
--- /dev/null
+++ b/src/styles/ui/reset/styles.css
@@ -0,0 +1,2 @@
+@import "./styles/normalize.css";
+@import "./styles/reset.css";
diff --git a/src/styles/ui/reset/styles/normalize.css b/src/styles/ui/reset/styles/normalize.css
new file mode 100644
index 0000000000..c6a6478163
--- /dev/null
+++ b/src/styles/ui/reset/styles/normalize.css
@@ -0,0 +1,353 @@
+@layer base {
+  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+  /* Document
+   ========================================================================== */
+
+  /**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+  html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+
+  /* Sections
+   ========================================================================== */
+
+  /**
+ * Remove the margin in all browsers.
+ */
+
+  body {
+    margin: 0;
+  }
+
+  /**
+ * Render the `main` element consistently in IE.
+ */
+
+  main {
+    display: block;
+  }
+
+  /**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+  /* Grouping content
+   ========================================================================== */
+
+  /**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+
+  /**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /* Text-level semantics
+   ========================================================================== */
+
+  /**
+ * Remove the gray background on active links in IE 10.
+ */
+
+  a {
+    background-color: transparent;
+  }
+
+  /**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+
+  /**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /**
+ * Add the correct font size in all browsers.
+ */
+
+  small {
+    font-size: 80%;
+  }
+
+  /**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /* Embedded content
+   ========================================================================== */
+
+  /**
+ * Remove the border on images inside links in IE 10.
+ */
+
+  img {
+    border-style: none;
+  }
+
+  /* Forms
+   ========================================================================== */
+
+  /**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+
+  /**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+  button,
+  input {
+    /* 1 */
+    overflow: visible;
+  }
+
+  /**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+  button,
+  select {
+    /* 1 */
+    text-transform: none;
+  }
+
+  /**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+
+  /**
+ * Remove the inner border and padding in Firefox.
+ */
+
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  /**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  /**
+ * Correct the padding in Firefox.
+ */
+
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  /**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+
+  /**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+  textarea {
+    overflow: auto;
+  }
+
+  /**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  /**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  /**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  /* Interactive
+   ========================================================================== */
+
+  /*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+  details {
+    display: block;
+  }
+
+  /*
+ * Add the correct display in all browsers.
+ */
+
+  summary {
+    display: list-item;
+  }
+
+  /* Misc
+   ========================================================================== */
+
+  /**
+ * Add the correct display in IE 10+.
+ */
+
+  template {
+    display: none;
+  }
+
+  /**
+ * Add the correct display in IE 10.
+ */
+
+  [hidden] {
+    display: none;
+  }
+}
diff --git a/src/styles/ui/reset/styles/reset.css b/src/styles/ui/reset/styles/reset.css
new file mode 100644
index 0000000000..1e7591ecb7
--- /dev/null
+++ b/src/styles/ui/reset/styles/reset.css
@@ -0,0 +1,135 @@
+/* Reset based on https://unpkg.com/tailwindcss@1.9.6/dist/base.css */
+@layer base {
+  html {
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Noto Sans",
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji";
+    line-height: 1.5;
+  }
+
+  blockquote,
+  dl,
+  dd,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  figure,
+  p,
+  pre {
+    margin: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  fieldset {
+    margin: 0;
+    padding: 0;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  pre,
+  code,
+  kbd,
+  samp {
+    font-family:
+      Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  button {
+    background-color: transparent;
+    background-image: none;
+  }
+
+  button:focus {
+    outline: 1px dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: #e2e8f0;
+  }
+
+  hr {
+    border-top-width: 1px;
+  }
+
+  img {
+    border-style: solid;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  input:-ms-input-placeholder,
+  textarea:-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  input::-ms-input-placeholder,
+  textarea::-ms-input-placeholder {
+    color: #a0aec0;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: #a0aec0;
+  }
+
+  input::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  button,
+  [role="button"] {
+    cursor: pointer;
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index d9620ed5c2..31320c0db9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,25 +1,265 @@
-const extendConfig = require('@ably/ui/tailwind.extend.js');
-
-module.exports = extendConfig((ablyUIConfig) => ({
-  ...ablyUIConfig,
+// docs design tokens — originally @ably/ui's Tailwind theme, now owned locally
+// (DX-1128). gui-disabled-* alias gui-unavailable for the disabled-state classes.
+module.exports = {
   content: [
     './src/pages/docs/*.{ts,tsx}',
     './src/components/**/*.{ts,tsx}',
     './src/templates/**/*.{ts,tsx}',
-    ...ablyUIConfig.content,
+    './node_modules/@ably/ui/core/**/*.{js,json}',
   ],
+  safelist: [{ pattern: /^hljs.*/ }],
+  darkMode: ['selector', '.ui-theme-dark'],
   theme: {
-    ...ablyUIConfig.theme,
+    screens: {
+      xs: '428px',
+      sm: '768px',
+      md: '1040px',
+      lg: '1280px',
+      xl: '1440px',
+    },
+    fontFamily: {
+      sans_next: ['NEXT Book', 'Arial', 'Helvetica', 'sans-serif'],
+      serif: ['ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
+      mono_source_code: ['Source Code Pro', 'Courier', 'monospace'],
+      sans: [
+        'Manrope',
+        'ui-sans-serif',
+        'system-ui',
+        '-apple-system',
+        'BlinkMacSystemFont',
+        'Segoe UI',
+        'Roboto',
+        'Helvetica Neue',
+        'Arial',
+        'Noto Sans',
+        'sans-serif',
+        'Apple Color Emoji',
+        'Segoe UI Emoji',
+        'Segoe UI Symbol',
+        'Noto Color Emoji',
+      ],
+      mono: [
+        'JetBrains Mono',
+        'ui-monospace',
+        'SFMono-Regular',
+        'Menlo',
+        'Monaco',
+        'Consolas',
+        'Liberation Mono',
+        'Courier New',
+        'monospace',
+      ],
+    },
     extend: {
-      ...ablyUIConfig.theme.extend,
       fontFamily: {
         serif: ['IBM Plex Serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
       },
+      colors: {
+        'neutral-000': 'var(--color-neutral-000)',
+        'neutral-100': 'var(--color-neutral-100)',
+        'neutral-200': 'var(--color-neutral-200)',
+        'neutral-300': 'var(--color-neutral-300)',
+        'neutral-400': 'var(--color-neutral-400)',
+        'neutral-500': 'var(--color-neutral-500)',
+        'neutral-600': 'var(--color-neutral-600)',
+        'neutral-700': 'var(--color-neutral-700)',
+        'neutral-800': 'var(--color-neutral-800)',
+        'neutral-900': 'var(--color-neutral-900)',
+        'neutral-1000': 'var(--color-neutral-1000)',
+        'neutral-1100': 'var(--color-neutral-1100)',
+        'neutral-1200': 'var(--color-neutral-1200)',
+        'neutral-1300': 'var(--color-neutral-1300)',
+        'orange-100': 'var(--color-orange-100)',
+        'orange-200': 'var(--color-orange-200)',
+        'orange-300': 'var(--color-orange-300)',
+        'orange-400': 'var(--color-orange-400)',
+        'orange-500': 'var(--color-orange-500)',
+        'orange-600': 'var(--color-orange-600)',
+        'orange-700': 'var(--color-orange-700)',
+        'orange-800': 'var(--color-orange-800)',
+        'orange-900': 'var(--color-orange-900)',
+        'orange-1000': 'var(--color-orange-1000)',
+        'orange-1100': 'var(--color-orange-1100)',
+        'yellow-100': 'var(--color-yellow-100)',
+        'yellow-200': 'var(--color-yellow-200)',
+        'yellow-300': 'var(--color-yellow-300)',
+        'yellow-400': 'var(--color-yellow-400)',
+        'yellow-500': 'var(--color-yellow-500)',
+        'yellow-600': 'var(--color-yellow-600)',
+        'yellow-700': 'var(--color-yellow-700)',
+        'yellow-800': 'var(--color-yellow-800)',
+        'yellow-900': 'var(--color-yellow-900)',
+        'green-100': 'var(--color-green-100)',
+        'green-200': 'var(--color-green-200)',
+        'green-300': 'var(--color-green-300)',
+        'green-400': 'var(--color-green-400)',
+        'green-500': 'var(--color-green-500)',
+        'green-600': 'var(--color-green-600)',
+        'green-700': 'var(--color-green-700)',
+        'green-800': 'var(--color-green-800)',
+        'green-900': 'var(--color-green-900)',
+        'blue-100': 'var(--color-blue-100)',
+        'blue-200': 'var(--color-blue-200)',
+        'blue-300': 'var(--color-blue-300)',
+        'blue-400': 'var(--color-blue-400)',
+        'blue-500': 'var(--color-blue-500)',
+        'blue-600': 'var(--color-blue-600)',
+        'blue-700': 'var(--color-blue-700)',
+        'blue-800': 'var(--color-blue-800)',
+        'blue-900': 'var(--color-blue-900)',
+        'violet-100': 'var(--color-violet-100)',
+        'violet-200': 'var(--color-violet-200)',
+        'violet-300': 'var(--color-violet-300)',
+        'violet-400': 'var(--color-violet-400)',
+        'violet-500': 'var(--color-violet-500)',
+        'violet-600': 'var(--color-violet-600)',
+        'violet-700': 'var(--color-violet-700)',
+        'violet-800': 'var(--color-violet-800)',
+        'violet-900': 'var(--color-violet-900)',
+        'pink-100': 'var(--color-pink-100)',
+        'pink-200': 'var(--color-pink-200)',
+        'pink-300': 'var(--color-pink-300)',
+        'pink-400': 'var(--color-pink-400)',
+        'pink-500': 'var(--color-pink-500)',
+        'pink-600': 'var(--color-pink-600)',
+        'pink-700': 'var(--color-pink-700)',
+        'pink-800': 'var(--color-pink-800)',
+        'pink-900': 'var(--color-pink-900)',
+        'gui-blue-default-light': 'var(--color-gui-blue-default-light)',
+        'gui-blue-hover-light': 'var(--color-gui-blue-hover-light)',
+        'gui-blue-active-light': 'var(--color-gui-blue-active-light)',
+        'gui-blue-default-dark': 'var(--color-gui-blue-default-dark)',
+        'gui-blue-hover-dark': 'var(--color-gui-blue-hover-dark)',
+        'gui-blue-active-dark': 'var(--color-gui-blue-active-dark)',
+        'gui-blue-focus': 'var(--color-gui-blue-focus)',
+        'gui-blue-visited': 'var(--color-gui-blue-focus)',
+        'gui-unavailable': 'var(--color-gui-unavailable)',
+        'gui-unavailable-dark': 'var(--color-gui-unavailable-dark)',
+        'gui-disabled-light': 'var(--color-gui-disabled-light)',
+        'gui-disabled-dark': 'var(--color-gui-disabled-dark)',
+        'gui-success-green': 'var(--color-gui-success-green)',
+        'gui-error-red': 'var(--color-gui-error-red)',
+        'gui-focus': 'var(--color-gui-focus)',
+        'gui-focus-outline': 'var(--color-gui-focus-outline)',
+        transparent: 'transparent',
+        'cool-black': 'var(--color-neutral-1300)',
+        'active-orange': 'var(--color-orange-600)',
+        'red-orange': 'var(--color-orange-800)',
+        white: 'var(--color-neutral-000)',
+        'electric-cyan': 'var(--color-blue-400)',
+        'zingy-green': 'var(--color-green-400)',
+        'bright-red': 'var(--color-orange-700)',
+        'jazzy-pink': 'var(--color-pink-500)',
+        'extra-light-grey': 'var(--color-neutral-100)',
+        'light-grey': 'var(--color-neutral-200)',
+        'mid-grey': 'var(--color-neutral-500)',
+        'dark-grey': 'var(--color-neutral-800)',
+        'charcoal-grey': 'var(--color-neutral-1000)',
+        'gui-default': 'var(--color-gui-blue-default-light)',
+        'gui-hover': 'var(--color-gui-blue-hover-light)',
+        'gui-active': 'var(--color-gui-blue-active-light)',
+        'gui-default-dark': 'var(--color-gui-blue-default-dark)',
+        'gui-hover-dark': 'var(--color-gui-blue-hover-dark)',
+        'gui-active-dark': 'var(--color-gui-blue-active-dark)',
+        'gui-alt': 'var(--color-neutral-1300)',
+        'gui-error': 'var(--color-gui-error-red)',
+        'gui-success': 'var(--color-gui-success-green)',
+        'icon-linkedin': 'var(--icon-color-linkedin)',
+        'icon-twitter': 'var(--icon-color-twitter)',
+        'icon-glassdoor': 'var(--icon-color-glassdoor)',
+        'icon-github': 'var(--icon-color-github)',
+        'icon-discord': 'var(--icon-color-discord)',
+      },
+      fontSize: {
+        title: ['var(--fs-title)', 'var(--lh-min-normal)'],
+        'title-xl': ['var(--fs-title-xl)', 'var(--lh-min-normal)'],
+        'title-xs': ['var(--fs-title-xs)', 'var(--lh-min-normal)'],
+        h1: ['var(--fs-h1)', 'var(--lh-dense)'],
+        'h1-xl': ['var(--fs-h1-xl)', 'var(--lh-min-normal)'],
+        'h1-xs': ['var(--fs-h1-xs)', 'var(--lh-min-normal)'],
+        h2: ['var(--fs-h2)', 'var(--lh-min-normal)'],
+        'h2-xl': ['var(--fs-h2-xl)', 'var(--lh-min-normal)'],
+        'h2-xs': ['var(--fs-h2-xs)', 'var(--lh-min-normal)'],
+        h3: ['var(--fs-h3)', 'var(--lh-min-normal)'],
+        h4: ['var(--fs-h4)', 'var(--lh-min-normal)'],
+        h5: ['var(--fs-h5)', 'var(--lh-min-normal)'],
+        p1: ['var(--fs-p1)', 'var(--lh-relaxed)'],
+        p2: ['var(--fs-p2)', 'var(--lh-relaxed)'],
+        p3: ['var(--fs-p3)', 'var(--lh-relaxed)'],
+        p4: ['var(--fs-p4)', 'var(--lh-relaxed)'],
+        standfirst: ['var(--fs-standfirst)'],
+        'standfirst-xl': ['var(--fs-standfirst-xl)'],
+        'sub-header': ['var(--fs-sub-header)'],
+        'sub-header-xs': ['var(--fs-sub-header-xs)'],
+        overline1: ['var(--fs-overline1)'],
+        overline2: ['var(--fs-overline2)'],
+        label1: ['var(--fs-label1)', 'var(--lh-snug)'],
+        label2: ['var(--fs-label2)', 'var(--lh-snug)'],
+        label3: ['var(--fs-label3)', 'var(--lh-snug)'],
+        label4: ['var(--fs-label4)', 'var(--lh-snug)'],
+        quote: ['var(--fs-quote)'],
+        code: ['var(--fs-code)', 'var(--lh-none)'],
+        code2: ['var(--fs-code2)', 'var(--lh-none)'],
+      },
+      backgroundImage: {
+        'gradient-active-orange': 'var(--gradient-active-orange)',
+        'gradient-hot-pink': 'var(--gradient-hot-pink)',
+        'gradient-priority-button': 'var(--gradient-priority-button)',
+      },
+      borderRadius: {
+        md: '0.1875rem',
+        DEFAULT: '0.375rem',
+      },
+      transitionProperty: {
+        input: 'background-color, box-shadow',
+      },
+      dropShadow: {
+        toggle: ['0 4px 4px rgba(0,0,0,0.25)', '0 4px 8px rgba(0,0,0,0.15)'],
+      },
+      outline: {
+        'gui-focus': '1.5px solid var(--color-gui-focus-outline)',
+      },
+      borderWidth: {
+        btn: '1.5px',
+      },
       gridTemplateColumns: {
+        dynamic:
+          'repeat(var(--dynamic-grid-columns-count), minmax(var(--dynamic-grid-column-min-width), var(--dynamic-grid-column-max-width)))',
         'header-layout': '173px minmax(200px, 400px) 1fr',
       },
+      lineHeight: {
+        dense: 'var(--lh-dense)',
+        snug: 'var(--lh-snug)',
+        relaxed: 'var(--lh-relaxed)',
+      },
+      padding: {
+        btn: 'var(--spacing-btn)',
+        'btn-small': 'var(--spacing-btn-small)',
+        'btn-xsmall': 'var(--spacing-btn-xsmall)',
+        'btn-large': 'var(--spacing-btn-large)',
+        'menu-row': 'var(--spacing-menu-row)',
+        'menu-row-snug': 'var(--spacing-menu-row-snug)',
+        'menu-row-title': 'var(--spacing-menu-row-title)',
+        media: 'var(--spacing-media)',
+        input: 'var(--spacing-input)',
+      },
+      boxShadow: {
+        subtle: '0px 1px 0px var(--color-neutral-500)',
+        tooltip: '0px 5px 10px 0px #00000022',
+        container: '0px 40px 40px rgba(0, 0, 0, 0.1)',
+        'container-subtle': '0px 16px 64px rgba(0, 0, 0, 0.1)',
+        input: '0px 0px 8px 0px rgba(8, 103, 196, 1)', // color-gui-hover at 50%
+        quote: '0rem 1.5rem 2rem 0rem #0000000d',
+      },
       keyframes: {
-        ...ablyUIConfig.theme.extend.keyframes,
+        tooltipEntry: {
+          '0%': { transform: 'translateY(8px)', opacity: 0 },
+          '100%': { transform: 'translateY(0)', opacity: 1 },
+        },
+        tooltipExit: {
+          '0%': { opacity: 1 },
+          '100%': { opacity: 0 },
+        },
         'accordion-down': {
           from: { height: '0' },
           to: { height: 'var(--radix-accordion-content-height)' },
@@ -28,12 +268,60 @@ module.exports = extendConfig((ablyUIConfig) => ({
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: '0' },
         },
+        'fade-in-ten-percent': {
+          from: { opacity: 0 },
+          to: { opacity: 0.1 },
+        },
+        'fade-out-ten-percent': {
+          from: { opacity: 0.1 },
+          to: { opacity: 0 },
+        },
+        'scale-in': {
+          from: { opacity: '0', transform: 'rotateX(-10deg) scale(0.9)' },
+          to: { opacity: '1', transform: 'rotateX(0deg) scale(1)' },
+        },
+        'scale-out': {
+          from: { opacity: '1', transform: 'rotateX(0deg) scale(1)' },
+          to: { opacity: '0', transform: 'rotateX(-10deg) scale(0.95)' },
+        },
+        'enter-from-right': {
+          from: { opacity: '0', transform: 'translateX(200px)' },
+          to: { opacity: '1', transform: 'translateX(0)' },
+        },
+        'enter-from-left': {
+          from: { opacity: '0', transform: 'translateX(-200px)' },
+          to: { opacity: '1', transform: 'translateX(0)' },
+        },
+        'exit-to-right': {
+          from: { opacity: '1', transform: 'translateX(0)' },
+          to: { opacity: '0', transform: 'translateX(200px)' },
+        },
+        'exit-to-left': {
+          from: { opacity: '1', transform: 'translateX(0)' },
+          to: { opacity: '0', transform: 'translateX(-200px)' },
+        },
       },
       animation: {
-        ...ablyUIConfig.theme.extend.animation,
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        'scale-in': 'scale-in 200ms ease',
+        'scale-out': 'scale-out 200ms ease',
+        'enter-from-left': 'enter-from-left 250ms ease',
+        'enter-from-right': 'enter-from-right 250ms ease',
+        'exit-to-left': 'exit-to-left 250ms ease',
+        'exit-to-right': 'exit-to-right 250ms ease',
       },
     },
+    listStyleType: {
+      none: 'none',
+      disc: 'disc',
+      decimal: 'decimal',
+      square: 'square',
+      circle: 'circle',
+    },
+  },
+  corePlugins: {
+    preflight: false,
   },
-}));
+  plugins: [require('@tailwindcss/container-queries')],
+};