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 vier Formen davon, und jede beantwortet eine andere Frage.

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.

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. Blau nach Violett, und das war es. Alles andere auf dieser Webseite ist Schwarz, Weiß und was dazwischen liegt.

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.

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.

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.

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.

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 — js/bewegung.js — und jede hat eine Aufgabe.

Die Regeln

Sie sind nicht vorher aufgeschrieben worden. Jede einzelne ist entstanden, weil etwas falsch aussah und jemand gefragt hat, warum.

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.
6. Wer Bewegung abgestellt hat, bekommt keine. Nicht weniger, sondern keine. Und alles bleibt bedienbar.

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.

• 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.
• 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.
• Fünf Dateien sind zu lang. Die eigene Grenze liegt bei dreihundert Zeilen. seite-hell.css hat 2383.
• 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.