Gestaltung

Warmes technisches Papier bei Tag, Zeichenraum bei Nacht. Jede Stufe über der darunter.

Drei Stufen auf dem Blatt. Die gedämpfte Tinte trägt auf der vertieften Hover-Fläche keinen Text — normative Auflage des Kontrastnachweises.

Haarlinie trennt, betonte Linie begrenzt. Die Rasterlinie malt das Papier-Raster.

Ein Akzent, und er ist Signal. Die Akzenttinte liegt auf dem Akzent, nicht auf dem Blatt — das ist der einzige Ort, an dem sie vorkommt.

Drei Zustände, je Fläche, Wäsche und Tinte. Die Farbe trägt die Aussage nie allein.

Fünf Stufen für Einordnungen. Jede Tinte ist gegen ihre eigene Fläche gerechnet.

Drei Diagrammserien und ihre Spur. Weiß erreicht auf keiner der drei Flächen 4,5:1 — deshalb dunkle Serientinten statt der Akzenttinte.

Anteilsdiagramme: der größte Wert bekommt den dunkelsten Schritt.

• Zwei Familien: Archivo trägt die Stimme, IBM Plex Mono die Daten.
• Nie mehr als zwei Gewichte je Fläche.
• Versalien ausschließlich im Microlabel, ein bis drei Wörter.
• Jede Zahl in Mono mit tabellarischen Ziffern.
• Die gedämpfte Tinte trägt auf der vertieften Hover-Fläche keinen Text.

• de-DE: Tausenderpunkt, Dezimalkomma, Datum in Punktschreibweise.
• Geschütztes Leerzeichen zwischen Zahl und Einheit, auch vor dem Prozentzeichen.
• Europe/Berlin steht auf jedem Datumsaufruf, weil die Laufzeitzone auf Vercel UTC ist.
• Mono mit tabellarischen Ziffern: gleiche Stelle, gleiche Spalte.
• Kein Bauteil formatiert selbst — Werte kommen vorformatiert an.

Vier-Pixel-Basis. Die Spur trägt als Breite das Token selbst — der Balken ist das Maß, nicht sein Bild.

• Ein Container, und das ist .inhaltsbreite — keine eigene Maximalbreite irgendwo sonst.
• Spalten weichen, nichts rollt waagerecht.
• Radius null im ganzen Bedienteil. Radien im Dokument sind Nutzdaten.
• Haarlinie statt Schatten. Der eine Schatten liegt am Blatt.

Vier Arten, ein Primärknopf je Blickbereich. Hover färbt in zwei Takten, Fokus antwortet in einem — beides erscheint beim Überfahren und beim Antabben, nicht als gemalte Fläche. Gesperrt heißt gesperrt, nicht grau.

Fünf Zustände: Ruhe, Pflicht, fehlerhaft, gesperrt und Fokus. Der Fokus setzt den Rahmen auf Amber und behält zusätzlich den globalen Ring — nachzusehen mit der Tabulatortaste.

Filterchip. Der Aktivzustand steht in aria-pressed und wird von dort gemalt — ein Wahrheitsträger, nicht zwei. Chips ersetzen keine Reiter.

Die Farbe trägt die Aussage nie allein — das Wort steht immer dabei. Eine Plakette ohne Text ist ein farbiger Fleck.

Die Plakettenklassen selbst. Für die drei Zustände gibt es mit StatusBadge ein Bauteil, für die fünf Stufen der Einordnung keines — sie kommen in dieser Anwendung nicht vor und werden nicht auf Vorrat gebaut. Hier stehen sie als rohe Klassen, damit die Auskunft vollständig ist.

Versal, gesperrt, Mono, gedämpfte Tinte. Ein bis drei Wörter, nie Fließtext, nie größer als die eine Stufe.

Karte mit Haarlinie, zwei Eckmarken und dem einzigen Schatten des Systems. Setzt position: relative — kein absolut gesetztes Menü darin.

Beide sind echt und wirken sofort auf diese Seite: der Themenumschalter läuft den Ring automatisch · hell · dunkel und schreibt den Keks, der Breitschalter nimmt jedem .inhaltsbreite-Behälter seine Maximalbreite. Die Leiste oben zeigt die Wirkung mit.

Beide liegen als natives dialog in der obersten Schicht: Fokusfalle, Escape und die Rückgabe des Fokus an den Auslöser kommen vom Element selbst. Der Schließknopf trägt ein Wort, kein Kreuzzeichen.

Die Kopfzeile des Design-Systems. In dieser Anwendung ist sie ungenutzt, und ihre Klassen .kopfzeile, .kopfzeile-innen, .kopfzeile-punkt und .kopfzeile-werkzeuge sind in styles/anwendung.css nicht definiert — der Editor führt seine eigene Titelleiste, die Konto-Seiten .seitenkopf. Sie steht hier unverkleidet, damit der Befund sichtbar ist und nicht im Verzeichnis schlummert.

Der Behälter trägt die Linienfarbe, die Zellen decken sie ab, was übrig bleibt ist die Fuge. Eine Haarlinie ohne letztes Kind und ohne doppelte Ränder beim Umbruch.

Ein Gefäß aus mehreren Bedienteilen. Es färbt seinen Rahmen über :focus-within, der Amberring bleibt am wirklich fokussierten Feld.

Rahmen in Ruhe transparent, beim Überfahren betonte Linie, im aktiven Zustand Amber. Der Zustand steht in aria-pressed oder aria-current, nicht in einer zweiten Klasse.

Die Kante ist in Ruhe schon da, nur transparent — der Zustandswechsel bewegt deshalb nichts. Breite ist die Zustandskante, zwei Haarlinien.

Die vertiefte Fläche: Tabellenkopf, Code, Hinweisblock. Haarlinie, kein Schatten.

Zwei Balken für zwei Orte: der breite steht im Blatt, der drei Pixel hohe in einer Tabellenzelle. Beide wachsen höchstens einmal und nie im Leerlauf.

Kopf auf der vertieften Fläche, Zahlen rechtsbündig und in Mono, Zeilenwechsel nur als Farbe. Sie rollt nie waagerecht — Spalten weichen.

Zwei Winkel am Blatt, oben links und unten rechts. Sie sind Schnittmarken einer Zeichnung und tragen keine Bedeutung — deshalb sind sie der einzige Zierat, den das System kennt.

Der Aufklapper des Design-Systems ist in dieser Anwendung nicht vorhanden: styles/anwendung.css führt ihn im Kopf der Datei namentlich unter dem, was zu einer Seitenanwendung mit Marketingrouten gehört und hier nicht auf Vorrat gebaut wird. Der Editor klappt mit eigenen Mitteln auf, die Konto-Seiten klappen nichts auf. Der Platz steht hier, damit das Fehlen eine Auskunft ist und kein Versehen.

• .kein-druck — verschwindet im Druck. Jede Bedienfläche trägt sie.
• .nur-druck — erscheint erst im Druck.
• .ab-md — Nebenspalte, die erst ab 768 Pixel erscheint und im Druck zurückkommt.
• .zellentext — Textzelle, die kürzt statt zu schieben; der volle Wert steht im title.
• .inhaltsbreite — der eine Container des Systems.

Ein Takt von 60 Millisekunden, Vielfache 1 · 2 · 3 · 5 · 7 · 11. Jede Stufe ist mindestens das 1,4-Fache der vorigen — engere Zeiten unterscheidet niemand.

Eine Quellkurve, zwei Ableitungen, eine Feder. Alle vier laufen hier auf der Auftrittsdauer, damit nur die Kurve den Unterschied macht.

Einmal je Seite, gestaffelt um einen Takt je Kind, gedeckelt bei fünf. Der Zähler steht als eigene Eigenschaft am Kind, die Kappung im Stilblatt — nicht an der Aufrufstelle.

• Hilfslinien
• Umriss
• Bemaßung
• Eckmarken
• Flächen
• Schriftfeld

Einmal, aus der linken Kante, über die Auftrittsdauer. Danach steht der Balken.

Farbe in zwei Takten beim Überfahren, Fokus in einem beim Antabben, Maß in drei beim Umschalten. Kein Zustand wandert: der Zustandsweg ist null.

Herein über die Schichtdauer mit der Auftrittskurve, hinaus über die schnelle Dauer mit der Abgangskurve. Was verschwindet, hält niemanden auf. Die Probe steht in G-06, bei den beiden Bausteinen, die sich öffnen lassen.

Die einzige Kurve mit Überschwingen, und sie gilt ausschließlich für Bewegung, die aus einem Griff oder einem Schalter kommt. Höchstens zwei Prozent Überschwingen — bei einer Grundlinie Weg liegt das unter einer Haarlinie.

• Dauerbewegung ohne Anlass: Karussell, Ticker, pulsierender Punkt, Ladeanimation mit Charakter.
• Blinkender Schreibcursor und jedes Schimmern — beide laufen weiter, wenn niemand hinsieht.
• Bewegung als Verzierung einer Zahl.
• Parallaxe, scrollgetriebene Verwandlung, Sprung in die Sicht.
• Hover, der skaliert oder verschiebt.
• Ein zweiter Auftritt auf derselben Seite.
• Federkurven außerhalb der Hand, Überschwingen, Rotation als Übergang.

• Eine Geometriequelle, drei Medien: lib/landung/riss-modell.ts.
• Der Server zeichnet das vollständige Bild als Inline-SVG.
• Der Klient sondiert auf einem Wegwerf-Element und erzeugt die Leinwand erst danach.
• Sobald der Maler gezeichnet hat, wird das SVG verborgen. Im Druck kehrt sich das um.
• WebGPU scheidet aus: Kontextsperre ohne Rückfall.