Brand-System · Richtung A «Rechnung offengelegt»
Nach der Beratung senken meine Kunden 10–20 % ihrer Ausgaben. Deine Dokumente prüfe ich zum Festpreis von 49 €.
Die Zahlentafel · tabellarische Ziffern
TODO vor dem Launch: Bezugsgröße und Zeitraum der 10–20 % sowie der Geltungsbereich des 49-€-Festpreises werden hier belegt. Fehlt ein Wert, fällt die Kachel weg.
Bildmarke
Rund, geschlossen, symmetrisch — die Formsprache verspricht Obhut, nicht Tempo. Weil die Seite durchgehend Radius 0 fährt, wird die Scheibe zum Interpunktionszeichen statt zum Dekor.
Befund: Diese Bildmarke gehört der HTH Delivery GmbH. Paket und Weltkugel werden auf der Beratungsseite nicht gezeigt; bis eine eigene Wortmarke vorliegt, ist die Wortmarke in Crimson Pro die Marke. Nie einfarbig, nie unter 40 px, nie als Favicon-Silhouette.
Farbrollen · gemessen aus dem Logo, nicht gewählt
Rollentrennung — dieselbe Marke, zwei Rollen
Fläche trägt Schrift. #dd8300 bleibt exakt die Logofarbe. Von den zwei möglichen Schriftfarben trägt genau eine: Weiss 2.87 ✗, Ink #1e1f25 5.73 ✓. Also wechselt die Schrift, nicht die Marke.
− 282 € pro Jahr
Marke trägt Schrift. #dd8300 auf hellem Grund misst 2.68 ✗. Statt die Marke zu überschreiben, steht daneben die Ink-Stufe #a65d00 (4.68 ✓ auf #f5f7fd). Zwei Abstufungen einer Farbe, eine Marke.
Verboten: Weiss auf #dd8300 (2.87 ✗) · #dd8300 als Textfarbe auf hellem Grund (2.68 ✗) — auch nicht bei 24 px, die Grosstext-Schwelle wird hier nicht als Ausweg benutzt · #dd8300 als Sektionsfläche · #a65d00 auf #edeff5 (4.36 ✗, dort #503412) · das Überschreiben von --brand-secondary oder --brand-surface · Verläufe zwischen Markentönen · Tailwind-Defaultfarben · jeder Hex ausserhalb von tokens.css.
Typografie · Crimson Pro 300/400 + Hanken Grotesk 400/600
display-hero · Crimson Pro 300 · zh 0.80 → 1.00 · ls −2 → −0.5 px · der eine Hero-Satz
display-section · Crimson Pro 300 · 56/40/32 px · zh 1.05 · ls −1.2 → −0.5 px
display-panel · Crimson Pro 400 · 32/26 px · zh 1.15 · ls −0.6 px
figure-xl · Crimson Pro 300 · 56/42 px · tnum Pflicht · ls −1.5 px
Lead · Hanken Grotesk 400 · 20/18 px · zh 1.55 — die Antwort mit Zahl, 54 % Breite.
Body · Hanken Grotesk 400 · 17/16 px · zh 1.60 · max 66 Zeichen. Hervorhebung läuft ausschliesslich über body-strong (600) — Weight 500 existiert in diesem Projekt nicht, 700 und 800 ebenso wenig, und kursiv gibt es weder in der Serif noch im Grotesk.
eyebrow · 12 px · 600 · ls +0.12em · versal
caption · 13 px · #565962 · Beleg-Zeile unter jeder Zahl
legal · 12 px · #565962 · Pflichtangaben im Fuss
Signature-Motiv
Ein 1-px-gerahmtes Blatt: links die Zeilen, rechts zwei Spalten heute und nach der Prüfung, darunter — getrennt durch einen Strich — die Differenz. Das Blatt, das Hano Moor seit 2004 auf jeden Küchentisch legt.
Regeln: ein Blatt pro Sektion · jede Zahl echt oder als Beispiel
gekennzeichnet · alle Ziffern tnum und rechtsbündig · der Amber-Summenstrich existiert genau
einmal pro Seite (im Hero), im Blatt ist er 2 px #3e4664.
Verbote: nie als Hintergrundmuster oder Wasserzeichen · nie im dunklen Leistungsband ·
nie gekippt, gedreht oder gestapelt — es liegt flach, wie auf einem Tisch.
Beispielrechnung
| Posten | heute | nachher |
|---|---|---|
| Haftpflicht | 128 € | 89 € |
| Hausrat | 214 € | 171 € |
| Berufsunfähigkeit | 948 € | 862 € |
| Kfz | 612 € | 498 € |
| Pro Jahr | 1.902 € | 1.620 € |
Beispielrechnung mit Platzhalterwerten — reale Werte variieren. Lesart und Bezugsgröße der 10–20 % werden vor dem Launch belegt (TODO Kunde).
Leistungen · die einzige dunkle Fläche der Seite (18 % Dunkelanteil)
Ich lege deine laufenden Ausgaben nebeneinander und rechne nach. Nach der Beratung senken meine Kunden 10–20 % ihrer Ausgaben.
Ich prüfe, welche Zuschüsse und Förderungen dir zustehen — und welche du bisher nicht abrufst.
Von der Haftpflicht bis zur Berufsunfähigkeit: ein Überblick über alles, was du bezahlst.
Komponenten · Radius 0 · States echt (fahr drüber)
Knöpfe
btn-primary trägt immer #1e1f25 (5.73 ✓), nie Weiss (2.87 ✗) · hover #d07700 (4.95 ✓) · active zusätzlich scale(0.98) in 0.12s · focus 2 px Ring #3e4664, offset 2 px · kein Schatten auf irgendeinem Knopf, keine Pills, keine Versalien.
Formular · maximal drei Felder
Label über dem Feld, nie als Placeholder · min-height 52 px · focus: 1 px #3e4664 plus 2-px-Ring rgb(62 70 100 / 0.28) · Fehler erst bei blur, Text in #a65d00 (5.02 ✓) · Telefon und WhatsApp stehen als gleichwertiger Nebenweg daneben.
Elevation · die Hairline ist das Tiefensystem
none. Standard: Sektionen, Zeilen, Knöpfe, Felder, Nav, Fuss. 1 px #ccced5 trennt.
0 1px 3px rgb(30 31 37 / 0.06). Gegenrechnung, Zahlentafel.
0 8px 24px rgb(30 31 37 / 0.08), 0 2px 6px rgb(30 31 37 / 0.04). Nur transient: Drawer, Bestätigung.
Spacing · 8er-Skala, Verhältnis 1 : 3 : 9
--space-1 8 · --space-2 12 · --space-3 24 · --space-4 40 · --space-5 72 (Standard-Sektionsabstand) · --space-6 112 (max 2× pro Seite). Mittelwert-Brei (alles ~32 px) ist verboten; Ad-hoc-Pixelmasse ebenso.
Bildstimmung · die Website selbst zeigt keine Fotografie
Nie im Bild: Händedruck · Sparschwein · Münzstapel · Chart-Pfeil · Taschenrechner auf Holztisch · Weltkugel · Paket, Karton, Lieferwagen (Logistik-Semantik der HTH Delivery GmbH) · Stock-Anmutung · Text oder Logo im Bild.
Sprache & Ton · du · nüchtern, rechnend, direkt, zugewandt, unaufgeregt
Konsequentes «du», auch im CTA, im Formular und in Fehlermeldungen. Website-Orthografie de-DE mit ß. Verboten: «Dein Partner für alle Finanzfragen», «maßgeschneidert», «kompetent und zuverlässig», «Vertrauen ist unser Kapital», englische Füllwörter.