Aerona Design

Die Design-Werkstatt

Hier werden Ladeanimationen und Oberflächen-Stile ausprobiert – an echten Bedienelementen, bevor sie in AetherOS, auf die Webseite oder in die Apps kommen. Die Werkstatt liegt deshalb bei den Bausteinen, bei dem, was allen Aerona-Produkten gehört, und nicht in einem davon. Ein Entwurf als Bild verrät nicht, wie er sich beim Klicken anfühlt; hier sieht man es.

Eine Werkstatt, kein fertiges Produkt. Was hier liegt, sind Entwürfe. Nicht alles davon wird übernommen. Die Designsprache aus Regel 32 ist hier noch nicht angekommen: Den Aerona-Verlauf, den gemeinsamen Fokusring und die Pixel-Bausteine hat die Werkstatt noch nicht, sie arbeitet mit eigenen Farben (Stand 24.09.2026).

Was in der Werkstatt liegt

Ladesysteme

Oberflächen-Stile

Hintergrundbilder

Regler für alle Stile

Die Ladesysteme

Vierzig Arten zu warten

Von „Liquid Neon“ über „Orbital Ring“ bis „Matrix Terminal“: jede eine eigene Idee, wie eine Ladeanzeige aussehen kann. Eine Ladeanzeige sieht man an, während man nichts tun kann – deshalb lohnt es sich, viele Formen nebeneinander zu prüfen. Gebaut sind sie aus 7 Stilblättern und 11 Skripten.

Alle 40 Ladesysteme

So heißen sie in der Werkstatt, in dieser Reihenfolge. Die Namen bleiben englisch, weil sie so in den Dateien der Werkstatt stehen – übersetzt fände man sie dort nicht wieder:

Liquid Neon Wave · Cyberpunk Grid · Orbital Ring · Aerona Splash · 3D Warp Tunnel · Morphing Poly-Glow · Matrix Terminal · Eclipse Liquid Ring · DNA Double Helix · Matrix Falling Code · Pulse Heartbeat ECG · Hourglass Sands · Soundwave Audio · Molecular Mesh · Cyber Radar Sweep · Liquid Drop Fill · Blockchain Chain · Quantum Orbit Loop · Glitch Matrix Bar · Aerona Lumina Core · Neon Particle Vortex · Aero Geometric Grid · Retro Neon Tape · Cyber Hologram Disk · Lumina Flow Particles · Cyber Matrix Wall · Neon Equalizer · Lumina Starfield Warp · Aerona Gear System · Cyber Neural Map · Matrix Code Ring · Neon Liquid Glass · Cyber Hexagon Mesh · Lumina Portal Warp · Aero Circuit Grid · Lumina Sphere Core · Neon Liquid Tube · Cyber Shield Grid · Aero Particle Collide · Lumina Matrix Terminal

So sehen die Ladesysteme aus

Alle 40 Ladesysteme als Bild zeigen

Ladesystem „Liquid Neon Wave“ aus der Design-Werkstatt bei 45 Prozent — Liquid Neon Wave

Ladesystem „Cyberpunk Grid“ aus der Design-Werkstatt bei 45 Prozent — Cyberpunk Grid

Ladesystem „Orbital Ring“ aus der Design-Werkstatt bei 45 Prozent — Orbital Ring

Ladesystem „Aerona Splash“ aus der Design-Werkstatt bei 45 Prozent — Aerona Splash

Ladesystem „3D Warp Tunnel“ aus der Design-Werkstatt bei 45 Prozent — 3D Warp Tunnel

Ladesystem „Morphing Poly-Glow“ aus der Design-Werkstatt bei 45 Prozent — Morphing Poly-Glow

Ladesystem „Matrix Terminal“ aus der Design-Werkstatt bei 45 Prozent — Matrix Terminal

Ladesystem „Eclipse Liquid Ring“ aus der Design-Werkstatt bei 45 Prozent — Eclipse Liquid Ring

Ladesystem „DNA Double Helix“ aus der Design-Werkstatt bei 45 Prozent — DNA Double Helix

Ladesystem „Matrix Falling Code“ aus der Design-Werkstatt bei 45 Prozent — Matrix Falling Code

Ladesystem „Pulse Heartbeat ECG“ aus der Design-Werkstatt bei 45 Prozent — Pulse Heartbeat ECG

Ladesystem „Hourglass Sands“ aus der Design-Werkstatt bei 45 Prozent — Hourglass Sands

Ladesystem „Soundwave Audio“ aus der Design-Werkstatt bei 45 Prozent — Soundwave Audio

Ladesystem „Molecular Mesh“ aus der Design-Werkstatt bei 45 Prozent — Molecular Mesh

Ladesystem „Cyber Radar Sweep“ aus der Design-Werkstatt bei 45 Prozent — Cyber Radar Sweep

Ladesystem „Liquid Drop Fill“ aus der Design-Werkstatt bei 45 Prozent — Liquid Drop Fill

Ladesystem „Blockchain Chain“ aus der Design-Werkstatt bei 45 Prozent — Blockchain Chain

Ladesystem „Quantum Orbit Loop“ aus der Design-Werkstatt bei 45 Prozent — Quantum Orbit Loop

Ladesystem „Glitch Matrix Bar“ aus der Design-Werkstatt bei 45 Prozent — Glitch Matrix Bar

Ladesystem „Aerona Lumina Core“ aus der Design-Werkstatt bei 45 Prozent — Aerona Lumina Core

Ladesystem „Neon Particle Vortex“ aus der Design-Werkstatt bei 45 Prozent — Neon Particle Vortex

Ladesystem „Aero Geometric Grid“ aus der Design-Werkstatt bei 45 Prozent — Aero Geometric Grid

Ladesystem „Retro Neon Tape“ aus der Design-Werkstatt bei 45 Prozent — Retro Neon Tape

Ladesystem „Cyber Hologram Disk“ aus der Design-Werkstatt bei 45 Prozent — Cyber Hologram Disk

Ladesystem „Lumina Flow Particles“ aus der Design-Werkstatt bei 45 Prozent — Lumina Flow Particles

Ladesystem „Cyber Matrix Wall“ aus der Design-Werkstatt bei 45 Prozent — Cyber Matrix Wall

Ladesystem „Neon Equalizer“ aus der Design-Werkstatt bei 45 Prozent — Neon Equalizer

Ladesystem „Lumina Starfield Warp“ aus der Design-Werkstatt bei 45 Prozent — Lumina Starfield Warp

Ladesystem „Aerona Gear System“ aus der Design-Werkstatt bei 45 Prozent — Aerona Gear System

Ladesystem „Cyber Neural Map“ aus der Design-Werkstatt bei 45 Prozent — Cyber Neural Map

Ladesystem „Matrix Code Ring“ aus der Design-Werkstatt bei 45 Prozent — Matrix Code Ring

Ladesystem „Neon Liquid Glass“ aus der Design-Werkstatt bei 45 Prozent — Neon Liquid Glass

Ladesystem „Cyber Hexagon Mesh“ aus der Design-Werkstatt bei 45 Prozent — Cyber Hexagon Mesh

Ladesystem „Lumina Portal Warp“ aus der Design-Werkstatt bei 45 Prozent — Lumina Portal Warp

Ladesystem „Aero Circuit Grid“ aus der Design-Werkstatt bei 45 Prozent — Aero Circuit Grid

Ladesystem „Lumina Sphere Core“ aus der Design-Werkstatt bei 45 Prozent — Lumina Sphere Core

Ladesystem „Neon Liquid Tube“ aus der Design-Werkstatt bei 45 Prozent — Neon Liquid Tube

Ladesystem „Cyber Shield Grid“ aus der Design-Werkstatt bei 45 Prozent — Cyber Shield Grid

Ladesystem „Aero Particle Collide“ aus der Design-Werkstatt bei 45 Prozent — Aero Particle Collide

Ladesystem „Lumina Matrix Terminal“ aus der Design-Werkstatt bei 45 Prozent — Lumina Matrix Terminal

Bildschirmfotos aus der Werkstatt, aufgenommen am 16.09.2026 mit dem Farbthema Aerona Classic und einem Fortschritt von 45 %. Die Animationen laufen in der Werkstatt, die Bilder zeigen je einen Augenblick. Alle mit demselben Fortschritt und demselben Farbthema aufzunehmen, macht sie vergleichbar: Was sich unterscheidet, ist die Idee, nicht der Moment.

So wird ein Ladesystem geprüft

Laden spielen

Ein Knopf startet einen gespielten Ladevorgang. Der Fortschritt lässt sich auch von Hand zwischen 0 und 100 % stellen. So lässt sich jede Stelle einzeln ansehen, auch der Anfang bei null, an dem manche Anzeige noch gar nichts zeigt.

Tempo

Die Geschwindigkeit hat fünf Stufen. Drei Schnellwahlen setzen Tempo und Farbe zusammen: Classic Flow, Aurora Warp und Cyber Sync. Wie ruhig oder hektisch eine Ladeanzeige wirkt, hängt stark am Tempo – das sieht man erst, wenn man es verstellt.

Vier Farbthemen

Aerona Classic in Blau und Lila, Aurora in Cyan und Pink, Nebula in Lila und Pink, Cyber in Cyan und Grün. Aerona Classic kommt dem Aerona-Verlauf am nächsten, ist aber eine eigene Farbwahl der Werkstatt und nicht an die Marken der Webseite gebunden.

Bei 100 Prozent

Erreicht der gespielte Ladevorgang 100 %, endet er mit einer Explosion aus Partikeln. Das ist Werkstatt-Freude: In einem Produkt dürfte so etwas nach Regel 21 nur selten kommen – was jedes Mal käme, würde zur Tapete.

Immer nur eins

Die Seite zeigt immer nur ein Ladesystem auf einmal. Gewählt wird es in der Seitenleiste. Vierzig laufende Animationen gleichzeitig würden den Rechner belasten und den Blick zerstreuen; eine zur Zeit lässt sich ehrlich beurteilen.

Die Oberflächen-Stile

An echten Elementen

Jeder Stil wird an echten Bedienelementen gezeigt, nicht an einem Bild. Man kann klicken, tippen und schieben und sieht dabei, ob ein Stil auch im Gebrauch trägt oder nur im Stillstand schön ist.

Vier Regler

Leuchten, Unschärfe, Rundung und Deckkraft lassen sich live verstellen. Die Regler gelten für alle 38 Themes gleich, damit sich die Themes unter denselben Bedingungen vergleichen lassen. Die Startwerte stehen in der Tafel weiter unten.

Hintergründe

38 Hintergrundbilder liegen dazu bereit, eins je Theme. Glas lässt sich nur beurteilen, wenn etwas dahinter liegt – auf einer leeren Fläche sieht jede Unschärfe gleich aus.

So sehen die Themes aus

Alle 38 Themes als Bild zeigen

Die Testfläche der Werkstatt im Theme „Steam Core“ mit Knöpfen, Eingabefeldern und Anzeigen — Steam Core

Die Testfläche der Werkstatt im Theme „Bio-Lumi“ mit Knöpfen, Eingabefeldern und Anzeigen — Bio-Lumi

Die Testfläche der Werkstatt im Theme „Cosmic Dust“ mit Knöpfen, Eingabefeldern und Anzeigen — Cosmic Dust

Die Testfläche der Werkstatt im Theme „Frost Aurora“ mit Knöpfen, Eingabefeldern und Anzeigen — Frost Aurora

Die Testfläche der Werkstatt im Theme „Cyber Grid“ mit Knöpfen, Eingabefeldern und Anzeigen — Cyber Grid

Die Testfläche der Werkstatt im Theme „Magma Core“ mit Knöpfen, Eingabefeldern und Anzeigen — Magma Core

Die Testfläche der Werkstatt im Theme „Royal Velvet“ mit Knöpfen, Eingabefeldern und Anzeigen — Royal Velvet

Die Testfläche der Werkstatt im Theme „Deep Ocean“ mit Knöpfen, Eingabefeldern und Anzeigen — Deep Ocean

Die Testfläche der Werkstatt im Theme „Dark Gothic“ mit Knöpfen, Eingabefeldern und Anzeigen — Dark Gothic

Die Testfläche der Werkstatt im Theme „Retro Arcade“ mit Knöpfen, Eingabefeldern und Anzeigen — Retro Arcade

Die Testfläche der Werkstatt im Theme „Solarpunk Oasis“ mit Knöpfen, Eingabefeldern und Anzeigen — Solarpunk Oasis

Die Testfläche der Werkstatt im Theme „Void Singularity“ mit Knöpfen, Eingabefeldern und Anzeigen — Void Singularity

Die Testfläche der Werkstatt im Theme „Mystic Alchemist“ mit Knöpfen, Eingabefeldern und Anzeigen — Mystic Alchemist

Die Testfläche der Werkstatt im Theme „Aero Stream“ mit Knöpfen, Eingabefeldern und Anzeigen — Aero Stream

Die Testfläche der Werkstatt im Theme „Clockwork Chrono“ mit Knöpfen, Eingabefeldern und Anzeigen — Clockwork Chrono

Die Testfläche der Werkstatt im Theme „Crystal Prism“ mit Knöpfen, Eingabefeldern und Anzeigen — Crystal Prism

Die Testfläche der Werkstatt im Theme „Steampunk Gothic“ mit Knöpfen, Eingabefeldern und Anzeigen — Steampunk Gothic

Die Testfläche der Werkstatt im Theme „Neon Sakura“ mit Knöpfen, Eingabefeldern und Anzeigen — Neon Sakura

Die Testfläche der Werkstatt im Theme „Nebula Dream“ mit Knöpfen, Eingabefeldern und Anzeigen — Nebula Dream

Die Testfläche der Werkstatt im Theme „Toxic Waste“ mit Knöpfen, Eingabefeldern und Anzeigen — Toxic Waste

Die Testfläche der Werkstatt im Theme „Sandstone Mirage“ mit Knöpfen, Eingabefeldern und Anzeigen — Sandstone Mirage

Die Testfläche der Werkstatt im Theme „Cyber Frost“ mit Knöpfen, Eingabefeldern und Anzeigen — Cyber Frost

Die Testfläche der Werkstatt im Theme „Dragon Embers“ mit Knöpfen, Eingabefeldern und Anzeigen — Dragon Embers

Die Testfläche der Werkstatt im Theme „Andromeda Galaxy“ mit Knöpfen, Eingabefeldern und Anzeigen — Andromeda Galaxy

Die Testfläche der Werkstatt im Theme „Plague Biohazard“ mit Knöpfen, Eingabefeldern und Anzeigen — Plague Biohazard

Die Testfläche der Werkstatt im Theme „Vaporwave Sunset“ mit Knöpfen, Eingabefeldern und Anzeigen — Vaporwave Sunset

Die Testfläche der Werkstatt im Theme „Elysian Heaven“ mit Knöpfen, Eingabefeldern und Anzeigen — Elysian Heaven

Die Testfläche der Werkstatt im Theme „Glitch Matrix“ mit Knöpfen, Eingabefeldern und Anzeigen — Glitch Matrix

Die Testfläche der Werkstatt im Theme „Primal Jungle“ mit Knöpfen, Eingabefeldern und Anzeigen — Primal Jungle

Die Testfläche der Werkstatt im Theme „Industrial Nuclear“ mit Knöpfen, Eingabefeldern und Anzeigen — Industrial Nuclear

Die Testfläche der Werkstatt im Theme „Deep Abyss“ mit Knöpfen, Eingabefeldern und Anzeigen — Deep Abyss

Die Testfläche der Werkstatt im Theme „Nordic Runes“ mit Knöpfen, Eingabefeldern und Anzeigen — Nordic Runes

Die Testfläche der Werkstatt im Theme „Retro Synthwave“ mit Knöpfen, Eingabefeldern und Anzeigen — Retro Synthwave

Die Testfläche der Werkstatt im Theme „Golden Baroque“ mit Knöpfen, Eingabefeldern und Anzeigen — Golden Baroque

Die Testfläche der Werkstatt im Theme „Quantum Matrix“ mit Knöpfen, Eingabefeldern und Anzeigen — Quantum Matrix

Die Testfläche der Werkstatt im Theme „Cassette Futurism“ mit Knöpfen, Eingabefeldern und Anzeigen — Cassette Futurism

Die Testfläche der Werkstatt im Theme „Celestial Dawn“ mit Knöpfen, Eingabefeldern und Anzeigen — Celestial Dawn

Die Testfläche der Werkstatt im Theme „Crimson Autumn“ mit Knöpfen, Eingabefeldern und Anzeigen — Crimson Autumn

Bildschirmfotos der Testfläche, aufgenommen am 16.09.2026 mit den Startwerten der vier Regler. Mit anderen Reglerwerten sieht dasselbe Theme deutlich anders aus; die Bilder zeigen den Ausgangspunkt, nicht alles, was ein Theme kann.

Die Testfläche der Stile

Sechs Kacheln zeigen, wie ein Stil auf Bedienelemente wirkt. Sie decken ab, was in fast jeder Oberfläche vorkommt, vom Knopf bis zum Terminal:

Knöpfe und kleine Abzeichen
ein Eingabefeld und eine Auswahlliste
ein Schalter, Kästchen zum Ankreuzen und ein Schieberegler
Anzeigen für den Systemzustand
ein Terminal mit Code
ein Leuchten, das dem Mauszeiger folgt

Regler	Bereich	Startwert
Leuchten	0–⁠30 px	12 px
Unschärfe des Glases	0–⁠50 px	25 px
Rundung	0–⁠32 px	14 px
Deckkraft des Hintergrunds	5–⁠95 %	45 %

Ein Klick in der Seitenleiste setzt nur den Namen des Themes an der Seite. Das passende CSS greift dann von selbst. Nach demselben Prinzip wechseln auch die Apps ihre Stile: eine Marke am Wurzelelement, und die Regeln, die zu ihr gehören, werden wirksam (wie das in den Apps geht).

Wie sie gebaut ist

Ohne Bauprozess

Einfaches HTML, CSS und JavaScript ohne Bauschritt. Zum Ansehen reicht ein kleiner Server auf dem eigenen Rechner, weil der Browser Stilblätter aus Dateien sonst nicht nachlädt. Ohne Bauschritt lässt sich eine Änderung sofort ausprobieren, und was man sieht, steht genau so in den Dateien.

Wofür

Themes und Ladebalken, die später in AetherOS, auf der Webseite und in den Apps landen können. Die Ladebalken-Variante „Toxic-Grün“ nennt Regel 32 schon ausdrücklich – als Ausnahme, deren Farbe bleiben darf, weil man sie selbst wählt.

Schriften im Ordner

Outfit und Space Grotesk liegen in der Werkstatt selbst: sechs Schnitte, zusammen 80 KB. Bis zum 2. August 2026 kamen sie aus dem Internet, und ohne Verbindung sah die Werkstatt anders aus. Das passte nicht zu einem Ökosystem, das ohne fremde Dienste auskommen soll.

Ein Theme dazubauen

Theme-Datei anlegen: im Ordner für die Themes, mit Regeln unter dem Namen des Themes. Weil jede Regel an diesem Namen hängt, greift ein Theme nur, wenn es gewählt ist.
Hintergrundbild ablegen: im Ordner für die Hintergründe, und im Theme einbinden. Der Dateiname folgt dem Namen des Themes, damit Bild und Theme ohne Suchen zusammenfinden.
Import ergänzen: eine Zeile im Stilblatt der Testseite. Dieses Stilblatt holt alle Themes herein; was dort fehlt, wird nie geladen.
Knopf setzen: in die Liste auf der Stile-Seite. Erst der Knopf setzt den Namen des Themes an die Seite – ohne ihn gibt es keinen Weg, es einzuschalten.

Wird Schritt 3 oder 4 vergessen, bleibt das Theme unsichtbar. Die Datei allein reicht nicht. Tückisch daran ist, dass keine Fehlermeldung kommt: Das Theme fehlt einfach, und wer nicht weiß, dass es da sein sollte, bemerkt es nicht.

Im Ordner liegen 40 Theme-Dateien für 38 Themes. Zwei davon enthalten nur die ausgelagerten Animationen von Steam Core und Bio-Lumi. Ausgelagert sind sie wegen der 300-Zeilen-Grenze aus dem Regelwerk, die auch in der Werkstatt gilt.

Die Design-Werkstatt

Was in der Werkstatt liegt