Bausteinkatalog

Farben

Eine Palette, eine Schreibweise: das Token. Nicht bg-blue-600, nicht #2563EB im Style-Attribut — beides kommt heute vor und ist der Grund, warum der Dunkelmodus in beiden Anwendungen wirkungslos ist.

Grundpalette

Acht Werte. «Primär gedämpft» (#DBEAFE) ist gestrichen — es lag auf derselben Helligkeit wie der Rahmen (Kontrast 1.01) und machte keine eigene Aussage; für Hinterlegungen genügt die Info-Fläche #EFF6FF. Grund, Fläche und Rahmen bleiben zu dritt: Die Karte hebt sich durch den feinen Helligkeitssprung und den Rahmen ab.

Grund#F8FAFC

Fläche#FFFFFF

Text#0F172A

Text gedämpft#334155

Text leise#475569

Text sehr leise#94A3B8

Primär#2563EB

Rahmen#E2E8F0

Gefahr#DC2626

Seitenleiste#1E293B

Statusfarben — einmal definiert, überall benutzt

Offen In Bearbeitung Wartend Gelöst Geschlossen Fehler

Offen / Info: #EFF6FF auf #1D4ED8
In Arbeit / Achtung: #FEFCE8 auf #A16207
Wartend / neutral: #F1F5F9 auf #475569
Gelöst / Erfolg: #ECFDF5 auf #047857 — Emerald, nicht Green
Geschlossen: #F8FAFC auf #64748B
Fehler: #FEF2F2 auf #B91C1C

Heute sechs Fassungen von «Erfolg» — green-100, green-50, Badge-outline, drei Roh-Spans und emerald. Sie werden alle durch die Zeile oben ersetzt. Und: Farbe allein trägt nie die Aussage, der Text steht immer dabei.

Schrift

Inter Variable, selbst gehostet — in beiden Anwendungen bereits so. (Diese Seite zeigt die Systemschrift, weil sie ohne Build auskommen soll; Grössen und Gewichte stimmen.)

Die Stufen

18 px · Seitentitel — und die eine Zahl einer Kennzahlkachel

14 px, Gewicht 600 · Abschnitts- und Dialogtitel

14 px · Fliesstext, Felder, Knöpfe, Dialoginhalt

12 px · alles in Tabellen — Kopf, Zelle, Chip, Zahl

12 px, gedämpft · Feldbeschriftungen

12 px, leise · Untertitel und Hilfetexte

11 px · Gruppentitel der Seitenleiste, Titel eines Formularkastens

Vier Grössen: 18 · 14 · 12 · 11. Die Zeilen dazwischen sind dieselbe Grösse mit anderem Gewicht oder anderer Farbe — genau der Kniff, der die fünfte Stufe erspart.

In einer Tabelle gibt es genau eine Grösse: 12 px. Kopf, Zelle, Chip und Zahl — alles gleich gross. Unterschieden wird durch Grossbuchstaben (nur der Kopf), Gewicht, Farbe und Ausrichtung. Warum 12 und nicht 14: Die Ticketliste mit neun Spalten braucht bei 14 px rund 1300 statt 1140 px — auf einem 1440er Laptop müssten zwei Spalten weichen (Entscheid des Auftraggebers, 19.08.2026: beide Bildschirmgrössen sind Normalfall).

11 Pixel sind die Untergrenze. Im Immotool steht text-[10px] 574-mal, text-[9px] 111-mal, vereinzelt bis text-[7px]. Sieben Pixel sind kein Text mehr, sondern ein Muster — und die Menschen, die täglich damit arbeiten, werden nicht jünger.

Zahlen stehen untereinander

mit tabular-nums

ohne — springt

1'234.55
18'900.00
7.05

Betrag: rechtsbündig, font-mono tabular-nums, Schweizer Format 1'234.56
Datum: TT.MM.JJJJ, rechtsbündig, tabular-nums
Leer: «—» in #94A3B8, nie eine leere Zelle

Grundriss

Die Seitenleiste läuft über die volle Höhe und trägt die Marke; die Werkzeugleiste steht nur über dem Inhalt. Die oberste Zeile ist der teuerste Platz der Anwendung — sie gehört den Werkzeugen, nicht der Identität. Beide Anwendungen bauen sie seit dem 19.08.2026 gleich.

Aufbau

Unterhalt

Tickets

Arbeitsaufträge

Einklappen

Platz der globalen Suche

Test AG ⌄

Tickets

Test AG · Meldungen und ihr Stand

Kopf der Leiste: Signet und Wortmarke, verlinkt auf die Startseite, Trennlinie unten
Werkzeugleiste links: globale Suche — solange es keine gibt, bleibt der Platz leer
Werkzeugleiste rechts: Mandantenwähler · Kontextfilter · Papierkorb · Hilfe · Glocke · Hauptaktion · Avatar — Zustandswähler, Icon-Gruppe, Hauptaktion, Konto
Avatar: immer zuletzt, 32 px, Grund #1E293B
Bildlauf: Hülle h-screen overflow-hidden; Leiste und Inhalt scrollen je für sich

Nichts steht zweimal

Der Mandant erscheint genau einmal, als Wähler in der Werkzeugleiste. Im Immotool stand er zusätzlich als stiller Text unter der Wortmarke — zwei Darstellungen desselben Zustands, von denen eine aussieht wie ein Bedienelement und keines ist.

Der Seitentitel gehört ebenfalls nicht in die Kopfzeile: Jede Seite trägt ihn bereits als h1 im Inhalt.

Das Benutzermenü

Mia Beispiel mia.beispiel@verwaltung-beispiel.example.ch

Einstellungen

Abmelden

Auslöser: Avatar mit bis zu zwei Initialen, aria-label="Benutzermenü — {Name}"
Breite: fest w-60 — sonst wächst das Menü mit der Adresse statt sie zu kürzen
E-Mail: gekürzt, voller Wert im title
Reihenfolge: Kopf · Trennlinie · Einstellungen · Abmelden

Seitenleiste

Dunkel, 224 Pixel, einklappbar. Beide Anwendungen verlinken einander im selben Tab — ein Wechsel der Grundfarbe beim Sprung wirkt wie ein Wechsel des Programms. Unterhalt hat am 19.08.2026 nachgezogen.

Aufbau

Verwaltung

Dashboard ↗

Mandanten ↗

Buchhaltung

Inbox 7

Buchungen ↗

Unterhalt

Tickets

Arbeitsaufträge

Anlagen

Breite: 224 px, eingeklappt 56 px, mobil als Schublade 256 px
Grund: #1E293B, Text #CBD5E1
Gruppentitel: 11 px, Grossbuchstaben, #94A3B8, klappbar
Eintrag: px-2 py-1.5 rounded-md, 14 px
Aktiv: Fläche #2563EB, Text weiss, Gewicht 500
Gesperrt: #94A3B8 (der alte Ton #64748B misst hier nur 3.07), kein Zeiger, title erklärt warum
Fremde Anwendung: Pfeil ↗ am Zeilenende

Seitenkopf

Titel links, Aktionen rechts, in derselben Zeile; nur auf dem Telefon (unter 640 px) linksbündig unter Titel und Untertitel, sonst schrumpft der Titel zu «B…». Nie am Ende der Liste.

Immer so

Tickets

Test AG · Meldungen und ihr Stand

Titel: 18 px, 600, #0F172A
Untertitel: 12 px, #64748B
Abstand nach unten: mb-4
Aktionen: size="sm", Icon h-3.5 w-3.5 mr-1, genau ein Hauptknopf
Breite der Seite: voll — oder max-w-3xl auf Lese- und Formularseiten. Sonst nichts.

Zählkachel

Beschriftung, Zahl, Akzentbalken. Sie steht über der Ticketliste (Klick filtert) und im Lagebild der Startseite (Klick führt zur gefilterten Liste) — ein Baustein für beides.

Die Leiste

Höhe: 36 px, einzeilig
Fläche: #FFFFFF mit Rahmen #E2E8F0
Balken: 4 px am linken Rand, Statusfarbe
Beschriftung: 11 px, Versalien, #475569
Zahl: 16 px, Gewicht 600, tabular-nums, rechts
Aktiv: Fläche #EFF6FF, Ring #2563EB, Zahl blau
Zähler 0: bleibt stehen, opacity 0.6

Weisse Fläche UND Rahmen. Bis zum 19.08.2026 stand die Kachel auf #F8FAFC — exakt dem Wert des Seitengrunds — und trug keinen Rahmen. Sie hatte damit keine Kante, nur einen farbigen Strich. Dieselbe Rechnung wie bei den Statuschips: Eine Fläche, die sich um 1.00 vom Grund abhebt, ist keine Fläche.

Einzeilig. Fünf Kacheln mit 18-px-Zahlen unter ihrer Beschriftung sind eine zweite Überschriftenzeile — der Kopf der Seite bekommt mehr Gewicht als ihr Inhalt.

Tabelle

Der häufigste Bildschirm beider Anwendungen. Es gibt drei Frameworks im Bestand — sie bleiben vorerst, aber sie sehen ab jetzt gleich aus.

Werkzeugleiste, Tabelle, Fusszeile

Nummer	Titel	Status	Liegenschaft	Betrag	Erstellt
SB-TI-00124	Wasser läuft aus der Decke im Treppenhaus	Offen	MEG Sonnenhof	1'240.00	19.08.2026
SB-TI-00123	Lampe in der Einstellhalle flackert	In Bearbeitung	MEG Einstellhalle	185.50	18.08.2026
SB-TI-00122	Briefkasten klemmt	Gelöst	MEG Sonnenhof	—	17.08.2026

3 Einträge Seite 1 von 1

Rahmen: rounded-lg border bg-white, Inhalt 12 px
Kopfzeile: bg-slate-50, klebt beim Scrollen, 11 px Grossbuchstaben leise
Zelle: px-2 py-1.5, einzeilig, überlanger Text mit «…»
Überfahren: bg-blue-50/50, aktive Zeile bg-blue-50
Zebrastreifen: keine
Zahlen: rechtsbündig mit tabular-nums
Sortierung: Pfeil nur an der aktiven Spalte, dazu aria-sort

Knöpfe

Vier Arten, zwei Grössen. Dieselbe Handlung sieht überall gleich aus — heute ist «Endgültig löschen» auf der Seite klein und im Dialog gross.

Arten

— nur in Werkzeug- und Filterleisten

Standard: 32 px hoch, rounded-lg, 14 px, Gewicht 500
Klein: 28 px, 12.8 px Schrift — Werkzeug- und Filterleisten
Haupt: genau einer je Ansicht
Gefahr: weiches Rot, nie als Hauptknopf gestaltet
Beschriftung: Verb plus Gegenstand; während der Arbeit sagt der Knopf, was er tut

Formularfelder

Beschriftung immer sichtbar über dem Feld. Ein Platzhalter ist kein Ersatz: Sobald jemand tippt, ist er weg — und mit ihm die Frage.

Zustände

Titel *

Liegenschaft *

Einheit

E-Mail Bitte eine vollständige Adresse eintragen, etwa name@example.ch.

Höhe: 32 px, rounded-lg, Rahmen #E2E8F0
Beschriftung: 12 px, Gewicht 500, immer sichtbar
Pflicht: roter Stern hinter der Beschriftung
Fokus: Rahmen primär plus 3 px Ring
Gesperrt: halbe Deckkraft — und der Grund steht daneben
Fehler: unter dem Feld, sagt was zu tun ist

Auswahl mit Suche — ab acht Einträgen

Kategorie

Wasserschaden / Feuchtigkeit⌄

Gebäude / Dach / Fassade

Gebäude / Fenster / Türen

Gebäude / Wände / Böden

Schwelle: Suchfeld ab 8 Einträgen — so viele passen ohne Scrollen ins Menü
Umlaute: in beide Richtungen: «gebaeude» findet «Gebäude» und umgekehrt
Mehrere Wörter: UND-verknüpft, Reihenfolge egal
Tastatur: Pfeile bewegen, Enter übernimmt, Esc leert erst die Suche
Ohne Treffer: «Nichts gefunden.» — nie ein leeres Menü
Bildschirmleser: combobox mit listbox/option

Heute kann keine der beiden Fassungen alles. Das Immotool hat das ARIA und den Löschknopf, Unterhalt die Umlaut-Toleranz, die Mehrwortsuche und die Tastatur. Der gemeinsame Baustein bekommt beides.

Statuschips

Eine Form für alle: eckig, 12 px, normale Schreibweise, mit Rahmen. Seit dem 19.08.2026 kommt sie aus components/ui/ton.tsx — Statuschip mit einem der sechs Töne. Vorher gab es vier Formen nebeneinander (eckig, rund, Badge, Roh-Span), und allein von «Erfolg» sechs Farbfassungen.

Die eine Form

Offen In Bearbeitung Wartend Gelöst Geschlossen

Meldeportal Intern Im Papierkorb

Baustein: <Statuschip ton="info">Offen</Statuschip> — die Farbe steht nie im Aufruf
Töne: info · achtung · neutral · erfolg · erledigt · gefahr
Form: rounded (nicht rounded-full), px-1.5 py-0.5
Schrift: 12 px, Gewicht 500, normale Schreibweise
Farbe: aus der Statustabelle — nie eine neue Kombination erfinden
Rahmen: Pflicht. Gemessen hebt sich die Fläche von der Tabellenzelle nur um Kontrast 1.03–1.10 ab; beim Überfahren der Zeile fällt das auf 1.00–1.05. Ohne Rahmen bleibt farbiger Text, kein Chip. Technisch ring-1, nicht border — der Ring verändert die Kastengrösse nicht.
Keine Versalien: Grossbuchstaben kosten Breite, die in Tabellen knapp ist. Sie bleiben Spaltenköpfen und Gruppentiteln vorbehalten — Elementen, die keine Inhalte sind.

Eine Farbe, eine Bedeutung. blue-50/blue-700 hiess gleichzeitig «offen», «Meldeportal», «Marke blau» und «Titelbild» — wer den Chip sah, konnte nicht wissen, wovon er spricht. Die Töne heissen jetzt nach der Aussage, nicht nach der Farbe: Wer ton="erfolg" schreibt, entscheidet über die Bedeutung und nicht über den Grünton.

Die vier Rollen je Ton

Ton	Fläche	Text	Rahmen	Akzent	Chip
`info`	#EFF6FF	#1E40AF	#BFDBFE	#3B82F6	Offen
`achtung`	#FEFCE8	#854D0E	#FDE68A	#FBBF24	In Bearbeitung
`neutral`	#F1F5F9	#334155	#E2E8F0	#94A3B8	Wartend
`erfolg`	#ECFDF5	#065F46	#A7F3D0	#059669	Gelöst
`erledigt`	#F8FAFC	#475569	#E2E8F0	#64748B	Geschlossen
`gefahr`	#FEF2F2	#991B1B	#FECACA	#EF4444	Fehler

Variablen: --status-<ton>, -foreground, -ring, -akzent — in beiden Anwendungen wortgleich
Akzent: volldeckend, für Balken und Punkte (Zählkachel, Statuspunkt) — keine Fläche für Text
Grün: Emerald, nicht Green. Unterhalt hatte das schon so; das Immotool benutzte beide nebeneinander.

Dialog

Ein Dialog unterbricht — also fragt er so wenig wie möglich und ordnet, was er fragt. Ab sechs Feldern oder zwei Themen ordnen Kästen mit Titel.

Aufbau mit Kästen

Telefon-Schnellerfassung

Das Wichtigste zuerst. Alles Weitere lässt sich später am Ticket nachtragen.

Was ist passiert

Titel *

Beschreibung

Liegenschaft *

MEG Sonnenhof⌄

Einheit

Ohne Einheit⌄

Wer meldet

Person suchen

Name *

Telefon

Rückruf erwünscht

Ein Hinweis ist 12 px, leise.

Ein zweiter Satz steht als eigener Absatz darunter, mit Luft.

Breite: bis 4 Felder max-w-md · bis 8 max-w-lg · darüber max-w-xl
Kästen: ab 6 Feldern oder 2 Themen: fieldset mit Rahmen, Titel auf der Linie in 11 px Grossbuchstaben; Baustein Formularkasten
Abstände: gap-3 im Kasten, gap-4 zwischen Kästen
Schrift: Beschriftung 12 px · Feldinhalt 14 px · Hinweis 12 px leise · Ankreuzfeld 12 px
Raster: ein oder zwei Spalten — nie drei; Freitext immer volle Breite
Fusszeile: abgesetzt, Abbrechen links, Hauptknopf rechts
Reihenfolge: folgt dem Gespräch, nicht der Datenbank

Meldungen

Ein Kasten, vier Töne. Jede Meldung sagt, was ist und was jetzt hilft.

Die vier Töne

Der Verfolgungslink gilt 14 Tage. Danach fordert die meldende Person selbst einen neuen an.

Ohne Portal-Basis-URL lassen sich keine QR-Aushänge erzeugen. Sie steht in den Einstellungen.

Der KI-Endpunkt war nicht erreichbar. Nach drei Versuchen wurde aufgegeben — «Erneut analysieren» startet einen neuen.

Gespeichert.

Baustein: <Hinweis ton="achtung">…</Hinweis>, optional mit titel und aktion (dem Weg heraus, rechts im Kasten)
Aufbau: rounded-lg border px-3 py-2 text-sm — dieselben Töne wie der Chip, aber border statt ring: Der Kasten steht frei, er muss keine Spaltenbreite schonen
Erfolg: nur, wenn das Ergebnis nicht ohnehin sichtbar ist
Nie: nackter roter Text ohne Kasten

Leer und Laden

Zwei Leerzustände, die man nie verwechseln darf: nichts da — oder nur nichts gefunden.

Bestand leer gegen Filter ohne Treffer

Bestand leer

Noch keine Meldungen erfasst.

Filter ohne Treffer

Keine Meldung passt zu diesen Filtern.

Der häufigste Fehler: beide Fälle mit «Keine Daten» zu beantworten. Wer das liest, obwohl nur sein Filter zu eng ist, sucht an der falschen Stelle. Darum verlangt <Leerzustand> ein art="bestand" oder art="filter" — es gibt keinen Vorgabewert, den man stehen lassen kann. gross macht daraus den Wegweiser für eine ganze leere Seite.

Laden

Regel: Skelettbalken in der Form dessen, was kommt
«Laden…»: nur, wo die Form unbekannt ist
Kreisel: nur auf ganzen Schirmen, etwa der Anmeldung

Häufige Fehler

Alle vier sind im Bestand belegt — sie stehen hier, damit sie nicht wieder entstehen.

Rhythmus im Formular

So nicht

Vier Rasterwechsel, zwei Abstandswerte, drei Felder à 176 px — für eine E-Mail-Adresse zu schmal.

So

Ein Raster, ein Abstand. Freitext voll, Kurzfelder paarweise.

Ankreuzfeld in der Rasterzelle

So nicht

Team

Ohne Team⌄

Bearbeiter Mir zuweisen

Ein Schalter, der wie ein Eingabefeld gerahmt ist.

So

Team

Ohne Team⌄

Priorität

Ohne Angabe⌄

Mir zuweisen

Eigene Zeile im Kasten, 12 px wie die Beschriftungen.

Platzhalter statt Beschriftung

So nicht

Sobald jemand tippt, ist die Frage weg. War das die Telefonnummer der meldenden Person oder die des Hauswarts?

So

Telefon der meldenden Person

Die Beschriftung bleibt stehen.

Sicherheitsabfrage

So nicht

Wirklich löschen?

Natives confirm() — im Immotool an 29 Stellen. Sieht in jedem Browser anders aus, lässt sich nicht übersetzen.

So

Anhang endgültig löschen

«Protokoll-2026-03.pdf» wird aus dem Speicher entfernt. Das lässt sich nicht rückgängig machen.

Zeichen, roter Titel, ein Satz zur Folge, das Verb auf dem Knopf. Der Fokus liegt auf «Abbrechen» — wer den Dialog mit der Tastatur wegdrückt, soll nicht löschen.

Gemessen am Bestand von immotool/frontend und unterhalt/web am 19.08.2026. Die schriftliche Fassung mit Begründungen und der Liste der offenen Nachzüge steht in unterhalt/docs/gestaltung.md.