Ultra Chrome Pixel Glass

Das Glas

Sechs Anläufe hat es gebraucht, und jeder einzelne endete mit demselben Satz: „Sieht immer noch nicht so richtig nach Glas aus." Was am Ende geholfen hat, war keine Geschmacksfrage, sondern eine Beobachtung: Licht kommt von oben, geht durch das Glas hindurch und tritt unten wieder aus.

Dieselbe Scheibe auf sechs Gründen

Glas kann man nicht auf einer Farbe beurteilen. Es lebt davon, was dahinter liegt — deshalb steht hier sechsmal exakt derselbe Kasten, nur mit einem anderen Grund darunter. Wenn eine Scheibe auf allen sechs funktioniert, ist sie richtig gebaut.

Diese sechs verändern sich nicht mit dem Aussehen der Seite. Sie sind Proben, und ein Muster, das sich mitverändert, ist kein Muster. Eine Runde lang taten sie es doch: Im hellen Aussehen war „Auf Schwarz" weiß, „Über Text" weiß, „Auf einem Muster" weiß — fünf von sechs Gründen fielen zu derselben Fläche zusammen, und der ganze Vergleich sagte nichts mehr.

Der letzte Kasten ist der ehrlichste: Im hellen Aussehen kippt die Rechnung um. Das Licht kommt weiter von oben, aber es hellt nicht mehr auf — es verschattet. Wer nur den dunklen Fall baut, merkt das nie.

Der fünfte Anlauf: der Schliff

Vier Fassungen lang war dieses Glas gemaltes Licht — ein Verlauf im Grund, ein paar Linien am Rand, ein Schatten darunter. Das ergibt eine schöne Fläche. Aber es ergibt keine Scheibe, und der Beweis dafür ist unbequem: Es hätte genauso ausgesehen, wenn dahinter eine leere Wand läge.

Woran man Glas tatsächlich erkennt, ist nicht der Glanz, sondern der Rand. Eine Scheibe hat Dicke, und an ihrer Kante wirkt diese Dicke wie eine Linse: Was dahinter liegt, wird dort zusammengestaucht, wird dichter, wird farbiger. Der Rand einer echten Scheibe zeigt einen anderen Ausschnitt der Welt als ihre Mitte. Das kann kein Verlauf nachmachen, so gut man ihn auch abstimmt.

Alle sechs Scheiben oben tragen es seit Fassung fünf: einen zweiten, schmalen Weichzeichner nur am Rand — vier Pixel, stärker gesättigt, eine Spur heller als die Mitte. Am deutlichsten auf dem Muster und über dem Text, weil man dort sieht, wie sich die Kante verschiebt. Auf Schwarz sieht man ihn fast gar nicht, und das ist richtig so: Wo nichts dahinter liegt, gibt es nichts zu brechen.

Genau deshalb tragen ihn auch nur vier Bauformen von 224. Ein Merkzeichen, das auf dem Seitengrund sitzt, hat nichts zu brechen — dort kostet der Schliff eine eigene Ebene im Bildaufbau und liefert dafür ein Pixel Unterschied. Auf schmalen Geräten schaltet er sich ganz ab.

Der sechste Anlauf: es gibt kein neutrales Glas

Bis hierher war jede Aufhellung reines Weiß und jede Abdunklung reines Schwarz. Das klingt sauber und ist der Grund, warum eine Fläche als Lack gelesen wird und nicht als Material. Jede echte Scheibe ist durch ihren Eisenanteil leicht grünblau — man sieht es an der Schnittkante jeder Fensterscheibe.

Der Körper hat deshalb jetzt eine Farbe, und zwar dieselbe Trennung wie die Brechung: Was oben auftrifft, ist kühl; was unten austritt, ist warm, weil es den Körper durchquert hat. Beides so schwach, dass niemand es als Farbe benennen würde.

Am meisten zahlt es sich im hellen Aussehen aus. Dort war der Körper neutrales Schwarz auf Weiß, also Grau — und Grau auf Weiß ist die Zeichnung einer lackierten Platte. Genau so sahen die Proben aus: gebürstetes Metall. Nachgerechnet über #eef2f8 ergibt der neue Wert rgb(225,233,244), der alte war rgb(231,235,241). Kaum dunkler, deutlich kälter — und aus der Platte wird eine Scheibe.

Die Punkte

Nichts auf dieser Webseite blendet ein. Alles entsteht aus Punkten, die sich sammeln, und löst sich wieder in Punkte auf. Es gibt sechs Formen davon, und jede beantwortet eine andere Frage. Regel 32 nennt das die Handschrift: Überschriften, Kennzahlen, die Fehlerseite und der Schriftzug der Marke zeichnen mit Punkten, im Betriebssystem auch der Aufbau der Einstellungen.

Die Schrift

Zwei Familien, und die Aufteilung dazwischen ist streng: Outfit trägt alles, was ruft — Überschriften, Marken, Zahlen. Inter trägt alles, was man liest. Keine dritte Schrift, und keine der beiden übernimmt die Aufgabe der anderen.

Die Größen, wie sie wirklich gesetzt sind

Abgelesen an dieser Seite, nicht aus einer Tabelle abgeschrieben. Zwischen zwei Stufen liegt immer ein deutlicher Sprung: Wer sie um zwei Pixel auseinanderlegt, hat keine Hierarchie, sondern Unruhe.

Die Schriften liegen im Projekt

Beide werden aus dem eigenen Ordner geladen, nicht von einem fremden Dienst. Das ist keine Vorsicht, sondern die Grundregel des ganzen Hauses: Was zu Aerona gehört, kommt von Aerona. Ein fremder Schriftdienst erführe bei jedem Seitenaufruf, wer gerade liest – für zwei Schriften, die man selbst ausliefern kann, wäre das ein schlechter Tausch.

Zwei Kleinigkeiten daran haben Zeit gekostet. Erstens werden nur die lateinischen Schnitte vorgeladen — Kyrillisch, Griechisch und Vietnamesisch wären 74 KB vor dem ersten Bild, die die meisten Besucher nie brauchen. Zweitens braucht ein <link rel="preload"> für Schriften zwingend das Wort crossorigin, auch bei eigenen Dateien: Ohne es lädt der Browser sie zweimal — einmal fürs Vorladen, einmal fürs Setzen.

Die Farbe

Es gibt genau eine: den Verlauf von Blau nach Violett. Nicht das Blau allein und nicht das Violett allein – so steht es seit dem 24. September 2026 als erster Satz in Regel 32. Alles andere auf dieser Webseite ist Schwarz, Weiß und was dazwischen liegt. Ausgenommen ist nur, wo Farbe selbst der Inhalt ist: das Farbrad, die Emojis, Aeri, und Rot vor einer Handlung, die man nicht zurücknehmen kann.

Sie tritt nie als Fläche auf

Das ist die eigentliche Regel, und sie ist wichtiger als der Ton selbst. Der Verlauf erscheint als Licht: auf einer Schrift, an einer Kante, in einem Balken, unter einem Menüpunkt. Nie als angemalter Kasten. Die eine Ausnahme sind Knöpfe, die man drücken soll: Sie dürfen im tiefen Verlauf gefüllt sein, und dann steht Schrift und Zeichen darauf weiß.

Ein bunter Kasten behauptet Wichtigkeit, ohne sie zu begründen. Licht behauptet nichts — es zeigt, wo etwas ist. Der Unterschied klingt klein und ist der Grund, warum diese Webseite bei einer einzigen Farbe nicht arm aussieht.

Der Winkel wird gerechnet, nicht gesetzt

Die Ruhelage ist 135 Grad. Aber js/verlauf-licht.js schreibt sie je Element neu, nach dessen Lage im Bild: Links steht die Fläche flacher, rechts steiler. Damit läuft das Licht über die ganze Seite hinweg aus einer Richtung, statt in jedem Kasten dieselbe Schräge zu wiederholen.

Eine Falle steckt darin, und sie hat einmal zugeschlagen: var(--k-winkel, 135deg) löste im Browser zu 0deg auf statt zu 135 — der Verlauf lief senkrecht statt schräg. Ein Merkmal, das immer gesetzt ist, braucht keinen Ersatzwert; der Ersatzwert war der Fehler.

Und im Hellen ist es ein anderes Blau

#60a5fa verschwindet auf hellem Grund fast, und #a855f7 flimmert darauf. Im hellen Aussehen steht deshalb eine Stufe tiefer: #2563eb nach #7c3aed. Dieselbe Farbe, andere Helligkeit — sonst wäre es dieselbe Zahl mit zwei verschiedenen Wirkungen.

Was stattdessen die Bedeutung trägt

Drei Helligkeiten. --k-text für das, was zählt, --k-text-leise für das, was einordnet, --k-text-still für das, was man selten braucht. Diese drei ersetzen auf der ganzen Webseite jede Ampel. Im Dunkeln sind es #ffffff, #a6a6a6 und #8c8c8c – drei Stufen Grau, die man ohne jede Farbe auseinanderhält.

Sieben Seiten hatten einmal eine eigene Seitenfarbe — Türkis, Gold, Grün, Rosé, Himmelblau, Violett, Bernstein. Keine davon hat überlebt, und jede aus einem anderen Grund. Das war der teuerste Teil des ganzen Umbaus und der, den man am Ende am wenigsten sieht. Wie teuer eine Regel werden kann, die eine Farbe nennt, zeigte sich noch einmal im September 2026: Aus „Aerona-Blau ist der Akzent“ waren 870 einfarbige Stellen geworden – jede regelkonform, zusammen ein Haus, das nirgends nach Aerona aussah.

Hell und Dunkel

Zwei vollständige Sätze Marken, nicht ein Satz mit einem Filter darüber. Das ist der Unterschied zwischen einem hellen Aussehen und einer dunklen Seite, die man umgedreht hat. Auch der Verlauf hat seinen eigenen hellen Satz: #2563eb nach #7c3aed statt #60a5fa nach #a855f7, nachzulesen in farben-tag.css.

Die drei markierten Zeilen sind die interessanten: Dort dreht sich das Vorzeichen um, nicht nur der Wert. Eine Glaskante gegen Helles gesehen ist die dunklere Stelle, nicht die hellere — wer jede Fassung nur im Dunkeln baut, dreht dort zwangsläufig am falschen Regler.

Kein Aufblitzen beim Laden

Die Wahl muss stehen, bevor das erste Bild gezeichnet wird. Deshalb setzt ein winziges Stück Code direkt im Kopf der Seite das Merkmal data-thema — lange bevor irgendein Stilblatt oder Skript geladen ist. Wer das erst später täte, zeigte jedem Besucher eine Zehntelsekunde die falsche Tageszeit. Genau daran erkennt man eine nachträglich angeschraubte Umschaltung.

Die Wahl gehört dem Besucher

Beim ersten Mal fragt die Seite das Betriebssystem. Sobald jemand selbst umschaltet, gilt seine Entscheidung — auch wenn das System später etwas anderes sagt. Umgekehrt wäre bevormundend: Wer nachts eine helle Seite will, hat dafür einen Grund.

Der Wechsel ist ein Moment, kein Zustand

Ein Kreis wächst aus dem Schalter über die Seite, 620 Millisekunden, und danach ist Ruhe. Die neue Tageszeit liegt oben und wächst heraus; die alte steht darunter still. Blendet man stattdessen über, sieht man beide Fassungen halb durchscheinend übereinander, und das sieht nach Fehler aus.

Zwei Dinge liefen lange gegen diese eine Bewegung an, und beide waren unsichtbar, bis jemand sagte, es zuckelt. Erstens hatten Kopf und Fuß für den Seitenwechsel eigene Namen — als eigene Ebenen wurden sie nicht mit der Blende weggeschnitten, sondern sprangen sofort um, während der Rest noch aufwischte. Zweitens tragen 121 Elemente einen Farbübergang für den Zeiger; beim Umschalten liefen sie alle gleichzeitig, mitten in der Fläche, die die Blende gerade aufdeckte. Beides steht jetzt still, solange gewischt wird.

Wie schnell etwas geht

Die Dauern standen einmal in neun Dateien einzeln. Sie waren alle verschieden, und keine davon war begründet. Heute stehen sie an einer Stelle — css/modules/bewegung.css, von wo js/bewegung.js sie für die Skripte holt — und jede hat eine Aufgabe. Allein die Pixelbewegungen hatten vorher zwölf verschiedene Dauern zwischen 700 und 3.400 Millisekunden; seit dem 13.09.2026 kommt noch eine Stufe für kleine Antworten dazu, 200 Millisekunden (--bew-mikro).

Die 200 ms kamen am 13.09.2026 mit dem Design-System 3.0 dazu. Sie sind eine eigene Marke und keine hochgedrehte 140: An den 140 ms hängen Staffelungen, die sonst alle mitrutschen würden. Die Kurve schießt los und rastet weich ein, deshalb wirkt die Antwort trotzdem sofort.

Zwei Familien, die nie gemischt werden

Jede Bewegung gehört zu einer von zwei Familien. Die Arbeitsbewegung antwortet auf Zeigen und Klicken und bringt Fenster, Karten und Menüs herein. Sie ist knapp und kommt an, ohne zu wippen. Der Charme gehört in kurze Momente: der erste Start, das Warten, ein leerer Zustand, etwas ist geglückt. Dort darf er verspielt sein.

Der Unterschied in einem Satz: Die weiche Kurve kommt an und bleibt stehen. Die Schwung-Kurve schießt ein Stück über das Ziel hinaus und federt zurück. Das ist die ganze Physik hinter „verspielt“. Bewegt wird in beiden Familien nur mit transform und opacity. Beide Kurven stehen als Marken in css/modules/bewegung.css – die weiche als --bew-knackig, die federnde als --bew-feder –, damit niemand sie an einer Stelle neu erfindet.

Die Regeln

Sie sind nicht vorher aufgeschrieben worden. Jede einzelne ist entstanden, weil etwas falsch aussah und jemand gefragt hat, warum. Aufgeschrieben stehen sie heute im Regelwerk, in Regel 32 (Designsprache) und Regel 33 (Bewegung) – dort mit dem Datum, an dem sie aufgefallen sind, und dem Satz, mit dem es gemeldet wurde.

1. Was ein Ziel ist, antwortet auf Zeigen. Was eine Aussage ist, kommt an. Ein Kasten, der auf Zeigen reagiert, ohne dass man irgendwohin kommt, verspricht etwas, das er nicht hält. Auf einer Seite waren das 290 Kästen auf einmal.
2. Nichts bewegt sich, ohne gefragt worden zu sein. Vier Bewegungen liefen endlos, vom Laden an: ein pulsender Punkt, ein atmendes Paket, ein schwebender Astronaut, ein blinkender Schreibcursor. Alle vier sind aus.
3. Eine Farbe, die nichts sagt, ist eine Farbe zu viel. Sieben Seiten hatten eine eigene Seitenfarbe — Türkis, Gold, Grün, Rosé, Himmelblau, Violett, Bernstein. Keine davon hat überlebt, und jede aus einem anderen Grund.
4. Bewegt wird mit opacity und transform. Alles andere zwingt den Browser, das Bild neu zu malen. Ein Punkteraster über den ganzen Seitenwechsel hat genau daran gezappelt.
5. Ohne Skript muss die Seite trotzdem lesbar sein. Jede Bewegung ist Zugabe. Fällt sie aus, steht der Inhalt da — nicht ein leerer Kasten. Dasselbe gilt für Zeichen, die sich aus Punkten aufbauen: Ohne Bewegung stehen sie sofort im Verlauf, nicht leer.
6. Wer Bewegung abgestellt hat, bekommt keine. Nicht weniger, sondern keine. Und alles bleibt bedienbar. Seit dem 13.09.2026 fragen alle Pixelbausteine das an einer gemeinsamen Stelle nach, und zwar laufend – vorher fragten acht davon nur beim Laden, und auf dieser Seite waren fünf von sechs Reitern tot, sobald Bewegung aus war.

Was es bewusst nicht gibt

Was daran noch nicht stimmt

Diese Liste steht hier, weil eine Designsprache ohne offene Punkte keine Designsprache ist, sondern eine Broschüre. Sie steht auf derselben Seite wie das, was gelungen ist, und nicht in einem eigenen Dokument, das niemand öffnet.

• Nie auf einem echten Gerät geprüft. Die ganze Umstellung ist in einem Vorschaufenster entstanden, das keine Bilder rendert. Jede Bewegung auf dieser Webseite ist gerechnet, nicht gesehen.
• Der Seitenwechsel ist noch nicht gut. Drei Anläufe, drei echte Fehler beseitigt — und er fühlt sich immer noch nicht richtig an. Die Ursache ist gemessen: 121 Dateien und rund zwei Megabyte pro Seite (gemessen im Sommer 2026). Neu gemessen am 04.10.2026: Eine Seite lädt rund 340 Skripte und wiegt live etwa 1 MB.
• Der Gleiter unter dem Menü sitzt kurz falsch. Direkt nach dem Laden um sechzehn Pixel versetzt, bis die Sprachdateien da sind. Drei Lösungswege probiert, keiner nachweisbar.
• Das alte Bündel lebt noch. css/gebaut.css hängt auf jeder Seite und bringt Regeln mit, von denen kein Seitenblatt etwas weiß. Zweimal hat das etwas versteckt, das längst weg sein sollte.
• Drei Stilblätter sind zu lang. Die eigene Grenze liegt bei dreihundert Zeilen. Alle drei sind erzeugt, nicht geschrieben – das Bündel gebaut.css, das daraus gerechnete seite-hell.css mit 3.374 Zeilen und kopf-buendel.css. Jedes von Hand geschriebene Stilblatt liegt darunter (nachgezählt am 23. September 2026).
• Die Fenster bekommen den Schliff nicht. Ein Fenster ist die glasigste Fläche, die es hier gibt, und ausgerechnet es steht nicht auf der Liste: Es scrollt. In einem scrollenden Kasten misst sich der Rand am oberen Ende des Inhalts statt am sichtbaren Ausschnitt — er liefe beim ersten Scrollen nach oben weg und ließe die Scheibe unten offen. Lösbar, aber nicht mit einer Zeile, und ein halb sitzender Rand ist schlechter als gar keiner.