Fünf Fachkrankenschwestern aus Hamburg-Hamm — von der Grundpflege bis zur Beatmungspflege in der eigenen Wohnung.
Ein offener Bogen trägt jede Sektion — die Hand aus dem Signet. An seiner offenen Seite lösen sich einzelne Zellen: eine Pflegekraft, ein Besuch, ein Zuhause. Der Bogen schliesst nie, und er wird nie zur Tapete: höchstens einer pro Bildschirm, nie hinter Fliesstext.
Kontur — 2 px in #e81f11 (Leuchtfassung), Sektionsübergänge
Zellen — gerundete Sechsecke aus dem Herz-Mosaik. Sie zeigen immer eine echte Zahl: fünf Fachkrankenschwestern. Gefüllte Zelle #d00000, Ziffer weiss (5.70).
Alle Werte stammen aus brand-measurements.json (Messung am Kundenlogo, 09.09.2026). Rot ist in fünf, Navy in vier Stufen zerlegt — kein Ton macht zwei Jobs. Die Leuchtfassung des Logo-Rots zieht Linien, die abgedunkelte Tragfassung trägt die Knöpfe: dieselbe Marke, zwei Aufgaben.
#f7efee
Trägt ~72 % der Fläche. Jede Sektion ohne eigene Farbe.#f7f4f3
Hebt vom Grund ab. Nie Sektionsfläche.#f8e1dd
Ruhende Zellen, Bildplatzhalter. Trägt nie Text.#ffd0c8
Die eine gefüllte Handbogen-Fläche im Hero.#e81f11
Kontur 2 px, Icon, Pflichtfeld-Punkt. Nie Schrift, nie Knopf.#d00000
Jede Pillenfüllung, jede rote Schrift. Weiss darauf: 5.70.#631e17
Hover und Pressed der Aktion. Nie heller, immer tiefer.#e7e7f1
Hover-Füllung der Kontur-Pille und der Nav-Links.#333247
Das eine Band «Wir fahren zu Ihnen». Fokusring.#45445a
Stadtteil-Chips, nur innerhalb des Bandes.#37364b
Die dunkelste Fläche der Seite. Nur dort.#271d1c
Alle Überschriften und Fliesstext. Kein Schwarz.#625755
Lead, Meta, Bildunterschrift. Nie unter 16 px.| Paar | Ratio | AA | Regel |
|---|---|---|---|
Schrift auf Grund #271d1c / #f7efee | 14.5 | AAA | überall erlaubt |
Schrift auf Karte #271d1c / #f7f4f3 | 15.01 | AAA | überall erlaubt |
Nebentext #625755 / #f7efee | 6.15 | AA | nie unter 16 px |
Navy auf Grund #333247 / #f7efee | 10.98 | AAA | Eyebrow, Kontur-Pille, Links |
Weiss auf Navy #ffffff / #333247 | 12.44 | AAA | Band und Footer |
Weiss auf der Aktion #ffffff / #d00000 | 5.70 | AA | jedes CTA-Label — in jeder Grösse, ohne Ausnahmeregel |
Rot als Schrift #d00000 / #f7efee | 5.03 | AA | Fehlerhinweis, hervorgehobene Zahl |
Weiss auf der Tiefe #ffffff / #631e17 | 12.15 | AAA | Hover und Pressed der Pille |
Leuchtfassung als Linie #e81f11 / #f7efee | 4.00 | Grafik ✓ | 2-px-Kontur und Icon (WCAG 1.4.11 fordert 3.0) — nie Schrift |
Gesperrt #f63626 · #fdf6f4 | 3.84 / 3.59 | nein | kommen im Bau nicht vor — ersetzt durch #d00000 und #f7f4f3 |
Vollkorns breite, runde Bögen sind das typografische Echo der gerundeten Zellen und der tragenden Hand. Karla hält Telefonnummern, Pflegegrade und Zeiten nüchtern daneben, damit die Wärme nicht in Süsslichkeit kippt.
Zu Hause bleiben
H1 · Vollkorn 600 · 68 px Desktop / 44 px mobil · 1.06 · −0.02em
Beatmungspflege in der Häuslichkeit
H2 · Vollkorn 600 · 30 / 26 px · 1.18 · −0.01em
Pflegeberatung nach §37.3
H3 · Vollkorn 600 · 21 / 20 px · 1.25
«Wir sind fünf Fachkrankenschwestern.»
Zitat · Vollkorn 400 italic · genau einmal pro Seite
Lead · Karla 400 · 21 / 18 px · 1.55 · Farbe #625755 — der eine Absatz unter der Überschrift.
Fliesstext · Karla 400 · 18 / 17 px · 1.6 · maximal 68 Zeichen pro Zeile, damit das Auge die Zeile ohne Suchen findet. Silbentrennung ist an, weil Wörter wie «Fachkrankenschwestern» sonst mobil aus dem Satzspiegel laufen.
Eyebrow · Karla 700 · 13 px · +0.10em
040 840 500 15 · Karla 700 · 19 px — Ziffern sind tabellarisch gesetzt
Fahren Sie mit der Maus darüber und drücken Sie sie — Hover, Active und Fokus sind hier live. Tab-Taste zeigt den Fokusring.
| Zustand | Primär | Sekundär |
|---|---|---|
| default | Fläche #d00000, Schrift #ffffff 19/700, Schatten Ebene 1 | transparent, 2 px #333247, Schrift #333247 |
| hover | #631e17, Ebene 2, translateY(−1px) | Fläche #e7e7f1, Ebene 1 |
| active | #631e17, kein Schatten, scale(0.98) in 0.12 s | #e7e7f1, scale(0.98) |
| focus-visible | Ring 0 0 0 3px #f7efee, 0 0 0 5px #333247 — erst Abstand in der Flächenfarbe, dann Navy | |
| disabled | Fläche #f7efee, Schrift #baacaa, Rand #d5cccb, cursor:not-allowed | |
Intensivpflegerische Versorgung zu Hause statt in der Klinik — von examinierten Fachkrankenschwestern mit Intensiverfahrung.
Körperpflege, Ernährung, Mobilität — die Eyebrow-Zeile bleibt als reservierter Slot stehen, damit alle Kartentitel auf einer Grundlinie sitzen.
| Ebene | Wert | Wann |
|---|---|---|
| 0 · flach | none | Sektionen, Band, Footer, Bildplätze, Chips |
| 1 · Karte | 0 1px 2px rgb(39 29 28 / .04), 0 6px 16px rgb(39 29 28 / .06) | Karten, Kopfzeile, Pille im Ruhezustand |
| 2 · schwebend | 0 2px 4px …/.06, 0 10px 24px …/.10, 0 24px 48px …/.06 | Hover, Schublade, Sticky-Leiste |
Die Schattenfarbe ist immer die Ink-Farbe der Marke — auf warmem Grund liest sich ein kalter Schatten wie Schmutz.
Von der Hammer Landstraße aus. Diese Fläche hat auf der ganzen Seite genau eine Bedeutung — sie sagt, wohin gefahren wird, und sonst nichts.
Wer in einer Belastungssituation anfragt, füllt kein Formular mit neun Feldern aus. markiert ein Pflichtfeld.
Ohne Rufnummer können wir nicht zurückrufen.
Fehler stehen in Schriftfarbe, nicht in Rot — #d00000 trägt das Signal (Icon und Feldrand), weil rote Schrift auf hellem Grund die Messung nicht besteht.
Nähe bedeutet Zugehörigkeit. Was zusammengehört, klebt; was nicht zusammengehört, trennt deutlich. Verhältnis in-Gruppe : zwischen-Gruppen : Sektionen = 8 : 24 : 72 = 1 : 3 : 9.
| Token | px | Balken | Einsatz |
|---|---|---|---|
--space-1 | 8 | Label → Wert, Icon → Text, Eyebrow → H2 | |
--space-2 | 12 | H1 → Lead, Feld → Fehlermeldung | |
--space-3 | 24 | zwischen Gruppen: Text → CTA, Karte → Karte | |
--space-4 | 40 | grosse Trennung innerhalb einer Sektion | |
--space-5 | 72 | zwischen Sektionen — Standard | |
--space-6 | 112 | Kapitel-Atempause, max. 2× pro Seite |
Solange keine echten Aufnahmen vorliegen, füllen Farbfelder mit dem Handbogen die Bildplätze — masshaltig, damit ein späteres Foto sie 1 : 1 ersetzt. Keine Stock-Senioren, keine Kittel, keine Klinik.
