Regeln

Jede Seite hat genau eine Überschrift der ersten Ebene.

Die erste Ebene beantwortet die Frage, worum es auf dieser Seite geht. Gibt es zwei Antworten, gibt es keine. Bei uns steht sie im Kopfbereich ganz oben, und sonst nirgends.

Jede Sektion beginnt mit einem SektionsKopf.

Es gibt genau ein Bauteil für den Anfang einer Sektion. Nur deshalb fangen alle Sektionen gleich an, und nur deshalb ändert eine einzige Änderung am Rhythmus sie alle auf einmal. Eine handgeschriebene Überschrift sieht am ersten Tag gleich aus und am hundertsten nicht mehr.

Überspringe keine Ebene.

Wer mit einer Vorlesehilfe arbeitet, springt von Überschrift zu Überschrift und schließt aus der Ebene auf die Verschachtelung. Folgt auf eine zweite Ebene eine vierte, klingt das, als fehlte ein Stück Seite. Nach h2 kommt h3, nicht h4.

Ebene und Größe sind zwei verschiedene Dinge.

Die Ebene ist die Gliederung, die Größe ist das Aussehen. Meistens gehören sie zusammen, und dann gibt man nur die Ebene an. Soll etwas tief in der Gliederung stehen, aber groß aussehen, sagt man das getrennt — statt die Gliederung kaputtzumachen, um eine Schriftgröße zu bekommen.

Vergrößere eine Überschrift nie mit style.

Eine Größe, die direkt am Element steht, taucht in keiner Datei auf, in der man nach Größen sucht. Sie überlebt jede Änderung an den Tokens und ist in einem Jahr die eine Stelle, die nicht mitgewachsen ist. Passt keine der vier Größen, fehlt eine — dann kommt sie in die tokens.css.

Der Übertitel ist eine Einordnung, keine zweite Überschrift.

Er beantwortet »wo bin ich«, nicht »worum geht es«: So arbeiten wir, Für Nachfolgende, Aus dem Ratgeber. Steht dort ein ganzer Satz, konkurriert er mit der Überschrift darunter, und das Auge weiß nicht, was es zuerst lesen soll. Drei Wörter sind genug.

Schreibe keinen Abstand als Zahl.

Sobald irgendwo eine Zahl steht, gilt sie nur dort. Sie wächst nicht mit dem Fenster mit, sie ändert sich nicht mit, wenn wir am Rhythmus drehen, und man findet sie nicht wieder. Jeder senkrechte Abstand kommt aus einem Token.

Zwischen zwei Sektionen steht --abstand-sektion. Innerhalb einer Sektion gibt es drei Abstände, sonst keinen.

Drei reichen, und mehr würde man nicht auseinanderhalten. --rhythmus-kopf trennt den Sektionskopf vom Inhalt, --rhythmus-block trennt zwei Blöcke voneinander, --rhythmus-eng hält zusammen, was ein Block ist. Wer einen vierten Wert braucht, braucht meistens in Wahrheit eine andere Gliederung.

Abstände sitzen unten, nicht oben.

Wenn ein Element unten Abstand hält und das nächste oben, steht dazwischen die Summe von beidem — je nach Reihenfolge mal mehr, mal weniger. Halten alle nur nach unten Abstand, ist der Zwischenraum immer derselbe, egal was worauf folgt.

Der Abstand unter dem Sektionskopf gehört dem Kopf.

Er steht einmal in SektionsKopf.module.css. Deshalb muss keine Sektion sich daran erinnern, und keine kann ihn vergessen. Fehlt der Vorspann, verkleinert der Kopf ihn von selbst — auch das ist eine Entscheidung, die nicht in jeder Sektion neu getroffen werden soll.

Den senkrechten Abstand einer Sektion setzt Section, den seitlichen Container.

Zwei Bauteile, zwei Zuständigkeiten. Section kennt den Grund und den Abstand nach oben und unten; Container kennt die Breite und den Rand zur Fensterkante. Wer in einer Sektion selbst padding schreibt, hat eine der beiden Zuständigkeiten übernommen — und die nächste Sektion macht es dann anders.

Zusammenhängender Text wird nie breiter als etwa 68 Zeichen.

Ab ungefähr 75 Zeichen je Zeile verliert das Auge beim Zeilensprung die Spur und findet den Zeilenanfang nicht mehr zuverlässig. Man merkt es nicht bewusst; man liest nur langsamer und hört früher auf. Genau das dürfen wir bei einer Zielgruppe, die über die Übergabe ihres Lebenswerks liest, nicht riskieren.

Eine Überschrift bricht spätestens nach 22 Zeichen Breite um.

Eine Überschrift über die ganze Bildschirmbreite liest sich wie eine Zeile aus einer Zeitung von 1950. Der Sektionskopf begrenzt sie deshalb von sich aus — auf schmalen Geräten hebt er die Grenze wieder auf, weil dort das Fenster ohnehin enger ist.

Volle Breite ist die Voreinstellung, nicht die Ausnahme.

Wer eine schmalere Breite wählt, soll sagen können, warum. Umgekehrt entsteht sonst eine Seite, auf der jede Sektion ein bisschen anders breit ist, ohne dass jemand es entschieden hätte.

Gelb liegt nur auf etwas, das man anklickt, oder auf etwas, worauf hingewiesen wird.

Gelb ist die einzige Farbe auf dieser Seite, die von selbst den Blick zieht. Diese Wirkung ist eine begrenzte Menge: Wird Gelb zur Fläche, verteilt sich die Aufmerksamkeit gleichmäßig darüber, und die Schaltfläche daneben ist nichts Besonderes mehr. Der Kopfbereich ist violett, nicht gelb — genau deswegen.

Pro Bildschirmabschnitt gibt es genau eine gelbe Schaltfläche.

Zwei gleich starke Aufforderungen nebeneinander sind keine Aufforderung, sondern eine Frage. Die zweite Möglichkeit bekommt Umriss oder Violett — sie bleibt erreichbar, aber sie ruft nicht.

Fließtext steht in --ink-soft, nie in --ink-faint.

--ink-faint liegt bei 4,0:1 und damit unter der Schwelle, die für Text vorgeschrieben ist. Der Ton existiert für Bildunterschriften und Beiläufiges — für alles, dessen Verlust man verkraftet. Ein Absatz gehört nicht dazu.

Farbe ist nie der einzige Träger einer Aussage.

Etwa jeder zwölfte Mann sieht Rot und Grün nicht als verschiedene Farben. Ein rot umrandetes Feld ohne Text sagt ihm nichts. Deshalb steht neben jeder Farbe ein Wort, ein Zeichen oder beides — im Fehlerfall die Meldung, bei den Zielgruppen der Name im Etikett.

Außerhalb der tokens.css steht keine Farbe als Zahl.

Das ist die Regel, wegen der wir das Violett an einer Stelle ändern können und es sich überall gleichzeitig ändert. Eine einzige eingetippte Farbe genügt, um diese Eigenschaft zu verlieren — und man merkt es erst, wenn man umfärbt. Ausnahme ist allein das Gehäuse des Style-Guides: Es muss neutral bleiben, damit man beurteilen kann, was darin steht.

Zwei gleiche Sektionsgründe stehen nie hintereinander.

Zwei helle Sektionen nacheinander verschmelzen zu einer langen. Der Wechsel ist das Einzige, was beim Scrollen sagt: hier fängt etwas Neues an. Reihenfolge und Wechsel sind damit eine Entscheidung über die Gliederung, nicht über die Optik.

Dunkel ist Betonung. Höchstens zwei dunkle Sektionen je Seite.

Eine dunkle Sektion wirkt, weil sie selten ist. Ab der dritten ist die Seite dunkel mit hellen Einschüben, und die Betonung liegt nirgends mehr.

Eine Karte bekommt keinen eigenen Innenabstand.

Innenabstand, Radius und Rahmen sind an der Karte absichtlich nicht einstellbar. Wären sie es, hätten wir in einem halben Jahr fünf Karten mit fünf verschiedenen Innenabständen — und niemand könnte sagen, welcher der richtige war. Für kleine Kacheln gibt es `eng`, und damit ist die Auswahl zu Ende.

Nur eine Karte, die wirklich irgendwohin führt, bekommt hebt.

Das Anheben beim Darüberfahren ist ein Versprechen: Hier passiert etwas, wenn du klickst. Eine Karte, die sich hebt und nichts tut, ist ein Versprechen, das die Seite nicht hält — und der Nutzer klickt beim nächsten Mal auf die echte auch nicht mehr.

Jedes Feld hat eine sichtbare Beschriftung.

Ein Platzhalter ist keine Beschriftung: Er verschwindet in dem Moment, in dem man zu tippen anfängt. Wer nach dem dritten Feld noch einmal nachsehen will, was oben stand, kann es nicht — und wer eine Vorlesehilfe benutzt, hört gar nichts. Der Platzhalter darf ein Beispiel zeigen, mehr nicht.

Kein Eingabefeld ist niedriger als 48 Pixel.

Darunter wird das Treffen mit dem Daumen unzuverlässig. Das ist keine Geschmacksfrage und keine Frage des Bildschirms, an dem wir gerade sitzen — es ist die Größe einer Fingerkuppe.

Ein Fehler steht in Worten da und sagt, was zu tun ist.

Ein roter Rahmen sagt, dass etwas nicht stimmt, aber nicht was. Die Meldung nennt das Problem und den nächsten Schritt — und sie steht über dem Hinweis, damit eine Vorlesehilfe sie zuerst vorliest.

Frage nur, was du wirklich brauchst.

Jedes zusätzliche Feld kostet Abschlüsse — messbar. Für eine Erstanfrage genügen Name, Kontaktweg und die Frage selbst. Alles Weitere lässt sich im Gespräch klären, das wir mit dem Formular ja gerade herbeiführen wollen.

Pflichtfelder werden gekennzeichnet, nicht die freiwilligen.

Wenn fast alles Pflicht ist, ist der Stern die Regel und verschwindet als Information. Umgekehrt gilt: Sind fast alle Felder freiwillig, kennzeichnet man die freiwilligen. Gemischt wird nicht — auf einer Seite gilt eine der beiden Arten.

Was sich bewegt, wenn man darüberfährt, muss anklickbar sein.

Bewegung beim Darüberfahren ist die Antwort auf eine unausgesprochene Frage: »Ist das hier ein Knopf?« Wer sie mit Ja beantwortet, obwohl nichts passiert, hat gelogen.

Jede Bewegung hört auf, wenn das Gerät danach fragt.

Manche Menschen bekommen von bewegten Oberflächen Übelkeit oder Schwindel; sie stellen das im Betriebssystem ab. Diese Einstellung kommt bei uns als prefers-reduced-motion an, und wir halten uns daran — die Seite funktioniert dann ohne jede Bewegung genauso.

Der Fokusrahmen wird nie entfernt.

Er ist für alle, die mit der Tastatur bedienen, das Einzige, woran sie sehen, wo sie sind. Ihn abzuschalten, weil er stört, macht die Seite für diese Menschen unbedienbar. Gefällt er nicht, wird er gestaltet — bei uns als zweifarbiger Rahmen statt als Systemumriss —, aber nicht abgeschafft.

Sieh zuerst nach, ob es das Bauteil schon gibt.

Der häufigste Weg, ein System zu zerlegen, ist nicht, eine Regel zu brechen, sondern etwas neu zu bauen, das es schon gab. Deshalb existiert die Bausteine-Seite: Sie ist in dreißig Sekunden durchgeblättert.

Fehlt ein Wert, kommt er in die tokens.css — nicht ins Bauteil.

Ein neuer Wert im Bauteil gilt für dieses eine Bauteil. Derselbe Wert in der tokens.css steht allen zur Verfügung und taucht beim nächsten Mal in der Suche auf, statt ein zweites Mal erfunden zu werden.

Eine Regel darf gebrochen werden, wenn ihr Grund nicht zutrifft — und dann steht der Grund als Kommentar daneben.

Das ist kein Schlupfloch, sondern der Zweck der Begründungen. Was hier steht, ist die beste Entscheidung für die Fälle, die wir kannten. Trifft ein Fall die Annahme nicht, ist die Ausnahme richtig; unkommentiert wird sie allerdings beim nächsten Lesen für einen Fehler gehalten und »repariert«.