Sorgen-Glück — Brand-System

Ambulante Pflege in Hamburg

Damit deine Mutter dort bleiben kann,
wo sie zu Hause ist.

Wir sind fünf examinierte Fachkrankenschwestern und fahren zu euch nach Hause — von der Grundpflege bis zur Beatmung in der Häuslichkeit.

Rangfolge statt Gleichrang: eine gefüllte Pille, eine Kontur, ein Textlink.

Die eine gefüllte Sichel — Bildplatz 3:4 für das Porträt der Inhaberin.
Fläche #ffd8a2

Signature-Motiv

Der Stützbogen

Die Sichel aus dem Signet, aus dem Logo herausgelöst und auf Sektionsgrösse gezogen: eine 2-px-Kontur in Amber, die oben offen bleibt und nie zum Kreis geschlossen wird. Ein Bogen stützt, indem er daneben steht und offen bleibt — er schliesst nicht ein wie ein Kreis und trägt nicht von oben wie ein Dach.

Gefüllt genau einmal (Hero), als Kontur genau dreimal (Team · Leistungen · Anfrage).
Nie zwei sichtbare Bögen in einer Bildschirmhöhe.
Nie geschlossen, nie gespiegelt-doppelt, nie als Muster, nie hinter Fliesstext, nie auf dem Navy-Band.

Farbe

Rollen — jede Stufe hat genau einen Job

Alle Werte sind aus dem Logo gemessen. Kontrastwerte stammen aus der Messmatrix, nicht aus einer Behauptung.

Grund--brand-surface-alt · #faefe4 75 % der Fläche. Jede Sektion ohne eigene Rolle. ink/surface_alt = 14.39 (AAA)

Ruhefläche--brand-surface · #fbf7f2 Karten, Felder, gescrollter Header. ink 15.29 · ink_soft 6.57 (AA)

Warme Karte--brand-primary-3 · #ffe5c4 Kartenfüllung, heller Bildplatz. Text darauf nur ink.

Sichel-Fläche--brand-primary-4 · #ffd8a2 Nur die Hero-Sichel und der tiefe Bildplatz. Trägt keinen Fliesstext.

Bogen-Akzent--brand-accent · #e89a29 Der Stützbogen als Kontur, Zier-Marker, Dekor-Icons. Nie Schrift, nie Knopffläche, nie Bedienrand: 2.04 auf Creme, Weiss darauf 2.31.

Ocker — die Aktionsfläche--brand-primary (= --brand-primary-11) · #9f5d00 CTA-Füllung mit weisser Schrift (5.20), Amber-Text auf Creme (4.59) und Ruhefläche (4.87), Fehlerrand. Dieselbe Amber-Achse wie das Signet, eine Stufe tiefer — damit sie Schrift trägt.

Signet — ohne Job--brand-primary-9 · #f6a32d Die Farbe des Logos. Gesperrt als Primär und als Akzent: 1.93 als Schrift auf #fbf7f2, 2.06 unter weisser Schrift. Sie lebt in der Logodatei und nirgends sonst.

Ocker tief--brand-primary-12 · #4b361e Hover und Active der Pille (Weiss darauf 11.38), Hairline in der warmen Karte.

Zäsurfläche--brand-secondary · #14537f Genau eine Bedeutung: «Wir fahren zu dir». Weiss darauf = 8.16 (AAA); als Text auf surface = 7.65 (AAA)

Fussfläche--brand-secondary-10 · #00436e Nur der Footer — die dunkelste Fläche. Trennt Fuss vom Band.

Hinweisfläche--brand-secondary-2 · #e7f1fa Max. ein Block pro Seite, Text ink ab 17 px.

Text--brand-ink · #251f18 Alle Überschriften und aller Fliesstext. Auch der Fokusring.

Nebentext--brand-ink-soft · #5f5850 Nur auf #fbf7f2, nie unter 15 px (6.57 = AA, nicht AAA).

Amber-Leiter

3 · Karte

4 · Sichel

9 · Signet (kein Job)

10 · Bogen

11 · Aktion

12 · Hover

Navy-Leiter

2 · Hinweis

9 · Band / Link

10 · Fuss

12 · Hairline

Die Rollentrennung — der Kern dieser Marke: Das Signet-Amber #f6a32d misst als Schrift auf #fbf7f2 nur 1.93 und trägt weisse Schrift bei 2.06. Es bekommt deshalb keine Rolle im System und lebt ausschliesslich in der Logodatei. Getauscht wurde nicht die Farbe, sondern die Stufe — bis in die Token hinein: --brand-primary ist #9f5d00 und --brand-on-primary ist #ffffff, gemessen 5.20; als Schrift auf der Ruhefläche steht dieselbe Farbe bei 4.87, auf Creme bei 4.59 — beide AA. Hover #4b361e (11.38). Die helle Logofassung bleibt als --brand-accent #e89a29 für Linien, Icons und kleine Flächen. Zwei Abstufungen einer Farbe sind normale Markenarbeit; ein unlesbarer Knopf wäre es nicht. Gesperrt: #f6a32d und #e89a29 als Knopffläche, Schrift oder Bedienrand · #9f5d00 als Text auf #ffe5c4 (4.27) · dunkle Schrift auf der Pille (3.14) · #5f5850 unter 15 px · jede Tailwind-Defaultfarbe · jeder Verlauf.

Typografie

Young Serif (Display) · Karla (Body)

Young Serifs breite, fast kreisrunde Bögen und der niedrige Strichstärkenkontrast sind das typografische Echo der zwei Signet-Sicheln; Karla hält Zeiten und Rufnummern nüchtern daneben. Young Serif hat genau einen Schnitt (400) und keine Kursive — Hierarchie läuft über Grösse, Farbe und Font-Wechsel, nie über Gewicht. Karla-600 existiert nicht, font-synthesis: none ist Pflicht.

Hero-Display · Young Serif 400 · 64/38 px · LH 1.08 · −0.02em

Damit sie zu Hause bleibt

H2 Sektionstitel · Young Serif 400 · 38/28 px · LH 1.15 · −0.015em

Fünf Fachkrankenschwestern

H3 Kartentitel · Young Serif 400 · 22/20 px · LH 1.30 · −0.005em

Beatmung in der Häuslichkeit

Zitat · Young Serif 400 aufrecht · 24/20 px · LH 1.45 — ausgezeichnet durch die Bogen-Marke, nicht durch Kursive. Max. eines pro Seite.

«Alles drum und dran — so, wie wir es selbst für unsere Eltern wollen würden.»

Eyebrow · Karla 700 · 13/12 px · +0.10em · Versalien

Ambulante Pflege in Hamburg

Lead · Karla 400 · 20/17 px · LH 1.55

Ruf an oder schreib uns — wir melden uns innerhalb von ein bis zwei Werktagen bei dir.

Body · Karla 400 · 17/16 px · LH 1.60 · 62–72 Zeichen

Grundpflege, Behandlungspflege, Hauswirtschaft, Wundversorgung, Demenzpflege und Beatmung in der Häuslichkeit — von fünf examinierten Fachkrankenschwestern.

Zahl / Zeit · Karla 500 · 17 px · tabular-nums

Mo–Fr 06:45–17:30 · Sa/So geschlossen · +49 176 21589086

Micro / Legal · Karla 400 · 13 px — immer #251f18, nie #5f5850

Mit dem Absenden stimmst du zu, dass wir dich zu deiner Anfrage kontaktieren.

Bedienelemente

Ein CTA-Format, drei Ränge

Fahr mit der Maus darüber, klick und tabbe durch — die Zustände sind hier echt.

Ocker-Pille (primär)

Radius 9999 · Höhe 52 px (mobil 56) · Fläche #9f5d00, Karla 700/17 in #ffffff (5.20) · hover #4b361e (11.38) + translateY(−1px) + Schatten «schwebend» · active scale(0.98) · focus 3 px Ring in #251f18, Offset 3 px.

Navy-Kontur (sekundär)

Der Hover kippt die Fläche auf #14537f mit weisser Schrift (8.16) — so bleibt jeder Zustand ein gemessenes Paar. Kein Tint, der nicht gemessen ist.

Ghost (tertiär)

Karla 500/17 in #14537f, Unterstrich 1 px / Offset 4 px, hover 2 px in #00436e, focus-Ring mit 6 px Radius.

Flächen

Warm trägt Inhalt, ruhig trägt Auskunft

Bürozeiten

Mo–Fr 06:45–17:30
Sa, So geschlossen

Ruhige Karte #fbf7f2, 1-px-Rand #d3cec8, Schatten «flach». Nie Rand und starker Schatten zugleich.

Hinweisblock. Eine Rufbereitschaft ausserhalb der Bürozeiten vereinbaren wir mit dem Pflegevertrag. Kein «rund um die Uhr».

Fläche #e7f1fa — max. einer pro Seite.

Bildplatz — masshaltig vorbereitet

16:9 · Wohnraum und Gebiet · Radius 24 px · Fläche #ffe5c4 mit Bogen-Kontur #9f5d00.
Es gibt null verwendbare Fotos — ein späteres Bild ersetzt dieses Feld 1:1.

Zielsurface

Die Pflegeanfrage — vier Felder, mehr nicht

Zustände

Pflicht: Rand #9f5d00, Label-Zusatz « · Pflicht».
Fehler: Rand #9f5d00, Feld-Tint rgb(159 93 0 / 0.06), Fehlerzeile Karla 700/15 in #251f18 (15.29) mit Phosphor warning-circle.
Gültig: Rand #14537f.
Fokus: Rand 2 px #14537f + Ring 3 px #251f18, Offset 2 px.
Kein Rot — die Messwerte enthalten keins, und wir erfinden keins.
Erfolg: Karte wird ersetzt durch check-circle 40 px in #14537f, «Danke — deine Anfrage ist da.», Fokus springt auf die Überschrift.

Rhythmus

Die Abstandsleiter

in-Gruppe : zwischen-Gruppen : Sektionen = mindestens 1 : 2-3 : 6+ (8 : 24 : 72). Nähe = Zugehörigkeit. Der Mittelwert-Brei (alles ~32 px) ist verboten.

--space-1 · 8 pxIcon → Text

--space-2 · 12 pxHeadline → Lead

--space-3 · 24 pxzwischen Gruppen

--space-4 · 40 pxGruppentrennung

--space-5 · 72 pxzwischen Sektionen

--space-6 · 112 pxAtempause, 2× pro Seite

Tiefe — 2–3 weiche Layer, warm getönt

flach

0 1px 2px rgb(37 31 24 / .05)

Karte

0 1px 2px / 0 6px 16px

schwebend

0 2px 4px / 0 10px 24px / 0 24px 48px

Bildwelt

Ruhig · häuslich · respektvoll

Weiches Vormittagslicht seitlich vom Fenster, Lichter laufen in Creme statt in Weiss, genau ein tiefblauer Akzent im Bild. Nie: Stock-Senioren, Kittel, Klinikflure, Herz-Motive.

Moodboard: warmes Vormittagslicht in einem Wohnraum