Eine white-label Designsprache für alle drei Produkte
Neutrale Töne in Weiß, Grau und Graublau, die sich in jede Praxiswebsite einfügen. Optimiert auf Lesbarkeit, Neutralität und Benutzerfreundlichkeit.
01
Farben
Niedrige Sättigung, hoher Kontrast: gut lesbar und bewusst neutral, da jede Praxis ihr eigenes Farbschema mitbringt. Signalfarben kommen nur an wenigen Stellen zum Einsatz, um Aufmerksamkeit zu wecken, etwa bei einer Warnung.
Neutrale Töne
{{ c.name }}
{{ c.hex }}
Akzente
{{ c.name }}
{{ c.hex }}
Signalfarben
{{ c.name }}
{{ c.hex }}
Text-Abstufungen & Flächen
{{ c.name }}
{{ c.hex }}
02
Typografie
Inter. Eine Schrift für komfortable Lesbarkeit. Mindestgröße 12px, Fließtext 16px.
{{ t.name }}
{{ t.spec }}
Termin in 2 Minuten gebucht
Mobile Ergänzungen
Auf mobilen Screens tragen Überschriften Gewicht 700, um die kleineren Größen auszugleichen.
{{ t.name }}
{{ t.spec }}
Termin in 2 Minuten gebucht
03
Spacing
4px-Basis für konsistente Abstände.
{{ s.token }}
{{ s.px }}px
04
Radius & Elevation
Weiche, ruhige Formen. Jeder Wert hat einen festen Einsatzzweck.
Schlichte ungefüllte Linien-Icons, 1.75px Strichstärke, 24px Raster. Bei kleineren Darstellungsgrößen wird die Strichstärke proportional erhöht: 2px bei 18–20px, 2.2–2.4px für kleine Funktions-Glyphen unter 16px (Häkchen, Pfeile). Unten das vollständige Inventar: 50 Icons, die aktuell in den drei Produkten im Einsatz sind.
06
Komponenten
Wiederverwendbare Bausteine für alle drei Produkte.
Buttons
Buttons, Mobile CTA
Haupt-Handlung im Sticky-Footer mobiler Screens, volle Breite. Primär 16/600, Radius 14, min. 54px Höhe. Darunter Sekundär (52px) und Text-Button (48px).
Eingaben
Bitte gültige E-Mail eingeben.
Eingaben, Mobile
Mobil min. 50px Feldhöhe (Radius 12, Padding 14). Kompakte Variante für verschachtelte Felder in Karten: 14px, Radius 10, min. 46px. Fehlertext darunter: 13px in Notfall-Rot.