diff --git a/pixels/Pixel-cityscapes.aseprite b/pixels/Pixel-cityscapes.aseprite
new file mode 100644
index 0000000000000000000000000000000000000000..642378065699777206655560c7bede4b7a5b8a03
Binary files /dev/null and b/pixels/Pixel-cityscapes.aseprite differ
diff --git a/pixels/Pixel-cityscapes.png b/pixels/Pixel-cityscapes.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ac58873fe61bb36fdc26e1f8a1fc021437809de
Binary files /dev/null and b/pixels/Pixel-cityscapes.png differ
diff --git a/pixels/bb3-palette.aseprite b/pixels/bb3-palette.aseprite
new file mode 100644
index 0000000000000000000000000000000000000000..40063be3d908944be108190e6c6ef3ab3b5e0939
Binary files /dev/null and b/pixels/bb3-palette.aseprite differ
diff --git a/styleguide-website/img/Pixel-cityscapes.png b/styleguide-website/img/Pixel-cityscapes.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ac58873fe61bb36fdc26e1f8a1fc021437809de
Binary files /dev/null and b/styleguide-website/img/Pixel-cityscapes.png differ
diff --git a/styleguide-website/index.html b/styleguide-website/index.html
index 0fd373969d79af187d091f506866f4d0a9f4c0ed..8ad7ac0ac88a4c2db9dda139a054c6a6aeb6cfdd 100644
--- a/styleguide-website/index.html
+++ b/styleguide-website/index.html
@@ -31,6 +31,8 @@
         <p>
             Wenn ihr mit euren eigenen Designs contributen möcht stellt euch die Fragen: Was macht die soziale Blase aus, in der ihr euch befindet und wir könnt ihr eure Gesellschaft umgeben von einer Blase repräsentieren?
         </p>
+        <p>
+          Diesen Styleguide und alle Grafik Assets, die bis zum Event erstellt werden, findet ihr im <a href="https://git.cccv.de/divoc/bridging-bubbles-design"> Bridging Bubbles Design Repository im CCCV-Git.</a>
         <hr/>
     </section>
     <section aria-labelledby="logo">
@@ -63,7 +65,7 @@
           Dabei sollte in den meisten Kontexten das dunkle Farbschema genutzt werden. Wenn sich Nutzende über eine CSS-Flag ein helles Theme wünschen oder der Kontext das erfordert, kann auch das Light theme verwendet werden. Die Grundfarben sind so abgestimmt, dass sie leicht verschiedene HEX-Werte haben, jedoch vor dem Untergrund visuell gleich aussehen.
         </p>
 
-        <div class:"sr-only">
+        <div class="sr-only">
           <a href="#Themes-ableiten"> Lange Farbschema-Beschreibungen überspringen. </a>
         </div>
 
@@ -307,7 +309,7 @@
         </svg>
 
         <svg  role="img" aria-label="Ein helles Farbschema - base. Die schwarze Überschrift ist grün unterstrichen vor fast beigem Untergrund, ein Beispiel-fließtext steht auf hellgrau. 6 mit hex-werten Beschriftete Kästchen zeigen schwarz, grün, blau, violett, rose und ocker. "
-           width="500"
+           height="280"
            viewBox="0 0 52.916665 37.041664"
            version="1.1"
            id="svg160177"
@@ -544,7 +546,7 @@
           </g>
         </svg>
         <svg  role="img" aria-label="Übersichtsgrafiken mit dunklen Farbverläufen passend zu den bisher genannten Farben."
-           width="500"
+           height="280"
            viewBox="0 0 52.916665 37.041664"
            version="1.1"
            id="svg160177"
@@ -907,13 +909,18 @@
             <input type="text" id="text-input-example"/>
         </div>
     </section>
-    <section aria-labelledby="Pixelwelt">
+    <section aria-labelledby="pixelwelt">
         <div>
             <h2 id="pixelwelt">Pixelwelt</h2>
         </div>
         <p>
-          Hier entsteht noch ein Abschnitt zum Thema Pixelwelt. Bitte habt einen kleinen Augenblick geduld!
+          Das Divoc setzt für die Pixelwelt auf einen 16x16 Stil und reduzierte Farbpaletten. Zwar unterstützt das Workadventure nur 32x32 Tiles, wir können jedoch jeden Pixel "4 Pixel groß" machen und so eine besondere Optik erzielen.
         </p>
+        <div><img src="img/Pixel-cityscapes.png" class="pixelated" height="300"
+             alt="Pixelgrafik, ein grünes Häschen in Bläschen fliegt in richtung einer Stadt in einer gelben blase. Im Hintergrund ist eine Raumstation in einer blauen blase und ein kleines rotes Raaumschiff."/>
+        </div>
+        <p>
+          Unsere <a href="https://git.cccv.de/divoc/bridging-bubbles-design/-/tree/main/pixels"> Pixel-Asssets im Design-Git </a> können euch dabei helfen, im Event-Stil zu pixeln. Wir empfehlen hier insbesondere die Farbpalette, die ihr in Aseprite nutzen könnt. (Die Anwendung kann gekauft werden, Freund_innen des selbst-kompilierens finden die Anwendung jedoch auch frei im Paketmanager des Vertrauens.)
     </section>
 </main>
 </body>
diff --git a/styleguide-website/styleguide.css b/styleguide-website/styleguide.css
index e4de57c5eeffe96bf3c7211d9d7b98c696380539..a68d0c0465602b2a94d2616970b9c3bae6445b5c 100644
--- a/styleguide-website/styleguide.css
+++ b/styleguide-website/styleguide.css
@@ -391,7 +391,7 @@ hr::after {
     }
 }
 
-#sr-only {
+.sr-only {
     position:absolute;
     left:-10000px;
     top:auto;
@@ -400,6 +400,10 @@ hr::after {
     overflow:hidden;
 }
 
+.pixelated {
+  image-rendering: pixelated;
+}
+
 html {
     /* Works around a bug in chromium that makes the site not full width in small preview sizes*/
     position: absolute;