---
version: alpha
name: "Clinic"
description: "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."
colors:
  primary: "#0B6E69"
  on-primary: "#FFFFFF"
  secondary: "#3B82C4"
  tertiary: "#E0A43A"
  neutral: "#4E6466"
  surface: "#F8FBFB"
  on-surface: "#10282B"
typography:
  display-lg:
    fontFamily: "Source Sans 3"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: "Source Sans 3"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Source Sans 3"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Source Sans 3"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: "Source Sans 3"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: "Source Sans 3"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
rounded:
  sm: 6px
  md: 8px
  lg: 10px
  xl: 14px
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

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.

## Colors

- **primary (#0B6E69):** Tiefes Petrol für Buchungs-Buttons, Links und den aktiven Schritt.
- **on-primary (#FFFFFF)**
- **secondary (#3B82C4):** Klares Blau für Info-Hinweise und die zweite Diagrammreihe.
- **tertiary (#E0A43A):** Warmes Bernstein für Erinnerungen, ausstehende Zustände und eine dritte Reihe.
- **neutral (#4E6466):** Schiefergrau mit einem Hauch Petrol für Hilfetext und Formularhinweise.
- **surface (#F8FBFB):** Sehr blasses Mintweiß; weiße Karten heben sich mit einem weichen Schatten davon ab.
- **on-surface (#10282B)**

## Typography

Durchgehend Source Sans 3: Bold 700 für Überschriften von 60px Display bis 20px, Fließtext in Regular 400 mit 16px und Zeilenhöhe 1.55. Source Code Pro für Referenznummern und Codes. Halte Zeilen bei etwa 70 Zeichen.

## Layout

Seiten sind auf einem 12-Spalten-Raster höchstens 1200px breit, mit 24px Spaltenabstand und einer 4px-Abstandseinheit. Leistungsseiten beginnen mit einer kurzen Zusammenfassung, dann folgen Öffnungszeiten und Standort; eine Buchungskarte bleibt auf dem Desktop im Blick.

## Shapes

10px-Ecken an Karten, Eingabefeldern und Buttons. 1px-Rahmen in einem blassen Graupetrol; weiche, niedrige Schatten heben Karten und das Buchungspanel ab.

## Components

Eine Buchungskarte mit Datum und Zeitfenstern, Arztprofil-Karten mit Foto und Fachgebieten, Formularfelder mit sichtbaren Labels und Hinweisen und FAQ-Akkordeons.

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