From 16da296f79b18af379ec252a059823f23642c9d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20Sch=C3=A4fer?= <j.wielicki@sotecware.net>
Date: Thu, 28 Jan 2021 17:23:50 +0100
Subject: [PATCH] Tweak colours slightly

- Make them warmer overall
- Fix tone in the upper yellows
---
 docs/colours.svg             | 761 ++++++++++++++++-------------------
 snikket_web/scss/_theme.scss |  42 +-
 2 files changed, 369 insertions(+), 434 deletions(-)

diff --git a/docs/colours.svg b/docs/colours.svg
index ba8c75b..93048c9 100644
--- a/docs/colours.svg
+++ b/docs/colours.svg
@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
@@ -9,426 +7,363 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="334mm"
-   height="154mm"
-   viewBox="0 0 334 154"
    version="1.1"
-   id="svg8"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
-   sodipodi:docname="colours.svg"
-   inkscape:export-filename="/home/horazont/tmp/colours.png"
-   inkscape:export-xdpi="96"
-   inkscape:export-ydpi="96">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1.4"
-     inkscape:cx="642.84838"
-     inkscape:cy="251.88403"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     inkscape:window-width="2560"
-     inkscape:window-height="1401"
-     inkscape:window-x="0"
-     inkscape:window-y="39"
-     inkscape:window-maximized="0"
-     fit-margin-top="5"
-     fit-margin-left="5"
-     fit-margin-right="5"
-     fit-margin-bottom="5" />
+   id="svg1424"
+   sodipodi:docname="out.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
   <metadata
-     id="metadata5">
+     id="metadata1430">
     <rdf:RDF>
       <cc:Work
          rdf:about="">
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(65,-148)">
-    <rect
-       style="opacity:1;fill:#418fc7;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect4759"
-       width="24"
-       height="24"
-       x="120"
-       y="273" />
-    <rect
-       y="273"
-       x="-2.7815501e-08"
-       height="24"
-       width="24"
-       id="rect9362"
-       style="opacity:1;fill:#062943;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="273"
-       x="240"
-       height="24"
-       width="24"
-       id="rect9364"
-       style="opacity:1;fill:#e4f3fd;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="273"
-       x="60"
-       height="24"
-       width="24"
-       id="rect9366"
-       style="opacity:1;fill:#0e4c76;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       style="opacity:1;fill:#9dccf0;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9368"
-       width="24"
-       height="24"
-       x="180"
-       y="273" />
-    <rect
-       style="opacity:1;fill:#0f3d62;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9370"
-       width="24"
-       height="24"
-       x="30"
-       y="273" />
-    <rect
-       y="273"
-       x="90"
-       height="24"
-       width="24"
-       id="rect9372"
-       style="opacity:1;fill:#226494;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="273"
-       x="150"
-       height="24"
-       width="24"
-       id="rect9376"
-       style="opacity:1;fill:#72b2e3;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="273"
-       x="210"
-       height="24"
-       width="24"
-       id="rect9378"
-       style="opacity:1;fill:#b5d8f3;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="243"
-       x="120"
-       height="24"
-       width="24"
-       id="rect9380"
-       style="opacity:1;fill:#c95e40;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       style="opacity:1;fill:#340e03;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9382"
-       width="24"
-       height="24"
-       x="0"
-       y="243" />
-    <rect
-       style="opacity:1;fill:#fef1ed;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9384"
-       width="24"
-       height="24"
-       x="240"
-       y="243" />
-    <rect
-       style="opacity:1;fill:#e2b00c;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9436"
-       width="24"
-       height="24"
-       x="120"
-       y="213" />
-    <rect
-       style="opacity:1;fill:#f2ac99;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9454"
-       width="24"
-       height="24"
-       x="180"
-       y="243" />
-    <rect
-       y="243"
-       x="210"
-       height="24"
-       width="24"
-       id="rect9456"
-       style="opacity:1;fill:#fbc2b3;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="243"
-       x="150"
-       height="24"
-       width="24"
-       id="rect9458"
-       style="opacity:1;fill:#ed947c;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       style="opacity:1;fill:#883017;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9460"
-       width="24"
-       height="24"
-       x="60"
-       y="243" />
-    <rect
-       y="243"
-       x="30"
-       height="24"
-       width="24"
-       id="rect9462"
-       style="opacity:1;fill:#681f0b;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="243"
-       x="90"
-       height="24"
-       width="24"
-       id="rect9464"
-       style="opacity:1;fill:#a33d21;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="183"
-       x="120"
-       height="24"
-       width="24"
-       id="rect9466"
-       style="opacity:1;fill:#55c644;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="213"
-       x="240"
-       height="24"
-       width="24"
-       id="rect9484"
-       style="opacity:1;fill:#fffcf0;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="213"
-       x="0"
-       height="24"
-       width="24"
-       id="rect9486"
-       style="opacity:1;fill:#302100;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="213"
-       x="60"
-       height="24"
-       width="24"
-       id="rect9488"
-       style="opacity:1;fill:#886600;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       style="opacity:1;fill:#563600;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9490"
-       width="24"
-       height="24"
-       x="30"
-       y="213" />
-    <rect
-       y="213"
-       x="90"
-       height="24"
-       width="24"
-       id="rect9494"
-       style="opacity:1;fill:#b98601;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="213"
-       x="180"
-       height="24"
-       width="24"
-       id="rect9496"
-       style="opacity:1;fill:#feed93;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="213"
-       x="150"
-       height="24"
-       width="24"
-       id="rect9500"
-       style="opacity:1;fill:#fde58a;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       style="opacity:1;fill:#fff7c2;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9502"
-       width="24"
-       height="24"
-       x="210"
-       y="213" />
-    <rect
-       style="opacity:1;fill:#8f8983;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9504"
-       width="24"
-       height="24"
-       x="120"
-       y="153" />
-    <rect
-       y="153"
-       x="0"
-       height="24"
-       width="24"
-       id="rect9506"
-       style="opacity:1;fill:#1f1b17;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="153"
-       x="240"
-       height="24"
-       width="24"
-       id="rect9508"
-       style="opacity:1;fill:#f6f5f4;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="153"
-       x="180"
-       height="24"
-       width="24"
-       id="rect9510"
-       style="opacity:1;fill:#cac3bd;fill-opacity:0.98872178;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       style="opacity:1;fill:#e3e1df;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9512"
-       width="24"
-       height="24"
-       x="210"
-       y="153" />
-    <rect
-       style="opacity:1;fill:#4e4a46;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9514"
-       width="24"
-       height="24"
-       x="60"
-       y="153" />
-    <rect
-       y="153"
-       x="30"
-       height="24"
-       width="24"
-       id="rect9516"
-       style="opacity:1;fill:#3d3833;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       style="opacity:1;fill:#706965;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9518"
-       width="24"
-       height="24"
-       x="90"
-       y="153" />
-    <rect
-       y="153"
-       x="150"
-       height="24"
-       width="24"
-       id="rect9520"
-       style="opacity:1;fill:#b1aca6;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       style="opacity:1;fill:#ecfbe6;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9522"
-       width="24"
-       height="24"
-       x="240"
-       y="183" />
-    <rect
-       style="opacity:1;fill:#052f03;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9524"
-       width="24"
-       height="24"
-       x="0"
-       y="183" />
-    <rect
-       style="opacity:1;fill:#197713;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9526"
-       width="24"
-       height="24"
-       x="60"
-       y="183" />
-    <rect
-       y="183"
-       x="30"
-       height="24"
-       width="24"
-       id="rect9528"
-       style="opacity:1;fill:#0c4608;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       y="183"
-       x="90"
-       height="24"
-       width="24"
-       id="rect9530"
-       style="opacity:1;fill:#218a1b;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <rect
-       style="opacity:1;fill:#abed9c;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9532"
-       width="24"
-       height="24"
-       x="180"
-       y="183" />
-    <rect
-       style="opacity:1;fill:#81e06e;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9536"
-       width="24"
-       height="24"
-       x="150"
-       y="183" />
-    <rect
-       y="183"
-       x="210"
-       height="24"
-       width="24"
-       id="rect9538"
-       style="opacity:1;fill:#cef6c5;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.69999981px;line-height:1em;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       x="-3.4391122"
-       y="170.58151"
-       id="text9546"><tspan
-         sodipodi:role="line"
-         id="tspan9544"
-         x="-3.4391129"
-         y="170.58151"
-         style="stroke-width:0.26458332px">Grayscale</tspan></text>
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.69999981px;line-height:1em;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       x="-12.554834"
-       y="200.5157"
-       id="text9550"><tspan
-         sodipodi:role="line"
-         id="tspan9548"
-         x="-12.554835"
-         y="200.5157"
-         style="stroke-width:0.26458332px">Success</tspan></text>
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.69999981px;line-height:1em;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       x="-21.180664"
-       y="230.71715"
-       id="text9554"><tspan
-         sodipodi:role="line"
-         id="tspan9552"
-         x="-21.180664"
-         y="230.71715"
-         style="stroke-width:0.26458332px">Accent</tspan></text>
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.69999981px;line-height:1em;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       x="-33.880665"
-       y="261.45316"
-       id="text9558"><tspan
-         sodipodi:role="line"
-         id="tspan9556"
-         x="-33.880665"
-         y="261.45316"
-         style="stroke-width:0.26458332px">Alert</tspan></text>
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.69999981px;line-height:1em;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       x="-17.236719"
-       y="290.85278"
-       id="text9562"><tspan
-         sodipodi:role="line"
-         id="tspan9560"
-         x="-17.236719"
-         y="290.85278"
-         style="stroke-width:0.26458332px">Primary</tspan></text>
-  </g>
+  <defs
+     id="defs1428" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1401"
+     id="namedview1426"
+     showgrid="false"
+     inkscape:zoom="3.9666667"
+     inkscape:cx="123.61033"
+     inkscape:cy="67.707413"
+     inkscape:window-x="0"
+     inkscape:window-y="39"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg1424" />
+  <rect
+     style="fill: #000000;"
+     width="310"
+     height="240"
+     x="-25"
+     y="-25"
+     id="rect1332" />
+  <rect
+     style="fill: #1f1b17;"
+     width="20"
+     height="20"
+     x="0"
+     y="0"
+     id="rect1334" />
+  <rect
+     style="fill: #3d3833;"
+     width="20"
+     height="20"
+     x="30"
+     y="0"
+     id="rect1336" />
+  <rect
+     style="fill: #4e4a46;"
+     width="20"
+     height="20"
+     x="60"
+     y="0"
+     id="rect1338" />
+  <rect
+     style="fill: #706965;"
+     width="20"
+     height="20"
+     x="90"
+     y="0"
+     id="rect1340" />
+  <rect
+     style="fill: #8f8983;"
+     width="20"
+     height="20"
+     x="120"
+     y="0"
+     id="rect1342" />
+  <rect
+     style="fill: #b1aca6;"
+     width="20"
+     height="20"
+     x="150"
+     y="0"
+     id="rect1344" />
+  <rect
+     style="fill: #cac3bd;"
+     width="20"
+     height="20"
+     x="180"
+     y="0"
+     id="rect1346" />
+  <rect
+     style="fill: #e3e1df;"
+     width="20"
+     height="20"
+     x="210"
+     y="0"
+     id="rect1348" />
+  <rect
+     style="fill: #f6f5f4;"
+     width="20"
+     height="20"
+     x="240"
+     y="0"
+     id="rect1350" />
+  <rect
+     style="fill:#062243;fill-opacity:1"
+     width="20"
+     height="20"
+     x="0"
+     y="40"
+     id="rect1352" />
+  <rect
+     style="fill:#0f3462;fill-opacity:1"
+     width="20"
+     height="20"
+     x="30"
+     y="40"
+     id="rect1354" />
+  <rect
+     style="fill:#0e4276;fill-opacity:1"
+     width="20"
+     height="20"
+     x="60"
+     y="40"
+     id="rect1356" />
+  <rect
+     style="fill:#225994;fill-opacity:1"
+     width="20"
+     height="20"
+     x="90"
+     y="40"
+     id="rect1358" />
+  <rect
+     style="fill:#4182c7;fill-opacity:1"
+     width="20"
+     height="20"
+     x="120"
+     y="40"
+     id="rect1360" />
+  <rect
+     style="fill:#72a7e3;fill-opacity:1"
+     width="20"
+     height="20"
+     x="150"
+     y="40"
+     id="rect1362" />
+  <rect
+     style="fill:#9dc4f0;fill-opacity:1"
+     width="20"
+     height="20"
+     x="180"
+     y="40"
+     id="rect1364" />
+  <rect
+     style="fill:#b5d2f3;fill-opacity:1"
+     width="20"
+     height="20"
+     x="210"
+     y="40"
+     id="rect1366" />
+  <rect
+     style="fill:#e4f0fd;fill-opacity:1"
+     width="20"
+     height="20"
+     x="240"
+     y="40"
+     id="rect1368" />
+  <rect
+     style="fill: #340e03;"
+     width="20"
+     height="20"
+     x="0"
+     y="80"
+     id="rect1370" />
+  <rect
+     style="fill: #681f0b;"
+     width="20"
+     height="20"
+     x="30"
+     y="80"
+     id="rect1372" />
+  <rect
+     style="fill: #883017;"
+     width="20"
+     height="20"
+     x="60"
+     y="80"
+     id="rect1374" />
+  <rect
+     style="fill: #a33d21;"
+     width="20"
+     height="20"
+     x="90"
+     y="80"
+     id="rect1376" />
+  <rect
+     style="fill: #c95e40;"
+     width="20"
+     height="20"
+     x="120"
+     y="80"
+     id="rect1378" />
+  <rect
+     style="fill: #ed947c;"
+     width="20"
+     height="20"
+     x="150"
+     y="80"
+     id="rect1380" />
+  <rect
+     style="fill: #f2ac99;"
+     width="20"
+     height="20"
+     x="180"
+     y="80"
+     id="rect1382" />
+  <rect
+     style="fill: #fbc2b3;"
+     width="20"
+     height="20"
+     x="210"
+     y="80"
+     id="rect1384" />
+  <rect
+     style="fill: #fef1ed;"
+     width="20"
+     height="20"
+     x="240"
+     y="80"
+     id="rect1386" />
+  <rect
+     style="fill: #302100;"
+     width="20"
+     height="20"
+     x="0"
+     y="120"
+     id="rect1388" />
+  <rect
+     style="fill: #563600;"
+     width="20"
+     height="20"
+     x="30"
+     y="120"
+     id="rect1390" />
+  <rect
+     style="fill: #795b00;"
+     width="20"
+     height="20"
+     x="60"
+     y="120"
+     id="rect1392" />
+  <rect
+     style="fill: #a07501;"
+     width="20"
+     height="20"
+     x="90"
+     y="120"
+     id="rect1394" />
+  <rect
+     style="fill: #c79b0e;"
+     width="20"
+     height="20"
+     x="120"
+     y="120"
+     id="rect1396" />
+  <rect
+     style="fill: #f4ce3f;"
+     width="20"
+     height="20"
+     x="150"
+     y="120"
+     id="rect1398" />
+  <rect
+     style="fill:#fee577;fill-opacity:1"
+     width="20"
+     height="20"
+     x="180"
+     y="120"
+     id="rect1400" />
+  <rect
+     style="fill:#fef1c1;fill-opacity:1"
+     width="20"
+     height="20"
+     x="210"
+     y="120"
+     id="rect1402" />
+  <rect
+     style="fill:#fff8e8;fill-opacity:1"
+     width="20"
+     height="20"
+     x="240"
+     y="120"
+     id="rect1404" />
+  <rect
+     style="fill:#172f03;fill-opacity:1"
+     width="20"
+     height="20"
+     x="0"
+     y="160"
+     id="rect1406" />
+  <rect
+     style="fill:#244608;fill-opacity:1"
+     width="20"
+     height="20"
+     x="30"
+     y="160"
+     id="rect1408" />
+  <rect
+     style="fill:#407713;fill-opacity:1"
+     width="20"
+     height="20"
+     x="60"
+     y="160"
+     id="rect1410" />
+  <rect
+     style="fill:#548f19;fill-opacity:1"
+     width="20"
+     height="20"
+     x="90"
+     y="160"
+     id="rect1412" />
+  <rect
+     style="fill:#7fc644;fill-opacity:1"
+     width="20"
+     height="20"
+     x="120"
+     y="160"
+     id="rect1414" />
+  <rect
+     style="fill:#a1e06e;fill-opacity:1"
+     width="20"
+     height="20"
+     x="150"
+     y="160"
+     id="rect1416" />
+  <rect
+     style="fill:#c0ed9c;fill-opacity:1"
+     width="20"
+     height="20"
+     x="180"
+     y="160"
+     id="rect1418" />
+  <rect
+     style="fill:#dbf6c5;fill-opacity:1"
+     width="20"
+     height="20"
+     x="210"
+     y="160"
+     id="rect1420" />
+  <rect
+     style="fill:#effbe6;fill-opacity:1"
+     width="20"
+     height="20"
+     x="240"
+     y="160"
+     id="rect1422" />
 </svg>
diff --git a/snikket_web/scss/_theme.scss b/snikket_web/scss/_theme.scss
index 4a7b33e..62a2de0 100644
--- a/snikket_web/scss/_theme.scss
+++ b/snikket_web/scss/_theme.scss
@@ -11,15 +11,15 @@ $colours: (
     #f6f5f4
   ],
   "blue": [
-    #062943,
-    #0f3d62,
-    #0e4c76,
-    #226494,
-    #418fc7,
-    #72b2e3,
-    #9dccf0,
-    #b5d8f3,
-    #e4f3fd
+    #062243,
+    #0f3462,
+    #0e4276,
+    #225994,
+    #4182c7,
+    #72a7e3,
+    #9dc4f0,
+    #b5d2f3,
+    #e4f0fd
   ],
   "red": [
     #340e03,
@@ -39,20 +39,20 @@ $colours: (
     #a07501,
     #c79b0e,
     #f4ce3f,
-    #feed93,
-    #fef6c1,
-    #fffbe8
+    #fee577,
+    #fef1c1,
+    #fff8e8
   ],
   "green": [
-    #052f03,
-    #0c4608,
-    #197713,
-    #218a1b,
-    #55c644,
-    #81e06e,
-    #abed9c,
-    #cef6c5,
-    #ecfbe6
+    #172f03,
+    #244608,
+    #407713,
+    #548f19,
+    #7fc644,
+    #a1e06e,
+    #c0ed9c,
+    #dbf6c5,
+    #effbe6
   ]
 );