diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index 53ee3ce..865bf47 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -36,7 +36,11 @@ jobs:
             "$PWD/.derivedData/Build/Products/Debug/Adwaita.doccarchive" \
             --output-path "docs" \
             --hosting-base-path "adwaita-swift"
+      - name: Modify Docs
+        run: |
           echo "<script>window.location.href += \"/documentation/adwaita\"</script>" > docs/index.html;
+          sed -i '' 's/#06f/#ea3358/g' docs/css/documentation-topic~topic~tutorials-overview.d6f5411c.css
+          sed -i '' 's/,2px/,10px/g' docs/css/index.038e887c.css
       - name: Upload Artifact
         uses: actions/upload-pages-artifact@v3
         with:
diff --git a/.gitignore b/.gitignore
index 362be30..64ba397 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ DerivedData/
 .netrc
 /Package.resolved
 .Ulysses-Group.plist
+/.docc-build
\ No newline at end of file
diff --git a/Sources/Adwaita/Adwaita.docc/theme-settings.json b/Sources/Adwaita/Adwaita.docc/theme-settings.json
new file mode 100644
index 0000000..8fb0f73
--- /dev/null
+++ b/Sources/Adwaita/Adwaita.docc/theme-settings.json
@@ -0,0 +1,45 @@
+{
+    "theme": {
+        "border-radius": "10px",
+        "button": {
+            "border-radius": "20px"
+        },
+        "color": {
+            "button-background": "#ea3358",
+            "button-background-active": "#ea3358",
+            "button-background-hover": "#fc557a",
+            "button-text": "#ffffff",
+            "header": "#7f313b",
+            "documentation-intro-accent": "var(--color-header)",
+            "documentation-intro-fill": "radial-gradient(circle at top, var(--color-header) 30%, #000 100%)",
+            "link": "#ea3358",
+            "nav-link-color": "#ea3358",
+            "nav-dark-link-color": "#ea3358",
+            "tutorials-overview-link": "#fb4469",
+            "step-background": {
+                "light": "#fffaff",
+                "dark": "#302c2d"
+            },
+            "step-focused": "#ea3358",
+            "tabnav-item-border-color": "#ea3358",
+            "tutorial-background": {
+                "light": "",
+                "dark": "#1d1d1f"
+            },
+            "fill-light-blue-secondary": "#ea3358",
+            "fill-blue": "#ea3358",
+            "figure-blue": "#ea3358",
+            "standard-blue-documentation-intro-fill": "#ea3358",
+            "figure-blue": "#ea3358",
+            "tutorial-hero-background": "#100a0b",
+            "navigator-item-hover": {
+                "light": "#ea335815",
+                "dark": "#7f313b"
+            }
+        },
+        "additionalProperties": "#ea3358",
+        "tutorial-step": {
+            "border-radius": "15px"
+        }
+    }
+}