Farbe

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.

/* 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; }

// 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 { … }

Grundfarben

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

• --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.

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.

Semantische Rollen

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

Flächen

--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

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

Knöpfe

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.

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).

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.

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.

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.

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