---
version: alpha
name: "Care"
description: "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."
colors:
  primary: "#0A6C8A"
  on-primary: "#FFFFFF"
  secondary: "#2EA37A"
  tertiary: "#E0A43A"
  neutral: "#4F6573"
  surface: "#F7FAFC"
  on-surface: "#0F2533"
typography:
  display-lg:
    fontFamily: "Source Sans 3"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Source Sans 3"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Source Sans 3"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2
  headline-sm:
    fontFamily: "Source Sans 3"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: "Source Sans 3"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "Source Sans 3"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 10px
  md: 12px
  lg: 14px
  xl: 18px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

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.

## Colors

- **primary (#0A6C8A):** Ruhiges Cerulean-Blau für Buchen- und Bestätigen-Buttons, ausgewählte Zeitfenster und den aktiven Tab.
- **on-primary (#FFFFFF)**
- **secondary (#2EA37A):** Jadegrün für bestätigte Termine, normale Ergebnisse und die zweite Diagrammreihe.
- **tertiary (#E0A43A):** Bernstein für Erinnerungen, ausstehende Ergebnisse und eine dritte Reihe.
- **neutral (#4F6573):** Schieferblaugrau für Hilfetext, Adressen und Uhrzeiten.
- **surface (#F7FAFC):** Blasses, kühles Weiß, damit Karten und Zeitfenster hervortreten.
- **on-surface (#0F2533)**

## Typography

Durchgehend Source Sans 3: Bold 700 für Screen-Titel (30px) und Abschnittsüberschriften, Regular 400 in 16px mit Zeilenhöhe 1.5 für Fließtext. Source Code Pro für Buchungsnummern und Rezeptcodes.

## Layout

Screens haben 20px Seitenrand über einer Tab-Leiste mit vier Tabs unten, 64px hoch. Eine Aufgabe pro Screen, mit einer Schrittanzeige oben und dem Haupt-Button unten fixiert.

## Shapes

14px-Ecken an Karten, Zeitfenstern und Sheets; pillenförmige Primär-Buttons; nichts Antippbares ist kleiner als 48px. 1px-Rahmen in blassem Blaugrau und weiche, niedrige Schatten auf Karten.

## Components

Arztkarten mit Foto, Fachgebiet, Bewertung und nächstem freien Termin, ein Tagesstreifen mit Zeitfenster-Chips, Terminkarten mit Wegbeschreibung und Videoanruf-Button, Medikamenten-Erinnerungen zum Abhaken und Laborergebnisse mit Normbereichsbalken.

## Do's 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.