01 — Hero
Psychologisches Coaching bei Adam Dzielak. Helmbrechts, online, deutschlandweit. For a Better Life.
Im Logo trennt eine Haarlinie den Menschen von dem, was er tut. Auf der Site wird sie zum Takt: über ihr die Kapitelziffer, unter ihr der nächste Gedanke. «Einen Strich darunter ziehen» ist genau das, wofür Menschen zu einem Coach gehen.
Die Länge wächst mit dem Kapitel — 10 % im Hero, 100 % beim Erstgespräch. Wer liest, sieht den Fortschritt, ohne dass irgendwo «5 von 10» steht.
Kapitel 01 · 10 %
Kapitel 03 · 30 %
Kapitel 05 · 50 %
Kapitel 07 · 70 %
Kapitel 10 · 100 %
Schwere, gekehlte Serif in Anthrazit. Das Rot ist ein Zeichen, kein Flächenton — ein Herz in der Wortmitte. Darunter die Haarlinie und «Psychologisches Coaching» weit gesperrt in Versalien.
Daraus folgt alles: Serif als Display, Sans im Fliesstext, Radius 0, Versal-Sperrung für alle Mikro-Labels — und genau ein Rot-Ereignis pro Bildschirm.
For a Better Life ♥
Jeder Wert stammt aus dem Logo. Die Kontraste stehen in der Matrix — sie werden nicht behauptet. Und die Rollen sind getrennt: die Logofarbe #f24334 bleibt unangetastet, sie trägt dunkle Schrift statt weisser (#120b0a, 5.22:1) und bekommt für roten Text eine zweite Abstufung derselben Farbe (#ca0a05, 5.53:1).
| Paar | Ratio | Regel |
|---|---|---|
| Ink auf Tag-Grund | 15.38:1 | AAA — Fliesstext |
| Tag-Grund auf Nacht | 11.85:1 | AAA — Nacht-Text |
| Ink weich auf Tag-Grund | 6.53:1 | AA — Nebentext |
| #120b0a auf Marke #f24334 | 5.22:1 | AA — Knopf-Label, jede Grösse |
| Weiss auf Marke #f24334 | 3.73:1 | verboten — darum #120b0a |
| Marke #f24334 als Text | 3.49:1 | verboten — Text ist #ca0a05 |
| #ca0a05 auf Tag-Grund | 5.53:1 | AA — Marke als Schrift |
| #ee9b8e auf Nacht | 5.86:1 | AA — das eine rote Wort nachts |
| #8e7e7b auf Tag-Grund | 3.63:1 | nur Linie, nie Fliesstext |
display-hero · Instrument Serif 400 · 128→88→56→38 px · 1.0 · −0.04 em
Aber lebst du?
display-chapter · 88→64→44→32 px · 1.04 · −0.03 em
Es ist selten die eine grosse Sache.
display-md · 56→44→34→28 px · 1.08
Coaching Psychologie
display-quote · Instrument Serif Italic · 40→24 px
For a Better Life
heading · Hanken Grotesk 700 · 24→20 px
Wie das Erstgespräch abläuft
lead · Hanken Grotesk 400 · 24→19 px · 1.5
Du musst nichts vorbereiten. Zwei Sätze reichen, damit ich weiss, worum es geht.
body · Hanken Grotesk 400 · 18→17 px · 1.6
Psychologisches Coaching heisst hier: wir schauen uns genau an, was dich festhält, und arbeiten an dem, was sich ändern lässt. Kein Programm, keine Pauschale, keine Versprechen. Coaching ist keine Psychotherapie und ersetzt keine ärztliche Behandlung.
eyebrow · Hanken Grotesk 700 · 15 px · +0.12 em
09 — Das Erstgespräch
micro-nav · 12 px · +0.1 em
Weg · Mensch · Rahmen · Erstgespräch · Kontakt
| State | Fond | Label |
|---|---|---|
| default | #f24334 — Logofarbe, unverändert | #120b0a · 5.22:1 AA |
| hover | #ca0a05 | #fdf6f4 · 5.53:1 AA |
| active | #622019 + translateY(1px) | #fdf6f4 · 11.30:1 AAA |
| focus-visible | wie default | 2 px Ring #271d1c, Offset 3 px |
| disabled | #cbc0bf | #625755 |
Kein Rahmen, kein Radius, kein Schatten — im Hover wächst der Strich von 20 % auf 100 %. Der einzige animierte Strich der Site.
Ebene 0 — Papier
kein Schatten. 97 % aller Elemente.
Ebene 1 — Aufgelegt
Nur mobile CTA-Leiste und Nav nach dem Hero.
Ebene 2 — Schwebend
Nur das Menü-Panel unter 768 px.
Tiefe entsteht hier aus Grundwechsel und Linie, nicht aus Schatten — und wenn, dann als zwei bis drei weiche Layer.
Ein echtes Porträt oder keines.
Weiches Seitenlicht aus einem Fenster, später Nachmittag. Entsättigt bis auf einen warmen Rest: Lichter laufen Richtung Papierweiss, Tiefen Richtung Nacht-Anthrazit. Kein gesättigtes Rot im Bild — das Rot gehört der Marke.
Nie: Stockfotos, generierte Gesichter, Pusteblumen, Kerzen, Sitzkreise, Hände auf Knien.
So läuft es ab
| Was | Ein Gespräch, in dem wir klären, ob wir zusammenpassen. |
|---|---|
| Dauer | — vom Kunden zu bestätigen — |
| Preis | — vom Kunden zu bestätigen — |
| Wo | Luitpoldstraße 27, 95233 Helmbrechts — oder online. |
| Antwort | innerhalb von 24 Stunden |
Das helle Band der Richtung läuft hier umgekehrt: Die Nacht steht genau dort, wo entschieden wird. Dunkelanteil der Site: 30 % (Korridor 0–35 %).