Styleguide

Ausgelesen aus der Altseite am 23. September 2026. Jeder Wert ist am gerenderten Original gemessen, nicht aus einem Handbuch übernommen — ein Markenhandbuch liegt nicht vor. Wo die Altseite von guten Regeln abweicht, steht das dabei, mit einem Vorschlag, aber ohne die Marke zu verändern.

Marke

lvkm hessen

Landesverband für Menschen mit
Körper- und Mehrfachbehinderung Hessen e.V.

Feld	Wert
Datei	`logo_lvkm_hessen_.png` · 547 × 150 px · 42,9 KB — liegt unter img/lvkm-logo.png
Vektor-Fassung	liegt nicht vor — das Logo ist nur als Rasterdatei 547 px breit. Für Druck und große Darstellungen fehlt eine SVG- oder EPS-Fassung.
Aufbau	Wortmarke „lvkm hessen", darunter ausgeschrieben, davor ein Zeichen aus drei Punkten und einer geschwungenen Linie

Was die Farbmessung des Logos zeigt. Die Datei enthält genau zwei Farbfamilien: Grau (#AFB4B8 mit 49 % der Bildpunkte, #646B6E mit 13 %) und das Markenrot #A70932 (8 %). Grün kommt im Logo nicht vor. Das Grün der Webseite ist also ein zweiter Akzent der Gestaltung, kein Bestandteil der Bildmarke — für die weitere Arbeit ein wichtiger Unterschied.

Farben

Markenrot #A70932 · im Logo
auf Weiß 7,70:1 · Sättigung 89,8 %

Grün (Akzent) #32A709 · nicht im Logo
auf Weiß 3,15:1 · Sättigung 89,8 %

Text #333333 · 12,63:1 auf Weiß
so rendert die Altseite den Fließtext

Text (Elementor-Vorgabe) #1B1B1B · 17,22:1
im Baukasten hinterlegt, wird aber von #333333 übersteuert

Sekundär #DADADA · 1,40:1
als Fläche und Linie, nie als Text

Weiß #FFFFFF · Grundfläche

Grau (aus dem Logo) #AFB4B8 · Sekundärton der Bildmarke

Grau dunkel (aus dem Logo) #646B6E · zweiter Ton der Bildmarke

Farbe	Wo sie auftritt	Bewertung
#A70932	Überschriften erster und zweiter Ebene, Buttons, Flächen, Logo — die tragende Farbe des Auftritts	Kontrast 7,70:1 auf Weiß: gut. Sättigung 89,8 % über dem Maßstab von 80 %.
#32A709	Akzente im Baukasten hinterlegt und an einzelnen Stellen sichtbar	Kontrast 3,15:1 auf Weiß — für Text zu schwach (nötig sind 4,5:1), taugt nur für Flächen und große Zeichen.
#333333	gesamter Fließtext	12,63:1 — sehr gut lesbar.

Zwei Abweichungen vom eigenen Maßstab, ehrlich benannt. Der Maßstab des Taste Skills sagt: eine Akzentfarbe, Sättigung unter 80 %. Die Altseite hat zwei Akzentfarben (Rot und Grün) mit je ~90 % Sättigung, dazu ein Grün, das als Textfarbe durchfällt. Das Markenrot bleibt unangetastet — es steckt im Logo. Für die weitere Arbeit zwei Vorschläge, die die Marke nicht verändern, nur dosieren:

Rolle	heute	Vorschlag	Wirkung
Markenrot als Fläche	#A70932 (89,8 %)	#A02040 (66,7 %)	7,57:1 auf Weiß — ruhiger, gleicher Farbton
Grün, wenn Text darauf liegt	#32A709 (3,15:1)	#2A6B14 (6,54:1)	wird texttauglich, Grün bleibt grün

Schriften

Rolle	Schrift	Gewichte	Herkunft
Alle Überschriften, Fließtext, Zahlen	Signika	300, 400, 500, 600, 700	Markenschrift der Altseite
Auszeichnungen, große Überschriften	Signika Negative	300–700	Markenschrift der Altseite
Unternavigation	Oswald	200–700	geladen, kaum sichtbar
Hauptnavigation	Fira Sans	100–900, mit Kursiv	geladen, kaum sichtbar
Beitragstitel	Montserrat	100–900, mit Kursiv	geladen, kaum sichtbar

In der Kopie bereits behoben: Die Altseite lädt 276 Schriftregeln von fonts.googleapis.com — fünf Schriftfamilien, alle Schnitte, alle Sprachsätze, dazu die IP-Adresse jedes Besuchers an Google. In der Kopie liegen Signika und Signika Negative lokal im Projekt (assets/fonts/, 4 Dateien, 149 KB). Oswald, Fira Sans und Montserrat sind bewusst nicht mitgenommen: Sie tragen den Auftritt nicht, und ohne sie sinkt die Ladezeit.

Typografie — am Original gemessen

Das Leben ist bunte Vielfalt

Überschrift 1 · Signika 500 · 76,8 px · Zeilenhöhe 84,5 px · #A70932

Glück kann man teilen, Sorgen auch

Überschrift 2 (groß) · Signika Negative 700 · 53 px · #A70932

Unsere Angebote richten sich an alle Menschen

Überschrift 2 · Signika 700 · 29 px · #333333

Freizeit für ALLE

Überschrift 3 · Signika 700 · 21,1 px

Wir engagieren uns für eine gleichberechtigte gesellschaftliche Teilhabe von Menschen mit Behinderung.

Fließtext · Signika 400 · 19,2 px · Zeilenhöhe 26,9 px · #333333

Montag bis Freitag von 9 – 14 Uhr. › kleinere Textgröße · 15 px

Mehr Info »

Schaltfläche · Signika 400 · 15 px · #A70932

Element	Schrift	Grad	Gewicht	Farbe
Überschrift 1	Signika	76,8 px (4,8 rem)	500	#A70932
Überschrift 2, groß	Signika Negative	53 px	700	#A70932
Überschrift 2	Signika	29 px	700	#333333
Überschrift 3	Signika	21,1 px	700	#333333
Überschrift 4 (auf Flächen)	Signika	24 px	300	#FFFFFF
Fließtext	Signika	19,2 px (1,2 rem)	400	#333333
Fließtext klein	Signika	15 px	400	#333333
Aufzählung	Signika	19,2 px	400	#333333
Schaltfläche	Signika	15 px	400	#A70932
Bildunterschrift	Signika	16 px	400	#333333

Die Grade sind nicht frei gewählt, sondern folgen einem System: 1,2 rem = 19,2 px ist die Grundgröße des Fließtextes, die Überschriften stehen bei 4 rem (Standard) und 4,8 rem (Startseite), die zweite Ebene bei 1,8 bis 3,3 rem. Die Schriftfamilie ist durchgängig Signika; Signika Negative erscheint nur bei den großen roten Überschriften.

Dunkelmodus

Die Altseite hat einen Dunkelmodus (Plugin WP Dark Mode), umschaltbar über einen Schalter unten rechts. Er ist in der Kopie funktionsfähig. Die Farben des Modus sind im Plugin hinterlegt, nicht im Markenkontext entworfen:

Rolle	Wert im Dunkelmodus
Grundfläche	#1A1A1C
Text	#F0F0F0
Flächen	#ECECEC
Akzent	#32B1F4 (Blau) und #F0F0F0 — nicht das Markenrot

Auffällig: Im Dunkelmodus wechselt der Akzent auf ein Blau (#32B1F4) und ein Orange (#EA580C) — Farben, die im hellen Auftritt überhaupt nicht vorkommen. Das Markenrot trägt auf dunklem Grund nicht (7,70:1 auf Weiß heißt auf #1A1A1C nur etwa 2:1). Für einen Neubau wäre ein aufgehelltes Rot die stimmigere Lösung — im Styleguide dieser Projektseite ist es mit #E8698A bereits so umgesetzt.

Kacheln angleichen — drei Varianten

Die Angebote stehen heute in zwei verschiedenen Kachel-Systemen: oben zwei breite Kacheln (eine mit Grafik, eine mit Foto), darunter drei Kacheln mit Fotos. Dazu kommen die Kacheln in der Randspalte, die bei jedem Aufruf wechseln. Das wirkt unruhig, und die Reihen stehen nicht bündig, weil die Textlängen unterschiedlich ausfallen. Hier sind drei Wege, das zu vereinheitlichen — jeweils mit echten Inhalten der Altseite, damit die Wirkung vergleichbar ist.

Variante A — Ein Raster, ein Bildformat

Alle Kacheln bekommen dasselbe Bildverhältnis (16:9, beschnitten). Der Text darunter ist auf zwei Zeilen begrenzt, der Verweis sitzt immer am unteren Rand. Reihen stehen exakt bündig, egal wie lang die Texte sind.

Vater Kind Wochenende

Ein ganz besonderes Wochenende, speziell für Väter und ihre Kinder mit Behinderung.

mehr Info »

Wildschweinroute

Der Naturlehrpfad des Naturpark Taunus ist öffentlich und allen zugänglich.

mehr Info »

Beratung

Individuelle Unterstützung für Ratsuchende, die in der Verständigung unsicher sind.

mehr Info »

Wann: wenn Bildmaterial in guter Qualität für alle Angebote vorliegt. Vorteil: die ruhigste und schnellste Fassung, Reihen immer bündig. Achtung: Grafiken und Logos werden im 16:9-Zuschnitt angeschnitten — sie gehören dann in Variante B.

Variante B — Gleiche Höhe, Bild bleibt frei

Die Kachelhöhe ist fest, das Bild darf sein eigenes Format behalten (Grafik, Logo oder Foto — vollständig sichtbar, nicht beschnitten). Der Text sitzt unten am Kachelrand, der Verweis darunter. Das erlaubt gemischtes Material, ohne dass die Reihen ausfransen.