diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 8f5b9b07c3..bbeedefd87 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -75,6 +75,7 @@ export default defineConfig({
             },
             "contributing/standard-library",
             "contributing/library-modules",
+            "contributing/style-guide",
           ],
         },
         {
diff --git a/docs/src/components/ColorTable.astro b/docs/src/components/ColorTable.astro
new file mode 100644
index 0000000000..fb9b3039f7
--- /dev/null
+++ b/docs/src/components/ColorTable.astro
@@ -0,0 +1,43 @@
+---
+const { data } = Astro.props;
+
+const flavors = ['latte', 'frappe', 'macchiato', 'mocha'];
+---
+
+<table>
+  <tr>
+    <th>Function</th>
+    <th colspan="2">Colors</th>
+  </tr>
+  {data.map((row) => (
+    <tr>
+      <td class="function">{row.function}</td>
+      <td class="color-names">{row.colors.map((color) => <span>{color}</span><br>)}</td>
+      <td class="color-tiles">
+        {row.colors.map((color) => (
+          <div class="color-tiles-row">
+            {flavors.map((flavor) =>
+              <img src={`https://github.com/catppuccin/catppuccin/raw/main/assets/palette/circles/${flavor}_${color}.png`}
+                height={15}
+                width={16}
+                alt={`${flavor.charAt(0).toUpperCase() + flavor.slice(1)} ${color.charAt(0).toUpperCase() + color.slice(1)}`}
+              />
+            )}
+          </div>
+        ))}
+      </td>
+    </tr>
+  ))}
+</table>
+
+<style>
+  .color-tiles-row {
+    display: flex;
+    flex-direction: row;
+    gap: 0.25rem;
+
+    img {
+      margin-top: 0;
+    }
+  }
+</style>
diff --git a/docs/src/content/docs/contributing/style-guide.mdx b/docs/src/content/docs/contributing/style-guide.mdx
new file mode 100644
index 0000000000..d237ab10a1
--- /dev/null
+++ b/docs/src/content/docs/contributing/style-guide.mdx
@@ -0,0 +1,27 @@
+---
+title: Style Guide
+description: Userstyles web elements style guide.
+---
+
+import ColorTable from '../../../components/ColorTable.astro';
+
+## Inputs
+
+<ColorTable data={[
+    { function: 'Textarea', colors: ['mantle'] },
+    { function: 'Text Input', colors: ['mantle'] },
+    { function: 'Code Blocks', colors: ['mantle'] },
+    { function: 'Inline Code', colors: ['mantle', 'surface0'] },
+    { function: 'Overlays', colors: ['overlay0', 'overlay1', 'overlay2'] }
+  ]}
+/>
+
+
+## Links
+
+<ColorTable data={[
+    { function: 'Regular', colors: ['blue'] },
+    { function: ':hover', colors: ['sky'] },
+    { function: ':visited/:followed', colors: ['lavender'] },
+  ]}
+/>