Die Oberfläche folgt dem bestehenden Velometrik Corporate Design und übernimmt die nüchterne, technische Sprache der aktuellen Website. Grün ist Erkennungs- und Signalfarbe; dunkles Grau trägt Information und Struktur.

Das hochgeladene Velometrik-Fahrradsymbol ist das verbindliche Standard-Favicon für jede Velometrik-Website und Webanwendung. Es wird nicht umgefärbt, beschnitten, gespiegelt oder durch projektspezifische Symbole ersetzt.

Die fünf Corporate-Design-Farben bilden die Basis. Funktionale Zustände ergänzen diese Palette nur dort, wo die Semantik es verlangt. Normale Textinhalte werden nicht in Velometrik-Grün gesetzt, weil der Kontrast auf Weiß für kleinen Text nicht ausreicht.

Ruda strukturiert die Oberfläche. Source Sans Pro trägt Inhalte, Formulare, Tabellen und längere Texte. Zahlenwerte verwenden tabellarische Ziffern, sobald sie spaltenweise verglichen werden.

Das System basiert auf einem 4-px-Raster. Standardkomponenten nutzen bevorzugt 8, 12, 16, 24, 32, 48 und 64 px. Innenabstände bleiben innerhalb einer Komponente konsistent.

Die Hauptnavigation orientiert sich an der aktuellen Velometrik-Website: klare Kategorien in Versalien, aktive Bereiche durch eine grüne Linie. Interne Tools dürfen kompakter sein, behalten aber dieselbe Logik.

Alle Komponenten werden projektübergreifend mit denselben Zuständen umgesetzt. Hover, Focus, Active und Disabled sind Pflichtzustände, nicht optionale Detailarbeit.

Primäre Aktionen sind grün mit dunkelgrauer Schrift. Weiß auf dem Corporate-Grün wird für normalen Buttontext vermieden, da der Kontrast zu gering ist. Pro View sollte eine primäre Aktion dominieren.

Labels stehen immer sichtbar oberhalb des Feldes. Placeholder ersetzen niemals Labels. Einheiten werden als Add-on dargestellt. Fehlermeldungen stehen direkt am betroffenen Feld.

Checkboxen für Mehrfachauswahl, Radios für genau eine Option und Switches nur für unmittelbar wirksame Ein/Aus-Zustände. Keine Switches für Aktionen, die erst gespeichert werden müssen.

Cards gruppieren zusammengehörige Inhalte. Sie ersetzen keine komplette Seitenstruktur. KPI-Kacheln beginnen mit einer klaren oberen Akzentlinie und zeigen Zahl, Einheit und Kontext.

Statusfarben transportieren Semantik und werden immer zusätzlich durch Text oder Icon gekennzeichnet. Farbe allein ist kein ausreichender Informationsträger.

Tabellen sind der Standard für vergleichbare technische Werte. Zahlen rechtsbündig, Einheiten konsistent, Kopfzeile klar abgegrenzt. Hover dient Orientierung, Auswahl bekommt einen grünen linken Marker.

Velometrik-Anwendungen benötigen eine eigene Darstellungslogik für Messwerte. Name links, Wert mit Einheit klar ausgerichtet, Status separat. Rohdaten und Ergebnisdaten werden visuell nicht vermischt.

Fortschritt wird sichtbar, aber nicht verspielt. Bekannte Dauer: Progressbar. Unbekannte Dauer: Spinner oder Skeleton. Bei Messungen sollte zusätzlich ein Klartextstatus angezeigt werden.

UI-Icons sind einfache Outline-SVGs mit 24 × 24 px ViewBox, 2 px Strichstärke, runden Enden und currentColor. Sie dienen Orientierung und ersetzen keine verständliche Beschriftung bei wichtigen Aktionen.

Komponenten werden zu wiederkehrenden Interaktionsmustern kombiniert. Die folgenden Patterns sind für Velometrik-Tools verbindliche Ausgangspunkte.

Dialoge unterbrechen den Arbeitsfluss und werden nur für Entscheidungen verwendet, die Aufmerksamkeit verlangen. Toasts bestätigen kurz; kritische Fehler bleiben als Alert sichtbar. Tooltips erklären, nicht reparieren.

Mobile Ansichten sind keine verkleinerten Desktopseiten. Inhalt priorisieren, Spalten stapeln, Tabellen horizontal scrollbar lassen und Hauptaktionen erreichbar halten.

Zielniveau ist WCAG 2.2 AA für Standardoberflächen. Markenästhetik darf Lesbarkeit und Bedienbarkeit nicht verschlechtern.

Die Datei velometrik-ui.css enthält die Design-Tokens und die hier gezeigten Basiskomponenten. Neue Webprojekte sollen diese Werte übernehmen statt eigene lokale Varianten einzuführen.