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.

design.md · Marke

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.

Positiv

heller Grund, Standard

Tinte

Dokument, Rechnung, Mail

Negativ

dunkles Schema, Bildwelt

Einfarbig

Gravur, Prägung, Stempel, 1c

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

Bauwerksbuchhaltung

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

Bauwerks
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.

BauwerksbuchhaltungBauwerksbuchhaltungBauwerksbuchhaltungBauwerksbuchhaltung

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.

design.md §2 Farbe

Farbe

--accent ist als einzige tauschbar. --urgent ist reserviert und trägt in der Oberfläche immer Symbol und Wort, nie Farbe allein.

--bg 

Seitengrund. Warmes Papier, kein klinisches Grau.

--ink 

Fließtext und Überschriften. Warmes Fast-Schwarz, nie #000.

--card 

Erhöhte Flächen: Karten, Leiste, Dialoge.

--border 

Alle Trennlinien. Ein einziger Rahmenton.

--muted 

Sekundärtext, Beschriftungen, inaktive Symbole. Hält AA auf --bg, --card UND --soft.

--soft 

Hover- und Aktivflächen.

--accent 

Die EINZIGE tauschbare Farbe. Primäraktion, Links, Fokus.

--accent-ink 

Text auf Akzentfläche.

--urgent 

RESERVIERT: verstrichene gesetzliche Frist / jetzt handeln. Nie Serien- oder Akzentfarbe, nie Formularfehler.

--danger 

Fehlerrot der Oberfläche: Formularfehler, fehlgeschlagene Aktionen, Löschen. Getrennt von --urgent, damit die Reservierung eine bleibt.

--positive 

Erledigt, in Ordnung, bestanden. Ersetzt Tailwinds emerald, das gegen fremde Grundfarben gerechnet ist und hier in beiden Schemata durch AA fiel.

--warning 

Achtung, aber keine Frist: unsichere Einstufung, fehlende Angabe. Ersetzt amber-600, das mit 3,00:1 der am schlechtesten lesbare Ton war.

--info 

Neutrale Statusaussage. Bewusst dunkler als --accent: eine Plakette in Akzentblau sieht aus wie etwas zum Anklicken.

--progress 

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.

--chart-welle-1 

§128a Frist 1 · Errichtung ≤ 1918.

--chart-welle-2 

§128a Frist 2 · 1919–1945.

--chart-welle-3 

Nicht pflichtig · ≥ 1946.

--chart-welle-unklar 

Einstufung unsicher. Bewusst kein Rot: unklar ist keine Gefahr.

--chart-horizont-ueberfaellig 

Fristhorizont: verstrichen. Verweist auf --urgent, ist kein zweites Rot.

--chart-horizont-90 

Fristhorizont: ≤ 90 Tage.

--chart-horizont-12m 

Fristhorizont: ≤ 12 Monate.

--chart-horizont-spaeter 

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.

--chart-zustand-gefahr 

Gefahr im Verzug.

--chart-zustand-verstrichen 

Frist verstrichen. Orange statt Rot, sonst nicht von „Gefahr“ zu unterscheiden.

--chart-zustand-abwendbar 

Noch abwendbar.

--chart-zustand-offen 

Offen, ohne Fristdruck.

--chart-zustand-unbekannt 

Keine Grundlage. Bewusst unbunt: das ist kein Zustand, sondern sein Fehlen.

--chart-zustand-in-ordnung 

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.

sm · rounded-sm
md · rounded-md
lg · rounded-lg
full · Avatar

Abstand

Abstände kommen vom Layout (flex/grid + gap), nicht vom Element. Die Skala ist Tailwinds Standard; hier ein paar Stufen als Maßstab.

gap-1
0.25rem
gap-2
0.5rem
gap-3
0.75rem
gap-4
1rem
gap-6
1.5rem
gap-8
2rem
gap-12
3rem

Höhe / Elevation

Eine Erhöhungsstufe: die Standard-Kartenfläche. Kein Schatten-Zoo, sondern Fläche plus 1px Rahmen plus dezenter Schatten.

.card-surface
border-border

Grundlage

Typografie

Drei Schriften, selbst gehostet. Überschriften tragen die Display-Grotesk, eng gelaufen; Werte tragen Mono.

design.md §3 Typografie

Skala

Überschriften bekommen text-wrap: balance, Fließtext hält rund 65 Zeichen.

Display · h1Zieglergasse 14
Display · h2Offene Fristen
Sans · KartentitelAufzug, Jahresprüfung
Sans · FließtextDer Prüfbericht liegt der Hausverwaltung vor.
Sans · SekundärZuletzt geändert vor drei Tagen

.eyebrow

Mono, Versalien, gesperrt, gedämpft. Die kleine Zeile über einer Überschrift, die den Kontext benennt. Nie länger als drei Wörter.

Statutarische FristFrist 1 · 2027

.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.

.mononext.config.ts.codenext.config.ts
.monoapp.bauwerksbuchhaltung.com/einladung/9f3c.codeapp.bauwerksbuchhaltung.com/einladung/9f3c

.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.

ObjektFristBetrag
Zieglergasse 1431.12.20271.240,00 €
Mariahilfer Straße 701.03.2030980,50 €
Neubaugasse 22015.09.202712.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.

0.mono — liest sich als Ø
0.stat — eine Null
31.12.2027.mono bleibt für Angaben

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.

design.md §5 Komponenten

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.

Ruhe
Deaktiviert
Ladezustand
Symbolknopf

Input + Label

Fokus ist live (Tab hinein). Der Fehlerzustand trägt Rahmen UND Text, denn Identität hängt nie an der Farbe allein.

Ruhe
Ausgefüllt
Deaktiviert
Bitte geben Sie eine Bezeichnung ein.

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.

Ruhe
Gewählt
Deaktiviert
Deaktiviert, gewählt

Textarea

Ruhe
Deaktiviert

Select

Interaktiv: öffnen Sie das Menü. Radix-basiert, tastaturbedienbar.

Ruhe / offen
Deaktiviert

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.

MHInitialen (Fallback)
Bild

Separator

Objektdaten

Fristen

Hell
Dunkel

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.

design.md §6 Muster

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

Prüfpflichtig. Erste Frist 31.12.2027.

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.

Fristen3
Aufträge2
Dokumente

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

Aufträge

Nur Leserecht

Aufträge, kein Anlegen-Knopf, nicht ein deaktivierter.

Zahlen zeigen

Datenvisualisierung

Das für dieses Produkt Festgelegte. Ausführlich in der dataviz-Systematik.

design.md §7 Datenvisualisierung

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

1 · #2f5bff
2 · #0a9396
3 · #c2660a
4 · #a3348f

Dunkel

1 · #6b86f5
2 · #12968f
3 · #c67d1c
4 · #c04fa8

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.

Wie verteilen sich die Objekte dieses Mandanten auf die §128a-Fristen?
Frist 1 · ≤ 1918
24
Frist 2 · 1919–1945
15
Ausgenommen · ≥ 1946
38
Unklar
6

Sprache

Schreibweise

Zeigen statt erklären: jede Regel neben dem Satz, den sie ablehnt.

design.md §8 Sprache

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