Styleguide — Wie unsere Marke aussieht.

1. Petrol trägt, Terrakotta betont. Die Primärfarbe bestimmt die Fläche, der Akzent markiert genau das, was geklickt oder gelesen werden soll — eine Terrakotta-Fläche pro Bildschirm, die Hauptaktion.Abschnitt 03 →
2. Wird das gelesen oder abgelesen? Gelesen heißt Inter — jeder Satz, jede Bildunterschrift. Abgelesen heißt IBM Plex Mono — Nummern, Maße, Etiketten, immer im Versalsatz. Eine dritte Schrift gibt es nicht.Abschnitt 04 →
3. Überschriften sind größer, nicht fetter. Die Hierarchie trägt die Größe. Überschriften laufen im Regular — auch in Word und PowerPoint.Abschnitt 04 →
4. Logo nur aus der Datei. Nie nachbauen, nie umfärben, nie verzerren. Es gibt für jeden Untergrund eine fertige Variante.Abschnitt 02 →
5. Luft lassen. Abstände kommen aus dem 8er-Raster. Im Zweifel den größeren Wert nehmen.Abschnitt 05 →
6. Lesbarkeit schlägt Geschmack. Jede Farbkombination in diesem Guide ist auf Kontrast geprüft. Kombinationen, die hier nicht stehen, sind nicht freigegeben.Abschnitt 03 →

Beide Schriften stehen unter der SIL Open Font License und dürfen in Web, Druck und Software eingesetzt werden — auch gewerblich, ohne Lizenzkosten. Für Webseiten werden die Dateien selbst gehostet: schneller als eine Einbindung über Google Fonts und datenschutzrechtlich unkritisch.

Die Aufteilung ist streng. Inter trägt rund 90 % aller Zeichen einer Seite. Plex Mono ist die Ausnahme, die auffällt, weil sie selten kommt — wird sie zur zweiten Textschrift, ist der Effekt weg.

Von Inter wird die variable Fassung geladen, von Plex Mono ausschließlich Regular 400 — ein einziger Schnitt. Für Etiketten und Ziffern braucht es keinen zweiten.

• An Schrift: em. Abstände über und unter Überschriften und zwischen Absätzen. Wächst die H1 von 28 auf 39 px, wächst die Luft darüber mit. Deshalb stehen in der Tabelle Näherungswerte — der genaue Pixelwert hängt von der Fensterbreite ab.
• An Struktur: Pixel aus der 8er-Leiter. Abstände zwischen Abschnitten, Innenabstände von Karten, Lücken in Rastern. Die haben mit Schriftgröße nichts zu tun und sollen fest bleiben.
• An Satzbreiten: ch. Die Einheit hängt an der Zeichenbreite der laufenden Schrift. Eine Spalte mit 66ch behält ihre Zeichenzahl auch dann, wenn die Schriftgröße wechselt oder eine andere Schrift einspringt — eine Pixelbreite tut das nicht.
• Zeilenhöhen bleiben nach Lesbarkeit gewählt, nicht nach Teilbarkeit. 16 px bei 1,6 ergibt 25,6 px — kein Vielfaches von 8, und das ist in Ordnung.

Ein Hinweis für die Umsetzung: Senkrechte Abstände benachbarter Elemente addieren sich in CSS nicht, sie fallen zusammen — es gilt der größere Wert. Zwischen einem Absatz (1em unten) und einer folgenden H3 (2em oben) liegen also 2em, nicht 3em. Wer die Werte aus der Tabelle nachbaut, darf sie nicht aufsummieren.

Das gilt für Ränder, nicht für Innenabstände. Ein Innenabstand fällt mit keinem Rand zusammen. Deshalb ist die letzte Zeile der Tabelle die einzige, in der sich zwei Werte tatsächlich addieren: 96 px Rand unter dem einen Abschnitt plus 48 px Innenabstand über dem nächsten ergeben 144 px. Wer nur --s-9 nachbaut, bekommt einen Drittel zu wenig Luft zwischen den Abschnitten.

Die Ableitung ist eine Rechenregel, keine Geschmacksfrage. Überfahren heißt eine Stufe der Rampe weiter, Gedrückt zwei. Im hellen Thema geht es dabei abwärts, im dunklen aufwärts — dieselbe Bewegung, dieselbe empfundene Stärke. Wer das von Hand mischt, bekommt bei der zweiten Schaltfläche einen anderen Ton.

Die Trennung, auf der alles beruht: Rampenwerte wie --teal-500 ändern sich nie. Rollen wie --surface oder --ink besetzen im dunklen Thema andere Stufen derselben Rampen. Im Stylesheet steht deshalb ausschließlich die Rolle. Wer var(--n-900) für Text schreibt statt var(--ink), baut eine Stelle, die im dunklen Thema schwarz auf schwarz läuft.

• Unter 16 px keine Strichzeichnung. Bei 1,5 auf 24 Einheiten wird der Strich unterhalb von 16 px dünner als ein Gerätepixel und bricht weg. Wer kleiner muss, nimmt eine Fläche statt einer Kontur.
• Ein Symbol allein ist keine Beschriftung. Steht kein Text daneben, braucht die Schaltfläche ein aria-label; das Symbol selbst bekommt aria-hidden="true". Steht Text daneben, ist das Symbol immer dekorativ.
• 3:1 gegen den Untergrund, wenn das Symbol bedient wird — dieselbe Schwelle wie für Feldrahmen. --ink-2 erfüllt sie in beiden Themen mit Reserve.
• Keine Bedeutung allein über die Form. Ein Häkchen heißt nicht überall Erfolg. Symbol und Wort zusammen, oder nur das Wort.
• Keine gemischten Sätze. Symbole aus zwei Bibliotheken erkennt man sofort an unterschiedlichen Rundungen und Strichenden. Eine Quelle, oder selbst zeichnen.
• Eindeutige IDs, wenn mehrere SVGs inline auf einer Seite liegen — dieselbe Falle wie beim Logoexport.

• Eine Achse. Nie zwei y-Skalen in einem Diagramm. Zwei Größen mit verschiedenen Einheiten ergeben zwei Diagramme untereinander oder eine gemeinsame Indexbasis. Das ist der häufigste Fehler überhaupt — die zweite Achse erzeugt Zusammenhänge, die in den Daten nicht stehen.
• Ab zwei Reihen immer eine Legende, bei bis zu vier zusätzlich direkt am Ende der Linie beschriftet. Bei einer einzigen Reihe entfällt sie — der Titel nennt sie.
• Text trägt Textfarben. Werte, Achsen und Legendentexte stehen in --ink oder --ink-2, nie in der Farbe ihrer Reihe. Die Zugehörigkeit trägt das Farbfeld daneben.
• Gitter und Achsen treten zurück — --line, nicht --ink. Die Daten sind das Dunkelste im Bild.
• Nicht jeder Punkt bekommt eine Zahl. Beschriftet wird, was der Satz daneben behauptet: der Höchstwert, der letzte Wert, der Ausreißer.
• 2 px Untergrundfarbe zwischen aneinanderstoßenden Flächen — bei gestapelten Segmenten wie bei benachbarten Balken. Ohne diese Fuge verschmelzen zwei ähnliche Töne zu einem.
• Farbe ist nie der einzige Träger. Neben der Legende gehört eine Tabellenansicht dazu, spätestens wenn Zahlen genau abgelesen werden sollen.

• Kontrast: Text mindestens 4,5:1, ab 24 px oder 19 px fett mindestens 3:1. Bedienelemente und Symbole mindestens 3:1. Die Tabelle in Abschnitt 03 nennt geprüfte Kombinationen.
• Farbe nie allein: Ein roter Rahmen genügt nicht als Fehlerhinweis — es braucht zusätzlich Text oder Symbol.
• Sichtbarer Fokus: Wer mit der Tabulatortaste navigiert, muss sehen, wo er ist. Standard ist ein 3 px starker Rahmen in #AF4C32 mit 3 px Abstand. Auf Petrol ab Stufe 500 wechselt er auf #E8B3A2 — #AF4C32 erreicht dort nur 1,7:1 und ist praktisch unsichtbar. Wo auch das nicht trägt, etwa auf den Farbfeldern in Abschnitt 03, steht statt eines Rings ein zweifarbiger Innenrahmen weiß auf schwarz: der ist auf jedem Untergrund sichtbar. Bitte einmal selbst durchtabben.
• Klickfläche: freistehende Bedienelemente mindestens 44 × 44 px, auch wenn das Symbol kleiner ist. In dichten Listen, wo 44 px die Nachbarzeile überlappen und damit Fehlgriffe erzeugen würden, gilt die Untergrenze aus WCAG 2.2: 24 × 24 px, dann aber mit vollem Zeilenabstand ringsum und ohne Überschneidung. Die Kopiersymbole in Abschnitt 02 sind nach dieser zweiten Regel gebaut, der Symbolknopf am Token-Block nach der ersten.
• Schriftgröße: Fließtext fest auf 16 px (1rem). Alle Größen in rem — auch der mittlere Term einer clamp()-Formel, sonst greift die Vergrößerung im Browser dort nicht.
• Bewegung: prefers-reduced-motion beachten und Animationen dann abschalten.
• Alternativtexte für alle inhaltlichen Bilder. Rein dekorative Bilder bekommen alt="".

• Variable Schriften machen in InDesign und Word Probleme. Für Print die statischen Inter-Schnitte installieren — genau die drei aus Abschnitt 04: Regular, Medium, SemiBold. Bold gehört nicht dazu und wird auch nicht nachinstalliert: Was im System liegt, greift Word bei der nächsten Überschrift wieder ab. Von IBM Plex Mono genügt Regular; ein zweiter Schnitt käme nirgends vor.
• Fließtext 10–11 pt, Zeilenabstand 14–15 pt. Kleinstes zulässiges Maß: 7 pt (Impressum, Fußzeile).
• Große Überschriften auch hier enger stellen: −20 bis −35 Einheiten Laufweite. Im Druck fehlt die optische Achse, die am Bildschirm mitarbeitet.
• Auch im Druck laufen Überschriften im Regular. Word setzt sie ab Werk fett — Formatvorlagen einmal anpassen.
• Plex Mono im Druck nur für Etiketten und Ziffern, ab 8 pt, Laufweite +40 bis +60 Einheiten bei Versalsatz, 0 bei Zahlenkolonnen. Anschriften, Fußzeilen und Kontaktdaten laufen in Inter.
• Für Word-Vorlagen, die extern weitergegeben werden: beide Schriften einbetten. Ersatz nur im Notfall — Arial für Inter, Courier New für Plex Mono. Keine dritte Schrift.
• Zahlen in Word-Tabellen: Inter mit der Zeichenoption „Tabellenziffern“. Plex Mono ist dafür nicht nötig.

Nie einen Wert direkt schreiben. Nicht #0B4E5C, sondern var(--teal-500). Nicht 24px, sondern var(--s-5). Nur so lässt sich eine Farbe oder ein Abstand später an einer Stelle ändern statt an vierzig.

Neun Tokens ruft auf dieser Seite keine Regel ab und stehen trotzdem im Block: der flache Schatten --shadow-1, der größte Abstand --s-10, drei Rampenstufen (--rust-800, --n-700, --n-800) und vier der sechs Ebenen (--z-dropdown bis --z-toast). Das ist kein Ballast, sondern der Zweck: eine Seite ohne Überlagerungen braucht keine Modalebene, ein Projekt mit Dialogen sehr wohl. Rampenstufen sind ohnehin ein Vorrat, aus dem die Rollen schöpfen — welche Stufe gerade greift, steht in Abschnitt 08.

--t-h2 kommt vor, aber nur als Muster in Abschnitt 04: Der Styleguide ist flach gebaut und führt seine Abschnittstitel in der H1-Rolle. Ein Dokument mit tieferer Gliederung setzt die Stufe ein, ohne sie neu erfinden zu müssen.