BWBH Designsystem · @bwb/ui
Designsprache
Die lebende Galerie: jedes Token, jedes Primitive, jedes Muster in echt, aus @bwb/ui gerendert. Was hier steht, ist keine Nachbildung, sondern das, was die Apps verwenden. Das Warum steht in der Schriftfassung.
Dunkelschema seit BF-234 vollständig geprüft. Der Umschalter wirkt, die Rampe ist definiert.
Marke
Das Zeichen
Drei konzentrische Quadrate auf 156 Kantenlänge. Es wird nie nachgezeichnet, sondern aus diesen Maßen gesetzt — und es kommt an jeder Stelle aus genau einer Quelle.
Fassungen
Eine Konstruktion, vier Farbpaare. Eine fünfte entsteht nicht dadurch, dass jemand eine Farbe tauscht. Einfarbig ist die einzige Fassung mit vollem Kern — Gravur und 1c-Druck können keinen Tonwert ohne Raster.
Sperrungen
Drei, keine vierte. Die Kurzform BWBH gibt es nicht — der Name wird nicht abgekürzt. Die Seitenleiste trägt die gestapelte Fassung, weil die waagrechte dort nicht vollständig hineinpasst.
Waagrecht
Nur als SVG. Ein PNG der Sperrung würde die Schrift des erzeugenden Rechners einbacken — auf einem ohne Funnel Display entstünde eine Datei mit fremder Wortmarke. Wer ein Rasterbild braucht, exportiert es aus dem SVG auf einem Rechner mit der Schrift.
Gestapelt
buchhaltung
Nur als SVG. Ein PNG der Sperrung würde die Schrift des erzeugenden Rechners einbacken — auf einem ohne Funnel Display entstünde eine Datei mit fremder Wortmarke. Wer ein Rasterbild braucht, exportiert es aus dem SVG auf einem Rechner mit der Schrift.
Nur Zeichen
Die eine Größenregel
Die Kastenhöhe ist immer gleich der Versalhöhe der Wortmarke (0,675 der Schriftgröße). Das Primitive nimmt deshalb keine eigene Größe entgegen — wer eine feste Pixelgröße setzen kann, setzt irgendwann eine falsche. Hier dieselbe Komponente in vier Schriftgrößen.
Kleingrößen
Bei 16 px ist die Fassung eine eigene Zeichnung, auf ganze Pixel gesetzt: Fenster 8, Kern 4, Ring 2. Aus dem Raster skaliert fielen beide zwischen zwei Pixel und verwischten zu Grau — und ein Zeichen, dessen Kern im Reiter verschwindet, ist genau dort unbrauchbar, wo es am häufigsten zu sehen ist.
Grundlage
Tokens
Farbe, Radius, Abstand, Höhe: die eine Quelle in @bwb/ui/tokens.css. Jede Farbe mit ihrer Verwendungsregel, denn ein Farbfeld ohne Regel ist nur eine Farbe.
Farbe
--accent ist als einzige tauschbar. --urgent ist reserviert und trägt in der Oberfläche immer Symbol und Wort, nie Farbe allein.
Seitengrund. Warmes Papier, kein klinisches Grau.
Fließtext und Überschriften. Warmes Fast-Schwarz, nie #000.
Erhöhte Flächen: Karten, Leiste, Dialoge.
Alle Trennlinien. Ein einziger Rahmenton.
Sekundärtext, Beschriftungen, inaktive Symbole. Hält AA auf --bg, --card UND --soft.
Hover- und Aktivflächen.
Die EINZIGE tauschbare Farbe. Primäraktion, Links, Fokus.
Text auf Akzentfläche.
RESERVIERT: verstrichene gesetzliche Frist / jetzt handeln. Nie Serien- oder Akzentfarbe, nie Formularfehler.
Fehlerrot der Oberfläche: Formularfehler, fehlgeschlagene Aktionen, Löschen. Getrennt von --urgent, damit die Reservierung eine bleibt.
Erledigt, in Ordnung, bestanden. Ersetzt Tailwinds emerald, das gegen fremde Grundfarben gerechnet ist und hier in beiden Schemata durch AA fiel.
Achtung, aber keine Frist: unsichere Einstufung, fehlende Angabe. Ersetzt amber-600, das mit 3,00:1 der am schlechtesten lesbare Ton war.
Neutrale Statusaussage. Bewusst dunkler als --accent: eine Plakette in Akzentblau sieht aus wie etwas zum Anklicken.
In Bearbeitung, läuft.
Diagrammfarben
Sie stehen als Token und nicht im Bauteil, weil sie mit dem Schema wechseln müssen: hart kodiert erreichten die dunkelsten Blautöne auf dunkler Karte 2,13:1 und verschwanden schlicht. Flächen brauchen 3:1, ihre Beschriftungen 4,5:1.
§128a Frist 1 · Errichtung ≤ 1918.
§128a Frist 2 · 1919–1945.
Nicht pflichtig · ≥ 1946.
Einstufung unsicher. Bewusst kein Rot: unklar ist keine Gefahr.
Fristhorizont: verstrichen. Verweist auf --urgent, ist kein zweites Rot.
Fristhorizont: ≤ 90 Tage.
Fristhorizont: ≤ 12 Monate.
Fristhorizont: später. Unbunt, damit die dringenden Stufen die einzigen bunten sind.
Zustandsstufen
Eine Rangfolge, keine Serien: benachbarte Stufen SOLLEN sich ähneln. Deshalb gelten hier nicht die Abstandsregeln der kategorialen Palette, und deshalb trägt jede Stufe in der Oberfläche immer Wort und Zahl, nie Farbe allein.
Gefahr im Verzug.
Frist verstrichen. Orange statt Rot, sonst nicht von „Gefahr“ zu unterscheiden.
Noch abwendbar.
Offen, ohne Fristdruck.
Keine Grundlage. Bewusst unbunt: das ist kein Zustand, sondern sein Fehlen.
In Ordnung.
Radius
--radius: 0.5rem ist Standard. sm für Chips und Symbolknöpfe, lg für Dialoge. Nichts ist ganz rund außer Avataren.
Abstand
Abstände kommen vom Layout (flex/grid + gap), nicht vom Element. Die Skala ist Tailwinds Standard; hier ein paar Stufen als Maßstab.
Höhe / Elevation
Eine Erhöhungsstufe: die Standard-Kartenfläche. Kein Schatten-Zoo, sondern Fläche plus 1px Rahmen plus dezenter Schatten.
Grundlage
Typografie
Drei Schriften, selbst gehostet. Überschriften tragen die Display-Grotesk, eng gelaufen; Werte tragen Mono.
Skala
Überschriften bekommen text-wrap: balance, Fließtext hält rund 65 Zeichen.
.eyebrow
Mono, Versalien, gesperrt, gedämpft. Die kleine Zeile über einer Überschrift, die den Kontext benennt. Nie länger als drei Wörter.
.code
Systemmono, Schreibung unangetastet — fuer alles, was jemand LIEST oder KOPIERT: Codespannen, Dateipfade, Einladungs-URLs, CSV-Muster. Die Entscheidung haengt nicht am Aussehen, sondern an der Verwendung: gelesen (ein Wert, den das Auge aufnimmt) → .mono, uebernommen (getippt, kopiert, in eine Adresszeile gesetzt) → .code.
.mono mit tabular-nums
Wo Ziffern untereinander stehen, richtet die Spalte aus. Das ist der ganze Grund für Mono bei Zahlen, Datumsangaben und Aktenzeichen. Seit BF-408 versal, und seit BF-418 nie fett: Departure Mono hat nur einen Schnitt, der Browser würde ein Fett fälschen und dabei das Pixelraster verschmieren. Betonung kommt über Größe und Farbe.
| Objekt | Frist | Betrag |
|---|---|---|
| Zieglergasse 14 | 31.12.2027 | 1.240,00 € |
| Mariahilfer Straße 7 | 01.03.2030 | 980,50 € |
| Neubaugasse 220 | 15.09.2027 | 12.004,00 € |
.stat — der gross gesetzte Zählwert
Departure Mono setzt eine geschlitzte Null. In 2025 oder 31.12.2027 ist das richtig — der Schlitz unterscheidet die Null vom grossen O. Steht die Ziffer allein und gross, gibt es kein O, von dem sie sich unterscheiden müsste: der Schlitz trägt keine Information mehr und liest sich als Ø. Ausgerechnet die gute Nachricht — null überfällige Fristen — sah damit aus wie eine Leermenge (BF-417). Die Grenze läuft nicht zwischen Schriften, sondern zwischen Verwendungen: ein Wert IN einer Angabe → .mono, ein Zählwert, der allein und gross steht und 0 sein kann → .stat.
Bausteine
Primitives
Die echten Komponenten aus @bwb/ui, nebeneinander in ihren Zuständen. Hover und Fokus sind live: fahren Sie darüber, springen Sie mit Tab hinein.
Button: Varianten
Button: Zustände
Ruhe, deaktiviert und Ladezustand statisch; Hover und Fokus live. Der Ladezustand ist disabled + aria-busy, nie ein Knopf, der sich noch drücken lässt.
Input + Label
Fokus ist live (Tab hinein). Der Fehlerzustand trägt Rahmen UND Text, denn Identität hängt nie an der Farbe allein.
Checkbox
Nativ, nicht Radix: die Formulare hängen an FormData und an required. Gestaltet wird ausschliesslich über accent-color — rounded, border-* und text-* wirken an einem nativen Kästchen nicht.
Textarea
Select
Interaktiv: öffnen Sie das Menü. Radix-basiert, tastaturbedienbar.
Dropdown-Menu
Tooltip
Zusatz, nie Träger einer Information, die man zum Handeln braucht. Öffnet bei Hover und Fokus.
Accordion
Avatar
Das einzig vollständig Runde. Fällt auf Initialen zurück, wenn kein Bild lädt.
Separator
Objektdaten
Fristen
Dialog
Fokusfalle, Esc-Handler, Scroll-Sperre und aria-Verdrahtung kommen aus Radix. Das Muster für Bestätigungen steht unter „Muster“.
Zusammensetzung
Muster
Wiederkehrende Anordnungen, an denen sich jede Seite orientiert.
Seitenkopf
Eyebrow, Titel, optionales Intro, optionale Aktion. Jede Seite hat genau einen.
Für wen
Hausverwaltungen
Bauwerksbücher für den ganzen Bestand, mit einer Frist je Objekt.
Karte
Zieglergasse 14
Baujahr 1908 · Frist 1
Leere Zustände
Ein leerer Zustand sagt drei Dinge: dass nichts da ist, ob das normal ist, und was man tun kann. Zwei sind NICHT dasselbe: nur der erste bekommt eine Handlungsaufforderung.
Sie haben noch kein Objekt angelegt.
Legen Sie Ihr erstes Bauwerk an, um zu starten.
Kein prüfpflichtiges Objekt vorhanden.
Das ist kein Problem, das Sie beheben müssen, deshalb ohne Aktion.
Formular
Bestätigung vor destruktiven Aktionen
Fragt zurück und benennt KONKRET, was passiert, nicht „Sind Sie sicher?“. Die bestätigende Aktion trägt --danger — Löschen ist ein Eingriff der Oberfläche, keine gesetzliche Frist.
Zahlen in der Navigation
Nur dort, wo die Zahl eine Handlung auslöst: überfällig, unklar, offen. NIE eine Null: eine dauerhafte 0 trainiert Leute darauf, die Zahlen zu überlesen, die zählen.
Berechtigungen
Eine Oberfläche bietet nichts an, was der Server verweigert. Wer nicht anlegen darf, sieht KEINEN Knopf, nicht einen deaktivierten. Ein ausgegrauter Knopf ist eine Frage ohne Antwort.
Darf anlegen
Nur Leserecht
Zahlen zeigen
Datenvisualisierung
Das für dieses Produkt Festgelegte. Ausführlich in der dataviz-Systematik.
Kategoriale Palette
Der generische Vorrat für Serien, die Identität tragen. Reihenfolge fest, nie durchrotiert. Statusfarben sind davon getrennt und werden nie als „Serie 4“ recycelt — und die §128a-Fristen haben eigene Token (siehe Tokens · Diagrammfarben), nicht diese hier.
Hell
Dunkel
Diagramm mit Leitfrage
Kein Diagramm ohne Frage, die es beantwortet. Steht die Frage nicht in der Überschrift, gehört das Diagramm nicht auf die Seite. Legende ab zwei Serien plus direkte Beschriftung, denn Identität hängt nie allein an der Farbe.
Sprache
Schreibweise
Zeigen statt erklären: jede Regel neben dem Satz, den sie ablehnt.
Fehlermeldungen erklären, was schiefging UND wie man es behebt.
Gut
Das Passwort muss mindestens 12 Zeichen lang sein.
Vermeiden
Validierungsfehler.
Ein Bedienelement sagt, was passiert.
Gut
Auftrag zurückziehen
Vermeiden
Absenden
Bestätigung benennt konkret, was passiert.
Gut
Zugriff von Maria Huber auf Zieglergasse 14 entziehen?
Vermeiden
Sind Sie sicher?
Fachbegriffe in der Sprache der Branche, nicht des Datenmodells.
Gut
Objekt · Frist · Prüfbericht · Sachverständiger
Vermeiden
Entity · Deadline · Issue · Inspector