Design-System · v1.0 · Mai 2026

Komponenten-Bibliothek.

Visuelle Übersicht aller Module, Farben, Schriften und UI-Bausteine für das neue GynPraxis-Dr.-Sara-Erscheinungsbild. Pflegbar, skalierbar, dreisprachig.

01 — PaletteFarben „Quiet Care"

Bewusst weg von Klischee-Praxis-Türkis und Babyrosa. Diese Palette wirkt wie ein gehobenes Health-Magazin: warm, ruhig, dauerhaft.

#F7F2EC
CreamHintergrund
#E9DFD3
Warm SandSektionen
#1E3A38
Deep TealHeadlines
#C97B6E
Dusty RoseCTAs
#B89968
Soft GoldAkzente
#1A1A1A
InkBodytext
#6B6F73
SlateSubtitles

02 — TypeEditorial-Typografie

Cormorant Garamond für die Display-Ebene gibt der Praxis Würde und Haltung. Inter für Body sorgt für klinische Klarheit. Noto Naskh Arabic erhält im RTL-Layout dieselbe Hierarchie.

DisplayCormorant 64px
Frauen­gesundheit, in der Sprache,
die du sprichst.
H1Cormorant 48px
Begleitung über Jahrzehnte, nicht nur Termine.
H2Cormorant 32px
Lassen Sie uns beginnen.
QuoteCormorant Italic 24px
„Medizin beginnt mit Zuhören. Erst danach folgt der Untersuchungs­handschuh."
BodyInter 16px
Klinische Erfahrung an grossen Perinatalzentren und operative Tätigkeit am Spital Uster. Schwerpunkte: minimalinvasive Endoskopie, Schwangerschafts­begleitung, Ultraschall.
EyebrowInter 12px
— LEISTUNGEN NACH LEBENSPHASE
ArabicNoto Naskh 32px
«قصّتُكِ، تُسمَع بكرامة وثقة.»

03 — UIButtons & CTAs

Drei eindeutige Zustände — primär, sekundär (Rose), Ghost. Jeder Button hat eine klare Funktion. Keine doppelten Hauptaktionen pro Sektion.

PrimaryBTN-01
Hauptaktion · pro Section nur einmal
Rose AccentBTN-02
Cultural Care, Notfall-Kontext
Ghost / TertiärBTN-03
Nicht-konvertierende Aktionen

04 — KartenService-Cards & Bild-Tags

Editorial wirkende Karten mit „Bildunterschrift im Bild" — wie in einem Fotobuch.

Hero-Visual mit TagM1
„Wir nehmen uns Zeit. Für Sie."
Headline-Foto + Editorial-Caption
Service-Card mit Lang-PillsM5

Schwangerschafts­vorsorge

Vorsorge alle Trimester · NIPT · Organscreening · Risiko­schwangerschaft.

Deutsch English العربية
Service mit Sprachen-Hinweis · klickbar zur Detailseite

05 — ModulLebensphasen-Navigator

Statt einer Service-Liste denkt die Patientin in Lebensphasen. Hover öffnet die Detail-Vorschau.

01
Teenager-Sprechstunde
Zyklus, Verhütung, erste Fragen — vertraulich.
02
Vorsorge & Verhütung
Krebsvorsorge, IUP, HPV-Impfung.
03
Schwangerschaft & Geburt
Trimester-Vorsorge, NIPT, Risikoschwangerschaft.
04
Wechseljahre & Hormone
Individuell, leitlinienbasiert, ohne Tabu.

06 — ModulTrust-Bar (immer sichtbar)

Vier Schlüsselangaben unmittelbar nach dem Hero — beantwortet die häufigsten Fragen, bevor sie gestellt werden.

Sprechzeiten
Di – Fr · 08:30 – 17:00
Telefon
044 525 20 60
Adresse
Werftstr. 32, 8302 Kloten
Sprachen
DE · EN · AR

07 — ModulStatistik-Block (Trust-Builder)

Konkrete Zahlen statt Marketing-Floskeln.

12 +
Jahre Erfahrung
3
Sprachen fliessend
5 ⭐
Patient-Bewertungen
≤ 7 T.
Nächster Termin

08 — Sprach-LayerCultural Care Tri-Lang-Modul

Das visuell stärkste Element: dasselbe Versprechen in drei Sprachen, gleichberechtigt typografisch behandelt.

CULTURAL CARE

Vertraut behandelt. In Ihrer Muttersprache.

DEUTSCH
„Ihre Geschichte, in Würde gehört."
ENGLISH
„Your story, heard with dignity."
العربية
«قصّتُكِ، تُسمَع بكرامة وثقة.»

09 — PatternsUI-Verhaltens­muster

Kleine, wiederholbare Regeln, die das Ganze zusammenhalten.

Reveal-on-ScrollP-01

Sektionen erscheinen sanft (200ms ease-out, 8 px translate-y). Niemals spielerisch, niemals hektisch.

Sticky Mobile-CTAP-02

Auf Mobil: Pillen-Button bottom-fixed mit „Termin buchen — 044 525 20 60". Verschwindet erst auf der Kontakt-Seite.

RTL für ArabischP-03

Vollständige Spiegelung des Layouts via CSS Logical Properties. Pfeile drehen sich, Logo wandert nach rechts, Sprachumschalter bleibt aber konsistent rechts.

Quiet ModeP-04

Toggle in der Topbar reduziert Animationen, dunkler Hintergrund, +2pt Schriftgrösse. Accessibility-Plus für ältere Patientinnen.

Schema.org strukturiertP-05

Auf jeder Seite: MedicalBusiness, Physician, OpeningHours, Service. Pflicht für lokales SEO.

Performance-BudgetP-06

LCP < 1.5s, CLS < 0.1, JS < 100kb. Bilder als AVIF, Fonts subset & preload.