Explain color choices and usage

styleguide/colors/index.html

@@ -49,7 +49,53 @@
             </div>
             <h1>Color Guide</h1>
             <p>
-
+                The design consists of two sets of colors: lightmode and darkmode. Each set consists of the same number
+                of colors, each of which has its own function. At the end of the page, one can find an overview of all
+                defined colors for quick lockup. Read on for the functions of each color.
+            </p>
+            <p>
+                The fore- and background colors are chosen for good contrast and are the same but swapped for light- and
+                darkmode. Most backgrounds should use the background color and most texts should use the foreground
+                color. In some cases, more subtelty is needed:
+            </p>
+            <ul>
+                <li>
+                    If visual distinction through containers, boxes or similar is needed, the background shades can be
+                    used to use a slightly lighter background color (in case of darkmode) or a slightly darker one (in
+                    case of lightmode). Preferably, each shade should corespond to a layer of nesting, but if desired,
+                    one can also mix-and-match, as long as the background for the main content is always the regular
+                    background color.
+                </li>
+                <li>
+                    For more subtle text, e.g. in a footer, subtitle, etc. one can use the foreground shades to achieve
+                    this effect. To ensure a high enough contrast between fore- and background, these colors should not
+                    be used in front of the background shades mentioned above, other than for very small amounts of
+                    texts like headings and alike.
+                </li>
+            </ul>
+            <p>
+                Additionally, there are also colors for various design elements. The accent colors can be used for
+                whatever one desires, but are especially intended for use in hyperlinks like this:
+            </p>
+            <table>
+                <caption>Overview of link highlighting</caption>
+                <tr>
+                    <th scope="row">Regular Link:</th>
+                    <td><a class="a-regular" href="">https://eh22.easterhegg.eu/</a></td>
+                </tr>
+                <tr>
+                    <th scope="row">Hover/Focus/Active Link:</th>
+                    <td><a class="a-hover" href="">https://eh22.easterhegg.eu/</a></td>
+                </tr>
+                <tr>
+                    <th scope="row">Visited Link:</th>
+                    <td><a class="a-visited" href="">https://eh22.easterhegg.eu/</a></td>
+                </tr>
+            </table>
+            <p>
+                Other than that, there are two more colors: the error and the success color. Intended for anything
+                regarding user-feedback, they should tell someone that something is a critical action, has some positive
+                or negativ meaning or progresses something in some way or form.
             </p>
 
             <h2>Digital Media</h2>