Black Belt Design Library
Das veröffentlichte Designsystem der Black-Belt-iOS-App: ein Raster, drei Radien, sieben Typografierollen und ein gemeinsamer Kartenaufbau, in Hell und Dunkel mit demselben Stylesheet wie die App-Bildschirme gezeichnet.
Black Belt ist eine Trainingsapp für Brazilian Jiu-Jitsu. Dies ist ihre Designbibliothek — nicht ein Dokument über das System, sondern das gerenderte System selbst.
Was sie enthält
- Grundlagen — ein 8er-Raster mit einem 4-pt-Halbschritt, drei Radien, sieben Typografierollen über fünf Größen und drei Gewichte sowie eine neutrale Palette mit einem Akzent und einem Diagrammfarbton pro Bildschirm
- Die Karte — jede Karte auf jedem Bildschirm hat denselben Aufbau: Dachzeile, Titel, Kontextzeile, Inhalt, Bildunterschrift, Aktion. Nur der Inhalt unterscheidet sich
- Komponenten — jede in den vier Ebenen der Pixelrastermethode gezeichnet: Raster, Innenabstände und Flächen, Struktur, Typografie
- Oberflächen — vollständige Bildschirme und Diagrammbeispiele, jeweils in Hell und Dunkel
- Niemals veröffentlichen — Regeln, die einen Entwurf vor der Umsetzung ausschließen
Warum sie zeigt statt beschreibt
Die Bibliothek ist eine einzelne eigenständige Seite ohne Imports. Jedes Beispiel entsteht mit demselben Stylesheet wie der Canvas der App-Bildschirme. Eine Komponente kann daher nicht von ihrer Dokumentation abweichen — die Dokumentation ist die Komponente. So musste jede Regel den Praxistest des Zeichnens bestehen: Ein Abstandswert ohne sichtbares Beispiel kam nicht auf die Seite.
Welche Vorgaben sie festhält
Kein Bold und kein Semibold; Hervorhebung erfolgt über Gewicht 500 oder die Sekundärfarbe, nie über eine größere Schrift. Passive Inhaltskarten bleiben deckend und zugänglich, während Navigation und temporäre UI den nativen Glaseffekt erhalten. Diagramme nutzen einen Farbton pro Bildschirm, jede Markierung ist ein Verlauf darin.