diff --git a/services/web/app/src/infrastructure/ExpressLocals.js b/services/web/app/src/infrastructure/ExpressLocals.js
index 27db546836..84cda0d349 100644
--- a/services/web/app/src/infrastructure/ExpressLocals.js
+++ b/services/web/app/src/infrastructure/ExpressLocals.js
@@ -197,6 +197,11 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
     }
 
     res.locals.buildCssPath = function (themeModifier = '') {
+      if (
+        res.locals.splitTestVariants?.['design-system-updates'] === 'enabled'
+      ) {
+        themeModifier = `main-${themeModifier}`
+      }
       return res.locals.buildStylesheetPath(`${themeModifier}style.css`)
     }
 
diff --git a/services/web/app/src/router.js b/services/web/app/src/router.js
index ce683b5a17..13918e9cce 100644
--- a/services/web/app/src/router.js
+++ b/services/web/app/src/router.js
@@ -79,7 +79,10 @@ function initialize(webRouter, privateApiRouter, publicApiRouter) {
   webRouter.get(
     '*',
     expressify(
-      SplitTestMiddleware.loadAssignmentsInLocals(['unified-navigation'])
+      SplitTestMiddleware.loadAssignmentsInLocals([
+        'unified-navigation',
+        'design-system-updates',
+      ])
     )
   )
 
diff --git a/services/web/frontend/stylesheets/main-ieee-style.less b/services/web/frontend/stylesheets/main-ieee-style.less
new file mode 100644
index 0000000000..a191e8a560
--- /dev/null
+++ b/services/web/frontend/stylesheets/main-ieee-style.less
@@ -0,0 +1,43 @@
+@import 'style.less';
+@import 'core/ol-ieee-variables.less';
+
+@is-overleaf-light: false;
+@show-rich-text: true;
+
+@ieee-wedge: 30px;
+
+body > .portal-ieee {
+  padding-top: @header-height;
+}
+
+.portal-ieee {
+  .ieee-header {
+    background-color: @ieee-blue;
+    margin-bottom: @margin-xl;
+    padding-bottom: @padding-sm;
+    padding-top: @padding-sm;
+    h1 {
+      margin: 0;
+    }
+    .ieee-logo {
+      width: @navbar-brand-width;
+    }
+  }
+  .ieee-subheader {
+    background-color: @ieee-blue;
+    color: #ffffff;
+    line-height: 1;
+    padding: @padding-md @ieee-wedge;
+    position: relative;
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      border-style: solid;
+      left: -1px;
+      top: -1px;
+      border-color: @content-alt-bg-color transparent;
+      border-width: @ieee-wedge @ieee-wedge 0 0;
+    }
+  }
+}
diff --git a/services/web/frontend/stylesheets/main-light-style.less b/services/web/frontend/stylesheets/main-light-style.less
new file mode 100644
index 0000000000..afb2e4cd24
--- /dev/null
+++ b/services/web/frontend/stylesheets/main-light-style.less
@@ -0,0 +1,5 @@
+@import 'style.less';
+@import 'core/ol-light-variables.less';
+
+@is-overleaf-light: true;
+@show-rich-text: true;
diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less
new file mode 100644
index 0000000000..344fc67c7f
--- /dev/null
+++ b/services/web/frontend/stylesheets/main-style.less
@@ -0,0 +1,28 @@
+@import (less) '../fonts/lato.css';
+@import (less) '../fonts/merriweather.css';
+@import (less) '../fonts/source-code-pro.css';
+@import (less) '../fonts/stix-two-math.css';
+
+@is-overleaf-light: false;
+@show-rich-text: true;
+
+// Core variables and mixins
+@import 'core/variables.less';
+@import 'core/css-variables.less';
+@import 'app/ol-style-guide.less';
+@import '_style_includes.less';
+@import '_ol_style_includes.less';
+@import 'components/embed-responsive.less';
+@import 'components/icons.less';
+@import 'components/images.less';
+@import 'components/navs-ol.less';
+@import 'components/pagination.less';
+@import 'components/tabs.less';
+
+// Pages
+@import 'app/about.less';
+@import 'app/blog-posts.less';
+@import 'app/cms-page.less';
+@import 'app/content_page.less';
+@import 'app/plans-ol.less';
+@import 'app/portals.less';
diff --git a/services/web/webpack.config.js b/services/web/webpack.config.js
index a4d3f87592..2fcd9c4de0 100644
--- a/services/web/webpack.config.js
+++ b/services/web/webpack.config.js
@@ -19,6 +19,9 @@ const entryPoints = {
   style: './frontend/stylesheets/style.less',
   'ieee-style': './frontend/stylesheets/ieee-style.less',
   'light-style': './frontend/stylesheets/light-style.less',
+  'main-style': './frontend/stylesheets/main-style.less',
+  'main-ieee-style': './frontend/stylesheets/main-ieee-style.less',
+  'main-light-style': './frontend/stylesheets/main-light-style.less',
 }
 
 // Add entrypoints for each "page"