QubesOS · hippalectryon-0 · Mar 11, 2026 · Mar 16, 2026 · Mar 16, 2026 · Apr 6, 2026
diff --git a/attachment/doc/visual_guide/custom.css b/attachment/doc/visual_guide/custom.css
@@ -0,0 +1,20 @@
+/* Custom styles for Visual Style Guide */
+
+.swatch-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.swatch-container p {
+    margin-bottom: 0;
+}
+
+.swatch-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 120px;
+    text-align: center;
+}
diff --git a/attachment/doc/visual_guide/fonts/font-open-sans-bold.png b/attachment/doc/visual_guide/fonts/font-open-sans-bold.png
diff --git a/attachment/doc/visual_guide/fonts/font-open-sans.png b/attachment/doc/visual_guide/fonts/font-open-sans.png
diff --git a/attachment/doc/visual_guide/fonts/font-ostrich-sans-bold.png b/attachment/doc/visual_guide/fonts/font-ostrich-sans-bold.png
diff --git a/attachment/doc/visual_guide/fonts/font-ostrich-sans.png b/attachment/doc/visual_guide/fonts/font-ostrich-sans.png
diff --git a/attachment/doc/visual_guide/icons/logo-outline-small.svg b/attachment/doc/visual_guide/icons/logo-outline-small.svg
diff --git a/attachment/doc/visual_guide/icons/qubes-logo-home.svg b/attachment/doc/visual_guide/icons/qubes-logo-home.svg
diff --git a/attachment/doc/visual_guide/icons/qubes-logo-icon-128.png b/attachment/doc/visual_guide/icons/qubes-logo-icon-128.png
diff --git a/attachment/doc/visual_guide/icons/qubes-logo-icon-48.png b/attachment/doc/visual_guide/icons/qubes-logo-icon-48.png
diff --git a/attachment/doc/visual_guide/icons/qubes-logo-icon-512.png b/attachment/doc/visual_guide/icons/qubes-logo-icon-512.png
diff --git a/attachment/doc/visual_guide/swatches/q-blue-light.svg b/attachment/doc/visual_guide/swatches/q-blue-light.svg
diff --git a/attachment/doc/visual_guide/swatches/q-blue.svg b/attachment/doc/visual_guide/swatches/q-blue.svg
diff --git a/attachment/doc/visual_guide/swatches/q-danger.svg b/attachment/doc/visual_guide/swatches/q-danger.svg
diff --git a/attachment/doc/visual_guide/swatches/q-gray-base.svg b/attachment/doc/visual_guide/swatches/q-gray-base.svg
diff --git a/attachment/doc/visual_guide/swatches/q-gray-dark.svg b/attachment/doc/visual_guide/swatches/q-gray-dark.svg
diff --git a/attachment/doc/visual_guide/swatches/q-gray-darker.svg b/attachment/doc/visual_guide/swatches/q-gray-darker.svg
diff --git a/attachment/doc/visual_guide/swatches/q-gray-light.svg b/attachment/doc/visual_guide/swatches/q-gray-light.svg
diff --git a/attachment/doc/visual_guide/swatches/q-gray-lighter.svg b/attachment/doc/visual_guide/swatches/q-gray-lighter.svg
diff --git a/attachment/doc/visual_guide/swatches/q-gray.svg b/attachment/doc/visual_guide/swatches/q-gray.svg
diff --git a/attachment/doc/visual_guide/swatches/q-info.svg b/attachment/doc/visual_guide/swatches/q-info.svg
diff --git a/attachment/doc/visual_guide/swatches/q-primary.svg b/attachment/doc/visual_guide/swatches/q-primary.svg
diff --git a/attachment/doc/visual_guide/swatches/q-purple.svg b/attachment/doc/visual_guide/swatches/q-purple.svg
diff --git a/attachment/doc/visual_guide/swatches/q-success.svg b/attachment/doc/visual_guide/swatches/q-success.svg
diff --git a/attachment/doc/visual_guide/swatches/q-warning.svg b/attachment/doc/visual_guide/swatches/q-warning.svg
diff --git a/attachment/doc/visual_guide/swatches/q-yellow.svg b/attachment/doc/visual_guide/swatches/q-yellow.svg
diff --git a/conf.py b/conf.py
@@ -45,8 +45,6 @@
         "https://www.qubes-os.org/hcl/",
     "user/downloading-installing-upgrading/downloads:mirrors":
         "https://www.qubes-os.org/downloads/mirrors/",
-    "developer/general/visual-style-guide":
-        "https://www.qubes-os.org/doc/visual-style-guide/",
     "user/downloading-installing-upgrading/downloads":
         "https://www.qubes-os.org/downloads/",
 
@@ -106,6 +104,10 @@
 
 html_static_path = ['attachment/doc']
 
+html_css_files = [
+    'visual_guide/custom.css',
+]
+
 html_use_opensearch = "https://doc.qubes-os.org"
 
 html_logo = "attachment/icons/128x128/apps/qubes-logo-icon.png"

diff --git a/developer/general/usability-ux.rst b/developer/general/usability-ux.rst
@@ -4,7 +4,7 @@ Usability & UX
 
 Software that is too complicated to use, is often unused. Because we want as many people as possible to benefit from its unique security properties, the usability and user experience of Qubes OS is an utmost priority!
 
-We ask anyone developing for Qubes OS to please read through this guide to better understand the user experience we strive to achieve. We also ask them to review `our visual style guide <https://www.qubes-os.org/doc/visual-style-guide/>`__ for other design related information.
+We ask anyone developing for Qubes OS to please read through this guide to better understand the user experience we strive to achieve. We also ask them to review the :doc:`visual style guide </developer/general/visual-style-guide>` for other design related information.
 
 ----
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ Usability & UX @@
     Software that is too complicated to use, is often unused. Because we want as many people as possible to benefit from its unique security properties, the usability and user experience of Qubes OS is an utmost priority!
-    We ask anyone developing for Qubes OS to please read through this guide to better understand the user experience we strive to achieve. We also ask them to review `our visual style guide <https://www.qubes-os.org/doc/visual-style-guide/>`__ for other design related information.
+    We ask anyone developing for Qubes OS to please read through this guide to better understand the user experience we strive to achieve. We also ask them to review the :doc:`visual style guide </developer/general/visual-style-guide>` for other design related information.
     ----
@@ Expand Down @@