← standby.design

Design Rules

Übersicht über das qualitative Regelwerk für Layout und Bedienung. Eine Notiz pro Regel, hier die Tabelle mit Geltungsbereich und Einzeiler.

Für Agenten: alle Regeln in einer Datei als Markdown.

Wie eine Regel aufgebaut ist

Jede Notiz folgt demselben Schnitt:

Regel — ein Satz, Imperativ, ohne Einschränkung
Warum — der Grund, aus dem sich die Regel im Zweifel selbst herleiten lässt
Woran Du den Verstoß erkennst — das Merkmal, nach dem im Code gesucht werden kann
Richtig / falsch — Wireframe oder Minimalbeispiel
Grenzen — wann die Regel nicht greift

Das Warum ist kein Beiwerk. Ohne Grund baut ein Agent die Regel weg, sobald sie im konkreten Fall unbequem wird.

Hart und weich

Manche Regeln enthalten eine Zahl. Die Zahl ist fast nie das Allgemeingültige daran, sie ist eine Frage der Handschrift. Solche Regeln trennen deshalb zwei Dinge:

Hart ist die Invariante: dass es überhaupt genau einen Wert gibt, dass er als Token steht, und in welchem Korridor er liegen darf.
Weich ist die Zahl im Korridor. Dafür nennt die Regel einen Vorgabewert, der gilt, solange das Projekt nichts anderes festlegt.

So bleibt die Sammlung ohne Marken-Richtlinie benutzbar: ein Agent hat immer etwas Konkretes zur Hand, und eine Marke kann es überschreiben, ohne die Regel zu brechen. Im Frontmatter stehen dafür korridor und default.

Die drei Geltungsbereiche

`scope`	Bedeutung
`universal`	Gilt in jedem Projekt, unabhängig von Marke und Technik
`stack`	Gilt innerhalb einer Technik (Web, React Native), aber projektübergreifend
`project`	Bleibt im Repo. Steht nicht hier

Dazu sagt applies-to, für welche Techniken eine Regel gedacht ist. Damit lässt sich die Sammlung später gefiltert exportieren: ein Agent bekommt genau die Regeln, die zu seinem Projekt passen, statt aller.

Layout

Regel	Scope	Kern
Die Karte hat kein Padding	universal	Padding im Abschnitt, nicht in der Karte. Nur so darf ein Bild randlos laufen
Der Divider ist die Unterkante einer Section	universal	Die Linie ist keine Komponente, sondern eine Kante. Der letzte Abschnitt hat keine
Nähe gruppiert, nicht die Linie	universal	Abstand gruppiert. Die Linie kommt erst, wenn der Abstand nicht mehr trägt
Weniger Kanten, ruhigere Ansicht	universal	Ausrichtungskanten zählen und zusammenlegen. Nicht linksbündig mit zentriert mischen
Jede Ansicht bricht bei 320 Pixeln um	universal	WCAG Reflow: umbrechen ohne waagerechtes Scrollen. Betrifft vor allem Zoom, nicht Telefone

Fluss

Regel	Scope	Kern
Ein Pop-up unterbricht, es führt nicht	universal	Mehr als eine Eingabe oder mehr als ein Hinweis: dann ein eigener Screen
Leer ist ein Zustand, keine Lücke	universal	Drei Sorten leer, drei Antworten. Eine unbeschriebene Fläche ist keine
Der Platz ist da, bevor die Daten kommen	universal	Nichts springt. Unter 200ms gar kein Ladehinweis
Ein Fehler steht dort, wo er entstanden ist	universal	Am Feld, nicht im Pop-up. Sagt was zu tun ist. Eingaben bleiben

Form

Regel	Scope	Kern
Konzentrische Radien	universal	`r_innen = r_außen − Abstand`
Senkrechtes Padding wird optisch ausgeglichen	universal	14 senkrecht gegen 16 waagerecht, damit es gleich aussieht

Fläche

Regel	Scope	Kern
Die Ebene folgt der Rolle, nicht der Schachtelung	universal	Geschlossene Menge, Ebene folgt der Rolle. Vorgabe drei
Eine Linie trennt, sie schmückt nicht	universal	Erst Abstand, dann Fläche, dann Linie. Und wenn Linie, dann die leise

Bedienung

Regel	Scope	Kern
Verhalten und Aussehen bleiben getrennt	universal	Fünf Verhaltensarten, Aussehen austauschbar. Das Wörterbuch sagt, welche Kombination wofür
Verhalten und Aussehen werden nicht in der Ansicht nachgebaut	universal	Die Ansicht benutzt vorhandene Elemente. Sie definiert Verhalten und Aussehen nicht neu
Klickbares braucht eine Fläche	universal	Kein nackter Textlink. Dezent geht über Farbe, nicht über kleinere Fläche
Die Höhe gehört der Zeile, nicht dem Element	universal	Alles in einer Zeile gleich hoch. Der Kontext sagt welche Höhe, nicht das Bauteil
Kurze Zustände verschieben, dauerhafte wechseln die Palette	universal	Hover eine Stufe heller, Gedrückt eine dunkler, in beiden Modi gleich. „An" wechselt die Palette
Ein dauerhafter Zustand braucht ein zweites Zeichen	universal	Farbe allein ist für farbenblinde Nutzer unsichtbar
Fokus ist immer sichtbar	universal	Nie ersatzlos entfernt, überall gleich gebaut, verschiebt kein Layout
Übergänge haben genau einen Wert	universal	Eine Dauer im ganzen Projekt, Korridor 100-200ms, Vorgabe 150. Reduzierte Bewegung: sofort

Zustand

Regel	Scope	Kern
Dieselbe Zahl bedeutet überall dasselbe	universal	Eine Übersetzung fürs ganze Produkt. Fehlt der Wert, bleibt es grau
Rot ist nicht ein Rot	universal	Ein Wert kann nicht Text und Fläche zugleich sein. Der Untergrund entscheidet

Typografie

Regel	Scope	Kern
Betone mit einem Mittel, nicht mit zweien	universal	Größe oder Gewicht, nie beides. Die große Zahl läuft normal
Zahlenspalten stehen rechtsbündig	universal	Größenordnung wird an der Länge lesbar
Icons sind auf die Schrift abgestimmt	universal	Wie ein Schriftzeichen behandeln. Abstand optisch je Icon, nicht ein fester gap

Farbe und Tokens

Regel	Scope	Kern
Werte kommen aus Tokens, nie aus der Hand	universal	Kein Hex, keine Pixelzahl in der Ansicht. Dazu: was Material ist
Hell und Dunkel sind zwei Entwürfe, keine Umkehrung	universal	Beide Erscheinungen einzeln festgelegt und einzeln geprüft. Der Nutzer entscheidet

Stack

Regel	Scope	Kern
Utility-Klassen statt Inline-Styles	stack	Inline-Style ist der Ausstieg aus dem System
Abstand über gap, nicht über Margins am Kind	stack	Der Abstand gehört dem Container
Keine Deckkraft-Modifier auf semantischen Farben	stack	Kein `bg-primary/10`. Benannte Stufen, Hover heller, Gedrückt dunkler

Daneben, keine Regel

Body, Role und Skin ist die persönliche Haltung: Cellular Design, die Wörter Body, Role und Skin, die Abgrenzung zu Atomic Design. Sie ist keine Regel dieser Sammlung. Die Notizen hier gelten auch ohne sie.

Was bewusst NICHT hier steht

Diese Dinge bleiben im jeweiligen Projekt, weil sie eine Marke oder ein bestimmtes Produkt beschreiben:

Stilrichtung und Stimmung — die Formsprache, das Lichtverhalten, die Liste der Stile, die man vermeiden will. Das ist die Handschrift eines Produkts, keine Regel für alle
Marke und Schreibweise — Produktname, Schreibweise, Wortmarke
Konkrete Werte — Farbwerte, Schriftfamilien, Breakpoint-Zahlen, Pfade zu Token-Dateien
Fachliche Schwellen — wo die Grenze zwischen gut, mittel und schlecht liegt. Die Regel „Schwellen kommen aus einer Quelle" ist allgemeingültig, die Zahlen sind es nicht
Sprache der Oberfläche — welche Sprache, geduzt oder gesiezt
Altlasten und Migration — offene Fundstellen, Umbaupläne, Zwischenstände

Wichtig ist die Richtung: eine Regel darf ihren Grund nennen und ein typisches Muster beschreiben, aber sie nennt kein Projekt, keine Person, keine Datei und keinen Zählstand. Was nur in einem Projekt wahr ist, gehört nicht in die Sammlung.