Care: Healthcare-App-Designsystem
App · Hell · Weich · GesundheitCare
Eine klare Aufgabe pro Screen, für Patienten, die es einfach erledigen wollen.
Care ist für Patientinnen und Patienten geschrieben, die vielleicht müde oder besorgt sind oder auf einem kleinen Screen lesen: ein kühler, blasser Hintergrund, ruhiges Cerulean-Blau für den nächsten Schritt und große, einfache Labels. Jeder Screen erledigt eine Aufgabe, etwa eine Zeit wählen oder einen Besuch bestätigen, bevor es weitergeht.
Vorschau
Live aus den Tokens unten gerendert, in den Schriften des Systems.
9:41
Guten MorgenHeuteWochenziel4 von 5 TagenAls NächstesMorgenroutine15 Min.Team-Check-in30 Min.Abendrückblick10 Min.
StartStatistikPlanIch9:41
Diese WocheGesamt7,842+12 % ggü. VorwocheSession starten
StartStatistikPlanIch9:41
EinstellungenMitteilungenTägliche ErinnerungenEinheitenMetrisch
StartStatistikPlanIchIn 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 Care. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/care.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.
Tokens
Farben
Helles Theme
- background#F7FAFCoklch(0.983 0.004 236.496)
- foreground#0F2533oklch(0.254 0.039 238.734)
- card#FFFFFFoklch(1 0 0)
- card-foreground#0F2533oklch(0.254 0.039 238.734)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#0F2533oklch(0.254 0.039 238.734)
- primary#0A6C8Aoklch(0.496 0.092 226.189)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#E2F0F5oklch(0.946 0.016 221.08)
- secondary-foreground#08485Coklch(0.375 0.068 225.402)
- muted#EDF3F6oklch(0.96 0.008 228.854)
- muted-foreground#4F6573oklch(0.494 0.035 236.328)
- accent#E5F0F5oklch(0.948 0.014 226.562)
- accent-foreground#0F2533oklch(0.254 0.039 238.734)
- destructive#B3261Eoklch(0.501 0.178 28.705)
- border#D8E4EAoklch(0.912 0.015 228.976)
- input#C7D6DEoklch(0.867 0.02 230.733)
- ring#0A6C8Aoklch(0.496 0.092 226.189)
- chart-1#0A6C8Aoklch(0.496 0.092 226.189)
- chart-2#2EA37Aoklch(0.641 0.12 165.003)
- 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#0B171Eoklch(0.197 0.022 235.108)
- foreground#E4EEF2oklch(0.943 0.012 223.527)
- card#11212Aoklch(0.238 0.028 234.286)
- card-foreground#E4EEF2oklch(0.943 0.012 223.527)
- popover#11212Aoklch(0.238 0.028 234.286)
- popover-foreground#E4EEF2oklch(0.943 0.012 223.527)
- primary#5EC2E0oklch(0.766 0.102 220.242)
- primary-foreground#0B171Eoklch(0.197 0.022 235.108)
- secondary#192C36oklch(0.282 0.031 232.351)
- secondary-foreground#E4EEF2oklch(0.943 0.012 223.527)
- muted#152730oklch(0.261 0.029 231.106)
- muted-foreground#8DA4AFoklch(0.705 0.03 228.264)
- accent#1C313Coklch(0.301 0.033 232.283)
- accent-foreground#E4EEF2oklch(0.943 0.012 223.527)
- destructive#F28A82oklch(0.743 0.128 25.246)
- border#223844oklch(0.328 0.035 233.179)
- input#2B4350oklch(0.369 0.037 232.814)
- ring#5EC2E0oklch(0.766 0.102 220.242)
- chart-1#5EC2E0oklch(0.766 0.102 220.242)
- chart-2#5FD3A6oklch(0.788 0.125 165.158)
- 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 · 40/1.05 · -0.02emZwölf Boxkämpfer jagen Viktor
- h1 · 30/1.1 · -0.01emZwölf Boxkämpfer jagen Viktor
- h2 · 22/1.2Zwölf Boxkämpfer jagen Viktor
- h3 · 18/1.3Zwölf Boxkämpfer jagen Viktor
- body · 16/1.5Zwölf Boxkämpfer jagen Viktor
- small · 13/1.4Zwölf Boxkämpfer jagen Viktor
Radius, Abstände und Schatten
Eckenradiussm 10pxmd 12pxlg 14pxxl 18px
Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px
SchattenWeich, flach und breit, nur auf Karten und Sheets.
Layout
- Touch-Ziele
- 48px
- Tab-Leiste
- 64px, 4 Einträge, icons with labels
- Bildschirmrand
- 20px
- Navigation
- bottom tab bar; one task per screen
- Ziffern
- proportional
Ideal für
- Arzttermin- und Telemedizin-Apps
- Patientenportale und Gesundheitsakten
- Medikamenten- und Pflege-Erinnerungen
- Apotheken- und Laborergebnis-Apps
Dos and Don’ts
- Bestätige jede Buchung mit einem Zusammenfassungs-Screen.
- Kombiniere jede Statusfarbe mit einem Icon und einem Wort.
- Setze nie zwei Primär-Buttons auf einen Screen.
- Verwende keine Fachbegriffe, wo ein einfaches Wort genügt.
Weitere Designsysteme für Apps
- StrideAppGroße kondensierte Zahlen und ein energiegeladenes Orange für Bewegungs-Apps.Überschriften in Barlow Condensed
- PantryAppWarm, freundlich und appetitlich, für Essens- und Bestell-Apps.Überschriften in Bricolage Grotesque
- CalmAppSanftes Salbeigrün, eine milde Serife und Raum zum Atmen.Überschriften in Newsreader