HMW – Design-Guide

Das vorhandene HMW-Logo bleibt unverändert. Proportionen erhalten, keine Schatten oder Effekte ins Logo rechnen. Auf ruhigem hellem Grund verwenden und rundum mindestens die Höhe der kleinen Wortmarkenzeile freihalten.

Auf kleinen Bildschirmen passt sich die gemeinsame Headerbreite an. Keine zweite Wortmarke und kein nachgebautes Zeichen pro Unterseite.

Markenorange setzt Akzente und bleibt von der funktionalen Aktionsfarbe unterscheidbar. Weiße CTA-Schrift steht mit mindestens 19,2 Pixeln und Gewicht 700 auf kräftigem Orange; dafür wird der Großschrift-Kontrast von mindestens 3:1 geprüft. Kleine Textlinks nutzen die dunklere funktionale Rolle. Fließtext steht dunkel auf Elfenbein, Weiß oder der ruhigen Sekundärfläche.

Eine Fläche hat einen klar gewichteten Hauptweg. Nachgeordnete Wege erscheinen als lesbare Textlinks. Ein oranger Balken hinter Überschriften ist nicht Teil dieser Gestaltung.

Inter wird lokal in den Gewichten 400, 600 und 700 geladen. Überschriften sind kräftig und ruhig, Fließtext bleibt offen und gut lesbar. Die responsive Skala und Lesebreite kommen aus den Tokens.

Pro Seite eine Hauptüberschrift. Hierarchie über Größe, Gewicht und Abstand aufbauen; keine künstlichen Großbuchstabenblöcke für lange Überschriften. Quellen und KI-Bildhinweise bleiben auch mobil sichtbar.

Die gemeinsame Abstandsskala ordnet Absätze, Karten und Abschnitte. Längere Texte bleiben in der Lesebreite. Breite Übersichten nutzen das gemeinsame Raster; die Anzahl sichtbarer Wege wird durch Lebensphasen und Fachgebiete überschaubar gehalten.

Der Hero verbindet Text mit einem echten Maurice-Foto und einer weichen organischen Bildkante. Auf Mobilgeräten werden die Inhalte einspaltig dargestellt. Gesicht und Hund bleiben beim Zuschnitt erkennbar.

Weiße gerundete Karten stehen leicht erhoben auf warmen Flächen. Nur klickbare Karten reagieren mit Hover und Active. Erklärende Hinweise bleiben ruhiger und verwenden eine linke Akzentkante.

Buttons sind abgerundet, aber nicht pillenförmig. Passive Kennzeichnungen können eine Pillenform verwenden; sie erhalten keinen Klickzeiger und keinen Aktionshover.

Die orange Hauptaktion benennt ihr tatsächliches Ziel: lesen, Kontakt aufnehmen oder ein Anliegen besprechen. Eine Anfrage ist keine Buchungsbestätigung. Keine erfundenen Kalenderplätze, freien Erstgespräche oder Notfallzusagen.

Hover, Active und Tastaturfokus werden zentral definiert. Deaktivierte Elemente sind sichtbar passiv und technisch deaktiviert. Diese statische Vorschau hat keinen asynchronen Versand; sie täuscht keinen Erfolg oder Ladevorgang vor.

Das echte Maurice-Foto zeigt die Person. KI-Bilder illustrieren Situationen oder beispielhafte Rassen; sie dienen nicht als Kundennachweis, Vorher-nachher-Erfolg oder Qualifikationsbeleg.

Situationsbilder tragen sichtbar: „KI-generierte Illustration“. Rassebilder tragen: „KI-generierte Illustration · beispielhafte Rassedarstellung“. Alttexte beschreiben das Motiv. Bilder werden lokal eingebunden und beim Build als responsive WebP optimiert; Provenienz und Prüfstatus bleiben nachvollziehbar.

Der Pfeil nach rechts kündigt einen vorhandenen nächsten Weg an. Ein beweglicher Aufklappindikator gehört zu einem Abschnitt auf derselben Seite. Dekorative Zeichen sind für assistive Technik ausgeblendet, der Linktext trägt die Bedeutung.

Keine erfundenen Siegel, medizinischen Symbole oder Auszeichnungen. Neue Icons werden über den vorhandenen Iconvertrag ausgewählt; keine beliebige zusätzliche Iconbibliothek oder extern geladene Schrift.

Die unten berechneten Farbpaare prüfen Textkontrast. Normaler Text benötigt mindestens 4,5:1, große Schrift mindestens 3:1. Orange als dekorativer Markenakzent ist keine Freigabe für kleinen Text auf Weiß.

Interaktive Ziele mindestens 44 × 44 Pixel, sichtbarer Tastaturfokus, sinnvolle Überschriften und native Aufklappbereiche. Bewegungsreduktion wird respektiert. Diese Einzelprüfungen sind keine Zusage einer vollständig auditierten Barrierefreiheit.

Navigation klappt bei Platzmangel in ein natives Menü. Karten und Lesetext passen sich der Bildschirmbreite an; lange Titel dürfen umbrechen. Keine abgeschnittenen Bildhinweise oder horizontalen Textstreifen.

Die Hauptreise bleibt ein überschaubarer Einstieg. Fachartikel liegen im Wissenshub mit Lebensphasen und Querschnittsgebieten. Ein direkter Kontaktweg bleibt ohne Pflichtquiz erreichbar.

Tun: zentrale Tokens ändern, echte Bausteine wiederverwenden, konkrete Kundensituationen zeigen, Inhalte und Fachzuständigkeiten prüfen, passende reale Links setzen.

Vermeiden: seitenweise Sonderfarben, orange Textbalken, unlesbare weiße Kleinschrift auf hellem Orange, austauschbare Linktitel, falsche Sterne oder Siegel und unbeschriftete KI-Bilder.