diff --git a/.vscode/settings.json b/.vscode/settings.json
index d6ef91d7c..62690615a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,21 +5,21 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+      "source.fixAll.eslint": "explicit"
     }
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+      "source.fixAll.eslint": "explicit"
     }
   },
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+      "source.fixAll.eslint": "explicit"
     }
   },
   "[json]": {
diff --git a/packages/next/src/pages/API/RenderJSON/index.scss b/packages/next/src/pages/API/RenderJSON/index.scss
index e85017488..5049de3e2 100644
--- a/packages/next/src/pages/API/RenderJSON/index.scss
+++ b/packages/next/src/pages/API/RenderJSON/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss//styles.scss';
+@import '../../../scss/styles.scss';
 
 .query-inspector {
   &__json-children {
diff --git a/packages/next/src/pages/API/index.scss b/packages/next/src/pages/API/index.scss
index 6a7309f2c..26cc22a17 100644
--- a/packages/next/src/pages/API/index.scss
+++ b/packages/next/src/pages/API/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../ui/src/scss/styles.scss';
+@import '../../scss/styles.scss';
 
 .query-inspector {
   --string-color: #11b102;
diff --git a/packages/next/src/pages/Account/Settings/index.scss b/packages/next/src/pages/Account/Settings/index.scss
index 0add3037e..23eb53b7b 100644
--- a/packages/next/src/pages/Account/Settings/index.scss
+++ b/packages/next/src/pages/Account/Settings/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .payload-settings {
   position: relative;
diff --git a/packages/next/src/pages/Dashboard/Default/index.scss b/packages/next/src/pages/Dashboard/Default/index.scss
index 3f9424d22..8bb66adcb 100644
--- a/packages/next/src/pages/Dashboard/Default/index.scss
+++ b/packages/next/src/pages/Dashboard/Default/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .dashboard {
   width: 100%;
diff --git a/packages/next/src/pages/Edit/Default/Auth/index.scss b/packages/next/src/pages/Edit/Default/Auth/index.scss
index b280e1e00..ca4466501 100644
--- a/packages/next/src/pages/Edit/Default/Auth/index.scss
+++ b/packages/next/src/pages/Edit/Default/Auth/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../ui/src/scss/styles.scss';
+@import '../../../../scss/styles.scss';
 
 .auth-fields {
   padding: calc(var(--base) * 2);
diff --git a/packages/next/src/pages/Edit/Default/index.scss b/packages/next/src/pages/Edit/Default/index.scss
index a188be525..9535969a3 100644
--- a/packages/next/src/pages/Edit/Default/index.scss
+++ b/packages/next/src/pages/Edit/Default/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .collection-edit {
   width: 100%;
diff --git a/packages/next/src/pages/List/Default/Cell/fields/Checkbox/index.scss b/packages/next/src/pages/List/Default/Cell/fields/Checkbox/index.scss
index a59bfc664..975d18fc2 100644
--- a/packages/next/src/pages/List/Default/Cell/fields/Checkbox/index.scss
+++ b/packages/next/src/pages/List/Default/Cell/fields/Checkbox/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../../../ui/src/scss/styles.scss';
+@import '../../../../../../scss/styles.scss';
 
 .bool-cell {
   font-size: 1rem;
diff --git a/packages/next/src/pages/List/Default/Cell/fields/Code/index.scss b/packages/next/src/pages/List/Default/Cell/fields/Code/index.scss
index 6a8ce6b74..759a9ad40 100644
--- a/packages/next/src/pages/List/Default/Cell/fields/Code/index.scss
+++ b/packages/next/src/pages/List/Default/Cell/fields/Code/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../../../ui/src/scss/styles.scss';
+@import '../../../../../../scss/styles.scss';
 
 .code-cell {
   font-size: 1rem;
diff --git a/packages/next/src/pages/List/Default/Cell/fields/File/index.scss b/packages/next/src/pages/List/Default/Cell/fields/File/index.scss
index 0767c4808..262d08cbe 100644
--- a/packages/next/src/pages/List/Default/Cell/fields/File/index.scss
+++ b/packages/next/src/pages/List/Default/Cell/fields/File/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../../../ui/src/scss/styles.scss';
+@import '../../../../../../scss/styles.scss';
 
 .file {
   display: flex;
diff --git a/packages/next/src/pages/List/Default/Cell/fields/JSON/index.scss b/packages/next/src/pages/List/Default/Cell/fields/JSON/index.scss
index 2b62c0e2f..f1d9b69af 100644
--- a/packages/next/src/pages/List/Default/Cell/fields/JSON/index.scss
+++ b/packages/next/src/pages/List/Default/Cell/fields/JSON/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../../../ui/src/scss/styles.scss';
+@import '../../../../../../scss/styles.scss';
 
 .json-cell {
   font-size: 1rem;
diff --git a/packages/next/src/pages/List/Default/index.scss b/packages/next/src/pages/List/Default/index.scss
index f8c25790d..9530eaf73 100644
--- a/packages/next/src/pages/List/Default/index.scss
+++ b/packages/next/src/pages/List/Default/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .collection-list {
   width: 100%;
diff --git a/packages/next/src/pages/LivePreview/Preview/index.scss b/packages/next/src/pages/LivePreview/Preview/index.scss
index f2fb06f6a..a93a2c625 100644
--- a/packages/next/src/pages/LivePreview/Preview/index.scss
+++ b/packages/next/src/pages/LivePreview/Preview/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .live-preview-window {
   background-color: var(--theme-bg);
diff --git a/packages/next/src/pages/LivePreview/Toolbar/Controls/index.scss b/packages/next/src/pages/LivePreview/Toolbar/Controls/index.scss
index cb0c56d77..ca90b4195 100644
--- a/packages/next/src/pages/LivePreview/Toolbar/Controls/index.scss
+++ b/packages/next/src/pages/LivePreview/Toolbar/Controls/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../ui/src/scss/styles.scss';
+@import '../../../../scss/styles.scss';
 
 .live-preview-toolbar-controls {
   display: flex;
diff --git a/packages/next/src/pages/LivePreview/Toolbar/index.scss b/packages/next/src/pages/LivePreview/Toolbar/index.scss
index 90776bdf0..8dfdf751d 100644
--- a/packages/next/src/pages/LivePreview/Toolbar/index.scss
+++ b/packages/next/src/pages/LivePreview/Toolbar/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .live-preview-toolbar {
   display: flex;
diff --git a/packages/next/src/pages/LivePreview/index.scss b/packages/next/src/pages/LivePreview/index.scss
index 2a4f19426..62113bbe1 100644
--- a/packages/next/src/pages/LivePreview/index.scss
+++ b/packages/next/src/pages/LivePreview/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../packages/ui/src/scss/styles.scss';
+@import '../../scss/styles.scss';
 
 .live-preview {
   width: 100%;
diff --git a/packages/next/src/pages/NotFound/index.scss b/packages/next/src/pages/NotFound/index.scss
index a4549916a..d0816db21 100644
--- a/packages/next/src/pages/NotFound/index.scss
+++ b/packages/next/src/pages/NotFound/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../ui/src/scss/styles.scss';
+@import '../../scss/styles.scss';
 
 .not-found {
   margin-top: var(--base);
diff --git a/packages/next/src/pages/Version/Default/index.scss b/packages/next/src/pages/Version/Default/index.scss
index 5a4a97456..401c0cebb 100644
--- a/packages/next/src/pages/Version/Default/index.scss
+++ b/packages/next/src/pages/Version/Default/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .view-version {
   width: 100%;
diff --git a/packages/next/src/pages/Version/RenderFieldsToDiff/index.scss b/packages/next/src/pages/Version/RenderFieldsToDiff/index.scss
index 115cf3cd8..372a4651e 100644
--- a/packages/next/src/pages/Version/RenderFieldsToDiff/index.scss
+++ b/packages/next/src/pages/Version/RenderFieldsToDiff/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .render-field-diffs {
   display: flex;
diff --git a/packages/next/src/pages/Versions/index.scss b/packages/next/src/pages/Versions/index.scss
index 08c46d68d..d7011b242 100644
--- a/packages/next/src/pages/Versions/index.scss
+++ b/packages/next/src/pages/Versions/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../ui/src/scss/styles.scss';
+@import '../../scss/styles.scss';
 
 .versions {
   width: 100%;
diff --git a/packages/next/src/scss/app.scss b/packages/next/src/scss/app.scss
new file mode 100644
index 000000000..690f201c5
--- /dev/null
+++ b/packages/next/src/scss/app.scss
@@ -0,0 +1,209 @@
+@import 'fonts';
+@import 'styles';
+@import './toastify.scss';
+@import './colors.scss';
+
+:root {
+  --base-px: 25;
+  --base-body-size: 13;
+  --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
+
+  --breakpoint-xs-width: #{$breakpoint-xs-width};
+  --breakpoint-s-width: #{$breakpoint-s-width};
+  --breakpoint-m-width: #{$breakpoint-m-width};
+  --breakpoint-l-width: #{$breakpoint-l-width};
+  --scrollbar-width: 17px;
+
+  --theme-bg: var(--theme-elevation-0);
+  --theme-input-bg: var(--theme-elevation-0);
+  --theme-text: var(--theme-elevation-800);
+  --theme-overlay: rgba(5, 5, 5, 0.5);
+  --theme-baseline: #{$baseline-px};
+  --theme-baseline-body-size: #{$baseline-body-size};
+  --font-body: 'Suisse Intl', system-ui;
+  --font-mono: monospace;
+  --font-serif: 'Merriweather', serif;
+
+  --style-radius-s: #{$style-radius-s};
+  --style-radius-m: #{$style-radius-m};
+  --style-radius-l: #{$style-radius-l};
+
+  --z-popup: 10;
+  --z-nav: 20;
+  --z-modal: 30;
+  --z-status: 40;
+
+  --accessibility-outline: 2px solid var(--theme-text);
+  --accessibility-outline-offset: 2px;
+
+  --gutter-h: #{base(3)};
+  --spacing-view-bottom: var(--gutter-h);
+  --app-header-height: calc(var(--base) * 3);
+  --doc-controls-height: calc(var(--base) * 3);
+  --nav-width: 275px;
+  --nav-trans-time: 150ms;
+
+  @include mid-break {
+    --gutter-h: #{base(2)};
+    --app-header-height: calc(var(--base) * 2);
+    --doc-controls-height: calc(var(--base) * 2.5);
+  }
+
+  @include small-break {
+    --gutter-h: #{base(0.5)};
+    --spacing-view-bottom: calc(var(--base) * 2);
+    --nav-width: 100vw;
+  }
+}
+
+/////////////////////////////
+// GLOBAL STYLES
+/////////////////////////////
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  @extend %body;
+  background: var(--theme-bg);
+  -webkit-font-smoothing: antialiased;
+  opacity: 0;
+
+  &[data-theme='dark'],
+  &[data-theme='light'] {
+    opacity: initial;
+  }
+
+  &[data-theme='dark'] {
+    --theme-bg: var(--theme-elevation-0);
+    --theme-text: var(--theme-elevation-1000);
+    --theme-input-bg: var(--theme-elevation-50);
+    --theme-overlay: rgba(5, 5, 5, 0.75);
+    color-scheme: dark;
+
+    ::selection {
+      color: var(--color-base-1000);
+    }
+
+    ::-moz-selection {
+      color: var(--color-base-1000);
+    }
+  }
+
+  @include mid-break {
+    font-size: 12px;
+  }
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-body);
+  font-weight: 400;
+  color: var(--theme-text);
+  margin: 0;
+  // this is for the nav to be able to push the document over
+  overflow-x: hidden;
+}
+
+::selection {
+  background: var(--theme-success-500);
+  color: var(--theme-base-800);
+}
+
+::-moz-selection {
+  background: var(--theme-success-500);
+  color: var(--theme-base-800);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+h1 {
+  @extend %h1;
+}
+
+h2 {
+  @extend %h2;
+}
+
+h3 {
+  @extend %h3;
+}
+
+h4 {
+  @extend %h4;
+}
+
+h5 {
+  @extend %h5;
+}
+
+h6 {
+  @extend %h6;
+}
+
+p {
+  margin: 0 0 $baseline;
+}
+
+ul,
+ol {
+  padding-left: $baseline;
+  margin: 0 0 $baseline;
+}
+
+:focus-visible {
+  outline: var(--accessibility-outline);
+}
+
+a {
+  color: currentColor;
+
+  &:focus {
+    &:not(:focus-visible) {
+      opacity: 0.8;
+    }
+    outline: none;
+  }
+
+  &:active {
+    opacity: 0.7;
+    outline: none;
+  }
+}
+
+svg {
+  vertical-align: middle;
+}
+
+dialog {
+  width: 100%;
+  border: 0;
+  padding: 0;
+  color: currentColor;
+}
+
+.payload__modal-item {
+  min-height: 100%;
+  background: transparent;
+}
+
+.payload__modal-container--enterDone {
+  overflow: auto;
+}
+
+.payload__modal-item--enter,
+.payload__modal-item--enterDone {
+  z-index: var(--z-modal);
+}
+
+// @import '~payload-user-css'; TODO: re-enable this
diff --git a/packages/next/src/scss/colors.scss b/packages/next/src/scss/colors.scss
new file mode 100644
index 000000000..9a2d78968
--- /dev/null
+++ b/packages/next/src/scss/colors.scss
@@ -0,0 +1,269 @@
+:root {
+  --color-base-0: rgb(255, 255, 255);
+  --color-base-50: rgb(245, 245, 245);
+  --color-base-100: rgb(235, 235, 235);
+  --color-base-150: rgb(221, 221, 221);
+  --color-base-200: rgb(208, 208, 208);
+  --color-base-250: rgb(195, 195, 195);
+  --color-base-300: rgb(181, 181, 181);
+  --color-base-350: rgb(168, 168, 168);
+  --color-base-400: rgb(154, 154, 154);
+  --color-base-450: rgb(141, 141, 141);
+  --color-base-500: rgb(128, 128, 128);
+  --color-base-550: rgb(114, 114, 114);
+  --color-base-600: rgb(101, 101, 101);
+  --color-base-650: rgb(87, 87, 87);
+  --color-base-700: rgb(74, 74, 74);
+  --color-base-750: rgb(60, 60, 60);
+  --color-base-800: rgb(47, 47, 47);
+  --color-base-850: rgb(34, 34, 34);
+  --color-base-900: rgb(20, 20, 20);
+  --color-base-950: rgb(7, 7, 7);
+  --color-base-1000: rgb(0, 0, 0);
+
+  --color-success-50: rgb(247, 255, 251);
+  --color-success-100: rgb(240, 255, 247);
+  --color-success-150: rgb(232, 255, 243);
+  --color-success-200: rgb(224, 255, 239);
+  --color-success-250: rgb(217, 255, 235);
+  --color-success-300: rgb(209, 255, 230);
+  --color-success-350: rgb(201, 255, 226);
+  --color-success-400: rgb(193, 255, 222);
+  --color-success-450: rgb(186, 255, 218);
+  --color-success-500: rgb(178, 255, 214);
+  --color-success-550: rgb(160, 230, 193);
+  --color-success-600: rgb(142, 204, 171);
+  --color-success-650: rgb(125, 179, 150);
+  --color-success-700: rgb(107, 153, 128);
+  --color-success-750: rgb(89, 128, 107);
+  --color-success-800: rgb(71, 102, 86);
+  --color-success-850: rgb(53, 77, 64);
+  --color-success-900: rgb(36, 51, 43);
+  --color-success-950: rgb(18, 25, 21);
+
+  --color-warning-50: rgb(255, 255, 246);
+  --color-warning-100: rgb(255, 255, 237);
+  --color-warning-150: rgb(254, 255, 228);
+  --color-warning-200: rgb(254, 255, 219);
+  --color-warning-250: rgb(254, 255, 210);
+  --color-warning-300: rgb(254, 255, 200);
+  --color-warning-350: rgb(254, 255, 191);
+  --color-warning-400: rgb(253, 255, 182);
+  --color-warning-450: rgb(253, 255, 173);
+  --color-warning-500: rgb(253, 255, 164);
+  --color-warning-550: rgb(228, 230, 148);
+  --color-warning-600: rgb(202, 204, 131);
+  --color-warning-650: rgb(177, 179, 115);
+  --color-warning-700: rgb(152, 153, 98);
+  --color-warning-750: rgb(127, 128, 82);
+  --color-warning-800: rgb(101, 102, 66);
+  --color-warning-850: rgb(76, 77, 49);
+  --color-warning-900: rgb(51, 51, 33);
+  --color-warning-950: rgb(25, 25, 16);
+
+  --color-error-50: rgb(255, 241, 241);
+  --color-error-100: rgb(255, 226, 228);
+  --color-error-150: rgb(255, 212, 214);
+  --color-error-200: rgb(255, 197, 200);
+  --color-error-250: rgb(255, 183, 187);
+  --color-error-300: rgb(255, 169, 173);
+  --color-error-350: rgb(255, 154, 159);
+  --color-error-400: rgb(255, 140, 145);
+  --color-error-450: rgb(255, 125, 132);
+  --color-error-500: rgb(255, 111, 118);
+  --color-error-550: rgb(230, 100, 106);
+  --color-error-600: rgb(204, 89, 94);
+  --color-error-650: rgb(179, 78, 83);
+  --color-error-700: rgb(153, 67, 71);
+  --color-error-750: rgb(128, 56, 59);
+  --color-error-800: rgb(102, 44, 47);
+  --color-error-850: rgb(77, 33, 35);
+  --color-error-900: rgb(51, 22, 24);
+  --color-error-950: rgb(25, 11, 12);
+
+  --color-blue-50: rgb(230, 247, 253);
+  --color-blue-100: rgb(204, 238, 252);
+  --color-blue-150: rgb(179, 230, 250);
+  --color-blue-200: rgb(153, 221, 249);
+  --color-blue-250: rgb(128, 213, 247);
+  --color-blue-300: rgb(102, 204, 245);
+  --color-blue-350: rgb(77, 196, 244);
+  --color-blue-400: rgb(51, 187, 242);
+  --color-blue-450: rgb(25, 179, 241);
+  --color-blue-500: rgb(0, 170, 239);
+  --color-blue-550: rgb(0, 153, 215);
+  --color-blue-600: rgb(0, 136, 191);
+  --color-blue-650: rgb(0, 119, 167);
+  --color-blue-700: rgb(0, 102, 143);
+  --color-blue-750: rgb(0, 85, 120);
+  --color-blue-800: rgb(0, 68, 96);
+  --color-blue-850: rgb(0, 51, 72);
+  --color-blue-900: rgb(0, 34, 48);
+  --color-blue-950: rgb(0, 17, 24);
+
+  --theme-border-color: var(--theme-elevation-150);
+
+  --theme-success-50: var(--color-success-50);
+  --theme-success-100: var(--color-success-100);
+  --theme-success-150: var(--color-success-150);
+  --theme-success-200: var(--color-success-200);
+  --theme-success-250: var(--color-success-250);
+  --theme-success-300: var(--color-success-300);
+  --theme-success-350: var(--color-success-350);
+  --theme-success-400: var(--color-success-400);
+  --theme-success-450: var(--color-success-450);
+  --theme-success-500: var(--color-success-500);
+  --theme-success-550: var(--color-success-550);
+  --theme-success-600: var(--color-success-600);
+  --theme-success-650: var(--color-success-650);
+  --theme-success-700: var(--color-success-700);
+  --theme-success-750: var(--color-success-750);
+  --theme-success-800: var(--color-success-800);
+  --theme-success-850: var(--color-success-850);
+  --theme-success-900: var(--color-success-900);
+  --theme-success-950: var(--color-success-950);
+
+  --theme-warning-50: var(--color-warning-50);
+  --theme-warning-100: var(--color-warning-100);
+  --theme-warning-150: var(--color-warning-150);
+  --theme-warning-200: var(--color-warning-200);
+  --theme-warning-250: var(--color-warning-250);
+  --theme-warning-300: var(--color-warning-300);
+  --theme-warning-350: var(--color-warning-350);
+  --theme-warning-400: var(--color-warning-400);
+  --theme-warning-450: var(--color-warning-450);
+  --theme-warning-500: var(--color-warning-500);
+  --theme-warning-550: var(--color-warning-550);
+  --theme-warning-600: var(--color-warning-600);
+  --theme-warning-650: var(--color-warning-650);
+  --theme-warning-700: var(--color-warning-700);
+  --theme-warning-750: var(--color-warning-750);
+  --theme-warning-800: var(--color-warning-800);
+  --theme-warning-850: var(--color-warning-850);
+  --theme-warning-900: var(--color-warning-900);
+  --theme-warning-950: var(--color-warning-950);
+
+  --theme-error-50: var(--color-error-50);
+  --theme-error-100: var(--color-error-100);
+  --theme-error-150: var(--color-error-150);
+  --theme-error-200: var(--color-error-200);
+  --theme-error-250: var(--color-error-250);
+  --theme-error-300: var(--color-error-300);
+  --theme-error-350: var(--color-error-350);
+  --theme-error-400: var(--color-error-400);
+  --theme-error-450: var(--color-error-450);
+  --theme-error-500: var(--color-error-500);
+  --theme-error-550: var(--color-error-550);
+  --theme-error-600: var(--color-error-600);
+  --theme-error-650: var(--color-error-650);
+  --theme-error-700: var(--color-error-700);
+  --theme-error-750: var(--color-error-750);
+  --theme-error-800: var(--color-error-800);
+  --theme-error-850: var(--color-error-850);
+  --theme-error-900: var(--color-error-900);
+  --theme-error-950: var(--color-error-950);
+
+  --theme-elevation-0: var(--color-base-0);
+  --theme-elevation-50: var(--color-base-50);
+  --theme-elevation-100: var(--color-base-100);
+  --theme-elevation-150: var(--color-base-150);
+  --theme-elevation-200: var(--color-base-200);
+  --theme-elevation-250: var(--color-base-250);
+  --theme-elevation-300: var(--color-base-300);
+  --theme-elevation-350: var(--color-base-350);
+  --theme-elevation-400: var(--color-base-400);
+  --theme-elevation-450: var(--color-base-450);
+  --theme-elevation-500: var(--color-base-500);
+  --theme-elevation-550: var(--color-base-550);
+  --theme-elevation-600: var(--color-base-600);
+  --theme-elevation-650: var(--color-base-650);
+  --theme-elevation-700: var(--color-base-700);
+  --theme-elevation-750: var(--color-base-750);
+  --theme-elevation-800: var(--color-base-800);
+  --theme-elevation-850: var(--color-base-850);
+  --theme-elevation-900: var(--color-base-900);
+  --theme-elevation-950: var(--color-base-950);
+  --theme-elevation-1000: var(--color-base-1000);
+}
+
+html[data-theme='dark'] {
+  --theme-border-color: var(--theme-elevation-150);
+
+  --theme-elevation-0: var(--color-base-900);
+  --theme-elevation-50: var(--color-base-850);
+  --theme-elevation-100: var(--color-base-800);
+  --theme-elevation-150: var(--color-base-750);
+  --theme-elevation-200: var(--color-base-700);
+  --theme-elevation-250: var(--color-base-650);
+  --theme-elevation-300: var(--color-base-600);
+  --theme-elevation-350: var(--color-base-550);
+  --theme-elevation-400: var(--color-base-450);
+  --theme-elevation-450: var(--color-base-400);
+  --theme-elevation-550: var(--color-base-350);
+  --theme-elevation-600: var(--color-base-300);
+  --theme-elevation-650: var(--color-base-250);
+  --theme-elevation-700: var(--color-base-200);
+  --theme-elevation-750: var(--color-base-150);
+  --theme-elevation-800: var(--color-base-100);
+  --theme-elevation-850: var(--color-base-50);
+  --theme-elevation-900: var(--color-base-0);
+  --theme-elevation-950: var(--color-base-0);
+  --theme-elevation-1000: var(--color-base-0);
+
+  --theme-success-50: var(--color-success-950);
+  --theme-success-100: var(--color-success-900);
+  --theme-success-150: var(--color-success-850);
+  --theme-success-200: var(--color-success-800);
+  --theme-success-250: var(--color-success-750);
+  --theme-success-300: var(--color-success-700);
+  --theme-success-350: var(--color-success-650);
+  --theme-success-400: var(--color-success-600);
+  --theme-success-450: var(--color-success-550);
+  --theme-success-550: var(--color-success-450);
+  --theme-success-600: var(--color-success-400);
+  --theme-success-650: var(--color-success-350);
+  --theme-success-700: var(--color-success-300);
+  --theme-success-750: var(--color-success-250);
+  --theme-success-800: var(--color-success-200);
+  --theme-success-850: var(--color-success-150);
+  --theme-success-900: var(--color-success-100);
+  --theme-success-950: var(--color-success-50);
+
+  --theme-warning-50: var(--color-warning-950);
+  --theme-warning-100: var(--color-warning-900);
+  --theme-warning-150: var(--color-warning-850);
+  --theme-warning-200: var(--color-warning-800);
+  --theme-warning-250: var(--color-warning-750);
+  --theme-warning-300: var(--color-warning-700);
+  --theme-warning-350: var(--color-warning-650);
+  --theme-warning-400: var(--color-warning-600);
+  --theme-warning-450: var(--color-warning-550);
+  --theme-warning-550: var(--color-warning-450);
+  --theme-warning-600: var(--color-warning-400);
+  --theme-warning-650: var(--color-warning-350);
+  --theme-warning-700: var(--color-warning-300);
+  --theme-warning-750: var(--color-warning-250);
+  --theme-warning-800: var(--color-warning-200);
+  --theme-warning-850: var(--color-warning-150);
+  --theme-warning-900: var(--color-warning-100);
+  --theme-warning-950: var(--color-warning-50);
+
+  --theme-error-50: var(--color-error-950);
+  --theme-error-100: var(--color-error-900);
+  --theme-error-150: var(--color-error-850);
+  --theme-error-200: var(--color-error-800);
+  --theme-error-250: var(--color-error-750);
+  --theme-error-300: var(--color-error-700);
+  --theme-error-350: var(--color-error-650);
+  --theme-error-400: var(--color-error-600);
+  --theme-error-450: var(--color-error-550);
+  --theme-error-550: var(--color-error-450);
+  --theme-error-600: var(--color-error-400);
+  --theme-error-650: var(--color-error-350);
+  --theme-error-700: var(--color-error-300);
+  --theme-error-750: var(--color-error-250);
+  --theme-error-800: var(--color-error-200);
+  --theme-error-850: var(--color-error-150);
+  --theme-error-900: var(--color-error-100);
+  --theme-error-950: var(--color-error-50);
+}
diff --git a/packages/next/src/scss/custom.css b/packages/next/src/scss/custom.css
new file mode 100644
index 000000000..02370a8ab
--- /dev/null
+++ b/packages/next/src/scss/custom.css
@@ -0,0 +1 @@
+/* Used as a placeholder for when the Payload app does not have custom CSS */
diff --git a/packages/next/src/scss/fonts.scss b/packages/next/src/scss/fonts.scss
new file mode 100644
index 000000000..f40a8b722
--- /dev/null
+++ b/packages/next/src/scss/fonts.scss
@@ -0,0 +1,75 @@
+@font-face {
+  font-family: 'Suisse Intl';
+  src:
+    url('../assets/fonts/SuisseIntl.woff2') format('woff2'),
+    url('../assets/fonts/SuisseIntl.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Suisse Intl';
+  src:
+    url('../assets/fonts/SuisseIntl-Medium.woff2') format('woff2'),
+    url('../assets/fonts/SuisseIntl-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Suisse Intl';
+  src:
+    url('../assets/fonts/SuisseIntl-SemiBold.woff2') format('woff2'),
+    url('../assets/fonts/SuisseIntl-SemiBold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Suisse Intl';
+  src:
+    url('../assets/fonts/SuisseIntl-Bold.woff2') format('woff2'),
+    url('../assets/fonts/SuisseIntl-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 400;
+  src:
+    local(''),
+    url('../assets/fonts/merriweather-v30-latin-regular.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: italic;
+  font-weight: 400;
+  src:
+    local(''),
+    url('../assets/fonts/merriweather-v30-latin-italic.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-italic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 900;
+  src:
+    local(''),
+    url('../assets/fonts/merriweather-v30-latin-900.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-900.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: italic;
+  font-weight: 900;
+  src:
+    local(''),
+    url('../assets/fonts/merriweather-v30-latin-900italic.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-900italic.woff') format('woff');
+}
diff --git a/packages/next/src/scss/queries.scss b/packages/next/src/scss/queries.scss
new file mode 100644
index 000000000..81bbcb080
--- /dev/null
+++ b/packages/next/src/scss/queries.scss
@@ -0,0 +1,27 @@
+////////////////////////////
+// MEDIA QUERIES
+/////////////////////////////
+
+@mixin extra-small-break {
+  @media (max-width: $breakpoint-xs-width) {
+    @content;
+  }
+}
+
+@mixin small-break {
+  @media (max-width: $breakpoint-s-width) {
+    @content;
+  }
+}
+
+@mixin mid-break {
+  @media (max-width: $breakpoint-m-width) {
+    @content;
+  }
+}
+
+@mixin large-break {
+  @media (max-width: $breakpoint-l-width) {
+    @content;
+  }
+}
diff --git a/packages/next/src/scss/resets.scss b/packages/next/src/scss/resets.scss
new file mode 100644
index 000000000..eeda892c2
--- /dev/null
+++ b/packages/next/src/scss/resets.scss
@@ -0,0 +1,17 @@
+%btn-reset {
+  border: 0;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;
+  color: currentColor;
+}
+
+@mixin btn-reset {
+  border: 0;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;
+  color: currentColor;
+}
diff --git a/packages/next/src/scss/styles.scss b/packages/next/src/scss/styles.scss
new file mode 100644
index 000000000..65aa3d3e9
--- /dev/null
+++ b/packages/next/src/scss/styles.scss
@@ -0,0 +1,11 @@
+@import 'vars';
+@import 'z-index';
+
+//////////////////////////////
+// IMPORT OVERRIDES
+//////////////////////////////
+
+@import 'type';
+@import 'queries';
+@import 'resets';
+@import 'svg';
diff --git a/packages/next/src/scss/svg.scss b/packages/next/src/scss/svg.scss
new file mode 100644
index 000000000..7a9fa767b
--- /dev/null
+++ b/packages/next/src/scss/svg.scss
@@ -0,0 +1,10 @@
+@mixin color-svg($color) {
+  .stroke {
+    stroke: $color;
+    fill: none;
+  }
+
+  .fill {
+    fill: $color;
+  }
+}
diff --git a/packages/next/src/scss/toastify.scss b/packages/next/src/scss/toastify.scss
new file mode 100644
index 000000000..002bdbbc8
--- /dev/null
+++ b/packages/next/src/scss/toastify.scss
@@ -0,0 +1,59 @@
+@import 'vars';
+@import '../../node_modules/react-toastify/dist/ReactToastify.css';
+
+.Toastify {
+  .Toastify__toast-container {
+    left: base(5);
+    transform: none;
+    right: base(5);
+    width: auto;
+  }
+
+  .Toastify__toast {
+    padding: base(0.5);
+    border-radius: $style-radius-m;
+    font-weight: 600;
+  }
+
+  .Toastify__close-button {
+    align-self: center;
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .Toastify__toast--success {
+    color: var(--color-success-900);
+    background: var(--color-success-500);
+
+    .Toastify__progress-bar {
+      background-color: var(--color-success-900);
+    }
+  }
+
+  .Toastify__close-button--success {
+    color: var(--color-success-900);
+  }
+
+  .Toastify__toast--error {
+    background: var(--theme-error-500);
+    color: #fff;
+
+    .Toastify__progress-bar {
+      background-color: #fff;
+    }
+  }
+
+  .Toastify__close-button--light {
+    color: inherit;
+  }
+
+  @include mid-break {
+    .Toastify__toast-container {
+      left: $baseline;
+      right: $baseline;
+    }
+  }
+}
diff --git a/packages/next/src/scss/type.scss b/packages/next/src/scss/type.scss
new file mode 100644
index 000000000..57b318a34
--- /dev/null
+++ b/packages/next/src/scss/type.scss
@@ -0,0 +1,117 @@
+@import 'vars';
+@import 'queries';
+
+/////////////////////////////
+// HEADINGS
+/////////////////////////////
+
+%h1,
+%h2,
+%h3,
+%h4,
+%h5,
+%h6 {
+  font-family: var(--font-body);
+  font-weight: 500;
+}
+
+%jumbo {
+  font-size: base(2.5);
+  line-height: 1;
+  margin: 0 0 base(2);
+}
+
+%h1 {
+  margin: 0 0 base(1);
+  font-size: base(2);
+  line-height: 1.15;
+  letter-spacing: -1px;
+
+  @include small-break {
+    letter-spacing: -0.5px;
+    font-size: base(1.25);
+  }
+}
+
+%h2 {
+  margin: 0 0 base(1);
+  font-size: base(1.25);
+  line-height: 1.15;
+  letter-spacing: -0.5px;
+
+  @include small-break {
+    font-size: base(0.85);
+  }
+}
+
+%h3 {
+  margin: 0 0 base(1);
+  font-size: base(0.925);
+  line-height: 1.25;
+  letter-spacing: -0.5px;
+
+  @include small-break {
+    font-size: base(0.65);
+    line-height: 1.25;
+  }
+}
+
+%h4 {
+  margin: 0 0 $baseline;
+  font-size: base(0.75);
+  line-height: 1.5;
+  letter-spacing: -0.375px;
+}
+
+%h5 {
+  margin: 0;
+  font-size: base(0.5625);
+  line-height: 1.5;
+}
+
+%h6 {
+  margin: 0;
+  font-size: base(0.5);
+  line-height: 1.5;
+}
+
+%small {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+/////////////////////////////
+// TYPE STYLES
+/////////////////////////////
+
+%large-body {
+  font-size: base(0.6);
+  line-height: base(1);
+  letter-spacing: base(0.02);
+
+  @include mid-break {
+    font-size: base(0.7);
+    line-height: base(1);
+  }
+
+  @include small-break {
+    font-size: base(0.55);
+    line-height: base(0.75);
+  }
+}
+
+%body {
+  font-size: $baseline-body-size;
+  line-height: $baseline-px;
+  font-weight: normal;
+}
+
+%code {
+  font-size: base(0.4);
+  color: var(--theme-elevation-400);
+
+  span {
+    color: var(--theme-elevation-800);
+  }
+}
diff --git a/packages/next/src/scss/vars.scss b/packages/next/src/scss/vars.scss
new file mode 100644
index 000000000..ce16a434b
--- /dev/null
+++ b/packages/next/src/scss/vars.scss
@@ -0,0 +1,220 @@
+@use 'sass:math';
+
+/////////////////////////////
+// BREAKPOINTS
+/////////////////////////////
+
+$breakpoint-xs-width: 400px !default;
+$breakpoint-s-width: 768px !default;
+$breakpoint-m-width: 1024px !default;
+$breakpoint-l-width: 1440px !default;
+
+//////////////////////////////
+// BASELINE GRID
+//////////////////////////////
+
+$baseline-px: 25px !default;
+$baseline-body-size: 13px !default;
+$baseline: math.div($baseline-px, $baseline-body-size) + rem;
+
+@function base($multiplier) {
+  @return (math.div($baseline-px, $baseline-body-size) * $multiplier) + rem;
+}
+
+//////////////////////////////
+// FONTS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+//////////////////////////////
+
+$font-body: 'Suisse Intl' !default;
+$font-mono: monospace !default;
+
+//////////////////////////////
+// COLORS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+//////////////////////////////
+
+$color-dark-gray: #333333 !default;
+$color-gray: #9a9a9a !default;
+$color-light-gray: #dadada !default;
+$color-background-gray: #f3f3f3 !default;
+$color-red: #ff6f76 !default;
+$color-yellow: #fdffa4 !default;
+$color-green: #b2ffd6 !default;
+$color-purple: #f3ddf3 !default;
+
+//////////////////////////////
+// STYLES
+//////////////////////////////
+
+$style-radius-s: 3px !default;
+$style-radius-m: 4px !default;
+$style-radius-l: 9px !default;
+$style-stroke-width: 1px !default;
+
+$style-stroke-width-s: 1px !default;
+$style-stroke-width-m: 2px !default;
+
+//////////////////////////////
+// MISC
+//////////////////////////////
+
+$top-header-offset: calc(var(--base) - 1px);
+$top-header-offset-m: calc(var(--base) * 3);
+$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
+
+//////////////////////////////
+// SHADOWS
+//////////////////////////////
+
+@mixin shadow-sm {
+  box-shadow:
+    0 2px 3px 0 rgba(0, 2, 4, 0.05),
+    0 10px 4px -8px rgba(0, 2, 4, 0.02);
+}
+
+@mixin shadow-m {
+  box-shadow:
+    0 0 30px 0 rgb(0 2 4 / 12%),
+    0 30px 25px -8px rgb(0 2 4 / 10%);
+}
+
+@mixin shadow-lg {
+  box-shadow:
+    0 20px 35px -10px rgba(0, 2, 4, 0.2),
+    0 6px 4px -4px rgba(0, 2, 4, 0.02);
+}
+
+@mixin shadow-lg-top {
+  box-shadow:
+    0 -20px 35px -10px rgba(0, 2, 4, 0.2),
+    0 -6px 4px -4px rgba(0, 2, 4, 0.02);
+}
+
+@mixin shadow {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+}
+
+@mixin inputShadowActive {
+  box-shadow:
+    0 2px 3px 0 rgba(0, 2, 4, 0.16),
+    0 6px 4px -4px rgba(0, 2, 4, 0.13);
+}
+
+@mixin inputShadow {
+  @include shadow-sm;
+
+  &:not(:disabled) {
+    &:hover {
+      box-shadow:
+        0 2px 3px 0 rgba(0, 2, 4, 0.13),
+        0 6px 4px -4px rgba(0, 2, 4, 0.1);
+    }
+
+    &:active,
+    &:focus-within,
+    &:focus {
+      @include inputShadowActive;
+    }
+  }
+}
+
+@mixin soft-shadow-bottom {
+  box-shadow: 0 7px 14px 0px rgb(0 0 0 / 5%);
+}
+
+//////////////////////////////
+// STYLE MIXINS
+//////////////////////////////
+
+@mixin blur-bg($color: var(--theme-bg), $opacity: 0.75) {
+  &:before,
+  &:after {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &:before {
+    background: $color;
+    opacity: $opacity;
+  }
+
+  &:after {
+    backdrop-filter: blur(8px);
+  }
+}
+
+@mixin blur-bg-light {
+  @include blur-bg(var(--theme-bg), 0.3);
+}
+
+@mixin formInput() {
+  @include inputShadow;
+  font-family: var(--font-body);
+  width: 100%;
+  border: 1px solid var(--theme-elevation-150);
+  background: var(--theme-input-bg);
+  color: var(--theme-elevation-800);
+  border-radius: 0;
+  font-size: 1rem;
+  height: base(2);
+  line-height: base(1);
+  padding: base(0.5) base(0.75);
+  -webkit-appearance: none;
+
+  &[data-rtl='true'] {
+    direction: rtl;
+  }
+
+  &::-webkit-input-placeholder {
+    color: var(--theme-elevation-400);
+    font-weight: normal;
+    font-size: 1rem;
+  }
+
+  &::-moz-placeholder {
+    color: var(--theme-elevation-400);
+    font-weight: normal;
+    font-size: 1rem;
+  }
+
+  &:hover {
+    border-color: var(--theme-elevation-250);
+  }
+
+  &:focus,
+  &:focus-within,
+  &:active {
+    border-color: var(--theme-elevation-400);
+    outline: 0;
+  }
+
+  &:disabled {
+    background: var(--theme-elevation-200);
+    color: var(--theme-elevation-450);
+
+    &:hover {
+      border-color: var(--theme-elevation-150);
+    }
+  }
+}
+
+@mixin lightInputError {
+  background-color: var(--theme-error-50);
+  border: 1px solid var(--theme-error-500);
+}
+
+@mixin darkInputError {
+  background-color: var(--theme-error-100);
+  border: 1px solid var(--theme-error-400);
+
+  &:hover {
+    border-color: var(--theme-error-500);
+  }
+}
diff --git a/packages/next/src/scss/z-index.scss b/packages/next/src/scss/z-index.scss
new file mode 100644
index 000000000..50c79d53c
--- /dev/null
+++ b/packages/next/src/scss/z-index.scss
@@ -0,0 +1,9 @@
+/////////////////////////////
+// Z-INDEX CHART (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+/////////////////////////////
+
+$z-page: 20;
+$z-page-content: 30;
+$z-nav: 40;
+$z-modal: 50;
+$z-status: 60;
diff --git a/packages/richtext-slate/src/data/validation.ts b/packages/richtext-slate/src/data/validation.ts
index ef7090db6..9dcf0081e 100644
--- a/packages/richtext-slate/src/data/validation.ts
+++ b/packages/richtext-slate/src/data/validation.ts
@@ -9,11 +9,12 @@ export const richTextValidate: Validate<
   unknown,
   RichTextField<any[], AdapterArguments>,
   RichTextField<any[], AdapterArguments>
-> = (value, { req: { t }, required }) => {
+> = (value, { required }) => {
   if (required) {
     const stringifiedDefaultValue = JSON.stringify(defaultRichTextValue)
     if (value && JSON.stringify(value) !== stringifiedDefaultValue) return true
-    return t('validation:required')
+    // TODO: translate this string
+    return 'This field is required.'
   }
 
   return true
diff --git a/packages/richtext-slate/src/field/buttons.scss b/packages/richtext-slate/src/field/buttons.scss
index 59ad636a6..b02de5ce4 100644
--- a/packages/richtext-slate/src/field/buttons.scss
+++ b/packages/richtext-slate/src/field/buttons.scss
@@ -1,4 +1,4 @@
-@import '../../../ui/src/scss/styles.scss';
+@import '../scss/styles.scss';
 
 .rich-text__button {
   position: relative;
diff --git a/packages/richtext-slate/src/field/elements/blockquote/index.scss b/packages/richtext-slate/src/field/elements/blockquote/index.scss
index cc4f697ab..cf5cc1d11 100644
--- a/packages/richtext-slate/src/field/elements/blockquote/index.scss
+++ b/packages/richtext-slate/src/field/elements/blockquote/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .rich-text-blockquote {
   &[data-slate-node='element'] {
diff --git a/packages/richtext-slate/src/field/elements/link/Element/index.scss b/packages/richtext-slate/src/field/elements/link/Element/index.scss
index 6bc6e66fb..77ec34eb8 100644
--- a/packages/richtext-slate/src/field/elements/link/Element/index.scss
+++ b/packages/richtext-slate/src/field/elements/link/Element/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../ui/src/scss/styles.scss';
+@import '../../../../scss/styles.scss';
 
 .rich-text-link {
   position: relative;
diff --git a/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss b/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss
index beb3f4ef6..3f27ec17a 100644
--- a/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss
+++ b/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../ui/src/scss/styles.scss';
+@import '../../../../scss/styles.scss';
 
 .rich-text-link-edit-modal {
   &__template {
diff --git a/packages/richtext-slate/src/field/elements/ol/index.scss b/packages/richtext-slate/src/field/elements/ol/index.scss
index 2a2038403..75fe03f6d 100644
--- a/packages/richtext-slate/src/field/elements/ol/index.scss
+++ b/packages/richtext-slate/src/field/elements/ol/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .rich-text-ol {
   &[data-slate-node='element'] {
diff --git a/packages/richtext-slate/src/field/elements/relationship/Button/index.scss b/packages/richtext-slate/src/field/elements/relationship/Button/index.scss
index 5ac01ecbc..6293fc586 100644
--- a/packages/richtext-slate/src/field/elements/relationship/Button/index.scss
+++ b/packages/richtext-slate/src/field/elements/relationship/Button/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../ui/src/scss/styles.scss';
+@import '../../../../scss/styles.scss';
 
 .relationship-rich-text-button {
   display: flex;
diff --git a/packages/richtext-slate/src/field/elements/relationship/Element/index.scss b/packages/richtext-slate/src/field/elements/relationship/Element/index.scss
index c96066231..5205500b6 100644
--- a/packages/richtext-slate/src/field/elements/relationship/Element/index.scss
+++ b/packages/richtext-slate/src/field/elements/relationship/Element/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../ui/src/scss/styles.scss';
+@import '../../../../scss/styles.scss';
 
 .rich-text-relationship {
   @extend %body;
diff --git a/packages/richtext-slate/src/field/elements/ul/index.scss b/packages/richtext-slate/src/field/elements/ul/index.scss
index b43419218..d8a7789ef 100644
--- a/packages/richtext-slate/src/field/elements/ul/index.scss
+++ b/packages/richtext-slate/src/field/elements/ul/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .rich-text-ul {
   &[data-slate-node='element'] {
diff --git a/packages/richtext-slate/src/field/elements/upload/Button/index.scss b/packages/richtext-slate/src/field/elements/upload/Button/index.scss
index 191227912..30ec5a8fa 100644
--- a/packages/richtext-slate/src/field/elements/upload/Button/index.scss
+++ b/packages/richtext-slate/src/field/elements/upload/Button/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../ui/src/scss/styles.scss';
+@import '../../../../scss/styles.scss';
 
 .upload-rich-text-button {
   display: flex;
diff --git a/packages/richtext-slate/src/field/elements/upload/Element/index.scss b/packages/richtext-slate/src/field/elements/upload/Element/index.scss
index 2c50540ff..a70740f98 100644
--- a/packages/richtext-slate/src/field/elements/upload/Element/index.scss
+++ b/packages/richtext-slate/src/field/elements/upload/Element/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../../ui/src/scss/styles.scss';
+@import '../../../../scss/styles.scss';
 
 .rich-text-upload {
   @extend %body;
diff --git a/packages/richtext-slate/src/field/icons/IndentLeft/index.scss b/packages/richtext-slate/src/field/icons/IndentLeft/index.scss
index a890f614c..62b0f7fe8 100644
--- a/packages/richtext-slate/src/field/icons/IndentLeft/index.scss
+++ b/packages/richtext-slate/src/field/icons/IndentLeft/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .icon--indent-left {
   height: $baseline;
diff --git a/packages/richtext-slate/src/field/icons/IndentRight/index.scss b/packages/richtext-slate/src/field/icons/IndentRight/index.scss
index 5d3fd6bb4..f5984269c 100644
--- a/packages/richtext-slate/src/field/icons/IndentRight/index.scss
+++ b/packages/richtext-slate/src/field/icons/IndentRight/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .icon--indent-right {
   height: $baseline;
diff --git a/packages/richtext-slate/src/field/icons/Link/index.scss b/packages/richtext-slate/src/field/icons/Link/index.scss
index c0c3a32e9..088b8c265 100644
--- a/packages/richtext-slate/src/field/icons/Link/index.scss
+++ b/packages/richtext-slate/src/field/icons/Link/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .icon--link {
   width: $baseline;
diff --git a/packages/richtext-slate/src/field/icons/Relationship/index.scss b/packages/richtext-slate/src/field/icons/Relationship/index.scss
index 6f169ae40..efa651886 100644
--- a/packages/richtext-slate/src/field/icons/Relationship/index.scss
+++ b/packages/richtext-slate/src/field/icons/Relationship/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .icon--relationship {
   height: $baseline;
diff --git a/packages/richtext-slate/src/field/icons/Upload/index.scss b/packages/richtext-slate/src/field/icons/Upload/index.scss
index 32aa4b9e5..33742f91d 100644
--- a/packages/richtext-slate/src/field/icons/Upload/index.scss
+++ b/packages/richtext-slate/src/field/icons/Upload/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../../ui/src/scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .icon--upload {
   height: $baseline;
diff --git a/packages/richtext-slate/src/field/index.scss b/packages/richtext-slate/src/field/index.scss
index 127600ea6..761cea954 100644
--- a/packages/richtext-slate/src/field/index.scss
+++ b/packages/richtext-slate/src/field/index.scss
@@ -1,4 +1,4 @@
-@import '../../../ui/src/scss/styles.scss';
+@import '../scss/styles.scss';
 
 .rich-text {
   margin-bottom: base(2);
diff --git a/packages/richtext-slate/src/scss/app.scss b/packages/richtext-slate/src/scss/app.scss
new file mode 100644
index 000000000..690f201c5
--- /dev/null
+++ b/packages/richtext-slate/src/scss/app.scss
@@ -0,0 +1,209 @@
+@import 'fonts';
+@import 'styles';
+@import './toastify.scss';
+@import './colors.scss';
+
+:root {
+  --base-px: 25;
+  --base-body-size: 13;
+  --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
+
+  --breakpoint-xs-width: #{$breakpoint-xs-width};
+  --breakpoint-s-width: #{$breakpoint-s-width};
+  --breakpoint-m-width: #{$breakpoint-m-width};
+  --breakpoint-l-width: #{$breakpoint-l-width};
+  --scrollbar-width: 17px;
+
+  --theme-bg: var(--theme-elevation-0);
+  --theme-input-bg: var(--theme-elevation-0);
+  --theme-text: var(--theme-elevation-800);
+  --theme-overlay: rgba(5, 5, 5, 0.5);
+  --theme-baseline: #{$baseline-px};
+  --theme-baseline-body-size: #{$baseline-body-size};
+  --font-body: 'Suisse Intl', system-ui;
+  --font-mono: monospace;
+  --font-serif: 'Merriweather', serif;
+
+  --style-radius-s: #{$style-radius-s};
+  --style-radius-m: #{$style-radius-m};
+  --style-radius-l: #{$style-radius-l};
+
+  --z-popup: 10;
+  --z-nav: 20;
+  --z-modal: 30;
+  --z-status: 40;
+
+  --accessibility-outline: 2px solid var(--theme-text);
+  --accessibility-outline-offset: 2px;
+
+  --gutter-h: #{base(3)};
+  --spacing-view-bottom: var(--gutter-h);
+  --app-header-height: calc(var(--base) * 3);
+  --doc-controls-height: calc(var(--base) * 3);
+  --nav-width: 275px;
+  --nav-trans-time: 150ms;
+
+  @include mid-break {
+    --gutter-h: #{base(2)};
+    --app-header-height: calc(var(--base) * 2);
+    --doc-controls-height: calc(var(--base) * 2.5);
+  }
+
+  @include small-break {
+    --gutter-h: #{base(0.5)};
+    --spacing-view-bottom: calc(var(--base) * 2);
+    --nav-width: 100vw;
+  }
+}
+
+/////////////////////////////
+// GLOBAL STYLES
+/////////////////////////////
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  @extend %body;
+  background: var(--theme-bg);
+  -webkit-font-smoothing: antialiased;
+  opacity: 0;
+
+  &[data-theme='dark'],
+  &[data-theme='light'] {
+    opacity: initial;
+  }
+
+  &[data-theme='dark'] {
+    --theme-bg: var(--theme-elevation-0);
+    --theme-text: var(--theme-elevation-1000);
+    --theme-input-bg: var(--theme-elevation-50);
+    --theme-overlay: rgba(5, 5, 5, 0.75);
+    color-scheme: dark;
+
+    ::selection {
+      color: var(--color-base-1000);
+    }
+
+    ::-moz-selection {
+      color: var(--color-base-1000);
+    }
+  }
+
+  @include mid-break {
+    font-size: 12px;
+  }
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-body);
+  font-weight: 400;
+  color: var(--theme-text);
+  margin: 0;
+  // this is for the nav to be able to push the document over
+  overflow-x: hidden;
+}
+
+::selection {
+  background: var(--theme-success-500);
+  color: var(--theme-base-800);
+}
+
+::-moz-selection {
+  background: var(--theme-success-500);
+  color: var(--theme-base-800);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+h1 {
+  @extend %h1;
+}
+
+h2 {
+  @extend %h2;
+}
+
+h3 {
+  @extend %h3;
+}
+
+h4 {
+  @extend %h4;
+}
+
+h5 {
+  @extend %h5;
+}
+
+h6 {
+  @extend %h6;
+}
+
+p {
+  margin: 0 0 $baseline;
+}
+
+ul,
+ol {
+  padding-left: $baseline;
+  margin: 0 0 $baseline;
+}
+
+:focus-visible {
+  outline: var(--accessibility-outline);
+}
+
+a {
+  color: currentColor;
+
+  &:focus {
+    &:not(:focus-visible) {
+      opacity: 0.8;
+    }
+    outline: none;
+  }
+
+  &:active {
+    opacity: 0.7;
+    outline: none;
+  }
+}
+
+svg {
+  vertical-align: middle;
+}
+
+dialog {
+  width: 100%;
+  border: 0;
+  padding: 0;
+  color: currentColor;
+}
+
+.payload__modal-item {
+  min-height: 100%;
+  background: transparent;
+}
+
+.payload__modal-container--enterDone {
+  overflow: auto;
+}
+
+.payload__modal-item--enter,
+.payload__modal-item--enterDone {
+  z-index: var(--z-modal);
+}
+
+// @import '~payload-user-css'; TODO: re-enable this
diff --git a/packages/richtext-slate/src/scss/colors.scss b/packages/richtext-slate/src/scss/colors.scss
new file mode 100644
index 000000000..9a2d78968
--- /dev/null
+++ b/packages/richtext-slate/src/scss/colors.scss
@@ -0,0 +1,269 @@
+:root {
+  --color-base-0: rgb(255, 255, 255);
+  --color-base-50: rgb(245, 245, 245);
+  --color-base-100: rgb(235, 235, 235);
+  --color-base-150: rgb(221, 221, 221);
+  --color-base-200: rgb(208, 208, 208);
+  --color-base-250: rgb(195, 195, 195);
+  --color-base-300: rgb(181, 181, 181);
+  --color-base-350: rgb(168, 168, 168);
+  --color-base-400: rgb(154, 154, 154);
+  --color-base-450: rgb(141, 141, 141);
+  --color-base-500: rgb(128, 128, 128);
+  --color-base-550: rgb(114, 114, 114);
+  --color-base-600: rgb(101, 101, 101);
+  --color-base-650: rgb(87, 87, 87);
+  --color-base-700: rgb(74, 74, 74);
+  --color-base-750: rgb(60, 60, 60);
+  --color-base-800: rgb(47, 47, 47);
+  --color-base-850: rgb(34, 34, 34);
+  --color-base-900: rgb(20, 20, 20);
+  --color-base-950: rgb(7, 7, 7);
+  --color-base-1000: rgb(0, 0, 0);
+
+  --color-success-50: rgb(247, 255, 251);
+  --color-success-100: rgb(240, 255, 247);
+  --color-success-150: rgb(232, 255, 243);
+  --color-success-200: rgb(224, 255, 239);
+  --color-success-250: rgb(217, 255, 235);
+  --color-success-300: rgb(209, 255, 230);
+  --color-success-350: rgb(201, 255, 226);
+  --color-success-400: rgb(193, 255, 222);
+  --color-success-450: rgb(186, 255, 218);
+  --color-success-500: rgb(178, 255, 214);
+  --color-success-550: rgb(160, 230, 193);
+  --color-success-600: rgb(142, 204, 171);
+  --color-success-650: rgb(125, 179, 150);
+  --color-success-700: rgb(107, 153, 128);
+  --color-success-750: rgb(89, 128, 107);
+  --color-success-800: rgb(71, 102, 86);
+  --color-success-850: rgb(53, 77, 64);
+  --color-success-900: rgb(36, 51, 43);
+  --color-success-950: rgb(18, 25, 21);
+
+  --color-warning-50: rgb(255, 255, 246);
+  --color-warning-100: rgb(255, 255, 237);
+  --color-warning-150: rgb(254, 255, 228);
+  --color-warning-200: rgb(254, 255, 219);
+  --color-warning-250: rgb(254, 255, 210);
+  --color-warning-300: rgb(254, 255, 200);
+  --color-warning-350: rgb(254, 255, 191);
+  --color-warning-400: rgb(253, 255, 182);
+  --color-warning-450: rgb(253, 255, 173);
+  --color-warning-500: rgb(253, 255, 164);
+  --color-warning-550: rgb(228, 230, 148);
+  --color-warning-600: rgb(202, 204, 131);
+  --color-warning-650: rgb(177, 179, 115);
+  --color-warning-700: rgb(152, 153, 98);
+  --color-warning-750: rgb(127, 128, 82);
+  --color-warning-800: rgb(101, 102, 66);
+  --color-warning-850: rgb(76, 77, 49);
+  --color-warning-900: rgb(51, 51, 33);
+  --color-warning-950: rgb(25, 25, 16);
+
+  --color-error-50: rgb(255, 241, 241);
+  --color-error-100: rgb(255, 226, 228);
+  --color-error-150: rgb(255, 212, 214);
+  --color-error-200: rgb(255, 197, 200);
+  --color-error-250: rgb(255, 183, 187);
+  --color-error-300: rgb(255, 169, 173);
+  --color-error-350: rgb(255, 154, 159);
+  --color-error-400: rgb(255, 140, 145);
+  --color-error-450: rgb(255, 125, 132);
+  --color-error-500: rgb(255, 111, 118);
+  --color-error-550: rgb(230, 100, 106);
+  --color-error-600: rgb(204, 89, 94);
+  --color-error-650: rgb(179, 78, 83);
+  --color-error-700: rgb(153, 67, 71);
+  --color-error-750: rgb(128, 56, 59);
+  --color-error-800: rgb(102, 44, 47);
+  --color-error-850: rgb(77, 33, 35);
+  --color-error-900: rgb(51, 22, 24);
+  --color-error-950: rgb(25, 11, 12);
+
+  --color-blue-50: rgb(230, 247, 253);
+  --color-blue-100: rgb(204, 238, 252);
+  --color-blue-150: rgb(179, 230, 250);
+  --color-blue-200: rgb(153, 221, 249);
+  --color-blue-250: rgb(128, 213, 247);
+  --color-blue-300: rgb(102, 204, 245);
+  --color-blue-350: rgb(77, 196, 244);
+  --color-blue-400: rgb(51, 187, 242);
+  --color-blue-450: rgb(25, 179, 241);
+  --color-blue-500: rgb(0, 170, 239);
+  --color-blue-550: rgb(0, 153, 215);
+  --color-blue-600: rgb(0, 136, 191);
+  --color-blue-650: rgb(0, 119, 167);
+  --color-blue-700: rgb(0, 102, 143);
+  --color-blue-750: rgb(0, 85, 120);
+  --color-blue-800: rgb(0, 68, 96);
+  --color-blue-850: rgb(0, 51, 72);
+  --color-blue-900: rgb(0, 34, 48);
+  --color-blue-950: rgb(0, 17, 24);
+
+  --theme-border-color: var(--theme-elevation-150);
+
+  --theme-success-50: var(--color-success-50);
+  --theme-success-100: var(--color-success-100);
+  --theme-success-150: var(--color-success-150);
+  --theme-success-200: var(--color-success-200);
+  --theme-success-250: var(--color-success-250);
+  --theme-success-300: var(--color-success-300);
+  --theme-success-350: var(--color-success-350);
+  --theme-success-400: var(--color-success-400);
+  --theme-success-450: var(--color-success-450);
+  --theme-success-500: var(--color-success-500);
+  --theme-success-550: var(--color-success-550);
+  --theme-success-600: var(--color-success-600);
+  --theme-success-650: var(--color-success-650);
+  --theme-success-700: var(--color-success-700);
+  --theme-success-750: var(--color-success-750);
+  --theme-success-800: var(--color-success-800);
+  --theme-success-850: var(--color-success-850);
+  --theme-success-900: var(--color-success-900);
+  --theme-success-950: var(--color-success-950);
+
+  --theme-warning-50: var(--color-warning-50);
+  --theme-warning-100: var(--color-warning-100);
+  --theme-warning-150: var(--color-warning-150);
+  --theme-warning-200: var(--color-warning-200);
+  --theme-warning-250: var(--color-warning-250);
+  --theme-warning-300: var(--color-warning-300);
+  --theme-warning-350: var(--color-warning-350);
+  --theme-warning-400: var(--color-warning-400);
+  --theme-warning-450: var(--color-warning-450);
+  --theme-warning-500: var(--color-warning-500);
+  --theme-warning-550: var(--color-warning-550);
+  --theme-warning-600: var(--color-warning-600);
+  --theme-warning-650: var(--color-warning-650);
+  --theme-warning-700: var(--color-warning-700);
+  --theme-warning-750: var(--color-warning-750);
+  --theme-warning-800: var(--color-warning-800);
+  --theme-warning-850: var(--color-warning-850);
+  --theme-warning-900: var(--color-warning-900);
+  --theme-warning-950: var(--color-warning-950);
+
+  --theme-error-50: var(--color-error-50);
+  --theme-error-100: var(--color-error-100);
+  --theme-error-150: var(--color-error-150);
+  --theme-error-200: var(--color-error-200);
+  --theme-error-250: var(--color-error-250);
+  --theme-error-300: var(--color-error-300);
+  --theme-error-350: var(--color-error-350);
+  --theme-error-400: var(--color-error-400);
+  --theme-error-450: var(--color-error-450);
+  --theme-error-500: var(--color-error-500);
+  --theme-error-550: var(--color-error-550);
+  --theme-error-600: var(--color-error-600);
+  --theme-error-650: var(--color-error-650);
+  --theme-error-700: var(--color-error-700);
+  --theme-error-750: var(--color-error-750);
+  --theme-error-800: var(--color-error-800);
+  --theme-error-850: var(--color-error-850);
+  --theme-error-900: var(--color-error-900);
+  --theme-error-950: var(--color-error-950);
+
+  --theme-elevation-0: var(--color-base-0);
+  --theme-elevation-50: var(--color-base-50);
+  --theme-elevation-100: var(--color-base-100);
+  --theme-elevation-150: var(--color-base-150);
+  --theme-elevation-200: var(--color-base-200);
+  --theme-elevation-250: var(--color-base-250);
+  --theme-elevation-300: var(--color-base-300);
+  --theme-elevation-350: var(--color-base-350);
+  --theme-elevation-400: var(--color-base-400);
+  --theme-elevation-450: var(--color-base-450);
+  --theme-elevation-500: var(--color-base-500);
+  --theme-elevation-550: var(--color-base-550);
+  --theme-elevation-600: var(--color-base-600);
+  --theme-elevation-650: var(--color-base-650);
+  --theme-elevation-700: var(--color-base-700);
+  --theme-elevation-750: var(--color-base-750);
+  --theme-elevation-800: var(--color-base-800);
+  --theme-elevation-850: var(--color-base-850);
+  --theme-elevation-900: var(--color-base-900);
+  --theme-elevation-950: var(--color-base-950);
+  --theme-elevation-1000: var(--color-base-1000);
+}
+
+html[data-theme='dark'] {
+  --theme-border-color: var(--theme-elevation-150);
+
+  --theme-elevation-0: var(--color-base-900);
+  --theme-elevation-50: var(--color-base-850);
+  --theme-elevation-100: var(--color-base-800);
+  --theme-elevation-150: var(--color-base-750);
+  --theme-elevation-200: var(--color-base-700);
+  --theme-elevation-250: var(--color-base-650);
+  --theme-elevation-300: var(--color-base-600);
+  --theme-elevation-350: var(--color-base-550);
+  --theme-elevation-400: var(--color-base-450);
+  --theme-elevation-450: var(--color-base-400);
+  --theme-elevation-550: var(--color-base-350);
+  --theme-elevation-600: var(--color-base-300);
+  --theme-elevation-650: var(--color-base-250);
+  --theme-elevation-700: var(--color-base-200);
+  --theme-elevation-750: var(--color-base-150);
+  --theme-elevation-800: var(--color-base-100);
+  --theme-elevation-850: var(--color-base-50);
+  --theme-elevation-900: var(--color-base-0);
+  --theme-elevation-950: var(--color-base-0);
+  --theme-elevation-1000: var(--color-base-0);
+
+  --theme-success-50: var(--color-success-950);
+  --theme-success-100: var(--color-success-900);
+  --theme-success-150: var(--color-success-850);
+  --theme-success-200: var(--color-success-800);
+  --theme-success-250: var(--color-success-750);
+  --theme-success-300: var(--color-success-700);
+  --theme-success-350: var(--color-success-650);
+  --theme-success-400: var(--color-success-600);
+  --theme-success-450: var(--color-success-550);
+  --theme-success-550: var(--color-success-450);
+  --theme-success-600: var(--color-success-400);
+  --theme-success-650: var(--color-success-350);
+  --theme-success-700: var(--color-success-300);
+  --theme-success-750: var(--color-success-250);
+  --theme-success-800: var(--color-success-200);
+  --theme-success-850: var(--color-success-150);
+  --theme-success-900: var(--color-success-100);
+  --theme-success-950: var(--color-success-50);
+
+  --theme-warning-50: var(--color-warning-950);
+  --theme-warning-100: var(--color-warning-900);
+  --theme-warning-150: var(--color-warning-850);
+  --theme-warning-200: var(--color-warning-800);
+  --theme-warning-250: var(--color-warning-750);
+  --theme-warning-300: var(--color-warning-700);
+  --theme-warning-350: var(--color-warning-650);
+  --theme-warning-400: var(--color-warning-600);
+  --theme-warning-450: var(--color-warning-550);
+  --theme-warning-550: var(--color-warning-450);
+  --theme-warning-600: var(--color-warning-400);
+  --theme-warning-650: var(--color-warning-350);
+  --theme-warning-700: var(--color-warning-300);
+  --theme-warning-750: var(--color-warning-250);
+  --theme-warning-800: var(--color-warning-200);
+  --theme-warning-850: var(--color-warning-150);
+  --theme-warning-900: var(--color-warning-100);
+  --theme-warning-950: var(--color-warning-50);
+
+  --theme-error-50: var(--color-error-950);
+  --theme-error-100: var(--color-error-900);
+  --theme-error-150: var(--color-error-850);
+  --theme-error-200: var(--color-error-800);
+  --theme-error-250: var(--color-error-750);
+  --theme-error-300: var(--color-error-700);
+  --theme-error-350: var(--color-error-650);
+  --theme-error-400: var(--color-error-600);
+  --theme-error-450: var(--color-error-550);
+  --theme-error-550: var(--color-error-450);
+  --theme-error-600: var(--color-error-400);
+  --theme-error-650: var(--color-error-350);
+  --theme-error-700: var(--color-error-300);
+  --theme-error-750: var(--color-error-250);
+  --theme-error-800: var(--color-error-200);
+  --theme-error-850: var(--color-error-150);
+  --theme-error-900: var(--color-error-100);
+  --theme-error-950: var(--color-error-50);
+}
diff --git a/packages/richtext-slate/src/scss/custom.css b/packages/richtext-slate/src/scss/custom.css
new file mode 100644
index 000000000..02370a8ab
--- /dev/null
+++ b/packages/richtext-slate/src/scss/custom.css
@@ -0,0 +1 @@
+/* Used as a placeholder for when the Payload app does not have custom CSS */
diff --git a/packages/richtext-slate/src/scss/fonts.scss b/packages/richtext-slate/src/scss/fonts.scss
new file mode 100644
index 000000000..f40a8b722
--- /dev/null
+++ b/packages/richtext-slate/src/scss/fonts.scss
@@ -0,0 +1,75 @@
+@font-face {
+  font-family: 'Suisse Intl';
+  src:
+    url('../assets/fonts/SuisseIntl.woff2') format('woff2'),
+    url('../assets/fonts/SuisseIntl.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Suisse Intl';
+  src:
+    url('../assets/fonts/SuisseIntl-Medium.woff2') format('woff2'),
+    url('../assets/fonts/SuisseIntl-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Suisse Intl';
+  src:
+    url('../assets/fonts/SuisseIntl-SemiBold.woff2') format('woff2'),
+    url('../assets/fonts/SuisseIntl-SemiBold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Suisse Intl';
+  src:
+    url('../assets/fonts/SuisseIntl-Bold.woff2') format('woff2'),
+    url('../assets/fonts/SuisseIntl-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 400;
+  src:
+    local(''),
+    url('../assets/fonts/merriweather-v30-latin-regular.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: italic;
+  font-weight: 400;
+  src:
+    local(''),
+    url('../assets/fonts/merriweather-v30-latin-italic.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-italic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 900;
+  src:
+    local(''),
+    url('../assets/fonts/merriweather-v30-latin-900.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-900.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-style: italic;
+  font-weight: 900;
+  src:
+    local(''),
+    url('../assets/fonts/merriweather-v30-latin-900italic.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-900italic.woff') format('woff');
+}
diff --git a/packages/richtext-slate/src/scss/queries.scss b/packages/richtext-slate/src/scss/queries.scss
new file mode 100644
index 000000000..81bbcb080
--- /dev/null
+++ b/packages/richtext-slate/src/scss/queries.scss
@@ -0,0 +1,27 @@
+////////////////////////////
+// MEDIA QUERIES
+/////////////////////////////
+
+@mixin extra-small-break {
+  @media (max-width: $breakpoint-xs-width) {
+    @content;
+  }
+}
+
+@mixin small-break {
+  @media (max-width: $breakpoint-s-width) {
+    @content;
+  }
+}
+
+@mixin mid-break {
+  @media (max-width: $breakpoint-m-width) {
+    @content;
+  }
+}
+
+@mixin large-break {
+  @media (max-width: $breakpoint-l-width) {
+    @content;
+  }
+}
diff --git a/packages/richtext-slate/src/scss/resets.scss b/packages/richtext-slate/src/scss/resets.scss
new file mode 100644
index 000000000..eeda892c2
--- /dev/null
+++ b/packages/richtext-slate/src/scss/resets.scss
@@ -0,0 +1,17 @@
+%btn-reset {
+  border: 0;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;
+  color: currentColor;
+}
+
+@mixin btn-reset {
+  border: 0;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;
+  color: currentColor;
+}
diff --git a/packages/richtext-slate/src/scss/styles.scss b/packages/richtext-slate/src/scss/styles.scss
new file mode 100644
index 000000000..65aa3d3e9
--- /dev/null
+++ b/packages/richtext-slate/src/scss/styles.scss
@@ -0,0 +1,11 @@
+@import 'vars';
+@import 'z-index';
+
+//////////////////////////////
+// IMPORT OVERRIDES
+//////////////////////////////
+
+@import 'type';
+@import 'queries';
+@import 'resets';
+@import 'svg';
diff --git a/packages/richtext-slate/src/scss/svg.scss b/packages/richtext-slate/src/scss/svg.scss
new file mode 100644
index 000000000..7a9fa767b
--- /dev/null
+++ b/packages/richtext-slate/src/scss/svg.scss
@@ -0,0 +1,10 @@
+@mixin color-svg($color) {
+  .stroke {
+    stroke: $color;
+    fill: none;
+  }
+
+  .fill {
+    fill: $color;
+  }
+}
diff --git a/packages/richtext-slate/src/scss/toastify.scss b/packages/richtext-slate/src/scss/toastify.scss
new file mode 100644
index 000000000..002bdbbc8
--- /dev/null
+++ b/packages/richtext-slate/src/scss/toastify.scss
@@ -0,0 +1,59 @@
+@import 'vars';
+@import '../../node_modules/react-toastify/dist/ReactToastify.css';
+
+.Toastify {
+  .Toastify__toast-container {
+    left: base(5);
+    transform: none;
+    right: base(5);
+    width: auto;
+  }
+
+  .Toastify__toast {
+    padding: base(0.5);
+    border-radius: $style-radius-m;
+    font-weight: 600;
+  }
+
+  .Toastify__close-button {
+    align-self: center;
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .Toastify__toast--success {
+    color: var(--color-success-900);
+    background: var(--color-success-500);
+
+    .Toastify__progress-bar {
+      background-color: var(--color-success-900);
+    }
+  }
+
+  .Toastify__close-button--success {
+    color: var(--color-success-900);
+  }
+
+  .Toastify__toast--error {
+    background: var(--theme-error-500);
+    color: #fff;
+
+    .Toastify__progress-bar {
+      background-color: #fff;
+    }
+  }
+
+  .Toastify__close-button--light {
+    color: inherit;
+  }
+
+  @include mid-break {
+    .Toastify__toast-container {
+      left: $baseline;
+      right: $baseline;
+    }
+  }
+}
diff --git a/packages/richtext-slate/src/scss/type.scss b/packages/richtext-slate/src/scss/type.scss
new file mode 100644
index 000000000..57b318a34
--- /dev/null
+++ b/packages/richtext-slate/src/scss/type.scss
@@ -0,0 +1,117 @@
+@import 'vars';
+@import 'queries';
+
+/////////////////////////////
+// HEADINGS
+/////////////////////////////
+
+%h1,
+%h2,
+%h3,
+%h4,
+%h5,
+%h6 {
+  font-family: var(--font-body);
+  font-weight: 500;
+}
+
+%jumbo {
+  font-size: base(2.5);
+  line-height: 1;
+  margin: 0 0 base(2);
+}
+
+%h1 {
+  margin: 0 0 base(1);
+  font-size: base(2);
+  line-height: 1.15;
+  letter-spacing: -1px;
+
+  @include small-break {
+    letter-spacing: -0.5px;
+    font-size: base(1.25);
+  }
+}
+
+%h2 {
+  margin: 0 0 base(1);
+  font-size: base(1.25);
+  line-height: 1.15;
+  letter-spacing: -0.5px;
+
+  @include small-break {
+    font-size: base(0.85);
+  }
+}
+
+%h3 {
+  margin: 0 0 base(1);
+  font-size: base(0.925);
+  line-height: 1.25;
+  letter-spacing: -0.5px;
+
+  @include small-break {
+    font-size: base(0.65);
+    line-height: 1.25;
+  }
+}
+
+%h4 {
+  margin: 0 0 $baseline;
+  font-size: base(0.75);
+  line-height: 1.5;
+  letter-spacing: -0.375px;
+}
+
+%h5 {
+  margin: 0;
+  font-size: base(0.5625);
+  line-height: 1.5;
+}
+
+%h6 {
+  margin: 0;
+  font-size: base(0.5);
+  line-height: 1.5;
+}
+
+%small {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+/////////////////////////////
+// TYPE STYLES
+/////////////////////////////
+
+%large-body {
+  font-size: base(0.6);
+  line-height: base(1);
+  letter-spacing: base(0.02);
+
+  @include mid-break {
+    font-size: base(0.7);
+    line-height: base(1);
+  }
+
+  @include small-break {
+    font-size: base(0.55);
+    line-height: base(0.75);
+  }
+}
+
+%body {
+  font-size: $baseline-body-size;
+  line-height: $baseline-px;
+  font-weight: normal;
+}
+
+%code {
+  font-size: base(0.4);
+  color: var(--theme-elevation-400);
+
+  span {
+    color: var(--theme-elevation-800);
+  }
+}
diff --git a/packages/richtext-slate/src/scss/vars.scss b/packages/richtext-slate/src/scss/vars.scss
new file mode 100644
index 000000000..ce16a434b
--- /dev/null
+++ b/packages/richtext-slate/src/scss/vars.scss
@@ -0,0 +1,220 @@
+@use 'sass:math';
+
+/////////////////////////////
+// BREAKPOINTS
+/////////////////////////////
+
+$breakpoint-xs-width: 400px !default;
+$breakpoint-s-width: 768px !default;
+$breakpoint-m-width: 1024px !default;
+$breakpoint-l-width: 1440px !default;
+
+//////////////////////////////
+// BASELINE GRID
+//////////////////////////////
+
+$baseline-px: 25px !default;
+$baseline-body-size: 13px !default;
+$baseline: math.div($baseline-px, $baseline-body-size) + rem;
+
+@function base($multiplier) {
+  @return (math.div($baseline-px, $baseline-body-size) * $multiplier) + rem;
+}
+
+//////////////////////////////
+// FONTS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+//////////////////////////////
+
+$font-body: 'Suisse Intl' !default;
+$font-mono: monospace !default;
+
+//////////////////////////////
+// COLORS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+//////////////////////////////
+
+$color-dark-gray: #333333 !default;
+$color-gray: #9a9a9a !default;
+$color-light-gray: #dadada !default;
+$color-background-gray: #f3f3f3 !default;
+$color-red: #ff6f76 !default;
+$color-yellow: #fdffa4 !default;
+$color-green: #b2ffd6 !default;
+$color-purple: #f3ddf3 !default;
+
+//////////////////////////////
+// STYLES
+//////////////////////////////
+
+$style-radius-s: 3px !default;
+$style-radius-m: 4px !default;
+$style-radius-l: 9px !default;
+$style-stroke-width: 1px !default;
+
+$style-stroke-width-s: 1px !default;
+$style-stroke-width-m: 2px !default;
+
+//////////////////////////////
+// MISC
+//////////////////////////////
+
+$top-header-offset: calc(var(--base) - 1px);
+$top-header-offset-m: calc(var(--base) * 3);
+$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
+
+//////////////////////////////
+// SHADOWS
+//////////////////////////////
+
+@mixin shadow-sm {
+  box-shadow:
+    0 2px 3px 0 rgba(0, 2, 4, 0.05),
+    0 10px 4px -8px rgba(0, 2, 4, 0.02);
+}
+
+@mixin shadow-m {
+  box-shadow:
+    0 0 30px 0 rgb(0 2 4 / 12%),
+    0 30px 25px -8px rgb(0 2 4 / 10%);
+}
+
+@mixin shadow-lg {
+  box-shadow:
+    0 20px 35px -10px rgba(0, 2, 4, 0.2),
+    0 6px 4px -4px rgba(0, 2, 4, 0.02);
+}
+
+@mixin shadow-lg-top {
+  box-shadow:
+    0 -20px 35px -10px rgba(0, 2, 4, 0.2),
+    0 -6px 4px -4px rgba(0, 2, 4, 0.02);
+}
+
+@mixin shadow {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+}
+
+@mixin inputShadowActive {
+  box-shadow:
+    0 2px 3px 0 rgba(0, 2, 4, 0.16),
+    0 6px 4px -4px rgba(0, 2, 4, 0.13);
+}
+
+@mixin inputShadow {
+  @include shadow-sm;
+
+  &:not(:disabled) {
+    &:hover {
+      box-shadow:
+        0 2px 3px 0 rgba(0, 2, 4, 0.13),
+        0 6px 4px -4px rgba(0, 2, 4, 0.1);
+    }
+
+    &:active,
+    &:focus-within,
+    &:focus {
+      @include inputShadowActive;
+    }
+  }
+}
+
+@mixin soft-shadow-bottom {
+  box-shadow: 0 7px 14px 0px rgb(0 0 0 / 5%);
+}
+
+//////////////////////////////
+// STYLE MIXINS
+//////////////////////////////
+
+@mixin blur-bg($color: var(--theme-bg), $opacity: 0.75) {
+  &:before,
+  &:after {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &:before {
+    background: $color;
+    opacity: $opacity;
+  }
+
+  &:after {
+    backdrop-filter: blur(8px);
+  }
+}
+
+@mixin blur-bg-light {
+  @include blur-bg(var(--theme-bg), 0.3);
+}
+
+@mixin formInput() {
+  @include inputShadow;
+  font-family: var(--font-body);
+  width: 100%;
+  border: 1px solid var(--theme-elevation-150);
+  background: var(--theme-input-bg);
+  color: var(--theme-elevation-800);
+  border-radius: 0;
+  font-size: 1rem;
+  height: base(2);
+  line-height: base(1);
+  padding: base(0.5) base(0.75);
+  -webkit-appearance: none;
+
+  &[data-rtl='true'] {
+    direction: rtl;
+  }
+
+  &::-webkit-input-placeholder {
+    color: var(--theme-elevation-400);
+    font-weight: normal;
+    font-size: 1rem;
+  }
+
+  &::-moz-placeholder {
+    color: var(--theme-elevation-400);
+    font-weight: normal;
+    font-size: 1rem;
+  }
+
+  &:hover {
+    border-color: var(--theme-elevation-250);
+  }
+
+  &:focus,
+  &:focus-within,
+  &:active {
+    border-color: var(--theme-elevation-400);
+    outline: 0;
+  }
+
+  &:disabled {
+    background: var(--theme-elevation-200);
+    color: var(--theme-elevation-450);
+
+    &:hover {
+      border-color: var(--theme-elevation-150);
+    }
+  }
+}
+
+@mixin lightInputError {
+  background-color: var(--theme-error-50);
+  border: 1px solid var(--theme-error-500);
+}
+
+@mixin darkInputError {
+  background-color: var(--theme-error-100);
+  border: 1px solid var(--theme-error-400);
+
+  &:hover {
+    border-color: var(--theme-error-500);
+  }
+}
diff --git a/packages/richtext-slate/src/scss/z-index.scss b/packages/richtext-slate/src/scss/z-index.scss
new file mode 100644
index 000000000..50c79d53c
--- /dev/null
+++ b/packages/richtext-slate/src/scss/z-index.scss
@@ -0,0 +1,9 @@
+/////////////////////////////
+// Z-INDEX CHART (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+/////////////////////////////
+
+$z-page: 20;
+$z-page-content: 30;
+$z-nav: 40;
+$z-modal: 50;
+$z-status: 60;
diff --git a/test/buildConfigWithDefaults.ts b/test/buildConfigWithDefaults.ts
index b88399637..f30904e70 100644
--- a/test/buildConfigWithDefaults.ts
+++ b/test/buildConfigWithDefaults.ts
@@ -1,10 +1,10 @@
-import {
-  AlignFeature,
-  BlockQuoteFeature,
-  BlocksFeature,
-  LinkFeature,
-  lexicalEditor,
-} from '@payloadcms/richtext-lexical'
+// import {
+//   AlignFeature,
+//   BlockQuoteFeature,
+//   BlocksFeature,
+//   LinkFeature,
+//   lexicalEditor,
+// } from '@payloadcms/richtext-lexical'
 import path from 'path'
 
 import type { Config, SanitizedConfig } from '../packages/payload/src/config/types'
@@ -12,7 +12,7 @@ import type { Config, SanitizedConfig } from '../packages/payload/src/config/typ
 import { mongooseAdapter } from '../packages/db-mongodb/src'
 import { postgresAdapter } from '../packages/db-postgres/src'
 import { buildConfig as buildPayloadConfig } from '../packages/payload/src/config/build'
-//import { slateEditor } from '../packages/richtext-slate/src'
+import { slateEditor } from '../packages/richtext-slate/src'
 
 // process.env.PAYLOAD_DATABASE = 'postgres'
 
@@ -62,7 +62,7 @@ export function buildConfigWithDefaults(testConfig?: Partial<Config>): Promise<S
   const config: Config = {
     db: databaseAdapters[process.env.PAYLOAD_DATABASE || 'mongoose'],
     secret: 'TEST_SECRET',
-    /*editor: slateEditor({
+    editor: slateEditor({
       admin: {
         upload: {
           collections: {
@@ -77,31 +77,31 @@ export function buildConfigWithDefaults(testConfig?: Partial<Config>): Promise<S
           },
         },
       },
-    }),*/
-    editor: lexicalEditor({
-      features: [
-        LinkFeature({}),
-        AlignFeature(),
-        BlockQuoteFeature(),
-        BlocksFeature({
-          blocks: [
-            {
-              slug: 'myBlock',
-              fields: [
-                {
-                  name: 'title',
-                  type: 'text',
-                },
-                {
-                  name: 'content',
-                  type: 'textarea',
-                },
-              ],
-            },
-          ],
-        }),
-      ],
     }),
+    // editor: lexicalEditor({
+    //   features: [
+    //     LinkFeature({}),
+    //     AlignFeature(),
+    //     BlockQuoteFeature(),
+    //     BlocksFeature({
+    //       blocks: [
+    //         {
+    //           slug: 'myBlock',
+    //           fields: [
+    //             {
+    //               name: 'title',
+    //               type: 'text',
+    //             },
+    //             {
+    //               name: 'content',
+    //               type: 'textarea',
+    //             },
+    //           ],
+    //         },
+    //       ],
+    //     }),
+    //   ],
+    // }),
     rateLimit: {
       max: 9999999999,
       window: 15 * 60 * 1000, // 15min default,