Eigenstil — woran man den Allerweltsstil erkennt
Stand 08.10.2026 (ES-261008-recherche). Florian notierte „Make design overall look less like Claude“; Christian beauftragte dafür die Bahn 5-bereiche-eigenstil ([2026-10-08-florians-designnotizen](../kontext/entscheidungen/2026-10-08-florians-designnotizen.md)). Diese Datei ist das Maß für den Befund (ES-261008-befund) und den Musterbogen (ES-261008-richtung). Sie entscheidet nichts: Was gilt, steht im Style-Guide, und eine Regel wandert erst dorthin, wenn Christian eine Richtung gewählt hat.
Alle Sätze sind eigene Sätze; Zitate bleiben unter fünfzehn Wörtern (N362). Abgerufen wurde jede Quelle am 08.10.2026; das Datum hinter einer Quelle ist ihr eigenes Erscheinungs- oder Änderungsdatum.
1. Warum Oberflächen gleich aussehen
Anthropic selbst nennt den Grund „distributional convergence“: Ohne Vorgabe greift ein Sprachmodell zu den Mustern, die in seinen Trainingsdaten am häufigsten sind, weil sie am sichersten sind. Das Ergebnis sei sofort erkennbar und werde ebenso schnell abgetan (Anthropic, „Improving frontend design through Skills“, claude.com, 12.11.2025). Der Skill frontend-design im Repository anthropics/skills (geändert 09.06.2026 und 03.09.2026, „avoid generic design defaults“) zählt die Looks auf, auf die Claude zusammenläuft.
Daraus folgt eine zweite Lehre: Wer die erste Welle verbietet, bekommt die zweite. Seit lila Verläufe und Inter als KI-Zeichen gelten, weichen Modelle auf Creme, Serife und Terrakotta aus, und genau das gilt heute als „Claude-Look“ (Capital & Compute, „How to Fix AI Slop in Web Design, Tell by Tell“, 25.09.2026; Creeta, 03.08.2026). Eine Verbotsliste allein erzeugt also eine neue Einheitsoptik. Das Gegenmittel ist eine begründete Wahl: Jedes Merkmal unten ist erlaubt, wenn Denotato es aus seiner eigenen Welt (Sternwarte, Eule, Edelsteine, Freier Kranz) begründen kann, und verdächtig, wenn es nur „modern aussieht“.
Die Gegenstimmen gehören dazu: Keines der Mittel ist für sich schlecht; ein Kennzeichen wird es erst, wenn es niemand gewählt hat (925Studios, „AI Slop Fonts and Gradients“, 2026, Datum auf der Seite widersprüchlich). Für Chat-Blasen als KI-Kennzeichen fand sich keine Quelle; sie stehen unten trotzdem, weil Florian sie gemeint hat, aber ohne Beleg.
Bindung. Jedes Merkmal trägt eine von drei Marken: C — eng an Claude oder Anthropic gebunden; KI — KI-Werkzeuge allgemein; V — Vorlagenkultur (Tailwind, shadcn, Bootstrap), die die Modelle nur verstärken.
2. Die Kriterienliste
Je Merkmal: was es ist, der Beleg, die Bindung und die Prüffrage, die man an einem Bildschirmfoto mit Ja oder Nein beantwortet. Ein Ja ist ein Treffer für den Befund.
Farbe
E1 · Creme-Grund mit Terrakotta-Akzent. Ein warmer, leicht gelblicher oder rosiger Off-White-Grund (um #f4f1ea) mit einem gebrannten Orange-Rot als einziger Akzentfarbe (um #d97757). Anthropics eigener Skill führt das als Erkennungszeichen und nennt #d97757 den Akzent der Claude-Oberfläche. Beleg: anthropics/skills, frontend-design/SKILL.md, 03.09.2026; Creeta, 03.08.2026; Capital & Compute, 25.09.2026. Bindung C. Prüffrage: Ist der helle Grund ein warmes Creme oder Rosé, und ist der stärkste Buntton ein Terrakotta, Ziegel oder Lachs?
E2 · Lila oder Indigo als einzige Farbe, gern als Verlauf. Ein Neon- Violett auf dunklem oder weißem Grund, Verläufe von Blau über Violett nach Pink. Das bekannteste Zeichen der ersten Welle; die Ursache wird in Tailwinds Vorgabe indigo-500 gesehen. Beleg: Anthropic, 12.11.2025; prg.sh, „Why Your AI Keeps Building the Same Purple Gradient Website“, 26.10.2025; Taste-Brille, „Lila-Regel“. Bindung KI, V. Prüffrage: Ist ohne Zustandsfarben auf dem Schirm nur Violett und Grau zu sehen?
E3 · Farbe ohne Bedeutung. Eine Akzentfarbe auf vielen Flächen zugleich — Knopf, Rahmen, Überschrift, Zeichen, Abzeichen —, sodass sie nichts mehr unterscheidet. Apple verlangt, dass eine Farbe überall dasselbe heißt und sparsam auf die Hauptaktion fällt. Beleg: Apple HIG „Color“ (16.12.2025), „Branding“ (09.09.2026). Bindung KI, V. Prüffrage: Kann man zu jeder Farbe auf dem Schirm in einem Wort sagen, was sie bedeutet — und tragen mehr als eine Fläche je Schirm die Akzentfarbe, ohne Hauptaktion zu sein?
E4 · Leuchten und farbige Schatten. Ein Schatten ohne Versatz in der Akzentfarbe, ein „Glow“ um Knöpfe oder Karten. Beleg: Impeccable, Refuse: Halo ohne Versatz ist Dekoration; Capital & Compute, 25.09.2026; Taste-Brille §9.A. Bindung KI. Prüffrage: Leuchtet etwas in seiner eigenen Farbe, ohne dass Licht in der Szene dafür einen Grund hat?
Schrift
E5 · Eine Grotesk für alles. Inter, Roboto oder die Systemschrift für Überschrift, Text und Zahl; Rangordnung allein über die Größe. Beleg: Anthropic, 12.11.2025; Impeccable-README (pbakaus/impeccable, ohne Datum); Apple HIG „Typography“ (16.12.2025): Rang über Gewicht, Größe und Farbe. Bindung KI. Prüffrage: Unterscheiden sich Überschrift und Text nur in der Größe, nicht im Gewicht oder in der Schrift?
E6 · Die Ersatz-Lieblingsschriften. Sobald Inter verboten ist, greifen Modelle zu Space Grotesk, Geist oder Fraunces; die Taste-Brille verbietet Fraunces und Instrument Serif ausdrücklich als „LLM-Lieblingsserifen“. Beleg: AdrianKrebs/ai-design-checker (Hacker News, 05.05.2026); Taste-Brille §4.1. Ob Anthropics Cookbook „Prompting for frontend aesthetics“ Space Grotesk selbst nennt, ist unsicher (nur Abschriften Dritter gesehen). Bindung KI, zweite Welle. Prüffrage: Ist eine sichtbare Schrift Fraunces, Instrument Serif, Space Grotesk oder Geist — und lässt sich die Wahl nicht aus Denotato begründen?
E7 · Kursive Serifen-Überschrift, ein Wort hervorgehoben. Eine kontrastreiche Serife als Display, oft kursiv, ein einzelnes Wort der Überschrift farbig oder kursiv. Zum Claude-Look gezählt; in Claude Design wirke die Standard-Serife wie Reste der Anthropic-Marke. Beleg: frontend-design/SKILL.md, 03.09.2026; impeccable.style (ohne Datum); rohitg00/awesome-claude-design (ohne Datum, zu Claude Design ab 17.04.2026). Bindung C. Prüffrage: Ist die größte Überschrift eine Serife in Kursiv, oder ist ein einzelnes Wort darin anders gesetzt als der Rest?
E8 · Monospace als Kostüm. Kleine Mono-Labels, gesperrte Versalien, Ziffern in Mono — auch für Messwert und Spalte: Zahlen stehen in Source Sans 3 mit Tabellenziffern (Guide §9, 2026-10-13-eine-eule-runder-mono). Beleg: Impeccable, Refuse; frontend-design/SKILL.md, 03.09.2026. Bindung C, zweite Welle. Prüffrage: Steht Monospace an etwas, das weder Code noch Kennung, Pfad oder Taste ist?
Fläche, Form, Raster
E9 · Glas auf allem. Halbdurchsichtige, unscharfe Flächen auf Karten, Kacheln oder dem Seitengrund. Apple erlaubt Glas nur in der Ebene, die über dem Inhalt schwebt, und nahm selbst die Durchsicht mit iOS 26.1 zurück („Getönt“). Beleg: Apple HIG „Materials“ (09.09.2025); Nielsen Norman Group, Raluca Budiu, „Liquid Glass Is Cracked …“, 10.10.2025; Capital & Compute, 25.09.2026. Bindung KI. Prüffrage: Liegt eine Glas- oder Unschärfefläche auf etwas, das nicht darunter scrollt?
E10 · Gleichförmige Karten. Überall derselbe Radius, derselbe weiche Schatten, Karte in Karte, dazu ein Rand und ein Schatten an derselben Fläche. Beleg: Impeccable, Refuse („Cards in cards“, Geisterkarte); frontend-design/SKILL.md, 03.09.2026. Bindung KI. Prüffrage: Sehen eine Karteikarte, ein Termin und eine Einstellung gleich aus — oder liegt eine Karte in einer Karte?
E11 · Farbstreifen am Kartenrand. Ein farbiger Rand links oder rechts über 1 px an Karten, Zeilen, Hinweisen. Beleg: Impeccable, Refuse („Side-tab“); ai-design-checker („Accent stripe“); awesome-claude-design. Bindung KI, nahe C. Prüffrage: Trägt eine Karte, Zeile oder Meldung einen farbigen Streifen an der Seite, der nur schmückt?
E12 · Drei gleiche Karten mit Zeichen im runden Quadrat. Die Merkmalsreihe aus Tailwind-Lehrbüchern: Symbol in einer gerundeten Kachel, Überschrift, ein Satz, dreimal nebeneinander. Beleg: prg.sh, 26.10.2025; Impeccable-README; Taste-Brille §9.C. Bindung V. Prüffrage: Stehen drei oder mehr gleich gebaute Kacheln nebeneinander, deren Unterschied nur der Text ist?
E13 · Kennzahlen-Leiste. Große Zahl, kleines Label, gern hochzählend; Ring oder Sparkline als Ersatz für Inhalt. Beleg: Impeccable, Refuse („hero-metric template“); frontend-design/SKILL.md, 03.09.2026. Bindung V. Prüffrage: Zeigt der Schirm eine Zahl groß, ohne dass sie zu einer Handlung führt?
E14 · Zentrierter Aufmacher. Pille über der Überschrift („Neu: …“), Verlaufstext, zwei Knöpfe, darunter eine Reihe Logos. Beleg: Capital & Compute, 25.09.2026; ai-design-checker („Headline badge“); impeccable.style. Bindung V, KI. Betrifft vor allem die Startseite. Prüffrage: Steht über der größten Überschrift eine Pille oder ein Etikett, und ist Text in einem Verlauf gefüllt?
E15 · Zeitungs-Imitat und Zierlinien. Haarlinien, Ecken ohne Rundung, dichte Spalten, Linien und Raster als Schmuck — das Ausweichmuster, wenn der Standardlook verboten ist. Beleg: frontend-design/SKILL.md, 03.09.2026; Creeta, 03.08.2026; Impeccable, Refuse (Rasterüberlagerung ohne Leinwand). Bindung C. Prüffrage: Ordnet jede Linie und jedes Raster echten Inhalt — oder steht sie da, damit es „gestaltet“ aussieht?
Zeichen und Beiwerk
E16 · Funkeln als KI-Zeichen. ✨ oder ✦ für „KI“ oder als Schmuck. In einer Befragung deutete keiner von 106 Menschen das Zeichen als KI. Beleg: Fast Company, „How the sparkles emoji took over AI“, 17.02.2024 (Datum laut Wikipedia; Seite gesperrt); The Globe and Mail (ohne Datum). Gegenstimme: UX Collective, „Why I was wrong about sparkles“. Bindung KI als Produktkonvention. Prüffrage: Steht ein Funkel- oder Sternzeichen an etwas, das nichts mit dem Himmel der Sternwarte zu tun hat?
E17 · Emoji und Unicode statt Zeichen. Emoji vor Navigationspunkten, Überschriften, Aufzählungen; ✓ und ✕ als Zeichen. Beleg: ai-design-checker („Emoji nav“); Wikipedia, „Signs of AI writing“, Abschnitt „Emoji as formatting“ (lebende Seite); Impeccable, Refuse; Apple HIG „SF Symbols“ (28.07.2025). Bindung KI. Prüffrage: Ersetzt ein Emoji oder Unicode-Zeichen ein gezeichnetes Zeichen?
E18 · Allerwelts-Strichzeichen. Lucide- oder Feather-Stil: 1,5–2 px Strich, runde Enden, ohne Füllung, als Standard jeder generierten Oberfläche; Strichstärke passt nicht zum Text daneben. Beleg: awesome-claude-design („default Lucide icon stack“); nur schwach belegt. Apple HIG „SF Symbols“ (28.07.2025): Strichstärke folgt dem Schriftgewicht. Bindung V. Prüffrage: Sieht ein Zeichen aus wie aus einer Gratisbibliothek, und ist sein Strich dünner oder dicker als der Text daneben?
E19 · Vorlagen-Beiwerk. Gesperrte Versalien über jeder Überschrift („Eyebrow“), Abschnittsnummern „01 / 02“ ohne echte Abfolge, Ketten mit „·“, ein Pfeil „→“ an jedem Link, bunte Statuspunkte vor jeder Zeile. Beleg: frontend-design/SKILL.md, 03.09.2026; Impeccable, Refuse (Eyebrow als Verbot ohne Ausnahme); Taste-Brille §9.F. Bindung C, zweite Welle. Prüffrage: Steht über einer Überschrift ein Etikett in Versalien, oder ein Punkt vor einer Zeile, der keinen Zustand meldet?
E20 · Chat-Blasen. Die Frage als Blase rechts, die Antwort links, wie in jedem KI-Dienst. Keine Quelle nennt das als KI-Kennzeichen; es steht hier, weil Florian den Begleiter so gemeint hat (N520, N526, ES-261008-begleiter-chat). Prüffrage: Erkennt man am Schirm den Begleiter als „Chat wie ChatGPT“, bevor man die Eule sieht? Stand 10.10.2026: behoben im Begleiter (ES-261008-begleiter-chat): Die Frage steht frei, nur die Eule spricht in einer Sprechblase (Frage.tsx, Sprechblase.tsx). Entschieden ist seither die Frage als Blase am eigenen Profilbild mit Rangrahmen und eine Eule an jeder Antwort (ES-261010-eule-jeder-blase). Das ist kein Treffer: Beide Sprecher haben ein Gesicht, das es nur in Denotato gibt. Mit dem Bau lautet die Prüffrage: Stehen Blasen ohne Eule und ohne Profilbild?
Bewegung
E21 · Dieselbe Bewegung überall. Jeder Abschnitt gleitet von unten ein, Federn mit Nachschwingen an allem, ein Punkt pulsiert, ein Knopf wächst beim Zeigen. Beleg: Capital & Compute, 25.09.2026; Impeccable („Pulsing dot“, Bounce wirke veraltet); Emil-Brille: Was hundertmal am Tag geschieht, bewegt sich nicht; Apple HIG „Motion“ (09.09.2025): Bewegung nur mit Zweck. Bindung KI. Prüffrage (Filmstreifen): Bewegt sich im Ruhezustand etwas, oder bewegt sich etwas, das man dutzendfach am Tag auslöst?
Text
E22 · Werbesprache und leere Sätze. „Entdecke …“, „Mühelos …“, „Bring dein Lernen aufs nächste Level“, Knöpfe ohne Verb, erfundene Zahlen, ein Satz unter der Überschrift, der sie wiederholt. Beleg: impeccable.style; 925Studios; Capital & Compute, 25.09.2026; Apple HIG „Writing“ (16.12.2025): Knöpfe tragen ein Verb, nicht zu niedlich. Für einzelne Wörter wie seamless fand sich keine Untersuchung. Bindung KI, V. Im Repository: Grundsatz 75, verify:briefing, Prüfkatalog K09. Prüffrage: Gibt es einen Satz, der nur ankündigt, begeistert oder die Überschrift wiederholt?
3. Was wir von TradingView sehen
Angesehen, nicht kopiert: Startseite, Chartseite und Preisseite sowie das ausgelieferte CSS von static.tradingview.com, ausgezählt am 08.10.2026. Ein öffentliches UI-Kit gibt es nicht; das System ist intern. Die Marke stammt von Pentagram (Logo angekündigt 21.07.2021, TradingView- Blog; Pentagram-Fallstudie ohne Datum). Keine Farbe, kein Wert und kein Zeichen von dort kommt ins Theme (README der Bahn); hier stehen nur die Prinzipien.
Was TradingView tut:
- Zwei Ebenen von Farbe. Eine Rohpalette, darüber Namen nach Bedeutung (Marke, aktiv, Fokus, steigt, fällt, Trennlinie). Die Signalfarben haben je Thema eine eigene Helligkeitsstufe: im Hellen dunkler, im Dunkeln heller — nachgeführt, nicht nur getauscht.
- Farbe nur für Bedeutung. Ein einziges Handlungsblau für Marke, Aktives und Fokus; Grün und Rot nur für Steigen und Fallen; alles andere ist unbunt. Die Neutralen sind völlig farblos, ohne Blau- oder Lilastich.
- Dunkel als Treppe. Je höher eine Fläche liegt, desto heller ist sie; Schatten sind selten und klein. Der Text ist ein gedämpftes Hellgrau, kein Weiß.
- Haarlinien vor Flächen. Rahmen sind fast immer 1 px; gegliedert wird mit Linien und leicht abgesetzten Grauflächen, nicht mit Karten und Schatten.
- Kleine Ecken in der Arbeit, weiche in der Werbung. In der Anwendung sind 3–4 px die Regel; nur die Werbeseiten runden auf 16 px und mehr.
- Ziffern fester Breite überall. Tabellenziffern in Versalhöhe stehen im CSS rund 430-mal; Zahlen stehen immer bündig.
- Systemschrift für die Arbeit, eine Display-Schrift nur für die Werbung. Die Anwendung setzt 12–14 px mit engen Zeilen (Faktor ≈ 1,3); die eigene geometrische Grotesk erscheint fast nur auf Werbeseiten.
- Zeichen erben die Textfarbe, liegen auf zwei festen Rastern und haben eine einheitliche Wandstärke; gezeichnet als Fläche, nicht als Strich.
- Rückmeldung sofort, Bewegung kaum. Hover und Druck antworten unter 100 ms; Übergänge mit Ease-out,
prefers-reduced-motionwird beachtet. Federn mit Überschwingen nur im Marketing. - Eine Marke mit Haltung, kein Allerweltsstil. Das Logo ist ein Monogramm mit Bedeutung („erst schauen, dann springen“); die Fotos der Werbung zeigen Extremsport statt abstrakter Verläufe.
Was davon zu einer Lern-App passt:
- Farbe nach Bedeutung in zwei Ebenen, Signalfarben je Szene in der Helligkeit nachgeführt — Denotatos Zustands- und Bereichsfarben (Guide §3) sind so gedacht; der Befund prüft, ob das Violett darüber hinaus Fläche füllt.
- Dunkel als Helligkeitstreppe mit gedämpftem Text; ob Denotatos Indigo-Nacht kühl bleibt oder neutraler wird, ist eine Frage für den Musterbogen.
- Tabellenziffern an jeder Zahl (Guide §9 sagt es; der Befund prüft es).
- Haarlinien vor Schatten, kleine Ecken in Verwaltungslisten.
- Zeichen in Textfarbe, ein Raster, eine Wandstärke.
- Sofortige Rückmeldung, keine Bewegung an Häufigem (deckt sich mit Emil).
Was nicht passt:
- Die Händlerdichte. 14 px mit 1,3 Zeilenfaktor ist zum Überfliegen, nicht zum Lesen. Denotatos Lesefläche (Guide §9.1) bleibt bei 65 Zeichen und weitem Zeilenabstand; dicht sein dürfen nur Verwaltungslisten (Kartenstapel, Statistik,
/admin). - Reines Schwarz als Grund: hart beim langen Lesen.
- Die Systemschrift als Lesetypografie: eine Notlösung für Kurse, keine für Dokumente.
- Farbe als einziger Unterscheider. TradingView verlässt sich auf Rot und Grün; für Lernzustände trägt zusätzlich Form oder Zeichen (Farbsehschwäche, Apple „Charts“).
- Fotodramatik und riesige Display-Schrift — das passt zu „springen“, nicht zu ruhigem Lernen.
4. Was wir von Apple sehen
Gelesen live in den Human Interface Guidelines (N362), abgerufen 08.10.2026; das Datum ist das der Seite.
- Farbe ist eine Zusage. Dieselbe Farbe bedeutet überall dasselbe; die Akzentfarbe fällt sparsam auf die Hauptaktion; die Marke tritt hinter den Inhalt („Color“, 16.12.2025; „Branding“, 09.09.2026). Für Denotato heißt das: Die Bereichsfarbe (Guide §3.1) ist schon so gedacht; zu prüfen ist, ob das Violett nicht an zu vielen Stellen zugleich steht.
- Feste Farbe je Bedeutung, nie als Schmuck. Die Fitness-Ringe haben je eine Farbe, die nie verändert wird; Zahl und Beschriftung zum Ring tragen dieselbe Farbe („Activity rings“, 29.03.2024). Für Denotato: ein Ton je Kartenzustand (neu, lernen, fällig, sicher), gleich in Zahl, Balken und Abzeichen.
- Rang über Gewicht, nicht nur über Größe. Wenige Schriften, Regular bis Bold, keine leichten Schnitte, feste Textstile („Typography“, 16.12.2025). Ziffern fester Breite richten Zahlen aus (SwiftUI
monospacedDigit()); dass Fitness große, fette, gerundete Ziffern setzt, ist eigene Beobachtung ohne Quelle. - Glas nur über dem Inhalt. Apple schreibt, Liquid Glass gehöre nicht in die Inhaltsebene; die stärker getrübte Fassung sei für textreiche Flächen („Materials“, 09.09.2025). Die Kritik der Nielsen Norman Group (10.10.2025) und die Einstellung „Getönt“ in iOS 26.1 (nur Fachpresse, November 2025) zeigen, dass selbst Apple Durchsicht zurücknahm. Für eine Lern- und Leseanwendung: deckend als Vorgabe. Guide §5 und §19 sagen das schon; der Befund prüft, ob es gehalten wird.
- Zeichen passen zum Text. Die Strichstärke eines Symbols folgt dem Schriftgewicht daneben; Umriss neben Text, gefüllt für „ausgewählt“ („SF Symbols“, 28.07.2025).
- Bewegung mit Zweck, abschaltbar, nie einziger Träger einer Auskunft („Motion“, 09.09.2025). Deckt sich mit Guide §11 und
bewegung.stufe. - Kurz, handelnd, nicht niedlich. Jedes Wort muss nötig sein; ein Knopf trägt ein Verb; leere Schirme nennen den nächsten Schritt („Writing“, 16.12.2025).
- Ebenen an der Helligkeit. Im Dunkeln wird eine höhere Ebene etwas heller, nicht schattiger („Dark mode“, 06.08.2024); Bedienung und Inhalt sind sichtbar getrennt („Layout“, 09.09.2026).
- Diagramme sagen ihre Aussage in Worten und bleiben in Graustufen lesbar; Farbe wird von Form begleitet („Charts“, 23.09.2022).
- Erinnerungen: Jede Liste hat eine Farbe aus einer kleinen festen Palette und ein Zeichen aus einem festen Satz (idownloadblog, 04.08.2020) — dieselbe Idee wie Denotatos Bereichsfarben und Fachfarben.
Was nicht passt: Apples Grundsatz, die eigene Marke fast unsichtbar zu machen, steht gegen „die Anwendung wohnt in der Welt ihres Logos“ (Guide §1.3). Denotato lernt von Apple die Disziplin — eine Farbe, eine Bedeutung —, nicht die Zurückhaltung der Marke.
5. Was die Brillen dazu sagen
| Brille | Was sie zu denselben Fragen sagt |
|---|---|
Impeccable (craft-floor.md, Refuse) | Gleiche Karten mit Symbol, Überschrift, Satz als Seitengerüst; Kennzahl-Vorlage; Etikett über der Überschrift (ausnahmslos verboten); Verlaufstext; Glas als Dekoration; Farbstreifen über 1 px an Karten; Mono als Kostüm; Emoji oder Unicode statt Zeichen; Hell oder Dunkel nach Gattung statt nach Ort und Licht. Dazu: Browser-Flächen (Auswahl, Fokusring, Rollbalken, Ziffern) aus der eigenen Palette — das billigste Zeichen, dass etwas gebaut und nicht zusammengesetzt ist. |
Taste (design-taste-frontend, §4, §9) | Lila-Regel; Fraunces und Instrument Serif als Vorgabe verboten; Serife nicht für Bedienflächen; Creme-und-Messing als Vorgabe-Palette verboten; drei gleiche Merkmalskarten verboten; Werbeverben („Elevate“, „Seamless“) verboten; kein reines Schwarz. |
Emil (emil-design-eng) | Erst fragen, wie oft man eine Bewegung sieht: hundertmal am Tag gar nicht, dutzendfach kaum. Jede Bewegung braucht einen Grund (Raum, Zustand, Erklärung, Rückmeldung). Nichts erscheint aus scale(0). |
Wo die Brillen dem Guide widersprechen, gilt der Guide (N527); der Widerspruch ist dann ein Befund, kein Auftrag.
6. Erste Hinweise für den Befund
Schon beim Lesen von Guide und Theme fallen Treffer auf. Sie sind kein Befund — der prüft am Bildschirmfoto (ES-261008-befund) —, aber sie sagen, wo er zuerst hinsehen sollte:
| Merkmal | Stelle | Was dort steht |
|---|---|---|
| E6, E7 | theme.ts fontFamily, Guide §9 | Fraunces für Überschriften und Aufmacher im Register „Lesen“ |
| E1 | Guide §3.4, Tag-Szene | Warm-Rosé #f7eee9 als Grund — nah an Creme |
| E2 | Guide §3.1 | Violett #a631ff / #8b23e0 als einzige Anwendungsfarbe |
| E2, E4 | theme.ts Zeile ≈601 | glow: linear-gradient(90deg, #4d9bff, #a631ff, #ff5470) |
| E20 | N520, N526 | Begleiter-Chat mit Frage als Blase |
Die Sternwarte, die Eule, die Edelsteine und der Freie Kranz stehen nicht zur Wahl (Christian, 08.10.2026). Gefragt wird, wie sie getragen werden: ob ein Merkmal oben aus ihnen begründet ist oder nur aus der Gewohnheit.
7. Befund
Lauf .blick/20261008-233411-befund vom 09.10.2026: alle 39 Wege aus /ansehen --routen, Telefon und Desktop, hell und dunkel, mit Saat und Verwaltungsrecht. Fünf sichtpruefer haben die Bilder gegen den Style-Guide und E1–E22 gelesen, je eine Gruppe von Wegen; eine Code-Durchsicht hat dieselben Merkmale im Quelltext gezählt. Bewegung (E21) ist auf Standbildern nicht prüfbar und steht nur aus dem Code im Befund.
Ursachen
Gebündelt wird nach Ursache, nicht nach Schirm. Die Nummern stehen unten in der Spalte „Ursache“.
| Nr. | Ursache | Vorgang |
|---|---|---|
| 1 | Seitenkopf: Versalien-Etikett und Anzeigeserife im Vorspann | ES-261009-seitenkopf-ohne |
| 2 | Tagesgrund: Rosé und grauer Wolkenschleier im Hellen | ES-261009-tagesgrund-ohne-rose |
| 3 | Akzentfarbe ohne feste Rolle | ES-261009-akzentfarbe-fester |
| 4 | Schein, Glanz und Dauerbewegung (Verlaufsknopf, Logo, Fokus-Halo) | ES-261009-schein-glanz |
| 5 | Alte Anmeldeschirme der ersten Welle | ES-261009-alte-anmeldeschirme (erledigt am 10.10.2026) |
| 6 | Glas auf Flächen, die nicht schweben | ES-261009-glas-nur-schwebendem |
| 7 | Karte für alles: Rand und Schatten, Karte in Karte, Kachel-Raster | ES-261009-listen-flaechen-statt |
| 8 | Kennzahlen ohne Handlung | ES-261009-kennzahlen-nur |
| 9 | Farbige Seitenstreifen an Zeilen | ES-261009-farbige-seitenstreifen |
| 10 | Textzeichen und Emoji statt gezeichneter Zeichen | ES-261009-gezeichnete-zeichen |
| 11 | Oberflächentexte, die begründen oder ankündigen | ES-261009-oberflaechentexte-ohne |
Zwei Ursachen hatten schon einen Vorgang: die Chat-Blase im Begleiter (E20, Frageblase.tsx, auf dem Bild hinter der Einwilligung verborgen) in ES-261008-begleiter-chat, die Farbliterale außerhalb des Themes und die Lücke in verify:arch in ES-261008-pruefglied. Ursachen 1, 2, 3 und 7 hängen an der Wahl in ES-261008-richtung.
Je Weg
Bild: Datei im Lauf, ohne .png.
| Weg | Treffer | Ursache | Bild | Was zu sehen ist |
|---|---|---|---|---|
| start | E1, E2, E10, E12, E22 | 2, 3, 4, 7, 11 | start--desktop-hell | vier gleiche Kacheln im Raster, violetter Verlaufsknopf, Ankündigungssätze |
| login | E2, E3, E4, E9 | 5 | login--desktop-hell | Glaskarte auf Blau-Violett-Pink-Himmel, hell gleich dunkel |
| register | E2, E3, E9 | 5 | register--telefon-hell | wie login; Karte ragt über den Berg, Kleinschrift 3,4–4 : 1 |
| forgotpw | E2 | 4 | forgotpw--desktop-hell | gesperrter Knopf blassviolett auf hell |
| resetpw | E2 | 4 | resetpw--telefon-dunkel | nur der Verlaufsknopf |
| mailbestaetigen | E2 | 4 | bogen--mailbestaetigen--desktop | nur der Verlaufsknopf |
| post-abbestellen | E2 | 4 | post-abbestellen--desktop-hell | nur der Verlaufsknopf |
| imprint | E1, E10, E17 | 2, 7, 10 | imprint--desktop-hell | Papierkarte auf Rosé, ⚠ als Textzeichen |
| privacy | E1, E10, E17 | 2, 7, 10 | privacy--desktop-hell | wie imprint |
| terms | E1, E10 | 2, 7 | bogen--terms--mobil | Papierkarte auf grauem Verlauf |
| dashboard | E1, E2, E6, E7, E8, E10, E13, E22 | 1, 2, 3, 7, 8, 11 | dashboard--desktop-hell | Fraunces-Gruß, Kurve ohne Handlung, Stimmungssatz, Karte in Karte |
| documents | E3, E10, E19, E22 | 1, 3, 7, 11 | documents--desktop-hell | „ARCHIV“-Etikett, gerahmte Kartenreihe, Dublette ohne Zusammenhang |
| geteilt | E1, E19 | 1, 2 | geteilt--desktop-hell | Leerzustand passt; Grund und Schleier |
| papierkorb | E3, E4, E10 | 3, 4, 7 | papierkorb--desktop-hell | Zurückholen und Löschen im selben glänzenden Knopf |
| wiki | E3, E10, E22 | 3, 7, 11 | wiki--desktop-hell | Leersatz doppelt, getönte Seitenleiste als Karte |
| wiki-pfade | E3, E19, E22 | 1, 3, 11 | wiki-pfade--desktop-hell | zwei Leersätze widersprechen sich |
| material | E3, E10, E18, E19 | 1, 3, 7 | material--desktop-dunkel | Reiter-Zeichen in Regenbogen-Rahmen, drei Kartenstile |
| latex | E8, E10, E19 | 1, 7 | latex--desktop-hell | jede Befehlszeile eine Rahmenkarte |
| latex-snippets | E3, E10, E19 | 1, 3, 7 | latex-snippets--desktop-dunkel | Kartenstapel aus Zeilen |
| latex-texte | E3, E19 | 1, 3 | latex-texte--desktop-hell | Etikett, kaum abgesetzte Reiter |
| flashcards | E1, E3, E8, E10, E12, E13, E19 | 1, 2, 3, 7, 8 | flashcards--desktop-hell | fünf Kennzahl-Kacheln, Kartenkopf in Versalien |
| study | E1, E3, E8, E19 | 1, 2, 3 | study--desktop-hell | Blau, Beere und Orange nebeneinander |
| noten | E1, E19 | 1, 2 | noten--desktop-hell | Leerzustand passt; Etikett und Grund |
| stundenplan | E3, E8, E10, E19 | 1, 3, 7 | stundenplan--desktop-dunkel | Wochentage in Monospace, Termin als Karte, Heute als dritte Farbe |
| tutor | E3, E4, E10, E11, E19 | 1, 3, 7 | tutor--desktop-hell | drei gleiche Karten, Beere als Rand, Knopf und Ring |
| moodle | E1, E19 | 1, 2 | moodle--desktop-dunkel | Leerzustand passt; Etikett und Grund |
| game | E1, E3, E10, E13, E19 | 1, 2, 3, 7, 8 | game--desktop-hell | „0 XP über 0 Skills“, leerer „Wie es läuft“-Block |
| calendar | E3, E9, E10, E12, E17, E19 | 1, 3, 6, 7, 10 | calendar--desktop-hell | Magenta-Rahmen mit drei Karten darin, ⚠ und ‹ › |
| ereignisse | E6, E9 | 1, 6 | ereignisse--desktop-hell | glasige Filterbox, sonst Haarlinien |
| tasks | E3, E6, E11, E19 | 1, 3, 9 | tasks--desktop-hell | Goldstreifen an jeder Zeile |
| life | E3, E6, E19 | 1, 3 | life--desktop-hell | ruhige Tabelle; Etikett, Versalien-Köpfe |
| memories | E6, E19, E22 | 1, 11 | memories--desktop-hell | Leerzustand erklärt statt einzuladen |
| people | E3, E6, E19 | 1, 3 | people--desktop-hell | Versalien-Köpfe, Spalten nur aus „–“ |
| begleiter | E3, E10, E12, E19, E22 | 1, 3, 7, 11 | begleiter--desktop-hell | Vorschlagskarten als Stapel, Begründungssätze; E20 im Code (Frageblase), auf dem Bild nicht |
| settings | E1, E3, E7, E10, E19 | 1, 2, 3, 7 | settings--desktop-hell | fünf gleiche Akkordeonkarten, Etiketten |
| profil | E3, E4, E9, E10 | 3, 4, 6, 7 | profil--desktop-hell | Glaskarten auf Himmel, glänzendes Admin-Abzeichen 2,42 : 1 |
| admin | E3, E10, E13, E15, E19, E22 | 1, 3, 7, 8, 11 | admin--desktop-hell | Kennzahlenleiste, Karte in Karte, rohe Meldung |
| stil | E2, E3, E19, E22 | 1, 3, 11 | stil--desktop-hell | Entwicklersatz, rohe Kennungen, Szene fest auf Nacht |
| stil-bewegung | E3, E10, E12, E19, E22 | 1, 3, 7, 11 | stil-bewegung--desktop-hell | sechs gleiche Karten, Punkte ohne Bedeutung |
Nicht getroffen hat der Lauf: Funkelzeichen als Schmuck (E16; die Sterne und der Stern am Eulenhut gehören zur Sternwarte), Verlaufstext (E14), Ausrufezeichen und Werbeverben. Nebenbei sichtbar, aber kein Eigenstil: der Toast verdeckt Zeilen in tasks und tutor, „Lea Schmidt“ bricht in people in drei Zeilen um (eine Zeile in docs/vorhaben/EINGANG.md).
Maschinenzählung
Grundlage für ES-261008-pruefglied. Stand 09.10.2026.
Gemeinsamer Rumpf (Wurzel des Repositories). $1 ist das Muster, weitere Argumente sind zusätzliche --glob-Filter:
Z() { rg -nP --glob '*.{ts,tsx,css}' --glob '!*.test.*' --glob '!*.d.ts' \
--glob '!**/nachweis/**' "${@:2}" \
"^(?!\s*(\*|//|/\*)).*(?:$1)" packages/frontend/src packages/plugins/src; }
# Zahl: Z '<Muster>' [--glob ...] | wc -l Fundstellen: ohne wc -l| Nr. | Muster | E | Aufruf (ohne | wc -l) | Zeilen |
|---|---|---|---|---|
| P01 | Hex-Farbliterale außerhalb theme/ | Guide §1.5 | Z '#[0-9a-fA-F]{6}\b|#[0-9a-fA-F]{3}\b' --glob '!**/theme/**' | 130 (62 Altanmeldung, 39 mit farbe-ausnahme, 29 offen) |
| P02 | rgb(a)/hsl(a) außerhalb theme/ | Guide §1.5 | Z 'rgba?\(|hsla?\(' --glob '!**/theme/**' | 102 (83 Altanmeldung) |
| P03 | Verläufe außerhalb theme/ | E2, E14, E15 | Z '(?:repeating-)?(?:linear|radial|conic)-gradient' --glob '!**/theme/**' | 45 |
| P03b | Verläufe in theme/ (gedeckt: Szenen, Metalle) | E2 | dasselbe ohne den theme-Filter | 82 |
| P04 | backdrop-filter mit Wert | E9 | Z 'backdrop-filter:\s*(?!none)' | 25 (davon 2 im Werkstoff glas, 1 Textbeleg) |
| P05 | Halo ohne Versatz (0 0 Npx) | E4 | Z '(?:drop-shadow\(|box-shadow:\s*)0 0 \d+px' --glob '!**/theme/**' | 21 |
| P06 | Emoji-Codepunkte (ohne server/, mcp/) | E16, E17 | Z '[\x{1F300}-\x{1FAFF}\x{2600}-\x{27BF}\x{2B50}]' --glob '!**/mcp/**' --glob '!**/server/**' | 101; seit 10.10.2026 99, nur Wahllisten (gedeckt) |
| P07 | Funkel-/Sternzeichen | E16 | Z '✨|✦|✧|★|☆|🌟|⭐' (ohne server/, mcp/) | 3 (alle ⭐ in Wahllisten) |
| P08 | Farbstreifen an der Seite, ab 2 px | E11 | Z 'border-(?:left|right|inline-start)(?:-width)?\s*:\s*(?:[2-9]px|\$\{)|box-shadow:\s*inset\s+-?[2-9]px\s+0\s+0' | 57 (11 neutral oder transparent) |
| P09 | Versalien (alle 61 mit letter-spacing im Umkreis von 6 Zeilen) | E19 | Z 'text-transform:\s*uppercase' | 61 |
| P10 | Wachsen beim Zeigen | E21 | Z 'transform:\s*scale\(1\.[0-9]+\)|scale:\s*1\.0[1-9]' | 6 |
| P11 | Dauerschleife | E21 | Z 'infinite' | 12 (11 im Himmel) |
| P12 | Anwendungsfarbe (Violett) im Quelltext | E2, E3 | Z 'colors\??\.alternative\b' | 450 in 190 Dateien |
| P13 | Violett-Verlauf als Fläche | E2 | Z 'gradients\??\.(?:primary|glow)' | 7 |
| P14 | Monospace in Komponenten | E8 | Z 'fontFamily\.mono' --glob '!**/theme/**' | 112 in 80 Dateien |
| P15 | Fraunces, Roboto, Space Grotesk, Instrument Serif, Inter, Geist | E5, E6 | Z "Fraunces|Space Grotesk|Instrument Serif|\bInter\b|Roboto|Geist\b" | 7 (2 Deklarationen Fraunces, 2 Roboto-Rückfall, 3 Text) |
| P16 | Frageblase (Chat-Blase) | E20 | Z 'Frageblase' | 10 |
| P17 | Verlauf als Textfüllung | E14 | Z 'background-clip:\s*text' | 2 (nur Stilguide-Muster) |
| P18 | Pfeile und Zeichen im Text statt gezeichnet | E17 | Z '[→←↗↺⇄▾▸✓✗✕]' --glob '!**/mcp/**' --glob '!**/server/**' --glob '!**/rechtstexte.ts' | 14 (Tastenkappen in Tastenhilfe gedeckt); seit 10.10.2026 0 |
| P19 | Ionicons-Strichsymbole (Altanmeldung) | E18 | Z 'IonIcon' | 16 (seit 10.10.2026: 0) |
| P20 | Rand und Schatten an einer Styled-Komponente | E10 | Python-Skript (siehe Fußnote), nicht mit rg allein | 22 Kandidaten |
Zusatzzählungen: fontFamily.display (Fraunces) in 18 Zeilen außerhalb theme/; ${glas} (Werkstoff mit backdrop-filter) in 18 Stellen.
Fußnote P20: eine Styled-Komponente (= styled… bis zum schließenden Backtick) hat border: mit Ziffer und box-shadow: mit shadows.(sm|md|lg). Mit rg -U ließe es sich nachbauen; die Mehrzahl der 22 sind schwebende Flächen (erlaubt), siehe Ursache 7.
Stand 10.10.2026 (ES-261009-listen-flaechen-statt): Das Skript fand 18 statt 22; nach dem Vorgang findet es 0. Im Lesesaal trägt eine Fläche Rand oder Schatten, nie beides — auch eine schwebende trägt die Haarlinie und keinen Schatten; offen ist nur der Werkstoff glas selbst (ES-261009-glas-nur-schwebendem). Der Werkstoff karton hat keinen Schatten mehr, Listen stehen als Zeilen mit Haarlinien (components/formen/Liste.tsx).
Stand 10.10.2026 (ES-261009-glas-nur-schwebendem): Auch glas trägt nur noch die Haarlinie und seine Kanten nach innen, keinen Schatten. P04 steht bei 11 statt 25, alle 11 in den Altanmeldedateien (ES-261009-alte-anmeldeschirme); Eingabefeld und Auswahl sind Papier mit Haarlinie. ${glas} steht an 24 Stellen in 23 Dateien, und jede davon schwebt: verify:eigenstil hält sie als Liste SCHWEBEND und meldet Glas in jeder anderen Datei (Muster glasflaeche). Der Bearbeitungsbalken war die eine Fläche im Fluss; er ist Stein.
Stand 10.10.2026 (ES-261009-alte-anmeldeschirme): Die alten Anmeldeschirme liegen in archiv/2026-10-10-legacy-anmeldung/; Anmelden und Registrieren sind in components/menus/auth/ neu gebaut, aus dem Theme gezeichnet, mit Zeichen aus dem eigenen Satz. P04 steht damit bei 0 außerhalb des Werkstoffs glas, P05, P10 und P19 bei 0. In verify:eigenstil sinken Halo von 10 auf 0, Wachsen von 3 auf 0 und Glasfilter von 11 auf 0, dazu Farbe von 179 auf 34, Verlauf von 46 auf 39 und Streifen von 57 auf 55. ${glas} kam an zwei schwebenden Stellen hinzu (die Datumsauswahl über dem Schleier und die Passwortregeln am Feld), beide in der Liste SCHWEBEND. Die Ausnahmen für das Altanmeldeverzeichnis in verify:arch und verify:sprache sind gestrichen.
Stand 10.10.2026 (ES-261009-farbige-seitenstreifen): Keine Karte, keine Zeile, kein Hinweis und keine Meldung trägt mehr einen farbigen Streifen an der Seite. Den Zustand tragen ein Zeichen, eine Pille, die Textfarbe oder das Gewicht: In den Aufgaben drängt das Datum (Gewicht 500 und Bereichsfarbe ab drei Tagen, fett ab 24 Stunden, rot und mit rotem Kreis, wenn überfällig), in der Verwaltung sitzt der Zustand im Ring, in den Listen der Kalendereinrichtung steht die Farbe der Kategorie als Tupfen vor dem Namen, an Karteikarten und Board-Karten als Reiter an der Oberkante. In verify:eigenstil sinkt streifen (P08) von 53 auf 0. Gedeckt sind nur zwei Fälle, beide im Prüfglied begründet: neutrale Einrückungslinien (2px solid oder dashed in neutral.rand, über ohne) und die Termine im Kalenderraster (Monatsblatt, Stundenraster, Wochenraster des Stundenplans, über die Liste KALENDER), wo die Farbe Daten ist und der Termin selbst die Fläche. Ein Zitat-Streifen im Blocksatz, den der Vorgang als gedeckt nannte, gab es nicht; die beiden Stellen dort (Hinweis und Karte) tragen jetzt Rand und Zeichen beziehungsweise den Reiter. verify:statustoene verlangte bis dahin den vier Pixel breiten Zustandsrand der Meldung; es verbietet ihn jetzt, und den Zustand der Meldung zeigen Zeichen und Zeitbalken.
Stand 10.10.2026 (ES-261009-gezeichnete-zeichen): Bedienzeichen kommen aus dem eigenen Zeichensatz, nicht aus der Schrift. Die Blätterknöpfe im Kalender, im Datumsfeld und im Quellenleser zeichnen zurueck und weiter, der Lesepfad ebenso, die Präambel im LaTeX-Editor klappt mit ausklappen, und die Lernrichtung liefert aus shared/ einen Zeichennamen statt einer Glyphe im Wort. Menüwege im Fließtext trennt der Winkel ›, die Regelzeile im Kalender ist ein Satz („kommt in“). Die Zählung P18 sinkt von 14 auf 0, P06 von 101 auf 99; was bleibt, sind die Emoji-Wahllisten (Skills, Interessen, Symbolwähler) und die Beispiele im Stilguide, die zeigen, wie die Wahl des Nutzers allein steht. Kein Zeichen musste neu gezeichnet werden. In verify:eigenstil prüft das Muster glyphe jetzt auch den Winkel allein auf einem Knopf, und das neue Muster emoji (P06) deckt nur die Wahllisten in WAHLLISTEN; beide Bestände stehen auf 0.
Abdeckung heute: verify:arch liest Hex-Literale nur in components/ und plugins/*/client/, keine .css, nicht config/, nicht plugin.ts, und gar keine rgb(). Daher standen P01/P02 bis zum 10.10.2026 in den Altanmeldedateien (ausdrücklich ausgenommen) und stehen die 19 rgb() in TopLogoBar.module.css, Profilbild.tsx, Rangabzeichen.tsx, Bildzuschnitt.tsx unbemerkt. Seit dem 09.10.2026 schließt verify:eigenstil diese Lücke: Es liest Farbliterale samt rgb() auch in .css, config/ und plugin.ts (P01, P02) und hält mit P03–P08, P10, P11, P17 und P18 den heutigen Bestand in einer Liste, die nur sinkt.