Die Galaxie
ORBIT II · KONSTELLATION

Brand & Surface

Marke und Oberfläche

Was man sieht und wie es klingt. Radikaler Minimalismus, Typografie, Studio-Stimme und Übersetzung, die den Sinn bewahrt. Der ästhetische Anspruch von XNLAB auf alles angewendet.

Versorgt XNLABAlle Projekte
5 Module · 5 Lektionen
MODULE DER KONSTELLATION Öffne jedes Modul für die ganze Lektion
BS-01

Radikaler Minimalismus

Lektion

Eine echte Bildschirmansicht auditieren und ein Before/After abliefern, bei dem jedes entfernte Element durch eine Entscheidung begründet ist – nicht durch Geschmack.

Der radikale Minimalismus von XNLAB ist keine Ästhetik: Er ist eine Entscheidungsmethode. Die meisten Operatoren glauben, eine Oberfläche zu «entrümpeln» bedeute, Deckkraft zu senken und Luft hinzuzufügen. In Wirklichkeit ist es das Gegenteil: Jedes Element, das überlebt, muss sich seinen Platz verdienen, indem es eine konkrete Frage beantwortet (Was macht die Person hier? Welche Entscheidung trifft sie?). Chirurgie, nicht Dekoration. Ohne eine explizite Methode entartet «minimalistisch» zu «leer und beliebig» – und das ist schlimmer als überladen: Es wirkt schlampig. Das Gegenmittel ist ein Audit mit schriftlichem Kriterium, bei dem Entfernen eine verteidigbare und reversible Handlung ist, kein Impuls.

DIE LEKTION

Radikaler Minimalismus ist eine Methode des Entfernens, kein visueller Stil. Standardmässig wird entfernt; Hinzufügen ist die Ausnahme, die die Beweislast trägt.

Jedes Element einer Bildschirmansicht muss eine Frage beantworten, die sich die Person in diesem Moment stellt. Beantwortet es keine, ist es Rauschen – auch wenn es schön aussieht.

Ein Before/After ohne schriftliche Begründung ist eine Meinung. Mit Begründung ist es ein Audit: vor der Kundschaft verteidigbar, von jemand anderem wiederholbar, reversibel, falls die Daten ihm widersprechen.

Beliebige Leere (Deckkraft senken, grundlos Luft einbauen) liest sich als Nachlässigkeit, nicht als Raffinesse. Schlecht gemachter Minimalismus wirkt wie eine kaputte Seite.

Die XNLAB-Regel ist konservativ, aber nicht dogmatisch: Der Standard ist die chirurgische Bearbeitung, revidierbar mit Conversion-Daten – kein moralisches Gesetz.

ÜBUNG

Nimm eine bereits existierende, dichte Bildschirmansicht (eine Landing, ein Dashboard, ein Formular; die von MOONKEY selbst taugt). Halte den aktuellen Zustand als «Before» fest. Liste jedes sichtbare Element in einer Tabelle auf. Beantworte für jedes in einer Zeile: Welcher Entscheidung der Person dient es hier und jetzt? Markiere alles als Entfernungskandidat, das keine beantwortet. Wende die Schnitte an und halte das «After» fest. Schreibe neben jede Entfernung den Grund (redundant / dient keiner Entscheidung / in eine andere Ansicht verschiebbar / dekorativ ohne Funktion). Prüfe, dass kein Schnitt eine Aufgabe zerstört hat, die die Person tatsächlich abschliessen muss.

ERGEBNIS

Ein Before/After-Audit einer echten Bildschirmansicht: die beiden Captures, die Element-Tabelle mit der jeweiligen Nutzerfrage und die Liste der Entfernungen mit ihrer schriftlichen Begründung – je eine Zeile. Reversibel: Jede Person kann nachlesen, warum etwas entfernt wurde, und es rückgängig machen, falls ein Datum dem widerspricht.

KERNEINSICHT

Entfernen ist die am schwersten zu verteidigende Entscheidung, weil sie keine Spur hinterlässt; deshalb muss man den Grund vor dem Löschen aufschreiben, nicht danach. Das Audit verwandelt Minimalismus von Meinung in Methode.

ZU VERMEIDENDE FEHLER

  • ×Minimalismus mit Deckkraft-Senken und Luft-Einbauen verwechseln: Das ist beliebige Leere, keine Chirurgie. Das Ergebnis wirkt schlampig, nicht hochwertig.
  • ×Elemente entfernen, die tatsächlich eine Aufgabe der Person tragen, und so den Ablauf zerstören – aus Jagd nach visueller Sauberkeit.
  • ×Den Grund jedes Schnitts nicht dokumentieren: Ohne schriftliche Begründung ist das Audit irreversibel und vor der Kundschaft nicht verteidigbar.
  • ×Die Regel als unumstössliches moralisches Gesetz behandeln statt als mit Conversion-Daten revidierbaren Standard.
BS-02

Typografie mit Absicht

Lektion

Ein Paar Headlines bauen, die Inter Sans mit Italic-Serif-Spans (Cormorant) mischen, ohne dass das Auge den Sprung bemerkt – und die Grössenkorrektur dokumentieren, die das funktionieren lässt.

Eine Sans (Inter) mit einer Italic-Serif (Cormorant) innerhalb derselben Headline zu mischen, ist eine der typografischen Gesten mit dem höchsten Ertrag und den meisten Fallen. Die konkrete, bei XNLAB verifizierte Falle: Die Italic-Serif hat eine geringere x-height, also wirkt sie bei gleicher font-size optisch kleiner und die Headline wirkt kaputt, als würde die Kursive einsinken. Der Operator, der die Korrektur nicht kennt, lässt es so und das Ergebnis knirscht, ohne dass er weiss warum. Die Korrektur ist nicht theoretisch: Sie ist ein expliziter font-size-Bump im Italic-Span (~1.18–1.2em), um die wahrgenommene Höhe anzugleichen. Das zu wissen ist der Unterschied zwischen Typografie mit Absicht und zwei Schriften, die sich streiten.

DIE LEKTION

Die nominale font-size ist nicht die wahrgenommene Grösse. Was das Auge misst, ist die x-height, und die Italic-Serif hat sie tiefer als die Sans – also wirkt sie bei gleichem px kleiner.

Der verifizierte Wert für Inter + Cormorant kursiv ist ein fontSize-Bump auf 1.18-1.2em im Serif-Span. Er ist nicht optional: Ohne ihn liest sich die Headline kaputt.

Die Italic-Serif wird für ein Wort oder eine Phrase mit semantischem Gewicht innerhalb einer Sans-Headline eingesetzt, nicht zur zufälligen Dekoration. Der Kontrast muss etwas markieren, nicht bloss schön aussehen.

Typografische Absicht beweist man: der korrigierte Span und der unkorrigierte Span nebeneinander machen das Problem sichtbar und die Lösung unbestreitbar.

ÜBUNG

Schreibe zwei XNLAB-Headlines, bei denen ein Schlüsselwort in Italic-Serif innerhalb von Sans-Text steht (z. B. ein Substantiv, das den Sinn trägt). Rendere jede zweimal: einmal mit dem Italic-Span auf gleicher font-size wie die Sans, einmal mit fontSize:'1.18em' im Span. Vergleiche die beiden Versionen nebeneinander und bestätige mit dem Auge (nicht mit der Zahl), welche die wahrgenommene Höhe angleicht. Notiere den exakten Wert, der für dein Schriftpaar passt. Bleibt der Sprung sichtbar, geh Richtung 1.2em und prüfe erneut.

ERGEBNIS

Ein funktionierendes Paar Italic-Mix-Headlines, jede begleitet von ihrem Vergleich «unkorrigiert / korrigiert», der das x-height-Problem sichtbar macht, plus die exakte CSS-Zeile (fontSize:'1.18em' oder der passende Wert), dokumentiert als wiederverwendbare Entscheidung.

KERNEINSICHT

Typografie mit Absicht merkt man gerade dann, wenn man sie nicht merkt: Wenn die lesende Person den Sprung zwischen Sans und Serif wahrnimmt, hast du versagt. Die x-height-Korrektur ist gut gemacht unsichtbar und schlecht gemacht offensichtlich.

ZU VERMEIDENDE FEHLER

  • ×Annehmen, gleiche font-size bedeute gleiche visuelle Grösse: Das ignoriert die x-height und lässt die Headline in der Kursiven einsinken.
  • ×Die Italic-Serif als Dekoration ohne semantisches Gewicht verwenden: Der typografische Kontrast muss etwas signalisieren, nicht füllen.
  • ×Den Wert über die Zahl (1.18em) statt über das Auge verifizieren: Der exakte Wert hängt vom Schriftpaar und von der Grösse ab; man muss ihn anschauen.
  • ×Den Bump global statt auf den konkreten Span anwenden und so den Rest der Hierarchie zerstören.
BS-03

Studio-Stimme

Lektion

Ein Copy-Deck für eine echte Seite (Hero + drei Sektionen) in anonymer Studio-Stimme schreiben, das den Test «Wahrheit oder Marketing?» besteht: Jeder Satz ist entweder überprüfbar oder er wird gelöscht.

Die Stimme von XNLAB ist bewusst anonym: Studio, nie Person. Es gibt keinen namentlichen Gründer, keine Bio, kein Foto, kein «ich glaube». Das klingt einfach und ist das Schwierigste: Ohne ein Ich, an das man appellieren kann, bleibt als einzige Autorität die Präzision. Der typische Fehler des Operators ist, die Leere mit Dunst zu füllen – «wir transformieren dein Business», «aussergewöhnliche Ergebnisse», «Leidenschaft fürs Detail» – Sätze, die nichts Überprüfbares aussagen. Die Studio-Stimme stützt sich auf das Gegenteil: Aussagen, die entweder nachweisbar wahr sind oder gar nicht geschrieben werden. Der rechtliche Status von XNLAB verlangt es wörtlich: keine NIF, Adresse oder Registerdaten erfinden; was nicht registriert ist, als nicht registriert markieren. Das Copy-Deck ist das Artefakt, in dem diese Disziplin testbar wird.

DIE LEKTION

Die Studio-Stimme ist anonym: nie erste Person Singular, nie Gründername, nie Bio. Die Autorität kommt aus der Präzision, nicht daher, wer spricht.

Der Test «Wahrheit oder Marketing?»: Jeder Satz wird etikettiert. Ist er überprüfbar, bleibt er. Ist er ein leeres Versprechen oder ein ungestütztes Adjektiv, wird er gelöscht oder in eine Tatsache umgeschrieben.

Leere Versprechen («wir transformieren», «aussergewöhnlich», «führend») sind Rauschen, das die Glaubwürdigkeit von allem rundherum senkt – auch von dem, was tatsächlich wahr ist.

Rechtliche Ehrlichkeit ist Teil der Stimme: keine Entitätsdaten erfinden. Nichtregistriertes wird als nichtregistriert markiert; der Zyklus wird beschrieben, wie er ist («Open.»), nicht wie es passt.

Anonym heisst nicht kalt. Die Stimme ist direkt und konkret – die Wärme kommt aus der Strenge und davon, über echte Dinge zu sprechen, nicht aus persönlichen Geständnissen.

ÜBUNG

Wähle eine Seite (Home oder /contact). Schreibe den Hero und drei Sektionen in Studio-Stimme. Schick danach jeden Satz durch den Test: In eine Spalte fügst du den Satz, in eine andere schreibst du «Wahrheit» (und wie sie sich überprüfen lässt) oder «Marketing» (und warum es Dunst ist). Jeder als «Marketing» markierte Satz wird als überprüfbare Tatsache umgeschrieben oder entfernt. Prüfe, dass sich kein «ich», kein Eigenname, kein erfundenes Entitätsdatum eingeschlichen hat. Bestätige, dass der Status des Zyklus beschrieben wird, wie er wirklich ist, nicht wie er sich besser verkaufen würde.

ERGEBNIS

Ein Copy-Deck einer echten Seite (Hero + 3 Sektionen) mit seiner Test-Tabelle «Wahrheit oder Marketing?» daneben: jeder finale Satz als überprüfbare Wahrheit klassifiziert, ohne ein einziges überlebendes leeres Versprechen und ohne erfundene Entitätsdaten. Bereit zum Einfügen in die Seite.

KERNEINSICHT

Das «ich» zu entfernen zwingt jeden einzelnen Satz, den Beweis zu tragen, nicht die Person; deshalb ist die anonyme Stimme der schärfste Dunst-Detektor, den es gibt. Wenn eine Aussage einen Namen dahinter braucht, um zu tragen, war sie keine Wahrheit: Sie war Marketing.

ZU VERMEIDENDE FEHLER

  • ×Das Fehlen eines Gründers mit Superlativen («aussergewöhnlich», «führend», «transformativ») füllen statt mit überprüfbaren Tatsachen.
  • ×Erste Person oder einen Eigennamen einschleusen und die Anonymität des Studios brechen.
  • ×Entitätsdaten (NIF, Adresse, Register) erfinden, um etabliert zu wirken: Das verletzt den realen rechtlichen Status und fliegt auf.
  • ×Anonym mit kalt verwechseln und ein lebloses Copy schreiben: Die Wärme kommt aus der Strenge und dem Konkreten, nicht aus einem Ich.
  • ×Den Zyklus beschreiben, wie es kommerziell passt («ein Platz bleibt»), statt wie er ist («Open.»).
BS-04

Übersetzen mit Sinn-Erhalt

Lektion

Ein EN/ES-Paar eines Copy-Blocks produzieren, bei dem das Spanische dasselbe sagt wie das Englische – nicht das Wörtliche – und die Notizen zu jeder Sinnentscheidung abliefern.

XNLAB-Copy zu übersetzen heisst nicht, Wörter zu ersetzen: Es heisst, Bedeutung über zwei Sprachen mit unterschiedlichen Grammatiken zu bewahren. Der dokumentierte, wiederkehrende Fehler ist das lexikalische Spiegeln: «Not X» als «Sin X» übersetzen, wenn das Englische einen Vergleich (keine Abwesenheit) markierte und das Spanische ihn in etwas anderes verwandelt. Dasselbe beim Wechsel vom englischen Passiv ins spanische Reflexiv, oder bei Modifikatoren und Verben, die wegfallen, ohne dass es jemand bemerkt. Jeder dieser Ausrutscher verschiebt den Sinn um einen Grad, und drei Grade später sagt die spanische Seite etwas, das das Englische nie gesagt hat. Die einzige Verteidigung ist, jede Zeile auf Spanisch wie ein Muttersprachler zu lesen – nicht wie ein Übersetzer – und zu prüfen, dass die Aussage dieselbe ist, nicht dass die Wörter übereinstimmen.

DIE LEKTION

Übersetzen heisst, den Sinn zu bewahren, nicht das Lexikon zu spiegeln. Die richtige Frage ist nicht «existiert dieses Wort auf Spanisch?», sondern «behauptet dieser Satz dasselbe?».

«Not X» → «Sin X» ist die Paradefalle: Abwesenheit vs. Vergleich. Das Englische kontrastiert manchmal, und «Sin X» verwandelt das in einen Mangel, den das Original nicht aussagte.

Das englische Passiv, das ins spanische Reflexiv wechselt, kann verändern, wer die Handlung ausführt, und die implizite Verantwortung. Man muss den Akteur prüfen, nicht nur die Form.

Modifikatoren und Verben fallen in der Übersetzung wortlos weg. Ein verlorenes Adjektiv oder ein abgeflachtes Verb senkt die Temperatur oder verändert die Wucht der Aussage.

Die Qualitätskontrolle besteht darin, jede ES-Zeile wie ein Muttersprachler zu lesen, nicht Wort für Wort gegen das EN zu vergleichen. Klingt es nach Übersetzung, ist es Übersetzung; klingt es nach Original, ist es richtig.

ÜBUNG

Nimm einen echten EN-Block (Hero oder Sektion mit geladenen Aussagen). Übersetze ins Spanische und priorisiere den Sinn. Auditiere dann Zeile für Zeile: Ist ein «Not X» zu einem «Sin X» geworden und hat Vergleich durch Abwesenheit ersetzt? Ist ein Passiv ins Reflexiv gewechselt und hat den Akteur verschoben? Ist ein Modifikator oder Verb weggefallen? Notiere für jeden Fund die Entscheidung: Was sagte das Englische, was sagte dein erster Entwurf, was hast du gesetzt und warum bewahrt es den Sinn. Lies die finale spanische Version laut wie ein Muttersprachler und bestätige, dass sie genau dasselbe behauptet wie das Englische.

ERGEBNIS

Ein EN/ES-Paar eines echten Blocks mit seinen Übersetzungsnotizen: für jede Risikozeile (Not X / Passiv-Reflexiv / weggefallener Modifikator) die dokumentierte Entscheidung, wie der Sinn bewahrt wurde. Das ES besteht die Muttersprachler-Lesung, ohne nach Übersetzung zu riechen.

KERNEINSICHT

Eine Wort-für-Wort korrekte Übersetzung kann Satz für Satz eine Lüge sein; das lexikalische Spiegeln ist der schnellste Weg, etwas zu sagen, das das Original nie behauptet hat. Den Sinn zu bewahren verlangt manchmal, sich von den Wörtern zu entfernen.

ZU VERMEIDENDE FEHLER

  • ×Lexikalisches Spiegeln: «Not X» → «Sin X» und damit einen Vergleich in eine Abwesenheit verwandeln, die das Englische nicht aussprach.
  • ×Zulassen, dass das englische Passiv zum spanischen Reflexiv wird und den Akteur oder die implizite Verantwortung verschiebt.
  • ×Modifikatoren oder Verben beim Übertragen verlieren und die Wucht der Aussage unbemerkt abflachen.
  • ×Per Wort-für-Wort-Vergleich gegen das EN verifizieren statt das ES wie ein Muttersprachler zu lesen: Das lexikalische Spiegeln besteht diesen Test und lügt trotzdem.
BS-05

Farbe und Tiefe

Lektion

Ein System aus Farbe und Tiefe (Glass, Bänder, Farbfelder) als Satz wiederverwendbarer Regeln und Tokens dokumentieren, mit Mustern, die beweisen, dass es Leben gibt, ohne Rauschen einzubringen.

Farbe und Tiefe sind der Ort, an dem eine minimalistische Oberfläche Leben gewinnt oder zerbricht. Glass, Farbbänder und Hintergrundfelder können eine flache Seite atmen lassen – oder sie in einen Jahrmarkt verwandeln, der dem radikalen Minimalismus aus BS-01 widerspricht. Der Unterschied zwischen den beiden Ergebnissen ist kein Geschmack: Es ist ein System. Ohne schriftliche Regeln (wann Glass, welche Intensität, welche Feldtiefe, was animiert wird und was nicht) improvisiert jede Bildschirmansicht und das Ganze verliert Kohärenz. Es gibt zudem eine bei XNLAB dokumentierte Verifikationsfalle: Hintergrund-Animationen pausieren, wenn der Tab nicht aktiv ist, also lügt ein Deckkraft-Read; animierte Tiefe wird mit visuellem Capture verifiziert, nicht durch Auslesen von Werten. Das Liefergut ist das schriftliche System: Tokens, Regeln und Muster, die jede Person anwenden kann, ohne es neu zu erfinden.

DIE LEKTION

Farbe und Tiefe geben nur innerhalb eines Systems Leben. Glass, Bänder und Felder ohne Regeln entarten zu Rauschen, das dem Minimalismus widerspricht.

Das System wird als Tokens und Regeln geschrieben: wann Glass eingesetzt wird, welche Intensität, welche Feldtiefe, was sich bewegt und was still bleibt. Wiederverwendbar, nicht pro Bildschirmansicht improvisiert.

Niemals dynamische Farbklassen interpolieren (bg-${theme}): Das zerstört Tailwinds JIT. Themes werden als explizite Einträge in der THEME-Map deklariert.

Hintergrund-Animationen pausieren im inaktiven Tab: Ein Deckkraft-Read gibt einen falschen Wert. Animierte Tiefe wird per Screenshot verifiziert, nicht durch Auslesen des DOM.

Das Kriterium lautet «Leben ohne Rauschen»: Wenn ein Farbfeld oder ein Glass keine Hierarchie oder kein Atmen beiträgt, ist es überflüssig. Tiefe dient dem Lesen, sie stellt sich nicht zur Schau.

ÜBUNG

Inventarisiere die Tiefe-Ressourcen, die die Oberfläche bereits nutzt (Glass, Bänder, Blobs, Hintergrundfelder). Schreibe für jede die Regel: wann sie eingesetzt wird, mit welcher Intensität, welcher Hierarchie sie dient, ob sie animiert wird oder nicht. Verwandle sie in benannte Tokens. Rendere ein Muster mit angewandtem System und eines ohne, nebeneinander, um zu beweisen, dass die Version mit System Leben gibt, ohne das Rauschen zu erhöhen. Verifiziere jede animierte Ebene per Screenshot im aktiven Tab, nicht durch Auslesen der Deckkraft (die mit Tab im Hintergrund lügt). Bestätige, dass keine Farbe in einer dynamischen Klasse interpoliert wird.

ERGEBNIS

Ein dokumentiertes System aus Farbe und Tiefe: benannte Tokens + Einsatzregeln (wann / welche Intensität / was animiert wird) + ein Musterpaar mit-System / ohne-System, das «Leben ohne Rauschen» beweist, per visuellem Capture verifiziert. Von jeder Bildschirmansicht wiederverwendbar, ohne das Kriterium neu zu erfinden.

KERNEINSICHT

Gut gemachte Tiefe fühlt sich wie Luft an und schlecht gemachte wie Rauschen, und die einzige Art, im Massstab auf der richtigen Seite zu bleiben, ist ein schriftliches System, kein guter Geschmack pro Bildschirmansicht. Und vertrau nie einem Deckkraft-Read: Der schlafende Tab wird dich anlügen.

ZU VERMEIDENDE FEHLER

  • ×Glass, Bänder und Felder Bildschirm für Bildschirm ohne Regeln improvisieren: Das Ganze verliert Kohärenz und der Minimalismus zerbricht.
  • ×Dynamische Farbklassen interpolieren (bg-${theme}) und Tailwinds JIT zerstören, sodass Stile zurückbleiben, die nicht kompilieren.
  • ×Animierte Tiefe durch Auslesen der Deckkraft im DOM verifizieren: Die Animation pausiert im inaktiven Tab und der gelesene Wert lügt. Man muss einen Screenshot machen.
  • ×Farbfelder oder Glass einbauen, die weder Hierarchie noch Atmen beitragen: Dekoration, die das Rauschen erhöht und «Leben ohne Rauschen» verrät.

Nächste Konstellation

Ops & Security

Die Disziplin