Divoc - bridging bubbles - Styleguide

Das Divoc Design nimmt soziale Blasen wörtlich. Nicht nur leben wir als Wesen in einer Blase, wir befinden uns in gigantischen Gesellschaften, die Blasen Bilden.

Das Design des DiVOC orientiert sich daher an visuell an Retro-Scifi-Anime. Ein paar Cyberpunk Einflüsse sind auch gern gesehen. Aber vielleicht ist diese Assoziation, die wir da haben auch nur ein Zeichen der Blase, in der wir leben und eure erste Assoziation ist Fantasy?

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?

Diesen Styleguide und alle Grafik Assets, die bis zum Event erstellt werden, findet ihr im Bridging Bubbles Design Repository im CCCV-Git.

Das DiVOC Bunny macht sich auch dieses mal wider zu euch in's Wohnzimmer auf und bekommt diesmal jedoch Gesellschaft: Kreiert euch im Logogenerator von Tilcreator eine Kreatur für eure Profilbilder und Projekte.

Das Farbschema basiert auf 5 Basisfarben - die je in einer "light" und einer "dark" Variante existieren und 5 dazugehörigen dunklen Gradienten.

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.

Die Textfarbe ist dabei immer ein Beige. Bzw ein sehr sehr dunkles grau.

Themes ableiten

Aus den den Grundfarben lassen sich nun Themes ableiten. Jedes Theme benötigt:

• Eine Primärfarbe (starker Kontrast zum Untergrund bevorzugt)
• Eine Sekundärfarbe (starker Kontrast zur Textfarbe bevorzugt)
• Eine tertiäre Farbe
• Einen Farbgradienten
  • daraus abgeleitet die dunkelste Farbe als primäre Hintergrundfarbe
  • eine Farbe aus dem Gradienten (siehe vorgeschlagene Auswahl) als sekundäre Hintergrundfarbe.

  Für abgeleitete Light Themes ist nur ein Gradient vorgesehen.

  ---

Das DiVOC Design benutzt Genos als Schriftart für Überschriften und Ubuntu als Schriftart für Fließtext. Hier ist eine Demo, das CSS dieses Styleguides kann gern genutzt werden.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

• Hello!
• Hey!
• Listen!
• Look!
• Watch out!

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.

Unsere Pixel-Asssets im Design-Git 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.)

Das DiVOC Design wurde koordiniert und in großen Teilen erstellt von betalars. Am Farbschema mitgewirkt hat Eevli. Kimera7790 und Pliess haben Übersetzungen aus dem japanischen beigetragen.

Wir haben außerdem genutzt:

• Das Album Foundations von Azure Productions. CC-BY
• Wolkenkratzer von TFMSTYLE