Cormorant Garamond · Regular
Veränderung beginnt im Inneren.
Headlines: 106 / 62 / 31 px
Mobile: 64 / 43 / 29 px
Zeilenhöhe Titel: 1.06
Designgrundlagen · Version 01
Ruhe im Detail.
Ein flexibles Designsystem für eine persönliche Schweizer Praxis. Wiederverwendbare CSS-Komponenten, klare Hierarchien und grosszügige Abstände verbinden Desktop und Mobile.
01 · Farben
Warmes Weiss
#FAF8F3
#FAF8F3
Creme
#F0ECE3
#F0ECE3
Salbei
#E2E7DC
#E2E7DC
Text / Dunkelgrün
#273B32
#273B32
CTA / Olive
#43563B
#43563B
Sekundärer Text
#59665C
#59665C
Trennlinien
#D4D7CC
#D4D7CC
Eingabefelder
#FFFFFF
#FFFFFF
02 · Typografie & Layout
DM Sans · Regular / Medium
Ihre Fragen und Grenzen haben jederzeit Platz.
Lesetext: 17 px · Karten: 15 px
Metadaten: 11–13 px · Zeilenhöhe: 1.65
Maximale Seitenbreite: 1440 px
Desktop-Innenabstand: bis 96 px
Mobile-Innenabstand: 24 px
Abschnittsabstand: 108 / 64 px
Kartenabstand: 24 / 16 px
03 · Komponenten
Buttons & Textlink
Erstgespräch vereinbaren ↗Hypnosetherapie kennenlernen
Anwendungsbereiche entdecken ↓
Primär, Sekundär, Hover und Tastaturfokus. Mindesthöhe 48 px; primär 54 px.
Service Card
Stress & innere Unruhe
Zur Ruhe kommen und einen bewussteren Umgang mit Belastungen entwickeln.
FAQ Accordion
Geschlossener Zustand
Die Antwort wird auf Klick oder mit der Tastatur eingeblendet.
Geöffneter Zustand
Kurze, gut lesbare Antworten. Semantische details- und summary-Elemente unterstützen die Tastaturbedienung.
Form Fields
Sichtbare Labels, deutlicher Fokus, native Validierung. Optionale Felder werden gekennzeichnet.
Testimonial Card
Kundenstimme / Platzhalter
Nur echte, freigegebene Rückmeldungen einsetzen. Bis dahin bleibt die Kennzeichnung sichtbar.
Section Heading
Anwendungsbereiche
Was beschäftigt Sie?
Kleine Rubrik, ausdrucksstarker Titel, optionaler kurzer Einführungstext.
04 · Zusammengesetzte Bereiche
Navigation · Footer · CTA Section · Kontaktformular sind in der vollständigen Homepage ↗ dargestellt. Die Mobilnavigation öffnet unter 760 px; Karten und Formularspalten werden untereinander angeordnet.
05 · Redaktionelle Übergabe
Vor Veröffentlichung ersetzen: Praxisname, Portrait, Biografie, Ausbildung, Qualifikationen, Spezialisierungen, Kontaktdaten. FAQ fachlich prüfen und tatsächliche Dauer und Konditionen ergänzen. Rechtstexte passend zur Praxis erstellen. Das generierte Praxisbild ist ein Stimmungsvorschlag. Das Formular ist bewusst ohne Versand oder Speicherung.