diff --git a/attachment/doc/visual_guide/custom.css b/attachment/doc/visual_guide/custom.css
new file mode 100644
index 0000000000..9bbb7ab480
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..e84e96ee35
Binary files /dev/null and b/attachment/doc/visual_guide/fonts/font-open-sans-bold.png differ
diff --git a/attachment/doc/visual_guide/fonts/font-open-sans.png b/attachment/doc/visual_guide/fonts/font-open-sans.png
new file mode 100644
index 0000000000..07dd20c70c
Binary files /dev/null and b/attachment/doc/visual_guide/fonts/font-open-sans.png differ
diff --git a/attachment/doc/visual_guide/fonts/font-ostrich-sans-bold.png b/attachment/doc/visual_guide/fonts/font-ostrich-sans-bold.png
new file mode 100644
index 0000000000..5fbf54ab98
Binary files /dev/null and b/attachment/doc/visual_guide/fonts/font-ostrich-sans-bold.png differ
diff --git a/attachment/doc/visual_guide/fonts/font-ostrich-sans.png b/attachment/doc/visual_guide/fonts/font-ostrich-sans.png
new file mode 100644
index 0000000000..0b316482ab
Binary files /dev/null and b/attachment/doc/visual_guide/fonts/font-ostrich-sans.png differ
diff --git a/attachment/doc/visual_guide/icons/logo-outline-small.svg b/attachment/doc/visual_guide/icons/logo-outline-small.svg
new file mode 100644
index 0000000000..31ab78c2df
--- /dev/null
+++ b/attachment/doc/visual_guide/icons/logo-outline-small.svg
@@ -0,0 +1,79 @@
+
+
+
+
diff --git a/attachment/doc/visual_guide/icons/qubes-logo-home.svg b/attachment/doc/visual_guide/icons/qubes-logo-home.svg
new file mode 100644
index 0000000000..aa2936bd74
--- /dev/null
+++ b/attachment/doc/visual_guide/icons/qubes-logo-home.svg
@@ -0,0 +1,77 @@
+
+
+
+
diff --git a/attachment/doc/visual_guide/icons/qubes-logo-icon-128.png b/attachment/doc/visual_guide/icons/qubes-logo-icon-128.png
new file mode 100644
index 0000000000..98f6036edb
Binary files /dev/null and b/attachment/doc/visual_guide/icons/qubes-logo-icon-128.png differ
diff --git a/attachment/doc/visual_guide/icons/qubes-logo-icon-48.png b/attachment/doc/visual_guide/icons/qubes-logo-icon-48.png
new file mode 100644
index 0000000000..313c12c381
Binary files /dev/null and b/attachment/doc/visual_guide/icons/qubes-logo-icon-48.png differ
diff --git a/attachment/doc/visual_guide/icons/qubes-logo-icon-512.png b/attachment/doc/visual_guide/icons/qubes-logo-icon-512.png
new file mode 100644
index 0000000000..955e722c9f
Binary files /dev/null and b/attachment/doc/visual_guide/icons/qubes-logo-icon-512.png differ
diff --git a/attachment/doc/visual_guide/swatches/q-blue-light.svg b/attachment/doc/visual_guide/swatches/q-blue-light.svg
new file mode 100644
index 0000000000..e02f51770d
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-blue-light.svg
@@ -0,0 +1 @@
+
diff --git a/attachment/doc/visual_guide/swatches/q-blue.svg b/attachment/doc/visual_guide/swatches/q-blue.svg
new file mode 100644
index 0000000000..4c65629c72
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-blue.svg
@@ -0,0 +1 @@
+
diff --git a/attachment/doc/visual_guide/swatches/q-danger.svg b/attachment/doc/visual_guide/swatches/q-danger.svg
new file mode 100644
index 0000000000..b7b5d66b0c
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-danger.svg
@@ -0,0 +1 @@
+
diff --git a/attachment/doc/visual_guide/swatches/q-gray-base.svg b/attachment/doc/visual_guide/swatches/q-gray-base.svg
new file mode 100644
index 0000000000..445fb4c244
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-gray-base.svg
@@ -0,0 +1 @@
+
diff --git a/attachment/doc/visual_guide/swatches/q-gray-dark.svg b/attachment/doc/visual_guide/swatches/q-gray-dark.svg
new file mode 100644
index 0000000000..17cf5655fc
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-gray-dark.svg
@@ -0,0 +1 @@
+
diff --git a/attachment/doc/visual_guide/swatches/q-gray-darker.svg b/attachment/doc/visual_guide/swatches/q-gray-darker.svg
new file mode 100644
index 0000000000..0527478e9e
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-gray-darker.svg
@@ -0,0 +1 @@
+
diff --git a/attachment/doc/visual_guide/swatches/q-gray-light.svg b/attachment/doc/visual_guide/swatches/q-gray-light.svg
new file mode 100644
index 0000000000..f59a955485
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-gray-light.svg
@@ -0,0 +1 @@
+
diff --git a/attachment/doc/visual_guide/swatches/q-gray-lighter.svg b/attachment/doc/visual_guide/swatches/q-gray-lighter.svg
new file mode 100644
index 0000000000..922f8fc4fb
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-gray-lighter.svg
@@ -0,0 +1 @@
+
diff --git a/attachment/doc/visual_guide/swatches/q-gray.svg b/attachment/doc/visual_guide/swatches/q-gray.svg
new file mode 100644
index 0000000000..59dc77e9e6
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-gray.svg
@@ -0,0 +1 @@
+
diff --git a/attachment/doc/visual_guide/swatches/q-info.svg b/attachment/doc/visual_guide/swatches/q-info.svg
new file mode 100644
index 0000000000..38ab94c8a6
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-info.svg
@@ -0,0 +1 @@
+
diff --git a/attachment/doc/visual_guide/swatches/q-primary.svg b/attachment/doc/visual_guide/swatches/q-primary.svg
new file mode 100644
index 0000000000..de08e63375
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-primary.svg
@@ -0,0 +1 @@
+
diff --git a/attachment/doc/visual_guide/swatches/q-purple.svg b/attachment/doc/visual_guide/swatches/q-purple.svg
new file mode 100644
index 0000000000..26c39df497
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-purple.svg
@@ -0,0 +1 @@
+
diff --git a/attachment/doc/visual_guide/swatches/q-success.svg b/attachment/doc/visual_guide/swatches/q-success.svg
new file mode 100644
index 0000000000..c08c012cc1
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-success.svg
@@ -0,0 +1 @@
+
diff --git a/attachment/doc/visual_guide/swatches/q-warning.svg b/attachment/doc/visual_guide/swatches/q-warning.svg
new file mode 100644
index 0000000000..47f731268c
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-warning.svg
@@ -0,0 +1 @@
+
diff --git a/attachment/doc/visual_guide/swatches/q-yellow.svg b/attachment/doc/visual_guide/swatches/q-yellow.svg
new file mode 100644
index 0000000000..0b3b72b937
--- /dev/null
+++ b/attachment/doc/visual_guide/swatches/q-yellow.svg
@@ -0,0 +1 @@
+
diff --git a/conf.py b/conf.py
index b6339e67fd..596b076e9a 100644
--- 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
index c3f9515e87..6af9c97901 100644
--- 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 `__ 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 ` for other design related information.
----
diff --git a/developer/general/visual-style-guide.rst b/developer/general/visual-style-guide.rst
new file mode 100644
index 0000000000..cc46b2d671
--- /dev/null
+++ b/developer/general/visual-style-guide.rst
@@ -0,0 +1,237 @@
+==================
+Visual Style Guide
+==================
+
+Fonts
+-----
+
+Currently Qubes OS is using the following fonts for our website, branding, and other public facing (non-OS) materials. The OS itself uses what is normal for a user's desktop environment of choice.
+
+.. list-table::
+ :header-rows: 0
+ :widths: 75 25
+
+ * - .. image:: /attachment/doc/visual_guide/fonts/font-ostrich-sans-bold.png
+ :alt:
+ - **Family:** Ostrich Sans Bold
+
+ * - .. image:: /attachment/doc/visual_guide/fonts/font-ostrich-sans.png
+ :alt:
+ - **Family:** Ostrich Sans
+
+ * - .. image:: /attachment/doc/visual_guide/fonts/font-open-sans-bold.png
+ :alt:
+ - **Family:** Open Sans Bold
+
+ * - .. image:: /attachment/doc/visual_guide/fonts/font-open-sans.png
+ :alt:
+ - **Family:** Open Sans
+
+Colors
+------
+
+Grayscale
+^^^^^^^^^
+
+The following grayscale colors are currently used on the Qubes website and documentation, and they will eventually match colors within the OS itself.
+
+.. container:: swatch-container
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-gray-base.svg
+ :alt:
+
+ **Main Black**
+
+ ``#333333``
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-gray-darker.svg
+ :alt:
+
+ **Sub Gray**
+
+ ``#888888``
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-gray-dark.svg
+ :alt:
+
+ **Icon Dark Gray**
+
+ ``#8e8e95``
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-gray.svg
+ :alt:
+
+ **Middle Gray**
+
+ ``#bfbfbf``
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-gray-light.svg
+ :alt:
+
+ **Light Gray**
+
+ ``#d2d2d2``
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-gray-lighter.svg
+ :alt:
+
+ **Background Gray**
+
+ ``#f5f5f5``
+
+Primary & UI Colors
+^^^^^^^^^^^^^^^^^^^
+
+The following colors are currently being used on the Qubes website and documentation, and they will eventually match the colors within the OS itself.
+
+.. container:: swatch-container
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-primary.svg
+ :alt:
+
+ **Primary Blue**
+
+ ``#3874d8``
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-info.svg
+ :alt:
+
+ **Info Blue**
+
+ ``#43c4f3``
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-blue.svg
+ :alt:
+
+ **Qubes Blue**
+
+ ``#63a0ff``
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-blue-light.svg
+ :alt:
+
+ **Light Blue**
+
+ ``#99bfff``
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-success.svg
+ :alt:
+
+ **Success Green**
+
+ ``#5ad840``
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-purple.svg
+ :alt:
+
+ **Purple**
+
+ ``#9f389f``
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-danger.svg
+ :alt:
+
+ **Danger Red**
+
+ ``#bd2727``
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-warning.svg
+ :alt:
+
+ **Warning Orange**
+
+ ``#e79e27``
+
+ .. container:: swatch-item
+
+ .. image:: /attachment/doc/visual_guide/swatches/q-yellow.svg
+ :alt:
+
+ **Alert Yellow**
+
+ ``#e7e532``
+
+Icons
+-----
+
+Currently, all the icons on the Qubes-OS.org website are generated using Font Awesome.
+
+As more custom work is done to generate icons for the operating system itself, they will be added here!
+
+Logos
+-----
+
+The following is a collection of various sizes and versions of the Qubes logo used both in the OS itself and on our website.
+The artwork is licensed under Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0).
+The code is licensed under GNU GPLv2.
+GPLv2 and the source code can be `downloaded here `__.
+
+Logo Assets
+^^^^^^^^^^^
+
+.. list-table::
+ :header-rows: 0
+ :widths: 35 65
+
+ * - .. image:: /attachment/doc/visual_guide/icons/qubes-logo-home.svg
+ :alt: qubes-logo-home.svg
+ - :Image: qubes-logo-home.svg
+ :Size: 200×200px
+ :Format: SVG
+ :Download: :download:`qubes-logo-home.svg `
+
+ * - .. image:: /attachment/doc/visual_guide/icons/logo-outline-small.svg
+ :alt: logo-outline-small.svg
+ - :Image: logo-outline-small.svg
+ :Size: 40×40px
+ :Format: SVG
+ :Download: :download:`qubes-logo-home.svg `
+
+ * - .. image:: /attachment/doc/visual_guide/icons/qubes-logo-icon-512.png
+ :alt: qubes-logo-icon-512.png
+ - :Image: qubes-logo-icon.png
+ :Size: 512×512px
+ :Format: PNG
+ :Download: :download:`qubes-logo-icon-512.png `
+
+ * - .. image:: /attachment/doc/visual_guide/icons/qubes-logo-icon-128.png
+ :alt: qubes-logo-icon-128.png
+ - :Image: qubes-logo-icon.png
+ :Size: 128×128px
+ :Format: PNG
+ :Download: :download:`qubes-logo-icon-128.png `
+
+ * - .. image:: /attachment/doc/visual_guide/icons/qubes-logo-icon-48.png
+ :alt: qubes-logo-icon-48.png
+ - :Image: qubes-logo-icon.png
+ :Size: 48×48px
+ :Format: PNG
+ :Download: :download:`qubes-logo-icon-48.png `
\ No newline at end of file
diff --git a/index.rst b/index.rst
index 50af0c4fc8..0b504a4b9d 100644
--- a/index.rst
+++ b/index.rst
@@ -217,11 +217,10 @@ Core documentation for Qubes developers and advanced users.
developer/general/continuous-integration
developer/general/usability-ux
developer/general/developing-gui-applications
- Visual style guide
+ developer/general/visual-style-guide
developer/general/research
developer/general/devel-books
-
.. _code:
.. toctree::