Brand-System · Richtung A «Modestrecke Haarlinie»
Köln & München · Friseurmeisterin, Visagistin, Typ-Stylistin · seit 27 Jahren
Moodboard
Weiches Fensterlicht, Sättigung ~85 %, kein Text im Bild, kein Marken-Indigo im Motiv.
Farben
Papier trägt die Seite, Indigo ist Signal, Nachtblau der eine dunkle Atemzug. Kein Wert ist erfunden.
--brand-surface · #f5f7fdGrundfläche, ~86 % der Seite. Kontrast zu Tinte: 15.34
--brand-surface-alt · #edeff6Nur Formularfelder. Kontrast zu Tinte: 14.30
--brand-ink · #1e1f25Jeder Text. Auf Papier 15.34 (AAA)
--brand-ink-soft · #565962Captions, Dauer, Trust-Zeile. Auf Papier 6.53 (AA)
--brand-border · #ccced5Das Motiv. Nie Textfarbe.
--brand-primary · #2c2cacEin gefüllter Button pro Band, Links, Fokus. Weiss darauf: 10.18
--brand-accent · #3941c1Nur Linie/Fläche im Hover — nie Text.
--brand-secondary · #2c244cNur Akademie- und Fussband. Weiss darauf: 14.35
--brand-primary-12 · #222a64Hover/Pressed des Primary-Buttons.
Typografie
Der Serif führt den Haarlinien-Kontrast des «MG» ins Layout weiter — ein Schnitt (400), negatives Tracking, viel Luft. Die Sans hält Preise, Zeiten und Buchungs-UI nüchtern.
Instrument Serif hat genau einen Schnitt. Die dünne Haltung entsteht über Grad und Tracking, nie über Gewicht. font-synthesis: none.
Lead 19px — seit 27 Jahren schneide ich Haare, die auch nachgewachsen noch in Form sind.
Body 16px — dazu Make-up, Typberatung und, wenn du magst, den Einkauf. Termin anfragen.
Tabular 14px · tnum — 08:00–13:00 · 1,5–2 Std. · € 150 · +49 176 247 66 328
Caption 13px — Friseurmeisterin · Visagistin · Typ-Stylistin · Personalshopperin
Versal-Label 11px · +0.12em
| Ebene | Desktop | Mobile | Gewicht | Line-Height | Tracking |
|---|---|---|---|---|---|
| display-hero | 72px | 40px | 400 | 1.02 | −1.8px |
| display-xl | 56px | 34px | 400 | 1.06 | −1.4px |
| display-lg | 40px | 28px | 400 | 1.12 | −1.0px |
| display-md | 28px | 22px | 400 | 1.18 | −0.7px |
| body | 16px | 16px | 400 | 1.6 | 0 |
| body-tabular | 14px | 14px | 400 | 1.4 | −0.42px |
| label-versal | 11px | 11px | 500 | 1.15 | +0.12em |
Das Motiv
1px in #ccced5, mit genau einer 24px-Lücke — dem Schnitt —, in der das Versal-Label sitzt. Sie ist der dünnste Strich der Logo-Didone und der Schnitt im Haar zugleich. Sie ersetzt Karten, Rahmen und Schatten.
Nie auf einem Bild. Nie farbig, nie dicker als 1px, nie gestrichelt, nie doppelt.
Leistungen
Preise
Akademie
Das einzige 3-Spalten-Grid der ganzen Site. Kein Text auf Bild, keine Badge, kein Rahmen.
Komponenten
Buttons — hover/focus live testen
Primary: #2c2cac → hover #222a64 + translateY(−1px), 0.2s ease → active scale(0.98), 0.12s. Fokusring 2px #2c2cac auf 2px Papier-Freistellung.
Linienblock — die «Karte» dieses Systems
Typberatung, Schnitt, Farbe, Make-up und Vorher-Nachher-Bild. Der ganze Look an einem Tag.
3,5–4 Std. · ab € 150
Du lernst dein Gesicht in fünf Minuten fertig zu schminken — mit deinen eigenen Produkten.
60 Min. · ab € 50
Hover ändert nur die Linie auf #2c2cac — keine Fläche, kein Schatten, kein Lift.
Preiszeile — tabellare Ziffern, rechtsbündig an der Haarlinie
Formular — Feld, Fokus, Fehler
Da fehlt noch deine E-Mail — sonst kann ich dir nicht antworten.
Vorher / Nachher — zwei gleiche Rahmen, nie ein Slider
Vorher
Nachher
Tiefe
| Ebene | Wert | Wo |
|---|---|---|
| 0 Papier | box-shadow: none | alles |
| 1 Haarlinie | border-top: 1px solid #ccced5 | Sektionen, Blöcke, Preiszeilen |
| 2 Schwebend | 0 1px 2px rgb(30 31 37 / .04), 0 4px 12px rgb(30 31 37 / .06) | Sticky-Bar, Nav über Inhalt |
| 3 Overlay | 0 2px 6px rgb(30 31 37 / .06), 0 16px 40px rgb(30 31 37 / .10) | mobiler Drawer |
Akademie
Einer von genau zwei dunklen Abschnitten der ganzen Seite. Dunkelanteil-Ziel: 14 %.