← 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. Die Begründungen hinter den Werkzeugen stehen unter Research.

Wie die Regeln im Code geprüft werden, steht unter standby.design/docs/lint.


Wie eine Regel aufgebaut ist

Jede Notiz folgt demselben Schnitt:

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:

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
Weniger Kanten, ruhigere Ansicht universal Ausrichtungskanten zählen und zusammenlegen. Nicht linksbündig mit zentriert mischen
Die Titel bilden eine Gliederung universal Titel als Inhaltsverzeichnis. Titelstufe 1 einmal, nichts doppelt, jede Titelstufe sichtbar
Eine schmale Spalte steht in der Mitte universal Schmale Spalte mittig, Zurück und Titel an ihrer Kante. Vorgabe 48rem für Formulare
Ein Bedienelement steht bei dem, was es verändert universal Steuerung steht in der Fläche dessen, was sie verändert
Jeder Textbehälter hält jede Textmenge aus universal Keine feste Höhe, Schrift relativ, Überlänge bricht um oder wird gekürzt
Erst Abstand, dann Fläche oder Linie universal Abstand gruppiert. Danach feine Linie für Einträge, Fläche für große Bereiche. Kräftige Linie nur zur Hervorhebung
Jede Ansicht folgt dem Platz und bricht bei 320 Pixeln um universal Layout nach Platz, nicht Gerät. Umbruch bei 320 ohne waagerechtes Scrollen. Abstand zu Systemleisten

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
Der Zustand der Ansicht steht in der Adresse universal Filter, Tab, Seite in der URL. Zurück stellt alles wieder her
Eine Eingabe wechselt nie von selbst den Ort universal Eine Auswahl allein öffnet keine Seite und sendet nichts ab
Eine Zeitgrenze warnt vorher universal Warnung vor Ablauf, Verlängern, Eingaben bleiben
Was vorweg angezeigt wird, wird bei Fehler zurückgenommen universal Lehnt der Server ab, verschwindet die Änderung sichtbar
Die Sprache kommt aus der Einstellung, nicht aus dem Ort universal Aus Browser oder Konto, nie aus IP oder Standort
Konfiguration bekommt eine Seite, Ansichts-Einstellungen bleiben universal Filter wirken sofort auf der Seite. Was gespeichert wird, bekommt eine eigene Seite
Ein Ablauf mit Schritten zeigt, wie weit man ist universal Fortschritt sichtbar, ein Balken reicht. Zurück ohne Verlust
Ein Fehler steht dort, wo er entstanden ist universal Am Feld, nicht im Pop-up. Sagt was zu tun ist. Eingaben bleiben. Wird angesagt

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

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
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 Tooltip ergänzt, er trägt nie allein universal Wichtiges steht sichtbar. Tooltip auch per Fokus, schließt mit Esc
Eine Handlung löst beim Loslassen aus universal Beim Loslassen, nicht beim Drücken. Wer abrutscht, bricht ab
Was sich von selbst bewegt, lässt sich anhalten universal Über fünf Sekunden Bewegung: Pause-Knopf. Ton nie von selbst
Gewicht ist ein Budget, ein Primary pro Ansicht universal Höchstens ein Primary pro Ansicht. Beschriftung ist eine Handlung, kein Zustand
Ein Button ist nie gesperrt universal Aktiv lassen und beim Klick zeigen, was fehlt. Gesperrt nur während der Anfrage
Eine lange Auswahl lässt sich durchsuchen universal Ab einer Schwelle Suche oder Gruppen. Korridor 7-15, Vorgabe 10
Jede Geste hat einen zweiten Weg per Klick universal Ziehen, Wischen, Schütteln: dasselbe Ergebnis auch per Klick und Tastatur
Bewegung hat einen Wert und hält nichts auf universal Eine Dauer als Token, nur transform und opacity, Eingabe bricht ab. Reduziert: sofort
Alles geht mit der Tastatur, in der Reihenfolge des Bildes universal Alles per Tab, in der Reihenfolge des Bildes. Globale Kürzel mit Strg, Alt oder Cmd
Der Fokus ist sichtbar und hat immer einen Ort universal Immer sichtbar, gleich gebaut, nie verdeckt. Nach jedem Wechsel ein festes Ziel
Name und Zustand stehen im Code universal Zugänglicher Name mit sichtbarem Text, Zustand als Attribut
Zerstörendes trifft man nicht aus Versehen universal Nie neben dem Häufigen. Im Dialog Fokus auf Abbrechen, Gegenstand genannt
Klickbares hat eine Fläche, und nur Klickbares sieht so aus universal Echte Trefferfläche, nie unter 24 Pixel. Was nichts tut, sieht nicht klickbar aus

Formular

Regel Scope Kern
Was der Nutzer tippt oder einfügt, kommt an universal Nie Einfügen sperren, nie still Zeichen schlucken
Was ein Feld beschreibt, steht im Feld universal Lupe, Einheit, Vorzeichen im Rahmen. Handelndes am Ende
Was zusammen gespeichert wird, steht in einem Formular universal Ein form um gemeinsam gespeicherte Felder. Enter speichert
Der Nutzer tippt nur, was das System nicht weiß universal Nichts abfragen, was das System weiß. type, inputmode, autocomplete

Inhalt

Regel Scope Kern
Lange Zeichenketten stehen in Gruppen universal IBAN, Telefon, Codes in Gruppen. Kopieren ohne Trennzeichen
Struktur steckt im Element universal table, Liste, Feldgruppe, benannte Seitenbereiche, Sprung zum Inhalt
Alles hat eine Textfassung universal Alternativtext, Untertitel, Transkript. Text nie als Grafik
Zahlen, Daten und Beträge folgen dem Sprachraum universal Format aus CLDR für den Sprachraum der Einstellung. Gespeichert wird neutral. Gruppiert ab 5 Stellen

Zustand

Regel Scope Kern
Rot ist nicht ein Rot universal Ein Wert kann nicht Text und Fläche zugleich sein. Der Untergrund entscheidet
Eine Bedeutung, überall gleich universal Eine Handlung, ein Name, ein Icon. Ein Wert, eine Grenze, überall

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. Titelstufen ausgenommen
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
Fließtext hat eine Höchstbreite universal Höchstbreite in Zeichen als Token. Korridor 45-80, Vorgabe 65
Jeder Textstil hat eine Rolle universal Jeder Stil eine Rolle, zwei Stufen Abstand, Display-Schrift nur an einer Rolle. Korridor 4-7, Vorgabe 5

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
Kontrast hat eine Untergrenze universal Text 4,5:1, Grenzen 3:1, in jedem Zustand. Systemkontrast wird beachtet
Farbe trägt nie allein universal Trägt Farbe allein eine Information, bekommen Zustand oder Datenreihe ein zweites Merkmal

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 statt Deckkraft
Was der Browser mitbringt, wird gestaltet oder ersetzt stack Nichts im Browser-Aussehen. color-scheme, gestalten oder ersetzen

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:

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.