diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index adcd701ab20..8ad5ab3a238 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -28,6 +28,9 @@ jobs:
     - name: Install Docs Packages
       working-directory: docs
       run: npm install
+    - name: Stylelint Docs
+      working-directory: docs
+      run: npm run lint:scss
     - name: Lint Docs JS Files
       run: node Makefile lintDocsJS
 
diff --git a/docs/.stylelintrc.json b/docs/.stylelintrc.json
new file mode 100644
index 00000000000..d2a61557dc4
--- /dev/null
+++ b/docs/.stylelintrc.json
@@ -0,0 +1,28 @@
+{
+    "extends": ["stylelint-config-standard-scss"],
+    "rules": {
+        "alpha-value-notation": null,
+        "at-rule-empty-line-before": null,
+        "color-function-notation": null,
+        "color-hex-case": null,
+        "custom-property-empty-line-before": null,
+        "custom-property-pattern": null,
+        "declaration-block-no-duplicate-properties": null,
+        "declaration-block-no-redundant-longhand-properties": null,
+        "declaration-block-no-shorthand-property-overrides": null,
+        "hue-degree-notation": null,
+        "indentation": 4,
+        "max-line-length": null,
+        "no-descending-specificity": null,
+        "no-duplicate-selectors": null,
+        "number-leading-zero": null,
+        "number-no-trailing-zeros": null,
+        "property-no-unknown": null,
+        "property-no-vendor-prefix": null,
+        "selector-class-pattern": null,
+        "value-keyword-case": null
+    },
+    "ignoreFiles": [
+        "_site/**"
+    ]
+  }
diff --git a/docs/package.json b/docs/package.json
index 91cfe025f36..151a5a16006 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,7 +15,9 @@
         "build:sass": "sass --style=compressed src/assets/scss:src/assets/css --no-source-map",
         "build:eleventy": "npx @11ty/eleventy",
         "start": "npm-run-all build:sass --parallel watch:*",
-        "build": "npm-run-all build:sass build:eleventy images"
+        "build": "npm-run-all build:sass build:eleventy images",
+        "lint:scss": "stylelint \"**/*.scss\"",
+        "lint:fix:scss": "npm run lint:scss -- --fix"
     },
     "devDependencies": {
         "@11ty/eleventy": "^1.0.1",
@@ -40,7 +42,9 @@
         "netlify-cli": "^10.3.1",
         "npm-run-all": "^4.1.5",
         "rimraf": "^3.0.2",
-        "sass": "^1.52.1"
+        "sass": "^1.52.1",
+        "stylelint": "^14.13.0",
+        "stylelint-config-standard-scss": "^5.0.0"
     },
     "engines": {
         "node": ">=14.0.0"
diff --git a/docs/src/assets/scss/carbon-ads.scss b/docs/src/assets/scss/carbon-ads.scss
index ccf578e6d9a..085b0b736fe 100644
--- a/docs/src/assets/scss/carbon-ads.scss
+++ b/docs/src/assets/scss/carbon-ads.scss
@@ -1,7 +1,7 @@
 .hero-ad {
-     @media all and (max-width: 800px) {
-         display: none;
-     }
+    @media all and (max-width: 800px) {
+        display: none;
+    }
 }
 
 #carbonads * {
diff --git a/docs/src/assets/scss/components/alert.scss b/docs/src/assets/scss/components/alert.scss
index ddd5c693d6a..fb3b5d62d01 100644
--- a/docs/src/assets/scss/components/alert.scss
+++ b/docs/src/assets/scss/components/alert.scss
@@ -42,7 +42,6 @@
     }
 }
 
-
 [data-theme="dark"] {
     .alert {
         &.alert--warning {
@@ -101,7 +100,6 @@
     }
 }
 
-
 .alert__learn-more {
     display: block;
     font-weight: 500;
diff --git a/docs/src/assets/scss/components/buttons.scss b/docs/src/assets/scss/components/buttons.scss
index bbe6451a616..ca0aa72a726 100644
--- a/docs/src/assets/scss/components/buttons.scss
+++ b/docs/src/assets/scss/components/buttons.scss
@@ -23,9 +23,7 @@ button {
     align-items: center;
     justify-content: center;
     border-radius: var(--border-radius);
-
-    transition: background-color .2s linear,
-        border-color .2s linear;
+    transition: background-color .2s linear, border-color .2s linear;
 
     svg {
         color: inherit;
diff --git a/docs/src/assets/scss/components/docs-index.scss b/docs/src/assets/scss/components/docs-index.scss
index b9f04525b3a..d524a9b2589 100644
--- a/docs/src/assets/scss/components/docs-index.scss
+++ b/docs/src/assets/scss/components/docs-index.scss
@@ -143,7 +143,6 @@
         }
 
         #ham-top {
-
             transform: rotate(41deg);
         }
 
diff --git a/docs/src/assets/scss/components/docs-navigation.scss b/docs/src/assets/scss/components/docs-navigation.scss
index 1a8ee504073..f47fce3a0a5 100644
--- a/docs/src/assets/scss/components/docs-navigation.scss
+++ b/docs/src/assets/scss/components/docs-navigation.scss
@@ -13,7 +13,6 @@
         margin-bottom: 2rem;
         margin-block-end: 2rem;
 
-
         @media all and (min-width: 1024px) {
             font-size: var(--step-0);
             margin-top: 0;
@@ -50,7 +49,6 @@
     }
 }
 
-
 .docs-nav-panel {
     @media all and (min-width: 1024px) {
         display: flex;
@@ -83,11 +81,9 @@
     align-items: center;
     margin-left: .5rem;
     margin-right: -10px;
-
     margin-inline-start: .5rem;
     margin-inline-end: -10px;
 
-
     svg {
         width: 40px;
         height: 40px;
@@ -118,7 +114,6 @@
         }
 
         #ham-top {
-
             transform: rotate(41deg);
         }
 
@@ -128,8 +123,6 @@
     }
 }
 
-
-
 @media all and (min-width: 1024px) {
     .docs-site-nav {
         flex-direction: row;
@@ -151,5 +144,4 @@
             order: 1;
         }
     }
-
 }
diff --git a/docs/src/assets/scss/components/hero.scss b/docs/src/assets/scss/components/hero.scss
index 54c303e2216..b4c8cd4d52a 100644
--- a/docs/src/assets/scss/components/hero.scss
+++ b/docs/src/assets/scss/components/hero.scss
@@ -40,7 +40,6 @@
 }
 
 .hero--homepage {
-
     .section-title {
         margin-bottom: 1.5rem;
         margin-block-end: 1.5rem;
diff --git a/docs/src/assets/scss/components/index.scss b/docs/src/assets/scss/components/index.scss
index ea9bd3b1eef..5989e1f48e7 100644
--- a/docs/src/assets/scss/components/index.scss
+++ b/docs/src/assets/scss/components/index.scss
@@ -79,7 +79,6 @@
         }
 
         #ham-top {
-
             transform: rotate(41deg);
         }
 
diff --git a/docs/src/assets/scss/components/language-switcher.scss b/docs/src/assets/scss/components/language-switcher.scss
index 1aa9b2cea9f..6ea2fad0c73 100644
--- a/docs/src/assets/scss/components/language-switcher.scss
+++ b/docs/src/assets/scss/components/language-switcher.scss
@@ -18,8 +18,7 @@
     flex: 1 0 10ch;
 }
 
-
-.switcher--language  .switcher__select {
+.switcher--language .switcher__select {
     flex: 1 0 12rem;
 
     @media all and (max-width: 800px) {
diff --git a/docs/src/assets/scss/components/resources.scss b/docs/src/assets/scss/components/resources.scss
index cf483cd0173..776a0bc3f56 100644
--- a/docs/src/assets/scss/components/resources.scss
+++ b/docs/src/assets/scss/components/resources.scss
@@ -7,14 +7,12 @@
     overflow: hidden;
     margin-bottom: .5rem;
     margin-block-end: .5rem;
-
     position: relative;
     transition: all .2s linear;
 
     &:hover {
         background-color: var(--lighter-background-color);
     }
-
 }
 
 .resource__image {
@@ -27,7 +25,6 @@
         display: block;
         height: 100%;
         width: 100%;
-        // object-fit: cover;
         object-fit: contain;
     }
 }
@@ -38,7 +35,6 @@
     align-self: center;
 }
 
-
 .resource__title { // a
     text-decoration: none;
     color: var(--headings-color);
diff --git a/docs/src/assets/scss/components/rules.scss b/docs/src/assets/scss/components/rules.scss
index ec5217272c2..423e0d2fb62 100644
--- a/docs/src/assets/scss/components/rules.scss
+++ b/docs/src/assets/scss/components/rules.scss
@@ -13,24 +13,24 @@
         background: none;
         border: none;
 
-        @media screen and (min-width:768px){
+        @media screen and (min-width: 768px) {
             &:not(:first-child)::after {
                 content: "";
                 display: block;
                 padding: 1px;
                 border-left: 1px solid var(--divider-color);
-                left: 0px;
+                left: 0;
             }
         }
 
-        @media screen and (min-width:768px) and (max-width:1023px), screen and (min-width:1440px){
+        @media screen and (min-width: 768px) and (max-width: 1023px), screen and (min-width: 1440px) {
             &:not(:first-child)::after {
                 height: 70%;
                 position: absolute;
             }
         }
 
-        @media screen and (min-width:1024px) and (max-width:1439px){
+        @media screen and (min-width: 1024px) and (max-width: 1439px) {
             &:nth-child(2)::after {
                 height: 70%;
                 position: absolute;
@@ -171,7 +171,6 @@ a.rule__name {
 }
 
 .related-rules__list__item {
-
     svg {
         color: inherit;
     }
@@ -194,7 +193,7 @@ a.rule__name {
     }
 }
 
-a.rule-list-item+a.rule-list-item::before {
+a.rule-list-item + a.rule-list-item::before {
     content: ",";
     display: inline-block;
     margin-left: 5px;
diff --git a/docs/src/assets/scss/components/search.scss b/docs/src/assets/scss/components/search.scss
index 54b7762cb54..f804ab22e1c 100644
--- a/docs/src/assets/scss/components/search.scss
+++ b/docs/src/assets/scss/components/search.scss
@@ -4,8 +4,8 @@
     appearance: none;
 }
 
-[type=search]::-ms-clear,
-[type=search]::-ms-reveal {
+[type="search"]::-ms-clear,
+[type="search"]::-ms-reveal {
     display: none;
     width: 0;
     height: 0;
@@ -84,6 +84,7 @@
     &[data-results="true"] {
         padding: 0;
     }
+
     &[data-results="false"] {
         padding: 1rem;
     }
@@ -110,7 +111,7 @@
         background-color: var(--lightest-background-color);
     }
 
-    &:focus-within{
+    &:focus-within {
         background-color: var(--lightest-background-color);
     }
 }
@@ -121,7 +122,6 @@
     margin-bottom: 0;
     font-family: var(--text-font);
 
-
     a {
         display: block;
         text-decoration: none;
diff --git a/docs/src/assets/scss/components/tabs.scss b/docs/src/assets/scss/components/tabs.scss
index f2672a1601a..8a7d866c514 100644
--- a/docs/src/assets/scss/components/tabs.scss
+++ b/docs/src/assets/scss/components/tabs.scss
@@ -27,11 +27,7 @@
     align-items: center;
     justify-content: center;
     border-radius: var(--border-radius) var(--border-radius) 0 0;
-
-    transition: background-color .2s linear,
-    border-color .2s linear;
-
-
+    transition: background-color .2s linear, border-color .2s linear;
 
     &:hover {
         color: var(--link-color);
@@ -55,7 +51,6 @@
     }
 }
 
-
 .c-tabs__tabpanel__title {
     margin-bottom: 1.5rem;
     margin-block-end: 1.5rem;
diff --git a/docs/src/assets/scss/components/toc.scss b/docs/src/assets/scss/components/toc.scss
index d1f47a6faeb..5e2e66a166a 100644
--- a/docs/src/assets/scss/components/toc.scss
+++ b/docs/src/assets/scss/components/toc.scss
@@ -105,8 +105,6 @@
     }
 }
 
-
-
 .c-toc__panel {
     &[data-open="false"] {
         display: none;
diff --git a/docs/src/assets/scss/docs-header.scss b/docs/src/assets/scss/docs-header.scss
index 6ba51cec00f..e2a2fecdb48 100644
--- a/docs/src/assets/scss/docs-header.scss
+++ b/docs/src/assets/scss/docs-header.scss
@@ -10,7 +10,6 @@
         align-items: start;
         padding-top: 0;
         padding-bottom: 0;
-
         padding-block-start: 0;
         padding-block-end: 0;
 
diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
index 22cde70720d..934fbb04bfb 100644
--- a/docs/src/assets/scss/docs.scss
+++ b/docs/src/assets/scss/docs.scss
@@ -32,7 +32,6 @@ html {
     padding-top: var(--space-l-xl);
     padding-block-start: var(--space-l-xl);
     font-size: .875rem;
-
     display: grid;
     grid-auto-rows: max-content;
     align-items: start;
@@ -41,7 +40,6 @@ html {
         padding: var(--space-l-xl) 0;
         padding-right: var(--space-s-l);
         padding-inline-end: var(--space-s-l);
-
         border-right: 1px solid var(--divider-color);
         border-inline-end: 1px solid var(--divider-color);
     }
@@ -73,7 +71,6 @@ html {
     @media all and (min-width: 800px) {
         padding-right: var(--space-s-l);
         padding-inline-end: var(--space-s-l);
-
         border-right: 1px solid var(--divider-color);
         border-inline-end: 1px solid var(--divider-color);
     }
@@ -83,7 +80,6 @@ html {
     }
 }
 
-
 .docs-aside {
     grid-column: 2 / 3;
     display: flex;
diff --git a/docs/src/assets/scss/eslint-site-footer.scss b/docs/src/assets/scss/eslint-site-footer.scss
index 4a1e2cdc281..6ecb430c703 100644
--- a/docs/src/assets/scss/eslint-site-footer.scss
+++ b/docs/src/assets/scss/eslint-site-footer.scss
@@ -61,5 +61,4 @@
         flex-direction: row;
         justify-content: space-between;
     }
-
 }
diff --git a/docs/src/assets/scss/eslint-site-header.scss b/docs/src/assets/scss/eslint-site-header.scss
index 239d14d3428..892ebc7e625 100644
--- a/docs/src/assets/scss/eslint-site-header.scss
+++ b/docs/src/assets/scss/eslint-site-header.scss
@@ -10,7 +10,6 @@
         align-items: start;
         padding-top: 0;
         padding-bottom: 0;
-
         padding-block-start: 0;
         padding-block-end: 0;
 
diff --git a/docs/src/assets/scss/forms.scss b/docs/src/assets/scss/forms.scss
index e6d830c9897..fe30249a777 100644
--- a/docs/src/assets/scss/forms.scss
+++ b/docs/src/assets/scss/forms.scss
@@ -6,7 +6,7 @@
     display: block;
     width: 100%;
     max-width: 100%;
-    min-width: 0px;
+    min-width: 0;
     padding: .625rem .875rem;
     padding-right: calc(.875rem * 2.5);
     padding-inline-end: calc(.875rem * 2.5);
@@ -19,8 +19,7 @@
     background-color: var(--body-background-color);
     background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.60938L10 12.6094L15 7.60938' stroke='%23667085' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), linear-gradient(to bottom, var(--body-background-color) 0%, var(--body-background-color) 100%);
     background-repeat: no-repeat, repeat;
-    background-position: right .875rem top 50%,
-    0 0;
+    background-position: right .875rem top 50%, 0 0;
     background-size: 1em auto, 100%;
 }
 
diff --git a/docs/src/assets/scss/foundations.scss b/docs/src/assets/scss/foundations.scss
index 27849b3c145..25b0e1df429 100644
--- a/docs/src/assets/scss/foundations.scss
+++ b/docs/src/assets/scss/foundations.scss
@@ -46,7 +46,6 @@ input:focus {
     box-shadow: 0 0 0 2px var(--link-color);
 }
 
-
 *,
 *::before,
 *::after {
@@ -81,7 +80,6 @@ body {
     offset-block-start: -30em;
     offset-inline-start: 0;
     offset-inline-end: auto;
-
     z-index: 999;
     transition: top .1s linear;
 
@@ -125,7 +123,6 @@ hr {
     padding: var(--space-xl-3xl) calc(1rem + 1vw);
 }
 
-
 .section-head {
     .section-supporting-text {
         text-align: center;
@@ -155,7 +152,6 @@ hr {
     font-size: var(--step-1);
 }
 
-
 code,
 pre {
     font-family: var(--mono-font);
@@ -214,7 +210,6 @@ a {
     }
 }
 
-
 a {
     color: var(--link-color);
     transition: color .1s linear;
@@ -249,7 +244,6 @@ h6 {
     overflow-wrap: break-word;
 }
 
-
 ul,
 ol {
     margin-top: 0;
@@ -259,7 +253,7 @@ ol {
         margin: 0 0 .75em;
     }
 
-    .person__bio  & {
+    .person__bio & {
         padding-left: 1.5rem;
         padding-inline-start: 1.5rem;
     }
@@ -326,7 +320,6 @@ nav {
     }
 }
 
-
 .video {
     width: 90%;
     max-width: 1400px;
@@ -347,7 +340,6 @@ nav {
     }
 }
 
-
 /* typography */
 body {
     font-size: var(--step-0);
@@ -374,7 +366,6 @@ h6 {
     font-weight: 500;
     margin-top: 0;
     margin-block-start: 0;
-
 }
 
 h2,
@@ -382,7 +373,6 @@ h3,
 h4,
 h5,
 h6 {
-
     .docs-main &,
     .components-main & {
         margin-top: 3rem;
@@ -397,7 +387,6 @@ h6 {
     }
 }
 
-
 small,
 caption,
 cite,
diff --git a/docs/src/assets/scss/print.scss b/docs/src/assets/scss/print.scss
index 446c585ef41..68d4146240e 100644
--- a/docs/src/assets/scss/print.scss
+++ b/docs/src/assets/scss/print.scss
@@ -1,11 +1,11 @@
 *,
-*:before,
-*:after,
-*:first-letter,
-p:first-line,
-div:first-line,
-blockquote:first-line,
-li:first-line {
+*::before,
+*::after,
+*::first-letter,
+p::first-line,
+div::first-line,
+blockquote::first-line,
+li::first-line {
     background: transparent !important;
     color: #000 !important;
     box-shadow: none !important;
@@ -64,7 +64,6 @@ h6 {
     font-size: 14pt;
 }
 
-
 p,
 h2,
 h3 {
@@ -110,7 +109,7 @@ a:visited {
 //     font-size: 90%;
 // }
 
-abbr[title]:after {
+abbr[title]::after {
     content: " ("attr(title) ")";
 }
 
@@ -119,17 +118,17 @@ a[href^="http://"] {
     color: #000;
 }
 
-a[href$=".jpg"]:after,
-a[href$=".jpeg"]:after,
-a[href$=".gif"]:after,
-a[href$=".png"]:after {
+a[href$=".jpg"]::after,
+a[href$=".jpeg"]::after,
+a[href$=".gif"]::after,
+a[href$=".png"]::after {
     content: " ("attr(href) ") ";
     display: none;
 }
 
 /* Don't show links that are fragment identifiers, or use the `javascript:` pseudo protocol .. taken from html5boilerplate */
-a[href^="#"]:after,
-a[href^="javascript:"]:after {
+a[href^="#"]::after,
+a[href^="javascript:"]::after {
     content: "";
 }
 
@@ -172,7 +171,7 @@ tr {
     page-break-inside: avoid;
 }
 
-body>*:not(main),
+body > *:not(main),
 aside,
 *[class*="sidebar"] {
     display: none;
@@ -184,8 +183,8 @@ button,
     display: none;
 }
 
-a[href^='http']:not([href*='mywebsite.com'])::after {
-    content: ' ('attr(href) ')';
+a[href^="http"]:not([href*="eslint.org"])::after {
+    content: " ("attr(href) ")";
 }
 
 .resource a::after {
@@ -196,7 +195,10 @@ ul {
     page-break-inside: avoid;
 }
 
-.docs-toc, .docs-index, .docs-aside, #skip-link{
+.docs-toc,
+.docs-index,
+.docs-aside,
+#skip-link {
     display: none;
 }
 
diff --git a/docs/src/assets/scss/styles.scss b/docs/src/assets/scss/styles.scss
index e07b280a89d..8907a6c4bf9 100644
--- a/docs/src/assets/scss/styles.scss
+++ b/docs/src/assets/scss/styles.scss
@@ -1,37 +1,35 @@
+@import "tokens/themes";
+@import "tokens/spacing";
+@import "tokens/typography";
+@import "tokens/ui";
 
-@import "tokens/themes.scss";
-@import "tokens/spacing.scss";
-@import "tokens/typography.scss";
-@import "tokens/ui.scss";
+@import "foundations";
+@import "syntax-highlighter";
+@import "docs-header";
+@import "docs-footer";
+@import "eslint-site-footer";
+@import "eslint-site-header";
+@import "forms";
+@import "docs";
+@import "versions";
+@import "languages";
 
-@import "foundations.scss";
-@import "syntax-highlighter.scss";
-@import "docs-header.scss";
-@import "docs-footer.scss";
-@import "eslint-site-footer.scss";
-@import "eslint-site-header.scss";
-@import "forms.scss";
-@import "docs.scss";
-@import "versions.scss";
-@import "languages.scss";
+@import "components/buttons";
+@import "components/docs-navigation";
+@import "components/toc";
+@import "components/search";
+@import "components/alert";
+@import "components/rules";
+@import "components/social-icons";
+@import "components/hero";
+@import "components/theme-switcher";
+@import "components/version-switcher";
+@import "components/language-switcher";
+@import "components/docs-index"; // docs index on the main docs pages
+@import "components/index"; // used in component library
+@import "components/tabs";
+@import "components/resources";
 
-@import "components/buttons.scss";
-@import "components/docs-navigation.scss";
-@import "components/toc.scss";
-@import "components/search.scss";
-@import "components/alert.scss";
-@import "components/rules.scss";
-@import "components/social-icons.scss";
-@import "components/hero.scss";
-@import "components/theme-switcher.scss";
-@import "components/version-switcher.scss";
-@import "components/language-switcher.scss";
-@import "components/docs-index.scss"; // docs index on the main docs pages
-@import "components/index.scss"; // used in component library
-@import "components/tabs.scss";
-@import "components/index.scss";
-@import "components/resources.scss";
+@import "carbon-ads";
 
-@import "carbon-ads.scss";
-
-@import "utilities.scss";
+@import "utilities";
diff --git a/docs/src/assets/scss/syntax-highlighter.scss b/docs/src/assets/scss/syntax-highlighter.scss
index b0160f7e614..6fb34deb42d 100644
--- a/docs/src/assets/scss/syntax-highlighter.scss
+++ b/docs/src/assets/scss/syntax-highlighter.scss
@@ -1,9 +1,11 @@
 code[class*="language-"],
 pre[class*="language-"] {
-    font-family: var(--mono-font), Consolas,
+    font-family:
+        var(--mono-font),
+        Consolas,
         Monaco,
-        'Andale Mono',
-        'Ubuntu Mono',
+        "Andale Mono",
+        "Ubuntu Mono",
         monospace;
     font-size: 1em;
     text-align: left;
@@ -13,11 +15,9 @@ pre[class*="language-"] {
     word-wrap: normal;
     line-height: 1.5;
     font-variant-ligatures: none;
-
     -moz-tab-size: 4;
     -o-tab-size: 4;
     tab-size: 4;
-
     -webkit-hyphens: none;
     -moz-hyphens: none;
     -ms-hyphens: none;
@@ -25,7 +25,6 @@ pre[class*="language-"] {
 }
 
 @media print {
-
     code[class*="language-"],
     pre[class*="language-"] {
         text-shadow: none;
@@ -39,7 +38,6 @@ pre[class*="language-"] {
     overflow: auto;
     background-color: var(--color-neutral-50);
     border-radius: var(--border-radius);
-
     background-color: var(--lightest-background-color);
     color: var(--color-neutral-900);
 
@@ -48,13 +46,13 @@ pre[class*="language-"] {
     }
 }
 
-:not(pre)>code[class*="language-"],
+:not(pre) > code[class*="language-"],
 pre[class*="language-"] {
     background-color: var(--lightest-background-color);
 }
 
 /* Inline code */
-:not(pre)>code[class*="language-"] {
+:not(pre) > code[class*="language-"] {
     padding: .1em;
     border-radius: .3em;
     white-space: normal;
@@ -71,12 +69,10 @@ pre[class*="language-"] {
     }
 }
 
-
 .token.namespace {
     opacity: .7;
 }
 
-
 .token.selector,
 .token.attr-name,
 .token.string,
@@ -86,7 +82,6 @@ pre[class*="language-"] {
     color: var(--link-color);
 }
 
-
 .token.atrule,
 .token.attr-value,
 .token.keyword {
@@ -110,11 +105,11 @@ pre {
     counter-reset: lineNumber;
 }
 
-code .highlight-line { 
+code .highlight-line {
     font-variant-ligatures: none;
-} 
+}
 
-code .highlight-line:before {
+code .highlight-line::before {
     -webkit-user-select: none;
     color: var(--icon-color);
     content: counter(lineNumber);
diff --git a/docs/src/assets/scss/tokens/themes.scss b/docs/src/assets/scss/tokens/themes.scss
index 11ced7f9ee5..ef97139e092 100644
--- a/docs/src/assets/scss/tokens/themes.scss
+++ b/docs/src/assets/scss/tokens/themes.scss
@@ -79,7 +79,6 @@
     --border-color: var(--color-neutral-300);
     --divider-color: var(--color-neutral-200);
 
-
     --icon-color: var(--color-neutral-400);
     --dark-icon-color: var(--color-neutral-500);
     --link-color: var(--color-primary-800);
@@ -97,14 +96,14 @@
         --body-background-color: var(--color-neutral-900);
         --body-text-color: var(--color-neutral-300);
         --headings-color: #fff;
-    
+
         --divider-color: var(--color-neutral-600);
         --border-color: var(--color-neutral-500);
-    
+
         --icon-color: var(--body-text-color);
         --dark-icon-color: #fff;
         --link-color: var(--color-primary-400);
-    
+
         --lighter-background-color: var(--color-neutral-800);
         --lightest-background-color: var(--color-neutral-800);
         --docs-lightest-background-color: var(--color-neutral-800);
@@ -114,8 +113,6 @@
     }
 }
 
-
-
 html[data-theme="light"] {
     --body-background-color: #fff;
     --body-text-color: var(--color-neutral-500);
@@ -124,7 +121,6 @@ html[data-theme="light"] {
     --border-color: var(--color-neutral-300);
     --divider-color: var(--color-neutral-200);
 
-
     --icon-color: var(--color-neutral-400);
     --dark-icon-color: var(--color-neutral-500);
     --link-color: var(--color-primary-800);
diff --git a/docs/src/assets/scss/tokens/typography.scss b/docs/src/assets/scss/tokens/typography.scss
index 8c178b51baa..24a4597442b 100644
--- a/docs/src/assets/scss/tokens/typography.scss
+++ b/docs/src/assets/scss/tokens/typography.scss
@@ -54,26 +54,28 @@
 
 :root {
     --mono-font: "Mono Punctuators", "Space Mono", monospace;
-    --text-font: "Inter",
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            Roboto,
-            Helvetica,
-            Arial,
-            sans-serif,
-            "Apple Color Emoji",
-            "Segoe UI Emoji",
-            "Segoe UI Symbol";
-    --display-font: "Space Grotesk",
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            Roboto,
-            Helvetica,
-            Arial,
-            sans-serif,
-            "Apple Color Emoji",
-            "Segoe UI Emoji",
-            "Segoe UI Symbol";
+    --text-font:
+        "Inter",
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif,
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol";
+    --display-font:
+        "Space Grotesk",
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif,
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol";
 }
diff --git a/docs/src/assets/scss/tokens/ui.scss b/docs/src/assets/scss/tokens/ui.scss
index 08759dba396..49380e12da8 100644
--- a/docs/src/assets/scss/tokens/ui.scss
+++ b/docs/src/assets/scss/tokens/ui.scss
@@ -1,8 +1,9 @@
 :root {
     // elevations
-    --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.1),
-                 0px 4px 6px -2px rgba(16, 24, 40, 0.05);
-    --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
+    --shadow-lg:
+        0 12px 16px -4px rgba(16, 24, 40, 0.1),
+        0 4px 6px -2px rgba(16, 24, 40, 0.05);
+    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
 
     --border-radius: .5rem;
 }
diff --git a/docs/src/assets/scss/utilities.scss b/docs/src/assets/scss/utilities.scss
index ac400649936..52687d9c4f0 100644
--- a/docs/src/assets/scss/utilities.scss
+++ b/docs/src/assets/scss/utilities.scss
@@ -11,8 +11,7 @@
     clip: rect(0 0 0 0);
     clip-path: inset(100%);
     height: 1px;
-    overflow:
-        hidden;
+    overflow: hidden;
     position: absolute;
     width: 1px;
     white-space: nowrap;
@@ -120,7 +119,6 @@
     grid-column: 1 / 8;
 }
 
-
 .span-1-12 {
     grid-column: 1 / -1;
 }