# Farbe

> Warmes Papier, Tinte, ein rosa Akzent und ein Klebezettel je Mensch. Jede Farbe ist eine Rolle mit fester Bedeutung, hell und dunkel aus einer Quelle.

Quelle: https://brand.heyalbert.family/farbe/ · Hey Albert Marke und Designsystem

Hey Albert sieht aus wie ein Notizbuch. Der Grund ist warmes Papier, die Schrift ist Tinte. Jeder Mensch hat seinen Klebezettel. Ein Marker hebt hervor, was jetzt zählt. Die Leiste ist schwarz, der Akzent ist rosa.

Farbe kommt aus den Karten, nicht aus dem Grund. Der Grund bleibt ruhig: keine Verläufe, keine Texturen, keine Muster.

## Rollen, nie Leitern

Jede Farbe hat einen Namen, der sagt, wofür sie da ist. Wir sagen „Karte“, nicht „Beige 200“. Ein Bauteil nennt nur die Rolle, nie den Wert. So schaltet der dunkle Modus um, ohne dass ein Bauteil davon weiß.

Die Werte stehen an genau einer Stelle: `packages/design-system/tokens/quelle/`. Daraus entstehen CSS, Tailwind und Swift. Alles auf dieser Seite wird zur Bauzeit von dort gelesen.

```css
/* richtig: die Rolle */
.termin { background: var(--flaeche-karte); color: var(--text-koerper); border-radius: var(--radius-karte); }

/* falsch: der Wert. Im dunklen Modus bleibt die Karte hell. */
.termin { background: #EEE8DD; }
```

```swift
// richtig: die Rolle aus AlbertFarbe, sie trägt hell und dunkel
Text("Schwimmen mit Lena")
    .foregroundStyle(AlbertFarbe.textKoerper)
    .padding(AlbertRaum.karteInnen)
    .background(AlbertFarbe.flaecheKarte, in: .rect(cornerRadius: AlbertForm.radiusKarte))

// falsch: eine eigene Farbe oder eine Weiche nach dem Erscheinungsbild
// Color(hex: 0xEEE8DD) · if colorScheme == .dark { … }
```

> **Hinweis**
>
> `swift/Tokens.swift` wird aus derselben Quelle erzeugt. In Xcode ist die Datei noch nicht eingebunden. Bis dahin trägt die App ihren eigenen Farbkatalog in `AlbertUI`, der aus den CSS-Tokens erzeugt wird.

## Grundfarben

Die Grundfarben sind das Material. Die meisten Bauteile benutzen sie nicht direkt, sondern über die semantischen Rollen weiter unten.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| grund | var(--grund) | #F8F2E7 | #14110D | Seitenhintergrund, warmes Creme |
| karte | var(--karte) | #EEE8DD | #2A2620 | Standardkarte (Termin), beige |
| hell | var(--hell) | #FBF7EE | #201C17 | Tagesreiter, Menüs, Badges auf Karten, Suchfeld |
| knopf-zweit | var(--knopf-zweit) | #EDE6D8 | #322D26 | Segment-Regler inaktiv, sekundäre Knöpfe |
| schwarz | var(--schwarz) | #171717 | #0B0A08 | Leiste, primäre Knöpfe, heutiger Tag, aktive Auswahl |
| schwarz-zeiger | var(--schwarz-zeiger) | #2C2C2C | #2C2C2C | Schwarz unter dem Zeiger (Knopf, Kreis, heutiger Reiter) |
| schwarz-druck | var(--schwarz-druck) | #3A3A3A | #3A3A3A | Schwarz beim Drücken |
| tinte | var(--tinte) | #1A1A1A | #F4EFE6 | Fließtext, Titel |
| grau | var(--grau) | #6E6A63 | #A9A297 | Zweittext, Zeiten, Beschriftungen |
| linie | var(--linie) | #D8D0BF | #3D372E | Haarlinien 1 px, Ränder von Feldern und Kreisen |
| rosa | var(--rosa) | #F3B8DF | #F3B8DF | Akzent: Plus, Jetzt-Zeit, aktiver Ort, Zähler, Lupe |
| rosa-hell | var(--rosa-hell) | #F7CDE8 | #F7CDE8 | Zustands-Pillen, Tageskreis mit Offenem |
| gelb | var(--gelb) | #F5D95C | #F5D95C | Familie und Rituale, Alberts Vorschlag (iPhone), Zahlen |
| gelb-dunkel | var(--gelb-dunkel) | #E4C63A | #E4C63A | Formen auf gelben Karten |
| ampel-gruen | var(--ampel-gruen) | #BFD9A6 | #BFD9A6 | Bewertung: gut (HQ) |
| ampel-gelb | var(--ampel-gelb) | #F5D95C (→ gelb) | #F5D95C | Bewertung: Potenzial (HQ) |
| ampel-rot | var(--ampel-rot) | #EBA7A0 | #EBA7A0 | Bewertung: schwach (HQ) |
| text-auf-ampel | var(--text-auf-ampel) | #2B2A25 | #2B2A25 |  |
| blau | var(--blau) | #BFCDF0 | #BFCDF0 | Fahrten |
| blau-dunkel | var(--blau-dunkel) | #9DB1E3 | #9DB1E3 | Formen auf blauen Karten |
| offen | var(--offen) | #B8467F | #F09CC6 | nur gestrichelter Rand für „ohne Zuständigen“ |
| auf-gelb | var(--auf-gelb) | #4A4530 | #4A4530 | Zweittext auf gelben Flächen |
| leistentext | var(--leistentext) | #F4EFE6 | #F4EFE6 | Text und Zeichen auf Schwarz |
| sonntag | var(--sonntag) | #C9A0BD | #B98CAD | gedämpftes Rosa-Grau für den Sonntag |

- `--grund` ist das Papier. Jede Fläche liegt darauf.
- `--karte` ist die vertiefte Fläche, die Standardkarte für Termine.
- `--hell` ist, was schwebt: Tagesreiter, Menüs, Suchfeld, Abzeichen auf Karten.
- `--schwarz` trägt die Leiste, den Primärknopf und den heutigen Tag.
- `--tinte` ist Fließtext und Titel. `--grau` ist Zweittext: Zeiten, Orte, Beschriftungen.
- `--linie` zieht die Haarlinien.

## Bedeutungen, die nie getauscht werden

Vier Farben tragen eine Bedeutung. Diese Bedeutung gilt überall: in der App, auf der Website, in Social Media, im Jahresbuch.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| akzent | var(--akzent) | #F3B8DF (→ rosa) | #F3B8DF | Akzent und „jetzt“ – nie Fehler |
| akzent-hell | var(--akzent-hell) | #F7CDE8 (→ rosa-hell) | #F7CDE8 |  |
| akzent-tief | var(--akzent-tief) | #B8467F (→ offen) | #F09CC6 |  |
| bedeutung-fahrt | var(--bedeutung-fahrt) | #BFCDF0 (→ blau) | #BFCDF0 |  |
| bedeutung-fahrt-tief | var(--bedeutung-fahrt-tief) | #9DB1E3 (→ blau-dunkel) | #9DB1E3 |  |
| bedeutung-familie | var(--bedeutung-familie) | #F5D95C (→ gelb) | #F5D95C |  |
| bedeutung-familie-tief | var(--bedeutung-familie-tief) | #E4C63A (→ gelb-dunkel) | #E4C63A |  |
| bedeutung-termin | var(--bedeutung-termin) | #EEE8DD (→ karte) | #2A2620 |  |

| Farbe | Heißt | Beispiele |
|---|---|---|
| Rosa (`--akzent`, `--rosa`) | Akzent und Jetzt | Plus, Jetzt-Zeit, aktiver Ort, Zähler, Lupe |
| Rosa hell (`--rosa-hell`) | Zustand, der Aufmerksamkeit braucht | Pille „Kein Fahrer“, Tageskreis mit Offenem |
| Gelb (`--bedeutung-familie`) | Familie und Ritual | Sonntagsrunde, Mittagessen bei Oma Grete, große Zahlen, Alberts Vorschlag auf dem iPhone |
| Blau (`--bedeutung-fahrt`) | Fahrt | Abholen, Rückfahrt, Fahrt-Pillen |
| Offen-Rosa (`--offen`) | ohne Zuständigen | nur als gestrichelter Rand, nie als Fläche |
| Grau gestrichelt (`--rand-vorschlag`) | Vorschlag von Albert | gestrichelter Rand, ohne eigene Füllung |

Rosa heißt nie „Fehler“. Ein Fehler hat bei uns keine Alarmfarbe. Er sagt, was passiert ist und was ihr tun könnt.

Gelb ist nie Schriftfarbe. Auf dem Papier ist Gelb kaum lesbar. Gelb ist immer Fläche, der Text darauf läuft über `--text-auf-gelb`.

> **So**
>
> Die Fahrt am Freitag ist blau. Steht noch niemand als Fahrer daneben, bekommt die Karte zusätzlich den gestrichelten Rand in `--rand-offen` und die Pille „Kein Fahrer“ in `--rosa-hell`.

> **Nicht so**
>
> Rosa für einen Fehler, Rot für „dringend“, Gelb als Warnung, Blau für Links. Offen-Rosa als gefüllte Fläche. Eine eigene Farbe für eine neue Kartenart.

## Semantische Rollen

Bauteile benutzen diese Rollen. Sie zeigen auf eine Grundfarbe und können im dunklen Modus auf eine andere zeigen.

### Flächen

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| flaeche-seite | var(--flaeche-seite) | #F8F2E7 (→ grund) | #14110D |  |
| flaeche-erhoben | var(--flaeche-erhoben) | #FBF7EE (→ hell) | #201C17 | was schwebt: Menü, Reiter, Feld |
| flaeche-karte | var(--flaeche-karte) | #EEE8DD (→ karte) | #2A2620 | Termin |
| flaeche-karte-fahrt | var(--flaeche-karte-fahrt) | #BFCDF0 (→ blau) | #BFCDF0 | Fahrt |
| flaeche-karte-familie | var(--flaeche-karte-familie) | #F5D95C (→ gelb) | #F5D95C | Familie und Ritual |
| flaeche-karte-vorschlag | var(--flaeche-karte-vorschlag) | transparent | transparent | Vorschlag: gestrichelt, ohne Füllung |
| flaeche-leiste | var(--flaeche-leiste) | #171717 (→ schwarz) | #0B0A08 |  |
| flaeche-schleier | var(--flaeche-schleier) | rgba(26, 26, 26, 0.32) | rgba(0, 0, 0, 0.56) | dämpft, was dahinter liegt |
| leiste-ort-zeiger | var(--leiste-ort-zeiger) | rgba(244, 239, 230, 0.08) | rgba(244, 239, 230, 0.08) | Ort in der Leiste unter dem Zeiger |
| leiste-ort-aktiv-zeiger | var(--leiste-ort-aktiv-zeiger) | rgba(244, 239, 230, 0.14) | rgba(244, 239, 230, 0.14) | aktiver Ort in der Leiste unter dem Zeiger |

`--flaeche-schleier` ist die einzige durchscheinende Farbe. Er dämpft, was hinter einem Dialog, einem Menü oder dem Scanner liegt. Milchglas und Unschärfe gibt es nicht.

### Text

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| text-koerper | var(--text-koerper) | #1A1A1A (→ tinte) | #F4EFE6 |  |
| text-titel | var(--text-titel) | #1A1A1A (→ tinte) | #F4EFE6 |  |
| text-zweit | var(--text-zweit) | #6E6A63 (→ grau) | #A9A297 |  |
| text-auf-leiste | var(--text-auf-leiste) | #F4EFE6 (→ leistentext) | #F4EFE6 |  |
| text-auf-leiste-zweit | var(--text-auf-leiste-zweit) | #9A948B | #8C857A |  |
| text-auf-gelb | var(--text-auf-gelb) | #4A4530 (→ auf-gelb) | #4A4530 |  |
| text-auf-blau | var(--text-auf-blau) | #1A1A1A (→ tinte) | #1A1A1A |  |
| text-auf-blau-zweit | var(--text-auf-blau-zweit) | #4A4F63 | #4A4F63 | Zweittext auf blauen Flächen (Fahrt) |
| text-auf-rosa | var(--text-auf-rosa) | #1A1A1A (→ tinte) | #1A1A1A |  |
| text-inaktiv | var(--text-inaktiv) | #A29B8F | #7A7469 | gerechnet, keine Deckkraft |

Text auf Gelb, Blau und Rosa hat eigene Rollen: `--text-auf-gelb`, `--text-auf-blau`, `--text-auf-rosa`. Sie bleiben im dunklen Modus dunkel, weil die Fläche hell bleibt. Wer dort `--tinte` nimmt, schreibt nachts creme auf hell.

`--text-inaktiv` ist eine gerechnete Farbe. Inaktiv heißt bei uns nie „halbe Deckkraft“.

### Linien und Ränder

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| linie-haar | var(--linie-haar) | #D8D0BF (→ linie) | #3D372E |  |
| linie-stark | var(--linie-stark) | #C2B8A2 | #524A3D | Kontur 1,5 px statt 1 px |
| linie-inaktiv | var(--linie-inaktiv) | #E4DDCE | #2B2620 | gerechnet, keine Deckkraft |
| linie-jetzt | var(--linie-jetzt) | #1A1A1A (→ tinte) | #F4EFE6 | gestrichelte Jetzt-Achse |
| rand-vorschlag | var(--rand-vorschlag) | #6E6A63 (→ grau) | #A9A297 | gestrichelt grau: Vorschlag von Albert |
| rand-offen | var(--rand-offen) | #B8467F (→ offen) | #F09CC6 | gestrichelt: ohne Zuständigen |
| rand-fokus | var(--rand-fokus) | #B8467F (→ offen) | #F09CC6 | :focus-visible Ring |

### Knöpfe

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| knopf-primaer-flaeche | var(--knopf-primaer-flaeche) | #171717 (→ schwarz) | #F4EFE6 |  |
| knopf-primaer-flaeche-zeiger | var(--knopf-primaer-flaeche-zeiger) | #2C2C2C (→ schwarz-zeiger) | #E2DACD | Druck macht die Fläche nicht dunkler, sondern die Schrift ruhiger |
| knopf-primaer-flaeche-druck | var(--knopf-primaer-flaeche-druck) | #3A3A3A (→ schwarz-druck) | #CFC6B7 |  |
| knopf-primaer-text | var(--knopf-primaer-text) | #F4EFE6 (→ leistentext) | #171717 |  |
| knopf-zweit-flaeche | var(--knopf-zweit-flaeche) | #EDE6D8 (→ knopf-zweit) | #322D26 |  |
| knopf-zweit-text | var(--knopf-zweit-text) | #1A1A1A (→ tinte) | #F4EFE6 |  |
| knopf-inaktiv-flaeche | var(--knopf-inaktiv-flaeche) | #E9E2D4 | #2B2620 |  |
| knopf-inaktiv-text | var(--knopf-inaktiv-text) | #A29B8F (→ text-inaktiv) | #7A7469 |  |

Der Primärknopf wird unter dem Zeiger und beim Drücken heller, nicht dunkler. Auf Papier wirkt Aufhellen ruhiger. Im dunklen Modus dreht er sich um: helle Fläche, dunkle Schrift.

## Personenfarben

Jeder Mensch im Haushalt hat einen Platz und damit eine Farbe. Acht Plätze gibt es. Familie Sonntag belegt fünf: Anna, Tobias, Felix, Lena und Sofia. Die Großeltern sind Gäste.

| Platz | Fläche | Linie | Familie Sonntag |
| --- | --- | --- | --- |
| 1 | var(--person-1) #D5F5C2 | var(--person-linie-1) #8FCF6E | Anna |
| 2 | var(--person-2) #A8E5E5 | var(--person-linie-2) #62BFBF | Tobias |
| 3 | var(--person-3) #F6D0FF | var(--person-linie-3) #D28FE8 | Felix |
| 4 | var(--person-4) #FFD6A5 | var(--person-linie-4) #E0A55F | Lena |
| 5 | var(--person-5) #AEBAFF | var(--person-linie-5) #7B8BE0 | Sofia |
| 6 | var(--person-6) #C7EFD0 | var(--person-linie-6) #7FC993 | Oma Grete |
| 7 | var(--person-7) #FFC9C9 | var(--person-linie-7) #E08F8F | Opa Werner |
| 8 | var(--person-8) #E3DCA8 | var(--person-linie-8) #B7AE6A | Oma Hilde |

Jeder Platz hat zwei Gesichter:

- **Der Zettel** (`--person-1` bis `--person-8`) ist eine helle Fläche. Avatar, Klebezettel, eigene Spur. Text darauf ist immer `--person-text`, also Tinte. Der Zettel bleibt auch im dunklen Modus hell, denn ein Klebezettel ist auch nachts ein heller Schnipsel.
- **Die Linie** (`--person-linie-1` bis `--person-linie-8`) ist die kräftigere Stufe für Punkte, Ränder und Spuren. Im dunklen Modus wird sie noch kräftiger, sonst verschwindet sie.

Drei Regeln gelten immer:

1. **Farbe ist nie der einzige Träger.** Neben jeder Personenfarbe steht die Initiale oder der Name. Die Personenlinien erreichen auf dem Papier nur zwischen 1,7:1 und 2,9:1. Das System verspricht dort keinen Kontrast, deshalb tragen Initiale und Name.
2. **Eine Person, eine Farbe, überall.** Lena ist Pfirsich auf dem iPhone, auf dem Mac und in der Kampagne. Wer Anna kennt, erkennt ihre Farbe wieder.
3. **Gäste sind umrandet, Haushalt und Helfer gefüllt.** Oma Grete steht als Ring da, Sofia als gefüllter Zettel.

Kinder gestalten ihren Bereich selbst, innerhalb von Kontrast-Leitplanken (Leitsatz 4).

> **Offen**
>
> Was ein Kind im eigenen Bereich wählen darf, ist noch nicht als Bauteil beschrieben. Fest steht nur die Grenze: Alles bleibt lesbar nach den Kontrastregeln unten, und die eigene Personenfarbe bleibt die eigene.

## Dunkler Modus

Der dunkle Modus ist keine zweite Gestaltung. Er definiert dieselben Rollen unter `:root[data-modus="dunkel"]` neu. In SwiftUI trägt jede Rolle beide Werte und entscheidet zur Laufzeit.

- `--grund` wird ein tiefes Schwarz-Braun, `--karte` ein dunkles Beige-Grau.
- `--tinte` wird Creme.
- Rosa, Gelb und Blau bleiben helle Flächen. Text darauf bleibt dunkel.
- Die Personen-Zettel bleiben hell, ihre Linien werden kräftiger.
- `--offen` wird eine kräftigere Stufe, damit der gestrichelte Rand nachts trägt.

Die Farbfelder auf dieser Seite schalten mit. Der Knopf oben rechts wechselt den Modus.

> **Nicht so**
>
> Eine Farbe im Bauteil nach dem Modus wählen: `if colorScheme == .dark`, `@media (prefers-color-scheme: dark)` im Bauteil, eine zweite Palette für nachts.

## Kontrast

Fließtext und Bedienelemente brauchen mindestens 4,5:1. Flächen und Konturen brauchen mindestens 3:1. Die Tabelle rechnet beide Modi aus den Tokens, bei jedem Bau neu.

| Vorne | Hinten | Hell | Urteil | Dunkel | Urteil |
| --- | --- | --- | --- | --- | --- |
| tinte | grund | 15,62:1 | AAA | 16,43:1 | AAA |
| tinte | karte | 14,27:1 | AAA | 13,13:1 | AAA |
| grau | grund | 4,83:1 | AA | 7,44:1 | AAA |
| grau | karte | 4,41:1 | 3:1 | 5,94:1 | AA |
| text-inaktiv | grund | 2,47:1 | zu schwach | 4,06:1 | 3:1 |
| tinte | rosa | 10,55:1 | AAA | 1,44:1 | zu schwach |
| tinte | gelb | 12,40:1 | AAA | 1,23:1 | zu schwach |
| tinte | blau | 10,94:1 | AAA | 1,39:1 | zu schwach |
| tinte | person-1 | 14,64:1 | AAA | 1,04:1 | zu schwach |
| tinte | person-5 | 9,34:1 | AAA | 1,63:1 | zu schwach |
| hell | schwarz | 16,77:1 | AAA | 1,17:1 | zu schwach |
| offen | grund | 4,47:1 | 3:1 | 9,21:1 | AAA |
| linie | grund | 1,38:1 | zu schwach | 1,60:1 | zu schwach |

Zur Kenntnis, nicht als Versprechen: Rosa, Blau und Gelb als Fläche auf dem Papier liegen bei 1,3:1 bis 1,5:1. Diese Flächen grenzen sich über ihre Haarlinie und ihren Inhalt ab, nicht über den Farbabstand.

> **Offen: Grau und Inaktiv sind in der Quelle nicht korrigiert**
>
> `docs/entscheidungen.md` (04.09.2026) und `docs/22-gestaltung.md` §3 sagen: `--grau` wurde von `#6E6A63` auf `#6C6861` gesetzt, damit Zweittext auf der Karte 4,5:1 hält. `--text-inaktiv` wurde von `#A29B8F` auf `#928B7F` gesetzt, damit es 3:1 erreicht.
> 
> Die Token-Quelle `tokens/quelle/farben-hell.json`, das erzeugte CSS, `swift/Tokens.swift` und die eingefrorene Referenz in `tokens/referenz/` tragen weiter die alten Werte. Nachgerechnet:
> 
> - `--grau` auf `--karte`: 4,41:1 statt 4,5:1. Mit dem korrigierten Wert wären es 4,54:1. Auf `--grund` hält Grau mit 4,83:1.
> - `--text-inaktiv` auf `--grund`: 2,47:1, auf `--karte` 2,26:1. Mit dem korrigierten Wert wären es 3,03:1 auf dem Grund, auf der Karte weiter nur 2,77:1.
> 
> Die Korrektur ging offenbar beim Umzug in das neue Designsystem verloren. Zu entscheiden: die Werte in der Quelle nachziehen, `pnpm tokens` laufen lassen und die Referenz erneuern.

## Farben nur im HQ

`--ampel-gruen`, `--ampel-gelb`, `--ampel-rot` und `--text-auf-ampel` gibt es nur im internen HQ. Dort bewerten sie Zahlen: gut, Potenzial, schwach. In der App für Familien kommen sie nicht vor. Ein Kind sieht nie einen roten Stand.

## Kurz

> **So**
>
> - Rolle nennen, nie Wert.
> - Bedeutung vor Geschmack: Fahrt ist blau, Familie ist gelb, Jetzt ist rosa.
> - Text auf farbigen Flächen über die `--text-auf-…`-Rollen.
> - Neben jeder Personenfarbe Initiale oder Name.
> - Neue Farbe? Erst in die Quelle, hell und dunkel, dann Kontrast rechnen.

> **Nicht so**
>
> - Hex-Werte, `rgba()` oder Tailwind-Farben wie `bg-pink-200` im Bauteil.
> - Deckkraft für „inaktiv“.
> - Verläufe, Muster, Bilder als Hintergrund der Oberfläche.
> - Gelb als Schrift, Offen-Rosa als Fläche, Rosa als Fehler.
> - Eine Ampel, eine Rangfarbe oder ein roter Stand bei Kindern.