Gestaltung
Der gemeinsame App-Rahmen
Toolbar, Tabs und Arbeitsfenster: die konkrete Vorlage für rima.System und weitere eigene Webanwendungen.
rima.System · Beispiel
Übersicht
im vertrauten Rahmen.
Der Inhalt wechselt. Toolbar, Tabs und das abgerundete Arbeitsfenster bleiben wiedererkennbar.
Bedienbares Gestaltungsbeispiel. Die echte Anwendung ergänzt ihre eigenen Routen, geschützten Zustände und die vollständige Fokusführung des Mobilmenüs.
Maße, die überall gleich bleiben.
| Baustein | Standard | Anwendung |
|---|---|---|
| Werkzeugleiste | 64 px | Icons 20 / 23 px; Ziele 48 × 44 px, 14 px Radius |
| Toolbar-Gruppen | 24 × 1 px | Kurzer Trennstrich, links und rechts 20 px Abstand |
| Kopfzeile | 52 px | Tabs und Toolbar ohne gemeinsame Trennlinie |
| Menüspalte | 240 / 216 px | 216 px bei 761–1100 px Bildschirmbreite |
| Arbeitsfenster | 20 px Radius | 1 px Rand, außen rechts/unten 8 px Abstand |
| Tabs | 10 px Radius | 34 px inaktiv, 40 px aktiv; aktive Breite ab 160 px |
| Mobil | bis 760 px | 60 px Kopfzeile; vollhohes Menü bis 352 px, 64 px Seitenausschnitt |
| Buttons | 44 px Höhe | 10 px Radius, freundliche graue Flächen |
| Glas | 78 % / 24 px | Deckkraft des Chroms / Hintergrundunschärfe |
Gleiche Identität. Gleiches Verhalten.
Die rima-Wortmarke
Die originale Wortmarke rima. verwendet Poppins Bold 700 mit engem Zeichenabstand (-0,025 em). Sie steht in Teal: #007882 im hellen und #2FB6BF im dunklen Farbschema. Toolbar, Tabs und Auswahlflächen verwenden die gemeinsamen neutralen Grautöne.
Ein gemeinsamer Rahmen
Links die feste Werkzeugleiste, oben die geöffneten Seiten, darunter das Arbeitsfenster mit vier runden Ecken und einem feinen Rand. Toolbar und Tabbar bilden eine Fläche ohne Trennlinie am Übergang.
Navigation und Seitenabschnitte
Die Toolbar wechselt Hauptbereiche. Die zusätzliche Menüspalte beginnt unter der Tabbar. Fest geöffnet reserviert sie Platz; eingeklappt darf sie bei Mausabsicht oder Tastaturfokus über dem Inhalt erscheinen. Abschnittslinks stehen beim zugehörigen Bereich im Seitenmenü, auch auf dem Smartphone. Eine zusätzliche feststehende Querleiste über dem Seiteninhalt entfällt.
Monochrome Auswahl
Nicht ausgewählte Symbole sind hellgraue Konturen. Ausgewählte Symbole sind gefüllt und schwarz, im Dunkeln weiß. Nur eine kleine neutrale Fläche markiert den aktiven Hauptbereich. Im Untermenü genügen Textfarbe und Schriftgewicht; keine Auswahlbalken, Verläufe oder Abschnittstrennlinien.
Die Werkzeugleiste gliedern
Am Desktop stehen die Kernbereiche oben. Auf der Website sind das Startseite, Pflege, Versorgung und – erst nach Freigabe – Ärzte & Praxen. Ein kurzer, seitlich eingerückter Strich trennt Fahrdienst, Hausnotruf und Wissen darunter. Symbole messen 20 px inaktiv und 23 px aktiv; die Bedienflächen bleiben 48 × 44 px. Andere Anwendungen übernehmen die Gruppierung für ihre eigenen Haupt- und Zusatzbereiche. Das mobile Menü bleibt eine zusammenhängende Liste.
Tabs gehören zur Anwendung
Eine bereits geöffnete Seite wird wiederverwendet. Aktiver Tab und Toolbar müssen dieselbe Route abbilden. Schließen wählt einen benachbarten Tab; der letzte Tab bleibt erreichbar. Zurück/Vorwärts bleiben innerhalb der Anwendung. Ladefeedback sofort, ohne künstliche Verzögerung.
Mobil eine Sidebar
Der Seiteninhalt scrollt innerhalb einer tatsächlich begrenzten, abgerundeten Fläche unter der Kopfzeile. Die dynamische Viewporthöhe und Safe-Area begrenzen auch Karten und GPU-Inhalte. Bei offenem Menü entfällt der zusätzliche Menüknopf im verschobenen Seitenausschnitt; X und Seitenausschnitt schließen das Menü. Bis 760 px stehen der Sidebar-Knopf mit einem langen und einem kurzen Strich links und rima daneben in einer 60 px hohen Kopfzeile mit Safe-Area. Eine vollhohe Sidebar (maximal 352 px) schiebt die aktuelle Seite nach rechts; mindestens 64 px der Seite bleiben sichtbar. Ein durchgehender 32-px-Radius, 12 px Abstand oben/unten, ein feiner Rand und ein seitlicher Schatten machen die Seite als eigene Fläche erkennbar. Die Suche bleibt im aufgeklappten Menü. Logos, Suche und Schließen liegen auf derselben Mittellinie wie der Menüknopf der verschobenen Seite. Die Menükopfzeile berücksichtigt dafür zusätzlich den 12-px-Seitenversatz und ist 72 px plus Safe-Area hoch; die Einträge beginnen mit 16 px Abstand darunter. Beide Wortmarken sind 22 px groß. Kopfzeilen-Schalter sind runde, neutrale Glasbuttons mit 44 px Bedienfläche. Jeder Hauptbereich erscheint einmal; ein eigener Pfeil klappt Unterpunkte auf. Mobile Tabs und zusätzliche untere Hauptnavigation entfallen. Der sichtbare Seitenausschnitt schließt das Menü und ist sonst für Eingaben gesperrt. Escape, Schließen und Navigation beenden das Menü; Fokus und Scrollen werden zuverlässig wiederhergestellt.
Teal und monochrome Flächen
Geometrie, Typografie, Graustufen und Bedienverhalten bleiben gleich. Teal (#007882, im Dunkeln #2FB6BF) ist die gemeinsame Markenfarbe für Website und Anwendungen. Flächen, Toolbar, Tabs und Auswahlzustände bleiben monochrom. Pink, Weinrot und Magenta gehören nicht mehr zur aktuellen Gestaltung. Statusfarben brauchen zusätzlich einen verständlichen Text oder ein Symbol.
Bewegung und Material
Kurze Menüübergänge, keine Layoutsprünge. Transparenz braucht einen deckenden Fallback. Reduzierte Bewegung und reduzierte Transparenz berücksichtigen. Dekorative Intros enden spätestens nach fünf Sekunden und bleiben danach ruhig.
Anwendungsgrenzen erhalten
Der gemeinsame Rahmen teilt Gestaltung, keine Anmeldungen oder Daten. Nur berechtigte Ziele zeigen; Rechte zusätzlich serverseitig prüfen. Offene Eingaben vor dem Schließen schützen. Cache und Scrollposition pro öffentlichem beziehungsweise angemeldetem Kontext behandeln und bei Konto-/Gruppenwechsel verwerfen.
Kontur oder gefüllt: dieselbe Symbolfamilie.
Die Navigation verwendet diese Paare aus den tatsächlichen Website-Quellen. Im ZIP stehen alle verfügbaren gefüllten Symbole und die passenden Navigationskonturen als SVG bereit.
Für die nächste Anwendung übernehmen.
Das versionierte Paket enthält CSS, eine statische HTML-Layoutreferenz, die vollständige Spezifikation, SVGs, Poppins mit Lizenz und die originalen Website-CSS-Quellen zum Abgleich. Eine SHA-256-Dateiliste macht den Stand nachvollziehbar.
Startauftrag für die rima.System-Session
„Lies die README und spec.json aus rima.AppShell 1.1.6. Übernimm die gemeinsame Hülle mit Toolbar links, Seitentabs oben und dem abgerundeten Arbeitsfenster. Verwende die gelieferten Icons und den gemeinsamen Teal-Akzent. Verbinde den Rahmen mit den bestehenden Routen und Rechten. Prüfe Desktop, Mobil, Hell/Dunkel und offene Eingaben. Noch nichts veröffentlichen.“
Referenzadresse nach Veröffentlichung: rima-pflege.de/dokumentation/app-rahmen. Für eine andere Session eignen sich diese Adresse oder das ZIP. Eine lokal angezeigte localhost-Adresse ist nur auf dem jeweiligen Rechner erreichbar. Das Paket teilt die Gestaltung; es verändert weder die eigenständige System-PWA noch deren Anmeldung oder Datenanbindung automatisch.