diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
index a8c8c482f..b9491137a 100644
--- a/docs/assets/plugins/code-block/code-block.css
+++ b/docs/assets/plugins/code-block/code-block.css
@@ -1,6 +1,5 @@
 .code-block {
   position: relative;
-  background-color: var(--sl-color-gray-95);
   border-radius: 3px;
   margin-bottom: 1.5rem;
 }
@@ -46,11 +45,6 @@
   display: none;
 }
 
-.code-block__source,
-.code-block__source code {
-  background: #f8f8f8;
-}
-
 .code-block__source .docsify-copy-code-button {
   border-top-right-radius: 0;
 }
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index d1d2a98bf..a29d9542a 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -1,20 +1,20 @@
 :root {
+  --theme-hue: var(--sl-color-primary-hue);
+  --theme-saturation: var(--sl-color-primary-saturation);
+  --mono-shade3: var(--sl-color-gray-20);
+  --mono-shade2: var(--sl-color-gray-30);
+  --mono-shade1: var(--sl-color-gray-40);
+  --mono-base: var(--sl-color-gray-50);
+  --mono-tint1: var(--sl-color-gray-70);
+  --mono-tint2: var(--sl-color-gray-90);
+  --mono-tint3: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 97.5%);
+
   --base-font-size: 16px;
   --base-font-weight: 400;
-  --code-inline-background: rgba(0, 0, 0, 0.04);
-  --code-tab-size: 2;
   --content-max-width: 58rem;
-  --copycode-background: var(--sl-color-primary-50);
-  --cover-background-blend-mode: ;
-  --cover-background-color: var(--sl-color-gray-20);
-  --cover-background-image: none;
   --heading-font-weight: 400;
   --link-color-hover: var(--sl-color-primary-50);
   --link-color: var(--sl-color-primary-50);
-  --search-input-border-color: transparent;
-  --search-input-background-color: var(--sl-color-white);
-  --theme-hue: 180;
-  --theme-saturation: 65%;
 
   --sidebar-width: 18rem;
   --sidebar-background: var(--sl-color-white);
@@ -31,6 +31,42 @@
   --sidebar-nav-pagelink-background-image--collapse: var(--sidebar-nav-pagelink-background-image);
   --sidebar-nav-link-before-content-l2: '';
   --sidebar-nav-link-before-content-l3: '•';
+
+  --search-input-border-color: transparent;
+  --search-input-background-color: var(--sl-color-white);
+
+  --code-font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  --code-font-size: 14px;
+  --code-inline-background: hsla(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 50%, 0.067);
+  --code-tab-size: 2;
+  --code-theme-background: var(--mono-tint3);
+  --code-theme-text: var(--sl-color-gray-20);
+  --code-theme-comment: var(--sl-color-gray-50);
+  --code-theme-selection: var(--sl-color-primary-40);
+  --code-theme-punctuation: var(--sl-color-gray-20);
+  --code-theme-tag: var(--sl-color-primary-40);
+  --code-theme-selector: #e98614;
+  --code-theme-keyword: #a151d2;
+  --code-theme-function: #e98614;
+  --code-theme-operator: var(--sl-color-gray-20);
+  --code-theme-variable: #f18c16;
+
+  --copycode-background: var(--sl-color-primary-50);
+  --copycode-color: var(--sl-color-white);
+
+  --notice-important-background: var(--sl-color-danger-95);
+  --notice-important-border-color: var(--sl-color-danger-50);
+
+  --notice-tip-background: var(--sl-color-primary-95);
+  --notice-tip-border-color: var(--sl-color-primary-50);
+}
+
+pre ::selection {
+  color: white;
+}
+
+.docsify-copy-code-button {
+  font-family: var(--base-font-family);
 }
 
 /** Badges */
@@ -41,7 +77,7 @@
   color: var(--sl-color-white);
   background-color: var(--sl-color-gray-40);
   border-radius: 3px;
-  padding: 0.125em 0.5em;
+  padding: 0 0.33em;
 }
 
 .badge--ready {
@@ -152,36 +188,6 @@
   margin-top: 2.5rem;
 }
 
-/* Code */
-.markdown-section pre .token.comment {
-  color: var(--sl-color-gray-70);
-}
-
-.markdown-section pre .token.string,
-.markdown-section pre .token.attr-name,
-.markdown-section pre .token.selector {
-  color: var(--sl-color-success-40);
-}
-
-.markdown-section pre .token.keyword,
-.markdown-section pre .token.tag,
-.markdown-section pre .token.property {
-  color: #b10dc9; /* purple */
-}
-
-.markdown-section pre .token.boolean,
-.markdown-section pre .token.number {
-  color: #f012be; /* fuschia */
-}
-
-.markdown-section pre .token.atrule,
-.markdown-section pre .token.function,
-.markdown-section pre .token.attr-value,
-.markdown-section pre .token.value,
-.markdown-section pre .token.class-name {
-  color: var(--sl-color-warning-50);
-}
-
 /* Content */
 .markdown-section table code {
   white-space: normal !important;
diff --git a/docs/components/button.md b/docs/components/button.md
index b99e16271..3db9f3304 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -6,6 +6,8 @@ Buttons represent actions that are available to the user.
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
+?> This is just an info thingy
+
 ```html preview
 <sl-button type="default" tabindex>Default</sl-button>
 <sl-button type="primary" tabindex>Primary</sl-button>
diff --git a/src/styles/shoelace.scss b/src/styles/shoelace.scss
index 3e94fbb73..65c084d10 100644
--- a/src/styles/shoelace.scss
+++ b/src/styles/shoelace.scss
@@ -30,7 +30,7 @@
   --sl-color-danger-text: var(--sl-color-white);
 
   --sl-color-gray-hue: var(--sl-color-primary-hue);
-  --sl-color-gray-saturation: 20%;
+  --sl-color-gray-saturation: 10%;
   --sl-color-gray-text: var(--sl-color-white);
 
   --sl-color-white: white;