Styleguide Update 1

2025-04-05 23:50:54 +02:00 · 2025-04-05 23:50:54 +02:00 · 1eff2f0e0b
commit 1eff2f0e0b
parent 844a3bc36e
28 changed files with 692 additions and 74 deletions
--- a/styleguide/assets/icon/fairydust.svg
+++ b/styleguide/assets/icon/fairydust.svg
@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="387.074" height="600">
-    <path d="M193.537 0c-16.56 0-33.118 5.21-47 15.621l-36.002 26.994a134.8 134.8 0 0 0-50.404 77.303l-6.887 29.625a221.3 221.3 0 0 0-2.414 88.346L62 301.543a74.85 74.85 0 0 1-11.45 54.486l-5.624 8.436A256 256 0 0 0 9.58 444.359L3.984 466.75a133.52 133.52 0 0 0 9.973 91.814l5.479 11.014c19.46 39.138 78.74 39.138 98.2 0l5.477-11.014a597 597 0 0 0 31.787-76.992l-.066.207c4.198-12.242 15.545-20.271 28.486-20.16h20.219c13.223 0 24.748 8.31 28.93 20.854l.008.015a590 590 0 0 0 31.49 76.092l5.47 11c19.46 39.137 78.742 39.137 98.202 0l5.476-11.016a133.52 133.52 0 0 0 9.975-91.814l-5.596-22.391a256 256 0 0 0-35.345-79.893l-5.625-8.437a73.98 73.98 0 0 1-11.235-54.295l10.69-58.789a223.1 223.1 0 0 0-1.713-88.302l-7.649-34.399a133.16 133.16 0 0 0-50.078-77.629l-36.002-26.994C226.656 5.21 210.097 0 193.537 0m0 49.902c5.96 0 11.919 1.902 17 5.713l36.002 27.002a83.1 83.1 0 0 1 31.27 48.47l7.648 34.407a173.1 173.1 0 0 1 1.328 68.504l-10.69 58.79a124.06 124.06 0 0 0 18.833 90.982l5.617 8.43a206 206 0 0 1 28.441 64.288l5.596 22.389a83.47 83.47 0 0 1-6.236 57.424l-5.479 11.021c-2.485 4.998-6.173 4.998-8.658 0l-5.479-11.021-.006-.015a540 540 0 0 1-28.82-69.627l-.008-.023c-10.933-32.766-41.813-55.023-76.357-55.023h-19.791c-34.27-.295-65.094 21.528-76.211 53.947l-.067.199A547 547 0 0 1 78.341 536.3l-5.476 11.022c-2.485 4.998-6.173 4.998-8.658 0L58.728 536.3a83.47 83.47 0 0 1-6.236-57.424l5.594-22.388a206 206 0 0 1 28.443-64.29l5.617-8.43a124.93 124.93 0 0 0 19.098-90.87l-11.17-63.654a171.3 171.3 0 0 1 1.87-68.379l6.886-29.63a84.74 84.74 0 0 1 31.705-48.618l36.002-27.002c5.082-3.81 11.04-5.713 17-5.713M193.525 126c-41.125 0-75 33.875-75 75s33.875 75 75 75 75-33.875 75-75-33.874-75-75-75m0 50c14.104 0 25 10.897 25 25s-10.896 25-25 25-25-10.897-25-25 10.897-25 25-25m0 310.617a25 25 0 0 0-25 25v63.967a25 25 0 0 0 25 25 25 25 0 0 0 25-25v-63.967a25 25 0 0 0-25-25" style="stroke-width:3.77952"/>
+    <path d="M193.537 0c-16.56 0-33.118 5.21-47 15.621l-19.998 15a189.67 189.67 0 0 0-70.94 108.78l-2.355 10.142a221.3 221.3 0 0 0-2.414 88.346l18.086 103.05a25 25 0 0 0 28.945 20.301 25 25 0 0 0 20.3-28.945l-18.087-103.05a171.3 171.3 0 0 1 1.87-68.38l2.36-10.148a139.63 139.63 0 0 1 52.235-80.102l19.998-15c10.163-7.622 23.837-7.622 34 0l36.002 27.002a83.1 83.1 0 0 1 31.27 48.47l7.648 34.407a173.1 173.1 0 0 1 1.328 68.504l-10.69 58.79.296-1.388a111.98 111.98 0 0 0 12.314 82.957 25 25 0 0 0 .752 1.204 321.4 321.4 0 0 1 44.38 100.328l.745 2.988a83.47 83.47 0 0 1-6.236 57.424l-5.479 11.021c-2.485 4.998-6.173 4.998-8.658 0l-5.479-11.021-.006-.015a540 540 0 0 1-28.82-69.627l-.008-.023c-10.933-32.766-41.813-55.023-76.357-55.023h-19.791c-34.27-.295-65.094 21.528-76.211 53.947l-.067.199A547 547 0 0 1 78.341 536.3l-5.476 11.022c-2.485 4.998-6.173 4.998-8.658 0L58.728 536.3a83.47 83.47 0 0 1-6.236-57.424l15.303-61.195a25 25 0 0 0-18.198-30.316 25 25 0 0 0-30.318 18.187L3.984 466.749a133.52 133.52 0 0 0 9.973 91.815l5.478 11.013c19.46 39.138 78.741 39.138 98.201 0l5.477-11.013a597 597 0 0 0 31.787-76.992l-.066.207c4.198-12.242 15.545-20.272 28.486-20.16h20.219c13.222 0 24.748 8.309 28.93 20.853l.007.015a590 590 0 0 0 31.49 76.092l5.471 10.998c19.46 39.137 78.741 39.137 98.202 0l5.476-11.014a133.52 133.52 0 0 0 9.975-91.814l-.746-2.99c-10.221-40.882-27.35-79.708-50.6-114.847a61.92 61.92 0 0 1-6.75-45.789 25 25 0 0 0 .295-1.389l10.69-58.789a223.1 223.1 0 0 0-1.713-88.302l-7.649-34.399a133.16 133.16 0 0 0-50.078-77.629l-36.002-26.994C226.656 5.21 210.097 0 193.537 0m-.012 126a25 25 0 0 0-25 25 25 25 0 0 0 25 25c14.104 0 25 10.897 25 25s-10.896 25-25 25-25-10.897-25-25a25 25 0 0 0-25-25 25 25 0 0 0-25 25c0 41.125 33.875 75 75 75s75-33.875 75-75-33.874-75-75-75m0 360.617a25 25 0 0 0-25 25v63.967a25 25 0 0 0 25 25 25 25 0 0 0 25-25v-63.967a25 25 0 0 0-25-25" style="stroke-width:3.77952"/>
 </svg>
--- a/styleguide/assets/icon/looping.svg
+++ b/styleguide/assets/icon/looping.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M231.51 7.746a25 25 0 0 0-9.752.256c-17.828 4.035-35.735 9.9-52.84 18.553a25 25 0 0 0-11.023 33.591 25 25 0 0 0 33.593 11.024c12.659-6.403 26.647-11.084 41.307-14.402a25 25 0 0 0 18.865-29.903 25 25 0 0 0-20.15-19.119m140.744.736a25 25 0 0 0-20.42 18.834 25 25 0 0 0 18.44 30.166c14.563 3.514 28.421 8.42 40.884 15.057a25 25 0 0 0 33.817-10.312 25 25 0 0 0-10.313-33.819c-16.979-9.042-34.844-15.232-52.66-19.531a25 25 0 0 0-9.748-.395M107.334 145.42a25 25 0 0 0-24.295 25.685c.53 19.03 3.845 37.498 8.832 55.06l.045.151.088.303a25 25 0 0 0 30.986 17.024 25 25 0 0 0 17.024-30.989l-.045-.15-.01-.037c-4.05-14.271-6.548-28.663-6.94-42.752a25 25 0 0 0-25.685-24.295zm385.73 3.521a25 25 0 0 0-26.195 23.745c-.7 14.263-3.477 28.763-7.8 43.09a25 25 0 0 0 16.71 31.158 25 25 0 0 0 31.157-16.713c5.3-17.567 8.938-36.037 9.873-55.084a25 25 0 0 0-23.745-26.196M193.774 324.48a25 25 0 0 0-8.682.039 25 25 0 0 0-11.705 5.523 25 25 0 0 0-2.918 35.234c11.308 13.351 23.245 26.099 35.68 38.266a25 25 0 0 0 35.351-.383 25 25 0 0 0-.383-35.353c-11.39-11.145-22.258-22.758-32.494-34.844a25 25 0 0 0-14.85-8.482m210.353 2.636a25 25 0 0 0-14.908 8.377c-10.33 12.023-21.277 23.573-32.737 34.649a25 25 0 0 0-.603 35.35 25 25 0 0 0 35.35.603c12.508-12.089 24.52-24.756 35.914-38.016a25 25 0 0 0-2.67-35.256 25 25 0 0 0-11.664-5.605 25 25 0 0 0-8.682-.102m-61.328 125.031a25 25 0 0 0-21.98 11.91 25 25 0 0 0 8.224 34.385 804 804 0 0 0 44.826 25.55 25 25 0 0 0 33.787-10.415 25 25 0 0 0-10.412-33.787c-14.284-7.553-28.315-15.53-42.039-23.957a25 25 0 0 0-12.406-3.686m-88.475 1.823a25 25 0 0 0-12.422 3.629 753 753 0 0 1-42.144 23.765 25 25 0 0 0-10.574 33.739 25 25 0 0 0 33.738 10.572 803 803 0 0 0 44.943-25.348 25 25 0 0 0 8.385-34.346 25 25 0 0 0-21.926-12.011m270.647 81.006a25 25 0 0 0-6.506.513 25 25 0 0 0-18.576 16.729 25 25 0 0 0 16.054 31.5 959 959 0 0 0 49.23 14.537 25 25 0 0 0 30.597-17.717 25 25 0 0 0-17.717-30.596 909 909 0 0 1-46.664-13.777 25 25 0 0 0-6.418-1.19m-453.182 1.072a25 25 0 0 0-6.422 1.164 923 923 0 0 1-46.732 13.613 25 25 0 0 0-17.81 30.541 25 25 0 0 0 30.54 17.81 973 973 0 0 0 49.266-14.35 25 25 0 0 0 16.176-31.438 25 25 0 0 0-18.514-16.803 25 25 0 0 0-6.504-.537"/>
+</svg>
--- a/styleguide/assets/icon/paperplane.svg
+++ b/styleguide/assets/icon/paperplane.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="500">
+    <path d="M535.018.094a62.1 62.1 0 0 0-21.815 4.885L40.133 205.717c-48.038 20.384-52.852 90-8.076 116.8l39.984 23.934a25 25 0 0 0 34.291-8.611 25 25 0 0 0-8.611-34.291l-39.985-23.934c-12.309-7.367-11.28-22.267 1.926-27.87L532.734 51.007c5.133-2.178 10.814-.833 14.424 3.416s4.022 10.072 1.043 14.785L346.838 387.883c-16.664 26.371-50.638 34.466-77.404 18.445l-4.643-2.78a25 25 0 0 0-34.291 8.612 25 25 0 0 0 8.611 34.291l4.645 2.78c49.586 29.68 114.48 14.215 145.35-34.64L590.468 95.919c14.549-23.025 12.428-53.113-5.207-73.87C574.24 9.077 558.64 1.497 542.372.233a63 63 0 0 0-7.354-.138M396.455 142.82a25 25 0 0 0-11.898 5.088l-211.47 166.139c-30.343 23.84-48.087 60.34-48.087 98.93V475a25 25 0 0 0 25 25 25 25 0 0 0 25.002-25v-62.023a75.75 75.75 0 0 1 28.975-59.612l211.468-166.138a25 25 0 0 0 4.215-35.104 25 25 0 0 0-23.205-9.303"/>
+</svg>
--- a/styleguide/assets/image/doodle_example_1.svg
+++ b/styleguide/assets/image/doodle_example_1.svg
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="3000"
+   height="1200"
+   viewBox="0 0 3000 1200"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs" /><g
+     id="layer"><path
+       style="fill:none;stroke:#000000;stroke-width:50;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50, 150;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
+       d="m 25.000002,1175.0001 c 650.000048,0 1550.000098,-1150.000113 875.000068,-1150.000113 -725.00006,0 -103.84433,976.922213 250.00003,800.000063 200,-100.00001 323.8192,-463.50213 550,-400.00003 361.6858,101.54621 325.0001,675.00008 650.0001,325.00002"
+       id="path123-1" /><path
+       d="m 2787.4987,171.54852 a 62.1,62.1 0 0 0 -21.815,4.885 l -473.07,200.738 c -48.038,20.384 -52.852,90 -8.076,116.8 l 39.984,23.934 a 25,25 0 0 0 34.291,-8.611 25,25 0 0 0 -8.611,-34.291 l -39.985,-23.934 c -12.309,-7.367 -11.28,-22.267 1.926,-27.87 l 473.072,-200.738 c 5.133,-2.178 10.814,-0.833 14.424,3.416 3.61,4.249 4.022,10.072 1.043,14.785 l -201.363,318.675 c -16.664,26.371 -50.638,34.466 -77.404,18.445 l -4.643,-2.78 a 25,25 0 0 0 -34.291,8.612 25,25 0 0 0 8.611,34.291 l 4.645,2.78 c 49.586,29.68 114.48,14.215 145.35,-34.64 l 201.362,-318.672 c 14.549,-23.025 12.428,-53.113 -5.207,-73.87 -11.021,-12.972 -26.621,-20.552 -42.889,-21.816 a 63,63 0 0 0 -7.354,-0.138 m -138.563,142.725 a 25,25 0 0 0 -11.898,5.088 l -211.47,166.139 c -30.343,23.84 -48.087,60.34 -48.087,98.93 v 62.023 a 25,25 0 0 0 25,25 25,25 0 0 0 25.002,-25 v -62.023 a 75.75,75.75 0 0 1 28.975,-59.612 l 211.468,-166.138 a 25,25 0 0 0 4.215,-35.104 25,25 0 0 0 -23.205,-9.303"
+       id="path1" /></g></svg>
--- a/styleguide/assets/image/doodle_example_2.svg
+++ b/styleguide/assets/image/doodle_example_2.svg
--- a/styleguide/assets/image/doodle_example_3.svg
+++ b/styleguide/assets/image/doodle_example_3.svg
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="800"
+   height="4500"
+   viewBox="0 0 800 4500"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs" /><g
+     id="layer"><path
+       style="fill:none;stroke:#000000;stroke-width:50;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50, 150;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
+       d="M 700.00005,4400.0003 C -350.00002,3325.0004 900.00007,2600.0002 575,1900.0002 249.99993,1200.0002 225.00004,1425.0001 375.00003,925.00006"
+       id="path123-1" /><path
+       d="m 564.77596,150.58167 c -16.08962,-3.9189 -33.41023,-2.77531 -49.36167,4.05482 l -22.97968,9.84143 a 189.67,189.67 0 0 0 -94.66759,88.90232 l -4.68819,9.29661 a 221.3,221.3 0 0 0 -23.25236,85.26529 l -6.81434,104.40293 a 25,25 0 0 0 23.31863,26.57414 25,25 0 0 0 26.57317,-23.31886 l 6.81337,-104.40317 a 171.3,171.3 0 0 1 17.99889,-65.99515 l 4.69447,-9.30126 a 139.63,139.63 0 0 1 69.70729,-65.46541 l 22.97969,-9.84144 c 11.67806,-5.00044 24.96365,-1.76451 33.03424,8.04604 l 28.5894,34.75484 a 83.1,83.1 0 0 1 18.91145,54.49322 l -0.7116,35.23957 a 173.1,173.1 0 0 1 -14.92108,66.87243 l -24.29891,54.59032 0.61606,-1.27852 a 111.98,111.98 0 0 0 -7.66741,83.51472 25,25 0 0 0 0.44572,1.34776 321.4,321.4 0 0 1 19.37694,107.98068 l 0.0167,3.07943 a 83.47,83.47 0 0 1 -19.64816,54.31715 l -7.93148,9.41136 c -3.59718,4.26796 -7.18042,3.3952 -8.41207,-2.0489 l -2.71527,-12.00455 -0.006,-0.0169 a 540,540 0 0 1 -11.52439,-74.46952 l -0.004,-0.0247 c -2.86871,-34.42258 -27.60449,-63.35508 -61.16728,-71.52986 l -19.22885,-4.68351 c -33.22676,-8.39656 -68.33959,5.51212 -86.81272,34.37945 l -0.11219,0.17749 a 547,547 0 0 1 -44.99501,61.64398 l -7.92879,9.41304 c -3.59719,4.26796 -7.18043,3.39521 -8.41208,-2.0489 l -2.71503,-12.00552 a 83.47,83.47 0 0 1 7.53043,-57.26863 l 29.35001,-55.83535 a 25,25 0 0 0 -10.50686,-33.76141 25,25 0 0 0 -33.76075,10.4957 l -29.34272,55.83918 a 133.52,133.52 0 0 0 -12.03814,91.56713 l 2.71619,11.99654 c 9.6453,42.63147 67.24245,56.66022 95.41163,23.2391 l 7.92764,-9.40406 a 597,597 0 0 0 49.10413,-67.28273 l -0.11311,0.1855 c 6.97581,-10.90082 19.90078,-16.01748 32.4477,-12.8462 l 19.64468,4.7848 c 12.84644,3.12896 22.07873,13.92956 23.17343,27.10691 l 0.006,0.0169 a 590,590 0 0 0 12.58849,81.38269 l 2.71294,11.98031 c 9.64554,42.63051 67.24268,56.65926 95.41261,23.23934 l 7.9269,-9.40526 a 133.52,133.52 0 0 0 31.41929,-86.84549 l -0.0172,-3.08161 c -0.25602,-42.13955 -7.71037,-83.91626 -21.98437,-123.55922 a 61.92,61.92 0 0 1 4.27762,-46.08576 25,25 0 0 0 0.61532,-1.27973 l 24.29868,-54.58935 a 223.1,223.1 0 0 0 19.23217,-86.1992 l 0.70874,-35.23203 A 133.16,133.16 0 0 0 635.3325,211.62774 l -28.5913,-34.74706 c -11.02296,-13.4002 -25.87867,-22.38087 -41.96829,-26.29976 m -29.82935,122.41817 a 25,25 0 0 0 -30.2061,18.37368 25,25 0 0 0 18.37368,30.20609 c 13.70338,3.33769 21.71113,16.50369 18.37368,30.20609 -3.33745,13.70241 -16.50271,21.71137 -30.2061,18.37368 -13.70338,-3.33769 -21.71112,-16.50368 -18.37367,-30.20609 a 25,25 0 0 0 -18.37368,-30.20609 25,25 0 0 0 -30.20609,18.37367 c -9.73216,39.95686 15.16417,80.88612 55.12103,90.61828 39.95686,9.73216 80.88611,-15.16417 90.61828,-55.12103 9.73216,-39.95686 -15.1632,-80.88588 -55.12103,-90.61828 M 449.60415,623.3729 a 25,25 0 0 0 -30.2061,18.37368 l -15.13768,62.15004 a 25,25 0 0 0 18.37368,30.20609 25,25 0 0 0 30.20609,-18.37367 l 15.13768,-62.15005 A 25,25 0 0 0 449.60415,623.3729"
+       style="stroke-width:3.77952"
+       id="path1" /></g></svg>
--- a/styleguide/assets/style/base.css
+++ b/styleguide/assets/style/base.css
@ -54,6 +54,17 @@
  --color-red-800: #780404;
  --color-red-900: #5c0202;
  --color-red-950: #3f0101;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c2;
+  --color-yellow-200: #fff085;
+  --color-yellow-300: #ffdf20;
+  --color-yellow-400: #fdc700;
+  --color-yellow-500: #efb100;
+  --color-yellow-600: #d08700;
+  --color-yellow-700: #a65f00;
+  --color-yellow-800: #894b00;
+  --color-yellow-900: #733e0a;
+  --color-yellow-950: #432004;
  --color-white: #ffffff;
  --color-dark-foreground: var(--color-neutral-50);
  --color-dark-background: var(--color-neutral-950);
@ -69,6 +80,7 @@
  --color-dark-secondary: var(--color-krypton-300);
  --color-dark-error: var(--color-red-500);
  --color-dark-success: var(--color-green-500);
+  --color-dark-warning: var(--color-yellow-500);
  --color-dark-accent-1: #60a5f9;
  --color-dark-accent-2: #d381f7;
  --color-dark-accent-3: #ff7975;
@ -86,6 +98,7 @@
  --color-light-secondary: var(--color-krypton-500);
  --color-light-error: var(--color-red-600);
  --color-light-success: var(--color-green-600);
+  --color-light-warning: var(--color-yellow-600);
  --color-light-accent-1: #303ec0;
  --color-light-accent-2: #6c366c;
  --color-light-accent-3: #932f0a;
@ -137,6 +150,7 @@
  --color-secondary: var(--color-dark-secondary);
  --color-error: var(--color-dark-error);
  --color-success: var(--color-dark-success);
+  --color-warning: var(--color-dark-warning);
  --color-accent-1: var(--color-dark-accent-1);
  --color-accent-2: var(--color-dark-accent-2);
  --color-accent-3: var(--color-dark-accent-3);
@ -185,6 +199,7 @@
  --color-secondary: var(--color-light-secondary);
  --color-error: var(--color-light-error);
  --color-success: var(--color-light-success);
+  --color-warning: var(--color-light-warning);
  --color-accent-1: var(--color-light-accent-1);
  --color-accent-2: var(--color-light-accent-2);
  --color-accent-3: var(--color-light-accent-3);
@ -226,6 +241,7 @@
    --color-secondary: var(--color-dark-secondary);
    --color-error: var(--color-dark-error);
    --color-success: var(--color-dark-success);
+    --color-warning: var(--color-dark-warning);
    --color-accent-1: var(--color-dark-accent-1);
    --color-accent-2: var(--color-dark-accent-2);
    --color-accent-3: var(--color-dark-accent-3);
@ -275,6 +291,7 @@
    --color-secondary: var(--color-light-secondary);
    --color-error: var(--color-light-error);
    --color-success: var(--color-light-success);
+    --color-warning: var(--color-light-warning);
    --color-accent-1: var(--color-light-accent-1);
    --color-accent-2: var(--color-light-accent-2);
    --color-accent-3: var(--color-light-accent-3);
@ -321,6 +338,7 @@
    --color-secondary: var(--color-light-secondary);
    --color-error: var(--color-light-error);
    --color-success: var(--color-light-success);
+    --color-warning: var(--color-light-warning);
    --color-accent-1: var(--color-light-accent-1);
    --color-accent-2: var(--color-light-accent-2);
    --color-accent-3: var(--color-light-accent-3);
@ -362,6 +380,7 @@
    --color-secondary: var(--color-dark-secondary);
    --color-error: var(--color-dark-error);
    --color-success: var(--color-dark-success);
+    --color-warning: var(--color-dark-warning);
    --color-accent-1: var(--color-dark-accent-1);
    --color-accent-2: var(--color-dark-accent-2);
    --color-accent-3: var(--color-dark-accent-3);
@ -564,7 +583,7 @@ code,
 .code {
  font-family: "Departure Mono", ui-monospace, monospace;
  font-size: 0.8em;
-  border: solid 0.15em var(--color-shade-2);
+  border: solid 0.15em var(--color-shade-3);
  border-radius: 0.2em;
  padding: 0 0.2em;
 }
--- a/styleguide/assets/style/base.css.map
+++ b/styleguide/assets/style/base.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAiGF;EA7FE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;AAAA;AAAA;EAGA;AAAA;AAAA;EAGA;EACA;EACA;AAAA;AAAA;EAQA;AAAA;AAAA;EAGA;AAAA;AAAA;;AAPA;EA+DF;IA9DI;;;AAUF;EACE;;AAGF;EACE;;;AAmDJ;EA9CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAQA;EACA;;AALA;EAoBF;IAnBI;;;AAMF;EACE;;AAGF;EACE;;;AAYJ;EACE;IAtGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAQA;AAAA;AAAA;IAGA;AAAA;AAAA;;;AAPA;EAwEA;IAvEE;;;AAsEJ;EA5DE;IACE;;EAGF;IACE;;EA2DA;IAtDF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAQA;IACA;;;AALA;EA4BE;IA3BA;;;AAuBJ;EAjBE;IACE;;EAGF;IACE;;EAoBF;IACE;;;AAIJ;EACE;IAhEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAQA;IACA;;;AALA;EAsCA;IArCE;;;AAoCJ;EA9BE;IACE;;EAGF;IACE;;EA6BA;IAtHF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAQA;AAAA;AAAA;IAGA;AAAA;AAAA;;;AAPA;EAwFE;IAvFA;;;AAmFJ;EAzEE;IACE;;EAGF;IACE;;EA4EF;IACE;;;AAMJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAMA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KAtfuB;EAufvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA","file":"base.css"}
+{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmGF;EA/FE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;AAAA;AAAA;EAGA;AAAA;AAAA;EAGA;EACA;EACA;AAAA;AAAA;EAQA;AAAA;AAAA;EAGA;AAAA;AAAA;;AAPA;EAgEF;IA/DI;;;AAUF;EACE;;AAGF;EACE;;;AAoDJ;EA/CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAQA;EACA;;AALA;EAoBF;IAnBI;;;AAMF;EACE;;AAGF;EACE;;;AAYJ;EACE;IAxGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAQA;AAAA;AAAA;IAGA;AAAA;AAAA;;;AAPA;EAyEA;IAxEE;;;AAuEJ;EA7DE;IACE;;EAGF;IACE;;EA4DA;IAvDF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAQA;IACA;;;AALA;EA4BE;IA3BA;;;AAuBJ;EAjBE;IACE;;EAGF;IACE;;EAoBF;IACE;;;AAIJ;EACE;IAjEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAQA;IACA;;;AALA;EAsCA;IArCE;;;AAoCJ;EA9BE;IACE;;EAGF;IACE;;EA6BA;IAxHF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAQA;AAAA;AAAA;IAGA;AAAA;AAAA;;;AAPA;EAyFE;IAxFA;;;AAoFJ;EA1EE;IACE;;EAGF;IACE;;EA6EF;IACE;;;AAMJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAMA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KArgBuB;EAsgBvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA","file":"base.css"}
--- a/styleguide/assets/style/base.scss
+++ b/styleguide/assets/style/base.scss
@ -63,6 +63,17 @@ $mobile-navigation-height: 4rem;
  --color-red-800: #780404;
  --color-red-900: #5c0202;
  --color-red-950: #3f0101;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c2;
+  --color-yellow-200: #fff085;
+  --color-yellow-300: #ffdf20;
+  --color-yellow-400: #fdc700;
+  --color-yellow-500: #efb100;
+  --color-yellow-600: #d08700;
+  --color-yellow-700: #a65f00;
+  --color-yellow-800: #894b00;
+  --color-yellow-900: #733e0a;
+  --color-yellow-950: #432004;

  --color-white: #ffffff;

@ -80,6 +91,7 @@ $mobile-navigation-height: 4rem;
  --color-dark-secondary: var(--color-krypton-300);
  --color-dark-error: var(--color-red-500);
  --color-dark-success: var(--color-green-500);
+  --color-dark-warning: var(--color-yellow-500);
  --color-dark-accent-1: #60a5f9;
  --color-dark-accent-2: #d381f7;
  --color-dark-accent-3: #ff7975;
@ -98,6 +110,7 @@ $mobile-navigation-height: 4rem;
  --color-light-secondary: var(--color-krypton-500);
  --color-light-error: var(--color-red-600);
  --color-light-success: var(--color-green-600);
+  --color-light-warning: var(--color-yellow-600);
  --color-light-accent-1: #303ec0;
  --color-light-accent-2: #6c366c;
  --color-light-accent-3: #932f0a;
@ -153,6 +166,7 @@ $mobile-navigation-height: 4rem;
  --color-secondary: var(--color-dark-secondary);
  --color-error: var(--color-dark-error);
  --color-success: var(--color-dark-success);
+  --color-warning: var(--color-dark-warning);
  --color-accent-1: var(--color-dark-accent-1);
  --color-accent-2: var(--color-dark-accent-2);
  --color-accent-3: var(--color-dark-accent-3);
@ -204,6 +218,7 @@ $mobile-navigation-height: 4rem;
  --color-secondary: var(--color-light-secondary);
  --color-error: var(--color-light-error);
  --color-success: var(--color-light-success);
+  --color-warning: var(--color-light-warning);
  --color-accent-1: var(--color-light-accent-1);
  --color-accent-2: var(--color-light-accent-2);
  --color-accent-3: var(--color-light-accent-3);
@ -450,7 +465,7 @@ code,
 .code {
  font-family: "Departure Mono", ui-monospace, monospace;
  font-size: 0.8em;
-  border: solid 0.15em var(--color-shade-2);
+  border: solid 0.15em var(--color-shade-3);
  border-radius: 0.2em;
  padding: 0 0.2em;
 }
--- a/styleguide/assets/style/icons.css
+++ b/styleguide/assets/style/icons.css
@ -121,6 +121,9 @@ i[data-icon=login]::before {
 i[data-icon=logout]::before {
  mask-image: url("../icon/logout.svg");
 }
+i[data-icon=looping]::before {
+  mask-image: url("../icon/looping.svg");
+}
 i[data-icon=menu]::before {
  mask-image: url("../icon/menu.svg");
 }
@ -139,6 +142,9 @@ i[data-icon=microphone]::before {
 i[data-icon=network]::before {
  mask-image: url("../icon/network.svg");
 }
+i[data-icon=paperplane]::before {
+  mask-image: url("../icon/paperplane.svg");
+}
 i[data-icon=pen]::before {
  mask-image: url("../icon/pen.svg");
 }
--- a/styleguide/assets/style/icons.css.map
+++ b/styleguide/assets/style/icons.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["icons.scss"],"names":[],"mappings":"AA6DE;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE","file":"icons.css"}
+{"version":3,"sourceRoot":"","sources":["icons.scss"],"names":[],"mappings":"AA+DE;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE","file":"icons.css"}
--- a/styleguide/assets/style/icons.scss
+++ b/styleguide/assets/style/icons.scss
@ -34,12 +34,14 @@ $icons: (
  "lock",
  "login",
  "logout",
+  "looping",
  "menu",
  "menu_small",
  "merch",
  "message",
  "microphone",
  "network",
+  "paperplane",
  "pen",
  "plate_and_cutlery",
  "power",
--- a/styleguide/assets/style/merch.css
+++ b/styleguide/assets/style/merch.css
@ -54,6 +54,17 @@
  --color-red-800: #780404;
  --color-red-900: #5c0202;
  --color-red-950: #3f0101;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c2;
+  --color-yellow-200: #fff085;
+  --color-yellow-300: #ffdf20;
+  --color-yellow-400: #fdc700;
+  --color-yellow-500: #efb100;
+  --color-yellow-600: #d08700;
+  --color-yellow-700: #a65f00;
+  --color-yellow-800: #894b00;
+  --color-yellow-900: #733e0a;
+  --color-yellow-950: #432004;
  --color-white: #ffffff;
  --color-dark-foreground: var(--color-neutral-50);
  --color-dark-background: var(--color-neutral-950);
@ -69,6 +80,7 @@
  --color-dark-secondary: var(--color-krypton-300);
  --color-dark-error: var(--color-red-500);
  --color-dark-success: var(--color-green-500);
+  --color-dark-warning: var(--color-yellow-500);
  --color-dark-accent-1: #60a5f9;
  --color-dark-accent-2: #d381f7;
  --color-dark-accent-3: #ff7975;
@ -86,6 +98,7 @@
  --color-light-secondary: var(--color-krypton-500);
  --color-light-error: var(--color-red-600);
  --color-light-success: var(--color-green-600);
+  --color-light-warning: var(--color-yellow-600);
  --color-light-accent-1: #303ec0;
  --color-light-accent-2: #6c366c;
  --color-light-accent-3: #932f0a;
@ -137,6 +150,7 @@
  --color-secondary: var(--color-dark-secondary);
  --color-error: var(--color-dark-error);
  --color-success: var(--color-dark-success);
+  --color-warning: var(--color-dark-warning);
  --color-accent-1: var(--color-dark-accent-1);
  --color-accent-2: var(--color-dark-accent-2);
  --color-accent-3: var(--color-dark-accent-3);
@ -185,6 +199,7 @@
  --color-secondary: var(--color-light-secondary);
  --color-error: var(--color-light-error);
  --color-success: var(--color-light-success);
+  --color-warning: var(--color-light-warning);
  --color-accent-1: var(--color-light-accent-1);
  --color-accent-2: var(--color-light-accent-2);
  --color-accent-3: var(--color-light-accent-3);
@ -226,6 +241,7 @@
    --color-secondary: var(--color-dark-secondary);
    --color-error: var(--color-dark-error);
    --color-success: var(--color-dark-success);
+    --color-warning: var(--color-dark-warning);
    --color-accent-1: var(--color-dark-accent-1);
    --color-accent-2: var(--color-dark-accent-2);
    --color-accent-3: var(--color-dark-accent-3);
@ -275,6 +291,7 @@
    --color-secondary: var(--color-light-secondary);
    --color-error: var(--color-light-error);
    --color-success: var(--color-light-success);
+    --color-warning: var(--color-light-warning);
    --color-accent-1: var(--color-light-accent-1);
    --color-accent-2: var(--color-light-accent-2);
    --color-accent-3: var(--color-light-accent-3);
@ -321,6 +338,7 @@
    --color-secondary: var(--color-light-secondary);
    --color-error: var(--color-light-error);
    --color-success: var(--color-light-success);
+    --color-warning: var(--color-light-warning);
    --color-accent-1: var(--color-light-accent-1);
    --color-accent-2: var(--color-light-accent-2);
    --color-accent-3: var(--color-light-accent-3);
@ -362,6 +380,7 @@
    --color-secondary: var(--color-dark-secondary);
    --color-error: var(--color-dark-error);
    --color-success: var(--color-dark-success);
+    --color-warning: var(--color-dark-warning);
    --color-accent-1: var(--color-dark-accent-1);
    --color-accent-2: var(--color-dark-accent-2);
    --color-accent-3: var(--color-dark-accent-3);
@ -564,7 +583,7 @@ code,
 .code {
  font-family: "Departure Mono", ui-monospace, monospace;
  font-size: 0.8em;
-  border: solid 0.15em var(--color-shade-2);
+  border: solid 0.15em var(--color-shade-3);
  border-radius: 0.2em;
  padding: 0 0.2em;
 }
@ -804,6 +823,9 @@ i[data-icon=login]::before {
 i[data-icon=logout]::before {
  mask-image: url("../icon/logout.svg");
 }
+i[data-icon=looping]::before {
+  mask-image: url("../icon/looping.svg");
+}
 i[data-icon=menu]::before {
  mask-image: url("../icon/menu.svg");
 }
@ -822,6 +844,9 @@ i[data-icon=microphone]::before {
 i[data-icon=network]::before {
  mask-image: url("../icon/network.svg");
 }
+i[data-icon=paperplane]::before {
+  mask-image: url("../icon/paperplane.svg");
+}
 i[data-icon=pen]::before {
  mask-image: url("../icon/pen.svg");
 }
@ -1083,6 +1108,7 @@ body > div main {
  max-width: min(var(--container-4xl), 100vw);
  width: 100%;
  padding: 0 1rem;
+  overflow-x: hidden;
 }
@media (min-width: 48rem) {
  body > div main {
@ -1238,13 +1264,14 @@ main > div.generator i {
 .swatch-grid {
  background-color: var(--color-background);
  color: var(--color-foreground);
-  padding: 1rem;
+  padding: 0.5rem;
 }
 .swatch-grid section {
  display: flex;
  flex-wrap: wrap;
-  gap: 1rem;
+  gap: 0.5rem;
  margin-top: 2rem;
+  --swatch-size: 5rem;
 }
 .swatch-grid section > span {
  width: 100%;
@ -1256,14 +1283,14 @@ main > div.generator i {
  align-items: end;
  gap: 0.25rem;
  background-color: var(--color-background);
-  border-radius: 1rem;
-  padding: 0.5rem;
+  border-radius: 0.75rem;
+  padding: 0.25rem;
  border: 0.125rem solid var(--color-foreground);
 }
 .swatch-grid section .swatch-container .swatch {
  background-color: var(--swatch-color);
-  width: 8rem;
-  height: 8rem;
+  width: var(--swatch-size);
+  aspect-ratio: 1;
  border-radius: 0.5rem;
 }
 .swatch-grid section .swatch-container span {
--- a/styleguide/assets/style/merch.css.map
+++ b/styleguide/assets/style/merch.css.map
--- a/styleguide/assets/style/styleguide.css
+++ b/styleguide/assets/style/styleguide.css
@ -54,6 +54,17 @@
  --color-red-800: #780404;
  --color-red-900: #5c0202;
  --color-red-950: #3f0101;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c2;
+  --color-yellow-200: #fff085;
+  --color-yellow-300: #ffdf20;
+  --color-yellow-400: #fdc700;
+  --color-yellow-500: #efb100;
+  --color-yellow-600: #d08700;
+  --color-yellow-700: #a65f00;
+  --color-yellow-800: #894b00;
+  --color-yellow-900: #733e0a;
+  --color-yellow-950: #432004;
  --color-white: #ffffff;
  --color-dark-foreground: var(--color-neutral-50);
  --color-dark-background: var(--color-neutral-950);
@ -69,6 +80,7 @@
  --color-dark-secondary: var(--color-krypton-300);
  --color-dark-error: var(--color-red-500);
  --color-dark-success: var(--color-green-500);
+  --color-dark-warning: var(--color-yellow-500);
  --color-dark-accent-1: #60a5f9;
  --color-dark-accent-2: #d381f7;
  --color-dark-accent-3: #ff7975;
@ -86,6 +98,7 @@
  --color-light-secondary: var(--color-krypton-500);
  --color-light-error: var(--color-red-600);
  --color-light-success: var(--color-green-600);
+  --color-light-warning: var(--color-yellow-600);
  --color-light-accent-1: #303ec0;
  --color-light-accent-2: #6c366c;
  --color-light-accent-3: #932f0a;
@ -137,6 +150,7 @@
  --color-secondary: var(--color-dark-secondary);
  --color-error: var(--color-dark-error);
  --color-success: var(--color-dark-success);
+  --color-warning: var(--color-dark-warning);
  --color-accent-1: var(--color-dark-accent-1);
  --color-accent-2: var(--color-dark-accent-2);
  --color-accent-3: var(--color-dark-accent-3);
@ -185,6 +199,7 @@
  --color-secondary: var(--color-light-secondary);
  --color-error: var(--color-light-error);
  --color-success: var(--color-light-success);
+  --color-warning: var(--color-light-warning);
  --color-accent-1: var(--color-light-accent-1);
  --color-accent-2: var(--color-light-accent-2);
  --color-accent-3: var(--color-light-accent-3);
@ -226,6 +241,7 @@
    --color-secondary: var(--color-dark-secondary);
    --color-error: var(--color-dark-error);
    --color-success: var(--color-dark-success);
+    --color-warning: var(--color-dark-warning);
    --color-accent-1: var(--color-dark-accent-1);
    --color-accent-2: var(--color-dark-accent-2);
    --color-accent-3: var(--color-dark-accent-3);
@ -275,6 +291,7 @@
    --color-secondary: var(--color-light-secondary);
    --color-error: var(--color-light-error);
    --color-success: var(--color-light-success);
+    --color-warning: var(--color-light-warning);
    --color-accent-1: var(--color-light-accent-1);
    --color-accent-2: var(--color-light-accent-2);
    --color-accent-3: var(--color-light-accent-3);
@ -321,6 +338,7 @@
    --color-secondary: var(--color-light-secondary);
    --color-error: var(--color-light-error);
    --color-success: var(--color-light-success);
+    --color-warning: var(--color-light-warning);
    --color-accent-1: var(--color-light-accent-1);
    --color-accent-2: var(--color-light-accent-2);
    --color-accent-3: var(--color-light-accent-3);
@ -362,6 +380,7 @@
    --color-secondary: var(--color-dark-secondary);
    --color-error: var(--color-dark-error);
    --color-success: var(--color-dark-success);
+    --color-warning: var(--color-dark-warning);
    --color-accent-1: var(--color-dark-accent-1);
    --color-accent-2: var(--color-dark-accent-2);
    --color-accent-3: var(--color-dark-accent-3);
@ -564,7 +583,7 @@ code,
 .code {
  font-family: "Departure Mono", ui-monospace, monospace;
  font-size: 0.8em;
-  border: solid 0.15em var(--color-shade-2);
+  border: solid 0.15em var(--color-shade-3);
  border-radius: 0.2em;
  padding: 0 0.2em;
 }
@ -804,6 +823,9 @@ i[data-icon=login]::before {
 i[data-icon=logout]::before {
  mask-image: url("../icon/logout.svg");
 }
+i[data-icon=looping]::before {
+  mask-image: url("../icon/looping.svg");
+}
 i[data-icon=menu]::before {
  mask-image: url("../icon/menu.svg");
 }
@ -822,6 +844,9 @@ i[data-icon=microphone]::before {
 i[data-icon=network]::before {
  mask-image: url("../icon/network.svg");
 }
+i[data-icon=paperplane]::before {
+  mask-image: url("../icon/paperplane.svg");
+}
 i[data-icon=pen]::before {
  mask-image: url("../icon/pen.svg");
 }
@ -1083,6 +1108,7 @@ body > div main {
  max-width: min(var(--container-4xl), 100vw);
  width: 100%;
  padding: 0 1rem;
+  overflow-x: hidden;
 }
@media (min-width: 48rem) {
  body > div main {
@ -1238,13 +1264,14 @@ main > div.generator i {
 .swatch-grid {
  background-color: var(--color-background);
  color: var(--color-foreground);
-  padding: 1rem;
+  padding: 0.5rem;
 }
 .swatch-grid section {
  display: flex;
  flex-wrap: wrap;
-  gap: 1rem;
+  gap: 0.5rem;
  margin-top: 2rem;
+  --swatch-size: 5rem;
 }
 .swatch-grid section > span {
  width: 100%;
@ -1256,14 +1283,14 @@ main > div.generator i {
  align-items: end;
  gap: 0.25rem;
  background-color: var(--color-background);
-  border-radius: 1rem;
-  padding: 0.5rem;
+  border-radius: 0.75rem;
+  padding: 0.25rem;
  border: 0.125rem solid var(--color-foreground);
 }
 .swatch-grid section .swatch-container .swatch {
  background-color: var(--swatch-color);
-  width: 8rem;
-  height: 8rem;
+  width: var(--swatch-size);
+  aspect-ratio: 1;
  border-radius: 0.5rem;
 }
 .swatch-grid section .swatch-container span {
--- a/styleguide/assets/style/styleguide.css.map
+++ b/styleguide/assets/style/styleguide.css.map
--- a/styleguide/assets/style/styleguide.scss
+++ b/styleguide/assets/style/styleguide.scss
@ -241,6 +241,7 @@ body {
      max-width: min(var(--container-4xl), 100vw);
      width: 100%;
      padding: 0 1rem;
+      overflow-x: hidden;

      @media (min-width: $breakpoint-mobile) {
        padding-left: 2rem;
@ -427,13 +428,14 @@ main > div.generator {
 .swatch-grid {
  background-color: var(--color-background);
  color: var(--color-foreground);
-  padding: 1rem;
+  padding: 0.5rem;

  section {
    display: flex;
    flex-wrap: wrap;
-    gap: 1rem;
+    gap: 0.5rem;
    margin-top: 2rem;
+    --swatch-size: 5rem;

    & > span {
      width: 100%;
@ -446,14 +448,14 @@ main > div.generator {
      align-items: end;
      gap: 0.25rem;
      background-color: var(--color-background);
-      border-radius: 1rem;
-      padding: 0.5rem;
+      border-radius: 0.75rem;
+      padding: 0.25rem;
      border: 0.125rem solid var(--color-foreground);

      .swatch {
        background-color: var(--swatch-color);
-        width: 8rem;
-        height: 8rem;
+        width: var(--swatch-size);
+        aspect-ratio: 1;
        border-radius: 0.5rem;
      }

--- a/styleguide/changelog/index.html
+++ b/styleguide/changelog/index.html
@ -0,0 +1,142 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <script>
+      const setTheme = (theme) => {
+        theme ??= localStorage.theme || "system";
+        document.getElementById("themeLight").checked = theme === "light";
+        document.getElementById("themeDark").checked = theme === "dark";
+        localStorage.theme = theme;
+      };
+      document.addEventListener("DOMContentLoaded", function () {
+        setTheme();
+      });
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link rel="shortcut icon" href="../assets/image/favicon.png" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../assets/style/styleguide.css"
+    />
+    <title>Changelog</title>
+  </head>
+
+  <body>
+    <header>
+      <a href="/" id="backToWiki">
+        <img
+          src="../assets/image/logo_eventname_glow.svg"
+          class="header-image dark-only"
+          alt="Logo of Easterhegg 2025. In the style of a neon sign:
+     The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
+     The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
+        />
+        <img
+          src="../assets/image/logo_eventname_glow_off.svg"
+          class="header-image light-only"
+          alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+     The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
+     The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
+        />
+      </a>
+    </header>
+    <div>
+      <nav>
+        <button aria-label="Open Navigation">
+          <i data-icon="menu_small"></i>
+        </button>
+        <ul>
+          <li class="link-back">
+            <a href="/"><i data-icon="arrow_left"></i>Back to Wiki</a>
+          </li>
+          <li>
+            <a href="../"><i data-icon="home"></i>Overview</a>
+          </li>
+          <li>
+            <a href="../colors"><i data-icon="pen"></i>Colors</a>
+          </li>
+          <li>
+            <a href="../typography"><i data-icon="font"></i>Typography</a>
+          </li>
+          <li>
+            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
+          </li>
+          <li>
+            <a href="../logo"><i data-icon="hare_head"></i>Logo</a>
+          </li>
+          <li>
+            <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
+          </li>
+          <li>
+            <a href="../doodles"><i data-icon="looping"></i>Doodles</a>
+          </li>
+          <li>
+            <a href="../demopage"><i data-icon="code"></i>Demopage</a>
+          </li>
+          <li>
+            <a href="../generator"
+              ><i data-icon="settings"></i>Image Generator</a
+            >
+          </li>
+          <li class="active">
+            <a href=""><i data-icon="history"></i>Changelog</a>
+          </li>
+          <li id="themeToggleDark" class="themeToggle">
+            <input
+              id="themeDark"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
+            <label for="themeDark">
+              <i data-icon="lightbulb"></i>
+            </label>
+          </li>
+          <li id="themeToggleLight" class="themeToggle">
+            <input
+              id="themeLight"
+              type="checkbox"
+              aria-label="Switch between dark and light mode"
+            />
+            <label for="themeLight">
+              <i data-icon="lightbulb"></i>
+            </label>
+          </li>
+        </ul>
+      </nav>
+      <main>
+        <h1>Changelog</h1>
+        <p>
+          Here you can see the list of changes we have made to the style guide
+          since the initial release:
+        </p>
+        <ul>
+          <li>
+            <b>2025-04-05 - Update 1</b>
+            <ul>
+              <li>
+                New pages: <a href="../doodles">Doodles</a>,
+                <a href="../changelog">Changelog</a>
+              </li>
+              <li>The page about glow is no longer WIP</li>
+              <li>New Color: <code>warning</code></li>
+              <li>New Icons: <code>paperplane</code> <code>looping</code></li>
+              <li>Updated icon: <code>fairydust</code></li>
+              <li>
+                Typography: update border color of <code>&lt;code&gt;</code>
+              </li>
+            </ul>
+          </li>
+          <li>
+            <p><b>2025-03-01 - Initial release</b></p>
+          </li>
+        </ul>
+      </main>
+    </div>
+    <script
+      src="../assets/script/styleguide.js"
+      type="text/javascript"
+    ></script>
+  </body>
+</html>
--- a/styleguide/colors/index.html
+++ b/styleguide/colors/index.html
@ -69,6 +69,9 @@
          <li>
            <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
          </li>
+          <li>
+            <a href="../doodles"><i data-icon="looping"></i>Doodles</a>
+          </li>
          <li>
            <a href="../demopage"><i data-icon="code"></i>Demopage</a>
          </li>
@ -77,6 +80,9 @@
              ><i data-icon="settings"></i>Image Generator</a
            >
          </li>
+          <li>
+            <a href="../changelog"><i data-icon="history"></i>Changelog</a>
+          </li>
          <li id="themeToggleDark" class="themeToggle">
            <input
              id="themeDark"
@ -323,7 +329,7 @@
            </section>

            <section aria-labelledby="label-dark-error-success">
-              <span id="label-dark-error-success">Error &amp; Success</span>
+              <span id="label-dark-error-success">Status indicators</span>

              <div
                aria-labelledby="label-dark-swatch-error"
@ -346,6 +352,17 @@
                ></div>
                <span id="label-dark-swatch-success">#54aa18</span>
              </div>
+
+              <div
+                aria-labelledby="label-dark-swatch-success"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-dark-warning)"
+                ></div>
+                <span id="label-dark-swatch-warning">#efb100</span>
+              </div>
            </section>

            <section aria-labelledby="label-dark-accents">
@ -542,7 +559,7 @@
            </section>

            <section aria-labelledby="label-light-error-success">
-              <span id="label-light-error-success">Error &amp; Success</span>
+              <span id="label-light-error-success">Status indicators</span>

              <div
                aria-labelledby="label-light-swatch-error"
@ -565,6 +582,17 @@
                ></div>
                <span id="label-light-swatch-success">#47990f</span>
              </div>
+
+              <div
+                aria-labelledby="label-dark-swatch-success"
+                class="swatch-container"
+              >
+                <div
+                  class="swatch"
+                  style="--swatch-color: var(--color-light-warning)"
+                ></div>
+                <span id="label-light-swatch-warning">#d08700</span>
+              </div>
            </section>

            <section aria-labelledby="label-light-accents">
@ -612,7 +640,10 @@
        </p>

        <div class="swatch-grid">
-          <section aria-labelledby="label-light-primary-secondary">
+          <section
+            aria-labelledby="label-light-primary-secondary"
+            style="--swatch-size: 7rem"
+          >
            <span id="label-cmyk-primary-secondary">CMYK Colors</span>

            <div
--- a/styleguide/demopage/index.html
+++ b/styleguide/demopage/index.html
@ -69,6 +69,9 @@
          <li>
            <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
          </li>
+          <li>
+            <a href="../doodles"><i data-icon="looping"></i>Doodles</a>
+          </li>
          <li class="active">
            <a href=""><i data-icon="code"></i>Demopage</a>
          </li>
@ -77,6 +80,9 @@
              ><i data-icon="settings"></i>Image Generator</a
            >
          </li>
+          <li>
+            <a href="../changelog"><i data-icon="history"></i>Changelog</a>
+          </li>
          <li id="themeToggleDark" class="themeToggle">
            <input
              id="themeDark"
--- a/styleguide/doodles/index.html
+++ b/styleguide/doodles/index.html
--- a/styleguide/generator/index.html
+++ b/styleguide/generator/index.html
@ -69,12 +69,18 @@
          <li>
            <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
          </li>
+          <li>
+            <a href="../doodles"><i data-icon="looping"></i>Doodles</a>
+          </li>
          <li>
            <a href="../demopage"><i data-icon="code"></i>Demopage</a>
          </li>
          <li class="active">
            <a href=""><i data-icon="settings"></i>Image Generator</a>
          </li>
+          <li>
+            <a href="../changelog"><i data-icon="history"></i>Changelog</a>
+          </li>
          <li id="themeToggleDark" class="themeToggle">
            <input
              id="themeDark"
--- a/styleguide/glow/index.html
+++ b/styleguide/glow/index.html
@ -69,6 +69,9 @@
          <li class="active">
            <a href=""><i data-icon="lightbulb"></i>Glow</a>
          </li>
+          <li>
+            <a href="../doodles"><i data-icon="looping"></i>Doodles</a>
+          </li>
          <li>
            <a href="../demopage"><i data-icon="code"></i>Demopage</a>
          </li>
@ -77,6 +80,9 @@
              ><i data-icon="settings"></i>Image Generator</a
            >
          </li>
+          <li>
+            <a href="../changelog"><i data-icon="history"></i>Changelog</a>
+          </li>
          <li id="themeToggleDark" class="themeToggle">
            <input
              id="themeDark"
@ -101,15 +107,6 @@
      </nav>
      <main>
        <h1>Glow</h1>
-        <div class="alert">
-          <i data-icon="warning"></i>
-          <p>
-            <strong>Work in progress</strong>
-            This page is still under development.<br />
-            Not all resources may be available yet, explanations and examples
-            may be missing and things may change without notice.
-          </p>
-        </div>
        <h2>Darkmode</h2>
        <p>
          To add the glow to something of a given height (or fontsize), here
@ -148,21 +145,39 @@
            For SVG filters instead use the following two filters:
            <pre><code>
 <span class="neutral">&lt;filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"400%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
-   <span class="identifier">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters:sRGB;"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral">&gt;</span>
-  <span class="neutral">&lt;feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span>
-     <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-white);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">/&gt;</span>
-  <span class="neutral">&lt;feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"32.5"</span>
-     <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="neutral">/&gt;</span>
-  <span class="neutral">&lt;feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"65"</span>
-     <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_2"</span> <span class="neutral">/&gt;</span>
+   <span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral"> &gt;</span>
+  <span class="neutral">&lt;feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#ffffff"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-white --&gt;</span>
+  <span class="neutral">&lt;feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">&gt;</span>
+    <span class="neutral">&lt;feMergeNode/&gt;</span>
+    <span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;/feMerge&gt;</span>
+
+  <span class="neutral">&lt;feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"32.5"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-primary --&gt;</span>
+  <span class="neutral">&lt;feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="neutral">&gt;</span>
+    <span class="neutral">&lt;feMergeNode/&gt;</span>
+    <span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;/feMerge&gt;</span>
+
+  <span class="neutral">&lt;feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"65"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-primary --&gt;</span>
+  <span class="neutral">&lt;feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_2"</span> <span class="neutral">&gt;</span>
+    <span class="neutral">&lt;feMergeNode/&gt;</span>
+    <span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;/feMerge&gt;</span>
 <span class="neutral">&lt;/filter&gt;</span>

 <span class="neutral">&lt;filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"400%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
-   <span class="identifier">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters:sRGB;"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textInsetPrimary"</span><span class="neutral">&gt;</span>
-  <span class="neutral">&lt;feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-white);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-white"</span>
-     <span class="neutral">/&gt;</span>
-  <span class="neutral">&lt;feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span>
-     <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-glow-color"</span> <span class="neutral">/&gt;</span>
+   <span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textInsetPrimary"</span><span class="neutral"> &gt;</span>
+  <span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#ffffff"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-white"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-white --&gt;</span>
+  <span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-glow-color"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-primary --&gt;</span>

  <span class="neutral">&lt;feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood-glow-color"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
     <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/&gt;</span>
@ -177,13 +192,6 @@
    <span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/&gt;</span>
  <span class="neutral">&lt;/feMerge&gt;</span>
 <span class="neutral">&lt;/filter&gt;</span></code></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>

@ -217,21 +225,28 @@
            For SVG filters instead use the following two filters:
            <pre><code>
 <span class="neutral">&lt;filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-25%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"150%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
-   <span class="identifier">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters:sRGB;"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral">&gt;</span>
-  <span class="neutral">&lt;feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span>
-     <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-argon-950);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">/&gt;</span>
+   <span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral"> &gt;</span>
+  <span class="neutral">&lt;feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#3f012d"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-argon-950 --&gt;</span>
+  <span class="neutral">&lt;feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">&gt;</span>
+    <span class="neutral">&lt;feMergeNode/&gt;</span>
+    <span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;/feMerge&gt;</span>
 <span class="neutral">&lt;/filter&gt;</span>

 <span class="neutral">&lt;filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-25%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"150%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
-   <span class="identifier">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters:sRGB;"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textInsetPrimary"</span><span class="neutral">&gt;</span>
-  <span class="neutral">&lt;feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_brighter"</span>
-     <span class="neutral">/&gt;</span>
-  <span class="neutral">&lt;feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-argon-800);"</span>
-     <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_darker"</span> <span class="neutral">/&gt;</span>
+   <span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textInsetPrimary"</span><span class="neutral"> &gt;</span>
+  <span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_brighter"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-primary --&gt;</span>
+  <span class="neutral">&lt;feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#3f012d"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_darker"</span> <span class="neutral">/&gt;</span> <span class="comment">&lt;!-- color-argon-950 --&gt;</span>

  <span class="neutral">&lt;feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood_darker"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
     <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/&gt;</span>
-  <span class="neutral">&lt;feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"8.125"</span>
+  <span class="neutral">&lt;feComponentTransfer</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"reduced_alpha"</span> <span class="neutral">&gt;</span>
+    <span class="neutral">&lt;feFuncA</span> <span class="identifier">type</span><span class="neutral">=</span><span class="string">"table"</span> <span class="identifier">tableValues</span><span class="neutral">=</span><span class="string">"0 0.5"</span> <span class="neutral">/&gt;</span>
+  <span class="neutral">&lt;/feComponentTransfer&gt;</span>
+  <span class="neutral">&lt;feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"reduced_alpha"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span>
     <span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="neutral">/&gt;</span>
  <span class="neutral">&lt;feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood_brighter"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
     <span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_brighter"</span> <span class="neutral">/&gt;</span>
@ -242,15 +257,35 @@
    <span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/&gt;</span>
  <span class="neutral">&lt;/feMerge&gt;</span>
 <span class="neutral">&lt;/filter&gt;</span></code></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>Notes</h2>
+        <p>
+          In the SVG files we use two separate filters, 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 put them in an
+          isolated group, so that the blend mode does not interfere with the
+          background:<br />
+          <code>&lt;g style="isolation: isolate;"&gt;</code><br />
+          Then layer all inset-shadow filters on top of that - otherwise, one
+          path's drop shadow might overlay another path's inset-shadow. Have a
+          look at the
+          <a
+            href="https://git.hamburg.ccc.de/EH22/design-public/src/branch/main/logo/logo_eventname_glow.svg?display=source"
+            >logo's source</a
+          >
+          for an example.
+        </p>
+        <p>
+          Since inkscape, for example, cannot handle the ‘feDropShadow’ filter
+          yet, we use it in its long form as a combination of 5 other filters,
+          as described in the
+          <a href="https://www.w3.org/TR/filter-effects-1/#feDropShadowElement"
+            >SVG Filter Effects Module Level 1 (Working Draft)</a
+          >.
+        </p>
      </main>
    </div>
    <script
--- a/styleguide/iconography/index.html
+++ b/styleguide/iconography/index.html
@ -69,6 +69,9 @@
          <li>
            <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
          </li>
+          <li>
+            <a href="../doodles"><i data-icon="looping"></i>Doodles</a>
+          </li>
          <li>
            <a href="../demopage"><i data-icon="code"></i>Demopage</a>
          </li>
@ -77,6 +80,9 @@
              ><i data-icon="settings"></i>Image Generator</a
            >
          </li>
+          <li>
+            <a href="../changelog"><i data-icon="history"></i>Changelog</a>
+          </li>
          <li id="themeToggleDark" class="themeToggle">
            <input
              id="themeDark"
--- a/styleguide/iconography/list/index.html
+++ b/styleguide/iconography/list/index.html
@ -69,6 +69,9 @@
          <li>
            <a href="../../glow"><i data-icon="lightbulb"></i>Glow</a>
          </li>
+          <li>
+            <a href="../../doodles"><i data-icon="looping"></i>Doodles</a>
+          </li>
          <li>
            <a href="../../demopage"><i data-icon="code"></i>Demopage</a>
          </li>
@ -77,6 +80,9 @@
              ><i data-icon="settings"></i>Image Generator</a
            >
          </li>
+          <li>
+            <a href="../../changelog"><i data-icon="history"></i>Changelog</a>
+          </li>
          <li id="themeToggleDark" class="themeToggle">
            <input
              id="themeDark"
--- a/styleguide/index.html
+++ b/styleguide/index.html
@ -65,12 +65,18 @@
          <li>
            <a href="glow"><i data-icon="lightbulb"></i>Glow</a>
          </li>
+          <li>
+            <a href="../doodles"><i data-icon="looping"></i>Doodles</a>
+          </li>
          <li>
            <a href="demopage"><i data-icon="code"></i>Demopage</a>
          </li>
          <li>
            <a href="generator"><i data-icon="settings"></i>Image Generator</a>
          </li>
+          <li>
+            <a href="../changelog"><i data-icon="history"></i>Changelog</a>
+          </li>
          <li id="themeToggleDark" class="themeToggle">
            <input
              id="themeDark"
--- a/styleguide/logo/index.html
+++ b/styleguide/logo/index.html
@ -69,6 +69,9 @@
          <li>
            <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
          </li>
+          <li>
+            <a href="../doodles"><i data-icon="looping"></i>Doodles</a>
+          </li>
          <li>
            <a href="../demopage"><i data-icon="code"></i>Demopage</a>
          </li>
@ -77,6 +80,9 @@
              ><i data-icon="settings"></i>Image Generator</a
            >
          </li>
+          <li>
+            <a href="../changelog"><i data-icon="history"></i>Changelog</a>
+          </li>
          <li id="themeToggleDark" class="themeToggle">
            <input
              id="themeDark"
--- a/styleguide/typography/index.html
+++ b/styleguide/typography/index.html
@ -69,6 +69,9 @@
          <li>
            <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
          </li>
+          <li>
+            <a href="../doodles"><i data-icon="looping"></i>Doodles</a>
+          </li>
          <li>
            <a href="../demopage"><i data-icon="code"></i>Demopage</a>
          </li>
@ -77,6 +80,9 @@
              ><i data-icon="settings"></i>Image Generator</a
            >
          </li>
+          <li>
+            <a href="../changelog"><i data-icon="history"></i>Changelog</a>
+          </li>
          <li id="themeToggleDark" class="themeToggle">
            <input
              id="themeDark"