Nothing-inspiriertes UI/UX-Designsystem
Ein Toolkit für Senior Product Designer, geschult in Schweizer Typografie, Industriedesign (Braun, Teenage Engineering) und moderner Interface-Gestaltung. Monochromatisch, typografisch getrieben, informationsdicht ohne Überladung. Dark- und Light-Modus mit gleicher Sorgfalt.
Bevor Sie mit Designarbeiten beginnen, geben Sie an, welche Google Fonts benötigt werden und wie sie geladen werden (siehe references/tokens.md Abschnitt 1). Gehen Sie niemals davon aus, dass Schriftarten bereits verfügbar sind.
1. DESIGNPHILOSOPHIE
- Subtrahieren, nicht hinzufügen. Jedes Element muss seinen Pixel verdienen. Standardmäßig entfernen.
- Struktur ist Ornament. Machen Sie das Raster, die Daten, die Hierarchie selbst sichtbar.
- Monochrom ist die Leinwand. Farbe ist ein Ereignis, kein Standard – außer wenn sie den Datenstatus kodiert (siehe Abschnitt 3).
- Die Schrift trägt die Hauptlast. Skalierung, Gewicht und Abstand schaffen Hierarchie – nicht Farbe, nicht Symbole, nicht Rahmen.
- Beide Modi sind erstklassig. Dark-Modus: OLED-Schwarz. Light-Modus: warmes Off-White. Keiner ist „abgeleitet“ – beide erhalten volle Design-Aufmerksamkeit. Fragen Sie den Benutzer, mit welchem Modus begonnen werden soll.
- Industrielle Wärme. Technisch und präzise, aber niemals kalt. Eine menschliche Hand sollte spürbar sein.
2. HANDWERKSREGELN – WIE MAN KOMPONIERT
2.1 Visuelle Hierarchie: Die Drei-Ebenen-Regel
Jeder Bildschirm hat genau drei Bedeutungsebenen. Nicht zwei, nicht fünf. Drei.
| Ebene | Was | Wie |
|---|---|---|
| Primär | Das EINE, was der Benutzer zuerst sieht. Eine Zahl, eine Überschrift, ein Zustand. | Doto oder Space Grotesk in Display-Größe. --text-display. 48–96px Spielraum. |
| Sekundär | Unterstützender Kontext. Labels, Beschreibungen, zugehörige Daten. | Space Grotesk in Text-/Unterüberschrift-Größe. --text-primary. Eng gruppiert (8–16px) zur primären Ebene. |
| Tertiär | Metadaten, Navigation, Systeminfo. Sichtbar, aber niemals konkurrierend. | Space Mono in Bildunterschrift/Label-Größe. --text-secondary oder --text-disabled. GROSSBUCHSTABEN. An den Rand oder nach unten verschoben. |
Der Test: Blinzeln Sie auf den Bildschirm. Können Sie immer noch erkennen, was am wichtigsten ist? Wenn zwei Dinge konkurrieren, muss eines schrumpfen, verblassen oder verschoben werden.
Häufiger Fehler: Alles zur „sekundären“ Ebene machen. Gleichmäßig große Elemente mit gleichem Abstand = visuelle Eintönigkeit. Seien Sie mutig – machen Sie das Primäre absurd groß und das Tertiäre absurd klein. Der Kontrast IST die Hierarchie.
2.2 Schriftdisziplin
Pro Bildschirm maximal:
- 2 Schriftfamilien (Space Grotesk + Space Mono. Doto nur für Helden-Momente.)
- 3 Schriftgrößen (eine große, eine mittlere, eine kleine)
- 2 Schriftgewichte (Regular + eines – normalerweise Light oder Medium, selten Bold)
Betrachten Sie es als Budget. Jede zusätzliche Größe/jeder zusätzliche Strich kostet visuelle Kohärenz. Bevor Sie eine neue Größe hinzufügen, fragen Sie sich: Kann ich diesen Unterschied stattdessen mit Abstand oder Farbe erzeugen?
| Entscheidung | Größe | Gewicht | Farbe |
|---|---|---|---|
| Überschrift vs. Textkörper | Ja | Nein | Nein |
| Label vs. Wert | Nein | Nein | Ja |
| Aktiv vs. inaktiv (Navigation) | Nein | Nein | Ja |
| Heldenzahl vs. Einheit | Ja | Nein | Nein |
| Abschnittstitel vs. Inhalt | Ja | Optional | Nein |
Faustregel: Wenn Sie zu einer neuen Schriftgröße greifen, ist es wahrscheinlich ein Abstandsproblem. Fügen Sie stattdessen Abstand hinzu.
2.3 Abstand als Bedeutung
Abstand ist das primäre Werkzeug, um Beziehungen zu kommunizieren.
Eng (4–8px) = „Diese gehören zusammen“ (Symbol + Label, Zahl + Einheit)
Mittel (16px) = „Gleiche Gruppe, verschiedene Elemente“ (Listenelemente, Formularfelder)
Groß (32–48px) = „Neue Gruppe beginnt hier“ (Abschnittsumbrüche)
Sehr groß (64–96px) = „Dies ist ein neuer Kontext“ (Held zu Inhalt, Hauptunterteilungen)
Wenn eine Trennlinie benötigt wird, stimmt der Abstand wahrscheinlich nicht. Trennlinien sind ein Symptom für unzureichenden Abstandskontrast. Verwenden Sie sie nur in datendichten Listen, in denen Elemente strukturell identisch sind.
2.4 Containerstrategie (oben bevorzugen)
- Nur Abstand (Nähe gruppiert Elemente)
- Eine einzelne Trennlinie
- Eine subtile Randumrandung
- Eine Oberflächenkarte mit Hintergrundwechsel
Jeder Schritt nach unten fügt visuelles Gewicht hinzu. Verwenden Sie das leichteste Werkzeug, das funktioniert. Rahmung Sie das wichtigste Element niemals ein – lassen Sie es auf dem Hintergrund schweben.
2.5 Farbe als Hierarchie
In einem monochromen System IST die Grauskala die Hierarchie. Maximal 4 Stufen pro Bildschirm:
--text-display (100%) → Heldenzahlen. Eine pro Bildschirm.
--text-primary (90%) → Textkörper, primärer Inhalt.
--text-secondary (60%) → Labels, Bildunterschriften, Metadaten.
--text-disabled (40%) → Deaktiviertes, Zeitstempel, Hinweise.
Rot (#D71921) ist nicht Teil der Hierarchie. Es ist eine Unterbrechung – „schau HIER, JETZT.“ Wenn nichts dringend ist, ist kein Rot auf dem Bildschirm.
Datenstatusfarben (Erfolg-Grün, Warnung-Gelb, Akzent-Rot) sind von der „ein Akzent“-Regel ausgenommen, wenn sie Datenwerte kodieren. Wenden Sie die Farbe auf den Wert selbst an, nicht auf Labels oder Zeilenhintergründe. Siehe references/tokens.md für das vollständige Farbsystem.
2.6 Konsistenz vs. Abweichung
Seien Sie konsistent in: Schriftfamilien, Label-Behandlung (immer Space Mono GROSSBUCHSTABEN), Abstandsrhythmus, Farbrollen, Komponentenformen, Ausrichtung.
Brechen Sie das Muster an genau EINER Stelle pro Bildschirm: Eine übergroße Zahl, ein kreisförmiges Widget zwischen Rechtecken, ein roter Akzent zwischen Grautönen, eine Doto-Überschrift, eine riesige Lücke, wo alles andere eng ist.
Dieser einzelne Bruch IST das Design. Ohne ihn: sterile Matrix. Mit mehr als einem: visuelles Chaos.
2.7 Kompositorisches Gleichgewicht
Asymmetrie > Symmetrie. Zentrierte Layouts wirken generisch. Bevorzugen Sie bewusst unausgeglichene Kompositionen:
- Groß links, klein rechts: Heldenmetrik + Metadatenstapel.
- Oben schwer: Große Überschrift oben, spärlicher Inhalt darunter.
- Randverankert: Wichtige Elemente an Bildschirmrändern, negativer Raum in der Mitte.
Gleichen Sie schwere Elemente mit mehr leerem Raum aus, nicht mit mehr schweren Elementen.
2.8 Der Nothing-Vibe
- Selbstvertrauen durch Leere. Große ununterbrochene Hintergrundbereiche. Widerstehen Sie dem Drang, Raum zu füllen.
- Präzision in den kleinen Dingen. Zeichenabstand, genaue Grauwerte, 4px-Lücken. Mikroentscheidungen summieren sich zu handwerklichem Können.
- Daten als Schönheit.
36GB/sin Space Mono bei 48px IST die Visualisierung. Keine Illustrationen nötig. - Mechanische Ehrlichkeit. Steuerelemente sehen aus wie Steuerelemente. Ein Schalter = physischer Schalter. Ein Messgerät = Instrument.
- Ein Moment der Überraschung. Eine Dot-Matrix-Überschrift. Ein kreisförmiges Widget. Ein roter Punkt. Zurückhaltung macht den einen ausdrucksstarken Moment kraftvoll.
- Percussiv, nicht fließend. Stellen Sie sich UI-Sounds vor: Klick nicht Schwung, Tick nicht Klingel. Gestalten Sie Übergänge, die mechanisch und präzise wirken.
2.9 Visuelle Abwechslung in datendichten Bildschirmen
Wenn 3+ Datenabschnitte auf einem Bildschirm erscheinen, variieren Sie die visuelle Form:
| Form | Am besten geeignet für | Gewicht |
|---|---|---|
| Heldenzahl (großes Doto/Space Mono) | Einzelne Schlüsselkennzahl | Schwer – einmal verwenden |
| Segmentierter Fortschrittsbalken | Fortschritt in Richtung Ziel | Mittel |
| Konzentrische Ringe / Bögen | Mehrere verwandte Prozentsätze | Mittel |
| Kompakter Inline-Balken | Sekundäre Metriken in Zeilen | Leicht |
| Nur Zahl mit Statusfarbe | Werte ohne Anteil | Am leichtesten |
| Sparkline | Trends im Zeitverlauf | Mittel |
| Stat-Zeile (Label + Wert) | Einfache Datenpunkte | Leicht |
Führender Abschnitt → schwerste Behandlung. Sekundär → andere Form. Tertiär → am leichtesten. Die FORM variiert, die STIMME bleibt gleich.
3. ANTI-PATTERNS – WAS NIEMALS GETAN WERDEN SOLLTE
- Keine Farbverläufe in der UI-Oberfläche
- Keine Schatten. Kein Weichzeichnen. Flache Oberflächen, Rahmenabgrenzung.
- Keine Skeleton-Loading-Bildschirme. Verwenden Sie
[LOADING...]-Text oder segmentierten Spinner. - Keine Toast-Popups. Verwenden Sie Inline-Statustext:
[GESPEICHERT],[FEHLER: ...] - Keine Traurig-Gesicht-Illustrationen, niedliche Maskottchen oder mehrteilige Leerzustände
- Kein Zebrastreifenmuster in Tabellen
- Keine gefüllten Symbole, mehrfarbige Symbole oder Emojis als UI
- Kein Parallax-Effekt, Scroll-Jacking oder unnötige Animation
- Kein Spring/Bounce-Easing. Verwenden Sie nur subtiles Ease-Out.
- Kein border-radius > 16px bei Karten. Buttons sind Pill (999px) oder technisch (4–8px).
- Datenvisualisierung: Unterscheiden Sie mit Deckkraft (100%/60%/30%) oder Muster (durchgehend/gestreift/gepunktet), bevor Sie Farbe einführen.
4. WORKFLOW
- Schriftarten deklarieren – teilen Sie dem Benutzer mit, welche Google Fonts geladen werden sollen (siehe
references/tokens.md) - Modus erfragen – dunkel oder hell? Keiner ist Standard.
- Hierarchie skizzieren – identifizieren Sie die 3 Ebenen, bevor Sie Code schreiben
- Komponieren – Handwerksregeln anwenden (Abschnitte 2.1–2.9)
- Tokens prüfen – konsultieren Sie
references/tokens.mdfür genaue Werte - Komponenten bauen – konsultieren Sie
references/components.mdfür Muster - An Plattform anpassen – konsultieren Sie
references/platform-mapping.mdfür Ausgabekonventionen
5. REFERENZDATEIEN
Für detaillierte Token-Werte, Komponentenspezifikationen und plattformspezifische Anleitungen:
references/tokens.md– Schriftarten, Schriftgrößenskala, Farbsystem (dunkel + hell), Abstandsskala, Raster, Bewegung, Ikonografie, Dot-Matrix-Motivreferences/components.md– Karten, Buttons, Eingaben, Listen, Tabellen, Navigation, Tags, segmentierte Steuerelemente, Fortschrittsbalken, Diagramme, Widgets, Overlays, Zustandsmusterreferences/platform-mapping.md– HTML/CSS, SwiftUI, React/Tailwind, Papier-Ausgabekonventionen