diff --git a/styleguide/glow/index.html b/styleguide/glow/index.html
index e987a3a..652c52e 100644
--- a/styleguide/glow/index.html
+++ b/styleguide/glow/index.html
@@ -108,7 +108,154 @@
         </div>
 
         <h1>Glow</h1>
-        <!-- TODO -->
+        <p><b>Very rough draft!</b></p>
+        <h2>Darkmode</h2>
+        <p>
+          To add the glow to something of a given height (or fontsize), here
+          <b>1em</b>, one needs to calculate four values:
+        </p>
+        <ul>
+          <li>An eighth; here 0.125em</li>
+          <li>A sixteenth; here 0.0625</li>
+          <li>A thirtysecond; here 0.03125</li>
+          <li>A sixtyfourth; here 0.015625</li>
+        </ul>
+        <p>
+          The first three values are used for drop-shadows, the last for an
+          inset shadow. Sadly, the latter is currently not possible using plain
+          CSS filters. Which is why it requires the use of an SVG filter. But
+          support for external SVG filters (using
+          <code>url("filter.svg#filter-id")</code>) is still flaky, we instead
+          opted to have to versions of each glow. One using SVG filters for
+          use-cases which support it (like the logo), and one using CSS filters
+          (as for this page's headings). Below you'll find implementation
+          examples using the primary color CSS variable for the glow color as
+          specified in our (S)CSS stylesheets. Simply replace
+          <code>--color-primary</code> with <code>--color-secondary</code> to
+          use the secondary color.
+        </p>
+        <ul>
+          <li>
+            For CSS filters one can simply use the following set of three
+            shadows layered atop each other:
+            <pre>
+filter:
+  drop-shadow(0 0 0.03125em var(--color-white))
+  drop-shadow(0 0 0.0625em var(--color-primary))
+  drop-shadow(0 0 0.125em var(--color-primary));</pre
+            >
+          </li>
+          <li>
+            For SVG filters instead use the following two filters:
+            <pre>
+&lt;filter x="-150%" y="-150%" width="400%" height="400%"
+   style="color-interpolation-filters:sRGB;" id="textBlurPrimary"&gt;
+  &lt;feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="16.25"
+     style="flood-color: var(--color-white);" result="drop_shadow_0" /&gt;
+  &lt;feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="32.5"
+     style="flood-color: var(--color-primary);" result="drop_shadow_1" /&gt;
+  &lt;feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="65"
+     style="flood-color: var(--color-primary);" result="drop_shadow_2" /&gt;
+&lt;/filter&gt;
+
+&lt;filter x="-150%" y="-150%" width="400%" height="400%"
+   style="color-interpolation-filters:sRGB;" id="textInsetPrimary"&gt;
+  &lt;feFlood style="flood-color: var(--color-white);" result="flood-white"
+     /&gt;
+  &lt;feFlood style="flood-color: var(--color-primary);"
+     result="flood-glow-color" /&gt;
+
+  &lt;feComposite in="flood-glow-color" in2="SourceAlpha" operator="in"
+     result="flooded" /&gt;
+  &lt;feGaussianBlur in="SourceAlpha" stdDeviation="8.125"
+     result="inset_drop_shadow" /&gt;
+  &lt;feComposite in="flood-white" in2="inset_drop_shadow" operator="in"
+     result="inset_drop_shadow_white" /&gt;
+  &lt;feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in"
+     result="inset_shadow" /&gt;
+  &lt;feMerge result="final"&gt;
+    &lt;feMergeNode in="flooded" /&gt;
+    &lt;feMergeNode in="inset_shadow" /&gt;
+  &lt;/feMerge&gt;
+&lt;/filter&gt;</pre
+            >
+            We use two separate filters here, because when combining shadows
+            with the primary and the secondary color as can be seen in the logo,
+            it is necessary to first add all drop-shadows to all paths using
+            <code>style="mix-blend-mode: screen;"</code> and then layer all
+            inset-shadow filters ontop of that. Otherwise one path's drop-shadow
+            could layer over another path's inset-shadow. Have a look at the
+            logo's source for an example.
+          </li>
+        </ul>
+
+        <h2>Lightmode</h2>
+        <p>
+          To add the dim glow to something of a given height (or fontsize), here
+          <b>1em</b>, one needs to calculate one value: a thirtysecond; here
+          0.03125.
+        </p>
+        <p>
+          The value is needed for botha drop shadow as well as an inset shadow.
+          Sadly, the latter is currently not possible using plain CSS filters.
+          Which is why it requires the use of an SVG filter. But support for
+          external SVG filters (using
+          <code>url("filter.svg#filter-id")</code>) is still flaky, we instead
+          opted to have to versions of each glow. One using SVG filters for
+          use-cases which support it (like the logo), and one using CSS filters
+          (as for this page's headings). Below you'll find implementation
+          examples. They specify tones of the primary color using their
+          respective CSS variable in our stylesheet. You can simply replace each
+          occurence of "primary" with "secondary" and "argon" with "krypton" to
+          get a glow of the secondary color.
+        </p>
+        <ul>
+          <li>
+            For CSS filters one can simply use the following properties:
+            <pre>
+filter: drop-shadow(0 0 0.03125em var(--color-argon-950));
+color: var(--color-argon-800);</pre
+            >
+          </li>
+          <li>
+            For SVG filters instead use the following two filters:
+            <pre>
+&lt;filter x="-25%" y="-150%" width="150%" height="400%"
+   style="color-interpolation-filters:sRGB;" id="textBlurPrimary"&gt;
+  &lt;feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="16.25"
+     style="flood-color: var(--color-argon-950);" result="drop_shadow_0" /&gt;
+&lt;/filter&gt;
+
+&lt;filter x="-25%" y="-150%" width="150%" height="400%"
+   style="color-interpolation-filters:sRGB;" id="textInsetPrimary"&gt;
+  &lt;feFlood style="flood-color: var(--color-primary);" result="flood_brighter"
+     /&gt;
+  &lt;feFlood style="flood-color: var(--color-argon-800);"
+     result="flood_darker" /&gt;
+
+  &lt;feComposite in="flood_darker" in2="SourceAlpha" operator="in"
+     result="flooded" /&gt;
+  &lt;feGaussianBlur in="SourceAlpha" stdDeviation="8.125"
+     result="inset_drop_shadow" /&gt;
+  &lt;feComposite in="flood_brighter" in2="inset_drop_shadow" operator="in"
+     result="inset_drop_shadow_brighter" /&gt;
+  &lt;feComposite in="inset_drop_shadow_brighter" in2="SourceAlpha" operator="in"
+     result="inset_shadow" /&gt;
+  &lt;feMerge result="final"&gt;
+    &lt;feMergeNode in="flooded" /&gt;
+    &lt;feMergeNode in="inset_shadow" /&gt;
+  &lt;/feMerge&gt;
+&lt;/filter&gt;</pre
+            >
+            We use two separate filters here, because when combining shadows
+            with the primary and the secondary color as can be seen in the logo,
+            it is necessary to first add all drop-shadows to all paths using
+            <code>style="mix-blend-mode: screen;"</code> and then layer all
+            inset-shadow filters ontop of that. Otherwise one path's drop-shadow
+            could layer over another path's inset-shadow. Have a look at the
+            logo's source for an example.
+          </li>
+        </ul>
       </main>
     </div>
     <script