diff --git a/docs/index.rst b/docs/index.rst
index fd0c303ef..2e19b69f9 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -28,6 +28,7 @@ Part 2: Developer's Guide
    localization
    search
    frontend
+   svelte
    browser_permissions
    zendesk
    notes
diff --git a/docs/svelte.md b/docs/svelte.md
new file mode 100644
index 000000000..6f282a3c5
--- /dev/null
+++ b/docs/svelte.md
@@ -0,0 +1,48 @@
+# Svelte
+
+## CSS/SASS
+
+Svelte supports writing CSS directly in a component within `<style>` tags,
+as well as writing compiled-to-CSS languages like SASS within `<style lang="scss">` tags.
+
+CSS written this way is automatically scoped to the component:
+[read more in the Svelte docs](https://svelte.dev/docs#component-format-style).
+
+This SASS to CSS compilation is handled by `svelte-preprocess`,
+and the resulting CSS is handed to Wepback for further processing.
+Since Webpack isn't involved in SASS compilation within Svelte components,
+care must be taken in a few areas:
+
+1. Because Webpack isn't handling `@use` and `@import` resolution,
+   it's not possible to use its aliases to reference paths to other SASS files.
+   Instead paths relative to the Svelte component,
+   or full node module paths,
+   must be used.
+   This _doesn't_ include paths not processed by the SASS compiler,
+   such as paths to images in `url()` functions,
+   as these are still handled by Webpack.
+   To illustrate:
+
+```scss
+@use "@mozilla-protocol/core/protocol/css/includes/lib" as p;
+@use "../../kitsune/sumo/static/sumo/scss/config/typography-mixins";
+// ^ here we must use a full or relative path, as svelte-preprocess is resolving this
+
+div {
+    background: url("protocol/img/icons/reader-mode.svg");
+    // ^ here we can use a webpack alias, as webpack is resolving this
+    background-size: p.$spacing-md;
+    @include typography-mixins.text-display-sm;
+}
+```
+
+2. As a knock-on effect of the above,
+   any partials used in both our main CSS bundle,
+   as well as a Svelte component (like the `typography-mixins` above)
+   must not use Webpack aliases in their own imports,
+   otherwise `svelte-preprocess` won't be able to resolve them.
+
+3. Partials should be careful to not accidentally include or import CSS blocks outside of mixin defintions.
+   This is because neither `svelte-preprocess` nor the Webpack `sass-loader` are able to chunk split `@import`s and `@use`s,
+   or even de-duplicate their use across Svelte components (due to the scoped nature of the CSS within).
+   Not doing this will lead to unnecessarily duplicated code.
diff --git a/kitsune/sumo/static/sumo/scss/base/_definition-list.scss b/kitsune/sumo/static/sumo/scss/base/_definition-list.scss
index b5a454fbc..9ca34df46 100644
--- a/kitsune/sumo/static/sumo/scss/base/_definition-list.scss
+++ b/kitsune/sumo/static/sumo/scss/base/_definition-list.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 .sumo-dl {
   display: flex;
diff --git a/kitsune/sumo/static/sumo/scss/base/_table.scss b/kitsune/sumo/static/sumo/scss/base/_table.scss
index e0a4f5aeb..d2651439c 100644
--- a/kitsune/sumo/static/sumo/scss/base/_table.scss
+++ b/kitsune/sumo/static/sumo/scss/base/_table.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 
 // Tables
diff --git a/kitsune/sumo/static/sumo/scss/base/_typography.scss b/kitsune/sumo/static/sumo/scss/base/_typography.scss
index cdc5ea193..77d7f74a3 100644
--- a/kitsune/sumo/static/sumo/scss/base/_typography.scss
+++ b/kitsune/sumo/static/sumo/scss/base/_typography.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Typography
 //
diff --git a/kitsune/sumo/static/sumo/scss/base/_utilities.scss b/kitsune/sumo/static/sumo/scss/base/_utilities.scss
index f18074e0f..fd2d12459 100644
--- a/kitsune/sumo/static/sumo/scss/base/_utilities.scss
+++ b/kitsune/sumo/static/sumo/scss/base/_utilities.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Expanded link utility
 //
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_button-wrap.scss b/kitsune/sumo/static/sumo/scss/base/forms/_button-wrap.scss
index 09e94f714..b7df2c889 100644
--- a/kitsune/sumo/static/sumo/scss/base/forms/_button-wrap.scss
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_button-wrap.scss
@@ -1,5 +1,5 @@
 @use '../../config' as c;
-@use '../../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Button Wrap element
 //
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_buttons.scss b/kitsune/sumo/static/sumo/scss/base/forms/_buttons.scss
index 5fefe3fc8..5399b271a 100644
--- a/kitsune/sumo/static/sumo/scss/base/forms/_buttons.scss
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_buttons.scss
@@ -1,5 +1,5 @@
 @use '../../config' as c;
-@use '../../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Buttons
 //
@@ -238,7 +238,7 @@ input[type=submit]:focus {
   background: transparent;
   font: 0/0 a;
   color: transparent;
-  background-image: url('#{p.$image-path}/icons/more-vertical.svg');
+  background-image: url('protocol/img/icons/more-vertical.svg');
   background-size: p.$spacing-lg p.$spacing-lg;
   background-position: center center;
   background-repeat: no-repeat;
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_fields.scss b/kitsune/sumo/static/sumo/scss/base/forms/_fields.scss
index b2f57c1b4..e26bb94e7 100644
--- a/kitsune/sumo/static/sumo/scss/base/forms/_fields.scss
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_fields.scss
@@ -1,5 +1,5 @@
-@use '../../config'as c;
-@use '../../protocol'as p;
+@use '../../config' as c;
+@use 'protocol/css/includes/lib' as p;
 
 :root {
   --field-border-color-default: var(--color-marketing-gray-05);
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_radios-checkboxes.scss b/kitsune/sumo/static/sumo/scss/base/forms/_radios-checkboxes.scss
index e896dc7e2..b6f2d5697 100644
--- a/kitsune/sumo/static/sumo/scss/base/forms/_radios-checkboxes.scss
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_radios-checkboxes.scss
@@ -1,5 +1,5 @@
 @use '../../config' as c;
-@use '../../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Checkboxes
 //
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_range.scss b/kitsune/sumo/static/sumo/scss/base/forms/_range.scss
index ac4fc7779..d7abcbb70 100644
--- a/kitsune/sumo/static/sumo/scss/base/forms/_range.scss
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_range.scss
@@ -1,5 +1,5 @@
 @use '../../config' as c;
-@use '../../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Range inputs
 //
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_simple-search-form.scss b/kitsune/sumo/static/sumo/scss/base/forms/_simple-search-form.scss
index 06bc09095..33cd3bd62 100644
--- a/kitsune/sumo/static/sumo/scss/base/forms/_simple-search-form.scss
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_simple-search-form.scss
@@ -1,5 +1,5 @@
 @use '../../config' as c;
-@use '../../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 .simple-search-form {
   position: relative;
@@ -45,7 +45,7 @@
   height: p.$spacing-xl;
   border: none;
   border-radius: p.$spacing-xs;
-  background-image: url('#{p.$image-path}/icons/search.svg');
+  background-image: url('protocol/img/icons/search.svg');
   background-color: transparent;
   background-position: center center;
   background-repeat: no-repeat;
diff --git a/kitsune/sumo/static/sumo/scss/base/forms/_toggles.scss b/kitsune/sumo/static/sumo/scss/base/forms/_toggles.scss
index f465f31c4..5fb18f8be 100644
--- a/kitsune/sumo/static/sumo/scss/base/forms/_toggles.scss
+++ b/kitsune/sumo/static/sumo/scss/base/forms/_toggles.scss
@@ -1,5 +1,5 @@
 @use '../../config' as c;
-@use '../../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Toggles
 //
diff --git a/kitsune/sumo/static/sumo/scss/components/_avatar-group.scss b/kitsune/sumo/static/sumo/scss/components/_avatar-group.scss
index 9d40cb41b..dac71e24e 100644
--- a/kitsune/sumo/static/sumo/scss/components/_avatar-group.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_avatar-group.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 .avatar-group {
   @include c.grid-row();
diff --git a/kitsune/sumo/static/sumo/scss/components/_banner.scss b/kitsune/sumo/static/sumo/scss/components/_banner.scss
index a9058c335..371169c70 100644
--- a/kitsune/sumo/static/sumo/scss/components/_banner.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_banner.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Banners
 //
diff --git a/kitsune/sumo/static/sumo/scss/components/_breadcrumbs.scss b/kitsune/sumo/static/sumo/scss/components/_breadcrumbs.scss
index 33642946a..fd6dd1e63 100644
--- a/kitsune/sumo/static/sumo/scss/components/_breadcrumbs.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_breadcrumbs.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Breadcrumbs
 //
diff --git a/kitsune/sumo/static/sumo/scss/components/_card-grid.scss b/kitsune/sumo/static/sumo/scss/components/_card-grid.scss
index 6b4419e7c..e3736ad26 100644
--- a/kitsune/sumo/static/sumo/scss/components/_card-grid.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_card-grid.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Card Grid
 //
diff --git a/kitsune/sumo/static/sumo/scss/components/_card.scss b/kitsune/sumo/static/sumo/scss/components/_card.scss
index c1c4fdbc4..62fefb26d 100644
--- a/kitsune/sumo/static/sumo/scss/components/_card.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_card.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Cards
 //
diff --git a/kitsune/sumo/static/sumo/scss/components/_editor-tools.scss b/kitsune/sumo/static/sumo/scss/components/_editor-tools.scss
index b38928cbf..c647a7e58 100644
--- a/kitsune/sumo/static/sumo/scss/components/_editor-tools.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_editor-tools.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 div.editor-tools {
   &:not(:empty) {
diff --git a/kitsune/sumo/static/sumo/scss/components/_icon-links.scss b/kitsune/sumo/static/sumo/scss/components/_icon-links.scss
index e4b9ab18d..6679c7d22 100644
--- a/kitsune/sumo/static/sumo/scss/components/_icon-links.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_icon-links.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 .has-icon,
 .is-details .mzp-c-menu-list-item a.has-icon {
diff --git a/kitsune/sumo/static/sumo/scss/components/_inbox.scss b/kitsune/sumo/static/sumo/scss/components/_inbox.scss
index 16c442da3..3cfefece1 100644
--- a/kitsune/sumo/static/sumo/scss/components/_inbox.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_inbox.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 
 .message-list {
diff --git a/kitsune/sumo/static/sumo/scss/components/_kbox--todo-remove.scss b/kitsune/sumo/static/sumo/scss/components/_kbox--todo-remove.scss
index b4c5a95a7..80b2b7e82 100644
--- a/kitsune/sumo/static/sumo/scss/components/_kbox--todo-remove.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_kbox--todo-remove.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // This component should be replaced with Protocol's modal system, because
 // it doesn't make sense to include two of them. However, this plugin is doing
diff --git a/kitsune/sumo/static/sumo/scss/components/_modal.scss b/kitsune/sumo/static/sumo/scss/components/_modal.scss
index 9870ea325..3daf8f470 100644
--- a/kitsune/sumo/static/sumo/scss/components/_modal.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_modal.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 
 .mzp-c-modal-inner {
@@ -11,7 +11,7 @@
 }
 
 .mzp-c-modal-close .mzp-c-modal-button-close {
-  background: transparent url("#{p.$image-path}/icons/close.svg") center center no-repeat;
+  background: transparent url("protocol/img/icons/close.svg") center center no-repeat;
 }
 
 
diff --git a/kitsune/sumo/static/sumo/scss/components/_notifications.scss b/kitsune/sumo/static/sumo/scss/components/_notifications.scss
index 840c36c76..5a87e6243 100644
--- a/kitsune/sumo/static/sumo/scss/components/_notifications.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_notifications.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // This is a container for Protocol notifications. See
 // https://protocol.mozilla.org/patterns/molecules/notification-bar.html
diff --git a/kitsune/sumo/static/sumo/scss/components/_pagination.scss b/kitsune/sumo/static/sumo/scss/components/_pagination.scss
index 1ffb090c1..ba3553a43 100644
--- a/kitsune/sumo/static/sumo/scss/components/_pagination.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_pagination.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Pagination
 //
diff --git a/kitsune/sumo/static/sumo/scss/components/_product-picker-dropdown.scss b/kitsune/sumo/static/sumo/scss/components/_product-picker-dropdown.scss
index 9c3f594f3..324bf58af 100644
--- a/kitsune/sumo/static/sumo/scss/components/_product-picker-dropdown.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_product-picker-dropdown.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 .is-details.mzp-c-menu-list.featured-dropdown,
 .is-details.mzp-c-menu-list.subheading-dropdown, {
diff --git a/kitsune/sumo/static/sumo/scss/components/_progress-bar.scss b/kitsune/sumo/static/sumo/scss/components/_progress-bar.scss
index 83956b168..635a422cd 100644
--- a/kitsune/sumo/static/sumo/scss/components/_progress-bar.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_progress-bar.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Progress Bar
 //
diff --git a/kitsune/sumo/static/sumo/scss/components/_sidebar-nav.scss b/kitsune/sumo/static/sumo/scss/components/_sidebar-nav.scss
index 176a99ffa..6812ad045 100644
--- a/kitsune/sumo/static/sumo/scss/components/_sidebar-nav.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_sidebar-nav.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Sidebar navigation
 //
@@ -62,7 +62,7 @@
   .related-document,
   .related-question {
     @include c.text-body-md;
-    background-image: url("#{p.$image-path}/icons/blog.svg");
+    background-image: url("protocol/img/icons/blog.svg");
     background-repeat: no-repeat;
     background-position: 0px 6px;
     background-size: p.$spacing-md p.$spacing-md;
@@ -70,7 +70,7 @@
   }
 
   .related-document {
-    background-image: url("#{p.$image-path}/icons/reader-mode.svg");
+    background-image: url("protocol/img/icons/reader-mode.svg");
   }
 
   li.selected > :link,
diff --git a/kitsune/sumo/static/sumo/scss/components/_tabs.scss b/kitsune/sumo/static/sumo/scss/components/_tabs.scss
index 2cc1eae5e..8b20c10fd 100644
--- a/kitsune/sumo/static/sumo/scss/components/_tabs.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_tabs.scss
@@ -11,7 +11,7 @@
 // Style guide: tabs
 
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 %link-styles {
   appearance: none;
diff --git a/kitsune/sumo/static/sumo/scss/components/_users.autocomplete.scss b/kitsune/sumo/static/sumo/scss/components/_users.autocomplete.scss
index 11f4c7746..8afe8602a 100644
--- a/kitsune/sumo/static/sumo/scss/components/_users.autocomplete.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_users.autocomplete.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // .editable .edit-mode {
 //   display: none;
diff --git a/kitsune/sumo/static/sumo/scss/components/_wiki.scss b/kitsune/sumo/static/sumo/scss/components/_wiki.scss
index ed34a60ff..54acc2d10 100644
--- a/kitsune/sumo/static/sumo/scss/components/_wiki.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_wiki.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 
 // These styles were pulled directly from the less files.
@@ -412,23 +412,23 @@ article {
 
   .delete {
     a {
-      background-image: url("#{p.$image-path}/icons/delete.svg");
+      background-image: url("protocol/img/icons/delete.svg");
     }
   }
 
   .l10n {
     a {
       &.yes {
-        background-image: url("#{p.$image-path}/icons/check.svg");
+        background-image: url("protocol/img/icons/check.svg");
       }
 
       &.markasready,
       &.no {
-        background-image: url("#{p.$image-path}/icons/close.svg");
+        background-image: url("protocol/img/icons/close.svg");
       }
 
       &.markasready:hover {
-        background-image: url("#{p.$image-path}/icons/check.svg");
+        background-image: url("protocol/img/icons/check.svg");
         cursor: pointer;
       }
     }
diff --git a/kitsune/sumo/static/sumo/scss/config/_grid.scss b/kitsune/sumo/static/sumo/scss/config/_grid.scss
index cdf22d588..55a54c844 100644
--- a/kitsune/sumo/static/sumo/scss/config/_grid.scss
+++ b/kitsune/sumo/static/sumo/scss/config/_grid.scss
@@ -1,4 +1,4 @@
-@use '../protocol' as p;
+@use '@mozilla-protocol/core/protocol/css/includes/lib' as p;
 @use './variables' as c;
 
 
diff --git a/kitsune/sumo/static/sumo/scss/config/_mixins.scss b/kitsune/sumo/static/sumo/scss/config/_mixins.scss
index 5263e2aa7..2ed1abe9c 100644
--- a/kitsune/sumo/static/sumo/scss/config/_mixins.scss
+++ b/kitsune/sumo/static/sumo/scss/config/_mixins.scss
@@ -1,5 +1,5 @@
 @use './color-swatches';
-@use '../protocol' as p;
+@use '@mozilla-protocol/core/protocol/css/includes/lib' as p;
 @use 'sass:map';
 
 // Think in pixels, but use rems. Takes a whole number.
diff --git a/kitsune/sumo/static/sumo/scss/config/_project-theme.scss b/kitsune/sumo/static/sumo/scss/config/_project-theme.scss
index e1ff16e0a..fa9fd7d09 100644
--- a/kitsune/sumo/static/sumo/scss/config/_project-theme.scss
+++ b/kitsune/sumo/static/sumo/scss/config/_project-theme.scss
@@ -1,5 +1,5 @@
 @use './mixins' as c;
-@use '../protocol' as p;
+@use '@mozilla-protocol/core/protocol/css/includes/lib' as p;
 @use './color-swatches' as swatches;
 
 :root {
diff --git a/kitsune/sumo/static/sumo/scss/config/_typography-mixins.scss b/kitsune/sumo/static/sumo/scss/config/_typography-mixins.scss
index 5834cd7ed..3284d7c14 100644
--- a/kitsune/sumo/static/sumo/scss/config/_typography-mixins.scss
+++ b/kitsune/sumo/static/sumo/scss/config/_typography-mixins.scss
@@ -1,4 +1,4 @@
-@use '../protocol' as p;
+@use '@mozilla-protocol/core/protocol/css/includes/lib' as p;
 @use './mixins' as c;
 
 
diff --git a/kitsune/sumo/static/sumo/scss/layout/_aaq.scss b/kitsune/sumo/static/sumo/scss/layout/_aaq.scss
index a58576f9d..21f89220e 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_aaq.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_aaq.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 
 .aaq {
diff --git a/kitsune/sumo/static/sumo/scss/layout/_auth.scss b/kitsune/sumo/static/sumo/scss/layout/_auth.scss
index 6cd5a50ba..3d3aa20da 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_auth.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_auth.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 
 .sumo-auth {
diff --git a/kitsune/sumo/static/sumo/scss/layout/_community.scss b/kitsune/sumo/static/sumo/scss/layout/_community.scss
index 492dd0604..3cde1b1d3 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_community.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_community.scss
@@ -1,4 +1,4 @@
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 @use '../config' as c;
 
 .results-user {
@@ -56,7 +56,7 @@
     height: p.$spacing-md;
     border: none;
     border-radius: p.$spacing-xs;
-    background-image: url('#{p.$image-path}/icons/check.svg');
+    background-image: url('protocol/img/icons/check.svg');
     background-color: transparent;
     background-position: center center;
     background-repeat: no-repeat;
diff --git a/kitsune/sumo/static/sumo/scss/layout/_containers.scss b/kitsune/sumo/static/sumo/scss/layout/_containers.scss
index a8daaac6a..4d6c2d1fa 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_containers.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_containers.scss
@@ -1,4 +1,4 @@
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 @use '../config' as c;
 
 // Containers
diff --git a/kitsune/sumo/static/sumo/scss/layout/_contributors.scss b/kitsune/sumo/static/sumo/scss/layout/_contributors.scss
index 4a07373b5..a2f2fab49 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_contributors.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_contributors.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 
 .contributor-list {
diff --git a/kitsune/sumo/static/sumo/scss/layout/_document.scss b/kitsune/sumo/static/sumo/scss/layout/_document.scss
index 38a4e38d2..0d3587bd8 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_document.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_document.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 
 .document {
diff --git a/kitsune/sumo/static/sumo/scss/layout/_footer.scss b/kitsune/sumo/static/sumo/scss/layout/_footer.scss
index 3c5aaa2e5..097319e55 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_footer.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_footer.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Footer
 //
diff --git a/kitsune/sumo/static/sumo/scss/layout/_forum.scss b/kitsune/sumo/static/sumo/scss/layout/_forum.scss
index 3e1695ede..0d62908c9 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_forum.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_forum.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 .forum {
   &--question-item {
diff --git a/kitsune/sumo/static/sumo/scss/layout/_nav.scss b/kitsune/sumo/static/sumo/scss/layout/_nav.scss
index 0e57d2fb7..d8cef497d 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_nav.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_nav.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 // Navigation
 //
@@ -191,7 +191,7 @@
     height: p.$spacing-xl;
     border: none;
     border-radius: p.$spacing-xs;
-    background-image: url('#{p.$image-path}/icons/menu.svg');
+    background-image: url('protocol/img/icons/menu.svg');
     background-color: transparent;
     background-position: center center;
     background-repeat: no-repeat;
@@ -215,7 +215,7 @@
       (margin-left, auto, 0),
       (margin-right, 0, auto),
     ));
-    background-image: url('#{p.$image-path}/icons/search.svg');
+    background-image: url('protocol/img/icons/search.svg');
   }
 
   .simple-search-form {
diff --git a/kitsune/sumo/static/sumo/scss/layout/_products.scss b/kitsune/sumo/static/sumo/scss/layout/_products.scss
index c32a63002..a82dac7d1 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_products.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_products.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 
 .sumo-page-subheader {
diff --git a/kitsune/sumo/static/sumo/scss/layout/_profile.scss b/kitsune/sumo/static/sumo/scss/layout/_profile.scss
index f2da47ec1..75ce20376 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_profile.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_profile.scss
@@ -1,5 +1,5 @@
-@use '../config'as c;
-@use '../protocol'as p;
+@use '../config' as c;
+@use 'protocol/css/includes/lib' as p;
 
 .badges-list {
   display: flex;
diff --git a/kitsune/sumo/static/sumo/scss/layout/_search-page.scss b/kitsune/sumo/static/sumo/scss/layout/_search-page.scss
index 23b4a3ce3..b0cd2ee2d 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_search-page.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_search-page.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 
 // this class is added to the body when the instant search is active. It should
diff --git a/kitsune/sumo/static/sumo/scss/layout/_topic-page.scss b/kitsune/sumo/static/sumo/scss/layout/_topic-page.scss
index 0ee4445a4..2b1a82493 100644
--- a/kitsune/sumo/static/sumo/scss/layout/_topic-page.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/_topic-page.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 .topic-article {
   display: flex;
diff --git a/kitsune/sumo/static/sumo/scss/layout/two-columns.scss b/kitsune/sumo/static/sumo/scss/layout/two-columns.scss
index f1f2591e3..1e1abe417 100644
--- a/kitsune/sumo/static/sumo/scss/layout/two-columns.scss
+++ b/kitsune/sumo/static/sumo/scss/layout/two-columns.scss
@@ -1,5 +1,5 @@
 @use '../config' as c;
-@use '../protocol' as p;
+@use 'protocol/css/includes/lib' as p;
 
 .sumo-l-two-col {
   @include c.grid-row();
diff --git a/package.json b/package.json
index cd23ab510..731382fbc 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "stylelint-order": "^5.0.0",
     "stylelint-scss": "^4.1.0",
     "svelte-loader": "^3.1.2",
+    "svelte-preprocess": "^4.10.2",
     "webpack": "^5.65.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.7.2",
diff --git a/svelte/contribute/Contribute.svelte b/svelte/contribute/Contribute.svelte
index 26193c923..a42a9bf3f 100644
--- a/svelte/contribute/Contribute.svelte
+++ b/svelte/contribute/Contribute.svelte
@@ -31,3 +31,11 @@
         </Route>
     </Router>
 </div>
+
+<style lang="scss">
+    @use "../../kitsune/sumo/static/sumo/scss/config/typography-mixins";
+
+    h1 {
+        @include typography-mixins.text-display-sm;
+    }
+</style>
diff --git a/svelte/contribute/Link.svelte b/svelte/contribute/Link.svelte
index 4b02919a8..c50fb2e48 100644
--- a/svelte/contribute/Link.svelte
+++ b/svelte/contribute/Link.svelte
@@ -7,3 +7,17 @@
 <li>
     <Link {to}><slot /></Link>
 </li>
+
+<style lang="scss">
+    @use "@mozilla-protocol/core/protocol/css/includes/lib" as p;
+
+    li {
+        &::before {
+            content: "";
+            background: url("protocol/img/icons/reader-mode.svg");
+            background-repeat: no-repeat;
+            background-size: p.$spacing-md p.$spacing-md;
+            padding-left: p.$spacing-lg;
+        }
+    }
+</style>
diff --git a/webpack.common.js b/webpack.common.js
index 807d97fdb..5ebd87128 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -1,6 +1,7 @@
 const webpack = require("webpack");
 const path = require("path");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const sveltePreprocess = require("svelte-preprocess");
 
 module.exports = {
   mode: "development",
@@ -10,10 +11,10 @@ module.exports = {
       sumo: path.resolve(__dirname, "kitsune/sumo/static/sumo"),
       community: path.resolve(__dirname, "kitsune/community/static/community"),
       kpi: path.resolve(__dirname, "kitsune/kpi/static/kpi"),
-      svelte: path.resolve('node_modules', 'svelte')
+      svelte: path.resolve("node_modules", "svelte"),
     },
-    extensions: ['.mjs', '.js', '.svelte'],
-    mainFields: ['svelte', 'browser', 'module', 'main']
+    extensions: [".mjs", ".js", ".svelte"],
+    mainFields: ["svelte", "browser", "module", "main"],
   },
   module: {
     rules: [
@@ -43,17 +44,23 @@ module.exports = {
       },
       {
         test: /\.svelte$/,
-        use: "svelte-loader",
+        use: {
+          loader: "svelte-loader",
+          options: {
+            emitCss: true,
+            preprocess: sveltePreprocess(),
+          },
+        },
       },
       {
         // required to prevent errors from Svelte on Webpack 5+
         test: /node_modules\/svelte\/.*\.mjs$/,
         resolve: {
-          fullySpecified: false
-        }
+          fullySpecified: false,
+        },
       },
       {
-        test: /\.scss$/,
+        test: /\.s?css$/,
         use: [
           MiniCssExtractPlugin.loader,
           "css-loader",