Clinic: Healthcare-Designsystem

Web · Hell · Weich · Gesundheit

Clinic

Ruhiges Petrol, klare Schrift und einfache Sprache für Gesundheits-Websites.

Clinic ist auf Vertrauen gebaut: eine blass mintweiße Seite, tiefes Petrol für Aktionen, eine sehr gut lesbare humanistische Sans und klare, großzügige Formulare. Jede Seite beantwortet zuerst die nächste Frage der Patientinnen und Patienten, etwa wo, wann und wie viel, bevor sie etwas verkaufen will.

Vorschau

Live aus den Tokens unten gerendert, in den Schriften des Systems.

Neu in 2026Planen, ausliefern und messen an einem Ort

Ein ruhiger Workspace für kleine Teams. Jede Zahl, die du brauchst, und nichts, was du nicht brauchst.

Kostenlos startenDemo buchen

Aktive Nutzer12,480

Umsatz$48.2k

Bindungsrate86%

Lade dein Team einGeschäftliche E-Maildu@firma.deRolleBearbeiter ▾Einladung senden

Letzte BestellungenKundeStatusBetragAda ParkBezahlt$1,240Lukas WeberAusstehend$380Mei ChenErstattet$96

In deinem Projekt verwenden

Füge das in Codex oder Claude Code ein. Der Agent speichert die Spezifikation als DESIGN.md und hält sich ab dann daran.

Dieses Projekt verwendet das Designsystem Clinic. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/clinic.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.

Tokens

Farben

Helles Theme

background#F8FBFBoklch(0.986 0.003 197.105)
foreground#10282Boklch(0.259 0.03 206.13)
card#FFFFFFoklch(1 0 0)
card-foreground#10282Boklch(0.259 0.03 206.13)
popover#FFFFFFoklch(1 0 0)
popover-foreground#10282Boklch(0.259 0.03 206.13)
primary#0B6E69oklch(0.487 0.082 189.198)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#E3F1EFoklch(0.947 0.015 186.688)
secondary-foreground#0B4C48oklch(0.378 0.061 188.501)
muted#EEF5F4oklch(0.965 0.008 186.892)
muted-foreground#4E6466oklch(0.486 0.027 203.19)
accent#E6F2F0oklch(0.952 0.013 185.091)
accent-foreground#10282Boklch(0.259 0.03 206.13)
destructive#B3261Eoklch(0.501 0.178 28.705)
border#D6E4E3oklch(0.908 0.015 191.74)
input#C6D8D6oklch(0.868 0.02 188.766)
ring#0B6E69oklch(0.487 0.082 189.198)
chart-1#0B6E69oklch(0.487 0.082 189.198)
chart-2#3B82C4oklch(0.592 0.124 249.268)
chart-3#E0A43Aoklch(0.758 0.137 77.684)
chart-4#7C6BC4oklch(0.584 0.133 290.433)
chart-5#D45D79oklch(0.634 0.152 7.8)

Dunkles Theme

background#0D1A1Coklch(0.207 0.019 208.072)
foreground#E4EFEEoklch(0.944 0.012 190.437)
card#132326oklch(0.243 0.022 210.657)
card-foreground#E4EFEEoklch(0.944 0.012 190.437)
popover#132326oklch(0.243 0.022 210.657)
popover-foreground#E4EFEEoklch(0.944 0.012 190.437)
primary#5CC8BFoklch(0.767 0.1 187.944)
primary-foreground#0D1A1Coklch(0.207 0.019 208.072)
secondary#1B2E31oklch(0.286 0.025 208.362)
secondary-foreground#E4EFEEoklch(0.944 0.012 190.437)
muted#172A2Doklch(0.27 0.025 208.428)
muted-foreground#8FA7A9oklch(0.711 0.027 202.725)
accent#1F3438oklch(0.309 0.028 210.85)
accent-foreground#E4EFEEoklch(0.944 0.012 190.437)
destructive#F2827Aoklch(0.729 0.139 25.284)
border#24393Coklch(0.328 0.027 207.159)
input#2D4549oklch(0.372 0.03 208.959)
ring#5CC8BFoklch(0.767 0.1 187.944)
chart-1#5CC8BFoklch(0.767 0.1 187.944)
chart-2#7DB4E8oklch(0.752 0.095 247.822)
chart-3#F0C26Eoklch(0.838 0.115 81.184)
chart-4#A99BEAoklch(0.732 0.113 291.466)
chart-5#EE93A9oklch(0.763 0.112 4.425)

Schriften

Überschriften: Source Sans 3 · 700
Fließtext: Source Sans 3 · 400
Monospace: Source Code Pro

Schriftgrößen

display · 60/1.05 · -0.025emZwölf Boxkämpfer jagen Viktor
h1 · 40/1.1 · -0.02emZwölf Boxkämpfer jagen Viktor
h2 · 28/1.2 · -0.01emZwölf Boxkämpfer jagen Viktor
h3 · 20/1.3Zwölf Boxkämpfer jagen Viktor
body · 16/1.55Zwölf Boxkämpfer jagen Viktor
small · 13/1.45Zwölf Boxkämpfer jagen Viktor

Radius, Abstände und Schatten

Eckenradiussm 6pxmd 8pxlg 10pxxl 14px

Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px

SchattenWeich, flach und breit, nur auf Karten und Sheets.

Layout

Maximale Breite: 1200px
Textbreite: 70ch
Spalten: 12
Spaltenabstand: 24px

Ideal für

Kliniken und Arztpraxen
Telemedizin und digitale Gesundheit
Krankenversicherung und Patientenportale
Apotheken und Wellness-Angebote

Dos and Don’ts

Beschrifte Buttons mit einfachen Verben, die Patienten wirklich benutzen.
Lass jedes Formular-Label sichtbar über dem Eingabefeld stehen.
Verwende Rot nur für Fehler und dringende Warnungen.
Zeige Status nie allein durch Farbe an.