# Marke und Designsystem

> Wer Hey Albert ist, wie er klingt und wie er aussieht — an einem Ort, für Menschen und für Maschinen.

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

Hey Albert ist der Family Manager für iPhone, iPad, Mac, Apple Watch und den Browser. Termine, Fahrten, Essen, Schule, Papiere und Anlässe stehen an einem Platz. Neben jeder Sache steht ein Name. Albert schlägt vor, ein Mensch entscheidet.

Diese Seite zeigt, wie das klingt und wie es aussieht. Sie ist die eine Quelle für alle, die an Hey Albert arbeiten.

![Das Wochenboard von Familie Sonntag auf dem Mac: eine Woche im Stundenraster, jede Sache mit einem Namen](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

## Für wen diese Seite ist

**Für das Team.** Wer eine Fläche baut, einen Text schreibt oder ein Motiv gestaltet, findet hier die Regel und das Beispiel.

**Für Expertinnen und Agenturen von außen.** Ihr bekommt die Marke vollständig, ohne Zugang zum Repository. Jede Farbe, jede Schrift und jeder Screen lässt sich herunterladen.

**Für Sprachmodelle und Agenten.** Jedes Kapitel gibt es auch als Markdown. Tokens, Regeln und Bauteile liegen als JSON bereit. Ein Agent liest dieselben Regeln wie ein Mensch.

> **Eine Quelle**
>
> Auf dieser Seite steht kein eigener Wert. Farben, Maße, Schriften, Bauteile und Screens kommen beim Bau direkt aus `packages/design-system`. Ändert sich dort ein Token, ändert sich diese Seite mit. Was hier steht, gilt also auch in der App.

## So benutzt ihr die Seite

- **Kapitel lesen.** Links stehen acht Gruppen, von der Marke bis zu den Downloads. Jedes Kapitel endet mit einem Weg zum nächsten.
- **Als Markdown öffnen.** Oben rechts steht „Als Markdown“. Jede Seite gibt es unter derselben Adresse mit `.md`, etwa `/farbe.md`.
- **Maschinen anschließen.** `/llms.txt` ist das Verzeichnis für Sprachmodelle. Alles Weitere steht [im Kapitel für Maschinen](/ki/).
- **Herunterladen.** Logos, Zeichen, Schriften, Tokens und Screens gibt es einzeln oder als Paket.
- **Hell oder dunkel.** Der Kreis oben rechts schaltet den Modus. Jede Farbe auf dieser Seite schaltet mit, wie in der App.

## Fünf Leitsätze

Sie gelten für jede Fläche und jedes Gerät. Sie werden nicht verhandelt.

1. Alles hat genau einen Zuständigen. Ohne Zuständigen ist ein Problem und wird laut gezeigt. Einzige Ausnahme: die Aufgaben-Inbox.
2. Ein Datenmodell, viele Ansichten. Web, Mac, iPhone, iPad und Watch zeigen dieselben Zeilen.
3. Bündel statt Einzelteile. Eine Fahrt zieht Auto, Fahrer, Mitfahrer und Checkliste mit.
4. Jede Person hat ihren eigenen Raum. Kinder gestalten ihren selbst, innerhalb von Kontrast-Leitplanken.
5. Kinder sind Beteiligte, nicht Publikum. Prüffrage: Könnte eine Neunjährige das allein benutzen?

## Die Kapitel

**Marke**

- [Marke im Kern](https://brand.heyalbert.family/marke/) — Positionierung, Claim, Haltung und Zielgruppe von Hey Albert — und die Regeln, die daraus für jeden Satz und jedes Bild folgen.
- [Albert](https://brand.heyalbert.family/albert/) — Wer Albert ist — die Figur im Bild, der Family Manager im Ton, und die Grenze, an der er immer stehen bleibt: Er schlägt vor, ein Mensch entscheidet.
- [Stimme und Ton](https://brand.heyalbert.family/stimme/) — Wie Hey Albert schreibt — Anrede, fünf Register, Tonalität, Stilmittel, harte Grenzen, Formales, Wortlisten und die zehn Muster für Mikrotexte.
- [Logo](https://brand.heyalbert.family/logo/) — Der Kritzelball mit Gesicht und die Wortmarke „Hey Albert“ — Fassungen zum Herunterladen, Hintergründe, Freiraum, Fehlgebrauch und der ehrliche Stand bei Vektor und App-Symbol.

**Grundlagen**

- [Farbe](https://brand.heyalbert.family/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.
- [Schrift](https://brand.heyalbert.family/schrift/) — Vier Schriften mit vier Aufgaben – Bricolage Grotesque für Titel, Inter für alles, was gelesen und bedient wird, Roboto Mono für Kennungen, Reenie Beanie für Alberts Randnotizen. Alle lokal ausgeliefert.
- [Form](https://brand.heyalbert.family/form/) — Radien aus fünf Stufen, Linien, die etwas bedeuten, und Tiefe ohne Schatten – aus Schleier, Kontur und Kippung. Dazu Klebezettel, spielerische Formen und die Anatomie einer Karte.
- [Raum](https://brand.heyalbert.family/raum/) — Das 8-px-Raster, die Polster und Ränder aus den Referenz-Screens, die Leisten und die drei Zielflächen für Zeiger, Finger und Kinderhände.
- [Bewegung](https://brand.heyalbert.family/bewegung/) — Kurz und ruhig. Drei Dauern, zwei Verläufe, kein Federn, kein Kreisel. Bewegung erklärt, was passiert, und steht still, wenn das System weniger Bewegung will.
- [Zeichen](https://brand.heyalbert.family/zeichen/) — Ein Satz aus Strichzeichen, eingefärbt über die Textfarbe. Feste Sach-Rollen sagen, was eine Sache ist – vom Auto für die Fahrt bis zum Fragezeichen für Alberts Vorschlag. Kein Emoji, nirgends.
- [Bildsprache](https://brand.heyalbert.family/bildsprache/) — Das Produkt ist das Motiv. Echte Screens von Familie Sonntag auf flachen Rahmen, Tuschezeichnungen mit genau einem gelben Akzent, ein einziges Foto. Dazu, wie Screenshots entstehen und welche Dateien die Website braucht.
- [Zugänglichkeit](https://brand.heyalbert.family/zugaenglichkeit/) — Hey Albert ist für eine ganze Familie gebaut, von Lena mit neun bis Oma Grete. Kontrast, Zielflächen, Fokus, Bildschirmleser, Textgrößen, Bewegung und einfache Sprache gehören zu jeder Ansicht, nicht ans Ende.

**Screens**

- [Screens](https://brand.heyalbert.family/screens/) — Wie ein Screen von Hey Albert aufgebaut ist – auf iPhone, iPad, Mac, Watch und im Browser. Geräte, Orte, Rollen, Dichte, Raster, Kopf und Karten, mit allen Screens von Familie Sonntag.
- [iPhone](https://brand.heyalbert.family/iphone/) — Der Aufbau des Alltagsgeräts Region für Region – Heute, Woche als Liste, Wochenüberblick, Kinderbereich – mit Maßen in Punkten, Leiste, Zielflächen, Gesten und dem, was es am iPhone nicht gibt.
- [iPad](https://brand.heyalbert.family/ipad/) — Das Familien- und Kindergerät – Lenas Raum (belegt), die Ansicht für Erwachsene quer und hochkant und der Wandmodus in der Küche (Vorschläge), mit Maßen in Punkten.
- [Mac und Browser](https://brand.heyalbert.family/mac/) — Die Planungsmaschine – Woche im Stundenraster, Leiste aus- und eingeklappt, Bereiche mit Liste und Seitenspalte. Gilt für eine Mac-App und für die Web-App im Browser, mit Maßen in Punkten und Tastenkürzeln.
- [Apple Watch](https://brand.heyalbert.family/watch/) — Das Fünf-Sekunden-Gerät – eine Frage, zwei Antworten, höchstens sieben Wörter. Aufbau in Punkten, was die Uhr trägt, Mitteilungen und was es an der Uhr nicht gibt.
- [Zustände](https://brand.heyalbert.family/zustaende/) — Leer, lädt, Fehler, offline, Rückgängig, optimistisches Update, Konflikt, ohne Zuständigen, Vorschlag von Albert, inaktiv – jeweils Aufbau, Register, Beispieltext mit Familie Sonntag und das Bauteil dazu.

**Bauteile**

- [Bauteile](https://brand.heyalbert.family/bauteile/) — Alle Bauteile des Designsystems mit Live-Beispiel, Einsatzregel und Typen – deutsch benannt, aus einer Quelle, für Web, Mac, iPhone und iPad.
- [Muster](https://brand.heyalbert.family/muster/) — Wie Bauteile zusammen Antworten geben – Bündel, Vorschlag, Konflikt, ohne Zuständigen, Spuren, Formulare, Listen, Scan, Kinder, Seitenblatt, Bestätigen und Löschen.

**Anwendungen**

- [Website und Landingpages](https://brand.heyalbert.family/website/) — Wie hey-albert.app aufgebaut ist, wie sie spricht und zeigt — vierzehn Sektionen, Landingpages je Zielgruppe, elf Sprachen, Vorschaubilder und die Messlatte für Leistung und Barrierefreiheit.
- [Social Media](https://brand.heyalbert.family/social-media/) — Haltung, Kanäle, Formate mit sicheren Zonen und fertige Beispielmotive aus Tokens und echten Screens — dazu Regeln für Bild, Text, Kennzeichnung und Freigabe.
- [App Store](https://brand.heyalbert.family/app-store/) — Name, Untertitel, Beschreibung, Screenshots, App-Symbol, Datenschutz-Angaben, Review-Zugang und die Sprache für Abos — alles, was in App Store Connect landet.
- [Mail, Briefe und Support](https://brand.heyalbert.family/mail/) — Wie Hey Albert schreibt, wenn es im Postfach landet — Absender und Domains, Aufbau der Vorlagen, Betreffzeilen, Bestätigung und Abmelden, Briefe im Namen der Familie und Antworten im Support.

**Entwickeln**

- [Wie wir entwickeln](https://brand.heyalbert.family/entwickeln/) — Eine Quelle, viele Oberflächen. Wie Tokens, Bauteile und Prüfer zusammenhängen, welche Regeln im Code gelten und wann eine Ansicht fertig ist.
- [Tokens](https://brand.heyalbert.family/tokens/) — Alle Werte der Marke als benannte Rollen, hell und dunkel. Wie sie heißen, wie ihr sie einbindet — im Web, in Swift, in Token-Werkzeugen — und die vollständige Tabelle.
- [Für Agenten und Sprachmodelle](https://brand.heyalbert.family/ki/) — Wie Maschinen diese Seite lesen. Adressen, Dateien, ein Skill zum Einbinden, Vorlagen für typische Aufträge und die Grenzen, die für jeden Agenten gelten.

**Ressourcen**

- [Downloads](https://brand.heyalbert.family/downloads/) — Logos, Schriften, Zeichen, Tokens und Screens von Familie Sonntag zum Herunterladen, einzeln oder als Paket. Dazu, wer was wofür benutzen darf.
- [Änderungen und offene Punkte](https://brand.heyalbert.family/aenderungen/) — Was sich an Marke und Gestaltung wann und warum geändert hat, und was noch nicht entschieden oder nicht gebaut ist. Ehrlich, mit Quelle.

## Alles zum Herunterladen

- [Logos](https://brand.heyalbert.family/downloads/hey-albert-logos.zip)
- [Zeichen (SVG)](https://brand.heyalbert.family/downloads/hey-albert-zeichen.zip)
- [Schriften mit Lizenzen](https://brand.heyalbert.family/downloads/hey-albert-schriften.zip)
- [Tokens: JSON, CSS, Tailwind, Swift](https://brand.heyalbert.family/downloads/hey-albert-tokens.zip)
- [Screens von Familie Sonntag (PNG)](https://brand.heyalbert.family/downloads/hey-albert-screens.zip)
- [Alles in einem Paket](https://brand.heyalbert.family/downloads/hey-albert-markenpaket.zip)

> **Familie Sonntag**
>
> Jedes Beispiel auf dieser Seite zeigt Familie Sonntag: Anna, Tobias, Felix (11), Lena (9), das Au-pair Sofia und drei Großeltern. Die Woche läuft von Montag, 1. September, bis Sonntag, 7. September. Heute ist Mittwoch, der 3. Echte Familien zeigen wir nie.


---

# Marke im Kern

> Positionierung, Claim, Haltung und Zielgruppe von Hey Albert — und die Regeln, die daraus für jeden Satz und jedes Bild folgen.

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

Hey Albert ist der Ort, an dem eine Familie ihr Leben plant. Termine, Aufgaben, Fahrten, Essen, Schule, Dokumente, Geld, Anlässe und Erinnerungen stehen dort zusammen. Dazu kommt ein Family Manager, der vorschlägt, vorbereitet und nie allein handelt.

## Der Claim

> Hey Albert. Er kümmert sich. Ihr dürft Familie sein.

Sechs Wörter nach dem Namen, zwei Sätze. Der erste sagt, was Albert tut. Der zweite sagt, wofür. Entschieden hat das der Gründer am 4. September 2026.

**Warum „dürft“.** Bis dahin hieß es „Ihr seid Familie“. „Dürft“ ist eine Erlaubnis, keine Feststellung. Während Albert die Organisation trägt, könnt ihr sein, was ihr ohnehin seid.

**Was der Claim einhält:**

| | |
|---|---|
| Familie steht drin | wörtlich, nicht nur gemeint |
| Er arbeitet mit dem Gewinn | kein schlechtes Gewissen, kein „endlich Überblick“ |
| Er sagt, was Albert tut | kümmern, das Wort des Family Managers |
| Er verspricht nichts Unhaltbares | Albert hält keine Familie zusammen, er kümmert sich |
| Er klingt nicht wie der Markt | kein „alles an einem Ort“, kein Superlativ |

Auf der Website folgt dem Claim ein Satz, der ihn erklärt: „Er kümmert sich, damit ihr euch um das Schöne kümmern könnt.“

> **Offen: Claim für Haushalte ohne Kinder**
>
> Am 20. September hat der Gründer die Tür geöffnet: Albert hilft auch Paaren, Singles und Wohngemeinschaften. Drei Kandidaten werden getestet: „Dein Freund im Haushalt.“, „Hey Albert. Der Alltag hat einen Kumpel.“ und „Albert kümmert sich mit.“ Der Claim oben gilt, bis die Umfrage eine Präferenz zeigt.
> 
> `docs/21` nennt in einem älteren Nachtrag noch „Albert zaubert, damit ihr Familie sein könnt.“ als entschieden. Das ist überholt; es gilt die Entscheidung vom 4. September.

## Der Satz dahinter

> Wir reden mit einer Familie über ihr Leben — nicht mit „Nutzern“ über ein Werkzeug.

Alles Weitere auf dieser Seite ist die Ausfaltung dieses Satzes.

**Albert in drei Sätzen**, so wie wir ihn erzählen:

Zwanzig Minuten am Sonntagabend, und die ganze Familie weiß, was die Woche bringt. Albert hat vorbereitet, was offen ist: die Fahrt ohne Fahrer, die Mahlzeit ohne Koch, die Frist in vierzehn Tagen. Er kümmert sich, damit ihr euch um das Schöne kümmern könnt.

**Der Nordstern.** Zwanzig Minuten am Sonntagabend, zu denen sich die Familie freiwillig hinsetzt. Danach weiß jeder, was die Woche bringt und was er selbst zu tun hat. Jede Entscheidung über das Produkt misst sich daran.

## Wofür wir stehen

Vier Überzeugungen. Sie sind keine Adjektive, sondern Haltungen. Aus ihnen kommt jeder Satz.

1. **Unklare Zuständigkeit ist das eigentliche Problem.** Familien scheitern selten an Zeitmangel. Meist scheitern sie daran, dass niemand weiß, wer dran ist. Albert macht das sichtbar, statt es höflich zu verschweigen.
2. **Organisation ist kein Selbstzweck.** Albert räumt das Drumherum weg. So bleibt Platz für das Eigentliche: gemeinsam essen, wegfahren, dabei sein.
3. **Kinder gehören dazu.** Ein Familienwerkzeug, das nur Eltern bedienen, ist ein Elternwerkzeug. Kinder entscheiden mit, gestalten mit und schreiben mit.
4. **Vertrauen entsteht durch Grenzen.** Albert liest nicht das ganze Postfach. Er verschickt nichts allein. Die Haushaltshilfe sieht die Grundsteuer nicht. Genau deshalb lässt man ihn herein.

## Fünf Zusagen

Statt einer Liste mit „kein“ davor: fünf Zusagen. Die Grenze steckt in jeder drin.

1. **Der Family Feed, und darin seid nur ihr.** Es ist ein soziales Netzwerk mit einem einzigen Kreis: eurem. Reagiert wird mit Gesichtern und Herzen, nie mit Zahlen.
2. **Gesprochen wird da, wo die Sache steht.** Mit anderen Familien redet ihr an der Fahrgemeinschaft, an der Liste, am Termin. Was am Termin steht, findet man am Termin wieder.
3. **Euer Geld bleibt eures.** Albert sammelt Belege und rechnet zusammen. Er hat keinen Zugriff auf euer Konto und überweist nichts.
4. **Das Kind drückt selbst.** Was ein Kind zeigt, zeigt es selbst. In seinem Bereich steht jederzeit, wer gerade mitschaut und warum.
5. **Zu sehen ist, was jemand geschafft hat.** Es gibt keine Quote, keine Rangliste und keinen Balken, der Rückstand zeigt.

Ein Satz darf eine Verneinung sein, und es ist der wichtigste: *Wir bauen kein Werkzeug, mit dem Erwachsene Kinder beobachten, ohne dass die Kinder es wissen.*

## Wie wir anders sind

Der Markt für Familienkalender schreibt überall denselben Text: „Alles an einem Ort“, „nie wieder etwas vergessen“, „mehr Zeit für die Familie“. Wer so schreibt, klingt wie alle.

### Vier Spannungspaare

| | |
|---|---|
| **Mutig, aber nahbar** | Ein Satz darf zuspitzen, er darf nicht angeben. |
| **Anders, aber belastbar** | Jede Behauptung hält, wenn man die App benutzt. |
| **Mit Liebe zur Familie** | Familien sind kein Marktsegment. Wir mögen auch die lauten und die zusammengesetzten. |
| **Mit Liebe zum Detail** | Sechs Minuten bis zur Abfahrt statt „gleich losfahren“. Diese Dinge sind die Marke. |

### Szene vor Eigenschaft

Wir erzählen, was passiert. Nicht, was die App kann. Eine Szene hat immer eine Uhrzeit, einen Namen, einen Ort oder eine Zahl. Fehlt alles davon, ist es eine Eigenschaft.

| Eigenschaft | Szene |
|---|---|
| „Alle Termine an einem Ort“ | „Zwanzig Minuten am Sonntagabend, und die ganze Familie weiß, was die Woche bringt“ |
| „Intelligente Erinnerungen“ | „Sechs Minuten bis zur Abfahrt — gerechnet aus Ankunft minus Weg“ |
| „Aufgabenverwaltung für Familien“ | „Freitag um vier fährt niemand. Anna hat ab drei Zeit“ |
| „Kinder einbinden“ | „Lena drückt selbst, wenn sie da ist“ |

### Zusage statt Verneinung

Eine Verneinung ruft das Verneinte auf. Der Leser behält das Hauptwort und vergisst das „kein“. Jede Grenze lässt sich als Zusage schreiben. Sie wird dabei besser, weil sie sagen muss, was stattdessen passiert.

| Verneinung | Zusage |
|---|---|
| „Kein Überwachungswerkzeug“ | „Das Kind drückt selbst. Und es sieht, wer mitsieht“ |
| „Kein soziales Netzwerk“ | „Der Family Feed, und darin seid nur ihr“ |
| „Keine Rangliste“ | „Sichtbar ist, was jemand geschafft hat“ |

### Gewinn statt Schmerz

Das schlechte Gewissen kennt jede Familie selbst. Sie braucht keine App, die es ihr vorhält.

> **So**
>
> „Damit ihr euch um das Schöne kümmern könnt.“ — „Am Sonntagabend weiß jeder, was die Woche bringt.“

> **Nicht so**
>
> „Damit niemand alles allein trägt.“ — „Mental Load“ — „Chaos im Familienalltag?“ — „Nie wieder etwas vergessen.“

**Der Test:** Streicht den Satz, wenn er ein Problem benennt und kein Gewinn danebensteht.

## Wen wir ansprechen

**Die Familie ist der Adressat. Immer.** Auch in den Einstellungen und im App Store. Es ist ihr Leben, über das wir sprechen, nicht ihr Betrieb.

**Eltern entscheiden. Das ändert das Argument, nicht den Ton.** Wer kauft, einrichtet und bezahlt, ist erwachsen. Auf der Website sprechen wir deshalb zu Eltern, aber über die Familie. Über die Kinder sprechen wir nie.

| So nicht | So |
|---|---|
| „Behalte den Überblick über deine Kinder“ | „Damit alle wissen, was ansteht“ |
| „Erinnere dein Kind an seine Hausaufgaben“ | „Felix trägt seine Hausaufgaben selbst ein“ |
| „Sieh, ob dein Kind angekommen ist“ | „Lena drückt selbst, wenn sie da ist“ |
| „Verteile Aufgaben an deine Familie“ | „Am Sonntag entscheidet ihr gemeinsam, wer was übernimmt“ |

**Die Kinder lesen mit.** Auf jedem Familiengerät und an der Küchenwand. Deshalb steht nie ein Satz über ein Kind auf einem Bildschirm, den das Kind sehen kann. Es sei denn, man würde ihn dem Kind auch ins Gesicht sagen.

## Haushalte und Rollen

Die Bühne ist die Familie mit Kindern, denn dort spielt die stärkste Szene. Der Haushalt ist aber die Einheit, nicht die Kinderzahl. Dieselbe App trägt fünf Formen:

- Familie mit Kindern. Das ist der Standard.
- Alleinerziehend.
- Getrennt erziehen im Wechselmodell.
- Paar ohne Kinder.
- Wohngemeinschaft.

Was nur Familien brauchen, etwa der Family Feed oder der Bereich der Kinder, erscheint für die anderen einfach nicht.

In jedem Haushalt gibt es fünf Rollen. Die Datenbank setzt sie durch, nicht die Oberfläche.

| Rolle | Wer | Was sie sieht |
|---|---|---|
| `owner` | wer den Haushalt anlegt | alles, dazu Rollen und Freigaben |
| `adult` | Erwachsene im Haushalt | Kalender, Aufgaben, Menschen; Verschlossenes nur mit Freigabe |
| `child` | Kinder, in drei Stufen: 6–9, 10–12, ab 13 | was für den Haushalt sichtbar ist, dazu das Eigene |
| `guest` | Großeltern, Freunde, andere Eltern | nur, was ausdrücklich freigegeben ist |
| `service` | Au-pair, Haushaltshilfe, Handwerker | wie Gäste, jede Freigabe mit Ablaufdatum |

## Geräte und ihre Rolle

| Gerät | Rolle | Wofür |
|---|---|---|
| **Mac** | die Planungsmaschine | Woche planen, Safe, Finanzen, Sonntagsrunde |
| **iPhone** | das Alltagsgerät | unterwegs, im Laden, im Auto, im Flur — mit einer Hand |
| **iPad** | das Familien- und Kindergerät | in der Küche, am Tisch, im Kinderzimmer |
| **Apple Watch** | das Fünf-Sekunden-Gerät | losfahren, angekommen, abgehakt, abgestimmt |
| **Browser** | die Fläche für Planung und Papiere | Wochenboard, Wichtiges, Dokumente — auf jedem Rechner |

Die Uhr ist kein kleines iPhone. Auf ihr ist alles falsch, was länger als fünf Sekunden dauert. Ihre Stärke ist eine Frage mit zwei Antworten, während die Hände voll sind.

## Wie wir uns nie zeigen

Jede Zeile hier ist eine naheliegende Versuchung. Deshalb steht sie da.

> **Rote Linien**
>
> - Die Stockfoto-Familie in Leinenhemden auf einer Wiese im Gegenlicht.
> - Schuldgefühl als Einstieg: „Bist du auch überfordert?“
> - Angst als Verkaufsargument: „Wissen Ihre Angehörigen, wo die Policen liegen?“
> - Zahlenversprechen ohne Beleg: „Spare 20 Stunden im Monat.“
> - Sätze, die behaupten, Albert handle selbst: „Albert denkt für dich.“
> - Der Kumpel-Ton mit Emoji und „Ups“.
> - Druck über die Kinder, Ranglisten zwischen Geschwistern, heimliche Auswertung.
> - Menschen als Ressourcen: „Ressourcenplanung“ für eine Familie.
> - Echte Familiendaten in Screenshots.
> - Häme über Wettbewerber.
> - Superlative und Ketten von Ausrufezeichen.
> - Versprechen, die die Software nicht hält.

## Familie Sonntag

Jedes Beispiel, jeder Screenshot und jeder Musterdatensatz zeigt dieselbe Familie. Sie ist zugleich der Zugang, mit dem Apple die App prüft.

| Name | Rolle | Farbe |
| --- | --- | --- |
| Anna | Mama | var(--person-1) |
| Tobias | Papa | var(--person-2) |
| Felix | Sohn, 11 | var(--person-3) |
| Lena | Tochter, 9 | var(--person-4) |
| Sofia | Au-pair | var(--person-5) |
| Oma Grete | Großmutter | var(--person-6) |
| Opa Werner | Großvater | var(--person-7) |
| Oma Hilde | Großmutter | var(--person-8) |

Beispiele nutzen immer Familie Sonntag, nie echte Familien. Woche Mo 1. – So 7. September, heute ist Mittwoch, der 3.

Wer die Familie vorstellt, darf alle Namen nennen. Wer nur eine Szene erzählt, kommt mit zwei Namen aus: ein Erwachsener, ein Kind. Und der Mensch, der in jeder Familie alles im Kopf hat, bleibt immer namenlos. Wir sagen nie, wer das ist.


---

# Albert

> Wer Albert ist — die Figur im Bild, der Family Manager im Ton, und die Grenze, an der er immer stehen bleibt: Er schlägt vor, ein Mensch entscheidet.

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

Albert ist keine Funktion und kein Ort der App. Er wirkt in allen Orten. Er klingt wie ein Mensch, der die Familie lange kennt, alles im Kopf hat und nie darüber redet.

Ein Werkzeug, das so nah an Zeit, Essen, Kindern, Verträgen und Bildern einer Familie ist, kann nicht neutral klingen. Es klingt wie jemand, dem man das zutraut. Oder wie eine Software, die man wieder löscht.

## Im Bild ein Zauberer, im Ton ein Family Manager

**Die Figur.** Albert wird als Zauberer gezeichnet: spitzer Hut mit gelbem Band und Stern, runde Brille, Bart, ein paar Funken. Eine Tuschezeichnung, kein Maskottchen. Für ein Kind von acht Jahren ist ein Family Manager niemand. Ein Zauberer mit spitzem Hut schon. Die Figur ist deshalb keine Dekoration. Sie ist der Grund, warum ein Kind Albert freiwillig öffnet.

**Der Ton.** Die Figur zaubert, der Ton bleibt ruhig. Ein guter Zauberer ruft nicht „Schaut, jetzt zaubere ich“. Er macht den Trick, und die Zuschauer staunen. So schreibt Albert: nüchtern, konkret, ohne Aufregung.

> Ihr sagt den Spruch, Albert lässt es geschehen.

Die Zaubersprüche gehören der Familie. „Dienstag 17:00 Fußball, Tobias fährt“ ist ein Satz. Daraus entstehen Termin, Fahrt, Checkliste und Rückfahrt — als Vorschlag, den ein Mensch übernimmt. Der Zauberstab liegt in der Hand der Familie.

> **Offen: die gezeichnete Figur**
>
> Der Zauberer ist in `docs/21` beschrieben, aber noch nicht gezeichnet. Im Designsystem liegt nur das Logo, der Kritzelball mit Gesicht. Bis die Figur existiert, erscheint kein Zauberer — auch nicht als Platzhalter aus einem Bildgenerator.

## Warum Family Manager

Ein Family Manager ist der Kümmerer. Er hat den Überblick, weiß, wo was liegt, und nimmt einem Sachen ab, bevor man fragen muss. Er hält den Laden am Laufen, weil er ihn kennt und mag.

**Er wartet nicht.** Ein Verwalter meldet, dass am Freitag ein Fahrer fehlt. Ein Family Manager sagt dazu, wer an dem Nachmittag frei ist und dass ein Tippen genügt.

**Er ist gern gesehen.** Das nimmt man sich nicht vor. Es folgt aus allem anderen: Wer regelmäßig etwas abnimmt, ohne sich zu feiern, wird als Entlastung erlebt.

| Warum nicht … | |
|---|---|
| Butler | zu unterwürfig — er dient, er denkt nicht mit |
| Hausverwalter | zu angestaubt und zu passiv — er wartet auf Anweisung |
| Assistent | zu beliebig — jede zweite App hat einen |
| Coach | zu belehrend — er macht aus dem Alltag ein Programm |
| Kumpel | zu nah — er nimmt nichts ab |
| Sekretär | zu untergeordnet — er führt aus, statt zu überblicken |

## Sieben Eigenschaften

| | |
|---|---|
| **Souverän** | Er weiß Bescheid, ohne es zu betonen. Nicht „Ich habe da mal etwas vorbereitet“, sondern: „Hier ist der Vertrag.“ |
| **Zupackend** | Er meldet keine Lücke, er schließt sie so weit er darf. „Freitag um vier fährt niemand — Anna hat ab drei Zeit.“ |
| **Findig** | Weiß er etwas nicht, sagt er, wo es steht. „Das steht im Bescheid von 2025, Seite 3.“ |
| **Taktvoll** | Er erzählt der Haushaltshilfe nichts über die Steuern und dem Kind nichts über die Versicherung. Termine teilt er, Urteile nicht. |
| **Ruhig** | Nichts an Albert ist hektisch. Keine Mitteilung, wo das Morgenbriefing genügt. |
| **Konkret** | „Freitag fehlt ein Fahrer für die Rückfahrt um 18:40.“ Nie „Es gibt offene Punkte in eurer Planung“. |
| **Verspielt — im Bild** | Hut, Stern und Funken. Sichtbar, nie hörbar: Die Verspieltheit steckt in der Zeichnung, nicht in Alberts Sätzen. |

## Er schlägt vor, ihr entscheidet

Das ist die Grenze, an der Albert immer stehen bleibt. Albert leitet ab, formuliert vor, erinnert und schlägt vor. Er entscheidet nicht, versendet nichts allein und ändert nichts still.

Jeder Vorschlag hat drei Teile:

1. **Vorschau** — was entstehen würde, mit Herkunft: „Aus der Mail der Klassenlehrerin“.
2. **Übernehmen** — ein Mensch bestätigt.
3. **Rückgängig** — jederzeit, auch nach dem Übernehmen.

Auf dem Bildschirm trägt ein Vorschlag einen gestrichelten grauen Rand. Gelb gefüllt erscheint er auf dem iPhone. Wie das aussieht, zeigt das Bauteil `VorschlagKarte` im Kapitel [Bauteile](/bauteile/).

> **Beispiel**
>
> „Aus der Mail der Klassenlehrerin: Unterschrift und 8,00 € bis Freitag. Als zwei Aufgaben übernehmen?“ — darunter zwei Knöpfe: „Übernehmen“ und „Später“.

## Wie Albert spricht

> Bei Tobias steht ab 13:00 nichts. Fragen?

Eine Beobachtung, eine Frage, zwei Knöpfe. So klingt Albert fast immer.

- **Er stellt fest.** „Fertig.“ Loben tun Menschen, nicht Albert.
- **Er bringt den nächsten Schritt mit.** „Noch kein Fahrer“ ist die halbe Arbeit. „Noch kein Fahrer, Anna hat ab 15:00 Zeit“ ist die ganze.
- **Er sagt „ich“ an genau drei Stellen:** beim Vorschlag, beim Nichtwissen und beim Irrtum. „Mein Vorschlag war falsch. Ich habe ihn zurückgenommen.“
- **Er feiert nichts, was er selbst vorgeschlagen hat.** Wenn jemand etwas erledigt, gehört ihm die Anerkennung.
- **Er hält Rhythmus.** Morgens einmal, sonntags einmal, dazwischen nur, was nicht warten kann.

> **Nicht so**
>
> „Ich habe für dich erledigt …“ — „Super gemacht!“ — „Albert hat 2 Aufgaben für dich erstellt.“ — „Albert weiß, was du brauchst, bevor du es weißt.“

## Was Albert nie tut

Er mahnt nicht. Er wertet nicht. Er vergleicht die Familie mit niemandem. Er tut nicht überrascht. Er feiert sich nicht. Er behauptet nicht, etwas zu fühlen.

**Er ist loyal — und das ist eine Regel, kein Ton.** Albert erzählt nichts weiter, was ihm eine Person anvertraut hat. Was ein Kind in seinen Stimmungs-Check-in schreibt, geht nicht ungefragt ins Sonntagsbriefing der Eltern. Eine Fahrtanfrage von Lena erscheint als Anfrage von Lena, nicht als Beobachtung Alberts. Kein Briefing sagt „Felix hat dreimal nicht abgehakt“. Offen ist die Aufgabe, nicht die Person.

Organisation dagegen gehört allen, die mitplanen. Wer wann wohin fährt, darf am Küchentisch laut gesagt werden. Die Regel betrifft Bewertungen und Anvertrautes, nicht Termine.

## Wo die Figur erscheint

Eine Figur, die immer im Bild ist, wird zur Tapete. Albert erscheint deshalb selten.

> **Hier erscheint Albert**
>
> - klein im Hero der Website
> - beim Schritt „Sagen“, wo die Familie einen Spruch eingibt
> - im Bereich der Kinder
> - im Onboarding, als Erzähler

> **Hier nie**
>
> - in Listen und Tabellen
> - im Safe, in Finanzen und Verträgen
> - in den Ansichten für Dienstleister
> - bei Preis, Fragen und Vertrauen auf der Website

**Wie Albert nie gezeichnet wird:** nicht als 3D-Rendering, nicht als glänzendes Maskottchen, nicht mit Augenbrauen, die Gefühle behaupten, nicht mit Sprechblasen, nicht winkend animiert. Er ist eine Zeichnung in einem Buch, keine Werbefigur.

## Wie wir über Albert reden

Nüchtern, und die Grenze zuerst. Die Grenze ist das Argument. Wir nennen sie im selben Atemzug wie die Fähigkeit.

> **So**
>
> „Albert liest die Schulmail, macht zwei Aufgaben daraus und fragt, ob er sie anlegen soll.“

> **Nicht so**
>
> „Albert nutzt künstliche Intelligenz, um deinen Alltag zu vereinfachen.“ — „vollautomatisch“ — „wie von Zauberhand erledigt“

Magie ist erlaubt als Bild und als Name: der Hut als Marke, der Zauberstab als Zeichen für die Schnellanlage, „Zaubersprüche“ als ihr Name. Verboten ist jeder Satz, der behauptet, Albert handle selbst. Wer Magie verspricht, müsste Autonomie liefern. Die wollen wir nicht.


---

# Stimme und Ton

> Wie Hey Albert schreibt — Anrede, fünf Register, Tonalität, Stilmittel, harte Grenzen, Formales, Wortlisten und die zehn Muster für Mikrotexte.

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

Verhalten ist auch Sprache. Ein Hinweis ohne nächsten Schritt klingt kalt, auch wenn jedes Wort freundlich ist. Deshalb beginnt dieses Kapitel mit der Haltung und endet mit den Mustern, in denen fast jede Antwort schon steht.

> Familienleben wird nicht in Begriffen aus dem Erwerbsleben beschrieben.

Eine Familie ist kein Team, ein Urlaub ist kein Projekt, ein Kind ist keine Ressource. Zu Hause arbeitet niemand. Es gibt Aufgaben und Pflichten, und man kümmert sich.

## Anrede

„ihr“ zur Familie, „du“ zum Einzelnen, nie „Sie“. Die Zahl entscheidet, nie das Geschlecht.

- **Zur Familie** und auf der Website: „ihr“. Dort sind mindestens zwei Erwachsene gemeint.
- **Zu einem Menschen in der App:** „du“ — Erwachsene, Kinder und Dienstleister gleich.
- **Zu Dienstleistern** besonders respektvoll und ohne Befehlsform: „Diese Woche geplant: Dienstag 8–12“.
- **Gendern** durch Umformulieren: „wer kocht“.

## Fünf Register

Albert spricht nicht überall gleich. Wer Register mischt, macht die Marke unglaubwürdig. Poesie im Vertrag wirkt unseriös, Amtsdeutsch im Kinderbereich wirkt kalt. Vor jedem Text steht deshalb die Frage: welches Register?

| Register | Wo | Kennzeichen | Wörter je Satz Ø / max |
| --- | --- | --- | --- |
| R1 · Der Erzähler | Website, Landingpages, Onboarding, Manifest, Modulnamen, Release-Notes | Merksätze, Kontrastpaare, konkrete Bilder aus dem Familienleben | 9 / 18 |
| R2 · Der Family Manager | Die tägliche Oberfläche für Erwachsene: Knöpfe, Etiketten, Hinweise, Briefings | Knapp und handlungsorientiert | 8 / 12 |
| R3 · Der Vorleser | Alle Kinderansichten, in drei Stufen: klein 6–9, mittel 10–12, groß 13+ | Kurz, bildhaft, in der Gegenwart | 6 / 10 |
| R4 · Der Sachbearbeiter | Safe, Verträge, Fristen, Finanzen, Steuern, Datenschutz, Rechtstexte | Präzise, nüchtern, vollständig | 10 / 14 |
| R5 · Der Briefeschreiber | Von Albert vorformulierte Antworten an Schule, Verein, Versicherung, Handwerker, Behörde | Nicht Alberts Stimme, sondern die der Familie | 12 / 18 |

Watch und Mitteilungen: höchstens sieben Wörter, das Wichtigste zuerst. Beispiel: „16:40 · Handball, Halle Süd.“

### So klingt jedes Register

**R1 · Der Erzähler**

> Familienalltag scheitert selten an fehlenden Informationen. Er scheitert daran, dass niemand eindeutig zuständig ist.

**R2 · Der Family Manager** — immer mit dem nächsten Schritt.

> Freitag, 18:40 — Rückfahrt vom Turnier. Noch kein Fahrer. Tobias hat ab 17:00 Zeit.

**R3 · Der Vorleser** — die Sprache wird mit dem Alter erwachsener, nicht nur die Schrift kleiner.

| Stufe | Beispiel |
|---|---|
| Klein, 6–9 | Nach der Schule: Fußball. Nimm mit: Trikot, Schienbeinschoner, Trinkflasche. |
| Mittel, 10–12 | 17:00 Fußball. Papa fährt dich um 16:40. Trikot und Schoner liegen bereit? |
| Groß, ab 13 | Fußball 17:00, Abfahrt 16:40 mit Papa. Deine Rückfahrt ist noch offen — anfragen? |

**R4 · Der Sachbearbeiter** — hier ist Poesie ein Fehler.

> Kfz-Versicherung, Police 4711-88. Laufzeit bis 31.12.2026, Kündigungsfrist ein Monat. Letzter Kündigungstag: 30.11.2026. Beitrag 684,00 € im Jahr.

**R5 · Der Briefeschreiber** — das ist die Stimme der Familie, nicht Alberts. Ein Brief an die Versicherung klingt nach Tobias, nicht nach Software. Jeder Entwurf ist sichtbar als Entwurf markiert und trägt keinen Hinweis auf eine Maschine.

> Sehr geehrte Frau Berger, Lena kann am Freitag nicht am Ausflug teilnehmen. Sie hat an dem Tag einen Arzttermin. Viele Grüße, Tobias Sonntag

> **Offen: Briefeschreiber oder Flüsterer**
>
> `docs/21` und der Skill `texten` führen den **Briefeschreiber** als fünftes Register. Das Designsystem (`guidelines/sprache.html`, `readme.md`) nennt an dieser Stelle den **Flüsterer** für Watch und Mitteilungen. Bis zur Entscheidung gilt `docs/21`. Der Flüsterer ist eine Längengrenze innerhalb des Family Managers: höchstens sieben Wörter, das Wichtigste zuerst — „16:40 · Handball, Halle Süd.“

## Tonalität

Adjektive wie „warm“ helfen beim Schreiben nicht. Positionen auf einer Achse schon. Die Zahl sagt, wo Albert zwischen den Polen steht, von 1 bis 10.

| Achse | Pole | Albert | Das heißt |
|---|---|---|---|
| Wärme | distanziert — überschwänglich | 6 | warm, aber nicht rührselig |
| Nähe | förmlich — kumpelhaft | 5 | du, aber erwachsen. Kein „Hey“, kein „Yay“ |
| Autorität | unsicher — belehrend | 6 | souverän. Er weiß es, er sagt es, er begründet auf Nachfrage |
| Tempo | langsam — hektisch | 4 | ruhig, auch bei Fristen. Dringlichkeit kommt aus dem Inhalt |
| Humor | humorlos — albern | 4 | trocken und sparsam. Ein Zwinkern je Bildschirm, nicht je Satz |
| Konkretheit | abstrakt — überdetailliert | 8 | immer konkret. Namen, Uhrzeiten, Beträge |

**Zwei Regeln ersetzen alle anderen.** Könnte der Satz in einer Bank-App stehen, ist er zu kalt. Könnte er in einer Kinderserie stehen, ist er zu warm.

## Fünf Stilmittel

Was Hey Albert erkennbar macht, ist wiederholbar. Fünf Werkzeuge, mit Regeln.

**S1 · Der Rollenname.** Funktionsname plus Rolle im Leben der Familie. Das Wochenboard ist „die Heldenansicht für die Familie“. Der Safe ist „der Aktenschrank der Familie“. Das Bild kommt aus Haushalt, Handwerk, Körper oder Theater, nie aus der Technik. Höchstens ein Rollenname je Absatz.

**S2 · Der Merksatz.** Ein Satz, den man sich hinschreiben könnte. Kurz, absolut, ohne Konjunktiv: „Kinder sind Beteiligte, nicht Publikum.“ Höchstens einer je Abschnitt, und er bringt seinen Beweis mit.

**S3 · Das Kontrastpaar.** Zwei Dinge gegeneinander, meist mit „statt“: „Bündel statt Einzelteile“, „Rhythmus statt Dauerfeuer“.

**S4 · Das konkrete Bild.** Statt der Kategorie das Ding selbst: „vergessene Turnbeutel, drei Mal Nudeln in einer Woche, ein Elternabend, von dem nur einer wusste“.

**S5 · Die benannte Folge.** Warum etwas wichtig ist, als Folge statt als Behauptung: „Ein Fehler hier bedeutet, dass die Haushaltshilfe die Grundsteuer sieht.“

## Satzbau

- **Ein Satz, eine Sache.** Hauptsätze, Subjekt zuerst.
- **Aktiv.** „Tobias fährt.“ Wer handelt, steht im Satz.
- **Verb statt Hauptwort.** „Wir planen die Woche noch.“
- **Kein Relativsatz mit „den“ oder „dem“.** Lieber zwei Sätze.
- **Name, Uhrzeit oder Betrag — nie eine Menge.** „Sechs Minuten bis zur Abfahrt“ statt „bald“.
- **Ein Wort je Sache, überall.** „Fahrt“ heißt in App, Website, Brief und Kinderansicht gleich.
- **Für das Ohr schreiben.** Laut lesen. Wo ihr stolpert, stolpert der Leser auch.
- **Je Abschnitt trägt ein langer Satz.** Kürze ist kein Ziel. Null tragende Sätze sind ein Telegramm.

### Harte Grenzen

Die Zahlen sind Wächter, nicht Richter. Einen Ausreißer liest ein Mensch, bevor er verworfen wird.

```json
{
  "satzlaenge_max": 18,
  "anteil_ueber_15_max": 0.08,
  "silben_je_wort_max": 1.7,
  "wortteil_zeichen_max": 14,
  "wstf4_kinder_max": 5,
  "wstf4_erwachsene_max": 9,
  "homepage": {
    "hero_woerter_max": 40,
    "sektion_woerter_max": 90,
    "seite_woerter": [
      600,
      800
    ]
  }
}
```

| Fläche | Länge | Beispiel |
|---|---|---|
| Knopf | 1–3 Wörter | „Übernehmen“ |
| Hinweis in der App | ein Satz mit nächstem Schritt | „Noch kein Fahrer — Anna hat ab 15:00 Zeit“ |
| Leerer Zustand | zwei Sätze und ein Knopf | „Hier stehen eure Termine der Woche. Noch ist nichts eingetragen.“ |
| Briefing | drei bis fünf Zeilen | „Heute: drei Fahrten, du kochst, Lena braucht Badezeug.“ |
| Website-Abschnitt | eine Überschrift, zwei bis drei Sätze | — |

## Formales

| Regel | So | Nicht so |
| --- | --- | --- |
| uhrzeit | 16:40 | 16 Uhr · 16.40 · 4:40 pm |
| datum | Mi 3.9. oder 3. September | 03.09.2026 in Fließtext · Mittwoch, den 3.9. |
| anfuehrungszeichen | „so“ | "so" · “so” |
| gedankenstrich | Halbgeviertstrich mit Leerzeichen: a – b | a - b · a—b |
| zahlen | bis zwölf im Fließtext ausgeschrieben, in Karten und Tabellen Ziffern, Dezimalkomma: 8,7 h, 48,00 € | 8.7 h · €48 |
| ausrufezeichen | keines in der Oberfläche | Fertig! |
| emoji | nirgends | jedes Emoji |
| textzeichen | erlaubt sind nur → · › und – | Unicode-Zeichen als Icon-Ersatz |

## Wörter

### Unsere Wörter

- Ort
- Sache
- Zuständig
- Bündel
- Fahrt
- Sonntagsrunde
- Eingang
- Vorschlag
- Übernehmen
- Rückgängig
- Safe
- Woche
- Heute
- Taler

Dazu die Verben, die Albert gehören: kümmern, erinnern, vorschlagen, übernehmen, nachfragen, Bescheid geben. Und die Wörter für die schönen Dinge: Vorfreude, zusammen, aussuchen, feiern, erleben, behalten, frei. Ein Satz über einen Urlaub darf nicht klingen wie ein Satz über einen Zahnarzttermin.

> **Beispiel**
>
> „Dänemark steht. Noch 23 Tage — die Pässe fehlen noch.“ statt „Anlass angelegt. 12 Aufgaben zugewiesen, 3 offen.“

### Nie

| Wort | Stattdessen | Warum |
| --- | --- | --- |
| Nutzer | ihr, du, die Familie, der Name | Wir sprechen Menschen an, keine Konten. |
| User | ihr, du, die Familie | Kein Anglizismus für Menschen. |
| Feature | was Albert tut, der Bereich | Wir beschreiben Verhalten, keine Funktionsliste. |
| Dashboard | Heute, Woche, Überblick | Die Orte der App haben eigene Namen. |
| Task | Aufgabe, Sache | Deutsch, und eine Sache hat einen Zuständigen. |
| Item | Sache | Unser Wort ist „Sache“. |
| Content | Inhalt, Text, Bild | Kein Fachjargon. |
| verwalten (für Menschen) | begleiten, einladen | Menschen werden nicht verwaltet. |
| optimieren | das konkrete Ergebnis | Familie ist kein Prozess. |
| effizient | das konkrete Ergebnis | Familie ist kein Prozess. |
| Produktivität | die Szene, die aufgeht | Familie ist kein Prozess. |
| Premium freischalten | der Preis, offen genannt | Keine Bezahlschranken-Sprache. |

### Nie in der Vermarktung

| Wort | Warum |
| --- | --- |
| KI | Senkt bei einem Produkt mit Kinderdaten und Post nachweislich Vertrauen. Wir beschreiben Verhalten. |
| smart | Leere Behauptung. |
| intelligent | Leere Behauptung. |
| magisch | Leere Behauptung. |
| automatisch | Albert handelt nie allein. |
| nahtlos | Leere Behauptung. |
| Mental Load | Wir werben mit dem Gewinn, nie mit dem Schmerz. |
| Chaos | Kein Vorwurf an die Familie. |
| Nie wieder … | Zusage statt Verneinung. |
| Superlative („#1“, „das beste“) | Keine Rangbehauptung. |
| jetzt sichern | Keine Erwerbssprache, kein Druck. |
| spart Zeit | Kein Wirkversprechen. |

### Statt Erwerbssprache

| Statt | Wir sagen |
|---|---|
| „Arbeit“ im Haushalt | Aufgaben, Pflichten, was zu tun ist |
| „Team“ | Familie, wir, ihr |
| „Projekt“ | Anlass, Vorhaben, Urlaub, Fest |
| „Workflow“, „Prozess“ | Ablauf, wie es läuft |
| „To-do“ | Aufgabe |
| „Deadline“ | Frist, bis Donnerstag |
| „delegieren“, „zuweisen“ an Menschen | abgeben, jemanden bitten, übernehmen |
| „tracken“, „monitoren“ | mitschreiben, festhalten, sehen |
| „Event“ | Fest, Feier, Anlass |
| „Onboarding“ für Familien | Ankommen, Einrichten, Loslegen |

## Wie Dinge heißen

Der Produktname ist bewusst gemischt: **Albert — the Family Manager.** Das ist die einzige erlaubte Mischform. Englische Begriffe stehen nur, wenn sie im deutschen Familienalltag längst angekommen sind: Cockpit, Board, Inbox, Safe, Album. Alles andere ist deutsch.

Im Code heißen Dinge anders als auf dem Bildschirm. Das ist Absicht.

| Im Code | Auf dem Bildschirm |
|---|---|
| `owner_id` | **Zuständig** — „Zuständig: Papa“ |
| ohne `owner_id` | **Offen**, „Niemand zuständig“ |
| `tasks` | **Aufgaben** |
| `events` | **Termine** |
| `occasions` | **Anlässe**, im Einzelfall konkret: „Omas Geburtstag“ |
| `visibility: adults` | **Nur für Erwachsene** |
| Checkliste in der Kinderansicht | **Nimm mit** |
| Schnellanlage | **Zauberspruch**, mit Zauberstab |
| Rolle `service` | gegenüber der Familie „Menschen, die uns helfen“, in der eigenen Ansicht „Deine Woche“ |

Auf dem Bildschirm steht möglichst der Name eines Menschen, nicht eine Rolle. „Papa fährt“ ist besser als „Ein Erwachsener ist eingetragen“.

## Zehn Muster für Mikrotexte

Hier steht fast jede Antwort. Alle im Register Family Manager, das letzte im Vorleser.

| Situation | Muster | So | Nicht so |
|---|---|---|---|
| Knopf | ein Verb, das die Folge nennt | „Woche planen“ · „Fahrt übernehmen“ · „In den Safe legen“ | „OK“ · „Absenden“ |
| Bestätigung | dasselbe Verb in der Vergangenheit, dazu Rückgängig | „Fahrt übernommen. Rückgängig“ | „Erfolgreich gespeichert“ |
| Leerer Zustand | was hierher gehört · warum es leer ist · eine Aktion | „Hier stehen später alle Verträge mit ihren Fristen. Der erste sagt dir, wann du kündigen könntest. — Vertrag anlegen“ | „Keine Daten vorhanden“ |
| Konflikt | Sachlage nennen, nicht bewerten, nicht blockieren | „Mama ist Donnerstag um 17:00 schon eingeplant.“ | „Fehler: Terminkonflikt“ |
| Fehlender Zuständiger | Lücke benennen und den Weg anbieten | „Für die Rückfahrt am Freitag fehlt noch ein Fahrer — bei Tobias steht ab drei nichts.“ | „Unassigned trip“ |
| Erinnerung | Frist, Sache, nächster Schritt | „In 30 Tagen verlängert sich die Kfz-Versicherung. Letzter Kündigungstag ist der 30.11.“ | „Achtung, wichtige Frist“ |
| Alberts Vorschlag | als Vorschlag markiert, mit Herkunft | „Aus der Mail der Klassenlehrerin: Unterschrift und 8,00 € bis Freitag. Als zwei Aufgaben übernehmen?“ | „Albert hat 2 Aufgaben für dich erstellt.“ |
| Fehler des Systems | was nicht ging · was jetzt gilt · was du tun kannst | „Der Kalender konnte nicht abgeglichen werden. Deine Änderungen sind gespeichert. — Erneut versuchen“ | „Ein unerwarteter Fehler ist aufgetreten.“ |
| Löschen | Folge benennen, ohne Drama | „Das Album und seine 84 Bilder werden gelöscht. Das lässt sich nicht rückgängig machen.“ | „Bist du wirklich sicher?“ |
| Kind hat etwas fertig | feststellen, nicht feiern | „Fertig. Bleibt noch: Zimmer aufräumen.“ | „Super gemacht“ mit Konfetti |

### Mit Kindern

- **Die Syntax vereinfachen, nicht das Register.** „Heute bist du für den Müll zuständig.“
- **Höchstens drei Schritte, einer je Zeile.** „Turnbeutel packen. Trinkflasche füllen. Beutel an die Tür stellen.“
- **Kein „du musst“.** Die Notwendigkeit liegt bei der Sache: „Der Bus fährt um 7:12. Die Tasche steht vorher im Flur.“
- **Sagen, was offen ist — nicht, was jemand versäumt hat.**
- **Lob benennt eine Handlung und kommt von einem Menschen:** „Papa hat gesehen: Du hast heute alles allein gepackt.“

> **Woran man Herablassung erkennt**
>
> Verkleinerungen wie „Müllchen“ · das „wir“ für die Arbeit eines Einzelnen: „wir putzen jetzt die Zähne“ · „ja?“ und „okay?“ am Satzende · Befehle als Frage: „Kannst du das bitte mal machen?“ · verstärktes Lob: „unglaublich toll“ · Begeisterung als Satzzeichen · „für mich“ in einer Aufforderung

## Was wir nicht behaupten

Wir versprechen keine Wirkung. Nicht für die Software, nicht für Kinder. Der Nutzen ist eine Szene, nie eine Stunde, nie ein Prozent.

> **Nicht so**
>
> „Albert senkt die unsichtbare Denkarbeit.“ — „Spart fünf Stunden pro Woche.“ — „Wissenschaftlich belegt: Kinder werden selbstständiger.“

> **So**
>
> „Ein Neunjähriger sieht hier, was heute an ihm hängt, und hakt es selbst ab.“

## Prüffragen

Vor jedem Text, jedem Beitrag, jedem Bildschirm:

1. Könnte das in einer Bank-App stehen? Dann ist es zu kalt.
2. Könnte das in einer Kinderserie stehen? Dann ist es zu warm.
3. Steht ein Wort aus dem Erwerbsleben drin? Dann raus damit.
4. Rede ich über ein Kind oder mit ihm? Über ein Kind reden wir nicht.
5. Bringt der Hinweis den nächsten Schritt mit? Sonst ist er halb.
6. Geht es um etwas Schönes — hört man das?
7. Verkaufe ich gerade ein schlechtes Gewissen? Dann neu anfangen.
8. Ist es eine Szene oder eine Eigenschaft? Ohne Uhrzeit, Namen, Ort oder Zahl ist es eine Eigenschaft.
9. Steht da „kein“? Dann als Zusage neu schreiben.
10. Feiert Albert etwas, das er selbst vorgeschlagen hat? Dann streichen.

Geschrieben wird mit dem Skill `texten`. Gemessen wird mit `python3 tooling/check-sprache.py`.

> **Offen: das Prüfskript**
>
> `tooling/check-sprache.py` bricht derzeit ab, weil es Module aus Ordnern des Vorgängers lädt (Stand `docs/status.md`). Bis es repariert ist, prüft ein Mensch mit den Fragen oben.


---

# Logo

> Der Kritzelball mit Gesicht und die Wortmarke „Hey Albert“ — Fassungen zum Herunterladen, Hintergründe, Freiraum, Fehlgebrauch und der ehrliche Stand bei Vektor und App-Symbol.

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

Das Logo ist ein Kritzelball mit Gesicht: ein paar Schwünge in Tinte, einer in Rosa, darin zwei große Augen und ein Lächeln. Es sieht aus, als hätte es jemand am Rand eines Notizbuchs gezeichnet. Genau das soll es. Hey Albert lebt in der Welt „Notizbuch“: warmes Papier, Tinte, ein Marker für das Wichtige.

## Fassungen

Alle Fassungen sind aus der gelieferten Datei gerechnet und freigestellt. Nehmt immer die Standardfassung, es sei denn, der Grund verlangt eine andere.

| Fassung | Maße | Größe | Datei |
| --- | --- | --- | --- |
| logo-albert-256 | 256 × 256 px | 32 KB | https://brand.heyalbert.family/marke/logos/logo-albert-256.png |
| logo-albert-auf-schwarz | 912 × 912 px | 76 KB | https://brand.heyalbert.family/marke/logos/logo-albert-auf-schwarz.png |
| logo-albert-hell | 1024 × 1024 px | 23 KB | https://brand.heyalbert.family/marke/logos/logo-albert-hell.png |
| logo-albert-mono | 912 × 912 px | 66 KB | https://brand.heyalbert.family/marke/logos/logo-albert-mono.png |
| logo-albert | 912 × 912 px | 77 KB | https://brand.heyalbert.family/marke/logos/logo-albert.png |

- **Standard, Tinte und Rosa** — auf Creme, Karte und allen hellen Flächen. Die erste Wahl.
- **Einfarbig** — wo nur eine Farbe geht: Stempel, Prägung, Druck in einer Farbe, Fax.
- **Auf Schwarz** — auf der schwarzen Leiste und auf dunklen Flächen. Die Augen bleiben hell, die Pupillen dunkel.
- **Klein, 256 px** — für Avatar, Leiste und Mail-Kopf. Nicht vergrößern.
- **Original in Dunkelgrün** — die gelieferte Ausgangsdatei. Nur im Archiv, nie in Gebrauch.

## Wortmarke

Die Wortmarke ist der Name „Hey Albert“ in Bricolage Grotesque, Gewicht `--gewicht-titel`, eng gelaufen mit `--laufweite-titel`. Sie wird als Text gesetzt, nicht als Bild. So bleibt sie scharf, durchsuchbar und vorlesbar.

| Fassung | Maße | Größe | Datei |
| --- | --- | --- | --- |
| logo-albert-256 | 256 × 256 px | 32 KB | https://brand.heyalbert.family/marke/logos/logo-albert-256.png |
| logo-albert-auf-schwarz | 912 × 912 px | 76 KB | https://brand.heyalbert.family/marke/logos/logo-albert-auf-schwarz.png |
| logo-albert-hell | 1024 × 1024 px | 23 KB | https://brand.heyalbert.family/marke/logos/logo-albert-hell.png |
| logo-albert-mono | 912 × 912 px | 66 KB | https://brand.heyalbert.family/marke/logos/logo-albert-mono.png |
| logo-albert | 912 × 912 px | 77 KB | https://brand.heyalbert.family/marke/logos/logo-albert.png |

- **In der Mac-Leiste** steht die Wortmarke voll ausgeschrieben.
- **Eingeklappt** steht dort nur der Ball in einem cremefarbenen Kreis.
- **Unter der Wortmarke** darf der Claim stehen: „Er kümmert sich. Ihr dürft Familie sein.“ Ohne Wortmarke daneben heißt es „Hey Albert. Er kümmert sich. Ihr dürft Familie sein.“, sonst hängt das „Er“ in der Luft.

## Hintergründe

Das Logo steht auf ruhigem, flächigem Grund. Gut sind `--grund`, `--karte`, `--hell` und für die Fassung auf Schwarz `--schwarz`. Auf Gelb, Rosa oder Blau steht es nur in der Standardfassung, und nur wenn die Fläche groß und ruhig ist.

Auf Fotos steht das Logo nicht. Hey Albert zeigt genau ein Foto, den Gründer, und das braucht kein Logo.

## Freiraum und Mindestgröße

| Fassung | Maße | Größe | Datei |
| --- | --- | --- | --- |
| logo-albert-256 | 256 × 256 px | 32 KB | https://brand.heyalbert.family/marke/logos/logo-albert-256.png |
| logo-albert-auf-schwarz | 912 × 912 px | 76 KB | https://brand.heyalbert.family/marke/logos/logo-albert-auf-schwarz.png |
| logo-albert-hell | 1024 × 1024 px | 23 KB | https://brand.heyalbert.family/marke/logos/logo-albert-hell.png |
| logo-albert-mono | 912 × 912 px | 66 KB | https://brand.heyalbert.family/marke/logos/logo-albert-mono.png |
| logo-albert | 912 × 912 px | 77 KB | https://brand.heyalbert.family/marke/logos/logo-albert.png |

> **Vorschlag, nicht entschieden**
>
> Für Freiraum und Mindestgröße gibt es noch keine festgelegte Regel. Vorgeschlagen ist:
> 
> - **Freiraum** rundum ein Viertel der Logobreite. In diesem Rahmen steht kein Text, keine Kante und kein anderes Zeichen.
> - **Mindestgröße** 24 px auf dem Bildschirm. Darunter verschwimmen Augen und Schwünge. Kleiner als 24 px erscheint nur das Favicon, und das ist eigens gerechnet.
> - **Mit Wortmarke** ist der Ball so hoch wie die Großbuchstaben plus Unterlänge, der Abstand zur Schrift ist ein Viertel der Ballbreite.
> 
> Bis zur Entscheidung gilt der Vorschlag als Richtwert.

## Fehlgebrauch

Das Logo ist eine Zeichnung. Es wird nicht verändert, nur skaliert.

| Fassung | Maße | Größe | Datei |
| --- | --- | --- | --- |
| logo-albert-256 | 256 × 256 px | 32 KB | https://brand.heyalbert.family/marke/logos/logo-albert-256.png |
| logo-albert-auf-schwarz | 912 × 912 px | 76 KB | https://brand.heyalbert.family/marke/logos/logo-albert-auf-schwarz.png |
| logo-albert-hell | 1024 × 1024 px | 23 KB | https://brand.heyalbert.family/marke/logos/logo-albert-hell.png |
| logo-albert-mono | 912 × 912 px | 66 KB | https://brand.heyalbert.family/marke/logos/logo-albert-mono.png |
| logo-albert | 912 × 912 px | 77 KB | https://brand.heyalbert.family/marke/logos/logo-albert.png |

> **Nicht so**
>
> - Verzerren, stauchen, strecken.
> - Drehen oder kippen. Klebezettel dürfen kippen, das Logo nicht.
> - Umfärben, auch nicht in Personenfarben.
> - Kontur, Schatten, Glanz oder 3D. Hey Albert hat keine Schatten, nirgends.
> - Auf unruhigen Grund, Muster oder Verläufe stellen.
> - Durchscheinend machen.
> - Nachzeichnen oder neu kritzeln. Es gibt eine Zeichnung, und das ist sie.
> - Das Logo mit dem Zauberer verwechseln. Der Zauberer ist die Figur im Produkt, der Ball ist das Zeichen der Marke.

## App-Symbol und Favicon

Für die Website und die Web-App gibt es Favicon und App-Symbol bereits in Tinte und Rosa auf Creme. Sie liegen in `apps/site` und werden auf diese Seite mitkopiert.

> **Offen: Vektor und natives App-Symbol**
>
> - **Eine Vektorfassung fehlt.** Alle Logos sind PNG, gerechnet aus der gelieferten Datei. Für Druck, große Flächen und Animation braucht es ein SVG.
> - **Das App-Symbol der nativen App** wurde aus älteren Vektoren in Dunkelgrün gespeist (`docs/22-gestaltung.md` §7). Diese Vektoren liegen nicht in diesem Repository. Sie sind auf Tinte und Rosa umzufärben, sobald die Apple-App nach `apps/apple` zieht.
> - **Die Variante für den dunklen Modus und das getönte App-Symbol** von iOS sind noch nicht gezeichnet.

## Herunterladen

- [Logos](https://brand.heyalbert.family/downloads/hey-albert-logos.zip)

Die Logos gehören der Emma Rocket Ltd OOD. Für Berichte über Hey Albert dürft ihr sie verwenden. Verändern dürft ihr sie nicht.


---

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


---

# Schrift

> Vier Schriften mit vier Aufgaben – Bricolage Grotesque für Titel, Inter für alles, was gelesen und bedient wird, Roboto Mono für Kennungen, Reenie Beanie für Alberts Randnotizen. Alle lokal ausgeliefert.

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

Hey Albert hat vier Schriften. Jede hat genau eine Aufgabe. Eine fünfte gibt es nicht, auch nicht für eine Kampagne.

| Rolle | Familie | Einsatz |
| --- | --- | --- |
| schrift-titel | "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif |  |
| schrift-text | Inter, system-ui, -apple-system, sans-serif |  |
| schrift-mono | "Roboto Mono", ui-monospace, "SF Mono", monospace |  |
| schrift-hand | "Reenie Beanie", "Bradley Hand", cursive |  |

Dateien: [bricolage-grotesque-latin-ext.woff2](https://brand.heyalbert.family/schriften/web/bricolage-grotesque-latin-ext.woff2), [bricolage-grotesque-latin.woff2](https://brand.heyalbert.family/schriften/web/bricolage-grotesque-latin.woff2), [inter-latin-ext.woff2](https://brand.heyalbert.family/schriften/web/inter-latin-ext.woff2), [inter-latin.woff2](https://brand.heyalbert.family/schriften/web/inter-latin.woff2), [reenie-beanie-latin.woff2](https://brand.heyalbert.family/schriften/web/reenie-beanie-latin.woff2), [roboto-mono-latin-ext.woff2](https://brand.heyalbert.family/schriften/web/roboto-mono-latin-ext.woff2), [roboto-mono-latin.woff2](https://brand.heyalbert.family/schriften/web/roboto-mono-latin.woff2), [BricolageGrotesque[opsz,wdth,wght].ttf](https://brand.heyalbert.family/schriften/app/BricolageGrotesque[opsz,wdth,wght].ttf), [Inter[opsz,wght].ttf](https://brand.heyalbert.family/schriften/app/Inter[opsz,wght].ttf), [OFL-BricolageGrotesque.txt](https://brand.heyalbert.family/schriften/app/OFL-BricolageGrotesque.txt), [OFL-Inter.txt](https://brand.heyalbert.family/schriften/app/OFL-Inter.txt), [OFL-ReenieBeanie.txt](https://brand.heyalbert.family/schriften/app/OFL-ReenieBeanie.txt), [OFL-RobotoMono.txt](https://brand.heyalbert.family/schriften/app/OFL-RobotoMono.txt), [ReenieBeanie.ttf](https://brand.heyalbert.family/schriften/app/ReenieBeanie.ttf), [RobotoMono[wght].ttf](https://brand.heyalbert.family/schriften/app/RobotoMono[wght].ttf), [LIZENZEN.md](https://brand.heyalbert.family/schriften/LIZENZEN.md)

## Die vier Rollen

| Rolle | Schrift | Wofür | Nie für |
|---|---|---|---|
| `--schrift-titel` | Bricolage Grotesque, 800, eng | Anrede, Flächentitel, große Zahlen, Überschriften der Website | Fließtext, Knöpfe |
| `--schrift-text` | Inter, 400 / 500 / 600 | alles, was gelesen und bedient wird: Kartentitel, Text, Knöpfe, Pillen, Kapitälchen | Titel über `--grad-abschnitt` |
| `--schrift-mono` | Roboto Mono | technische Kennungen: Kalenderwoche, Zeitachsen, dichte Raster, Code | Sätze |
| `--schrift-hand` | Reenie Beanie | Alberts Bleistift-Randnotizen in Erzähler-Momenten | Knöpfe, Listen, Tabellen, Safe, Finanzen, jede Bedienung |

Bricolage steht immer in `--gewicht-titel` und mit `--laufweite-titel`, also eng gelaufen. So wirkt eine Anrede wie „Guten Morgen, Anna.“ wie ein Wort und nicht wie eine Zeile.

Inter trägt drei Gewichte: `--gewicht-text` für Lesetext, `--gewicht-text-halb` für Zweitknöpfe und Etiketten, `--gewicht-text-fest` für Kartentitel und den Primärknopf.

Die Handschrift steht höchstens ein- bis zweimal je Fläche. Sie ist eine Randnotiz, kein Stil. Beispiel aus dem Jahresbuch: „Am Freitag ist Platz.“

## Grade

Die Grade sind feste Stufen. Eine Zwischengröße gibt es nicht.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| gewicht-titel | var(--gewicht-titel) | 800 |  |  |
| gewicht-text | var(--gewicht-text) | 400 |  |  |
| gewicht-text-halb | var(--gewicht-text-halb) | 500 |  |  |
| gewicht-text-fest | var(--gewicht-text-fest) | 600 |  |  |
| grad-anrede-mac | var(--grad-anrede-mac) | 40px |  | „Guten Morgen, Anna.“ auf dem Mac |
| grad-anrede-phone | var(--grad-anrede-phone) | 30px |  | dieselbe Zeile auf dem iPhone |
| grad-zahl-gross | var(--grad-zahl-gross) | 34px |  | Zahl-Kachel: 8,7 h |
| grad-block-titel | var(--grad-block-titel) | 22px |  | Logo in der Leiste |
| grad-abschnitt | var(--grad-abschnitt) | 17px |  |  |
| grad-karten-titel | var(--grad-karten-titel) | 14.5px |  | Kartentitel |
| grad-text | var(--grad-text) | 14px |  |  |
| grad-zweit | var(--grad-zweit) | 12px |  | Zweitzeile, Zeiten |
| grad-klein | var(--grad-klein) | 11px |  |  |
| grad-kapitaelchen | var(--grad-kapitaelchen) | 10px |  | Wochentag im Tagesreiter |
| laufweite-titel | var(--laufweite-titel) | -0.03em |  | eng, wie in den Screensets |
| laufweite-text | var(--laufweite-text) | 0em |  |  |
| laufweite-kapitaelchen | var(--laufweite-kapitaelchen) | 0.08em |  |  |
| zeile-titel | var(--zeile-titel) | 1.02 |  |  |
| zeile-karten-titel | var(--zeile-karten-titel) | 1.2 |  |  |
| zeile-text | var(--zeile-text) | 1.45 |  |  |

- Die Anrede ist auf dem Mac `--grad-anrede-mac`, auf dem iPhone `--grad-anrede-phone`.
- Große Zahlen auf farbigen Kacheln stehen in `--grad-zahl-gross`, in Bricolage, mit tabellarischen Ziffern: „8,7 h“.
- Der Kartentitel ist `--grad-karten-titel` in Inter 600. Darunter steht die Zweitzeile in `--grad-zweit` und `--text-zweit`.
- Kapitälchen (`--grad-kapitaelchen`, `--laufweite-kapitaelchen`, Großbuchstaben) stehen nur im Tagesreiter und als Etikett über Gruppen.

## Zeilen und Ziffern

- Zeilenhöhe: Titel `--zeile-titel`, Kartentitel `--zeile-karten-titel`, Text `--zeile-text`.
- Zahlen und Zeiten immer mit `--ziffern-tabellarisch`. Dann stehen 07:30 und 16:40 sauber untereinander. In SwiftUI heißt das `.monospacedDigit()`.
- Uhrzeit immer `16:40`, Beträge mit Komma: `48,00 €`.

## Lokal, nie von Google

Alle vier Schriften liegen bei uns und werden von unserem Server ausgeliefert. Kein Aufruf geht an `fonts.googleapis.com` oder `fonts.gstatic.com`. So verlässt keine IP-Adresse eines Besuchers das Haus.

Der Grund: Das Landgericht München I hat am 20.01.2022 (3 O 17493/20) das Einbinden von Google Fonts über Googles Server als Verletzung des Persönlichkeitsrechts gewertet. Für eine Familien-App mit Kinderdaten kommt das nicht in Frage.

- **Website und Web-App:** woff2 aus `packages/design-system/assets/fonts/`, eingebunden über `tokens/fonts.css`. Es sind variable Schriften: eine Datei trägt alle Gewichte.
- **App:** variable TTF aus `assets/fonts/ttf/`, im App-Paket gebündelt und registriert. Die App wählt aus den benannten Schnitten den nächsten in Gewicht und optischer Größe.

- [Schriften mit Lizenzen](https://brand.heyalbert.family/downloads/hey-albert-schriften.zip)

## Lizenzen

| Schrift | Lizenz laut `LIZENZEN.md` | Urheber |
|---|---|---|
| Bricolage Grotesque | SIL Open Font License 1.1 | Mathieu Triay |
| Inter | SIL Open Font License 1.1 | Rasmus Andersson |
| Roboto Mono | Apache License 2.0 | Christian Robertson, Google |
| Reenie Beanie | SIL Open Font License 1.1 | James Grieshaber |

Alle dürfen kommerziell genutzt und lokal ausgeliefert werden. Die Lizenztexte reisen mit jeder Weitergabe mit. Wir verändern keine Schrift.

> **Offen: Lizenz von Roboto Mono**
>
> `assets/fonts/LIZENZEN.md` und `tokens/fonts.css` nennen für Roboto Mono die Apache License 2.0. Die mitgelieferte Datei `assets/fonts/ttf/OFL-RobotoMono.txt` sagt dagegen SIL Open Font License 1.1. Beide erlauben unsere Nutzung. Zu klären ist nur, welcher Text in `LIZENZEN.md` steht.

## Kurz

> **So**
>
> - Titel in Bricolage, alles andere in Inter.
> - Nur Grade aus den Tokens.
> - Tabellarische Ziffern für jede Zahl und jede Uhrzeit.
> - Handschrift sparsam, nur als Randnotiz von Albert.

> **Nicht so**
>
> - Eine fünfte Schrift, auch nicht für Social Media.
> - Schriften über Google-Server, auch nicht „nur zum Testen“.
> - Bricolage in Fließtext oder Knöpfen, Handschrift in Bedienung.
> - Freie Grade wie `font-size: 15px`, Großbuchstaben für ganze Sätze.


---

# Form

> Radien aus fünf Stufen, Linien, die etwas bedeuten, und Tiefe ohne Schatten – aus Schleier, Kontur und Kippung. Dazu Klebezettel, spielerische Formen und die Anatomie einer Karte.

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

Die Formen von Hey Albert sind weich und flach. Alles ist Papier auf Papier. Nichts glänzt, nichts wirft Schatten.

## Radien

Fünf Radien, jeder mit einer Aufgabe. Was keinen Token hat, hat keinen Radius.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| radius-karte | var(--radius-karte) | 16px |  | Karten und Menüs |
| radius-klein | var(--radius-klein) | 12px |  | Tagesreiter, kleine Karten |
| radius-leiste | var(--radius-leiste) | 24px |  | iPhone-Leiste |
| radius-block | var(--radius-block) | 22px |  | Mac-Block |
| radius-pille | var(--radius-pille) | 999px |  | Pillen, Kreise, Knöpfe |

- `--radius-karte` für Karten, Menüs, Dialoge.
- `--radius-klein` für Tagesreiter und kleine Karten.
- `--radius-leiste` für die iPhone-Leiste, `--radius-block` für den schwarzen Block der Mac-Leiste.
- `--radius-pille` für Pillen, Kreise und alle Knöpfe. Knöpfe sind bei uns immer rund.

## Linien bedeuten etwas

Eine Linie ist bei uns nie Schmuck. Die Art des Rands sagt, in welchem Zustand eine Sache ist.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| strich-haar | var(--strich-haar) | 1px |  |  |
| strich-stark | var(--strich-stark) | 1.5px |  | Kontur wird stark, statt Schatten |
| strich-gestrichelt | var(--strich-gestrichelt) | 1.5px |  |  |
| muster-gestrichelt | var(--muster-gestrichelt) | 5px 4px |  |  |
| kippung-zettel | var(--kippung-zettel) | 0.3deg |  | was liegt, ist leicht gekippt |
| kippung-null | var(--kippung-null) | 0deg |  | was schwebt, steht gerade |
| schatten | var(--schatten) | none |  | nicht verhandelbar |
| fokus-ring | var(--fokus-ring) | 2px |  |  |
| fokus-abstand | var(--fokus-abstand) | 2px |  |  |

| Rand | Heißt | Tokens |
|---|---|---|
| durchgezogen, Haarlinie | ruhiges Feld, alles geklärt | `--strich-haar`, `--linie-haar` |
| durchgezogen, Kontur | der Zeiger liegt darauf | `--strich-stark`, `--linie-stark` |
| gestrichelt grau | Vorschlag von Albert, noch nicht übernommen | `--strich-gestrichelt`, `--muster-gestrichelt`, `--rand-vorschlag` |
| gestrichelt Offen-Rosa | ohne Zuständigen | `--rand-offen` |
| gestrichelt dünn | Bereichs-Chip im Kopf der Fläche | `--strich-haar` |
| Ring mit Abstand | Fokus über die Tastatur | `--fokus-ring`, `--fokus-abstand`, `--rand-fokus` |

Haarlinien sind immer `--strich-haar`. Das Strichmuster ist überall dasselbe: `--muster-gestrichelt`.

## Keine Schatten

Es gibt keine Schatten. Nicht unter Karten, nicht unter Menüs, nicht unter Knöpfen. Der Token `--schatten` steht auf `none` und ist nicht verhandelbar.

Tiefe entsteht aus drei Mitteln:

1. **Der Schleier.** `--flaeche-schleier` dämpft, was hinter einem Dialog, einem Menü oder dem Scanner liegt.
2. **Die Kontur.** Was der Zeiger berührt, bekommt eine stärkere Linie: `--strich-haar` wird `--strich-stark`. Die Fläche bleibt gleich.
3. **Die Kippung.** Was liegt, ist leicht gekippt (`--kippung-zettel`). Was schwebt, steht gerade (`--kippung-null`). Klebezettel liegen, Menüs schweben.

> **Nicht so**
>
> `box-shadow`, `drop-shadow`, Tailwind-Klassen wie `shadow-md`, Milchglas, Unschärfe unter Karten, halbtransparente Karten, Verläufe als Tiefe.

## Klebezettel

Jeder Mensch hat seinen Zettel in seiner Personenfarbe. Avatare, Spuren je Mensch und die Zettel auf der Fläche „Heute“ sind Klebezettel.

- Fläche `--person-1` bis `--person-8`, Text `--person-text`.
- Leicht gekippt, abwechselnd nach links und rechts: `--kippung-zettel`.
- Immer mit Initiale oder Name. Farbe allein reicht nie.

## Spielerische Formen

Stern, Herz, Kleks, Kreis und Puzzleteil (Bauteil `DekoForm`) bringen Freude auf eine Fläche. Sie sind kein Schmuck für alles.

- Nur auf gelben und rosa Flächen.
- Immer in der dunkleren Stufe derselben Farbe: `--gelb-dunkel` auf Gelb.
- Angeschnitten am Rand der Fläche, nie mitten im Text.
- Nie auf Karten mit Bedienelementen, nie im Safe, nie bei Finanzen, nie im Register Sachbearbeiter.

### DekoForm

Quelle: `packages/design-system/components/bausteine/DekoForm.jsx`

Die spielerische Form auf einer gelben oder rosa Fläche – Freude, kein Schmuck.

```jsx
<DekoForm form="stern" groesse={110} farbe="var(--gelb-dunkel)" style={{ right: -18, bottom: -22 }} />
```

Die Elternfläche braucht `position: relative` und `overflow: hidden`. Nie auf Karten mit Bedienelementen, nie im Safe, nie bei Finanzen.

```ts
/** Spielerische Form als Deko auf gelben und rosa Flaechen - Stern, Herz, Kleks, Puzzleteil. */
export interface DekoFormProps {
  form?: "stern" | "herz" | "kleks" | "kreis" | "puzzle";
  groesse?: number;
  /** Immer die dunklere Stufe derselben Flaechenfarbe: var(--gelb-dunkel), var(--blau-dunkel). */
  farbe?: string;
  drehung?: number;
  style?: React.CSSProperties;
}
export function DekoForm(props: DekoFormProps): JSX.Element;
```

## Die Anatomie einer Karte

Die Karte ist das Ding, aus dem Heute, Woche und Kalender bestehen. Sie hat immer denselben Aufbau.

- **Fläche** nach Art: Termin `--flaeche-karte`, Fahrt `--flaeche-karte-fahrt`, Familie `--flaeche-karte-familie`, Vorschlag `--flaeche-karte-vorschlag` mit grauem gestricheltem Rand, Offen mit gestricheltem Rand in Offen-Rosa.
- **Radius** `--radius-karte`, **Polster** `--karte-innen`, **Abstand** zur nächsten Karte `--karte-abstand`.
- **Rand:** eine Haarlinie als Platzhalter für die Kontur. Kein Schatten.
- **Kopf:** links das Symbol der Sache im hellen Kreis, rechts die Punkte der Menschen. Dazwischen nichts, kein Menü, kein Pfeil.
- **Titel** in `--grad-karten-titel`, darunter Zeit und Ort in `--grad-zweit`.
- **Pillen** für Zustände, zum Beispiel „Kein Fahrer“.
- **Knöpfe** unten, in einer `Knopfreihe`. Ein Vorschlag hat immer zwei: „Übernehmen“ und „Rückgängig“, oder eine Frage mit zwei Antworten.

Drei Träger an drei Orten: Die Kartenfarbe sagt die Art. Das Symbol sagt die Sache. Die Punkte sagen die Leute.

### Karte

Quelle: `packages/design-system/components/karten/Karte.jsx`

Die Karte – das Ding, aus dem Heute, Woche und Kalender bestehen. Ein Datenmodell, viele Ansichten.

```jsx
<Karte art="fahrt" titel="Rückfahrt Auswärtsspiel" ort="Sportplatz Nord → Zuhause"
  zeit="14:00 – 14:30" leute={["felix"]} hoehe="hoch"
  pillen={<ZustandsPille>Kein Fahrer</ZustandsPille>}
  knoepfe={<Knopf>Ich fahre</Knopf>} />

<Karte art="vorschlag" titel="Bei Tobias steht ab 13:00 nichts. Fragen?"
  unterzeile="Vorschlag von Albert"
  knoepfe={<KarteVorschlagKnoepfe onUebernehmen={…} onZurueck={…} />} />
```

Register Family Manager, kurz und ruhig. Die Bedeutungen werden nicht getauscht: blau ist Fahrt, gelb ist Familie, gestrichelt rosa heisst "ohne Zuständigen". Ein Vorschlag hat immer zwei Knöpfe – Albert erledigt nie still.

```ts
/**
 * Die Karte in fuenf Arten. Die Farbe sagt die Art, das Symbol die Sache, die Punkte die Leute.
 */
export interface KarteProps {
  /** "termin" beige | "fahrt" blau | "familie" gelb | "vorschlag" gestrichelt grau | "offen" gestrichelt rosa. */
  art?: "termin" | "fahrt" | "familie" | "vorschlag" | "offen";
  /** Kartentitel, ein Gegenstand: "Rückfahrt Auswärtsspiel". */
  titel: string;
  /** Zweitzeile: Ort oder Bündel-Teile, mit " · " getrennt. */
  ort?: React.ReactNode;
  /** Zeitspanne als "16:00 – 17:00" (Halbgeviertstrich mit Leerzeichen). */
  zeit?: string;
  /** Wer dabei ist; der Zustaendige zuerst. */
  leute?: string[];
  /** Sach-Symbol, wenn es nicht aus der Art folgt: "schule", "sport", "arzt", "musik". */
  symbol?: string;
  /** "kurz" (78 px) oder "hoch" (132 px) - fuer das Stundenraster. */
  hoehe?: "kurz" | "hoch";
  /** Zustands- und Fahrt-Pillen. */
  pillen?: React.ReactNode;
  /** Handlungsknoepfe; bei Vorschlaegen immer zwei. */
  knoepfe?: React.ReactNode;
  /** Kleine Zeile unter dem Inhalt, z. B. "Vorschlag von Albert". */
  unterzeile?: React.ReactNode;
  /** Einzeiler fuer Listen: Symbol, Titel, Zeit, Punkt. */
  kompakt?: boolean;
  klickbar?: boolean;
  /** Leicht gekippt, wie ein liegender Klebezettel. */
  gekippt?: boolean;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Karte(props: KarteProps): JSX.Element;
export function KarteVorschlagKnoepfe(props: { uebernehmen?: string; zurueck?: string; onUebernehmen?: () => void; onZurueck?: () => void }): JSX.Element;
```

## Kurz

> **So**
>
> - Radius aus den fünf Tokens.
> - Zustand über die Art des Rands zeigen.
> - Tiefe über Schleier, Kontur und Kippung.

> **Nicht so**
>
> - Schatten in jeder Form.
> - Freie Radien wie `rounded-[10px]`.
> - Spielerische Formen auf Karten mit Knöpfen.
> - Eckige Knöpfe.


---

# Raum

> Das 8-px-Raster, die Polster und Ränder aus den Referenz-Screens, die Leisten und die drei Zielflächen für Zeiger, Finger und Kinderhände.

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

Alles liegt auf einem Raster von 8 px. Der halbe Schritt von 4 px ist erlaubt, wenn zwei Dinge eng zusammengehören. Andere Abstände gibt es nicht.

## Das Raster

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| raum-halb | var(--raum-halb) | 4px |  |  |
| raum-1 | var(--raum-1) | 8px |  |  |
| raum-2 | var(--raum-2) | 16px |  |  |
| raum-3 | var(--raum-3) | 24px |  |  |
| raum-4 | var(--raum-4) | 32px |  |  |
| raum-5 | var(--raum-5) | 40px |  |  |
| raum-6 | var(--raum-6) | 48px |  |  |
| raum-8 | var(--raum-8) | 64px |  |  |
| karte-innen | var(--karte-innen) | 12px |  |  |
| karte-abstand | var(--karte-abstand) | 8px |  |  |
| flaeche-rand-mac | var(--flaeche-rand-mac) | 32px |  |  |
| flaeche-rand-phone | var(--flaeche-rand-phone) | 20px |  |  |
| leiste-mac | var(--leiste-mac) | 220px |  |  |
| leiste-mac-eng | var(--leiste-mac-eng) | 72px |  |  |
| leiste-phone-hoehe | var(--leiste-phone-hoehe) | 64px |  |  |
| umbruch-tisch | var(--umbruch-tisch) | 768px |  | ab hier ist es ein Tisch, kein Handy (nur Tailwind-Breakpoint, nicht in spacing.css) |

| Token | Wofür |
|---|---|
| `--raum-halb` | Abstand zwischen Zeichen und Text, zwischen Punkten |
| `--raum-1` | zwischen Pillen, zwischen Knöpfen einer Reihe |
| `--raum-2` | zwischen Gruppen in einer Karte, zwischen Reitern |
| `--raum-3` | zwischen Abschnitten einer Fläche |
| `--raum-4` | Rand der Fläche auf dem Mac |
| `--raum-5` bis `--raum-8` | große Abschnitte, vor allem auf der Website |

## Polster und Ränder

Diese Maße sind an den Referenz-Screens gemessen. Sie gelten in der App und auf der Website.

- **Kartenpolster** `--karte-innen`: der Abstand vom Kartenrand zum Inhalt.
- **Kartenabstand** `--karte-abstand`: zwischen zwei Karten, waagerecht und senkrecht.
- **Flächenrand Mac** `--flaeche-rand-mac`: zwischen Leiste und Inhalt, und rundum.
- **Flächenrand iPhone** `--flaeche-rand-phone`: links und rechts.

Auf dem iPad gilt bisher kein eigener Token. Das Kapitel [iPad](/ipad/) beschreibt den Vorschlag.

## Leisten

Die Leiste ist die schwarze Signatur von Hey Albert.

- **Mac:** voll ausgeklappt `--leiste-mac` breit, eingeklappt `--leiste-mac-eng`. Eingeklappt steht nur noch der Ball von Albert und die Zeichen der Orte.
- **iPhone:** `--leiste-phone-hoehe` hoch, fixiert am unteren Rand, mit Radius `--radius-leiste`. Das rosa Plus steht heraus.

Mehr dazu in den Kapiteln [Mac](/mac/) und [iPhone](/iphone/).

## Zielflächen

Jedes Element, das man bedienen kann, hat eine Mindestgröße. Darunter geht es nie, auch nicht in dichten Listen.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| ziel-zeiger | var(--ziel-zeiger) | 28px |  |  |
| ziel-finger | var(--ziel-finger) | 44px |  |  |
| ziel-kind | var(--ziel-kind) | 56px |  |  |

- **Zeiger, 28:** Mac mit Maus oder Trackpad. Präzise, darum klein.
- **Finger, 44:** iPhone und iPad. Das ist Apples Mindestmaß für Berührung.
- **Kind, 56:** alles, was Kinder bedienen. Kleine Hände treffen ungenauer. Die Schrift wächst mit, damit der Knopf nicht klobig wirkt, sondern einfach größer.

Die Prüffrage für jede Ansicht: Könnte eine Neunjährige sie allein benutzen? Lena ist neun. Wenn sie ihren Haken nicht trifft, ist die Fläche zu klein.

### Knopf

Quelle: `packages/design-system/components/bausteine/Knopf.jsx`

Der Handlungsknopf auf Karten und Flächen — schwarz für den einen Schritt, beige für den zweiten.

```jsx
<Knopfreihe>
  <Knopf art="primaer" onClick={ichFahre}>Ich fahre</Knopf>
  <Knopf art="zweit">Später</Knopf>
</Knopfreihe>
<Knopf ziel="kind" zeichen="check">Fertig</Knopf>
```

Register Family Manager: kurz, zupackend, ein Verb — „Ich fahre“, „Tobias fragen“, „Übernehmen“, „Rückgängig“. Nie „OK“, nie „Abbrechen“ ohne Gegenstand.

Ein Knopf ist immer einzeilig. Knöpfe stehen in einer `Knopfreihe`: nebeneinander, wenn beide Platz haben, sonst untereinander in voller Breite — nie ein zweizeiliger Knopf, nie zwei ungleich breite Knöpfe untereinander. `ziel="kind"` gibt 56 px mit 16-px-Schrift, wo Kinder bedienen. `inaktiv` rechnet eigene Rollen statt Deckkraft.

```ts
/**
 * Handlungsknopf. Primär schwarz mit hellem Text („Ich fahre“), Zweitknopf beige („Später“),
 * Klein ohne Fläche für Nebenwege. Schriftgrad und Polster wachsen mit der Zielfläche.
 */
export interface KnopfProps {
  art?: "primaer" | "zweit" | "klein";
  /** Zielfläche: Zeiger 32 / 12,5 px, Finger 44 / 14 px, Kind 56 / 16 px. */
  ziel?: "zeiger" | "finger" | "kind";
  /** Sach-Rolle oder Lucide-Name eines Zeichens links im Knopf. */
  zeichen?: string;
  /** Inaktiv ist eine eigene Rolle, keine Deckkraft. */
  inaktiv?: boolean;
  /** Füllt die Breite - für iPhone-Karten. */
  breit?: boolean;
  /** Erlaubt Zeilenumbruch in der Beschriftung. Standard aus: ein Knopf ist einzeilig;
   *  wird die Reihe zu eng, stapelt die Knopfreihe die Knöpfe in voller Breite. */
  umbruch?: boolean;
  type?: "button" | "submit" | "reset";
  children?: React.ReactNode;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  style?: React.CSSProperties;
}
export function Knopf(props: KnopfProps): JSX.Element;

/** Die Knopfreihe: nebeneinander, wenn Platz ist, sonst untereinander in voller Breite. */
export interface KnopfreiheProps {
  children?: React.ReactNode;
  /** Mindestbreite je Knopf in px, ab der zwei nebeneinander passen. Standard 104. */
  mindest?: number;
  ausrichtung?: "mitte";
  style?: React.CSSProperties;
}
export function Knopfreihe(props: KnopfreiheProps): JSX.Element;
```

## Handy und Tisch

`--umbruch-tisch` ist die Grenze zwischen Handy und Tisch. Darunter gilt das Handy-Layout, darüber das Tisch-Layout. Den Token gibt es nur als Tailwind-Umbruch, nicht als CSS-Variable.

Auf der Website kommen die meisten Besuche vom Handy. Deshalb wird jede Fläche zuerst für das Handy gebaut.

## Kurz

> **So**
>
> - Jeder Abstand ist ein `--raum-…`-Token oder ein gemessenes Maß wie `--karte-innen`.
> - Zielflächen nach Gerät und Mensch wählen: Zeiger, Finger, Kind.

> **Nicht so**
>
> - Abstände wie 10, 14 oder 18 px.
> - Knöpfe unter der Zielfläche, „weil der Platz knapp ist“.
> - Ein eigener Rand je Fläche.


---

# Bewegung

> Kurz und ruhig. Drei Dauern, zwei Verläufe, kein Federn, kein Kreisel. Bewegung erklärt, was passiert, und steht still, wenn das System weniger Bewegung will.

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

Bewegung erklärt, sie schmückt nicht. Eine Karte gleitet dorthin, wo sie jetzt hingehört. Ein Toast kommt von unten. Ein Skelett atmet, bis der Inhalt da ist. Mehr bewegt sich nicht.

## Dauern und Verläufe

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| dauer-kurz | var(--dauer-kurz) | 120ms |  |  |
| dauer-mittel | var(--dauer-mittel) | 200ms |  |  |
| dauer-atem | var(--dauer-atem) | 300ms |  |  |
| verlauf-ruhig | var(--verlauf-ruhig) | cubic-bezier(0.2, 0, 0.2, 1) |  |  |
| verlauf-atem | var(--verlauf-atem) | cubic-bezier(0.4, 0, 0.6, 1) |  |  |
| dauer-kurz | var(--dauer-kurz) | 0ms |  |  |
| dauer-mittel | var(--dauer-mittel) | 0ms |  |  |
| dauer-atem | var(--dauer-atem) | 0ms |  |  |

| Token | Wofür |
|---|---|
| `--dauer-kurz` | Zustände: Zeiger, Druck, Fokus, Wechsel einer Farbe |
| `--dauer-mittel` | Einblendungen: Menü, Toast, Dialog |
| `--dauer-atem` | das Atmen des Skeletts |
| `--verlauf-ruhig` | alles außer dem Atmen |
| `--verlauf-atem` | nur das Skelett, hin und her |

In SwiftUI: `AlbertBewegung.verlaufRuhig(AlbertBewegung.dauerKurz)`.

## Was sich bewegt

- **Zustände** wechseln weich: Hintergrund, Rand, Schrift. Nie die Größe.
- **Einblendungen** kommen ruhig, ein Toast hebt sich wenige Pixel von unten.
- **Eine Sache wandert:** Übernimmt Tobias die Fahrt, gleitet die Karte aus „Offen“ in seine Spur. Auf der Website zeigt genau diese eine Bewegung, was Albert tut.
- **Das Skelett atmet** zwischen `--karte` und `--knopf-zweit`. Es hat die Form des Inhalts, der gleich kommt.

## Was sich nie bewegt

- Kein Federn, kein Hüpfen, kein Wackeln.
- Kein Kreisel. Wer wartet, sieht ein Skelett.
- Kein Fortschrittsbalken als Dekoration.
- Kein Konfetti, auch nicht, wenn Lena alles abgehakt hat. Albert stellt fest („Fertig.“), loben tun Menschen.
- Kein Autoplay-Video und kein Karussell auf der Website.

### Skelett

Quelle: `packages/design-system/components/zustaende/Skelett.jsx`

Das Skelett – die Form dessen, was gleich kommt.

```jsx
<Skelett form="board" spalten={7} zeilen={3} />
```

Nie ein Kreisel, nie ein Fortschrittsbalken. Es atmet zwischen Karte und Zweitknopf-Beige und steht still, wenn das System weniger Bewegung will.

```ts
/** Skelett in der Form des Inhalts. Atmet 300 ms, steht bei reduzierter Bewegung, nie ein Kreisel. */
export interface SkelettProps {
  /** "karte" (eine Karte) | "zeile" (Liste) | "board" (Stundenraster). */
  form?: "karte" | "zeile" | "board";
  /** Zeilen je Spalte. */
  zeilen?: number;
  /** Spalten im Board. */
  spalten?: number;
  style?: React.CSSProperties;
}
export function Skelett(props: SkelettProps): JSX.Element;
```

## Reduzierte Bewegung

Wer im System weniger Bewegung eingestellt hat, bekommt keine. Bei `prefers-reduced-motion: reduce` stehen alle drei Dauern auf null. Das Skelett atmet nicht mehr, der Toast steht einfach da.

#### Bewegung · Dauern

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| dauer-kurz | var(--dauer-kurz) | 120ms |  |  |
| dauer-mittel | var(--dauer-mittel) | 200ms |  |  |
| dauer-atem | var(--dauer-atem) | 300ms |  |  |

#### Bewegung · Verläufe

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| verlauf-ruhig | var(--verlauf-ruhig) | cubic-bezier(0.2, 0, 0.2, 1) |  |  |
| verlauf-atem | var(--verlauf-atem) | cubic-bezier(0.4, 0, 0.6, 1) |  |  |

#### Bewegung · Reduzierte Bewegung

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| dauer-kurz | var(--dauer-kurz) | 0ms |  |  |
| dauer-mittel | var(--dauer-mittel) | 0ms |  |  |
| dauer-atem | var(--dauer-atem) | 0ms |  |  |

In SwiftUI schaltet `accessibilityReduceMotion` die Bewegung ganz ab, nicht halb.

## Kurz

> **So**
>
> - Nur die drei Dauern und die zwei Verläufe.
> - Bewegung, die zeigt, wohin etwas gegangen ist.
> - Skelett statt Kreisel.

> **Nicht so**
>
> - Federkurven, `spring()`, eigene Kurven, Dauern über `--dauer-atem` für Zustände.
> - Animation als Belohnung oder als Aufmerksamkeitsfang.
> - Bewegung, die bei reduzierter Bewegung weiterläuft.


---

# Zeichen

> Ein Satz aus Strichzeichen, eingefärbt über die Textfarbe. Feste Sach-Rollen sagen, was eine Sache ist – vom Auto für die Fahrt bis zum Fragezeichen für Alberts Vorschlag. Kein Emoji, nirgends.

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

Zeichen sind bei uns Strichzeichen: 2 px Strich, runde Enden, keine Füllung. Ein Zeichen steht neben Text und macht ihn schneller erfassbar. Den Text ersetzt es nicht.

## Der Satz

| Zeichen | Sach-Rolle | Datei |
| --- | --- | --- |
| bell |  | https://brand.heyalbert.family/marke/zeichen/bell.svg |
| calendar |  | https://brand.heyalbert.family/marke/zeichen/calendar.svg |
| camera |  | https://brand.heyalbert.family/marke/zeichen/camera.svg |
| car-front | fahrt | https://brand.heyalbert.family/marke/zeichen/car-front.svg |
| chart-column |  | https://brand.heyalbert.family/marke/zeichen/chart-column.svg |
| check |  | https://brand.heyalbert.family/marke/zeichen/check.svg |
| chevron-down |  | https://brand.heyalbert.family/marke/zeichen/chevron-down.svg |
| chevron-left |  | https://brand.heyalbert.family/marke/zeichen/chevron-left.svg |
| chevron-right |  | https://brand.heyalbert.family/marke/zeichen/chevron-right.svg |
| circle-alert | konflikt | https://brand.heyalbert.family/marke/zeichen/circle-alert.svg |
| circle-check | ritual | https://brand.heyalbert.family/marke/zeichen/circle-check.svg |
| circle-plus |  | https://brand.heyalbert.family/marke/zeichen/circle-plus.svg |
| circle-question-mark | vorschlag | https://brand.heyalbert.family/marke/zeichen/circle-question-mark.svg |
| clock |  | https://brand.heyalbert.family/marke/zeichen/clock.svg |
| coins | taler | https://brand.heyalbert.family/marke/zeichen/coins.svg |
| cross | arzt | https://brand.heyalbert.family/marke/zeichen/cross.svg |
| file-text | dokument | https://brand.heyalbert.family/marke/zeichen/file-text.svg |
| gauge |  | https://brand.heyalbert.family/marke/zeichen/gauge.svg |
| globe |  | https://brand.heyalbert.family/marke/zeichen/globe.svg |
| graduation-cap | schule | https://brand.heyalbert.family/marke/zeichen/graduation-cap.svg |
| heart | freude | https://brand.heyalbert.family/marke/zeichen/heart.svg |
| house |  | https://brand.heyalbert.family/marke/zeichen/house.svg |
| inbox |  | https://brand.heyalbert.family/marke/zeichen/inbox.svg |
| link |  | https://brand.heyalbert.family/marke/zeichen/link.svg |
| lock |  | https://brand.heyalbert.family/marke/zeichen/lock.svg |
| mail |  | https://brand.heyalbert.family/marke/zeichen/mail.svg |
| message-circle |  | https://brand.heyalbert.family/marke/zeichen/message-circle.svg |
| message-square |  | https://brand.heyalbert.family/marke/zeichen/message-square.svg |
| moon |  | https://brand.heyalbert.family/marke/zeichen/moon.svg |
| music | musik | https://brand.heyalbert.family/marke/zeichen/music.svg |
| pencil |  | https://brand.heyalbert.family/marke/zeichen/pencil.svg |
| plus |  | https://brand.heyalbert.family/marke/zeichen/plus.svg |
| scan-line |  | https://brand.heyalbert.family/marke/zeichen/scan-line.svg |
| search |  | https://brand.heyalbert.family/marke/zeichen/search.svg |
| shopping-basket | einkauf | https://brand.heyalbert.family/marke/zeichen/shopping-basket.svg |
| sliders-horizontal |  | https://brand.heyalbert.family/marke/zeichen/sliders-horizontal.svg |
| star |  | https://brand.heyalbert.family/marke/zeichen/star.svg |
| sticky-note | notiz | https://brand.heyalbert.family/marke/zeichen/sticky-note.svg |
| sun |  | https://brand.heyalbert.family/marke/zeichen/sun.svg |
| table |  | https://brand.heyalbert.family/marke/zeichen/table.svg |
| undo-2 |  | https://brand.heyalbert.family/marke/zeichen/undo-2.svg |
| user-plus |  | https://brand.heyalbert.family/marke/zeichen/user-plus.svg |
| user |  | https://brand.heyalbert.family/marke/zeichen/user.svg |
| users | familie | https://brand.heyalbert.family/marke/zeichen/users.svg |
| utensils | essen | https://brand.heyalbert.family/marke/zeichen/utensils.svg |
| volleyball | sport | https://brand.heyalbert.family/marke/zeichen/volleyball.svg |
| waves-ladder | schwimmen | https://brand.heyalbert.family/marke/zeichen/waves-ladder.svg |

Jedes Zeichen lässt sich als SVG herunterladen. Alle zusammen liegen im Paket:

- [Zeichen (SVG)](https://brand.heyalbert.family/downloads/hey-albert-zeichen.zip)

> **Offen: Lucide ist eine Übergangslösung**
>
> Für Hey Albert wurde nie ein eigener Zeichensatz geliefert. Die Referenz-Screens zeigen Zeichen in der Art von SF Symbols. Als nächster Treffer ist der Satz **Lucide** eingezogen (ISC-Lizenz). Das ist eine Substitution. Sie muss bestätigt oder gegen den echten Satz getauscht werden. In der Apple-App stehen bis dahin SF Symbols.

## Sach-Rollen

Manche Zeichen haben eine feste Bedeutung. Das Zeichen sagt, was für eine Sache eine Karte ist. Diese Zuordnung wird nicht getauscht.

| Zeichen | Sach-Rolle | Datei |
| --- | --- | --- |
| car-front | fahrt | https://brand.heyalbert.family/marke/zeichen/car-front.svg |
| circle-alert | konflikt | https://brand.heyalbert.family/marke/zeichen/circle-alert.svg |
| circle-check | ritual | https://brand.heyalbert.family/marke/zeichen/circle-check.svg |
| circle-question-mark | vorschlag | https://brand.heyalbert.family/marke/zeichen/circle-question-mark.svg |
| coins | taler | https://brand.heyalbert.family/marke/zeichen/coins.svg |
| cross | arzt | https://brand.heyalbert.family/marke/zeichen/cross.svg |
| file-text | dokument | https://brand.heyalbert.family/marke/zeichen/file-text.svg |
| graduation-cap | schule | https://brand.heyalbert.family/marke/zeichen/graduation-cap.svg |
| heart | freude | https://brand.heyalbert.family/marke/zeichen/heart.svg |
| music | musik | https://brand.heyalbert.family/marke/zeichen/music.svg |
| shopping-basket | einkauf | https://brand.heyalbert.family/marke/zeichen/shopping-basket.svg |
| sticky-note | notiz | https://brand.heyalbert.family/marke/zeichen/sticky-note.svg |
| users | familie | https://brand.heyalbert.family/marke/zeichen/users.svg |
| utensils | essen | https://brand.heyalbert.family/marke/zeichen/utensils.svg |
| volleyball | sport | https://brand.heyalbert.family/marke/zeichen/volleyball.svg |
| waves-ladder | schwimmen | https://brand.heyalbert.family/marke/zeichen/waves-ladder.svg |

Im Code heißt das Zeichen nach seiner Rolle, nicht nach seiner Datei: `<Icon name="fahrt" />` statt `<Icon name="car-front" />`. So bleibt die Bedeutung an einer Stelle, im Bauteil `Icon`.

## Wie Zeichen stehen

- **Im Kartenkopf** steht das Zeichen der Sache links in einem hellen Kreis: 26 px auf dem Mac, 24 px auf dem iPhone (Bauteil `SachSymbol`). Rechts stehen die Punkte der Menschen. Sonst nichts im Kopf.
- **Eingefärbt** wird über `currentColor`. Das Zeichen trägt die Textfarbe seines Elternteils. So schaltet es mit dem Modus um und kommt in Screenshots und Exporten mit.
- **Inline gerendert**, nie als Bild-URL. Die Pfade liegen in `components/bausteine/zeichen.js`, Quelle bleiben die SVG-Dateien in `assets/icons/`.
- **Dekorativ** ohne `titel`: Das Zeichen bekommt `aria-hidden`, weil der Text daneben steht. Steht ein Zeichen allein, etwa in einem runden Knopf, braucht es einen `titel` oder ein Label am Knopf.

### Icon

Quelle: `packages/design-system/components/bausteine/Icon.jsx`

Ein Zeichen aus dem Lucide-Satz — für alles, was ein Symbol braucht.

```jsx
<Icon name="fahrt" groesse={16} titel="Fahrt" />
```

- `name` nimmt eine Sach-Rolle (`fahrt`, `schule`, `sport`, `essen`, `arzt`, `musik`, `freude`, `familie`, `ritual`, `schwimmen`, `vorschlag`) oder direkt einen Lucide-Dateinamen (`bell`, `search`, `plus`).
- Das Zeichen wird inline gerendert und über `stroke: currentColor` eingefärbt — es trägt also die Textfarbe seines Elternteils und kommt in Screenshots und Exporten mit.
- Quelle sind die Dateien in `assets/icons/`; `components/bausteine/zeichen.js` hält ihren Pfad-Inhalt. Kommt ein Zeichen dazu: Datei nach `assets/icons/` legen und `zeichen.js` neu erzeugen — nie ein SVG von Hand zeichnen.
- Ohne `titel` ist das Zeichen dekorativ (`aria-hidden`) — richtig, weil neben jedem Zeichen Text steht.

```ts
/** Zeichen aus dem Lucide-Satz, inline gerendert und über `stroke` eingefärbt. */
export interface IconProps {
  /** Sach-Rolle ("fahrt", "schule", "essen", "familie", "ritual", "vorschlag", ...) oder Lucide-Dateiname ("bell"). */
  name: string;
  /** Kantenlänge in px. Standard 16. */
  groesse?: number;
  /** Strichstärke. Standard 2 — wie im Satz. */
  strich?: number;
  /** Strichfarbe. Standard currentColor. */
  farbe?: string;
  /** Wenn gesetzt, wird das Zeichen für VoiceOver benannt; sonst ist es dekorativ. */
  titel?: string;
  style?: React.CSSProperties;
}
export function Icon(props: IconProps): JSX.Element | null;
export const SACHEN: Record<string, string>;
```

### SachSymbol

Quelle: `packages/design-system/components/bausteine/SachSymbol.jsx`

Der helle Kreis mit dem Zeichen der Sache – immer links im Kartenkopf, nie woanders.

```jsx
<SachSymbol art="fahrt" titel="Fahrt" />
```

Was für eine Sache es ist, sagt dieses Symbol; wer dabei ist, sagen die Punkte rechts (`Punktgruppe`); was für eine Art es ist, sagt die Kartenfarbe. Kein Menü, kein Chevron im Kopf.

```ts
/** Zeichen der Sache in einem hellen Kreis - steht links im Kartenkopf. */
export interface SachSymbolProps {
  /** Sach-Rolle: "fahrt" | "schule" | "sport" | "essen" | "arzt" | "musik" | "freude" | "familie" | "ritual" | "vorschlag" | "schwimmen". */
  art?: string;
  /** Kreisdurchmesser in px. Standard 26 (Mac), 24 auf dem iPhone. */
  groesse?: number;
  /** Auf farbigen Karten - haelt den Kreis hell. */
  aufFarbe?: boolean;
  titel?: string;
  style?: React.CSSProperties;
}
export function SachSymbol(props: SachSymbolProps): JSX.Element;
```

## Keine Emoji

Es gibt keine Emoji. Nicht in der App, nicht auf der Website, nicht in Social Media, nicht in Mails. Auch keine Unicode-Zeichen als Ersatz für ein Zeichen, etwa Sterne, Häkchen oder Pfeile aus der Schrift.

Als Textzeichen erlaubt sind genau vier:

| Zeichen | Wofür | Beispiel |
|---|---|---|
| `→` | von – nach, in Fahrten | Sportplatz Nord → Zuhause |
| `·` | Trenner in einer Zeile | 16:40 · Handball, Halle Süd |
| `›` | Ablagepfad | Wichtiges › Versicherungen |
| `–` | Halbgeviertstrich, mit Leerzeichen | 14:00 – 14:30 |

## Ein Zeichen fehlt

Kein eigenes Zeichnen. Fehlt ein Zeichen, wird es aus demselben Satz geholt:

1. Die SVG-Datei aus dem Satz nach `packages/design-system/assets/icons/` legen.
2. `components/bausteine/zeichen.js` neu erzeugen.
3. Braucht das Zeichen eine Bedeutung, die Sach-Rolle in `SACHEN` im Bauteil `Icon` eintragen.

## Kurz

> **So**
>
> - Zeichen neben Text, in der Textfarbe.
> - Sach-Rolle statt Dateiname.
> - Allein stehende Zeichen mit Label.

> **Nicht so**
>
> - Emoji, auch nicht „nur in Social Media“.
> - Gefüllte Zeichen, andere Strichstärken, zweifarbige Zeichen.
> - Ein selbst gezeichnetes Zeichen oder eines aus einem anderen Satz.
> - Ein Menü oder einen Pfeil im Kartenkopf.


---

# Bildsprache

> Das Produkt ist das Motiv. Echte Screens von Familie Sonntag auf flachen Rahmen, Tuschezeichnungen mit genau einem gelben Akzent, ein einziges Foto. Dazu, wie Screenshots entstehen und welche Dateien die Website braucht.

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

Unsere Bilder sind ruhig und warm. Papier statt Glas. Keine Verläufe, keine Schatten, Haarlinien. Wir zeigen, was Hey Albert tut, und behaupten es nicht.

## Das Produkt ist das Motiv

Das echte Wochenboard mit zwei offenen Sachen und einem Vorschlag überzeugt mehr als jeder Satz über „Übersicht“. Deshalb ist unser wichtigstes Bild ein Screen von Familie Sonntag.

![Wochenboard von Familie Sonntag auf dem Mac, Mittwoch 3. September](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

Screens stehen auf flachen Geräterahmen:

- **Ohne Glanz.** Keine Spiegelung, keine Perspektive, kein 3D.
- **Angeschnitten** statt schwebend gedreht.
- **Ein Gerät, eine Aussage.** Ein Stapel aus Mac und iPhone zeigt, dass es überall dieselben Dinge sind.

![Main](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![Eingang](https://brand.heyalbert.family/bilder/screens/Eingang.png)

*Eingang · iphone · 780 × 1688 px*

![Taler](https://brand.heyalbert.family/bilder/screens/Taler.png)

*Taler · iphone · 780 × 1688 px*

![LenaBereich](https://brand.heyalbert.family/bilder/screens/LenaBereich.png)

*LenaBereich · ipad · 1668 × 2388 px*

![Watch](https://brand.heyalbert.family/bilder/screens/Watch.png)

*Watch · watch · 792 × 968 px*

![Haushalt](https://brand.heyalbert.family/bilder/screens/Haushalt.png)

*Haushalt · mac · 2880 × 1800 px*

Alle Screens zum Herunterladen, als PNG in voller Auflösung:

- [Screens von Familie Sonntag (PNG)](https://brand.heyalbert.family/downloads/hey-albert-screens.zip)

## Zeichnung

Alles, was kein Screen ist, ist eine eigene Zeichnung: flache Tusche, Monolinie, runde Enden. Darin genau **ein** gelber Akzent, als Fläche, nie als Schrift.

- Motive sind echte Situationen: der Flur um 7:38, der Turnbeutel am Haken, der Esstisch am Sonntag, das Auto, der Supermarkt.
- Wohnungen sind bewohnt, nicht aufgeräumt. Wer eine makellose Küche zeigt, spricht nicht mit unserer Familie.
- Kinder **tun** etwas: abhaken, eintragen, mitentscheiden. Sie werden nie betreut gezeigt.
- Die Personenfarben sind auch die Farben der Zeichnungen. Wer Anna kennt, erkennt ihre Farbe wieder.

> **Offen: Die Zeichnungen gibt es noch nicht**
>
> Die Homepage hat drei Plätze für Tuschezeichnungen. Sie sind mit dem Bauteil `Bildplatz` markiert, bis die Zeichnungen existieren. Ein Stockbild oder ein erzeugtes Bild ersetzt sie nicht.

## Ein Foto, ein Objekt

- **Genau ein echtes Foto:** der Gründer, im Abschnitt „Wer dahinter steht“. Sonst keine Fotos von Menschen.
- **Ein physisches Objekt:** das gedruckte Jahresbuch, aufgeschlagen, von oben.

![Das Jahresbuch von Familie Sonntag, aufgeschlagen](https://brand.heyalbert.family/bilder/screens/Jahresbuch.png)

*Jahresbuch · objekt · 2246 × 1588 px*

## Albert als Figur

Albert ist im Bild ein Zauberer, im Ton der Family Manager. Er ist eine Tuschezeichnung, kein Maskottchen. Er erscheint sparsam:

- klein im Kopf der Website, beim Schritt „Sagen“, im Kinderbereich;
- im Onboarding, in leeren Zuständen, in Briefings, in der Sonntagsrunde, im Jahresbuch.

Nie erscheint er in Listen, Tabellen, im Safe, bei Finanzen, auf Systemflächen, beim Preis, bei Fragen oder bei Vertrauen.

## Was wir zeigen und was nie

**Wir zeigen**

- echte Screens von Familie Sonntag auf flachen Geräterahmen
- flache Tuschezeichnung mit genau einem gelben Akzent
- genau ein echtes Foto: der Gründer
- ein physisches Objekt: das gedruckte Jahresbuch

**Wir zeigen nie**

- Kindergesichter
- Stockfotos
- KI-erzeugte Bilder
- Glanz, Perspektive, 3D-Geräte
- Karussell, Autoplay-Video
- echte Familiendaten

Dazu, aus der Marke:

- Keine erschöpften Eltern und keine Zettelberge. Wir verkaufen kein Problem.
- Keine Bildschirme ohne Zusammenhang.
- Keine Menschen, die aufs Telefon starren, während jemand redet.
- Keine Fortschrittsbalken, Ranglisten oder fremden Taler-Stände, auch nicht als Dekoration.

> **Offen: Fotos von Kindern**
>
> `docs/21-marke-und-stimme.md` (I.7) erlaubt echte Kinder mit widerruflicher Zustimmung und sagt „Im Zweifel zeichnen wir“. Das Designsystem und `regeln.json` schließen Kindergesichter aus und erlauben nur ein Foto, das des Gründers. Bis zur Entscheidung gilt die strengere Regel: keine Kindergesichter.

## Screenshots herstellen

Jeder Screen zeigt Familie Sonntag in ihrer Woche: Mo 1. bis So 7. September, heute ist Mittwoch, der 3. Nie eine echte Familie, nie echte Namen, nie echte Adressen.

- **Inhalt:** eine ehrliche Woche. Zwei Sachen ohne Zuständigen, ein Vorschlag von Albert. Ein Board ohne Offenes wirkt gestellt.
- **Modus:** hell. Der dunkle Modus nur, wo er selbst das Thema ist.
- **Statusleiste:** keine fremde Statusleiste als Imitat auf Mockups.
- **Größen** in doppelter Auflösung, wie sie in `apps/site/bilder` liegen:

| Gerät | Pixel | Punkte | Screens |
|---|---|---|---|
| Mac | 2880 × 1800 | 1440 × 900 | Wochenboard, Haushalt, Safe, Anlass, Aufgaben, FamilyFeedMac |
| iPhone | 780 × 1688 | 390 × 844 | Main, Eingang, Einkauf, Essensplan, Schule, Taler, … |
| iPad hochkant | 1668 × 2388 | 834 × 1194 | LenaBereich, Rueckblick |
| Watch | 792 × 968 | 396 × 484 | Watch |

## Dateien für die Website

- **Quelle:** PNG in voller Auflösung in `apps/site/bilder/`. Sie bleiben als Rückfall und für Vorschaubilder.
- **Ausgeliefert:** AVIF, mit WebP als Rückfall, je in 480, 720, 1080 px und voller Breite. Erzeugt mit `python3 tooling/bilder-optimieren.py`, das nur neu rechnet, wenn das PNG jünger ist.
- **Erstes Bild** einer Seite ohne Einblendung und vorgeladen, damit es schnell steht.
- **Vorschaubilder** für geteilte Links: 1200 × 630 je Sprache, erzeugt mit `tooling/og-bilder.py`.

| Sprache | Datei |
| --- | --- |
| bg | https://brand.heyalbert.family/bilder/og/og-bg.png |
| da | https://brand.heyalbert.family/bilder/og/og-da.png |
| de | https://brand.heyalbert.family/bilder/og/og-de.png |
| en | https://brand.heyalbert.family/bilder/og/og-en.png |
| es | https://brand.heyalbert.family/bilder/og/og-es.png |
| fr | https://brand.heyalbert.family/bilder/og/og-fr.png |
| it | https://brand.heyalbert.family/bilder/og/og-it.png |
| no | https://brand.heyalbert.family/bilder/og/og-no.png |
| pl | https://brand.heyalbert.family/bilder/og/og-pl.png |
| sv | https://brand.heyalbert.family/bilder/og/og-sv.png |
| tr | https://brand.heyalbert.family/bilder/og/og-tr.png |

## Alt-Texte

Jedes Bild hat einen Alt-Text. Er sagt, was das Bild zeigt, nicht wie schön es ist.

> **So**
>
> „Wochenboard von Familie Sonntag auf dem Mac. Freitag, 16:40: Die Fahrt zum Handball hat noch keinen Fahrer.“

> **Nicht so**
>
> „Screenshot“, „Bild“, „Hey Albert App Dashboard“, ein leerer Alt-Text bei einem Bild, das etwas aussagt.

Zeichnungen, die nur schmücken, bekommen `alt=""`. Ein Screen sagt immer etwas, er bekommt immer einen Text.


---

# Zugänglichkeit

> Hey Albert ist für eine ganze Familie gebaut, von Lena mit neun bis Oma Grete. Kontrast, Zielflächen, Fokus, Bildschirmleser, Textgrößen, Bewegung und einfache Sprache gehören zu jeder Ansicht, nicht ans Ende.

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

Eine Familie ist die vielfältigste Gruppe, für die man gestalten kann. Lena ist neun und liest langsam. Oma Grete sieht schlechter und tippt ungenauer. Tobias bedient den Mac mit der Tastatur. Alle benutzen dieselbe App.

Zugänglichkeit ist deshalb kein Prüfschritt am Ende. Zugänglichkeit steckt in den Tokens.

## Die Prüffrage

> Könnte eine Neunjährige das allein benutzen?

Diese Frage gilt für jede Ansicht. Kinder sind Beteiligte, nicht Publikum (Leitsatz 5). Wenn Lena ihren Haken nicht findet, nicht trifft oder nicht versteht, ist die Ansicht nicht fertig.

## Kontrast

- Fließtext und Bedienelemente: mindestens **4,5:1**.
- Flächen, Konturen, gestrichelte Ränder, Fokusring: mindestens **3:1**.
- Beide Modi werden gerechnet, nicht geschätzt.

| 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 |
| text-auf-gelb | gelb | 6,85:1 | AA | 6,85:1 | AA |
| text-auf-blau | blau | 10,94:1 | AAA | 10,94:1 | AAA |
| text-auf-rosa | rosa | 10,55:1 | AAA | 10,55:1 | AAA |
| text-auf-leiste | schwarz | 15,65:1 | AAA | 17,28:1 | AAA |
| knopf-primaer-text | knopf-primaer-flaeche | 15,65:1 | AAA | 15,65:1 | AAA |
| rand-offen | grund | 4,47:1 | 3:1 | 9,21:1 | AAA |
| rand-vorschlag | grund | 4,83:1 | AA | 7,44:1 | AAA |
| rand-fokus | grund | 4,47:1 | 3:1 | 9,21:1 | AAA |

Wo eine Zeile unter der Grenze liegt, ist das ein offener Fehler, keine Ausnahme. Den Stand zu Grau und Inaktiv beschreibt das Kapitel [Farbe](/farbe/#kontrast).

## Farbe ist nie allein

Keine Information hängt nur an einer Farbe.

- Personenfarbe immer mit Initiale oder Name.
- Kartenart immer auch über das Symbol der Sache.
- „Ohne Zuständigen“ ist ein gestrichelter Rand **und** eine Pille mit Text, etwa „Kein Fahrer“.
- Ein Vorschlag ist gestrichelt **und** trägt die Zeile „Vorschlag von Albert“.

So funktioniert Hey Albert auch für Menschen mit Farbsehschwäche und in Graustufen.

## Zielflächen

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| ziel-zeiger | var(--ziel-zeiger) | 28px |  |  |
| ziel-finger | var(--ziel-finger) | 44px |  |  |
| ziel-kind | var(--ziel-kind) | 56px |  |  |

Was Kinder bedienen, ist mindestens 56 groß. Das gilt im Kinderbereich, beim Abhaken und bei den Talern. Ein Zeichen allein reicht nie als Ziel, die ganze Zeile oder der ganze Knopf ist das Ziel.

## Fokus und Tastatur

- Fokus ist immer sichtbar, aber nur über `:focus-visible`: ein Ring in `--rand-fokus`, `--fokus-ring` breit, mit `--fokus-abstand`.
- Wer mit Maus oder Finger tippt, sieht keinen Ring.
- Auf dem Mac geht alles mit der Tastatur, auch Ziehen und Ablegen: Eine Karte lässt sich ohne Maus in eine andere Spur verschieben.
- Die Reihenfolge folgt dem Lesen: Kopf, Filter, Inhalt, Leiste.

## Bildschirmleser

- Zeichen neben Text sind dekorativ und für VoiceOver unsichtbar (`aria-hidden`).
- Allein stehende Zeichen, etwa die drei Kreise im Kopf (Klingel, Nachrichten, Plus), brauchen ein Label.
- Eine Karte soll sich als Ganzes vorlesen lassen: Art, Titel, Zeit, Ort, Menschen, Zustand. Etwa: „Fahrt. Rückfahrt Auswärtsspiel, 14:00 bis 14:30. Felix. Kein Fahrer.“
- Knöpfe sagen, was passiert: „Ich fahre“, nicht „OK“.
- Bilder mit Aussage haben Alt-Text, schmückende `alt=""`.

## Textgrößen

- In der App folgen alle Grade Dynamic Type. Das gehört zur Definition von „fertig“: Wer größere Schrift eingestellt hat, bekommt sie überall.
- Karten wachsen in der Höhe mit. Knöpfe werden nie zweizeilig: Reicht der Platz nicht, stellt die `Knopfreihe` sie untereinander.
- Auf der Website muss Zoom bis 200 % ohne waagerechtes Wischen funktionieren.

> **Offen**
>
> Wie die festen Grade aus den Tokens auf die Stufen von Dynamic Type abgebildet werden, ist nicht dokumentiert. Die App liegt noch nicht im Monorepo (`apps/apple`). Die Tabelle gehört hierher, sobald sie umgezogen ist.

## Bewegung

Bei reduzierter Bewegung stehen alle Dauern auf null, das Skelett atmet nicht. Nichts blinkt, nichts läuft von selbst. Mehr im Kapitel [Bewegung](/bewegung/).

## Einfache Sprache

Text ist Teil der Zugänglichkeit.

- Ein Gedanke je Satz. Kurze Wörter, Verben statt Hauptwörter.
- Fehler und leere Zustände sagen drei Dinge: was hierher gehört, warum es leer ist, was man tun kann – mit einem Knopf.
- Kinder lesen im Register Vorleser, in drei Stufen: klein (6–9), mittel (10–12), groß (13+). Die Grenzen je Register stehen im Kapitel [Stimme](/stimme/).

| Register | Wo | Kennzeichen | Wörter je Satz Ø / max |
| --- | --- | --- | --- |
| R1 · Der Erzähler | Website, Landingpages, Onboarding, Manifest, Modulnamen, Release-Notes | Merksätze, Kontrastpaare, konkrete Bilder aus dem Familienleben | 9 / 18 |
| R2 · Der Family Manager | Die tägliche Oberfläche für Erwachsene: Knöpfe, Etiketten, Hinweise, Briefings | Knapp und handlungsorientiert | 8 / 12 |
| R3 · Der Vorleser | Alle Kinderansichten, in drei Stufen: klein 6–9, mittel 10–12, groß 13+ | Kurz, bildhaft, in der Gegenwart | 6 / 10 |
| R4 · Der Sachbearbeiter | Safe, Verträge, Fristen, Finanzen, Steuern, Datenschutz, Rechtstexte | Präzise, nüchtern, vollständig | 10 / 14 |
| R5 · Der Briefeschreiber | Von Albert vorformulierte Antworten an Schule, Verein, Versicherung, Handwerker, Behörde | Nicht Alberts Stimme, sondern die der Familie | 12 / 18 |

Watch und Mitteilungen: höchstens sieben Wörter, das Wichtigste zuerst. Beispiel: „16:40 · Handball, Halle Süd.“

## Fertig ist eine Ansicht erst mit

- [ ] leerer Zustand
- [ ] Skelett statt Kreisel
- [ ] Tastatur und :focus-visible
- [ ] Handy und Tisch
- [ ] hell und dunkel als Token-Umschaltung
- [ ] optimistisches Update mit „Rückgängig“
- [ ] richtiges Register
- [ ] kein Hex-Wert
- [ ] Zielflächen 28/44/56

Der Agent `design-pruefer` prüft Ansichten gegen diese Liste. Die Brand-QA (`pnpm qa` im Designsystem) findet Hex-Werte, Schatten, verbotene Wörter, Ausrufezeichen und Bilder ohne Alt-Text.


---

# Screens

> Wie ein Screen von Hey Albert aufgebaut ist – auf iPhone, iPad, Mac, Watch und im Browser. Geräte, Orte, Rollen, Dichte, Raster, Kopf und Karten, mit allen Screens von Familie Sonntag.

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

Hey Albert hat ein Datenmodell und viele Ansichten. Ein Termin ist auf dem Mac eine Karte im Stundenraster, am iPhone eine Zeile in der Liste und auf der Uhr eine Frage mit zwei Antworten. Es ist immer dieselbe Zeile in der Datenbank. Dieses Kapitel beschreibt, was für alle Geräte gilt. Die Kapitel [iPhone](/iphone/), [iPad](/ipad/), [Mac](/mac/) und [Watch](/watch/) zeigen den Aufbau Region für Region, in Punkten.

## Ein Datenmodell, viele Ansichten

Leitsatz 2 ist die Grundlage jedes Screens. Woche, Heute und Kalender rendern dieselben Sachen. Eine Ansicht darf filtern, gruppieren und verdichten. Eigene Daten darf sie nie halten.

> **So**
>
> Eine neue Ansicht liest dieselben Zeilen wie die vorhandenen und zeigt sie anders. Die Rückfahrt am Samstag ist im Wochenboard, in der Liste, im Wochenüberblick und in der Sonntagsrunde dieselbe Sache.

> **Nicht so**
>
> Eine Ansicht bekommt eine eigene Kopie der Daten, „damit es schneller geht“. Dann gibt es zwei Wahrheiten, und eine davon ist falsch.

## Geräte und ihre Rolle

| Gerät | Rolle | Was dort hingehört |
|---|---|---|
| Mac | die Planungsmaschine | Woche planen, Safe, Finanzen, Sonntagsrunde, Haushalt verwalten |
| iPhone | das Alltagsgerät | unterwegs, im Laden, im Auto, im Flur – mit einer Hand |
| iPad | Familien- und Kindergerät | in der Küche, am Tisch, im Kinderzimmer |
| Apple Watch | das Fünf-Sekunden-Gerät | losfahren, angekommen, abgehakt, abgestimmt |
| Browser | die Web-App | Planung und Papierkram für jeden Rechner, derselbe Aufbau wie am Mac |

Die Regel dahinter steht in `docs/11-produkt.md` §10: Was **geplant** wird, gehört auf den Mac. Was **gemeinsam** passiert, gehört aufs iPad. Was **unterwegs** passiert, gehört aufs iPhone. Was **eine Sekunde** dauert, gehört an die Uhr.

## Orte der App

Die App hat drei Arten von Orten. Albert selbst ist kein Ort. Er wirkt in allen.

- **Flächen:** Heute, Woche, Eingang. Hier stehen Sachen aus allen Bereichen.
- **Bereiche:** Essen, Aufgaben, Schule, Freude, Wichtiges. Hier steht eine Art von Sachen in voller Tiefe.
- **Persönlich:** Ich und Haushalt. Profil, eigene Sachen, Menschen und Rechte.

Die Gruppen sind keine Ziele. Niemand klickt auf „Bereiche“, man klickt auf „Essen“.

## Navigation je Gerät

| Gerät | Navigation | Bauteil |
|---|---|---|
| Mac und Browser | schwarze Leiste links, 220 pt, eingeklappt 72 pt | `LeisteMac` |
| iPad quer | Leiste links wie am Mac (Vorschlag) | `LeisteMac` |
| iPad hochkant | Leiste eingeklappt (Vorschlag) | `LeisteMac` |
| iPhone | schwarze Leiste unten, fünf Plätze, das Plus tritt heraus | `LeistePhone` |
| Watch | keine, eine Frage je Bildschirm | – |
| Kinderraum, Wandmodus | keine Leiste, ein eigener Einstieg | – |

Am iPhone hat die Leiste fünf Plätze: Heute · Woche · Plus · Eingang · Ich. Am Mac stehen alle Orte in drei Gruppen.

> **Offen**
>
> `docs/11-produkt.md` §6 nennt am iPhone die Tabs „Heute · Woche · Einkauf · Essen · Mehr“. Das Bauteil `LeistePhone`, alle Referenz-Screens und alle Website-Screens zeigen „Heute · Woche · Plus · Eingang · Ich“. Diese Seite folgt dem gebauten Bauteil. Die Entscheidung liegt beim Gründer.

## Rollen sehen verschiedene Einstiege

Hey Albert ist keine App mit Rechten, die ausgraut, was jemand nicht darf. Jede Rolle bekommt aus demselben Datenmodell einen eigenen Einstieg. Was jemand sehen darf, entscheidet die Datenbank, nie ein ausgeblendeter Knopf.

| Rolle | Wer | Erste Seite |
|---|---|---|
| `owner`, `adult` | Anna, Tobias | Mac: die ganze Woche · iPhone: Heute nach Dringlichkeit · iPad: Portal |
| `child · small` (6–9) | Lena | iPad: ihr Raum, drei Bildkacheln, Zielflächen 56 pt · iPhone: nur „was ist jetzt“ |
| `child · mid` (10–12) | Felix | iPad: Tagespfad, zwei Knöpfe · iPhone: Schulmappe, Nimm-mit, Fahrt fragen |
| `child · teen` (13+) | – | fast die Ansicht der Erwachsenen, ohne Safe, Tresor und Finanzen |
| `guest` | Oma Grete, Opa Werner, Oma Hilde | iPhone: drei Dinge – eingeladene Termine, Album, „Ich fahre“ |
| `service` | Sofia | iPhone: ihre Liste – Schichten, ihre Fahrten, Einkauf; jede Freigabe mit Ablaufdatum |

Safe, Tresor und Finanzen öffnen sich nur über `albert.may_enter()`. Kinder sehen sie nie, auch nicht ausgegraut.

## Dichte: fünf Sekunden

Auf der ersten Seite steht so viel, wie diese Rolle auf diesem Gerät in fünf Sekunden erfasst. Für Oma Grete sind das drei Dinge. Für Lena vier. Für Anna am Mac darf es die ganze Woche sein, sie hat sich hingesetzt. Wer mehr braucht, geht eine Ebene tiefer.

Vor jedem Screen stehen drei Fragen:

1. Für wen ist diese Seite? „Für alle“ heißt: für niemanden.
2. Wie viele Dinge stehen darauf, und wie viele Sekunden hat diese Rolle?
3. Blende ich aus, oder baue ich einen eigenen Einstieg? Ausgrauen ist immer die schlechtere Antwort.

## Raster, Ränder, sichere Zonen

Alles liegt auf dem 8-pt-Raster mit 4 pt als halbem Schritt. Der Rand der Fläche ist am Mac `--flaeche-rand-mac`, am iPhone `--flaeche-rand-phone`. Karten haben innen `--karte-innen` und untereinander `--karte-abstand`.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| raum-halb | var(--raum-halb) | 4px |  |  |
| raum-1 | var(--raum-1) | 8px |  |  |
| raum-2 | var(--raum-2) | 16px |  |  |
| raum-3 | var(--raum-3) | 24px |  |  |
| raum-4 | var(--raum-4) | 32px |  |  |
| raum-5 | var(--raum-5) | 40px |  |  |
| raum-6 | var(--raum-6) | 48px |  |  |
| raum-8 | var(--raum-8) | 64px |  |  |
| karte-innen | var(--karte-innen) | 12px |  |  |
| karte-abstand | var(--karte-abstand) | 8px |  |  |
| flaeche-rand-mac | var(--flaeche-rand-mac) | 32px |  |  |
| flaeche-rand-phone | var(--flaeche-rand-phone) | 20px |  |  |
| leiste-mac | var(--leiste-mac) | 220px |  |  |
| leiste-mac-eng | var(--leiste-mac-eng) | 72px |  |  |
| leiste-phone-hoehe | var(--leiste-phone-hoehe) | 64px |  |  |
| umbruch-tisch | var(--umbruch-tisch) | 768px |  | ab hier ist es ein Tisch, kein Handy (nur Tailwind-Breakpoint, nicht in spacing.css) |

Die sicheren Zonen gehören dem System: Statusleiste, Dynamic Island, Home-Indikator. Wir zeichnen dort nichts und imitieren keine Statusleiste. Bedienelemente liegen nie unter der Leiste am iPhone.

Zielflächen sind Untergrenzen, keine Richtwerte: Zeiger 28, Finger 44, Kind 56.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| ziel-zeiger | var(--ziel-zeiger) | 28px |  |  |
| ziel-finger | var(--ziel-finger) | 44px |  |  |
| ziel-kind | var(--ziel-kind) | 56px |  |  |

## Der Kopf einer Fläche

Jede Fläche beginnt gleich. Erst der Kopf, dann die Anrede, dann die Zeile mit Datum und Filter, dann der Inhalt.

- **Kopf** (Mac, iPad): Suchpille mit rosa Lupe, gestrichelte Bereichs-Chips, rechts drei Kreise in fester Reihenfolge – Klingel, Nachrichten, rosa Plus. Am iPhone gibt es keinen Kopf, das Plus sitzt in der Leiste.
- **Anrede:** „Guten Morgen, Anna.“ in Bricolage 800. Auf Heute grüßt sie, auf allen anderen Flächen benennt sie: „Woche 36“, „Aufgaben“, „Einkauf“. Darunter eine Nebenzeile mit Datum und dem, was zählt: „zwei Sachen offen, ein Vorschlag“.
- **Zeile:** Datum-Pille, Personenfilter, Spannen-Regler.

### Kopfzeile

Quelle: `packages/design-system/components/kopf/Kopfzeile.jsx`

Der Kopf jeder Fläche auf dem Mac und iPad – Suche links, drei Kreise rechts.

```jsx
<Kopfzeile bereiche={["Termine", "Fahrten", "Aufgaben", "Dokumente", { name: "Post", zaehler: 2 }]}
  onPlus={() => setMenue(true)} />
```

Die Reihenfolge der Kreise steht fest: Klingel, Nachrichten, Plus – Plus ist rosa und immer der letzte. Chips sind gestrichelt, weil sie Bereiche einschränken und nichts anlegen.

```ts
/**
 * Der Kopf jeder Flaeche: Suchfeld mit rosa Lupe, Bereichs-Chips, drei Kreise rechts.
 */
export interface KopfzeileProps {
  platzhalter?: string;
  /** Bereichs-Chips, gestrichelt: "Termine", "Fahrten", "Aufgaben", "Dokumente", { name: "Post", zaehler: 2 }. */
  bereiche?: Array<string | { name: string; zaehler?: number }>;
  gewaehlterBereich?: string;
  onBereich?: (name: string) => void;
  onSuche?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  /** Rosa Punkt an der Klingel, wenn etwas Neues da ist. */
  klingelPunkt?: boolean;
  onKlingel?: () => void;
  onNachrichten?: () => void;
  /** Oeffnet das Schnellmenue "Schnell anlegen". */
  onPlus?: () => void;
  style?: React.CSSProperties;
}
export function Kopfzeile(props: KopfzeileProps): JSX.Element;
```

## Die fünf Kartenarten

Aus Karten bestehen Heute, Woche und Kalender. Die Art sagt die Fläche, das Symbol die Sache, die Punkte die Menschen.

| Art | Fläche und Rand | Wofür |
|---|---|---|
| Termin | beige, Haarlinie | alles mit Zeit und Ort |
| Fahrt | blau | Fahrten mit Von → Nach |
| Familie | gelb | Rituale, gemeinsames Essen, Sonntagsrunde |
| Vorschlag | gestrichelt grau, ohne Füllung (Mac) · gelb mit Formen (iPhone) | Alberts Vorschlag, immer mit zwei Knöpfen |
| Offen | gestrichelt Offen-Rosa | etwas ohne Zuständigen, laut gezeigt |

### Karte

Quelle: `packages/design-system/components/karten/Karte.jsx`

Die Karte – das Ding, aus dem Heute, Woche und Kalender bestehen. Ein Datenmodell, viele Ansichten.

```jsx
<Karte art="fahrt" titel="Rückfahrt Auswärtsspiel" ort="Sportplatz Nord → Zuhause"
  zeit="14:00 – 14:30" leute={["felix"]} hoehe="hoch"
  pillen={<ZustandsPille>Kein Fahrer</ZustandsPille>}
  knoepfe={<Knopf>Ich fahre</Knopf>} />

<Karte art="vorschlag" titel="Bei Tobias steht ab 13:00 nichts. Fragen?"
  unterzeile="Vorschlag von Albert"
  knoepfe={<KarteVorschlagKnoepfe onUebernehmen={…} onZurueck={…} />} />
```

Register Family Manager, kurz und ruhig. Die Bedeutungen werden nicht getauscht: blau ist Fahrt, gelb ist Familie, gestrichelt rosa heisst "ohne Zuständigen". Ein Vorschlag hat immer zwei Knöpfe – Albert erledigt nie still.

```ts
/**
 * Die Karte in fuenf Arten. Die Farbe sagt die Art, das Symbol die Sache, die Punkte die Leute.
 */
export interface KarteProps {
  /** "termin" beige | "fahrt" blau | "familie" gelb | "vorschlag" gestrichelt grau | "offen" gestrichelt rosa. */
  art?: "termin" | "fahrt" | "familie" | "vorschlag" | "offen";
  /** Kartentitel, ein Gegenstand: "Rückfahrt Auswärtsspiel". */
  titel: string;
  /** Zweitzeile: Ort oder Bündel-Teile, mit " · " getrennt. */
  ort?: React.ReactNode;
  /** Zeitspanne als "16:00 – 17:00" (Halbgeviertstrich mit Leerzeichen). */
  zeit?: string;
  /** Wer dabei ist; der Zustaendige zuerst. */
  leute?: string[];
  /** Sach-Symbol, wenn es nicht aus der Art folgt: "schule", "sport", "arzt", "musik". */
  symbol?: string;
  /** "kurz" (78 px) oder "hoch" (132 px) - fuer das Stundenraster. */
  hoehe?: "kurz" | "hoch";
  /** Zustands- und Fahrt-Pillen. */
  pillen?: React.ReactNode;
  /** Handlungsknoepfe; bei Vorschlaegen immer zwei. */
  knoepfe?: React.ReactNode;
  /** Kleine Zeile unter dem Inhalt, z. B. "Vorschlag von Albert". */
  unterzeile?: React.ReactNode;
  /** Einzeiler fuer Listen: Symbol, Titel, Zeit, Punkt. */
  kompakt?: boolean;
  klickbar?: boolean;
  /** Leicht gekippt, wie ein liegender Klebezettel. */
  gekippt?: boolean;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Karte(props: KarteProps): JSX.Element;
export function KarteVorschlagKnoepfe(props: { uebernehmen?: string; zurueck?: string; onUebernehmen?: () => void; onZurueck?: () => void }): JSX.Element;
```

## Zustände sind Pflicht

Kein Screen ist fertig ohne seine Zustände: leer, lädt, Fehler, offline, rückgängig. Alle stehen im Kapitel [Zustände](/zustaende/). Fertig ist eine Ansicht erst mit allem hier:

- [ ] leerer Zustand
- [ ] Skelett statt Kreisel
- [ ] Tastatur und :focus-visible
- [ ] Handy und Tisch
- [ ] hell und dunkel als Token-Umschaltung
- [ ] optimistisches Update mit „Rückgängig“
- [ ] richtiges Register
- [ ] kein Hex-Wert
- [ ] Zielflächen 28/44/56

## Was es wo gibt

„Voll“ heißt: hier gehört es hin. „Reduziert“: vorhanden, bewusst knapper. „Lesen“: ansehen, nicht bearbeiten. Aus `docs/11-produkt.md` §10, gekürzt auf die Orte der App.

| Ort | Mac | iPad | iPhone | Watch |
|---|---|---|---|---|
| Heute | reduziert | voll | voll | reduziert |
| Woche (Wochenboard) | voll | reduziert | lesen | – |
| Eingang (Post, Scan) | voll | voll | reduziert, Scan voll | – |
| Essen und Einkauf | voll (Plan) | voll | voll (Liste im Laden) | Abstimmung |
| Aufgaben | voll | voll | reduziert, abhaken voll | abhaken |
| Fahrten | planen voll | reduziert | Abfahrt und Ankunft voll | Abfahrt und Ankunft |
| Schule | Stundenplan | reduziert | Schulmappe voll | Hausaufgabe diktieren |
| Freude (Feed, Anlässe, Album) | voll | voll | reduziert | – |
| Wichtiges (Safe, Tresor, Finanzen) | voll | reduziert | lesen | – |
| Sonntagsrunde | voll | voll | lesen | – |
| Haushalt und Rechte | voll | reduziert | lesen | – |

## Alle Screens von Familie Sonntag

Das sind die Screens, mit denen Website, App Store und diese Seite arbeiten. Jeder ist als PNG zum Herunterladen verlinkt.

![Anlass](https://brand.heyalbert.family/bilder/screens/Anlass.png)

*Anlass · mac · 2880 × 1800 px*

![Aufgaben](https://brand.heyalbert.family/bilder/screens/Aufgaben.png)

*Aufgaben · mac · 2880 × 1800 px*

![Eingang](https://brand.heyalbert.family/bilder/screens/Eingang.png)

*Eingang · iphone · 780 × 1688 px*

![Einkauf](https://brand.heyalbert.family/bilder/screens/Einkauf.png)

*Einkauf · iphone · 780 × 1688 px*

![Essensplan](https://brand.heyalbert.family/bilder/screens/Essensplan.png)

*Essensplan · iphone · 780 × 1688 px*

![FamilyFeed](https://brand.heyalbert.family/bilder/screens/FamilyFeed.png)

*FamilyFeed · iphone · 780 × 1688 px*

![FamilyFeedMac](https://brand.heyalbert.family/bilder/screens/FamilyFeedMac.png)

*FamilyFeedMac · mac · 2880 × 1800 px*

![Gewohnheiten](https://brand.heyalbert.family/bilder/screens/Gewohnheiten.png)

*Gewohnheiten · iphone · 780 × 1688 px*

![Haushalt](https://brand.heyalbert.family/bilder/screens/Haushalt.png)

*Haushalt · mac · 2880 × 1800 px*

![Jahresbuch](https://brand.heyalbert.family/bilder/screens/Jahresbuch.png)

*Jahresbuch · objekt · 2246 × 1588 px*

![LenaBereich](https://brand.heyalbert.family/bilder/screens/LenaBereich.png)

*LenaBereich · ipad · 1668 × 2388 px*

![Main](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![MomentTurnbeutel](https://brand.heyalbert.family/bilder/screens/MomentTurnbeutel.png)

*MomentTurnbeutel · iphone · 780 × 1688 px*

![MomentVersicherung](https://brand.heyalbert.family/bilder/screens/MomentVersicherung.png)

*MomentVersicherung · iphone · 780 × 1688 px*

![Rueckblick](https://brand.heyalbert.family/bilder/screens/Rueckblick.png)

*Rueckblick · ipad · 1668 × 2388 px*

![Safe](https://brand.heyalbert.family/bilder/screens/Safe.png)

*Safe · mac · 2880 × 1800 px*

![Schule](https://brand.heyalbert.family/bilder/screens/Schule.png)

*Schule · iphone · 780 × 1688 px*

![Sonntagsrunde](https://brand.heyalbert.family/bilder/screens/Sonntagsrunde.png)

*Sonntagsrunde · breitbild · 3840 × 2160 px*

![Taler](https://brand.heyalbert.family/bilder/screens/Taler.png)

*Taler · iphone · 780 × 1688 px*

![Ueberall](https://brand.heyalbert.family/bilder/screens/Ueberall.png)

*Ueberall · iphone · 780 × 1688 px*

![Watch](https://brand.heyalbert.family/bilder/screens/Watch.png)

*Watch · watch · 792 × 968 px*

![Wochenboard](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

![Anlass](https://brand.heyalbert.family/bilder/screens/Anlass.png)

*Anlass · mac · 2880 × 1800 px*

![Aufgaben](https://brand.heyalbert.family/bilder/screens/Aufgaben.png)

*Aufgaben · mac · 2880 × 1800 px*

![Eingang](https://brand.heyalbert.family/bilder/screens/Eingang.png)

*Eingang · iphone · 780 × 1688 px*

![Einkauf](https://brand.heyalbert.family/bilder/screens/Einkauf.png)

*Einkauf · iphone · 780 × 1688 px*

![Essensplan](https://brand.heyalbert.family/bilder/screens/Essensplan.png)

*Essensplan · iphone · 780 × 1688 px*

![FamilyFeed](https://brand.heyalbert.family/bilder/screens/FamilyFeed.png)

*FamilyFeed · iphone · 780 × 1688 px*

![FamilyFeedMac](https://brand.heyalbert.family/bilder/screens/FamilyFeedMac.png)

*FamilyFeedMac · mac · 2880 × 1800 px*

![Gewohnheiten](https://brand.heyalbert.family/bilder/screens/Gewohnheiten.png)

*Gewohnheiten · iphone · 780 × 1688 px*

![Haushalt](https://brand.heyalbert.family/bilder/screens/Haushalt.png)

*Haushalt · mac · 2880 × 1800 px*

![Jahresbuch](https://brand.heyalbert.family/bilder/screens/Jahresbuch.png)

*Jahresbuch · objekt · 2246 × 1588 px*

![LenaBereich](https://brand.heyalbert.family/bilder/screens/LenaBereich.png)

*LenaBereich · ipad · 1668 × 2388 px*

![Main](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![MomentTurnbeutel](https://brand.heyalbert.family/bilder/screens/MomentTurnbeutel.png)

*MomentTurnbeutel · iphone · 780 × 1688 px*

![MomentVersicherung](https://brand.heyalbert.family/bilder/screens/MomentVersicherung.png)

*MomentVersicherung · iphone · 780 × 1688 px*

![Rueckblick](https://brand.heyalbert.family/bilder/screens/Rueckblick.png)

*Rueckblick · ipad · 1668 × 2388 px*

![Safe](https://brand.heyalbert.family/bilder/screens/Safe.png)

*Safe · mac · 2880 × 1800 px*

![Schule](https://brand.heyalbert.family/bilder/screens/Schule.png)

*Schule · iphone · 780 × 1688 px*

![Sonntagsrunde](https://brand.heyalbert.family/bilder/screens/Sonntagsrunde.png)

*Sonntagsrunde · breitbild · 3840 × 2160 px*

![Taler](https://brand.heyalbert.family/bilder/screens/Taler.png)

*Taler · iphone · 780 × 1688 px*

![Ueberall](https://brand.heyalbert.family/bilder/screens/Ueberall.png)

*Ueberall · iphone · 780 × 1688 px*

![Watch](https://brand.heyalbert.family/bilder/screens/Watch.png)

*Watch · watch · 792 × 968 px*

![Wochenboard](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

![Anlass](https://brand.heyalbert.family/bilder/screens/Anlass.png)

*Anlass · mac · 2880 × 1800 px*

![Aufgaben](https://brand.heyalbert.family/bilder/screens/Aufgaben.png)

*Aufgaben · mac · 2880 × 1800 px*

![Eingang](https://brand.heyalbert.family/bilder/screens/Eingang.png)

*Eingang · iphone · 780 × 1688 px*

![Einkauf](https://brand.heyalbert.family/bilder/screens/Einkauf.png)

*Einkauf · iphone · 780 × 1688 px*

![Essensplan](https://brand.heyalbert.family/bilder/screens/Essensplan.png)

*Essensplan · iphone · 780 × 1688 px*

![FamilyFeed](https://brand.heyalbert.family/bilder/screens/FamilyFeed.png)

*FamilyFeed · iphone · 780 × 1688 px*

![FamilyFeedMac](https://brand.heyalbert.family/bilder/screens/FamilyFeedMac.png)

*FamilyFeedMac · mac · 2880 × 1800 px*

![Gewohnheiten](https://brand.heyalbert.family/bilder/screens/Gewohnheiten.png)

*Gewohnheiten · iphone · 780 × 1688 px*

![Haushalt](https://brand.heyalbert.family/bilder/screens/Haushalt.png)

*Haushalt · mac · 2880 × 1800 px*

![Jahresbuch](https://brand.heyalbert.family/bilder/screens/Jahresbuch.png)

*Jahresbuch · objekt · 2246 × 1588 px*

![LenaBereich](https://brand.heyalbert.family/bilder/screens/LenaBereich.png)

*LenaBereich · ipad · 1668 × 2388 px*

![Main](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![MomentTurnbeutel](https://brand.heyalbert.family/bilder/screens/MomentTurnbeutel.png)

*MomentTurnbeutel · iphone · 780 × 1688 px*

![MomentVersicherung](https://brand.heyalbert.family/bilder/screens/MomentVersicherung.png)

*MomentVersicherung · iphone · 780 × 1688 px*

![Rueckblick](https://brand.heyalbert.family/bilder/screens/Rueckblick.png)

*Rueckblick · ipad · 1668 × 2388 px*

![Safe](https://brand.heyalbert.family/bilder/screens/Safe.png)

*Safe · mac · 2880 × 1800 px*

![Schule](https://brand.heyalbert.family/bilder/screens/Schule.png)

*Schule · iphone · 780 × 1688 px*

![Sonntagsrunde](https://brand.heyalbert.family/bilder/screens/Sonntagsrunde.png)

*Sonntagsrunde · breitbild · 3840 × 2160 px*

![Taler](https://brand.heyalbert.family/bilder/screens/Taler.png)

*Taler · iphone · 780 × 1688 px*

![Ueberall](https://brand.heyalbert.family/bilder/screens/Ueberall.png)

*Ueberall · iphone · 780 × 1688 px*

![Watch](https://brand.heyalbert.family/bilder/screens/Watch.png)

*Watch · watch · 792 × 968 px*

![Wochenboard](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

![Watch](https://brand.heyalbert.family/bilder/screens/Watch.png)

*Watch · watch · 792 × 968 px*

![Sonntagsrunde](https://brand.heyalbert.family/bilder/screens/Sonntagsrunde.png)

*Sonntagsrunde · breitbild · 3840 × 2160 px*

![Jahresbuch](https://brand.heyalbert.family/bilder/screens/Jahresbuch.png)

*Jahresbuch · objekt · 2246 × 1588 px*

> **Wörter in den Screens**
>
> Einige Website-Screens (Eingang am iPhone, die Leiste am Mac) schreiben „Inbox“, das Bauteil `LeisteMac` und die Doku schreiben „Eingang“. Bis zur Entscheidung gilt in der App „Eingang“.


---

# iPhone

> Der Aufbau des Alltagsgeräts Region für Region – Heute, Woche als Liste, Wochenüberblick, Kinderbereich – mit Maßen in Punkten, Leiste, Zielflächen, Gesten und dem, was es am iPhone nicht gibt.

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

Das iPhone ist das Alltagsgerät. Es wird im Flur benutzt, im Laden, im Auto, mit einer Hand und oft in Eile. Ein Screen am iPhone hat darum eine Frage: Was ist jetzt dran? Alles Weitere liegt eine Ebene tiefer.

## Gerät und Maße

Alle Referenz-Screens und Website-Screens sind für **390 × 844 pt** gezeichnet (iPhone 14, 15 und 16 in der kleinen Größe, @2x als 780 × 1688 px abgelegt). Andere Größen ändern nur die Breite des Inhalts. Rand, Leiste, Kreise und Zielflächen bleiben gleich.

| Maß | Wert | Token |
|---|---|---|
| Rand der Fläche | 20 pt | `--flaeche-rand-phone` |
| Statusleiste, sichere Zone oben | 47 pt | vom System |
| Leiste | 64 pt hoch, 16 pt vom Rand | `--leiste-phone-hoehe`, `--radius-leiste` |
| Plus | 56 pt, tritt heraus | `--ziel-kind` |
| sichere Zone unten | 34 pt | vom System |
| Anrede | 30 pt | `--grad-anrede-phone` |
| Kartentitel, Text, Zweitzeile | 14,5 · 14 · 12 pt | `--grad-karten-titel`, `--grad-text`, `--grad-zweit` |
| Zielfläche | 44 pt, Kinder und Plus 56 pt | `--ziel-finger`, `--ziel-kind` |

> **Offen**
>
> Für größere Geräte (430 pt breit) und für das kleinste (375 pt) gibt es keine eigenen Referenz-Screens. Vorschlag: Rand und Maße bleiben, Karten werden breiter, der Wochenüberblick zeigt bei 375 pt nur Initialen ohne Zeichen.

## Heute

Heute ist die erste Fläche für Erwachsene. Sortiert nach Dringlichkeit, nicht nach Bereichen: was läuft, was als Nächstes kommt, was mitmuss, was offen ist. Vier bis sechs Blöcke. Kein Personenfilter, denn wer Heute öffnet, steht selbst im Flur.

**iPhone · Heute** · 390 × 844 pt · belegt

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Statusleiste, sichere Zone | 0, 0, 390, 47 | 47 pt, vom System |  |  | Gehört dem System. Hier steht nichts von uns, und wir zeichnen keine eigene Statusleiste nach. |
| 2 | Anrede und Nebenzeile | 20, 56, 350, 58 | Anrede 30 pt, Nebenzeile 12 pt, Rand 20 pt | --grad-anrede-phone, --grad-zweit, --flaeche-rand-phone | Anredezeile | „Guten Abend, Anna.“ in Bricolage 800, darunter Wochentag, Datum und Uhrzeit: „Freitag, 5. September · 18:12“. Punkt am Ende, nie ein Ausrufezeichen. |
| 3 | Tageskreise | 20, 126, 350, 46 | sieben Kreise je 44 pt | --ziel-finger, --schwarz, --rosa-hell, --sonntag | Tagesreiter | Mo bis So als Kreise. Heute ist schwarz, der Sonntag gedämpftes Rosa-Grau. Ein rosa Kreis heißt: an diesem Tag ist etwas offen. Antippen wechselt den Tag. |
| 4 | Abschnittsmarke | 20, 184, 350, 18 | 10 pt Kapitälchen | --grad-kapitaelchen, --laufweite-kapitaelchen, --text-zweit |  | „Heute noch“. Gliedert nach Dringlichkeit, nicht nach Modulen. |
| 5 | Karten nach Dringlichkeit | 20, 212, 350, 366 | volle Breite 350 pt, Polster 12 pt | --karte-innen, --karte-abstand, --radius-karte, --bedeutung-fahrt, --bedeutung-familie | Karte, VorschlagKarte, BuendelKarte | Was läuft, was als Nächstes kommt, was mitmuss, was offen ist. Vier bis sechs Blöcke, nicht mehr. Fahrten blau, Familie gelb, Termine beige. Ein Vorschlag von Albert steht als gelbe VorschlagKarte dort, wo er dringlich ist. Kein Personenfilter: wer Heute öffnet, steht selbst im Flur. |
| 6 | Toast mit Rückgängig | 16, 671, 358, 59 | über der Leiste, Knopf 44 pt | --schwarz, --akzent, --ziel-finger | Toast | Erscheint nach jeder Änderung: „Oma Grete hat die Fahrt übernommen.“ und daneben „Rückgängig“. Er verdeckt nie die Leiste. |
| 7 | Leiste, fixiert | 16, 752, 358, 64 | 64 pt hoch, 16 pt Rand | --leiste-phone-hoehe, --radius-leiste, --flaeche-leiste, --ziel-finger | LeistePhone | Schwarz, fünf Plätze: Heute · Woche · Plus · Eingang · Ich. Der aktive Ort ist rosa unterstrichen, der Eingang trägt seinen Zähler. Jeder Platz ist 44 pt groß. Die Leiste bleibt beim Scrollen stehen. |
| 8 | Plus, tritt heraus | 167, 739, 56, 56 | 56 pt Kreis | --ziel-kind, --akzent | LeistePhone, SchnellMenue | Das einzige, was aus der Leiste heraussteht. Rosa, 56 pt, weil auch Kinder es drücken. Öffnet das Schnellmenü: Termin, Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz. |
| 9 | Home-Indikator, sichere Zone | 0, 818, 390, 26 | 34 pt sichere Zone, die Leiste ragt hinein |  |  | Gehört dem System. Keine Bedienelemente unterhalb der Leiste. |

## Woche als Liste

Am iPhone ist ein Raster über sieben Tage zu dicht. Die Woche läuft darum als Liste: ein Tag je Zeile, aufklappbar, mit dem Vorschlag von Albert oben, wenn etwas fehlt.

**iPhone · Woche als Liste** · 390 × 844 pt · belegt

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Statusleiste, sichere Zone | 0, 0, 390, 47 | 47 pt, vom System |  |  | Gehört dem System. Hier steht nichts von uns, und wir zeichnen keine eigene Statusleiste nach. |
| 2 | Titel und Spanne | 20, 60, 300, 58 |  | --grad-anrede-phone, --grad-zweit | Anredezeile | „Woche 36“, darunter „1. – 7. September“. Die Anrede benennt hier nur, sie grüßt nicht. |
| 3 | Eigener Kreis | 334, 62, 36, 36 |  | --person-1 | Avatar | Der eigene Klebezettel mit Initiale. Führt zu „Ich“. |
| 4 | Spannen-Regler | 20, 133, 300, 30 |  | --radius-pille, --knopf-zweit, --schwarz | SpannenRegler | Heute · 3 Tage · Mo – Fr · Mo – So · Monat, immer in dieser Reihenfolge. Dieselben Daten, andere Weite. |
| 5 | Personenfilter | 20, 175, 280, 44 | Kreise 44 pt | --ziel-finger, --person-1, --person-2, --person-3, --person-4, --person-5 | PersonenFilter | Erster Kreis schwarz mit zwei Köpfen: alle. Dann je Mensch ein Kreis mit Initiale. Gewählte Kreise tragen einen dunklen Ring. |
| 6 | Alberts Vorschlag | 20, 231, 350, 140 |  | --bedeutung-familie, --text-auf-gelb, --gelb-dunkel | VorschlagKarte | Gelb, mit Formen, immer zwei Knöpfe. „Samstag fehlt ein Fahrer.“ und „Tobias fragen“. Darunter klein: „Vorschlag von Albert“. |
| 7 | Listenzeilen je Tag | 20, 384, 350, 168 |  | --hell, --linie-haar, --schwarz | Listenzeile, Karte | Ein Tag je Zeile. Vergangene Tage klappen zusammen. Der Text sagt, wer den Tag trägt: „heute · Anna und Felix“, rechts die Stunden „3,0 h“. Aufgeklappt stehen kompakte Karten darin. |
| 8 | Leiste, fixiert | 16, 752, 358, 64 | 64 pt hoch, 16 pt Rand | --leiste-phone-hoehe, --radius-leiste, --flaeche-leiste, --ziel-finger | LeistePhone | Schwarz, fünf Plätze: Heute · Woche · Plus · Eingang · Ich. Der aktive Ort ist rosa unterstrichen, der Eingang trägt seinen Zähler. Jeder Platz ist 44 pt groß. Die Leiste bleibt beim Scrollen stehen. |
| 9 | Plus, tritt heraus | 167, 739, 56, 56 | 56 pt Kreis | --ziel-kind, --akzent | LeistePhone, SchnellMenue | Das einzige, was aus der Leiste heraussteht. Rosa, 56 pt, weil auch Kinder es drücken. Öffnet das Schnellmenü: Termin, Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz. |
| 10 | Home-Indikator, sichere Zone | 0, 818, 390, 26 | 34 pt sichere Zone, die Leiste ragt hinein |  |  | Gehört dem System. Keine Bedienelemente unterhalb der Leiste. |

## Wochenüberblick

Der Blick im Vorbeigehen. Er beantwortet eine Frage: Wer trägt welchen Tag, und wo fehlt jemand?

**iPhone · Wochenüberblick** · 390 × 844 pt · belegt

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Statusleiste, sichere Zone | 0, 0, 390, 47 | 47 pt, vom System |  |  | Gehört dem System. Hier steht nichts von uns, und wir zeichnen keine eigene Statusleiste nach. |
| 2 | Titel | 20, 60, 300, 58 |  | --grad-anrede-phone | Anredezeile | „Woche 36“, darunter „1. – 7. September · heute Mittwoch“. |
| 3 | Zahl-Kacheln | 20, 134, 350, 96 | drei Kacheln, Zahl 34 pt | --grad-zahl-gross, --gelb, --rosa, --blau | ZahlKachel | „8,7 h heute verplant“, „2 Fahrten heute“, „1 offen diese Woche“. Große Zahl in Bricolage 800 auf farbiger Fläche. |
| 4 | Punktfeld der Woche | 20, 242, 350, 182 |  | --hell, --rand-offen | Wochenueberblick, Tagesreiter | Sieben Spalten, ein Punkt je Sache, die Initiale sagt wer. Offenes ist ein gestrichelter Punkt. Beantwortet: Wer trägt welchen Tag, und wo fehlt jemand? |
| 5 | Karten mit Handlung | 20, 435, 350, 235 |  | --bedeutung-fahrt, --bedeutung-familie | Karte, ZustandsPille, Knopf | Was eine Antwort braucht: die Rückfahrt ohne Fahrer mit „Ich fahre“, darunter die Sonntagsrunde. |
| 6 | Leiste, fixiert | 16, 752, 358, 64 | 64 pt hoch, 16 pt Rand | --leiste-phone-hoehe, --radius-leiste, --flaeche-leiste, --ziel-finger | LeistePhone | Schwarz, fünf Plätze: Heute · Woche · Plus · Eingang · Ich. Der aktive Ort ist rosa unterstrichen, der Eingang trägt seinen Zähler. Jeder Platz ist 44 pt groß. Die Leiste bleibt beim Scrollen stehen. |
| 7 | Plus, tritt heraus | 167, 739, 56, 56 | 56 pt Kreis | --ziel-kind, --akzent | LeistePhone, SchnellMenue | Das einzige, was aus der Leiste heraussteht. Rosa, 56 pt, weil auch Kinder es drücken. Öffnet das Schnellmenü: Termin, Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz. |
| 8 | Home-Indikator, sichere Zone | 0, 818, 390, 26 | 34 pt sichere Zone, die Leiste ragt hinein |  |  | Gehört dem System. Keine Bedienelemente unterhalb der Leiste. |

Den Tag im Stundenraster gibt es am iPhone auch, mit Tageskreisen, Personenfilter, Zeitachse und Jetzt-Linie (Referenz-Screen `iphone-a2-tag.png`). Er folgt denselben Regionen wie Heute, mit dem Personenfilter unter den Tageskreisen.

## Kinderbereich

Kinder haben einen eigenen Einstieg, keine gekürzte Erwachsenenansicht. Zielflächen 56 pt, Register Vorleser, kurze Sätze, große Wörter. Das Kind sieht immer, wer mitschaut.

**iPhone · Kinderbereich (Taler)** · 390 × 844 pt · belegt

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Statusleiste, sichere Zone | 0, 0, 390, 47 | 47 pt, vom System |  |  | Gehört dem System. Hier steht nichts von uns, und wir zeichnen keine eigene Statusleiste nach. |
| 2 | Eigener Kreis und Mitschauen | 20, 60, 350, 44 | Kreis 44 pt | --person-4, --ziel-finger | Avatar | Links Lenas Kreis. Rechts, wenn ein Erwachsener zuschaut: „Mama schaut mit“. Das Kind weiß immer, wer mitsieht. |
| 3 | Anrede | 20, 118, 350, 52 |  | --grad-anrede-phone | Anredezeile | „Deine Taler“, darunter „Montag, 1. September · Werte setzen Mama und Papa“. Register Vorleser: kurz, große Wörter. |
| 4 | Taler-Stand | 20, 186, 350, 56 |  | --gelb, --grad-zahl-gross | TalerStand | „14 Taler“ und „diese Woche +3“ mit dem, was geschafft ist. Nie ein Abzug, nie ein Vergleich mit Felix. |
| 5 | Wünsche und Sparziele | 20, 255, 350, 203 |  | --hell, --linie-haar | Karte | „Zoo mit Oma Grete“ gemeinsam mit Felix, „Skateboard“ für Lena allein. Der Stand zeigt das Ziel, nie, wie viel jemand aufholen muss. |
| 6 | Regal der Eltern | 20, 472, 350, 75 |  | --radius-pille |  | Was es zu tauschen gibt: Kino 20, Eis 4, Taschengeld 10 Taler = 5,00 €. Die Werte legen die Eltern fest. |
| 7 | Offene Pflicht | 20, 561, 350, 73 |  | --ziel-kind | Knopf | „Müll rausbringen · Donnerstag 18:00 · noch frei“ mit „Übernehmen“. Das Kind nimmt sich selbst etwas. |
| 8 | Zwei Knöpfe in Kindgröße | 20, 649, 350, 56 | 56 pt hoch | --ziel-kind, --knopf-primaer-flaeche, --knopf-zweit-flaeche | Knopfreihe, Knopf | „Einlösen“ und „Wunsch vorschlagen“. Zwei echte Knöpfe, die an Menschen gehen: Einlösen bestätigen Mama oder Papa. |
| 9 | Leiste, fixiert | 16, 752, 358, 64 | 64 pt hoch, 16 pt Rand | --leiste-phone-hoehe, --radius-leiste, --flaeche-leiste, --ziel-finger | LeistePhone | Schwarz, fünf Plätze: Heute · Woche · Plus · Eingang · Ich. Der aktive Ort ist rosa unterstrichen, der Eingang trägt seinen Zähler. Jeder Platz ist 44 pt groß. Die Leiste bleibt beim Scrollen stehen. |
| 10 | Plus, tritt heraus | 167, 739, 56, 56 | 56 pt Kreis | --ziel-kind, --akzent | LeistePhone, SchnellMenue | Das einzige, was aus der Leiste heraussteht. Rosa, 56 pt, weil auch Kinder es drücken. Öffnet das Schnellmenü: Termin, Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz. |
| 11 | Home-Indikator, sichere Zone | 0, 818, 390, 26 | 34 pt sichere Zone, die Leiste ragt hinein |  |  | Gehört dem System. Keine Bedienelemente unterhalb der Leiste. |

> **Offen**
>
> Matrix III in `docs/11-produkt.md` gibt kleinen Kindern (6–9) am iPhone nur „was ist jetzt, zwei Dinge“. Der Screen „Taler“ zeigt Lena (9) mit Wünschen, Regal und offener Pflicht – deutlich mehr. Entweder gehört der Taler-Screen in die mittlere Stufe, oder die Matrix bekommt für Taler eine Ausnahme. Im Screen „Taler“ verdeckt außerdem das Plus den Hinweis unten, und „Wunsch vorschlagen“ läuft über den Knopf hinaus. Beides ist vor dem App Store zu beheben.

## Die Leiste

### LeistePhone

Quelle: `packages/design-system/components/leiste/LeistePhone.jsx`

Die Leiste am unteren Rand des iPhones – fünf Plätze, nur das Plus tritt heraus.

```jsx
<LeistePhone aktiverOrt="Woche" onWahl={setOrt} onPlus={schnellAnlegen} />
```

Der aktive Ort ist rosa unterstrichen, der Eingang trägt seinen rosa Zaehler. Zielfläche 44 px, das Plus 56 px – es wird auch von Kindern gedrückt.

```ts
/**
 * Die schwarze Leiste unten am iPhone: Heute, Woche, Plus, Eingang, Ich.
 */
export interface LeistePhoneProps {
  aktiverOrt?: string;
  plaetze?: Array<{ name: string; zeichen: string; zaehler?: number; plus?: boolean }>;
  onWahl?: (ort: string) => void;
  onPlus?: () => void;
  style?: React.CSSProperties;
}
export function LeistePhone(props: LeistePhoneProps): JSX.Element;
export const PLAETZE: Array<{ name: string; zeichen: string; zaehler?: number; plus?: boolean }>;
```

Die Leiste bleibt beim Scrollen stehen und wird nie durchsichtig. Ein Toast steht über ihr, nie auf ihr. Der Zähler am Eingang zählt nur, was eine Entscheidung braucht.

## Gesten und Bedienung

- **Tippen** auf eine Karte öffnet sie. Vorschlag, nicht belegt: als Blatt von unten, mit Griff oben, nach unten zu schließen.
- **Tippen auf einen Tageskreis** wechselt den Tag. Wischen zwischen Tagen ist Vorschlag, nicht belegt.
- **Abhaken** ist ein Tipp auf den Kreis links, 44 pt, bei Kindern 56 pt. Abgehaktes wird durchgestrichen und bleibt stehen, bis der Tag vorbei ist.
- **Jede Änderung** ist sofort sichtbar und meldet sich mit einem Toast und „Rückgängig“.
- **Plus** öffnet das Schnellmenü: Termin, Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz.
- **Spracheingabe** für Hausaufgaben und Termine läuft auf dem Gerät.

Kein Wischen zum Löschen ohne Rückweg. Was nicht rücknehmbar ist, wird vorher gefragt.

## Rollen am iPhone

| Rolle | Erste Seite | Was fehlt |
|---|---|---|
| Anna, Tobias | Heute nach Dringlichkeit | – |
| Felix (mittel) | Schulmappe, Nimm-mit, Fahrt fragen | Safe, Tresor, Finanzen, fremde Vorsätze |
| Lena (klein) | was ist jetzt, zwei Dinge | Uhrzeiten nur, wo sie lesen kann; alles Verschlossene |
| Oma Grete (Gast) | drei Karten: eingeladene Termine, Album, „Ich kann fahren“ | Leiste, Menü, Einstellungen; Schrift eine Stufe größer, Zielflächen 56 pt |
| Sofia (Au-pair) | ihre Liste: Schichten heute, ihre Fahrten, Einkauf | Termine der Eltern, Finanzen, Dokumente, fremde Aufgaben |

> **Offen**
>
> Für Gäste und Au-pair gibt es noch keinen Screen. Ob sie die Leiste sehen, ist nicht entschieden. Vorschlag aus Matrix III: Gäste ohne Leiste, Sofia mit Leiste, aber nur Heute und Ich.

## Alle Flächen am iPhone

![Heute: Guten Abend, Anna. Turnier Handball, Rückfahrt mit Oma Grete, Nudeln mit Soße, darüber ein Toast mit Rückgängig](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![Woche: Videoanruf mit Sofia in São Paulo mit zwei Uhrzeiten, Tanken in Zürich in CHF und Euro](https://brand.heyalbert.family/bilder/screens/Ueberall.png)

*Ueberall · iphone · 780 × 1688 px*

![Eingang: zwei gescannte Seiten, Elternbrief Klassenfahrt als Vorschlag mit Absender, Betrag, Frist und Ablage](https://brand.heyalbert.family/bilder/screens/Eingang.png)

*Eingang · iphone · 780 × 1688 px*

![Essen: Plan Montag bis Sonntag, Samstag noch ohne Koch, Albert schlägt Tobias vor](https://brand.heyalbert.family/bilder/screens/Essensplan.png)

*Essensplan · iphone · 780 × 1688 px*

![Einkauf nach Regalen sortiert, neun Dinge fehlen noch](https://brand.heyalbert.family/bilder/screens/Einkauf.png)

*Einkauf · iphone · 780 × 1688 px*

![Felix’ Mappe mit drei Hausaufgaben und einem Lernfenster als Vorschlag](https://brand.heyalbert.family/bilder/screens/Schule.png)

*Schule · iphone · 780 × 1688 px*

![Fristen: Kfz-Versicherung mit Kündigungsentwurf, Kinderausweis Lena, Zahnzusatz Felix](https://brand.heyalbert.family/bilder/screens/MomentVersicherung.png)

*MomentVersicherung · iphone · 780 × 1688 px*

![Vorsätze von Tobias, Lena und Oma Grete mit Haken je Tag](https://brand.heyalbert.family/bilder/screens/Gewohnheiten.png)

*Gewohnheiten · iphone · 780 × 1688 px*

![Family Feed mit Foto vom See und Kommentar von Oma Grete](https://brand.heyalbert.family/bilder/screens/FamilyFeed.png)

*FamilyFeed · iphone · 780 × 1688 px*

![Lena hat ihre Nimm-mit-Liste für Schwimmen abgehakt, unten Angekommen und Fahrt fragen](https://brand.heyalbert.family/bilder/screens/MomentTurnbeutel.png)

*MomentTurnbeutel · iphone · 780 × 1688 px*

![Lenas Taler: 14 Taler, Wünsche, Regal der Eltern, offene Pflicht](https://brand.heyalbert.family/bilder/screens/Taler.png)

*Taler · iphone · 780 × 1688 px*

## Was es am iPhone nicht gibt

- Das Wochenboard über sieben Tage als Raster. Am iPhone ist die Woche Liste oder Überblick.
- Safe, Tresor und Finanzen zum Bearbeiten. Lesen ja, Fristen ja, bearbeiten am Mac.
- Mail-Regeln, Rollen und Rechte, Stundenplan pflegen.
- Eine Seitenleiste oder ein Hamburger-Menü.
- Eine nachgezeichnete Statusleiste in Entwürfen. Der Rahmen in `ui_kits/iphone/PhoneRahmen.jsx` lässt sie absichtlich weg.


---

# iPad

> Das Familien- und Kindergerät – Lenas Raum (belegt), die Ansicht für Erwachsene quer und hochkant und der Wandmodus in der Küche (Vorschläge), mit Maßen in Punkten.

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

Das iPad ist das Gerät, das liegen bleibt. In der Küche, am Esstisch, im Kinderzimmer. Es gehört selten einem Menschen allein. Darum hat es mehr Einstiege als jedes andere Gerät: Lenas Raum, Felix’ Raum, die Ansicht der Eltern und die Wand in der Küche.

> **Offen**
>
> Das Designsystem hat für das iPad keine Vorlage. Belegt sind zwei Screens (Lenas Raum und der Monatsrückblick) und die Aussagen in `docs/11-produkt.md`, `docs/12-roadmap.md` und `docs/52-hq-app.md`. Alles andere in diesem Kapitel ist ein Vorschlag aus den belegten Mustern von Mac und iPhone und steht so gekennzeichnet. Es braucht eine Abnahme durch den Gründer und einen Test mit Kindern.

## Gerät und Maße

Die Website-Screens sind für **834 × 1194 pt** gezeichnet (iPad Air und iPad Pro 11 Zoll, @2x als 1668 × 2388 px abgelegt). Quer sind es 1194 × 834 pt. Diese Seite nimmt diese Größe, weil die belegten Screens sie haben.

> **Offen**
>
> `docs/12-roadmap.md` nennt für die Entwürfe 1024 × 768 pt im Split View. Das ist das ältere 9,7-Zoll-Maß. Vorschlag: 834 × 1194 als Referenz, 1024 × 768 als kleinste Größe, die noch funktionieren muss.

| Maß | Wert | Token |
|---|---|---|
| Rand der Fläche | 32 pt | `--flaeche-rand-mac` |
| Statusleiste | 24 pt | vom System |
| Leiste quer | 220 pt, eingeklappt 72 pt (Vorschlag) | `--leiste-mac`, `--leiste-mac-eng` |
| Anrede | 40 pt | `--grad-anrede-mac` |
| Zielfläche Erwachsene | 44 pt | `--ziel-finger` |
| Zielfläche Kinder, Wand | 56 pt | `--ziel-kind` |

Kreise im Kopf und Orte in der Leiste wachsen am iPad von 40 und 42 auf 44 pt, weil Finger bedienen und kein Zeiger.

## Lenas Raum

Der Raum eines Kindes ist ein eigener Einstieg, keine Erwachsenenansicht mit weniger Knöpfen. Lena gestaltet ihn selbst, innerhalb der Kontrast-Leitplanken. Er zeigt ihren Tag als Pfad, ihren Stand und ihre Woche. Zwei echte Knöpfe gehen an Menschen.

**iPad hochkant · Lenas Raum** · 834 × 1194 pt · belegt

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Statusleiste | 0, 0, 834, 24 | 24 pt, vom System |  |  | Gehört dem System. |
| 2 | Kopfkarte in Lenas Farbe | 32, 36, 770, 185 | Rand 32 pt, Radius 24 pt | --person-4, --flaeche-rand-mac, --grad-anrede-mac | Avatar, Anredezeile, DekoForm | „Hallo Lena.“ auf ihrem eigenen Pfirsich, mit Herz als spielerischer Form. Rechts oben „Mama schaut mit“, wenn jemand zusieht. Die Fläche gestaltet Lena selbst, innerhalb der Kontrast-Leitplanken. |
| 3 | Dein Tag als Pfad | 32, 252, 446, 350 | Kreise 56 pt, Zeiten rechts | --ziel-kind, --schwarz, --rosa | SachSymbol | Vier Stationen untereinander, verbunden durch eine Linie: Schwimmzeug gepackt (abgehakt), Schwimmen 16:00, Tisch decken 18:15, „Wie war dein Tag?“ 19:30. Der nächste Schritt ist rosa. |
| 4 | Zwei Knöpfe | 32, 634, 446, 56 | 56 pt hoch | --ziel-kind | Knopfreihe, Knopf | „Essenswunsch“ und „Fahrt fragen“. Beide gehen an Menschen, nicht an ein System. |
| 5 | Dein Stand | 502, 245, 300, 448 |  | --gelb, --grad-zahl-gross | TalerStand | 14 Taler, Sparziel Skateboard, „Das hast du geschafft“ als Haken-Pillen, Regal der Eltern. Darunter: „Deinen Stand siehst nur du. Niemand vergleicht.“ |
| 6 | Deine Woche | 32, 799, 770, 120 |  | --schwarz, --gelb, --blau, --hell | Tagesreiter | Sieben Kacheln Mo bis So mit dem Wichtigsten je Tag. Heute schwarz, Familientage gelb, Fahrtage blau. Bei Kindern bis neun ohne Uhrzeiten (Matrix III), hier mit Zeiten, weil Lena sie lesen kann. |

Was im Kinderraum gilt:

- Kein Erledigungsgrad, keine Rangliste, kein Vergleich mit Felix. „Deinen Stand siehst nur du. Niemand vergleicht.“
- Zielflächen 56 pt, Register Vorleser.
- Rechts oben steht, wer mitschaut: „Mama schaut mit“.
- Für Kinder von sechs bis neun: drei Bildkacheln, keine Uhrzeiten (Matrix III). Für zehn bis zwölf: Tagespfad, zwei Knöpfe, eigene Farben.

> **Offen**
>
> Der Screen zeigt keine Leiste und keinen Rückweg. Auf einem geteilten iPad braucht es den Personenumschalter mit Face ID oder PIN (`docs/12-roadmap.md`, Phase 1). Wo er sitzt, ist nicht entschieden. Vorschlag: Lenas Kreis oben links öffnet ihn.

## Erwachsene, quer

Für Anna und Tobias ist das iPad ein großes iPhone in der Bedienung und ein kleiner Mac im Aufbau. Einstieg ist das Familien-Portal als Kachelwand. Das Wochenboard läuft reduziert.

**iPad quer · Erwachsene** · 1194 × 834 pt · Vorschlag, nicht abgenommen

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Statusleiste | 0, 0, 1194, 24 | 24 pt |  |  | Gehört dem System. |
| 2 | Leiste wie am Mac | 24, 32, 220, 778 | 220 pt, einklappbar auf 72 pt | --leiste-mac, --leiste-mac-eng, --radius-block, --flaeche-leiste | LeisteMac | Dieselben Gruppen wie am Mac: Flächen, Bereiche, Persönlich. Orte 44 pt hoch statt 42, weil hier Finger bedienen. |
| 3 | Kopf der Fläche | 276, 40, 886, 46 |  | --flaeche-erhoben, --akzent, --ziel-finger | Kopfzeile, SchnellMenue | Suchpille mit rosa Lupe, Bereichs-Chips, drei Kreise: Klingel, Nachrichten, rosa Plus zuletzt. Kreise 44 pt statt 40. |
| 4 | Anrede | 276, 110, 600, 44 |  | --grad-anrede-mac | Anredezeile | „Guten Morgen, Anna.“ |
| 5 | Datum, Personen, Spanne | 276, 166, 886, 44 |  | --ziel-finger | DatumPille, PersonenFilter, SpannenRegler | Wie am Mac in einer Zeile, Spanne rechts. Auf dem iPad endet die Spanne bei Mo – Fr, wenn die Breite für sieben Spalten nicht reicht. |
| 6 | Portal oder Woche | 276, 226, 886, 576 |  | --karte-innen, --karte-abstand, --radius-karte | Karte, ZahlKachel, Zeitachse, Tagesreiter | Einstieg ist die Portal-Kachelwand (Matrix III). Das Wochenboard läuft hier reduziert: fünf Tage, Karten kompakt. |

## Erwachsene, hochkant

**iPad hochkant · Erwachsene** · 834 × 1194 pt · Vorschlag, nicht abgenommen

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Statusleiste | 0, 0, 834, 24 |  |  |  | Gehört dem System. |
| 2 | Leiste eingeklappt | 16, 32, 72, 1138 | 72 pt | --leiste-mac-eng, --radius-block | LeisteMac | Hochkant ist für 220 pt kein Platz. Die Leiste steht eingeklappt, nur Zeichen, der Eingang mit Zähler. Ausklappen legt sie über den Inhalt, mit Schleier. |
| 3 | Kopf der Fläche | 120, 40, 682, 46 |  | --ziel-finger | Kopfzeile | Wie quer. Bereichs-Chips wandern unter die Suche, wenn die Zeile zu schmal wird. |
| 4 | Anrede | 120, 110, 682, 44 |  | --grad-anrede-mac | Anredezeile | „Guten Morgen, Anna.“ |
| 5 | Datum und Personen | 120, 166, 682, 44 |  |  | DatumPille, PersonenFilter | Die Spanne steht auf „3 Tage“ als Vorgabe. |
| 6 | Inhalt | 120, 226, 682, 936 |  |  | Karte, SpurenJeMensch, Listenzeile | Zwei Spalten Kacheln oder drei Tage im Raster. Ab hier gelten die Muster des iPhones, nur breiter. |

## Die Wand in der Küche

Das iPad an der Küchenwand wird nicht bedient, es wird gesehen. Im Vorbeigehen, beim Kaffeekochen, wenn ein Kind fragt: „Wann muss ich los?“ Es ist der Zettel am Kühlschrank und muss aus zwei Metern lesbar sein.

**iPad an der Küchenwand · Wandmodus** · 1194 × 834 pt · Vorschlag, nicht abgenommen

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Uhrzeit und Tag, groß | 32, 32, 1130, 72 |  | --schrift-titel, --ziffern-tabellarisch | Anredezeile | „Mittwoch, 3. September · 16:40“. Aus zwei Metern lesbar. Kein Gruß an eine Person, das Gerät gehört allen. |
| 2 | Wer ist heute wo | 32, 128, 740, 560 |  | --linie-jetzt, --person-1, --person-3, --person-4 | SpurenJeMensch, JetztLinie | Eine Spur je Mensch mit Name und Kreis. Die Jetzt-Linie wandert von selbst. |
| 3 | Essen heute | 796, 128, 366, 170 |  | --bedeutung-familie | Karte | „Pfannkuchen · Lenas Wunsch · Tobias kocht“. |
| 4 | Wer fährt | 796, 314, 366, 170 |  | --bedeutung-fahrt | Karte, FahrtPille | Die nächste Fahrt mit Fahrerin: „Handball abholen 19:00 · Anna“. |
| 5 | Offen | 796, 500, 366, 188 |  | --rand-offen | Karte | Was keinen Zuständigen hat, gestrichelt in Offen-Rosa. Antippen führt eine Ebene tiefer: abhaken, Essenswunsch, Abstimmung. |
| 6 | Hinweis zum Antippen | 32, 712, 1130, 90 |  | --ziel-kind |  | Zielflächen 56 pt, nachts gedimmt. Keine privaten Inhalte: Safe, Tresor, Finanzen und fremde Vorsätze werden gar nicht geladen, weil auch der Handwerker die Wand sieht. |

Was im Wandmodus gilt (`docs/11-produkt.md` §7):

- Große Schrift, kein Abmelden nach Zeit, keine Anmeldeaufforderung.
- Nachts gedimmt.
- **Keine privaten Inhalte.** Safe, Tresor, Finanzen und fremde Vorsätze werden nicht ausgeblendet, sondern gar nicht geladen. Was an der Wand hängt, sieht auch der Handwerker.
- Wer stehen bleibt und tippt, kommt eine Ebene tiefer: abhaken, Essenswunsch, Abstimmung.

## Gesten und Bedienung

- Alles, was am iPhone gilt, gilt hier auch: Tippen, Abhaken, Toast mit „Rückgängig“.
- Auf Heute wechseln die drei Linsen Verlauf, Tafel und Haushalt durch Wischen (`docs/11-produkt.md` §5b, am Mac ⌘1–3).
- Eine Tastatur am iPad bekommt dieselben Kürzel wie der Mac. Vorschlag, nicht belegt.
- Die Sonntagsrunde läuft vom iPad per AirPlay auf den Fernseher.

## Rollen am iPad

| Rolle | Einstieg |
|---|---|
| Anna, Tobias | Portal-Kachelwand, in der Küche der Wandmodus |
| Lena (klein) | ihr Raum: drei Bildkacheln, keine Uhrzeiten, 56 pt |
| Felix (mittel) | sein Raum: Tagespfad, zwei Knöpfe, eigene Farben |
| Großeltern (Gast) | Album, groß, zum Durchblättern |
| Sofia (Au-pair) | Küche und Essensplan, wenn freigegeben |

## Alle Flächen am iPad

![Lenas Raum auf dem iPad: Hallo Lena, Tagespfad mit Schwimmen und Tisch decken, ihr Taler-Stand, ihre Woche](https://brand.heyalbert.family/bilder/screens/LenaBereich.png)

*LenaBereich · ipad · 1668 × 2388 px*

![Monatsrückblick September aus dem Family Feed: Beiträge von Anna, Lena, Felix und Opa Werner, der Monat in Zahlen](https://brand.heyalbert.family/bilder/screens/Rueckblick.png)

*Rueckblick · ipad · 1668 × 2388 px*

## Was es am iPad nicht gibt

- Mail-Regeln und der Druck des Jahresbuchs. Beides am Mac.
- Die Verantwortungsmatrix zum Bearbeiten. Lesen ja.
- Im Wandmodus: alles Verschlossene, alles Private, jede Anmeldung.
- Im Kinderraum: Safe, Tresor, Finanzen, fremde Vorsätze, Fairness-Zahlen.


---

# Mac und Browser

> Die Planungsmaschine – Woche im Stundenraster, Leiste aus- und eingeklappt, Bereiche mit Liste und Seitenspalte. Gilt für eine Mac-App und für die Web-App im Browser, mit Maßen in Punkten und Tastenkürzeln.

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

Am Mac setzt man sich hin. Hier ist Dichte erlaubt: die ganze Woche auf einmal, Tabellen, Spalten, Tastatur. Der Mac ist der einzige Ort, an dem Safe, Tresor und Finanzen ganz aufgehen.

## Mac-App und Web-App

Es gibt zwei Wege auf einen großen Bildschirm, und beide haben **denselben Aufbau**:

- **Die Mac-App** aus `apps/apple` (SwiftUI, ein Ziel neben iPhone und iPad). Nur sie kann, was nativ geht: Face ID für den Tresor, Secure Enclave, Mitteilungen, Kurzbefehle.
- **Die Web-App** unter app.hey-albert.app (Next.js, `apps/web`) für jeden Browser, auch auf Rechnern ohne App Store. Die Web-App ist die Fläche für Planung und Papierkram. Der Tresor ist hier nicht, denn der Browser hat keine Secure Enclave.

Leiste, Kopf, Anrede, Raster und Karten sind dieselben Bauteile. Wer eine Fläche für den Mac entwirft, entwirft sie für beide.

> **Offen**
>
> Die Mac-App gibt es noch nicht im Repository. Die App zieht in Phase 0 aus dem Vorgänger nach `apps/apple` (`docs/12-roadmap.md`). Die Web-App zeigt heute die Fläche „Heute“ und das HQ.

## Fenster und Maße

Die Referenz-Screens sind für ein Fenster von **1440 × 900 pt** gezeichnet. `docs/12-roadmap.md` nennt dazu 1600 × 1000 pt. Das Fenster ist frei größenveränderbar. Unter 1200 pt Breite klappt die Leiste ein (Vorschlag).

| Maß | Wert | Token |
|---|---|---|
| Leiste | 220 pt, eingeklappt 72 pt, 24 pt vom Fensterrand | `--leiste-mac`, `--leiste-mac-eng`, `--radius-block` |
| Rand zwischen Leiste und Fläche | 32 pt | `--flaeche-rand-mac` |
| Kopf | Suchpille 46 pt, Kreise 40 pt | – |
| Anrede | 40 pt | `--grad-anrede-mac` |
| Tagesreiter | 68 pt hoch, Radius 12 pt | `--radius-klein` |
| Karten | Polster 12 pt, Radius 16 pt | `--karte-innen`, `--radius-karte` |
| Zielfläche | 28 pt für den Zeiger | `--ziel-zeiger` |
| Orte in der Leiste | 42 pt hoch | – |

## Woche im Stundenraster

Die Heldenansicht. Sieben Spalten, ein Stundenraster, die Jetzt-Linie. Hier wird die Woche verteilt.

**Mac · Woche im Stundenraster** · 1440 × 900 pt · belegt

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Leiste | 24, 24, 220, 852 | 220 pt, 24 pt vom Fensterrand | --leiste-mac, --radius-block, --flaeche-leiste, --akzent | LeisteMac | Schwarzer Block: Wortmarke „Hey Albert“, dann Flächen (Heute, Woche, Eingang mit Zähler), Bereiche (Essen, Aufgaben, Schule, Freude, Wichtiges), Persönlich (Ich, Haushalt), unten der Mensch mit „Profil und Einstellungen“. Aktiver Ort: rosa Strich links. Albert ist kein Ort. |
| 2 | Kopf der Fläche | 276, 32, 1132, 48 | Suchpille 46 pt, Kreise 40 pt | --flaeche-erhoben, --akzent, --schwarz, --flaeche-rand-mac | Kopfzeile | Suchpille mit rosa Lupe. Rechts darin „In:“ und gestrichelte Bereichs-Chips: Termine, Fahrten, Aufgaben, Dokumente, Post mit Zähler. Dann drei Kreise in fester Reihenfolge: Klingel, Nachrichten, rosa Plus. |
| 3 | Anrede | 276, 104, 700, 48 | 40 pt | --grad-anrede-mac, --laufweite-titel | Anredezeile | „Guten Morgen, Anna.“ in Bricolage 800, eng gelaufen. Im Wochenboard darunter eine Zeile: „Mittwoch, 3. September · 16:40 · zwei Sachen offen, ein Vorschlag“. |
| 4 | Datum und Personen | 276, 166, 420, 34 |  | --schwarz, --person-1, --person-2, --person-3, --person-4, --person-5 | DatumPille, PersonenFilter | Schwarze Datum-Pille „1. – 7. September“, daneben der Personenfilter: alle, dann A, T, F, L, S. |
| 5 | Spannen-Regler | 1010, 166, 398, 34 |  | --knopf-zweit, --schwarz | SpannenRegler | Heute · 3 Tage · Mo – Fr · Mo – So · Monat, rechtsbündig. |
| 6 | KW und Tagesreiter | 276, 222, 1132, 68 | Reiter 68 pt, Radius 12 pt | --radius-klein, --grad-kapitaelchen, --schwarz, --sonntag | Tagesreiter | Links „KW 36“. Sieben Reiter mit Wochentag in Kapitälchen und Datum „3.9.“. Heute schwarz, Sonntag rosa-grau. |
| 7 | Zeitachse | 276, 300, 52, 600 |  | --schrift-mono, --ziffern-tabellarisch, --grad-zweit | Zeitachse | Uhrzeiten HH:MM in Roboto Mono, halbstündlich. Die aktuelle Zeit steht als rosa Pille: „16:40“. |
| 8 | Stundenraster mit Karten | 344, 300, 1064, 600 |  | --karte-innen, --radius-karte, --bedeutung-fahrt, --bedeutung-familie, --rand-vorschlag, --rand-offen | Zeitachse, Karte, BuendelKarte, KonfliktKarte | Eine Spalte je Tag. Die Achse setzt nur den Anfang, eine Karte wird so hoch, wie ihr Inhalt braucht. Fahrten blau, Familie gelb, Termine beige, Albert gestrichelt grau ohne Füllung mit zwei Knöpfen, Offenes gestrichelt rosa. |
| 9 | Jetzt-Linie | 276, 616, 1132, 16 |  | --linie-jetzt, --muster-gestrichelt | JetztLinie | Gestrichelt über die ganze Breite, fängt keine Klicks. Rosa heißt hier jetzt, nie Fehler. |
| 10 | Schnellmenü (offen) | 1182, 86, 226, 256 |  | --flaeche-erhoben, --radius-karte | SchnellMenue | Liegt über dem Raster, wenn das rosa Plus gedrückt ist: Termin (⌘ N), Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz. Gegenstände statt Verben. |

## Leiste eingeklappt

Eingeklappt bleibt die Leiste 72 pt breit. Die gewonnene Breite geht ganz an die Spalten.

**Mac · Leiste eingeklappt** · 1440 × 900 pt · belegt

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Leiste eingeklappt | 24, 24, 72, 852 | 72 pt | --leiste-mac-eng, --radius-block | LeisteMac | Oben der Ball im cremefarbenen Kreis, dann nur Zeichen, durch Haarlinien in drei Gruppen getrennt. Der rosa Pfeil am Rand klappt wieder auf. Unten der eigene Kreis. |
| 2 | Kopf der Fläche | 128, 32, 1280, 48 |  |  | Kopfzeile | Wie ausgeklappt, nur breiter. |
| 3 | Anrede | 128, 104, 700, 48 |  | --grad-anrede-mac | Anredezeile | „Guten Morgen, Anna.“ |
| 4 | Haupthandlung | 1218, 106, 190, 42 |  | --knopf-primaer-flaeche, --ziel-zeiger | Knopf | „Neuer Termin“ als schwarzer Knopf, daneben der Kreis für die Ansicht. Ein Ziel je Fläche. |
| 5 | Datum, Personen, Spanne | 128, 166, 1280, 34 |  |  | DatumPille, PersonenFilter, SpannenRegler | Eine Zeile, Spanne rechts. |
| 6 | KW und Tagesreiter | 128, 222, 1280, 68 |  |  | Tagesreiter | Sieben Reiter, breiter als ausgeklappt. |
| 7 | Zeitachse und Raster | 128, 300, 1280, 600 |  |  | Zeitachse, Karte, JetztLinie | Die gewonnenen 148 pt gehen ganz an die sieben Spalten. |

### LeisteMac

Quelle: `packages/design-system/components/leiste/LeisteMac.jsx`

Die schwarze Leiste des Mac – Logo, drei Gruppen, unten der Mensch.

```jsx
<LeisteMac aktiverOrt="Woche" onWahl={setOrt} style={{ height: "100%" }} />
<LeisteMac eingeklappt fassung="pille" aktiverOrt="Woche" />
```

Der aktive Ort trägt einen rosa Strich links und ein aufgehelltes Feld. Eingeklappt als `fassung="pille"` tritt er als rosa Kreis seitlich heraus und die Leiste beult sich um ihn. Albert steht nicht in der Leiste – er ist kein Ort.

Das Logo lädt aus `assets/logo-albert-hell.png`; setze auf `<html>` `data-albert-logo="<pfad>"`, wenn es woanders liegt.

```ts
/**
 * Die schwarze Leiste auf dem Mac - voll (220 px) oder eingeklappt (72 px) als Block oder als Pille.
 */
export interface LeisteOrt { name: string; zeichen: string; zaehler?: number }
export interface LeisteGruppe { gruppe: string; eintraege: LeisteOrt[] }
export interface LeisteMacProps {
  /** Der Ort, auf dem man steht: "Heute" | "Woche" | "Eingang" | "Essen" | ... */
  aktiverOrt?: string;
  /** Gruppen der Navigation. Standard: Flächen, Bereiche, Persönlich. */
  orte?: LeisteGruppe[];
  eingeklappt?: boolean;
  /** Eingeklappt gibt es zwei Fassungen: schmaler "block" oder rundum abgerundete "pille",
   *  bei der der aktive Ort als rosa Kreis seitlich heraustritt. */
  fassung?: "block" | "pille";
  /** Der Mensch unten in der Leiste. */
  ich?: string;
  onWahl?: (ort: string) => void;
  onKlappen?: () => void;
  onProfil?: () => void;
  style?: React.CSSProperties;
}
export function LeisteMac(props: LeisteMacProps): JSX.Element;
export const ORTE: LeisteGruppe[];
```

## Bereiche mit Liste und Seitenspalte

Aufgaben, Wichtiges, Freude und Haushalt folgen einem Muster: Titel mit Zählzeile, Offenes oben, eine Tabelle, rechts eine Seitenspalte.

**Mac · Bereich mit Liste und Seitenspalte** · 1440 × 900 pt · belegt

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Leiste | 24, 24, 220, 852 |  |  | LeisteMac | Der aktive Bereich trägt den rosa Strich. |
| 2 | Kopf mit Bereichs-Chips | 268, 24, 1148, 46 |  |  | Kopfzeile | Die Chips gehören dem Bereich: in Aufgaben „Alle, Offen, Kinder, Haushalt“, im Safe „Verträge, Ausweise, Bescheide, Fristen“. |
| 3 | Titel und Zählzeile | 268, 88, 700, 64 |  | --grad-anrede-mac, --grad-zweit | Anredezeile | „Aufgaben“, darunter „Diese Woche · 18 Aufgaben · 2 ohne Zuständigen“. Die Zählzeile nennt Offenes immer. |
| 4 | Haupthandlung oder Zahl-Kacheln | 996, 88, 420, 100 |  |  | Knopf, ZahlKachel | Rechts oben entweder ein schwarzer Knopf („Aufgabe anlegen“, „Menschen einladen“) oder zwei Zahl-Kacheln („3 Fristen in den nächsten 90 Tagen“). |
| 5 | Offen, ohne Zuständigen | 268, 196, 786, 156 |  | --rand-offen | Karte | Ganz oben, gestrichelt rosa umrandet: „der einzige Ort, an dem eine Aufgabe ohne Namen liegen darf“. Jede Zeile trägt „Noch niemand“. |
| 6 | Tabelle | 268, 372, 786, 356 |  | --hell, --linie-haar, --grad-kapitaelchen | Avatar, ZustandsPille, Knopf | Kopf in Kapitälchen, Zeilen mit Haarlinie, rechts Stand oder Handlung je Zeile. Dichte ist am Mac erlaubt. |
| 7 | Seitenspalte | 1076, 196, 340, 306 |  | --bedeutung-familie, --schwarz | Karte, TalerStand | Was zum Bereich gehört, aber nicht in die Liste: Sonntagsrunde, Taler dieser Woche, der Tresor als schwarze Karte mit „Mit Face ID öffnen“. |
| 8 | Hinweise unten | 268, 740, 1148, 60 |  | --flaeche-karte |  | Im Register Sachbearbeiter, was gilt: „Was wer sehen darf, entscheidet die Datenbank, nicht ein ausgeblendeter Knopf.“ |

## Die Sonntagsrunde

Die Sonntagsrunde ist eine eigene Fläche ohne Leiste. Acht geführte Schritte, Großschrift für den Familienkreis, ein Mensch ist dran. Die Runde läuft vom Mac oder iPad per AirPlay auf den Fernseher. Der Screen ist für 1920 × 1080 pt gezeichnet.

![Sonntagsrunde Schritt 4 von 8: Lena ist dran. Wer fährt Samstag zum Turnier? Rückfahrt ohne Fahrer, Papa und Oma Grete haben Zeit](https://brand.heyalbert.family/bilder/screens/Sonntagsrunde.png)

*Sonntagsrunde · breitbild · 3840 × 2160 px*

## Tastatur

Am Mac geht alles mit der Tastatur. Fokus ist immer sichtbar: 2 pt Ring in Offen-Rosa mit 2 pt Abstand, nur bei `:focus-visible`.

| Kürzel | Was | Stand |
|---|---|---|
| ⌘ N | neuer Termin | belegt (Schnellmenü im Referenz-Screen) |
| ⌘ K | Befehlspalette | belegt (`docs/12-roadmap.md`, Phase 0) |
| ⌘ J | Albert fragen | belegt (`docs/11-produkt.md`) |
| ⌘ 1 – 3 | Linsen auf Heute: Verlauf, Tafel, Haushalt | belegt (`docs/11-produkt.md` §5b) |
| ⌘ F | Suche im Kopf | Vorschlag |
| Pfeiltasten | Karte im Raster verschieben, angekündigt für Screenreader | belegt als Anforderung (`docs/11-produkt.md` §5b) |
| ⌘ Z | Rückgängig | Vorschlag, folgt dem System |
| ⌘ \ | Leiste ein- und ausklappen | Vorschlag |

Die Kürzel stehen nur am Mac im Schnellmenü. Am iPhone und iPad nicht.

> **Offen**
>
> `docs/11-produkt.md` beschreibt Albert als Zeichen unten rechts, 44 pt, mit ⌘ J. Das Designsystem sagt, Albert sei kein Ort, und kein Referenz-Screen zeigt das Zeichen. Wo die Assistenzfläche sitzt, ist offen.

## Rollen am Mac

| Rolle | Einstieg |
|---|---|
| Anna, Tobias | Wochenboard, ganze Woche, Leiste mit allem |
| Kind ab 13 | eigener Kalender, Aufgaben – ohne Safe, Tresor, Finanzen |
| Kinder bis 12, Gäste, Au-pair | kein Einstieg am Mac (Matrix III) |

## Alle Flächen am Mac

![Wochenboard: Hallo Anna, Woche 1. bis 7. September im Stundenraster mit Fahrten, Terminen, einem Vorschlag von Albert und der Jetzt-Linie um 16:40](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

![Aufgaben: zwei offen ohne Zuständigen oben, darunter die Woche mit Namen und Talern, rechts Sonntagsrunde und Taler](https://brand.heyalbert.family/bilder/screens/Aufgaben.png)

*Aufgaben · mac · 2880 × 1800 px*

![Wichtiges: Dokumente mit Frist und Stand, rechts der Tresor mit Face ID](https://brand.heyalbert.family/bilder/screens/Safe.png)

*Safe · mac · 2880 × 1800 px*

![Anlass Dänemark: Was zu tun ist, Eingeladene, Packlisten je Person, Album, Kosten](https://brand.heyalbert.family/bilder/screens/Anlass.png)

*Anlass · mac · 2880 × 1800 px*

![Family Feed am Mac mit Beiträgen, Kreisen der Menschen und dem Rhythmus](https://brand.heyalbert.family/bilder/screens/FamilyFeedMac.png)

*FamilyFeedMac · mac · 2880 × 1800 px*

![Haushalt: neun Menschen mit Rolle, Sprache, Rechten für Safe, Tresor und Geld und dem Ende jedes Zugangs](https://brand.heyalbert.family/bilder/screens/Haushalt.png)

*Haushalt · mac · 2880 × 1800 px*

## Was es am Mac nicht gibt

- „Nimm mit“ abhaken, Abfahrt und Ankunft, Einkaufsliste im Laden. Das passiert unterwegs, am iPhone und an der Uhr.
- Brief scannen und Foto der Buchseite. Dafür ist die Kamera des iPhones da.
- HealthKit, also Bewegung und Gesundheit. Es gibt sie auf dem Mac nicht.
- Kinderräume für Kinder unter 13.


---

# Apple Watch

> Das Fünf-Sekunden-Gerät – eine Frage, zwei Antworten, höchstens sieben Wörter. Aufbau in Punkten, was die Uhr trägt, Mitteilungen und was es an der Uhr nicht gibt.

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

Die Uhr ist kein kleines iPhone. An ihr ist alles falsch, was länger als fünf Sekunden dauert oder mehr als eine Entscheidung verlangt. Was sie kann, kann sie besser als jedes andere Gerät: eine Frage mit zwei Antworten, während die Hände voll sind.

> **Offen**
>
> Ein watchOS-Ziel gibt es noch nicht (`docs/12-roadmap.md`), und das Designsystem hat keine Vorlage für die Uhr. Belegt sind ein Screen (Lena, Schwimmen, „Angekommen“) und die Regeln in `docs/11-produkt.md` §2. Die Anatomie unten liest diesen einen Screen ab. Weitere Arten von Screens sind Vorschläge.

## Gerät und Maße

Der Screen ist für die Uhr mit **45 mm** gezeichnet: 198 × 242 pt (396 × 484 px, in `apps/site/bilder` doppelt so groß abgelegt). Die Uhr ist immer dunkel: Fläche `--schwarz`, Text hell.

| Maß | Wert | Token |
|---|---|---|
| Rand | 14 pt | – |
| Hauptknopf | volle Breite, 36 pt hoch, Pille | `--akzent`, `--radius-pille` |
| Zweitknopf | volle Breite, 26 pt hoch | `--radius-pille` |
| Titel | Bricolage 800 | `--schrift-titel` |
| Länge | höchstens sieben Wörter je Zeile | Register Flüsterer |

## Eine Frage, zwei Antworten

**Apple Watch · eine Frage, zwei Antworten** · 198 × 242 pt · belegt

| Nr. | Region | Lage (x, y, b, h in pt) | Maß | Tokens | Bauteile | Was dort steht |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Wer und wann | 14, 17, 170, 14 | Rand 14 pt | --person-4 | Avatar | Links Kreis und Name „Lena“, rechts die Uhrzeit „16:02“. |
| 2 | Die Sache | 14, 40, 170, 18 |  | --schrift-titel |  | „Schwimmen“ in Bricolage 800. Ein Wort, höchstens zwei. |
| 3 | Eine Zeile Kontext | 14, 60, 170, 10 |  |  |  | „Hallenbad · mit dem Rad · 16:00“. Register Flüsterer: höchstens sieben Wörter. |
| 4 | Freie Mitte | 14, 76, 170, 62 |  |  |  | Bleibt frei, damit der Daumen nicht zufällig trifft und die Antwort unten im Griff liegt. |
| 5 | Hauptantwort | 14, 144, 170, 36 |  | --akzent, --radius-pille | Knopf | „Angekommen“ in Rosa mit Haken. Volle Breite. |
| 6 | Zweite Antwort | 14, 185, 170, 26 |  | --radius-pille | Knopf | „Fahrt fragen“. Nie mehr als zwei Antworten. |
| 7 | Was danach passiert | 14, 217, 170, 10 |  | --grad-klein |  | „Ein Tipp — Mama und Papa sehen es sofort.“ Sagt die Folge, bevor man tippt. |

Der Aufbau ist immer derselbe: wer und wann, die Sache, eine Zeile Kontext, dann unten die Antworten. Die Mitte bleibt frei. Unter den Knöpfen steht die Folge: „Ein Tipp – Mama und Papa sehen es sofort.“

## Was die Uhr trägt

- **Losfahren:** die Abfahrtserinnerung antippen, und der Haushalt weiß Bescheid.
- **Angekommen:** das Kind drückt selbst, wenn es da ist.
- **Abgehakt:** eine Aufgabe, ein Punkt der Nimm-mit-Liste.
- **Abgestimmt:** „Nudeln oder Ofengemüse?“ mit einem Tipp.
- **Hausaufgabe diktieren:** der schnellste Weg von allen.
- **Restzeit sehen:** als Live Activity, ohne die App zu öffnen.

## Mitteilungen

Mitteilungen auf Uhr und iPhone folgen dem Register Flüsterer: höchstens sieben Wörter, das Wichtigste zuerst.

> **Beispiel**
>
> „16:40 · Handball, Halle Süd.“ · „Abfahrt in 6 Minuten.“ · „Lena ist angekommen.“

> **Nicht so**
>
> „Hey Anna! Vergiss nicht, dass Felix heute um 16:40 Uhr Handball in der Halle Süd hat!“

## Rollen an der Uhr

| Rolle | Was |
|---|---|
| Anna, Tobias | Abfahrt, Aufgabe, Abstimmung |
| Felix (mittel) | Hausaufgabe diktieren, angekommen |
| Kind ab 13 | wie Erwachsene |
| Sofia (Au-pair) | Schicht bestätigen, losfahren |
| Lena (klein), Gäste | kein Einstieg (Matrix III) |

> **Offen**
>
> Der einzige Uhr-Screen zeigt Lena (9). Matrix III gibt kleinen Kindern keine Uhr. Bei Family Setup – einer Kinderuhr ohne eigenes iPhone – gelten eigene Grenzen, die beim Bauen zu prüfen sind. Entscheidung: entweder der Screen zeigt Felix, oder die Matrix bekommt „Angekommen“ auch für kleine Kinder.

## Was es an der Uhr nicht gibt

Listen, Tabellen, Safe, Tresor, Finanzen, Album, Jahresbuch, Einstellungen. Kein Scrollen durch eine Woche, keine dritte Antwort, kein Formular.


---

# Zustände

> Leer, lädt, Fehler, offline, Rückgängig, optimistisches Update, Konflikt, ohne Zuständigen, Vorschlag von Albert, inaktiv – jeweils Aufbau, Register, Beispieltext mit Familie Sonntag und das Bauteil dazu.

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

Ein Screen hat mehr als einen Zustand. Ohne seine Zustände ist er nicht fertig. Dieses Kapitel beschreibt jeden einzeln: wie er aussieht, in welchem Register er spricht und welches Bauteil ihn trägt.

| Zustand | Bauteil | Register |
|---|---|---|
| leer | `LeererZustand` | Family Manager, mit Albert als Figur |
| lädt | `Skelett` | – |
| Fehler | `LeererZustand` ohne Figur | Family Manager oder Sachbearbeiter |
| offline | Hinweiszeile (Vorschlag) | Family Manager |
| Rückgängig | `Toast` | Family Manager |
| optimistisches Update | Karte sofort, `Toast` danach | Family Manager |
| Konflikt | `KonfliktKarte`, `BuendelKarte` | Family Manager |
| ohne Zuständigen | Karte mit Offen-Rand | Family Manager |
| Vorschlag von Albert | `VorschlagKarte`, `Karte art="vorschlag"` | Family Manager, Sachbearbeiter im Scan |
| inaktiv | eigene Rollen statt Deckkraft | – |

## Leer

Ein leerer Zustand sagt drei Dinge: was hierher gehört, warum es leer ist, was man tun kann. Dazu genau ein Knopf. Albert darf hier als Figur erscheinen, mit einer Randnotiz in Handschrift. In Listen, im Safe und bei Finanzen nie.

### LeererZustand

Quelle: `packages/design-system/components/zustaende/LeererZustand.jsx`

Der leere Zustand – drei Dinge und ein Knopf.

```jsx
<LeererZustand mitAlbert
  was="Hier landet die Post der Schule."
  warum="Diese Woche kam nichts an. Sobald etwas kommt, macht Albert daraus einen Vorschlag."
  schritt="Post verbinden"
  randnotiz="Ich schaue täglich rein." />
```

Kein "Fehler", kein "Ups", kein Ausrufezeichen. Albert erscheint hier als Figur – in Listen, im Safe, bei Finanzen nie.

```ts
/**
 * Der leere Zustand: was hierher gehoert, warum es leer ist, ein Knopf.
 */
export interface LeererZustandProps {
  /** Was hierher gehoert - ein Satz, kein Titel: "Hier landet die Post der Schule." */
  was: React.ReactNode;
  /** Warum es leer ist: "Diese Woche kam nichts an." */
  warum?: React.ReactNode;
  /** Was man tun kann, als Verb: "Post verbinden". */
  schritt?: string;
  onSchritt?: () => void;
  /** Albert als Figur - nur in Onboarding, leeren Zustaenden, Briefings, Kinderbereich, Jahresbuch. */
  mitAlbert?: boolean;
  /** Alberts Bleistift-Randnotiz in Reenie Beanie. Nur im Register Erzaehler. */
  randnotiz?: string;
  style?: React.CSSProperties;
}
export function LeererZustand(props: LeererZustandProps): JSX.Element;
```

> **Beispiel**
>
> **Was:** Hier landet die Post der Schule. **Warum:** Diese Woche kam nichts an. Sobald etwas kommt, macht Albert daraus einen Vorschlag. **Knopf:** Post verbinden.

> **Nicht so**
>
> „Keine Daten vorhanden.“ · „Ups, hier ist noch nichts!“ · ein leerer Screen mit einem grauen Symbol und sonst nichts.

## Lädt

Nie ein Kreisel, nie ein Fortschrittsbalken als Schmuck. Das Skelett hat die Form dessen, was gleich kommt: sieben Spalten für die Woche, drei Karten für Heute. Es atmet zwischen `--karte` und `--knopf-zweit` in `--dauer-atem`. Bei reduzierter Bewegung steht es still.

### Skelett

Quelle: `packages/design-system/components/zustaende/Skelett.jsx`

Das Skelett – die Form dessen, was gleich kommt.

```jsx
<Skelett form="board" spalten={7} zeilen={3} />
```

Nie ein Kreisel, nie ein Fortschrittsbalken. Es atmet zwischen Karte und Zweitknopf-Beige und steht still, wenn das System weniger Bewegung will.

```ts
/** Skelett in der Form des Inhalts. Atmet 300 ms, steht bei reduzierter Bewegung, nie ein Kreisel. */
export interface SkelettProps {
  /** "karte" (eine Karte) | "zeile" (Liste) | "board" (Stundenraster). */
  form?: "karte" | "zeile" | "board";
  /** Zeilen je Spalte. */
  zeilen?: number;
  /** Spalten im Board. */
  spalten?: number;
  style?: React.CSSProperties;
}
export function Skelett(props: SkelettProps): JSX.Element;
```

Das Skelett erscheint erst, wenn das Laden länger als einen kurzen Moment dauert. Vorschlag: ab 300 ms, damit es bei schnellen Antworten nicht flackert.

## Fehler

Ein Fehler ist ein leerer Zustand mit anderem Warum. Kein „Fehler“, kein „Ups“, kein Rot, kein Ausrufezeichen. Er sagt, was nicht ging, und gibt einen Schritt. Albert erscheint bei Fehlern nicht als Figur.

> **Beispiel**
>
> **Was:** Die Woche ist gerade nicht geladen. **Warum:** Die Verbindung ist abgebrochen, eure Daten sind sicher. **Knopf:** Noch einmal laden.

Fehler in Safe, Tresor und Finanzen sprechen im Register Sachbearbeiter: nüchtern, vollständig, mit dem, was gespeichert ist und was nicht.

## Offline

> **Offen**
>
> Für offline gibt es kein Bauteil und keinen Screen. Vorschlag: eine Zeile unter der Anrede, „Ohne Netz · Änderungen gehen raus, sobald es wieder da ist“, in `--text-zweit`. Lesen geht weiter. Was schon geladen ist, bleibt stehen. Änderungen stehen sofort da und tragen bis zum Abgleich einen gestrichelten Rand.

## Rückgängig

Jede Änderung meldet sich mit einem Toast und „Rückgängig“. Albert stellt fest, er lobt nicht. Ohne Rückweg gibt es keinen Toast. Was sich nicht zurücknehmen lässt, wird vorher gefragt.

### Toast

Quelle: `packages/design-system/components/zustaende/Toast.jsx`

Der Toast – eine Feststellung und ein Rückweg.

```jsx
<Toast text="Tobias fährt am Samstag." onZurueck={zurueck} />
```

Albert stellt fest ("Fertig."), er lobt nicht. Ohne `onZurueck` gibt es keinen Toast – was nicht rücknehmbar ist, wird vorher gefragt.

```ts
/** Kurze Rueckmeldung mit Rueckweg. Jedes optimistische Update bekommt einen. */
export interface ToastProps {
  /** Feststellung im Praesens, ohne Lob: "Tobias fährt am Samstag." */
  text: React.ReactNode;
  zurueck?: string;
  onZurueck?: () => void;
  style?: React.CSSProperties;
}
export function Toast(props: ToastProps): JSX.Element;
```

> **Beispiel**
>
> „Tobias fährt am Samstag.“ · „Oma Grete hat die Fahrt übernommen.“ · „Fertig.“

Der Toast steht über der Leiste am iPhone und unten in der Mitte am Mac. Er bleibt, bis man weiterarbeitet. Vorschlag: mindestens fünf Sekunden, damit auch Oma Grete ihn lesen kann.

## Optimistisches Update

Wer etwas ändert, sieht das Ergebnis sofort. Die App wartet nicht auf den Server. Geht es schief, kommt der alte Stand zurück, und ein Toast sagt, was passiert ist. Ändert ein anderer Mensch etwas, steht dabei, wer es war: „Anna hat die Fahrt übernommen.“

> **So**
>
> Anna tippt „Ich fahre“. Die Karte zeigt sofort „Anna fährt“, der Toast sagt „Anna fährt am Samstag.“ mit „Rückgängig“.

> **Nicht so**
>
> Anna tippt „Ich fahre“, ein Kreisel dreht sich, und erst nach zwei Sekunden ändert sich die Karte.

## Konflikt

Zwei Sachen treffen sich. Die Karte zeigt es und hält niemanden auf. Kein Rot, kein Fehler. Die Karte stellt fest und nennt einen Schritt.

### KonfliktKarte

Quelle: `packages/design-system/components/karten/KonfliktKarte.jsx`

Die Karte für zwei Sachen, die sich treffen – sie zeigt es und hält niemanden auf.

```jsx
<KonfliktKarte titel="Lena schwimmt, Felix spielt Handball – beides um 16:00."
  erklaerung="Ein Auto, zwei Orte. Sofia ist bis 17:00 da." wer={["lena", "felix"]}
  schritt="Sofia fragen" zweitSchritt="Später" />
```

Register Family Manager. Kein Rot, kein Ausrufezeichen, kein "Fehler" – die Karte stellt fest und nennt einen Schritt.

```ts
/** Zwei Sachen treffen sich. Sichtbar, nie blockierend, mit naechstem Schritt. */
export interface KonfliktKarteProps {
  /** Was sich trifft, als Feststellung: "Lena schwimmt und Felix spielt - beides 16:00." */
  titel: string;
  /** Warum es klemmt, ein Satz. */
  erklaerung?: React.ReactNode;
  wer?: string[];
  /** Der naechste Schritt als Verb: "Tobias fragen". */
  schritt?: string;
  onSchritt?: () => void;
  zweitSchritt?: string;
  onZweitSchritt?: () => void;
  style?: React.CSSProperties;
}
export function KonfliktKarte(props: KonfliktKarteProps): JSX.Element;
```

Laufen drei Sachen zur selben Zeit, bündelt eine Karte sie in drei Zeilen, statt drei Karten zu stapeln.

### BuendelKarte

Quelle: `packages/design-system/components/karten/BuendelKarte.jsx`

Die Antwort auf Gleichzeitiges: eine Karte, drei Zeilen – statt drei Karten, die sich stapeln.

```jsx
<BuendelKarte titel="Drei Sachen um 16:00" zeit="16:00 – 17:30" teile={[
  { titel: "Kieferorthopädin", symbol: "arzt", zeit: "16:00 – 17:00", leute: ["anna", "lena"] },
  { titel: "Training", art: "termin", symbol: "sport", zeit: "16:00 – 17:30", leute: ["felix"] },
  { titel: "Abholen Halle Süd", art: "fahrt", zeit: "19:00", offen: true }
]} />
```

Zeilen behalten ihre Bedeutungsfarbe. Eine Zeile ohne Zuständigen wird laut gezeigt: gestrichelter Offen-Rand, nie stillschweigend leer.

```ts
/** Eine Karte fuer Gleichzeitiges: mehrere Sachen zur selben Stunde, jede als Zeile. */
export interface BuendelTeil {
  titel: string;
  art?: "termin" | "fahrt" | "familie";
  /** Sach-Symbol, wenn es nicht aus der Art folgt. */
  symbol?: string;
  zeit?: string;
  leute?: string[];
  /** Ohne Zustaendigen - die Zeile bekommt den gestrichelten Offen-Rand. */
  offen?: boolean;
}
export interface BuendelKarteProps {
  /** Was die Stunde traegt: "Drei Sachen um 16:00". */
  titel: string;
  zeit?: string;
  teile: BuendelTeil[];
  style?: React.CSSProperties;
}
export function BuendelKarte(props: BuendelKarteProps): JSX.Element;
```

## Ohne Zuständigen

Alles hat genau einen Zuständigen. Etwas ohne Zuständigen ist kein neutraler Zustand, sondern ein Problem und wird laut gezeigt: gestrichelter Rand in Offen-Rosa, `--rand-offen`, und die Zeile „Noch niemand“. Nie als Fläche, nie still leer. Einzige Ausnahme ist die Aufgaben-Inbox.

> **So**
>
> „Rückfahrt Auswärtsspiel · Kein Fahrer“ mit „Ich fahre“. Auf dem Tageskreis Samstag ein rosa Kreis. Im Wochenüberblick ein gestrichelter Punkt.

## Vorschlag von Albert

Albert schlägt vor und handelt nie allein. Ein Vorschlag ist eine Beobachtung, eine Frage, zwei Knöpfe. Am iPhone gelb mit Formen, am Mac gestrichelt grau ohne Füllung. Darunter immer „Vorschlag von Albert“.

### VorschlagKarte

Quelle: `packages/design-system/components/karten/VorschlagKarte.jsx`

Alberts Vorschlag auf dem iPhone – gelb, mit Formen, immer mit zwei Knöpfen.

```jsx
<VorschlagKarte titel="Samstag fehlt ein Fahrer."
  text="Rückfahrt vom Auswärtsspiel, 14:00. Bei Tobias steht ab 13:00 nichts."
  schritt="Tobias fragen" zweitSchritt="Später" />
```

So klingt Albert: eine Beobachtung, eine Frage, zwei Knöpfe. Nie "Ich habe für dich…". Auf dem Mac nimmst du stattdessen `<Karte art="vorschlag">` - dort ist der Vorschlag gestrichelt und ohne Füllung.

```ts
/**
 * Alberts Vorschlag am iPhone: gelbe Karte mit Formen, zwei Knoepfe, Unterzeile.
 */
export interface VorschlagKarteProps {
  /** Eine Beobachtung: "Samstag fehlt ein Fahrer." */
  titel: string;
  /** Zwei kurze Saetze: was er sieht, was daraus folgt. */
  text?: React.ReactNode;
  /** Erster Knopf, ein Verb: "Tobias fragen", "Übernehmen". */
  schritt?: string;
  onSchritt?: () => void;
  /** Zweiter Knopf. Es gibt immer zwei - Albert erledigt nie still. */
  zweitSchritt?: string;
  onZweitSchritt?: () => void;
  unterzeile?: string;
  style?: React.CSSProperties;
}
export function VorschlagKarte(props: VorschlagKarteProps): JSX.Element;
```

> **Beispiel**
>
> „Samstag fehlt ein Fahrer. Rückfahrt vom Auswärtsspiel, 14:00. Bei Tobias steht ab 13:00 nichts.“ Knöpfe: „Tobias fragen“, „Später“.

> **Nicht so**
>
> „Ich habe Tobias als Fahrer eingetragen.“ Albert trägt nichts still ein.

Im Eingang spricht der Vorschlag Sachbearbeiter: Absender, Betrag, Frist, Ablage, dazu „Übernehmen“ und „Rückgängig“.

## Inaktiv

Inaktiv ist eine eigene, gerechnete Rolle, keine Deckkraft: `--text-inaktiv`, `--linie-inaktiv`, `--knopf-inaktiv-flaeche`, `--knopf-inaktiv-text`. Ein inaktiver Knopf bleibt lesbar und sagt, warum er nicht geht.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| knopf-inaktiv-flaeche | var(--knopf-inaktiv-flaeche) | #E9E2D4 | #2B2620 |  |
| knopf-inaktiv-text | var(--knopf-inaktiv-text) | #A29B8F (→ text-inaktiv) | #7A7469 |  |
| text-inaktiv | var(--text-inaktiv) | #A29B8F | #7A7469 | gerechnet, keine Deckkraft |
| linie-inaktiv | var(--linie-inaktiv) | #E4DDCE | #2B2620 | gerechnet, keine Deckkraft |

> **So**
>
> Ein Knopf, der nicht geht, sagt daneben warum: „Einlösen bestätigen Mama oder Papa.“

> **Nicht so**
>
> Ein Knopf mit halber Deckkraft und ohne Erklärung. Oder ein ausgegrautes Menü mit zwölf Punkten, von denen zwei gehen – dann bekommt die Rolle einen eigenen Einstieg.


---

# Bauteile

> Alle Bauteile des Designsystems mit Live-Beispiel, Einsatzregel und Typen – deutsch benannt, aus einer Quelle, für Web, Mac, iPhone und iPad.

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

Ein Bauteil ist hier ein fertiges Stück Oberfläche mit fester Bedeutung: eine Karte, ein Knopf, die Leiste. Jedes Bauteil gibt es genau einmal, in `packages/design-system`. Die Beispiele auf dieser Seite sind keine Bilder. Sie sind die echten Bauteile, mit Familie Sonntag am Mittwoch, dem 3. September.

## Wie ein Bauteil gebaut ist

Jedes Bauteil besteht aus vier Teilen. Sie liegen im selben Ordner und tragen denselben Namen.

| Datei | Was drinsteht |
|---|---|
| `Name.jsx` | das Bauteil in React, nur mit Rollen-Tokens |
| `Name.d.ts` | die Props, mit deutschen Namen und Erklärung |
| `Name.prompt.md` | Einsatz, Sprachregister und Beispiel mit Familie Sonntag – für Menschen und für Agenten |
| `gruppe.card.html` | eine Karte mit allen Zuständen, für die Durchsicht |

Die Namen sind deutsch, mit Absicht. `Knopf` heißt nicht `Button`, `Leiste` nicht `Sidebar`. Wer im Code liest, liest dieselben Wörter wie in der Oberfläche und in dieser Dokumentation.

> **Eine Quelle, drei Fassungen**
>
> Die Produktionsfassungen stehen in `apps/web/src/bausteine/` (Web und HQ) und in `AlbertUI` (SwiftUI). `Rahmen.tsx` ist `LeisteMac` und `Kopfzeile`, `Zeichen.tsx` ist `Icon`, `Karte.tsx` ist `Karte`. Weicht eine Fassung ab, ist das ein Fehler, kein Stil.

## Was jedes Bauteil können muss

Ein Bauteil gilt erst als fertig, wenn es alle Zustände trägt. Das prüft der Agent `design-pruefer` vor jedem „fertig“.

- [ ] leerer Zustand
- [ ] Skelett statt Kreisel
- [ ] Tastatur und :focus-visible
- [ ] Handy und Tisch
- [ ] hell und dunkel als Token-Umschaltung
- [ ] optimistisches Update mit „Rückgängig“
- [ ] richtiges Register
- [ ] kein Hex-Wert
- [ ] Zielflächen 28/44/56

Dazu kommen drei Regeln, die in den Beispielen unten sichtbar sind:

- **Inaktiv ist eine Rolle, keine Deckkraft.** `--knopf-inaktiv-flaeche` und `--text-inaktiv` sind gerechnet, damit der Kontrast trägt.
- **Zeiger hebt die Kontur, nicht die Fläche.** Aus 1 px wird 1,5 px. Schatten gibt es nicht.
- **Fokus nur über `:focus-visible`.** Der Ring ist 2 px Offen-Rosa mit 2 px Abstand.

## Bausteine

Die kleinsten Teile: Menschen, Zeichen, Knöpfe, Pillen, Zahlen. Aus ihnen sind alle anderen Bauteile gebaut. Ein Mensch erscheint immer als Klebezettel in seiner Personenfarbe, mit Initiale. Farbe allein trägt nie.

### bausteine

#### Avatar

Quelle: `packages/design-system/components/bausteine/Avatar.jsx`

Der Klebezettel eines Menschen – Personenfarbe mit Initiale, nie Farbe allein.

```jsx
<Avatar wer="anna" groesse={32} />
<Avatar alle gewaehlt onClick={alleZeigen} />
```

Personenfarben sind über die ganze App gleich: Anna Mint, Tobias Türkis, Felix Flieder, Lena Pfirsich, Sofia Himmel. Text darauf ist immer Tinte – auch nachts, denn der Zettel bleibt hell.

```ts
/** Klebezettel je Mensch: Personenfarbe plus Initiale, optional mit Namen. */
export interface AvatarProps {
  /** Schluessel aus Familie Sonntag ("anna", "tobias", "felix", "lena", "sofia", "grete", "werner", "hilde") oder ein Objekt {name, initiale, platz}. */
  wer?: string | { name: string; initiale: string; platz: number };
  /** Durchmesser in px. 20 im Kartenkopf, 32 im Filter, 44 am iPhone, 56 fuer Kinder. */
  groesse?: number;
  /** Name neben dem Kreis - fuer Leiste und Listen. */
  mitName?: boolean;
  /** Der schwarze Kreis mit zwei Koepfen: "alle". */
  alle?: boolean;
  /** Im Personenfilter: true = schwarzer Ring, false = grau zurueckgenommen. */
  gewaehlt?: boolean | null;
  ring?: boolean;
  onClick?: () => void;
  style?: React.CSSProperties;
}
export function Avatar(props: AvatarProps): JSX.Element;
```

#### DekoForm

Quelle: `packages/design-system/components/bausteine/DekoForm.jsx`

Die spielerische Form auf einer gelben oder rosa Fläche – Freude, kein Schmuck.

```jsx
<DekoForm form="stern" groesse={110} farbe="var(--gelb-dunkel)" style={{ right: -18, bottom: -22 }} />
```

Die Elternfläche braucht `position: relative` und `overflow: hidden`. Nie auf Karten mit Bedienelementen, nie im Safe, nie bei Finanzen.

```ts
/** Spielerische Form als Deko auf gelben und rosa Flaechen - Stern, Herz, Kleks, Puzzleteil. */
export interface DekoFormProps {
  form?: "stern" | "herz" | "kleks" | "kreis" | "puzzle";
  groesse?: number;
  /** Immer die dunklere Stufe derselben Flaechenfarbe: var(--gelb-dunkel), var(--blau-dunkel). */
  farbe?: string;
  drehung?: number;
  style?: React.CSSProperties;
}
export function DekoForm(props: DekoFormProps): JSX.Element;
```

#### FahrtPille

Quelle: `packages/design-system/components/bausteine/FahrtPille.jsx`

Die blaue Pille, die eine Fahrt an eine andere Sache hängt – Bündel statt Einzelteile.

```jsx
<FahrtPille wer="Papa" zeit="15:40" auto="Kombi" />
```

Blau heisst Fahrt, immer. Der Text lautet „Papa fährt 15:40 · Kombi“ — wer und wann ohne Trenner, das Auto mit Punkt. Uhrzeit als `15:40`, nie "15.40" und nie "15 Uhr".

```ts
/** Blaue Pille fuer eine Fahrt, die an einer anderen Sache haengt. */
export interface FahrtPilleProps {
  /** Wer faehrt - "Papa", "Anna", "Jonas' Mama". */
  wer?: string;
  /** Uhrzeit als HH:MM. */
  zeit?: string;
  /** Auto aus dem Buendel - "Kombi". */
  auto?: string;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function FahrtPille(props: FahrtPilleProps): JSX.Element;
```

#### Icon

Quelle: `packages/design-system/components/bausteine/Icon.jsx`

Ein Zeichen aus dem Lucide-Satz — für alles, was ein Symbol braucht.

```jsx
<Icon name="fahrt" groesse={16} titel="Fahrt" />
```

- `name` nimmt eine Sach-Rolle (`fahrt`, `schule`, `sport`, `essen`, `arzt`, `musik`, `freude`, `familie`, `ritual`, `schwimmen`, `vorschlag`) oder direkt einen Lucide-Dateinamen (`bell`, `search`, `plus`).
- Das Zeichen wird inline gerendert und über `stroke: currentColor` eingefärbt — es trägt also die Textfarbe seines Elternteils und kommt in Screenshots und Exporten mit.
- Quelle sind die Dateien in `assets/icons/`; `components/bausteine/zeichen.js` hält ihren Pfad-Inhalt. Kommt ein Zeichen dazu: Datei nach `assets/icons/` legen und `zeichen.js` neu erzeugen — nie ein SVG von Hand zeichnen.
- Ohne `titel` ist das Zeichen dekorativ (`aria-hidden`) — richtig, weil neben jedem Zeichen Text steht.

```ts
/** Zeichen aus dem Lucide-Satz, inline gerendert und über `stroke` eingefärbt. */
export interface IconProps {
  /** Sach-Rolle ("fahrt", "schule", "essen", "familie", "ritual", "vorschlag", ...) oder Lucide-Dateiname ("bell"). */
  name: string;
  /** Kantenlänge in px. Standard 16. */
  groesse?: number;
  /** Strichstärke. Standard 2 — wie im Satz. */
  strich?: number;
  /** Strichfarbe. Standard currentColor. */
  farbe?: string;
  /** Wenn gesetzt, wird das Zeichen für VoiceOver benannt; sonst ist es dekorativ. */
  titel?: string;
  style?: React.CSSProperties;
}
export function Icon(props: IconProps): JSX.Element | null;
export const SACHEN: Record<string, string>;
```

#### Knopf

Quelle: `packages/design-system/components/bausteine/Knopf.jsx`

Der Handlungsknopf auf Karten und Flächen — schwarz für den einen Schritt, beige für den zweiten.

```jsx
<Knopfreihe>
  <Knopf art="primaer" onClick={ichFahre}>Ich fahre</Knopf>
  <Knopf art="zweit">Später</Knopf>
</Knopfreihe>
<Knopf ziel="kind" zeichen="check">Fertig</Knopf>
```

Register Family Manager: kurz, zupackend, ein Verb — „Ich fahre“, „Tobias fragen“, „Übernehmen“, „Rückgängig“. Nie „OK“, nie „Abbrechen“ ohne Gegenstand.

Ein Knopf ist immer einzeilig. Knöpfe stehen in einer `Knopfreihe`: nebeneinander, wenn beide Platz haben, sonst untereinander in voller Breite — nie ein zweizeiliger Knopf, nie zwei ungleich breite Knöpfe untereinander. `ziel="kind"` gibt 56 px mit 16-px-Schrift, wo Kinder bedienen. `inaktiv` rechnet eigene Rollen statt Deckkraft.

```ts
/**
 * Handlungsknopf. Primär schwarz mit hellem Text („Ich fahre“), Zweitknopf beige („Später“),
 * Klein ohne Fläche für Nebenwege. Schriftgrad und Polster wachsen mit der Zielfläche.
 */
export interface KnopfProps {
  art?: "primaer" | "zweit" | "klein";
  /** Zielfläche: Zeiger 32 / 12,5 px, Finger 44 / 14 px, Kind 56 / 16 px. */
  ziel?: "zeiger" | "finger" | "kind";
  /** Sach-Rolle oder Lucide-Name eines Zeichens links im Knopf. */
  zeichen?: string;
  /** Inaktiv ist eine eigene Rolle, keine Deckkraft. */
  inaktiv?: boolean;
  /** Füllt die Breite - für iPhone-Karten. */
  breit?: boolean;
  /** Erlaubt Zeilenumbruch in der Beschriftung. Standard aus: ein Knopf ist einzeilig;
   *  wird die Reihe zu eng, stapelt die Knopfreihe die Knöpfe in voller Breite. */
  umbruch?: boolean;
  type?: "button" | "submit" | "reset";
  children?: React.ReactNode;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  style?: React.CSSProperties;
}
export function Knopf(props: KnopfProps): JSX.Element;

/** Die Knopfreihe: nebeneinander, wenn Platz ist, sonst untereinander in voller Breite. */
export interface KnopfreiheProps {
  children?: React.ReactNode;
  /** Mindestbreite je Knopf in px, ab der zwei nebeneinander passen. Standard 104. */
  mindest?: number;
  ausrichtung?: "mitte";
  style?: React.CSSProperties;
}
export function Knopfreihe(props: KnopfreiheProps): JSX.Element;
```

- `Knopfreihe` · packages/design-system/components/bausteine/Knopf.jsx

#### Punktgruppe

Quelle: `packages/design-system/components/bausteine/Punktgruppe.jsx`

Wer dabei ist – die überlappenden Punkte rechts im Kartenkopf.

```jsx
<Punktgruppe leute={["anna", "lena"]} />
```

Der Zuständige steht immer zuerst. Alles hat genau einen Zuständigen; fehlt er, trägt die Karte den gestrichelten Offen-Rand und nicht einfach keinen Punkt.

```ts
/** Die Punkte rechts im Kartenkopf: wer dabei ist. Initiale in Personenfarbe, bei mehreren ueberlappend. */
export interface PunktgruppeProps {
  /** Schluessel aus Familie Sonntag, in der Reihenfolge der Zustaendigkeit. */
  leute?: Array<string | { name: string; initiale: string; platz: number }>;
  /** Durchmesser in px. Standard 20. */
  groesse?: number;
  style?: React.CSSProperties;
}
export function Punktgruppe(props: PunktgruppeProps): JSX.Element;
```

#### SachSymbol

Quelle: `packages/design-system/components/bausteine/SachSymbol.jsx`

Der helle Kreis mit dem Zeichen der Sache – immer links im Kartenkopf, nie woanders.

```jsx
<SachSymbol art="fahrt" titel="Fahrt" />
```

Was für eine Sache es ist, sagt dieses Symbol; wer dabei ist, sagen die Punkte rechts (`Punktgruppe`); was für eine Art es ist, sagt die Kartenfarbe. Kein Menü, kein Chevron im Kopf.

```ts
/** Zeichen der Sache in einem hellen Kreis - steht links im Kartenkopf. */
export interface SachSymbolProps {
  /** Sach-Rolle: "fahrt" | "schule" | "sport" | "essen" | "arzt" | "musik" | "freude" | "familie" | "ritual" | "vorschlag" | "schwimmen". */
  art?: string;
  /** Kreisdurchmesser in px. Standard 26 (Mac), 24 auf dem iPhone. */
  groesse?: number;
  /** Auf farbigen Karten - haelt den Kreis hell. */
  aufFarbe?: boolean;
  titel?: string;
  style?: React.CSSProperties;
}
export function SachSymbol(props: SachSymbolProps): JSX.Element;
```

#### Zaehler

Quelle: `packages/design-system/components/bausteine/Zaehler.jsx`

Der rosa Zaehler – am Ort "Eingang", am Chip "Post", an der Klingel als Punkt.

```jsx
<Zaehler wert={3} titel="3 Sachen im Eingang" />
<Zaehler art="punkt" titel="Neues da" />
```

Bei Null zeigen wir keinen Zaehler, sondern nichts – und im Ort selbst den leeren Zustand.

```ts
/** Rosa Zaehler an Ort, Chip oder Klingel. */
export interface ZaehlerProps {
  /** Die Zahl. Bei 0 nicht anzeigen - Leere ist ein leerer Zustand, kein Zaehler. */
  wert?: number | string;
  /** "akzent" (Standard) | "punkt" (rosa Punkt ohne Zahl, fuer die Klingel). */
  art?: "akzent" | "aufSchwarz" | "punkt";
  groesse?: number;
  /** Beschriftung fuer VoiceOver, z. B. "3 Sachen im Eingang". */
  titel?: string;
  style?: React.CSSProperties;
}
export function Zaehler(props: ZaehlerProps): JSX.Element;
```

#### ZahlKachel

Quelle: `packages/design-system/components/bausteine/ZahlKachel.jsx`

Die farbige Kachel mit der grossen Zahl – drei davon stehen im Wochenblick nebeneinander.

```jsx
<ZahlKachel zahl="8,7" einheit="h" beschriftung="heute verplant" farbe="gelb" form="stern" />
<ZahlKachel zahl="2" beschriftung="Fahrten heute" farbe="rosa" form="kleks" />
<ZahlKachel zahl="1" beschriftung="offen diese Woche" farbe="blau" form="kreis" />
```

Beschriftung ohne Verb und ohne Wertung – "offen diese Woche", nie "noch offen!" und nie ein Fortschrittsbalken daneben.

```ts
/**
 * Farbige Kachel mit grosser Zahl - der Blick auf die Woche.
 */
export interface ZahlKachelProps {
  /** Die Zahl, deutsch geschrieben: "8,7", "2", "1". */
  zahl: string | number;
  /** Einheit direkt an der Zahl: "h". */
  einheit?: string;
  /** Ein Satzteil, klein darunter: "heute verplant", "Fahrten heute", "offen diese Woche". */
  beschriftung: string;
  farbe?: "gelb" | "rosa" | "blau";
  form?: "stern" | "herz" | "kleks" | "kreis" | "puzzle" | "keine";
  style?: React.CSSProperties;
}
export function ZahlKachel(props: ZahlKachelProps): JSX.Element;
```

#### ZustandsPille

Quelle: `packages/design-system/components/bausteine/ZustandsPille.jsx`

Die kleine Pille auf der Karte, die den Zustand der Sache nennt.

```jsx
<ZustandsPille>Kein Fahrer</ZustandsPille>
<ZustandsPille>Abholen 19:00 · Anna</ZustandsPille>
```

Register Family Manager: Sache, Zeit, Mensch – in dieser Reihenfolge, ohne Verb. Rosa heisst hier Akzent und Jetzt, niemals Fehler.

```ts
/** Kleine Pille auf der Karte: "Kein Fahrer", "Abholen 19:00 - Anna". */
export interface ZustandsPilleProps {
  /** "zustand" rosa hell (Standard) | "offen" gestrichelt (ohne Zustaendigen) | "ruhig" hell mit Haarlinie. */
  art?: "zustand" | "offen" | "ruhig";
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function ZustandsPille(props: ZustandsPilleProps): JSX.Element;
```

## Karten

Die Karte ist das wichtigste Bauteil. Es gibt sie in fünf Arten, und die Art sagt die Bedeutung: beige für einen Termin, blau für eine Fahrt, gelb für Familie und Ritual, gestrichelt grau für einen Vorschlag von Albert, gestrichelt rosa für etwas ohne Zuständigen. Links im Kopf steht die Sache, rechts stehen die Menschen.

### karten

#### BuendelKarte

Quelle: `packages/design-system/components/karten/BuendelKarte.jsx`

Die Antwort auf Gleichzeitiges: eine Karte, drei Zeilen – statt drei Karten, die sich stapeln.

```jsx
<BuendelKarte titel="Drei Sachen um 16:00" zeit="16:00 – 17:30" teile={[
  { titel: "Kieferorthopädin", symbol: "arzt", zeit: "16:00 – 17:00", leute: ["anna", "lena"] },
  { titel: "Training", art: "termin", symbol: "sport", zeit: "16:00 – 17:30", leute: ["felix"] },
  { titel: "Abholen Halle Süd", art: "fahrt", zeit: "19:00", offen: true }
]} />
```

Zeilen behalten ihre Bedeutungsfarbe. Eine Zeile ohne Zuständigen wird laut gezeigt: gestrichelter Offen-Rand, nie stillschweigend leer.

```ts
/** Eine Karte fuer Gleichzeitiges: mehrere Sachen zur selben Stunde, jede als Zeile. */
export interface BuendelTeil {
  titel: string;
  art?: "termin" | "fahrt" | "familie";
  /** Sach-Symbol, wenn es nicht aus der Art folgt. */
  symbol?: string;
  zeit?: string;
  leute?: string[];
  /** Ohne Zustaendigen - die Zeile bekommt den gestrichelten Offen-Rand. */
  offen?: boolean;
}
export interface BuendelKarteProps {
  /** Was die Stunde traegt: "Drei Sachen um 16:00". */
  titel: string;
  zeit?: string;
  teile: BuendelTeil[];
  style?: React.CSSProperties;
}
export function BuendelKarte(props: BuendelKarteProps): JSX.Element;
```

#### Karte

Quelle: `packages/design-system/components/karten/Karte.jsx`

Die Karte – das Ding, aus dem Heute, Woche und Kalender bestehen. Ein Datenmodell, viele Ansichten.

```jsx
<Karte art="fahrt" titel="Rückfahrt Auswärtsspiel" ort="Sportplatz Nord → Zuhause"
  zeit="14:00 – 14:30" leute={["felix"]} hoehe="hoch"
  pillen={<ZustandsPille>Kein Fahrer</ZustandsPille>}
  knoepfe={<Knopf>Ich fahre</Knopf>} />

<Karte art="vorschlag" titel="Bei Tobias steht ab 13:00 nichts. Fragen?"
  unterzeile="Vorschlag von Albert"
  knoepfe={<KarteVorschlagKnoepfe onUebernehmen={…} onZurueck={…} />} />
```

Register Family Manager, kurz und ruhig. Die Bedeutungen werden nicht getauscht: blau ist Fahrt, gelb ist Familie, gestrichelt rosa heisst "ohne Zuständigen". Ein Vorschlag hat immer zwei Knöpfe – Albert erledigt nie still.

```ts
/**
 * Die Karte in fuenf Arten. Die Farbe sagt die Art, das Symbol die Sache, die Punkte die Leute.
 */
export interface KarteProps {
  /** "termin" beige | "fahrt" blau | "familie" gelb | "vorschlag" gestrichelt grau | "offen" gestrichelt rosa. */
  art?: "termin" | "fahrt" | "familie" | "vorschlag" | "offen";
  /** Kartentitel, ein Gegenstand: "Rückfahrt Auswärtsspiel". */
  titel: string;
  /** Zweitzeile: Ort oder Bündel-Teile, mit " · " getrennt. */
  ort?: React.ReactNode;
  /** Zeitspanne als "16:00 – 17:00" (Halbgeviertstrich mit Leerzeichen). */
  zeit?: string;
  /** Wer dabei ist; der Zustaendige zuerst. */
  leute?: string[];
  /** Sach-Symbol, wenn es nicht aus der Art folgt: "schule", "sport", "arzt", "musik". */
  symbol?: string;
  /** "kurz" (78 px) oder "hoch" (132 px) - fuer das Stundenraster. */
  hoehe?: "kurz" | "hoch";
  /** Zustands- und Fahrt-Pillen. */
  pillen?: React.ReactNode;
  /** Handlungsknoepfe; bei Vorschlaegen immer zwei. */
  knoepfe?: React.ReactNode;
  /** Kleine Zeile unter dem Inhalt, z. B. "Vorschlag von Albert". */
  unterzeile?: React.ReactNode;
  /** Einzeiler fuer Listen: Symbol, Titel, Zeit, Punkt. */
  kompakt?: boolean;
  klickbar?: boolean;
  /** Leicht gekippt, wie ein liegender Klebezettel. */
  gekippt?: boolean;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Karte(props: KarteProps): JSX.Element;
export function KarteVorschlagKnoepfe(props: { uebernehmen?: string; zurueck?: string; onUebernehmen?: () => void; onZurueck?: () => void }): JSX.Element;
```

- `KarteVorschlagKnoepfe` · packages/design-system/components/karten/Karte.jsx

#### Kartenkopf

Quelle: `packages/design-system/components/karten/Kartenkopf.jsx`

Der Kartenkopf – Symbol links, Leute rechts, nichts dazwischen.

```jsx
<Kartenkopf art="fahrt" leute={["sofia"]} titel="Fahrt" />
```

Drei Träger, drei Orte: Kartenfarbe sagt die Art, Symbol sagt die Sache, Punkte sagen die Leute. Wird nur von `Karte` gebraucht – eigenständig nur, wenn du eine eigene Kartenform baust.

```ts
/** Der Kopf jeder Karte: Sach-Symbol links, Punktgruppe rechts. */
export interface KartenkopfProps {
  /** Sach-Rolle - bestimmt das Symbol, nicht die Kartenfarbe. */
  art?: string;
  leute?: Array<string>;
  /** Durchmesser des Symbolkreises; die Punkte folgen mit 77 %. */
  groesse?: number;
  titel?: string;
  style?: React.CSSProperties;
}
export function Kartenkopf(props: KartenkopfProps): JSX.Element;
```

#### KonfliktKarte

Quelle: `packages/design-system/components/karten/KonfliktKarte.jsx`

Die Karte für zwei Sachen, die sich treffen – sie zeigt es und hält niemanden auf.

```jsx
<KonfliktKarte titel="Lena schwimmt, Felix spielt Handball – beides um 16:00."
  erklaerung="Ein Auto, zwei Orte. Sofia ist bis 17:00 da." wer={["lena", "felix"]}
  schritt="Sofia fragen" zweitSchritt="Später" />
```

Register Family Manager. Kein Rot, kein Ausrufezeichen, kein "Fehler" – die Karte stellt fest und nennt einen Schritt.

```ts
/** Zwei Sachen treffen sich. Sichtbar, nie blockierend, mit naechstem Schritt. */
export interface KonfliktKarteProps {
  /** Was sich trifft, als Feststellung: "Lena schwimmt und Felix spielt - beides 16:00." */
  titel: string;
  /** Warum es klemmt, ein Satz. */
  erklaerung?: React.ReactNode;
  wer?: string[];
  /** Der naechste Schritt als Verb: "Tobias fragen". */
  schritt?: string;
  onSchritt?: () => void;
  zweitSchritt?: string;
  onZweitSchritt?: () => void;
  style?: React.CSSProperties;
}
export function KonfliktKarte(props: KonfliktKarteProps): JSX.Element;
```

#### SpurenJeMensch

Quelle: `packages/design-system/components/karten/SpurenJeMensch.jsx`

Spuren je Mensch – wenn drei Sachen gleichzeitig laufen und die Frage "wer wo" lautet.

```jsx
<SpurenJeMensch leute={["anna", "tobias", "sofia"]} von={15} bis={20} spuren={{
  anna:   [{ titel: "Kieferorthopädin", von: 16, bis: 17 }],
  tobias: [{ titel: "Abholen Halle Süd", von: 19, bis: 19.5, art: "fahrt", offen: true }],
  sofia:  [{ titel: "Abholen Schule", von: 15, bis: 15.5, art: "fahrt" }]
}} />
```

Jede Spur trägt Name und Avatar, nicht nur Farbe. Dieselben Daten wie im Stundenraster – ein Datenmodell, viele Ansichten.

```ts
/** Je Mensch eine Spur ueber die Stunden - die dritte Antwort auf Gleichzeitiges. */
export interface Spur {
  titel: string;
  /** Stunde als Dezimalzahl: 16.5 heisst 16:30. */
  von: number;
  bis: number;
  art?: "termin" | "fahrt" | "familie";
  offen?: boolean;
}
export interface SpurenJeMenschProps {
  /** Schluessel aus Familie Sonntag, eine Spur je Person. */
  leute: string[];
  /** Spuren je Personenschluessel. */
  spuren: Record<string, Spur[]>;
  /** Erste und letzte Stunde der Achse. */
  von?: number;
  bis?: number;
  style?: React.CSSProperties;
}
export function SpurenJeMensch(props: SpurenJeMenschProps): JSX.Element;
```

#### VorschlagKarte

Quelle: `packages/design-system/components/karten/VorschlagKarte.jsx`

Alberts Vorschlag auf dem iPhone – gelb, mit Formen, immer mit zwei Knöpfen.

```jsx
<VorschlagKarte titel="Samstag fehlt ein Fahrer."
  text="Rückfahrt vom Auswärtsspiel, 14:00. Bei Tobias steht ab 13:00 nichts."
  schritt="Tobias fragen" zweitSchritt="Später" />
```

So klingt Albert: eine Beobachtung, eine Frage, zwei Knöpfe. Nie "Ich habe für dich…". Auf dem Mac nimmst du stattdessen `<Karte art="vorschlag">` - dort ist der Vorschlag gestrichelt und ohne Füllung.

```ts
/**
 * Alberts Vorschlag am iPhone: gelbe Karte mit Formen, zwei Knoepfe, Unterzeile.
 */
export interface VorschlagKarteProps {
  /** Eine Beobachtung: "Samstag fehlt ein Fahrer." */
  titel: string;
  /** Zwei kurze Saetze: was er sieht, was daraus folgt. */
  text?: React.ReactNode;
  /** Erster Knopf, ein Verb: "Tobias fragen", "Übernehmen". */
  schritt?: string;
  onSchritt?: () => void;
  /** Zweiter Knopf. Es gibt immer zwei - Albert erledigt nie still. */
  zweitSchritt?: string;
  onZweitSchritt?: () => void;
  unterzeile?: string;
  style?: React.CSSProperties;
}
export function VorschlagKarte(props: VorschlagKarteProps): JSX.Element;
```

## Kopf

Der Kopf jeder Fläche: Anrede, Datum, Suche, Bereiche, Filter nach Menschen, Spanne der Ansicht. Auf dem Mac steht er über dem Wochenboard, am iPhone über dem Tag.

### kopf

#### Anredezeile

Quelle: `packages/design-system/components/kopf/Anredezeile.jsx`

Die grosse Zeile, mit der eine Fläche anfängt.

```jsx
<Anredezeile>Guten Morgen, Anna.</Anredezeile>
<Anredezeile geraet="phone" nebenzeile="3. September · KW 36">Mittwoch</Anredezeile>
```

Register Erzähler, wenn sie grüßt; Family Manager, wenn sie nur benennt. Punkt am Satzende, nie ein Ausrufezeichen. "du" zum Einzelnen, "ihr" zur Familie.

```ts
/** Die grosse Zeile oben auf der Flaeche - Bricolage 800, eng gelaufen. */
export interface AnredezeileProps {
  /** "Guten Morgen, Anna." | "Mittwoch" | "Woche 36" */
  children: React.ReactNode;
  /** 40 px auf dem Mac, 30 px auf dem iPhone. */
  geraet?: "mac" | "phone";
  /** Kleine Zeile darunter: "3. September · KW 36". */
  nebenzeile?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Anredezeile(props: AnredezeileProps): JSX.Element;
```

#### DatumPille

Quelle: `packages/design-system/components/kopf/DatumPille.jsx`

Die schwarze Datum-Pille unter der Anredezeile.

```jsx
<DatumPille onClick={kalenderAuf}>1. – 7. September</DatumPille>
```

Datum als `Mi 3.9.` oder `3. September`; Spannen mit Halbgeviertstrich und Leerzeichen.

```ts
/** Die schwarze Pille mit der Spanne: "1. – 7. September". */
export interface DatumPilleProps {
  /** Datum oder Spanne. Halbgeviertstrich mit Leerzeichen: "1. – 7. September". */
  children: React.ReactNode;
  onClick?: () => void;
  aufklappbar?: boolean;
  style?: React.CSSProperties;
}
export function DatumPille(props: DatumPilleProps): JSX.Element;
```

#### Kopfzeile

Quelle: `packages/design-system/components/kopf/Kopfzeile.jsx`

Der Kopf jeder Fläche auf dem Mac und iPad – Suche links, drei Kreise rechts.

```jsx
<Kopfzeile bereiche={["Termine", "Fahrten", "Aufgaben", "Dokumente", { name: "Post", zaehler: 2 }]}
  onPlus={() => setMenue(true)} />
```

Die Reihenfolge der Kreise steht fest: Klingel, Nachrichten, Plus – Plus ist rosa und immer der letzte. Chips sind gestrichelt, weil sie Bereiche einschränken und nichts anlegen.

```ts
/**
 * Der Kopf jeder Flaeche: Suchfeld mit rosa Lupe, Bereichs-Chips, drei Kreise rechts.
 */
export interface KopfzeileProps {
  platzhalter?: string;
  /** Bereichs-Chips, gestrichelt: "Termine", "Fahrten", "Aufgaben", "Dokumente", { name: "Post", zaehler: 2 }. */
  bereiche?: Array<string | { name: string; zaehler?: number }>;
  gewaehlterBereich?: string;
  onBereich?: (name: string) => void;
  onSuche?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  /** Rosa Punkt an der Klingel, wenn etwas Neues da ist. */
  klingelPunkt?: boolean;
  onKlingel?: () => void;
  onNachrichten?: () => void;
  /** Oeffnet das Schnellmenue "Schnell anlegen". */
  onPlus?: () => void;
  style?: React.CSSProperties;
}
export function Kopfzeile(props: KopfzeileProps): JSX.Element;
```

#### PersonenFilter

Quelle: `packages/design-system/components/kopf/PersonenFilter.jsx`

Der Personenfilter – Kreise, kein Auswahlmenü.

```jsx
<PersonenFilter leute={["anna", "tobias", "felix", "lena", "sofia"]}
  gewaehlt={gewaehlt} onWahl={setGewaehlt} />
```

Der erste Kreis ist schwarz mit zwei Köpfen und heisst "alle". Personenfarben sind überall dieselben; jeder Kreis trägt seine Initiale, damit Farbe nicht allein trägt.

```ts
/**
 * Die Kreise, mit denen man die Flaeche auf Leute einschraenkt.
 */
export interface PersonenFilterProps {
  /** Schluessel aus Familie Sonntag, in fester Reihenfolge. */
  leute: string[];
  /** Leeres Feld heisst alle. */
  gewaehlt?: string[];
  /** 32 px auf dem Mac, 44 px am iPhone, 56 px im Kinderbereich. */
  groesse?: number;
  onWahl?: (gewaehlt: string[]) => void;
  style?: React.CSSProperties;
}
export function PersonenFilter(props: PersonenFilterProps): JSX.Element;
```

#### SchnellMenue

Quelle: `packages/design-system/components/kopf/SchnellMenue.jsx`

Das Schnellmenü hinter dem rosa Plus.

```jsx
<SchnellMenue onWahl={art => anlegen(art)} />
```

Sechs Einträge, Gegenstände statt Verben – "Termin", nicht "Termin anlegen". Die Tastenkürzel stehen nur auf dem Mac.

```ts
/** Das Menue am Plus-Kreis: Termin, Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz. */
export interface SchnellMenueEintrag { name: string; zeichen?: string; taste?: string }
export interface SchnellMenueProps {
  titel?: string;
  eintraege?: SchnellMenueEintrag[];
  onWahl?: (name: string) => void;
  style?: React.CSSProperties;
}
export function SchnellMenue(props: SchnellMenueProps): JSX.Element;
```

#### SpannenRegler

Quelle: `packages/design-system/components/kopf/SpannenRegler.jsx`

Der Regler für die Spanne – dieselben Daten, andere Weite.

```jsx
<SpannenRegler gewaehlt="Mo – So" onWahl={setSpanne} />
```

Die Reihenfolge steht fest und wird nicht sortiert: Heute, 3 Tage, Mo – Fr, Mo – So, Monat. Halbgeviertstrich mit Leerzeichen in den Beschriftungen.

```ts
/** Die Spanne der Ansicht: Heute, 3 Tage, Mo – Fr, Mo – So, Monat. */
export interface SpannenReglerProps {
  spannen?: string[];
  gewaehlt?: string;
  onWahl?: (spanne: string) => void;
  /** "finger" gibt 44 px fuer iPhone und iPad. */
  ziel?: "zeiger" | "finger";
  style?: React.CSSProperties;
}
export function SpannenRegler(props: SpannenReglerProps): JSX.Element;
```

## Leiste

Die schwarze Leiste ist eine Signatur von Hey Albert. Auf dem Mac steht sie links, voll mit 220 px oder eingeklappt mit 72 px. Am iPhone steht sie unten, fixiert, mit dem herausstehenden Plus.

### leiste

#### LeisteMac

Quelle: `packages/design-system/components/leiste/LeisteMac.jsx`

Die schwarze Leiste des Mac – Logo, drei Gruppen, unten der Mensch.

```jsx
<LeisteMac aktiverOrt="Woche" onWahl={setOrt} style={{ height: "100%" }} />
<LeisteMac eingeklappt fassung="pille" aktiverOrt="Woche" />
```

Der aktive Ort trägt einen rosa Strich links und ein aufgehelltes Feld. Eingeklappt als `fassung="pille"` tritt er als rosa Kreis seitlich heraus und die Leiste beult sich um ihn. Albert steht nicht in der Leiste – er ist kein Ort.

Das Logo lädt aus `assets/logo-albert-hell.png`; setze auf `<html>` `data-albert-logo="<pfad>"`, wenn es woanders liegt.

```ts
/**
 * Die schwarze Leiste auf dem Mac - voll (220 px) oder eingeklappt (72 px) als Block oder als Pille.
 */
export interface LeisteOrt { name: string; zeichen: string; zaehler?: number }
export interface LeisteGruppe { gruppe: string; eintraege: LeisteOrt[] }
export interface LeisteMacProps {
  /** Der Ort, auf dem man steht: "Heute" | "Woche" | "Eingang" | "Essen" | ... */
  aktiverOrt?: string;
  /** Gruppen der Navigation. Standard: Flächen, Bereiche, Persönlich. */
  orte?: LeisteGruppe[];
  eingeklappt?: boolean;
  /** Eingeklappt gibt es zwei Fassungen: schmaler "block" oder rundum abgerundete "pille",
   *  bei der der aktive Ort als rosa Kreis seitlich heraustritt. */
  fassung?: "block" | "pille";
  /** Der Mensch unten in der Leiste. */
  ich?: string;
  onWahl?: (ort: string) => void;
  onKlappen?: () => void;
  onProfil?: () => void;
  style?: React.CSSProperties;
}
export function LeisteMac(props: LeisteMacProps): JSX.Element;
export const ORTE: LeisteGruppe[];
```

#### LeistePhone

Quelle: `packages/design-system/components/leiste/LeistePhone.jsx`

Die Leiste am unteren Rand des iPhones – fünf Plätze, nur das Plus tritt heraus.

```jsx
<LeistePhone aktiverOrt="Woche" onWahl={setOrt} onPlus={schnellAnlegen} />
```

Der aktive Ort ist rosa unterstrichen, der Eingang trägt seinen rosa Zaehler. Zielfläche 44 px, das Plus 56 px – es wird auch von Kindern gedrückt.

```ts
/**
 * Die schwarze Leiste unten am iPhone: Heute, Woche, Plus, Eingang, Ich.
 */
export interface LeistePhoneProps {
  aktiverOrt?: string;
  plaetze?: Array<{ name: string; zeichen: string; zaehler?: number; plus?: boolean }>;
  onWahl?: (ort: string) => void;
  onPlus?: () => void;
  style?: React.CSSProperties;
}
export function LeistePhone(props: LeistePhoneProps): JSX.Element;
export const PLAETZE: Array<{ name: string; zeichen: string; zaehler?: number; plus?: boolean }>;
```

## Zeit

Alles, was die Woche ordnet: die Reiter über dem Raster, das Stundenraster selbst, die Jetzt-Linie, die Woche als Liste und der Wochenüberblick. Alle zeigen dieselben Sachen aus demselben Datenmodell.

### zeit

#### JetztLinie

Quelle: `packages/design-system/components/zeit/JetztLinie.jsx`

Die Jetzt-Linie im Stundenraster.

```jsx
<JetztLinie zeit="16:40" oben={210} />
```

Rosa heisst hier "jetzt" – niemals "Fehler". Die Linie ist gestrichelt, läuft über die ganze Breite und fängt keine Klicks.

```ts
/** Gestrichelte Achse quer durch das Raster, mit der Uhrzeit als rosa Pille. */
export interface JetztLinieProps {
  /** Uhrzeit als HH:MM. */
  zeit?: string;
  /** px von oben, wenn die Linie im Raster absolut sitzt. */
  oben?: number;
  style?: React.CSSProperties;
}
export function JetztLinie(props: JetztLinieProps): JSX.Element;
```

#### Listenzeile

Quelle: `packages/design-system/components/zeit/Listenzeile.jsx`

Die Woche als Liste – für das iPhone, wo ein Raster zu dicht wird.

```jsx
<Listenzeile tag="Mi 3." heute text="heute · Anna und Felix" wert="3,0 h" aufgeklappt>
  <Karte kompakt titel="Elternabend Klasse 6" symbol="schule" zeit="19:00" leute={["anna"]} />
</Listenzeile>
```

Der Text sagt, wer den Tag trägt, nicht wie voll er ist. Zahlen deutsch: "3,0 h".

```ts
/** Eine Zeile der Woche als Liste: Tag-Pille, Satzteil, verplante Zeit. */
export interface ListenzeileProps {
  /** Tag als Pille: "Mo 1.", "Mi 3.". */
  tag: string;
  heute?: boolean;
  /** Ein Satzteil, klein: "heute · Anna und Felix", "vorbei · zum Aufklappen". */
  text?: React.ReactNode;
  /** Verplante Zeit rechts: "3,0 h". */
  wert?: string;
  /** Setzt das Chevron; undefined heisst kein Chevron. */
  aufgeklappt?: boolean;
  onClick?: () => void;
  /** Die Karten des Tages, wenn die Zeile offen ist. */
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Listenzeile(props: ListenzeileProps): JSX.Element;
```

#### Tagesreiter

Quelle: `packages/design-system/components/zeit/Tagesreiter.jsx`

Die Tagesreiter – auf dem Mac Karten, am iPhone Kreise.

```jsx
<Tagesreiter kw={36} tage={[
  { tag: "MONTAG", zahl: "1.9." }, { tag: "MITTWOCH", zahl: "3.9.", heute: true }, { tag: "SONNTAG", zahl: "7.9." }
]} />
<Tagesreiter variante="phone" gewaehlt="MI" tage={[{ tag: "MO", zahl: "1" }, { tag: "MI", zahl: "3", heute: true }, { tag: "SA", zahl: "6", offen: true }]} />
```

Heute ist schwarz, der Sonntag steht in gedämpftem Rosa-Grau. Am iPhone heisst ein rosa Kreis: an diesem Tag ist etwas offen.

```ts
/**
 * Die Reiter ueber dem Raster: Wochentag in Kapitaelchen, Datum darunter.
 */
export interface Tag {
  /** Wochentag: "MONTAG" auf dem Mac, "MO" am iPhone.
   *  Das ist der Schluessel: onWahl meldet diesen Wert zurueck, und "gewaehlt" wird dagegen geprueft. */
  tag: string;
  /** Datum: "1.9." auf dem Mac, "1" am iPhone. */
  zahl: string;
  /** Nur Mac: eigener Schluessel fuer onWahl, wenn "tag" nicht eindeutig ist. */
  name?: string;
  heute?: boolean;
  /** Am iPhone: Tag mit Offenem bekommt einen rosa Kreis. */
  offen?: boolean;
}
export interface TagesreiterProps {
  tage: Tag[];
  /** Am iPhone der gewaehlte Tag - derselbe Wert wie "tag", z. B. "MI". */
  gewaehlt?: string;
  variante?: "mac" | "phone";
  /** Kalenderwoche links vor den Reitern - nur auf dem Mac. */
  kw?: string | number;
  onWahl?: (tag: string) => void;
  style?: React.CSSProperties;
}
export function Tagesreiter(props: TagesreiterProps): JSX.Element;
```

#### Wochenueberblick

Quelle: `packages/design-system/components/zeit/Wochenueberblick.jsx`

Die Woche auf einen Blick — die Frage, die sie beantwortet: **Wer trägt welchen Tag, und wo fehlt jemand?**

```jsx
<Wochenueberblick tage={[
  { tag: "MO", zahl: "1", stunden: "3,4 h", sachen: [{ wer: "sofia", art: "fahrt" }, { wer: "lena", art: "schwimmen" }] },
  { tag: "MI", zahl: "3", heute: true, stunden: "3,0 h", sachen: [{ wer: "sofia", art: "fahrt" }, { wer: "anna", art: "arzt" }, { wer: "felix", art: "sport" }] },
  { tag: "SA", zahl: "6", stunden: "2,0 h", sachen: [{ wer: "felix", art: "sport" }, { offen: true, art: "fahrt", titel: "Rückfahrt" }] }
]} />
```

Jede Sache ist ein kleiner Zettel: die Initiale sagt wer, das Zeichen sagt was. Der Tag mit Offenem zeigt es laut — gestrichelter Zettel, und oben zählt „1 ohne Zuständigen“. Dieselben Daten wie Raster und Liste; das ist der Blick, den man am iPhone im Vorbeigehen wirft.

```ts
/**
 * Die Woche auf einen Blick: wer trägt welchen Tag, wo fehlt jemand.
 * Je Sache ein kleiner Zettel — Initiale in Personenfarbe plus Zeichen der Sache.
 */
export interface UeberblickSache {
  /** Personenschlüssel des Zuständigen. */
  wer?: string;
  /** Sach-Rolle für das Zeichen: "fahrt", "schule", "sport", "essen", "arzt", "musik", "freude", "ritual". */
  art?: string;
  titel?: string;
  /** Ohne Zuständigen: gestrichelter Zettel mit „?“ in Offen-Rosa. Zählt oben mit. */
  offen?: boolean;
  /** Familie und Ritual: gelber Zettel. */
  familie?: boolean;
}
export interface UeberblickTag {
  /** Kurzform: "MO" … "SO". */
  tag: string;
  zahl: string;
  heute?: boolean;
  /** Verplante Zeit des Tages: "3,0 h". */
  stunden?: string;
  sachen?: UeberblickSache[];
}
export interface WochenueberblickProps {
  /** Überschrift der Karte. Standard „Wer trägt die Woche“. */
  titel?: string;
  tage: UeberblickTag[];
  style?: React.CSSProperties;
}
export function Wochenueberblick(props: WochenueberblickProps): JSX.Element;
```

#### Zeitachse

Quelle: `packages/design-system/components/zeit/Zeitachse.jsx`

Das Stundenraster von Mac und iPhone – es setzt Karten, es baut sie nicht.

```jsx
<Zeitachse von="14:00" bis="19:00" jetzt="16:40" spalten={[
  { name: "Mi 3.9.", sachen: [
    { von: "16:00", bis: "17:00", element: <Karte titel="Kieferorthopädin" symbol="arzt" leute={["anna", "lena"]} /> }
  ] }
]} />
```

Eine Spalte je Tag (Woche) oder je Mensch (Spuren). Uhrzeiten immer `HH:MM`; die Achse läuft in Roboto Mono mit tabellarischen Ziffern.

Die Achse setzt nur den Anfang und eine Mindesthöhe aus der Dauer. **Sie deckelt nie** – eine Karte wird so hoch, wie ihr Inhalt braucht, und legt sich bei Bedarf über die nächste (spätere Sachen liegen oben). Gib der Karte darum kein `height` und kein `overflow: hidden` mit, sonst schneidest du ihren Inhalt ab.

```ts
/**
 * Das Stundenraster: Achse links, eine Spalte je Tag oder Mensch, Sachen nach Uhrzeit gesetzt.
 */
export interface ZeitachseSache {
  /** Beginn als HH:MM. */
  von: string;
  /** Ende als HH:MM; ohne Ende bekommt die Sache ihre Mindesthoehe. */
  bis?: string;
  /** Was gezeichnet wird - in der Regel eine <Karte>. */
  element: React.ReactNode;
  /** Zusaetzliche Mindesthoehe in px, damit eine kurze Sache lesbar bleibt.
   *  Die Dauer setzt ebenfalls eine Mindesthoehe - gedeckelt wird nie, Karten wachsen mit ihrem Inhalt. */
  mindest?: number;
}
export interface ZeitachseSpalte { name?: string; sachen?: ZeitachseSache[] }
export interface ZeitachseProps {
  von?: string;
  bis?: string;
  /** Abstand der Marken in Minuten. Standard 30. */
  schritt?: number;
  /** Hoehe einer Stunde in px. Standard 80. */
  pxProStunde?: number;
  spalten: ZeitachseSpalte[];
  /** Uhrzeit der Jetzt-Linie, z. B. "16:40". Ohne Angabe keine Linie. */
  jetzt?: string;
  style?: React.CSSProperties;
}
export function Zeitachse(props: ZeitachseProps): JSX.Element;
```

## Zustände

Leer, laden, bestätigt. Ein leerer Zustand sagt, was hierher gehört, warum es leer ist und was man tun kann. Laden zeigt ein Skelett in der Form des Inhalts, nie einen Kreisel. Jede Änderung bekommt einen Toast mit „Rückgängig“.

### zustaende

#### LeererZustand

Quelle: `packages/design-system/components/zustaende/LeererZustand.jsx`

Der leere Zustand – drei Dinge und ein Knopf.

```jsx
<LeererZustand mitAlbert
  was="Hier landet die Post der Schule."
  warum="Diese Woche kam nichts an. Sobald etwas kommt, macht Albert daraus einen Vorschlag."
  schritt="Post verbinden"
  randnotiz="Ich schaue täglich rein." />
```

Kein "Fehler", kein "Ups", kein Ausrufezeichen. Albert erscheint hier als Figur – in Listen, im Safe, bei Finanzen nie.

```ts
/**
 * Der leere Zustand: was hierher gehoert, warum es leer ist, ein Knopf.
 */
export interface LeererZustandProps {
  /** Was hierher gehoert - ein Satz, kein Titel: "Hier landet die Post der Schule." */
  was: React.ReactNode;
  /** Warum es leer ist: "Diese Woche kam nichts an." */
  warum?: React.ReactNode;
  /** Was man tun kann, als Verb: "Post verbinden". */
  schritt?: string;
  onSchritt?: () => void;
  /** Albert als Figur - nur in Onboarding, leeren Zustaenden, Briefings, Kinderbereich, Jahresbuch. */
  mitAlbert?: boolean;
  /** Alberts Bleistift-Randnotiz in Reenie Beanie. Nur im Register Erzaehler. */
  randnotiz?: string;
  style?: React.CSSProperties;
}
export function LeererZustand(props: LeererZustandProps): JSX.Element;
```

#### Skelett

Quelle: `packages/design-system/components/zustaende/Skelett.jsx`

Das Skelett – die Form dessen, was gleich kommt.

```jsx
<Skelett form="board" spalten={7} zeilen={3} />
```

Nie ein Kreisel, nie ein Fortschrittsbalken. Es atmet zwischen Karte und Zweitknopf-Beige und steht still, wenn das System weniger Bewegung will.

```ts
/** Skelett in der Form des Inhalts. Atmet 300 ms, steht bei reduzierter Bewegung, nie ein Kreisel. */
export interface SkelettProps {
  /** "karte" (eine Karte) | "zeile" (Liste) | "board" (Stundenraster). */
  form?: "karte" | "zeile" | "board";
  /** Zeilen je Spalte. */
  zeilen?: number;
  /** Spalten im Board. */
  spalten?: number;
  style?: React.CSSProperties;
}
export function Skelett(props: SkelettProps): JSX.Element;
```

#### Toast

Quelle: `packages/design-system/components/zustaende/Toast.jsx`

Der Toast – eine Feststellung und ein Rückweg.

```jsx
<Toast text="Tobias fährt am Samstag." onZurueck={zurueck} />
```

Albert stellt fest ("Fertig."), er lobt nicht. Ohne `onZurueck` gibt es keinen Toast – was nicht rücknehmbar ist, wird vorher gefragt.

```ts
/** Kurze Rueckmeldung mit Rueckweg. Jedes optimistische Update bekommt einen. */
export interface ToastProps {
  /** Feststellung im Praesens, ohne Lob: "Tobias fährt am Samstag." */
  text: React.ReactNode;
  zurueck?: string;
  onZurueck?: () => void;
  style?: React.CSSProperties;
}
export function Toast(props: ToastProps): JSX.Element;
```

## Kinder

Der Taler-Stand eines Kindes. Jedes Kind sieht nur den eigenen Stand. Es gibt keine Rangliste, keinen Vergleich unter Geschwistern und keinen Abzug.

### kinder

#### TalerStand

Quelle: `packages/design-system/components/kinder/TalerStand.jsx`

Der Taler-Stand für Kinder – Register Vorleser, kurze Sätze, grosse Wörter.

```jsx
<TalerStand wer="lena" taler={14} ziel={30} zielName="Skateboard"
  geschafft={["Tisch gedeckt", "Zimmer aufgeräumt", "Schwimmzeug gepackt"]}
  regal={[{ name: "Kino", taler: 20 }, { name: "Eis", taler: 4 }]} />
```

Nicht verhandelbar: keine Rangliste, kein Geschwistervergleich, kein Abzug, kein roter Stand, kein Serien-Druck. Der Streifen zeigt das Sparziel – nie, wie viel jemand "aufholen" muss. Zielflächen 56 px.

```ts
/**
 * Der Taler-Stand eines Kindes: grosse Zahl, Sparziel als Streifen, Regal der Eltern.
 */
export interface TalerStandProps {
  /** Das Kind - jedes Kind sieht nur den eigenen Stand. */
  wer?: string;
  /** Erreichte Taler. Nie negativ, es gibt keinen Abzug. */
  taler: number;
  /** Taler, die das Sparziel kostet. */
  ziel?: number;
  /** Name des Sparziels: "Skateboard". */
  zielName?: string;
  /** Was das Kind geschafft hat, als Pillen. Nie eine Quote. */
  geschafft?: string[];
  /** Das Regal der Eltern: was man sich holen kann und was es kostet. */
  regal?: Array<{ name: string; taler: number }>;
  style?: React.CSSProperties;
}
export function TalerStand(props: TalerStandProps): JSX.Element;
```

## Scan

Der Weg vom Papier zum Vorschlag: Kamera mit Kantenrahmen, Seitenstapel, dann ein Vorschlag mit Absender, Betrag, Frist und Ablage. Nichts wird abgelegt, bevor ein Mensch „Übernehmen“ wählt.

### scan

#### ScannerFluss

Quelle: `packages/design-system/components/scan/ScannerFluss.jsx`

Der Scanner – drei Schritte: Kamera, Stapel, Vorschlag.

```jsx
<ScannerFluss schritt="vorschlag" seiten={2} vorschlag={{
  titel: "Rechnung Musikschule", absender: "Musikschule Nord",
  betrag: "48,00 €", frist: "18. September", ablage: "Wichtiges › Verträge"
}} />
```

Der Vorschlag läuft im Register Sachbearbeiter: nüchtern, vollständig, kein Schmuck, keine Formen. „Übernehmen“ und „Rückgängig“ stehen immer beide da — Albert legt nichts still ab.

```ts
/**
 * Der Scanner-Fluss: Kamera mit Kantenrahmen, Seitenstapel, Vorschlagskarte.
 */
export interface ScannerVorschlag {
  /** Was Albert gelesen hat, als Gegenstand: "Rechnung Musikschule". */
  titel: string;
  absender?: string;
  /** Betrag deutsch: "48,00 €". */
  betrag?: string;
  /** Frist als Datum: "18. September". */
  frist?: string;
  /** Wohin es soll: "Wichtiges › Verträge". */
  ablage?: string;
}
export interface ScannerFlussProps {
  schritt?: "kamera" | "stapel" | "vorschlag";
  /** Zahl der aufgenommenen Seiten. */
  seiten?: number;
  vorschlag?: ScannerVorschlag;
  onAufnehmen?: () => void;
  onUebernehmen?: () => void;
  onZurueck?: () => void;
  style?: React.CSSProperties;
}
export function ScannerFluss(props: ScannerFlussProps): JSX.Element;
```

## Website

Die Bauteile der Homepage, aus dem Homepage-Blueprint. Ein Ziel pro Bildschirm, ein Verb pro Knopf, ein Feld pro Formular. Die Website teilt Palette und Tokens mit der App. Einen eigenen Token-Satz für die Website gibt es nicht.

### website

#### Akkordeon

Quelle: `packages/design-system/components/website/Akkordeon.jsx`

Das Akkordeon für die Fragen.

```jsx
<Akkordeon fragen={[{ frage: "Gibt es Albert für Android?", antwort: "Nein. iPhone, iPad, Mac. Gäste erhalten Einladungen per Link." }]} />
```

Sechs bis acht Fragen, in der Reihenfolge ihrer Häufigkeit. Antworten im Register Sachbearbeiter: erst die Antwort, dann ein Satz.

```ts
/** Fragen und kurze Antworten, eine offen. */
export interface Frage { frage: string; antwort: React.ReactNode }
export interface AkkordeonProps {
  fragen: Frage[];
  /** Index der anfangs offenen Frage; -1 fuer keine. */
  offen?: number;
  style?: React.CSSProperties;
}
export function Akkordeon(props: AkkordeonProps): JSX.Element;
```

#### Anmerkung

Quelle: `packages/design-system/components/website/Anmerkung.jsx`

Die Anmerkung in Tinte – drei bis vier auf der Heldenansicht, absolut über dem Bild gesetzt.

```jsx
<Anmerkung text="Gestrichelt in Rosa: alles, wofür noch niemand zuständig ist" richtung="links" style={{ position: "absolute", left: 620, top: 300 }} />
```

Handschrift (Reenie Beanie) ist hier erlaubt: Register Erzähler, keine Bedienung.

```ts
/** Anmerkungslinie in Tinte, die auf ein Detail im Bild zeigt. */
export interface AnmerkungProps {
  text: string;
  /** Wohin der Zeiger geht. */
  richtung?: "links" | "rechts";
  /** Laenge der Linie in px. */
  laenge?: number;
  style?: React.CSSProperties;
}
export function Anmerkung(props: AnmerkungProps): JSX.Element;
```

#### Bildplatz

Quelle: `packages/design-system/components/website/Bildplatz.jsx`

Der Platzhalter für Zeichnung, Foto oder Screenshot auf der Website.

```jsx
<Bildplatz was="Tuschezeichnung" motiv="Turnbeutel am Haken, ein gelber Marker" />
<Bildplatz was="Foto" motiv="Das gedruckte Jahresbuch, aufgeschlagen, Küchentisch von oben" verhaeltnis="16 / 10" akzent={false} />
```

Regeln fürs Bild: Tinte auf Papier, genau ein gelber Akzent, kein Stockfoto, kein 3D, kein KI-Bild, keine Kindergesichter. Genau ein echtes Foto auf der ganzen Seite – der Gründer.

```ts
/** Platzhalter fuer eine Tuschezeichnung, ein Foto oder einen Screenshot - sagt, was hierher gehoert. */
export interface BildplatzProps {
  /** "Tuschezeichnung" | "Foto" | "Screenshot" */
  was?: string;
  /** Das Motiv in einem Satzteil: "Turnbeutel am Haken, gelber Marker". */
  motiv?: string;
  /** CSS aspect-ratio, z. B. "4 / 3", "1 / 1", "16 / 10". */
  verhaeltnis?: string;
  /** Der eine gelbe Markerakzent. Aus, wenn das Bild selbst einen traegt. */
  akzent?: boolean;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Bildplatz(props: BildplatzProps): JSX.Element;
```

#### EmailZeile

Quelle: `packages/design-system/components/website/EmailZeile.jsx`

Das eine Feld der Website.

```jsx
<EmailZeile onSenden={email => merken(email)} />
```

Ein Feld: 12,4 % tragen sich ein; vier Felder: die Hälfte. Kein Name, kein Häkchen, kein zweites Feld.

```ts
/** Ein E-Mail-Feld und ein Knopf - nie mehr Felder. */
export interface EmailZeileProps {
  platzhalter?: string;
  knopf?: string;
  onSenden?: (email: string) => void;
  /** Am Handy untereinander. */
  gestapelt?: boolean;
  style?: React.CSSProperties;
}
export function EmailZeile(props: EmailZeileProps): JSX.Element;
```

#### Fusszeile

Quelle: `packages/design-system/components/website/Fusszeile.jsx`

Die Fusszeile.

```jsx
<Fusszeile />
```

Impressum, Datenschutz, Kontakt, Changelog, Alle Funktionen, DE/EN. Kein Newsletter-Formular, keine Social-Icons ohne Kanal.

```ts
/** Die Fusszeile: nur Kanaele, die tatsaechlich bespielt werden. */
export interface FusszeileProps {
  links?: string[];
  sprache?: string;
  style?: React.CSSProperties;
}
export function Fusszeile(props: FusszeileProps): JSX.Element;
```

#### GrenzenListe

Quelle: `packages/design-system/components/website/GrenzenListe.jsx`

Die wichtigste Sektion der Website: Grenzen statt Versprechen.

```jsx
<GrenzenListe />
```

Register Sachbearbeiter. Jeder Satz ist überprüfbar. Nirgends das Wort "KI", kein Siegel, kein "bankenähnlich".

```ts
/** "Was Albert nicht tut" - fuenf ueberpruefbare Saetze mit Haarlinien-Zeichen. */
export interface Grenze { zeichen: string; satz: string; erklaerung: string }
export interface GrenzenListeProps {
  eintraege?: Grenze[];
  style?: React.CSSProperties;
}
export function GrenzenListe(props: GrenzenListeProps): JSX.Element;
```

#### ModulReihe

Quelle: `packages/design-system/components/website/ModulReihe.jsx`

Die Modul-Reihe – sechs auf der Homepage, nicht einundzwanzig.

```jsx
<ModulReihe rollenname="Wer fährt, wen, womit, wann los" bildRechts
  text="Fahrzeit und Puffer rechnet Albert. Fahrten ohne Fahrer sind gestrichelt – Oma darf übernehmen."
  bild={<Bildplatz was="Screenshot" motiv="Fahrtenkarte mit Fahrer-Punkten" />} />
```

Rollenname statt Feature-Name. Höchstens 40 Wörter je Modul.

```ts
/** Eine Modul-Reihe: Rollenname, zwei Saetze, Bild - abwechselnd links und rechts. */
export interface ModulReiheProps {
  /** Der Rollenname, kein Feature-Name: "Der Plan, der die Einkaufsliste schreibt". */
  rollenname: string;
  /** Zwei Saetze. */
  text: React.ReactNode;
  bild: React.ReactNode;
  bildRechts?: boolean;
  /** Am Handy untereinander, Bild oben. */
  gestapelt?: boolean;
  style?: React.CSSProperties;
}
export function ModulReihe(props: ModulReiheProps): JSX.Element;
```

#### PreisKarte

Quelle: `packages/design-system/components/website/PreisKarte.jsx`

Die Preiskarte – eine, nicht drei.

```jsx
<PreisKarte monat="X,XX €" jahr="XX €" hinweis="Wir sagen euch den Preis, bevor ihr etwas eingebt." />
```

Register Sachbearbeiter. Kein "ab", kein Sternchen, keine versteckte Stufe. Steht der Preis nicht fest, sagt die Karte genau das.

```ts
/** Die eine Preiskarte. Ein Preis, alles drin. */
export interface PreisKarteProps {
  titel?: string;
  /** Monatspreis in Tabellenziffern: "6,99 €". Platzhalter "X,XX €", solange der Preis nicht feststeht. */
  monat?: string;
  jahr?: string;
  zeilen?: string[];
  knopf?: string;
  onKnopf?: () => void;
  /** "30 Tage kostenlos, ohne Kartendaten" - nur wenn es stimmt. */
  hinweis?: string;
  style?: React.CSSProperties;
}
export function PreisKarte(props: PreisKarteProps): JSX.Element;
```

#### Schritt

Quelle: `packages/design-system/components/website/Schritt.jsx`

Der Schritt – Nummer, Ausschnitt, ein Wort, zwei Sätze.

```jsx
<Schritt nummer={2} titel="Sehen" text="Jede Person hat ihre Farbe, jeder Tag seine Spalte. Was ohne Zuständigen ist, trägt einen gestrichelten Rand – bis jemand es nimmt.">
  <Karte art="offen" titel="Rückfahrt Turnier" zeit="18:40" symbol="fahrt" />
</Schritt>
```

Drei Schritte sind die Grenze – vier werden nicht mehr gelesen.

```ts
/** Ein Schritt in "So funktioniert es". Drei Schritte, nie vier. */
export interface SchrittProps {
  nummer: number | string;
  /** Ein Wort: "Sagen", "Sehen", "Sonntag". */
  titel: string;
  /** Zwei Saetze. */
  text: React.ReactNode;
  /** Der kleine Ausschnitt aus dem Produkt. */
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Schritt(props: SchrittProps): JSX.Element;
```

#### StickyKnopf

Quelle: `packages/design-system/components/website/StickyKnopf.jsx`

Der fixierte Knopf am Handy.

```jsx
<StickyKnopf sichtbar={heroWeg} onKnopf={zurListe} />
```

Erst einblenden, wenn der Hero aus dem Bild ist – sonst stehen zwei gleiche Knöpfe untereinander.

```ts
/** Fixierter Knopf am unteren Rand - nur am Handy, ab Sektion 2. */
export interface StickyKnopfProps {
  knopf?: string;
  onKnopf?: () => void;
  sichtbar?: boolean;
  style?: React.CSSProperties;
}
export function StickyKnopf(props: StickyKnopfProps): JSX.Element | null;
```

#### SzeneKarte

Quelle: `packages/design-system/components/website/SzeneKarte.jsx`

Die Szenenkarte – "das sind wir", ohne Schuldgefühl.

```jsx
<SzeneKarte motiv="Turnbeutel am Haken" satz="Der Turnbeutel, der zu Hause liegt – obwohl zwei Leute dran gedacht hatten." />
```

Register Erzähler. Kein "Bist du auch überfordert?" – konkrete Szenen lösen dieselbe Wiedererkennung aus, ohne zu kränken.

```ts
/** Eine Alltagsszene: Zeichnung und ein konkreter Satz. */
export interface SzeneKarteProps {
  /** Motiv der Zeichnung, fuer den Platzhalter. */
  motiv?: string;
  /** Der Satz - mit Uhrzeit, Betrag oder Gegenstand: "Freitag, 18:40: Rückfahrt vom Turnier. Fahrer: niemand." */
  satz: React.ReactNode;
  /** Eigenes Bild statt Platzhalter. */
  bild?: React.ReactNode;
  style?: React.CSSProperties;
}
export function SzeneKarte(props: SzeneKarteProps): JSX.Element;
```

#### Vertrauenszeile

Quelle: `packages/design-system/components/website/Vertrauenszeile.jsx`

Die kleine Zeile unter dem Knopf.

```jsx
<Vertrauenszeile />
```

Drei Fakten, überprüfbar, ohne Siegel. Nie "100 % sicher", nie ein Schloss.

```ts
/** Kleine Zeile unter dem Knopf: drei ueberpruefbare Fakten, mit Punkt getrennt. */
export interface VertrauenszeileProps {
  fakten?: string[];
  style?: React.CSSProperties;
}
export function Vertrauenszeile(props: VertrauenszeileProps): JSX.Element;
```

#### WebNavigation

Quelle: `packages/design-system/components/website/WebNavigation.jsx`

Die schlanke Navigation oben auf der Website.

```jsx
<WebNavigation onKnopf={zurListe} />
```

Ein Knopf, nie zwei – drei oder mehr Knöpfe im Hero kosten. Keine Mega-Menüs. Der Knopf nennt die Folge, kein "Los geht's". Links: Funktionen · Vertrauen · Preis · Fragen.

Die Marke steht als schwarzer Kreis mit dem hellen Kritzelball und der Wortmarke in Bricolage – so bleibt sie auf Creme ruhig. Der Pfad zur Datei kommt aus `data-albert-logo-auf-schwarz` auf `<html>` (Vorgabe: `assets/logo-albert-auf-schwarz.png`).

```ts
/** Die Navigation der Website: Logo, drei bis vier Links, ein Knopf. */
export interface WebNavigationProps {
  links?: string[];
  /** Der eine Knopf. Nennt die Folge: "Auf die Liste setzen", nach dem Start "Albert laden". */
  knopf?: string;
  onKnopf?: () => void;
  onLink?: (link: string) => void;
  /** Am Handy: nur Logo und Knopf. */
  geraet?: "desktop" | "phone";
  style?: React.CSSProperties;
}
export function WebNavigation(props: WebNavigationProps): JSX.Element;
```

## HQ

Zwei Bauteile für Hey Albert HQ, das interne Werkzeug des Teams. Sie zeigen Familien und den Weg von der Liste bis zur Zahlung. In der App für Familien kommen sie nicht vor.

### hq

#### Satellit

Quelle: `packages/design-system/components/hq/Satellit.jsx`

Die Kreise einer Familie – wer zum Kern gehört, wer zur Familie, wer Freund oder Helfer ist.

```jsx
<Satellit name="Familie Sonntag" mitglieder={[
  { name: "Anna Sonntag", rolle: "owner", beziehung: "mother", farbe: 1 },
  { name: "Tobias Sonntag", rolle: "adult", beziehung: "father", farbe: 2 },
  { name: "Felix Sonntag", rolle: "child", beziehung: "son", farbe: 3 },
  { name: "Lena Sonntag", rolle: "child", beziehung: "daughter", farbe: 4 },
  { name: "Grete Sonntag", rolle: "guest", beziehung: "grandmother", farbe: 7 },
  { name: "Sofia", rolle: "service", beziehung: "au_pair", farbe: 5 }
]} />
```

Drei Ringe, gestrichelt nach aussen hin, der Kern mit fester Linie. Jede Person als Klebezettel in ihrer Personenfarbe mit Initialen, der Vorname darunter. In der Mitte die Initialen des Haushalts auf Tinte. Register Family Manager: Beschriftungen sind Wörter, keine Sätze – "Kern", "Familie", "Freunde und Helfer".

```ts
/** Das Satellitenbild einer Familie: Kern, Familie, Freunde und Helfer als drei Ringe um den Haushalt. */
export interface SatellitMitglied {
  id?: string; name: string;
  /** Rolle im Haushalt: owner | adult | child | guest | service */
  rolle: "owner" | "adult" | "child" | "guest" | "service";
  /** Verwandtschaft (albert.kinship): mother, father, partner, daughter, son, grandmother, grandfather, aunt, uncle, au_pair, household_help, friend, other */
  beziehung?: string | null;
  /** Personenfarbe 1–8 (6 und 8 sind nicht vergeben). */
  farbe?: number | null;
}
export interface SatellitProps {
  mitglieder: SatellitMitglied[];
  /** Name des Haushalts, Initialen in der Mitte. */
  name?: string;
  /** Beschriftung der Ringe. */
  worte?: { kern: string; familie: string; freunde: string };
  style?: React.CSSProperties;
}
export function Satellit(props: SatellitProps): JSX.Element;
/** Welcher Ring: kern (owner, adult, child), familie (Gast mit Verwandtschaft), freunde (alles andere). */
export function kreisVon(m: SatellitMitglied): "kern" | "familie" | "freunde";
```

#### Trichter

Quelle: `packages/design-system/components/hq/Trichter.jsx`

Der Trichter im HQ – wie viele Familien von Stufe zu Stufe bleiben.

```jsx
<Trichter stufen={[
  { name: "eingetragen", n: 120 }, { name: "bestätigt", n: 96 }, { name: "Umfrage beantwortet", n: 41 },
  { name: "Trial", n: 18 }, { name: "zahlend", n: 9 }
]} />
```

Balken in Gelb (Fläche Familie), Zahl in Tabellenziffern, die Quote zur Stufe davor in Zweittext. Stufennamen klein geschrieben, wie Zustände – keine Sätze, kein Ausrufezeichen.

```ts
/** Stufen von der Liste bis zur Zahlung als Balken mit Quote zur Stufe davor. */
export interface TrichterStufe { name: string; n: number }
export interface TrichterProps { stufen: TrichterStufe[]; style?: React.CSSProperties }
export function Trichter(props: TrichterProps): JSX.Element;
```

## Web-Primitive

Für Formulare, Dialoge und Tabellen im Web gibt es zehn Primitive nach dem Vorbild von shadcn/ui. Sie liegen in `bauteile/ui/` und laufen auf unseren Rollen: `tailwind/shadcn.css` bildet die Variablen von shadcn auf `--grund`, `--karte`, `--tinte` und die anderen Rollen ab. Größen sind Zielflächen: Zeiger 28, Finger 44, Kind 56.

### ui

- `badge` · packages/design-system/bauteile/ui/badge.tsx

- `button` · packages/design-system/bauteile/ui/button.tsx

- `checkbox` · packages/design-system/bauteile/ui/checkbox.tsx

- `dialog` · packages/design-system/bauteile/ui/dialog.tsx

- `input` · packages/design-system/bauteile/ui/input.tsx

- `select` · packages/design-system/bauteile/ui/select.tsx

- `sheet` · packages/design-system/bauteile/ui/sheet.tsx

- `table` · packages/design-system/bauteile/ui/table.tsx

- `tabs` · packages/design-system/bauteile/ui/tabs.tsx

- `textarea` · packages/design-system/bauteile/ui/textarea.tsx

> **Hinweis**
>
> shadcn/ui ist hier ein Werkzeug, keine zweite Bauteil-Quelle. Ein Primitiv bekommt nie eigene Farben oder Radien. Was ein eigenes Gesicht braucht, wird ein Bauteil oben.

## Website-Blöcke

Die Website wird aus Blöcken gebaut, die Payload verwaltet. Zu jedem Block-Slug in `packages/content-model/src/bloecke.ts` gibt es genau ein Bauteil in `bloecke/`. `RenderBloecke` wählt nach `blockType`, filtert nach Markt und gibt Sprache und Markt weiter. `pnpm test` im Designsystem prüft, dass Slug und Bauteil zusammenpassen.

### bloecke

- `Aufruf` · packages/design-system/bloecke/Aufruf.tsx

- `Bausteine` · packages/design-system/bloecke/Bausteine.tsx

- `Bereiche` · packages/design-system/bloecke/Bereiche.tsx

- `Bild` · packages/design-system/bloecke/Bild.tsx

- `Eintragen` · packages/design-system/bloecke/Eintragen.tsx

- `Faq` · packages/design-system/bloecke/Faq.tsx

- `Hero` · packages/design-system/bloecke/Hero.tsx

- `Hinweisleiste` · packages/design-system/bloecke/Hinweisleiste.tsx

- `Preise` · packages/design-system/bloecke/Preise.tsx

- `Satz` · packages/design-system/bloecke/Satz.tsx

- `Schritte` · packages/design-system/bloecke/Schritte.tsx

- `Text` · packages/design-system/bloecke/Text.tsx

- `Themen` · packages/design-system/bloecke/Themen.tsx

- `Umfrage` · packages/design-system/bloecke/Umfrage.tsx

- `Vergleich` · packages/design-system/bloecke/Vergleich.tsx

- `Zitat` · packages/design-system/bloecke/Zitat.tsx

## Ein neues Bauteil beitragen

Kein Bauteil entsteht nur in einer App. Was in `apps/web`, in `AlbertUI` oder auf der Website neu gebaut wird, kommt zuerst hierher oder spätestens im selben Commit.

1. Prüfen, ob es das Bauteil schon gibt. Oft reicht eine neue Art eines bestehenden Bauteils.
2. Im passenden Ordner unter `components/` vier Dateien anlegen: `.jsx`, `.d.ts`, `.prompt.md` und eine `@dsCard`-Karte mit allen Zuständen.
3. Nur Rollen-Tokens verwenden. Fehlt eine Rolle, kommt sie in `tokens/quelle/` dazu, und `pnpm tokens` erzeugt CSS, Tailwind und Swift neu.
4. Den Eintrag in `_ds_manifest.json` und die Liste im `readme.md` ergänzen.
5. `pnpm qa` laufen lassen: kein Hex-Wert, kein Schatten, kein verbotenes Wort, kein Ausrufezeichen, kein Bild ohne `alt`, kein freier Radius.
6. Den Agenten `design-pruefer` die Definition of Done prüfen lassen.

> **Nicht so**
>
> Ein Bauteil, das nur in `apps/web/src/bausteine/` lebt. Ein Knopf mit eigener Farbe für eine einzige Fläche. Ein Name wie `PrimaryButton` neben dem `Knopf`.


---

# Muster

> Wie Bauteile zusammen Antworten geben – Bündel, Vorschlag, Konflikt, ohne Zuständigen, Spuren, Formulare, Listen, Scan, Kinder, Seitenblatt, Bestätigen und Löschen.

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

Ein Muster ist eine wiederkehrende Frage mit einer festen Antwort. Wie zeigt Albert einen Vorschlag? Was passiert, wenn zwei Sachen gleichzeitig sind? Die Antwort steht hier einmal und gilt dann auf jedem Gerät. Jedes Muster nennt seine Bauteile, seine Regel und ein Beispiel aus der Woche von Familie Sonntag.

## Bündel

Eine Sache kommt selten allein. Eine Fahrt zieht Auto, Fahrer, Mitfahrer und Checkliste mit. Das ist Leitsatz drei: Bündel statt Einzelteile. Wer die Fahrt sieht, sieht das Bündel. Wer die Fahrt verschiebt, verschiebt das Bündel mit.

> **Beispiel**
>
> Freitag, 16:40, Handball in der Halle Süd. Tobias fährt den Kombi, Felix fährt mit. Auf der Checkliste steht die Trinkflasche. Die Fahrt hängt als blaue Pille am Termin.

Wenn mehrere Sachen zur selben Stunde fallen, fasst die Bündelkarte sie zusammen. Jede Sache bleibt eine eigene Zeile mit eigenem Zuständigen.

### BuendelKarte

Quelle: `packages/design-system/components/karten/BuendelKarte.jsx`

Die Antwort auf Gleichzeitiges: eine Karte, drei Zeilen – statt drei Karten, die sich stapeln.

```jsx
<BuendelKarte titel="Drei Sachen um 16:00" zeit="16:00 – 17:30" teile={[
  { titel: "Kieferorthopädin", symbol: "arzt", zeit: "16:00 – 17:00", leute: ["anna", "lena"] },
  { titel: "Training", art: "termin", symbol: "sport", zeit: "16:00 – 17:30", leute: ["felix"] },
  { titel: "Abholen Halle Süd", art: "fahrt", zeit: "19:00", offen: true }
]} />
```

Zeilen behalten ihre Bedeutungsfarbe. Eine Zeile ohne Zuständigen wird laut gezeigt: gestrichelter Offen-Rand, nie stillschweigend leer.

```ts
/** Eine Karte fuer Gleichzeitiges: mehrere Sachen zur selben Stunde, jede als Zeile. */
export interface BuendelTeil {
  titel: string;
  art?: "termin" | "fahrt" | "familie";
  /** Sach-Symbol, wenn es nicht aus der Art folgt. */
  symbol?: string;
  zeit?: string;
  leute?: string[];
  /** Ohne Zustaendigen - die Zeile bekommt den gestrichelten Offen-Rand. */
  offen?: boolean;
}
export interface BuendelKarteProps {
  /** Was die Stunde traegt: "Drei Sachen um 16:00". */
  titel: string;
  zeit?: string;
  teile: BuendelTeil[];
  style?: React.CSSProperties;
}
export function BuendelKarte(props: BuendelKarteProps): JSX.Element;
```

> **So**
>
> Die Fahrt als `FahrtPille` an den Termin hängen. Wer fährt, steht in der Pille.

> **Nicht so**
>
> Auto, Fahrer und Checkliste als drei lose Karten nebeneinander. Eine Fahrt ohne den Termin, zu dem sie führt.

## Vorschlag von Albert

Albert schlägt vor und handelt nie allein. Jeder Vorschlag hat vier Teile: eine Vorschau, „Übernehmen“, einen zweiten Weg und einen Eintrag im Protokoll. Er ist als Vorschlag erkennbar, auf dem Mac gestrichelt grau, am iPhone als gelbe Karte. Er nennt seine Herkunft.

> **Beispiel**
>
> „Samstag fehlt ein Fahrer. Rückfahrt vom Auswärtsspiel, 14:00. Tobias hat ab 13:00 frei.“ Darunter zwei Knöpfe: „Tobias fragen“ und „Später“. Nach „Tobias fragen“ erscheint ein Toast mit „Rückgängig“.

### VorschlagKarte

Quelle: `packages/design-system/components/karten/VorschlagKarte.jsx`

Alberts Vorschlag auf dem iPhone – gelb, mit Formen, immer mit zwei Knöpfen.

```jsx
<VorschlagKarte titel="Samstag fehlt ein Fahrer."
  text="Rückfahrt vom Auswärtsspiel, 14:00. Bei Tobias steht ab 13:00 nichts."
  schritt="Tobias fragen" zweitSchritt="Später" />
```

So klingt Albert: eine Beobachtung, eine Frage, zwei Knöpfe. Nie "Ich habe für dich…". Auf dem Mac nimmst du stattdessen `<Karte art="vorschlag">` - dort ist der Vorschlag gestrichelt und ohne Füllung.

```ts
/**
 * Alberts Vorschlag am iPhone: gelbe Karte mit Formen, zwei Knoepfe, Unterzeile.
 */
export interface VorschlagKarteProps {
  /** Eine Beobachtung: "Samstag fehlt ein Fahrer." */
  titel: string;
  /** Zwei kurze Saetze: was er sieht, was daraus folgt. */
  text?: React.ReactNode;
  /** Erster Knopf, ein Verb: "Tobias fragen", "Übernehmen". */
  schritt?: string;
  onSchritt?: () => void;
  /** Zweiter Knopf. Es gibt immer zwei - Albert erledigt nie still. */
  zweitSchritt?: string;
  onZweitSchritt?: () => void;
  unterzeile?: string;
  style?: React.CSSProperties;
}
export function VorschlagKarte(props: VorschlagKarteProps): JSX.Element;
```

Die Regeln:

- **Immer zwei Knöpfe.** Der erste ist ein Verb, das die Folge nennt: „Tobias fragen“, „Übernehmen“. Der zweite ist der andere Weg: „Später“.
- **Immer mit Herkunft.** „Aus der Mail der Klassenlehrerin: Unterschrift und 8 € bis Freitag. Als zwei Aufgaben übernehmen?“
- **Nach dem Übernehmen ein Toast mit „Rückgängig“.** Die Änderung erscheint sofort. Der Rückweg bleibt offen.
- **Jede Aktion von Albert steht im Protokoll.** Wer, was, wann, aus welcher Quelle.

> **Nicht so**
>
> „Albert hat 2 Aufgaben für dich erstellt.“ Albert legt nichts still an, verschickt nichts allein und lobt nicht.

## Konflikt

Zwei Sachen treffen sich. Albert nennt die Sachlage, bewertet sie nicht und blockiert nichts. Die Konfliktkarte trägt einen nächsten Schritt als Verb.

### KonfliktKarte

Quelle: `packages/design-system/components/karten/KonfliktKarte.jsx`

Die Karte für zwei Sachen, die sich treffen – sie zeigt es und hält niemanden auf.

```jsx
<KonfliktKarte titel="Lena schwimmt, Felix spielt Handball – beides um 16:00."
  erklaerung="Ein Auto, zwei Orte. Sofia ist bis 17:00 da." wer={["lena", "felix"]}
  schritt="Sofia fragen" zweitSchritt="Später" />
```

Register Family Manager. Kein Rot, kein Ausrufezeichen, kein "Fehler" – die Karte stellt fest und nennt einen Schritt.

```ts
/** Zwei Sachen treffen sich. Sichtbar, nie blockierend, mit naechstem Schritt. */
export interface KonfliktKarteProps {
  /** Was sich trifft, als Feststellung: "Lena schwimmt und Felix spielt - beides 16:00." */
  titel: string;
  /** Warum es klemmt, ein Satz. */
  erklaerung?: React.ReactNode;
  wer?: string[];
  /** Der naechste Schritt als Verb: "Tobias fragen". */
  schritt?: string;
  onSchritt?: () => void;
  zweitSchritt?: string;
  onZweitSchritt?: () => void;
  style?: React.CSSProperties;
}
export function KonfliktKarte(props: KonfliktKarteProps): JSX.Element;
```

> **So**
>
> „Lena schwimmt, Felix spielt – beides um 16:00. Ein Auto, zwei Orte. Sofia ist bis 17:00 da.“ Knopf: „Sofia fragen“.

> **Nicht so**
>
> „Fehler: Terminkonflikt!“ Kein Rot, kein Warnzeichen, kein gesperrter Speichern-Knopf. Rosa heißt nie Fehler.

## Ohne Zuständigen

Alles hat genau einen Zuständigen. Fehlt er, ist das kein neutraler Zustand, sondern ein Problem, und es wird laut gezeigt: gestrichelter Rand in Offen-Rosa, eine Pille „Ohne Zuständigen“, ein Knopf, mit dem jemand übernimmt. Albert benennt die Lücke und bietet einen Weg an.

### Karte

Quelle: `packages/design-system/components/karten/Karte.jsx`

Die Karte – das Ding, aus dem Heute, Woche und Kalender bestehen. Ein Datenmodell, viele Ansichten.

```jsx
<Karte art="fahrt" titel="Rückfahrt Auswärtsspiel" ort="Sportplatz Nord → Zuhause"
  zeit="14:00 – 14:30" leute={["felix"]} hoehe="hoch"
  pillen={<ZustandsPille>Kein Fahrer</ZustandsPille>}
  knoepfe={<Knopf>Ich fahre</Knopf>} />

<Karte art="vorschlag" titel="Bei Tobias steht ab 13:00 nichts. Fragen?"
  unterzeile="Vorschlag von Albert"
  knoepfe={<KarteVorschlagKnoepfe onUebernehmen={…} onZurueck={…} />} />
```

Register Family Manager, kurz und ruhig. Die Bedeutungen werden nicht getauscht: blau ist Fahrt, gelb ist Familie, gestrichelt rosa heisst "ohne Zuständigen". Ein Vorschlag hat immer zwei Knöpfe – Albert erledigt nie still.

```ts
/**
 * Die Karte in fuenf Arten. Die Farbe sagt die Art, das Symbol die Sache, die Punkte die Leute.
 */
export interface KarteProps {
  /** "termin" beige | "fahrt" blau | "familie" gelb | "vorschlag" gestrichelt grau | "offen" gestrichelt rosa. */
  art?: "termin" | "fahrt" | "familie" | "vorschlag" | "offen";
  /** Kartentitel, ein Gegenstand: "Rückfahrt Auswärtsspiel". */
  titel: string;
  /** Zweitzeile: Ort oder Bündel-Teile, mit " · " getrennt. */
  ort?: React.ReactNode;
  /** Zeitspanne als "16:00 – 17:00" (Halbgeviertstrich mit Leerzeichen). */
  zeit?: string;
  /** Wer dabei ist; der Zustaendige zuerst. */
  leute?: string[];
  /** Sach-Symbol, wenn es nicht aus der Art folgt: "schule", "sport", "arzt", "musik". */
  symbol?: string;
  /** "kurz" (78 px) oder "hoch" (132 px) - fuer das Stundenraster. */
  hoehe?: "kurz" | "hoch";
  /** Zustands- und Fahrt-Pillen. */
  pillen?: React.ReactNode;
  /** Handlungsknoepfe; bei Vorschlaegen immer zwei. */
  knoepfe?: React.ReactNode;
  /** Kleine Zeile unter dem Inhalt, z. B. "Vorschlag von Albert". */
  unterzeile?: React.ReactNode;
  /** Einzeiler fuer Listen: Symbol, Titel, Zeit, Punkt. */
  kompakt?: boolean;
  klickbar?: boolean;
  /** Leicht gekippt, wie ein liegender Klebezettel. */
  gekippt?: boolean;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Karte(props: KarteProps): JSX.Element;
export function KarteVorschlagKnoepfe(props: { uebernehmen?: string; zurueck?: string; onUebernehmen?: () => void; onZurueck?: () => void }): JSX.Element;
```

> **Beispiel**
>
> „Für die Rückfahrt am Freitag fehlt noch ein Fahrer – bei Tobias steht ab 15:00 nichts.“ Die Karte „Abholen Halle Süd, 19:00“ trägt den gestrichelten Rand, bis jemand „Ich fahre“ wählt.

Die einzige Ausnahme ist die Aufgaben-Inbox. Dort darf etwas kurz ohne Zuständigen liegen, bis es verteilt ist. Im Wochenüberblick zählt Offenes oben mit, am iPhone bekommt der Tag mit Offenem einen rosa Kreis im Tagesreiter.

> **Nicht so**
>
> Offen-Rosa als Fläche. Den Rand für etwas anderes als „ohne Zuständigen“. Eine Sache ohne Zuständigen, die grau und leise in der Liste steht.

## Spuren je Mensch

Gleichzeitiges hat drei Antworten. Die Bündelkarte fasst zusammen, die Konfliktkarte benennt den Zusammenstoß. Die Spuren zeigen je Mensch eine Zeile über die Stunden. So sieht man auf einen Blick, wer wann frei ist.

### SpurenJeMensch

Quelle: `packages/design-system/components/karten/SpurenJeMensch.jsx`

Spuren je Mensch – wenn drei Sachen gleichzeitig laufen und die Frage "wer wo" lautet.

```jsx
<SpurenJeMensch leute={["anna", "tobias", "sofia"]} von={15} bis={20} spuren={{
  anna:   [{ titel: "Kieferorthopädin", von: 16, bis: 17 }],
  tobias: [{ titel: "Abholen Halle Süd", von: 19, bis: 19.5, art: "fahrt", offen: true }],
  sofia:  [{ titel: "Abholen Schule", von: 15, bis: 15.5, art: "fahrt" }]
}} />
```

Jede Spur trägt Name und Avatar, nicht nur Farbe. Dieselben Daten wie im Stundenraster – ein Datenmodell, viele Ansichten.

```ts
/** Je Mensch eine Spur ueber die Stunden - die dritte Antwort auf Gleichzeitiges. */
export interface Spur {
  titel: string;
  /** Stunde als Dezimalzahl: 16.5 heisst 16:30. */
  von: number;
  bis: number;
  art?: "termin" | "fahrt" | "familie";
  offen?: boolean;
}
export interface SpurenJeMenschProps {
  /** Schluessel aus Familie Sonntag, eine Spur je Person. */
  leute: string[];
  /** Spuren je Personenschluessel. */
  spuren: Record<string, Spur[]>;
  /** Erste und letzte Stunde der Achse. */
  von?: number;
  bis?: number;
  style?: React.CSSProperties;
}
export function SpurenJeMensch(props: SpurenJeMenschProps): JSX.Element;
```

Wann welche Antwort passt:

| Lage | Muster |
|---|---|
| Mehrere Sachen zur selben Stunde, alle haben einen Zuständigen | Bündelkarte |
| Zwei Sachen brauchen dieselbe Person oder dasselbe Auto | Konfliktkarte |
| Man sucht, wer am Nachmittag frei ist | Spuren je Mensch |

## Knopfreihe

Knöpfe stehen nebeneinander, wenn beide Platz haben. Sonst stehen sie untereinander, in voller Breite. Ein Knopf ist immer einzeilig. Zwei ungleich breite Knöpfe untereinander gibt es nicht.

### Knopfreihe

Quelle: `packages/design-system/components/bausteine/Knopf.jsx`

> **So**
>
> Ein Verb, das die Folge nennt: „Fahrt übernehmen“, „Woche planen“, „In den Safe legen“. Der erste Knopf schwarz, der zweite beige.

> **Nicht so**
>
> „OK“, „Absenden“, „Los geht’s!“. „Abbrechen“ ohne Gegenstand. Ein Knopf, der in zwei Zeilen umbricht.

## Formulare

Ein Formular fragt nur, was es wirklich braucht. Auf der Website gilt: ein Feld pro Formular, ein Verb pro Knopf. Jedes Feld über eins kostet ungefähr die Hälfte der Einträge. Darum hat die Liste genau ein Feld, die E-Mail-Adresse.

### EmailZeile

Quelle: `packages/design-system/components/website/EmailZeile.jsx`

Das eine Feld der Website.

```jsx
<EmailZeile onSenden={email => merken(email)} />
```

Ein Feld: 12,4 % tragen sich ein; vier Felder: die Hälfte. Kein Name, kein Häkchen, kein zweites Feld.

```ts
/** Ein E-Mail-Feld und ein Knopf - nie mehr Felder. */
export interface EmailZeileProps {
  platzhalter?: string;
  knopf?: string;
  onSenden?: (email: string) => void;
  /** Am Handy untereinander. */
  gestapelt?: boolean;
  style?: React.CSSProperties;
}
export function EmailZeile(props: EmailZeileProps): JSX.Element;
```

In der App füllt Albert vor, was er weiß, und markiert es als Vorschlag. Ein Mensch bestätigt. Pflichtfelder, die leer sind, machen den Knopf nicht durchscheinend, sondern inaktiv als eigene Rolle. Fehler im Feld nennen, was fehlt und was richtig wäre: „Die Uhrzeit fehlt. Zum Beispiel 16:40.“

> **Hinweis**
>
> Für Eingabe, Auswahl, Häkchen und Dialog im Web gibt es die Web-Primitive in `bauteile/ui/` auf unseren Rollen. Siehe [Bauteile](/bauteile/#gruppe-ui).

## Listen

Die Woche als Liste ist die Antwort am iPhone, wenn das Raster zu eng wird. Jeder Tag ist eine Zeile mit Tag-Pille, einem Satzteil und der verplanten Zeit. Heute ist schwarz. Ein Tag klappt auf und zeigt seine Karten in der kompakten Form.

### Listenzeile

Quelle: `packages/design-system/components/zeit/Listenzeile.jsx`

Die Woche als Liste – für das iPhone, wo ein Raster zu dicht wird.

```jsx
<Listenzeile tag="Mi 3." heute text="heute · Anna und Felix" wert="3,0 h" aufgeklappt>
  <Karte kompakt titel="Elternabend Klasse 6" symbol="schule" zeit="19:00" leute={["anna"]} />
</Listenzeile>
```

Der Text sagt, wer den Tag trägt, nicht wie voll er ist. Zahlen deutsch: "3,0 h".

```ts
/** Eine Zeile der Woche als Liste: Tag-Pille, Satzteil, verplante Zeit. */
export interface ListenzeileProps {
  /** Tag als Pille: "Mo 1.", "Mi 3.". */
  tag: string;
  heute?: boolean;
  /** Ein Satzteil, klein: "heute · Anna und Felix", "vorbei · zum Aufklappen". */
  text?: React.ReactNode;
  /** Verplante Zeit rechts: "3,0 h". */
  wert?: string;
  /** Setzt das Chevron; undefined heisst kein Chevron. */
  aufgeklappt?: boolean;
  onClick?: () => void;
  /** Die Karten des Tages, wenn die Zeile offen ist. */
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Listenzeile(props: ListenzeileProps): JSX.Element;
```

Regeln für Listen:

- Eine Zeile sagt in einem Satzteil, was der Tag trägt: „heute · Anna und Felix“.
- Zahlen stehen rechts, in Tabellenziffern: „3,0 h“.
- Vergangenes ist zurückgenommen, aber lesbar: „vorbei · zum Aufklappen“.
- Ist die Liste leer, zeigt sie einen leeren Zustand, keine leere Fläche.

## Scan-Fluss

Papier wird zum Vorschlag in drei Schritten: Kamera, Seitenstapel, Vorschlag. Erkannt wird auf dem Gerät. An ein Modell geht nur der erkannte Text, nie das Bild. Der Vorschlag nennt Absender, Betrag, Frist und Ablage. Erst „Übernehmen“ legt ab.

### ScannerFluss

Quelle: `packages/design-system/components/scan/ScannerFluss.jsx`

Der Scanner – drei Schritte: Kamera, Stapel, Vorschlag.

```jsx
<ScannerFluss schritt="vorschlag" seiten={2} vorschlag={{
  titel: "Rechnung Musikschule", absender: "Musikschule Nord",
  betrag: "48,00 €", frist: "18. September", ablage: "Wichtiges › Verträge"
}} />
```

Der Vorschlag läuft im Register Sachbearbeiter: nüchtern, vollständig, kein Schmuck, keine Formen. „Übernehmen“ und „Rückgängig“ stehen immer beide da — Albert legt nichts still ab.

```ts
/**
 * Der Scanner-Fluss: Kamera mit Kantenrahmen, Seitenstapel, Vorschlagskarte.
 */
export interface ScannerVorschlag {
  /** Was Albert gelesen hat, als Gegenstand: "Rechnung Musikschule". */
  titel: string;
  absender?: string;
  /** Betrag deutsch: "48,00 €". */
  betrag?: string;
  /** Frist als Datum: "18. September". */
  frist?: string;
  /** Wohin es soll: "Wichtiges › Verträge". */
  ablage?: string;
}
export interface ScannerFlussProps {
  schritt?: "kamera" | "stapel" | "vorschlag";
  /** Zahl der aufgenommenen Seiten. */
  seiten?: number;
  vorschlag?: ScannerVorschlag;
  onAufnehmen?: () => void;
  onUebernehmen?: () => void;
  onZurueck?: () => void;
  style?: React.CSSProperties;
}
export function ScannerFluss(props: ScannerFlussProps): JSX.Element;
```

> **Beispiel**
>
> „Rechnung Musikschule · Musikschule Nord · 48,00 € · Frist 18. September · Wichtiges › Verträge“. Knöpfe: „Übernehmen“ und „Später“.

## Kinder

Kinder sind Beteiligte, nicht Publikum. Die Prüffrage für jede Kinderansicht: Könnte eine Neunjährige sie allein benutzen? Kinderansichten nutzen die Zielfläche 56 px, 16 px Schrift auf Knöpfen und das Register Vorleser.

### TalerStand

Quelle: `packages/design-system/components/kinder/TalerStand.jsx`

Der Taler-Stand für Kinder – Register Vorleser, kurze Sätze, grosse Wörter.

```jsx
<TalerStand wer="lena" taler={14} ziel={30} zielName="Skateboard"
  geschafft={["Tisch gedeckt", "Zimmer aufgeräumt", "Schwimmzeug gepackt"]}
  regal={[{ name: "Kino", taler: 20 }, { name: "Eis", taler: 4 }]} />
```

Nicht verhandelbar: keine Rangliste, kein Geschwistervergleich, kein Abzug, kein roter Stand, kein Serien-Druck. Der Streifen zeigt das Sparziel – nie, wie viel jemand "aufholen" muss. Zielflächen 56 px.

```ts
/**
 * Der Taler-Stand eines Kindes: grosse Zahl, Sparziel als Streifen, Regal der Eltern.
 */
export interface TalerStandProps {
  /** Das Kind - jedes Kind sieht nur den eigenen Stand. */
  wer?: string;
  /** Erreichte Taler. Nie negativ, es gibt keinen Abzug. */
  taler: number;
  /** Taler, die das Sparziel kostet. */
  ziel?: number;
  /** Name des Sparziels: "Skateboard". */
  zielName?: string;
  /** Was das Kind geschafft hat, als Pillen. Nie eine Quote. */
  geschafft?: string[];
  /** Das Regal der Eltern: was man sich holen kann und was es kostet. */
  regal?: Array<{ name: string; taler: number }>;
  style?: React.CSSProperties;
}
export function TalerStand(props: TalerStandProps): JSX.Element;
```

Die Regeln für Taler:

- Jedes Kind sieht nur den eigenen Stand.
- Keine Rangliste, kein Vergleich unter Geschwistern, kein Abzug, kein Druck durch Serien.
- Sichtbar ist, was geschafft ist, nie eine Quote oder ein Aufholbalken.
- Die Werte legen die Eltern fest. Albert stellt fest, loben tun Menschen: „Fertig. Bleibt noch: Zimmer aufräumen.“

> **Nicht so**
>
> „Super gemacht!!“ mit Konfetti. „Felix hat diese Woche mehr Taler als Lena.“ Ein roter Balken für Verpasstes.

## Seitenblatt

Zusatzinformationen öffnen sich im Seitenblatt von rechts, statt auf eine neue Seite zu springen. Die Fläche dahinter bleibt sichtbar und wird vom Schleier gedämpft (`--flaeche-schleier`). So geht der Blick nicht verloren. Im HQ öffnen Kennzahl-Kacheln, Kontakte und Mails ihr Seitenblatt. Für das Web gibt es dafür das Primitiv `Sheet` in `bauteile/ui/`.

> **So**
>
> Eine Kachel „2 Fahrten heute“ antippen: Rechts öffnet sich das Blatt mit den zwei Fahrten. Die Übersicht bleibt dahinter stehen.

> **Offen**
>
> Ob das Seitenblatt auch in der App für Familien kommt, zum Beispiel am iPad, ist nicht entschieden. Belegt ist es bisher im HQ.

## Bestätigen und Rückgängig

Jede Änderung erscheint sofort, also optimistisch. Danach kommt ein Toast. Er stellt fest, im Präsens oder in der Vergangenheitsform desselben Verbs, und bietet „Rückgängig“ an. Er lobt nicht.

### Toast

Quelle: `packages/design-system/components/zustaende/Toast.jsx`

Der Toast – eine Feststellung und ein Rückweg.

```jsx
<Toast text="Tobias fährt am Samstag." onZurueck={zurueck} />
```

Albert stellt fest ("Fertig."), er lobt nicht. Ohne `onZurueck` gibt es keinen Toast – was nicht rücknehmbar ist, wird vorher gefragt.

```ts
/** Kurze Rueckmeldung mit Rueckweg. Jedes optimistische Update bekommt einen. */
export interface ToastProps {
  /** Feststellung im Praesens, ohne Lob: "Tobias fährt am Samstag." */
  text: React.ReactNode;
  zurueck?: string;
  onZurueck?: () => void;
  style?: React.CSSProperties;
}
export function Toast(props: ToastProps): JSX.Element;
```

> **So**
>
> „Fahrt übernommen. Rückgängig“ · „Tobias fährt am Freitag. Rückgängig“

> **Nicht so**
>
> „Erfolgreich gespeichert!“ · „Super, das hat geklappt!“

## Löschen

Löschen ist das eine, was „Rückgängig“ nicht auffängt. Darum fragt Albert einmal nach und nennt die Folge ohne Drama. Gelöscht wird an einer Stelle, mit Bestätigung im Dialog. Im HQ geht das auf der Eintragsseite und in der Sammelleiste, nie mit einem Klick in der Zeile.

> **So**
>
> „Das Album und seine 84 Bilder werden gelöscht. Das lässt sich nicht rückgängig machen.“ Knöpfe: „Album löschen“ und „Behalten“.

> **Nicht so**
>
> „Bist du wirklich, wirklich sicher?“ Ein roter Knopf mit „OK“. Löschen ohne Rückfrage.


---

# Website und Landingpages

> Wie hey-albert.app aufgebaut ist, wie sie spricht und zeigt — vierzehn Sektionen, Landingpages je Zielgruppe, elf Sprachen, Vorschaubilder und die Messlatte für Leistung und Barrierefreiheit.

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

Die Website verkauft keine Funktionen, sondern beantwortet Misstrauen. Wer sie öffnet, fragt sich drei Dinge, in dieser Reihenfolge: Verstehe ich in fünf Sekunden, was das ist? Glaube ich, dass es uns hilft? Traue ich denen meine Familie an?

Darum ist die Seite genau so gebaut: **Klarheit → Beweis → Vertrauen → Handlung.** Quelle für jeden Satz ist `docs/24-homepage.md`, für die Technik `docs/23-website.md`.

## Vier Regeln über allem

1. **Prototypisch im Aufbau, eigen in Stimme und Bild.** Hero, Problem, Ablauf, Beweis, Vertrauen, Preis, Fragen, Aufruf. Was erwartbar aussieht, wirkt seriös. Originell sind Sprache und Zeichnung, nie die Struktur.
2. **Zeigen, nicht behaupten.** Das echte Wochenboard mit Offenem überzeugt mehr als jede Aussage über Übersicht.
3. **Vertrauen durch Grenzen, nicht durch Siegel.** Kein Schloss, kein Prüfzeichen. Fünf Zusagen, die man nachprüfen kann.
4. **Ein Ziel je Bildschirm, ein Verb je Knopf, ein Feld je Formular.** Jedes Feld mehr kostet Einträge.

> **So**
>
> Jeder Abschnitt beginnt mit einer Situation. „Freitag um vier fährt niemand“ steht vor dem Bereich Fahrten.

> **Nicht so**
>
> „Der smarte Familienassistent mit KI.“ — Erwerbs- und Technikwörter senken Vertrauen und stehen auf der Nie-Liste.

## Der Hero

Der erste Bildschirm sagt, was Albert ist, und zeigt es. Auf dem Tisch steht der Text links, das Bild rechts. Auf dem Handy steht der Text oben, und der Knopf ist ohne Scrollen sichtbar.

![Das Wochenboard von Familie Sonntag auf dem Mac, Mittwoch, 3. September, 16:40](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

- **Überschrift:** „Hey Albert. Er kümmert sich. Ihr dürft Familie sein.“
- **Erklärzeile:** eine Szene, keine Definition. Termine, Fahrten, Essen, Hausaufgaben, Verträge, Fristen.
- **Ein Feld, ein Knopf:** „Testfamilie werden“. Nach dem Start: „Im App Store laden“.
- **Vertrauenszeile, klein:** Geräte · Daten in Frankfurt · Albert liest nur, was ihr ihm gebt.
- **Bildunterschrift:** Familie Sonntag ist unsere Beispielfamilie.

## Die vierzehn Sektionen

Die Temperatur wechselt bewusst: warm, ruhig, nüchtern, wieder warm. Register Erzähler für Überschriften und Fließtext, Sachbearbeiter für Vertrauen, Preis und Fragen. Nie mischen.

| Nr. | Sektion | Aufgabe | Register | Bild |
|---|---|---|---|---|
| 1 | Hero | in fünf Sekunden verstehen | Erzähler | Wochenboard auf dem Mac |
| 2 | Drei Momente | „das kennen wir“ | Erzähler | drei Zeichnungen |
| 3 | So funktioniert es | Sagen → Sehen → Sonntag | Erzähler | drei Ausschnitte |
| 4 | Die Heldenansicht | das eine Bild | Erzähler | Wochenboard groß, mit Randnotizen |
| 5 | Fünf Dinge | Umfang ohne Überforderung | Erzähler | fünf Screens im Wechsel |
| 6 | Eure Familie, euer Jahr | Family Feed, Rückblick, Anlass, Buch | Erzähler | iPhone, Mac, Foto des Buchs |
| 7 | Überall | Menschen, Zeitzonen, Währungen | Erzähler | Haushalt |
| 8 | Woran ihr uns messen könnt | Vertrauen durch Grenzen | Sachbearbeiter | Haarlinien-Zeichen |
| 9 | Kinder sind Beteiligte | der wärmste Abschnitt | Erzähler | iPad und iPhone von Lena |
| 10 | Wer Albert baut | echte Menschen | Erzähler | ein echtes Foto |
| 11 | Preis | keine Überraschung später | Sachbearbeiter | drei Karten |
| 12 | Fragen | Restzweifel | Sachbearbeiter | Akkordeon |
| 13 | Schluss | zweite Handlung | Erzähler | Badge, QR-Code |
| 14 | Fußzeile | Legitimität, Sprachwahl | Sachbearbeiter | — |

Albert als Figur erscheint dreimal: klein im Hero, beim Schritt „Sagen“, im Kinderbereich. Nie bei Preis, Fragen und Vertrauen.

> **Offen**
>
> Das Designsystem (`readme.md`, Karte „Homepage · Aufbau“) nennt zwölf Sektionen und 600 bis 800 Wörter. `docs/24` hat vierzehn Sektionen und rund 1.400 Wörter, weil der Gründer Family Feed und Überall auf der Startseite will. Diese Seite folgt `docs/24`. Das Designsystem ist nachzuziehen.

## Wortbudget

```json
{
  "satzlaenge_max": 18,
  "anteil_ueber_15_max": 0.08,
  "silben_je_wort_max": 1.7,
  "wortteil_zeichen_max": 14,
  "wstf4_kinder_max": 5,
  "wstf4_erwachsene_max": 9,
  "homepage": {
    "hero_woerter_max": 40,
    "sektion_woerter_max": 90,
    "seite_woerter": [
      600,
      800
    ]
  }
}
```

Die Lesestufe liegt bei Klasse 5 bis 7. Die Seite wird um 22:40 am Handy gelesen. Jede Sektion enthält etwas Konkretes: einen Namen, eine Uhrzeit, einen Betrag oder einen Gegenstand. „Freitag, 18:40“ schlägt „offene Termine“.

Das Budget je Sektion nach `docs/24` §8: Hero unter 50 Wörtern, jede Sektion unter 90, die Sektionen 5 und 12 unter 200.

## Knöpfe nennen die Folge

Ein Knopf sagt, was danach passiert. Er ist einzeilig und hat ein Verb.

> **So**
>
> „Testfamilie werden“ · „Auf die Liste setzen“ · „Im App Store laden“ · „Zur Umfrage · 5 Minuten“

> **Nicht so**
>
> „Jetzt starten!“ · „Mehr erfahren“ · „Jetzt sichern“ · zwei gleich laute Knöpfe nebeneinander

## Anrede

Auf der Website sind mindestens zwei Erwachsene gemeint. Deshalb gilt **ihr**, durchgehend. Nicht „du“ und nie „Sie“. In anderen Sprachen gilt die Form für die Familie: *you*, *vosotros*, *vous*, *voi*, *siz*.

## Bild

Das Produkt ist das Motiv. Echte Screens von Familie Sonntag auf flachen Gerätrahmen, ohne Glanz, ohne Perspektive, angeschnitten statt dreidimensional.

**Wir zeigen**

- echte Screens von Familie Sonntag auf flachen Geräterahmen
- flache Tuschezeichnung mit genau einem gelben Akzent
- genau ein echtes Foto: der Gründer
- ein physisches Objekt: das gedruckte Jahresbuch

**Wir zeigen nie**

- Kindergesichter
- Stockfotos
- KI-erzeugte Bilder
- Glanz, Perspektive, 3D-Geräte
- Karussell, Autoplay-Video
- echte Familiendaten

![Main](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![LenaBereich](https://brand.heyalbert.family/bilder/screens/LenaBereich.png)

*LenaBereich · ipad · 1668 × 2388 px*

![Safe](https://brand.heyalbert.family/bilder/screens/Safe.png)

*Safe · mac · 2880 × 1800 px*

![Watch](https://brand.heyalbert.family/bilder/screens/Watch.png)

*Watch · watch · 792 × 968 px*

Die Personenfarben aus dem Designsystem sind auch die Farben der Kampagne. Wer Anna kennt, erkennt ihr Mint wieder. Mehr im Kapitel [Bildsprache](/bildsprache/).

## Handy zuerst

79 % der Besuche kommen vom Handy. Die Seite wird zuerst fürs Handy gebaut.

- Der Knopf steht im ersten Bildschirm, ohne Scrollen.
- Ab Sektion 2 steht ein fester Knopf am unteren Rand: „Auf die Liste setzen“. Er verschwindet, sobald ein Feld im Bild ist.
- Screens stehen auf iPhone-Rahmen. Das Wochenboard scrollt waagrecht oder wird zur Tagesliste.
- Das Menü „Bereiche“ ist auf dem Handy eine Liste ohne Vorschaubilder.

## Landingpages

Landingpages gibt es auf zwei Achsen. Beide nutzen dieselben Blöcke wie die Startseite.

- **Je Suchbegriff:** fünf Seiten je Sprache zu den Kernbegriffen Kalender, Planer, Organizer, gemeinsamer Kalender, Haushaltsplaner. Titel und H1 tragen den Begriff. Darunter Intro, Feld, Bild, drei Bausteine, Fragen, zweites Feld.
- **Je Zielgruppe:** sechs Segmente mit eigener Kampagne — Singles, Paare, Familie mit einem Kind, mit mehreren Kindern, mit Großeltern im Haus, in zwei Haushalten. Je Segment ein Brief, eine Landingpage auf Deutsch und Englisch, Social-Entwürfe und eine Kampagne mit UTM.

Die Tür steht offen: „für Familien, Paare und alle, die einen Haushalt führen“. Die Bühne bleibt die Familie. Der Haushalt ist die Einheit, nicht die Kinderzahl.

## Sprachen und Märkte

Deutsch ist der Master. Die Website erscheint in elf Sprachen: Deutsch, Englisch, Spanisch, Französisch, Italienisch, Türkisch, Polnisch, Bulgarisch, Schwedisch, Dänisch, Norwegisch. Dazu kommen Länderfassungen für Sprachen mit mehreren Ländern: `/de-at/`, `/de-ch/`, `/en-gb/`, `/en-ie/`, `/en-us/`.

- Eine Domain, Ordner je Sprache und Land. Länder-Domains leiten per 301 auf den passenden Ordner.
- `hreflang` und `canonical` auf jeder Seite. `/en/` ist die internationale Fassung.
- Die Quelle für Märkte, Pfade und Preise ist `packages/markets`.
- Jede Fassung liest ein Mensch mit dieser Muttersprache, bevor sie live geht.

Was in allen Sprachen bleibt: Hey Albert, Albert, die Namen von Familie Sonntag, Frankfurt, Face ID, App Store, iPhone, iPad, Mac.

## Vorschaubilder für Links

Wer einen Link teilt, sieht dieses Bild in WhatsApp, iMessage oder der Suche. Eine Fassung je Sprache, 1200 × 630 Pixel, erzeugt von `tooling/og-bilder.py`.

| Sprache | Datei |
| --- | --- |
| bg | https://brand.heyalbert.family/bilder/og/og-bg.png |
| da | https://brand.heyalbert.family/bilder/og/og-da.png |
| de | https://brand.heyalbert.family/bilder/og/og-de.png |
| en | https://brand.heyalbert.family/bilder/og/og-en.png |
| es | https://brand.heyalbert.family/bilder/og/og-es.png |
| fr | https://brand.heyalbert.family/bilder/og/og-fr.png |
| it | https://brand.heyalbert.family/bilder/og/og-it.png |
| no | https://brand.heyalbert.family/bilder/og/og-no.png |
| pl | https://brand.heyalbert.family/bilder/og/og-pl.png |
| sv | https://brand.heyalbert.family/bilder/og/og-sv.png |
| tr | https://brand.heyalbert.family/bilder/og/og-tr.png |

## Leistung und Barrierefreiheit

Technik ist Vertrauen. Die Messlatte steht in `apps/site/lighthouserc.json` und läuft im CI.

| Prüfung | Ziel |
|---|---|
| Leistung, Handy | mindestens 95, gemessen 97 bis 98 |
| Leistung, Tisch | 100 |
| Barrierefreiheit | 100 |
| Best Practices | 100 |
| SEO | 100 |
| LCP | Ziel unter 1,5 s; gemessen 2,3 bis 2,5 s am Handy im simulierten langsamen 4G |

- Text ist HTML, nie Bild.
- Schriften lokal, nie von Google-Servern.
- Keine Cookie-Wand. PostHog läuft ohne Cookie, bis jemand zustimmt.
- Das erste Bild jeder Seite lädt ohne Einblendung, als AVIF mit WebP als Rückfall.

## Blöcke aus dem Designsystem

Die Seite entsteht aus Payload. Jeder Block in Payload hat genau ein Bauteil in `packages/design-system/bloecke`. Agenten füllen Blöcke, gestalten nie.

### bloecke

- `Aufruf` · packages/design-system/bloecke/Aufruf.tsx

- `Bausteine` · packages/design-system/bloecke/Bausteine.tsx

- `Bereiche` · packages/design-system/bloecke/Bereiche.tsx

- `Bild` · packages/design-system/bloecke/Bild.tsx

- `Eintragen` · packages/design-system/bloecke/Eintragen.tsx

- `Faq` · packages/design-system/bloecke/Faq.tsx

- `Hero` · packages/design-system/bloecke/Hero.tsx

- `Hinweisleiste` · packages/design-system/bloecke/Hinweisleiste.tsx

- `Preise` · packages/design-system/bloecke/Preise.tsx

- `Satz` · packages/design-system/bloecke/Satz.tsx

- `Schritte` · packages/design-system/bloecke/Schritte.tsx

- `Text` · packages/design-system/bloecke/Text.tsx

- `Themen` · packages/design-system/bloecke/Themen.tsx

- `Umfrage` · packages/design-system/bloecke/Umfrage.tsx

- `Vergleich` · packages/design-system/bloecke/Vergleich.tsx

- `Zitat` · packages/design-system/bloecke/Zitat.tsx

Die Bauteile der früheren statischen Startseite — `WebNavigation`, `EmailZeile`, `Vertrauenszeile`, `SzeneKarte`, `PreisKarte`, `Akkordeon`, `StickyKnopf` und weitere — stehen im Kapitel [Bauteile](/bauteile/#gruppe-website).

## Prüfliste vor dem Livegang

- [ ] Fünf-Sekunden-Test mit fünf bis acht Eltern. Sagen zwei „ein Kalender“, ist der Hero nicht fertig.
- [ ] Jeder Satz ist wahr: Die Funktion existiert, oder der Satz ist raus. Je Sprache.
- [ ] Kein Wort von der Nie-Liste, kein Superlativ, kein Ausrufezeichen, kein anderes Produkt beim Namen.
- [ ] Nur Familie Sonntag, in jedem Screen und jeder Zahl.
- [ ] Keine Kindergesichter. Ein einziges echtes Foto: der Gründer.
- [ ] Knopf im ersten Bildschirm am Handy.
- [ ] Lighthouse im CI grün.

> **Offen**
>
> Zwei Claims gelten als entschieden. `docs/21` I.1 und die Website führen „Hey Albert. Er kümmert sich. Ihr dürft Familie sein.“ `docs/21` Teil II nennt „Albert zaubert, damit ihr Familie sein könnt.“ Der Gründer entscheidet, welcher gilt. Bis dahin gilt der Claim, der live ist.


---

# Social Media

> Haltung, Kanäle, Formate mit sicheren Zonen und fertige Beispielmotive aus Tokens und echten Screens — dazu Regeln für Bild, Text, Kennzeichnung und Freigabe.

Quelle: https://brand.heyalbert.family/social-media/ · Hey Albert Marke und Designsystem

Wer über Hey Albert schreibt, schreibt über Fälle, nicht über Funktionen. Ein Beitrag ohne Uhrzeit, Namen, Ort oder Zahl ist eine Eigenschaft. Und Eigenschaften klingen wie bei allen anderen.

## Die Haltung

**Wir zeigen Familienmomente, keine Elternprobleme.** Der Markt wirbt mit der erschöpften Mutter. Wir zeigen denselben Freitag, aber den Moment, in dem er aufgeht. Wir werben mit dem Gewinn, nie mit dem Schmerz.

> **So**
>
> „Freitag, 18:40. Oma Grete hat sich für die Rückfahrt eingetragen — ohne anzurufen.“

> **Nicht so**
>
> „Kennst du das auch? Wieder alles an dir hängen geblieben?“ — ein Vorwurf an die Familie, verpackt als Frage.

Fünf Prüffragen vor jedem Beitrag, aus `docs/21` I.8:

1. Ist es eine Szene oder eine Eigenschaft?
2. Verkaufe ich gerade ein schlechtes Gewissen?
3. Steht da „kein“? Dann als Zusage neu schreiben.
4. Rede ich über ein Kind oder mit ihm? Über ein Kind reden wir nicht.
5. Wenn es um etwas Schönes geht: Hört man das?

## Fünf Formate für Inhalte

| Format | Was |
|---|---|
| **Der Fall** | eine Szene aus dem Alltag in zwei bis vier Zeilen. Das Grundformat |
| **Das Detail** | eine Kleinigkeit, die zeigt, wie genau wir hinsehen. Sechs Minuten bis zur Abfahrt statt „gleich losfahren“ |
| **Die Zeichnung** | eine Monolinien-Skizze zu einer Situation. Funktioniert ohne Text |
| **Die Frage** | an Familien, ehrlich gemeint. Keine Umfrage als Reichweitentrick |
| **Der Bau** | wie etwas entstanden ist. Sparsam — es interessiert weniger Menschen, als man denkt |

## Kanäle

Fünf bis acht bewusste Kanäle je Markt, nicht alle. Welche ein Markt bespielt, steht in seinem Kanalprofil (`channelProfiles`, `docs/60` §8).

| Kanal | Rolle | Ab |
|---|---|---|
| Instagram, Facebook, Threads | Kern | Phase 1 |
| Kurzvideo: TikTok, Reels, Shorts | Kern | Phase 2 |
| YouTube | selektiv | Phase 2 |
| LinkedIn, Gründer persönlich | gering, Person postet selbst | Phase 1, Entwürfe |
| WhatsApp, Einladungen | selektiv | läuft teilweise |
| Pinterest | nur, wenn das Kanalprofil ihn führt | offen |

Keine Reihe toter Symbole in der Fußzeile der Website. Dort stehen nur Kanäle, die wirklich bespielt werden.

## Formate und sichere Zonen

Jeder Kanal legt eigene Knöpfe, Namen und Bildtexte über das Bild. Die sichere Zone ist der Rand, in dem kein Text und kein Logo stehen.

| Format | Kanal | Pixel | Sichere Zone (o/r/u/l) |
| --- | --- | --- | --- |
| Beitrag 4:5 | Instagram, Threads | 1080 × 1350 | 0/34/0/34 |
| Story 9:16 | Instagram, Facebook | 1080 × 1920 | 250/60/340/60 |
| Reel-Titelbild 9:16 | Instagram Reels, YouTube Shorts | 1080 × 1920 | 220/140/420/60 |
| Video-Titelbild 9:16 | TikTok | 1080 × 1920 | 160/150/480/60 |
| Beitrag 4:5 | Facebook | 1080 × 1350 | 0/0/0/0 |
| Linkbild 1,91:1 | LinkedIn (Gründer persönlich) | 1200 × 627 | 0/0/0/0 |
| Vorschaubild 16:9 | YouTube | 1280 × 720 | 0/200/70/0 |
| Vorschaubild für Links | WhatsApp, iMessage, Suche | 1200 × 630 | 0/285/0/285 |
| Pin 2:3 | Pinterest | 1000 × 1500 | 0/0/160/0 |

> **Hinweis**
>
> Die sicheren Zonen sind Richtwerte nach dem Stand Herbst 2026. Die Kanäle ändern ihre Oberflächen ohne Ankündigung. Vor einer Kampagne einmal mit einem echten Beitrag in der Vorschau prüfen.

## Beispielmotive

Jedes Motiv ist aus Tokens, Logo und einem echten Screen von Familie Sonntag gebaut. Es gibt fünf Vorlagen: **Screen** (Szene und Gerät), **Merksatz** (ein Satz, groß), **Szene** (Uhrzeit oben, Moment darunter), **Schritte** (höchstens drei) und **Linkbild**. Unter jedem Motiv lässt sich die sichere Zone einblenden.

### Hochformat für den Feed

**Beitrag 4:5** · Instagram, Threads · 1080 × 1350 px · sichere Zone 0/34/0/34 px

Motiv: screen, Fläche blau, Screen Main — „Freitag, 18:40. Oma Grete fährt.“

- Das Profilraster schneidet auf 3:4 zu: links und rechts je 34 px bleiben frei von Text.
- Ein Gedanke je Beitrag, kein Karussell mit sieben Vorteilen.
- Der Screen steht neben der Situation: Uhrzeit, Name, Ort im Titel.
- Die Fläche trägt die Bedeutung: Blau für Fahrten, Gelb für Familie und Ritual.

**Beitrag 4:5** · Facebook · 1080 × 1350 px · sichere Zone 0/0/0/0 px

Motiv: merksatz, Fläche gelb — „Neben jeder Sache steht ein Name.“

- Der Merksatz steht allein. Keine zweite Aussage im Bild.
- Text im Bild höchstens zwei Zeilen unter dem Merksatz.
- Kommentare beantwortet ein Mensch, in derselben Sprache. Albert antwortet nicht.

**Pin 2:3** · Pinterest · 1000 × 1500 px · sichere Zone 0/0/160/0 px

Motiv: screen, Fläche gelb, Screen Essensplan — „Pfannkuchen. Sofia und Lena kochen.“

- Nur, wenn das Kanalprofil des Markts Pinterest führt (docs/60 §8).
- Unten 160 px liegen Speichern und Teilen.
- Gut für Essen, Packlisten und Anlässe: Dinge, die man aufhebt.

### Senkrecht für Story, Reel und Kurzvideo

**Story 9:16** · Instagram, Facebook · 1080 × 1920 px · sichere Zone 250/60/340/60 px

Motiv: schritte, Fläche grund, Screen Eingang — „Drei Schritte für die Woche.“

- Oben 250 px liegen Profilbild und Fortschritt, unten 340 px Antwortfeld und Sticker.
- Drei Schritte sind die Grenze. Vier liest niemand.
- Ein Link führt immer über den Kurzlink mit UTM (hey-albert.app/l/…).
- Kein Countdown, kein „nur heute“.

**Reel-Titelbild 9:16** · Instagram Reels, YouTube Shorts · 1080 × 1920 px · sichere Zone 220/140/420/60 px

Motiv: szene, Fläche rosa, Screen MomentTurnbeutel — „Lena hat selbst gepackt.“

- Rechts 140 px liegen Herz, Kommentar und Teilen, unten 420 px Name und Bildtext.
- Im Profilraster erscheint das Titelbild als 3:4-Ausschnitt aus der Mitte.
- Die ersten zwei Sekunden zeigen die Szene, nicht das Logo.
- Untertitel immer eingebrannt, viele schauen ohne Ton.

**Video-Titelbild 9:16** · TikTok · 1080 × 1920 px · sichere Zone 160/150/480/60 px

Motiv: szene, Fläche gelb, Screen Wochenboard — „Sonntag, 18:00. Alle am Tisch.“

- Unten 480 px liegen Bildtext, Ton und Name, rechts 150 px die Knöpfe.
- Kurzvideo ist ab Phase 2 ein Kernkanal (docs/60 §8).
- Keine Kindergesichter. Hände am Tablet oder eine Zeichnung.
- Kein Trend-Ton mit Spott über Eltern.

### Quer für Links, Video und LinkedIn

**Linkbild 1,91:1** · LinkedIn (Gründer persönlich) · 1200 × 627 px · sichere Zone 0/0/0/0 px

Motiv: screen, Fläche grund, Screen Wochenboard — „Fünf Menschen, eine Woche, ein Board.“

- Der Gründer postet selbst. Agenten schreiben nur Entwürfe.
- Format „Der Bau“: wie etwas entstanden ist, sparsam.
- Keine Zahlen ohne Beleg, keine Wettbewerber beim Namen.

**Vorschaubild 16:9** · YouTube · 1280 × 720 px · sichere Zone 0/200/70/0 px

Motiv: screen, Fläche schwarz, Screen Wochenboard — „So plant Familie Sonntag ihre Woche.“

- Unten rechts liegt die Laufzeit: dort kein Text.
- Der Titel im Bild wiederholt nicht den Videotitel, er zeigt die Szene.
- Kein erstauntes Gesicht, kein roter Pfeil.

**Vorschaubild für Links** · WhatsApp, iMessage, Suche · 1200 × 630 px · sichere Zone 0/285/0/285 px

Motiv: og, Fläche grund — „Hey Albert. Er kümmert sich.“

- Manche Messenger zeigen nur ein Quadrat aus der Mitte: Claim und Logo bleiben in den mittleren 630 px lesbar.
- Eine Fassung je Sprache, erzeugt von tooling/og-bilder.py.
- Landingpages bekommen ein eigenes Bild mit ihrer Szene.

> **Hinweis**
>
> Die Motive sind Muster für Aufbau und Ton. Einige zeigen Funktionen, die noch nicht für alle Familien da sind, zum Beispiel Oma Grete als Gast. Ein Beitrag geht erst raus, wenn die Funktion steht, die er zeigt.

## Fläche und Farbe

Die Fläche eines Motivs trägt eine Bedeutung, wie in der App. Sie wird nicht nach Laune gewählt.

| Fläche | Wann |
|---|---|
| Creme, der Grund | ruhige Motive, Linkbilder, Erklärungen |
| Gelb | Familie und Ritual: Sonntagsrunde, Essen, Merksätze über das Miteinander |
| Blau | Fahrten |
| Rosa | ein Moment im Jetzt, sparsam |
| Schwarz | Video-Vorschau, wenn ein heller Screen davor steht |

- Gelb ist immer Fläche, nie Schrift.
- Rosa heißt nie „Fehler“ oder „Achtung“.
- Text auf Fläche ist immer Tinte. Auf Schwarz ist er Creme.
- Keine Verläufe, keine Schatten, keine Glanzlichter.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| grund | var(--grund) | #F8F2E7 | #14110D | Seitenhintergrund, warmes Creme |
| gelb | var(--gelb) | #F5D95C | #F5D95C | Familie und Rituale, Alberts Vorschlag (iPhone), Zahlen |
| blau | var(--blau) | #BFCDF0 | #BFCDF0 | Fahrten |
| rosa | var(--rosa) | #F3B8DF | #F3B8DF | Akzent: Plus, Jetzt-Zeit, aktiver Ort, Zähler, Lupe |
| schwarz | var(--schwarz) | #171717 | #0B0A08 | Leiste, primäre Knöpfe, heutiger Tag, aktive Auswahl |

## Bild

**Wir zeigen**

- echte Screens von Familie Sonntag auf flachen Geräterahmen
- flache Tuschezeichnung mit genau einem gelben Akzent
- genau ein echtes Foto: der Gründer
- ein physisches Objekt: das gedruckte Jahresbuch

**Wir zeigen nie**

- Kindergesichter
- Stockfotos
- KI-erzeugte Bilder
- Glanz, Perspektive, 3D-Geräte
- Karussell, Autoplay-Video
- echte Familiendaten

- **Nie ein echtes Kind zeigen**, das nicht ausdrücklich und widerruflich zugestimmt hat. Im Zweifel zeichnen wir.
- **Die App nur im Zusammenhang.** Ein Screen allein ist langweilig, ein Screen neben der Situation nicht.
- **Unaufgeräumte Wohnungen.** Wer eine makellose Küche zeigt, spricht nicht mit unserer Zielgruppe.
- **Kinder, die etwas tun:** abhaken, eintragen, mitentscheiden. Nie Kinder, die betreut werden.
- Keine Fortschrittsbalken, Ranglisten oder fremden Taler-Stände, auch nicht als Deko.

## Text

- **Ein Gedanke je Beitrag.** Kein Karussell mit sieben Vorteilen.
- Titel im Bild höchstens acht Wörter. Bildtext darunter höchstens zwei Zeilen.
- Register Erzähler: Szene vor Eigenschaft, Zusage statt Verneinung, Gewinn statt Schmerz.
- Kein Ausrufezeichen, kein Emoji, kein Superlativ.
- **Kein Vergleich mit anderen Produkten**, keine Konkurrenz beim Namen.
- Links immer über den eigenen Kurzlink mit UTM: `hey-albert.app/l/<code>`. Er zählt Klicks ohne Cookie.

| Wort | Warum |
| --- | --- |
| KI | Senkt bei einem Produkt mit Kinderdaten und Post nachweislich Vertrauen. Wir beschreiben Verhalten. |
| smart | Leere Behauptung. |
| intelligent | Leere Behauptung. |
| magisch | Leere Behauptung. |
| automatisch | Albert handelt nie allein. |
| nahtlos | Leere Behauptung. |
| Mental Load | Wir werben mit dem Gewinn, nie mit dem Schmerz. |
| Chaos | Kein Vorwurf an die Familie. |
| Nie wieder … | Zusage statt Verneinung. |
| Superlative („#1“, „das beste“) | Keine Rangbehauptung. |
| jetzt sichern | Keine Erwerbssprache, kein Druck. |
| spart Zeit | Kein Wirkversprechen. |

> **Offen**
>
> Für Hashtags gibt es noch keine Regel. Bis zur Entscheidung: höchstens drei, nur Begriffe, die Familien selbst suchen, nie die Namen anderer Produkte.

## Kommentare

Kommentare beantwortet **ein Mensch**, in derselben Sprache. Albert antwortet nicht auf Instagram. Er ist eine Figur im Produkt, kein Social-Media-Charakter.

Agenten dürfen Antworten vorschlagen. Abschicken tut ein Mensch. In Communities wie Foren und Elterngruppen schreibt nie ein Agent.

## Kennzeichnung

Seit dem 2. August 2026 gilt Artikel 50 des EU AI Act. Für uns heißt das:

- Erzeugte Bilder, Videos und Töne behalten ihre maschinenlesbare Kennzeichnung. Wir kodieren sie nicht neu, ohne die Kennzeichnung zu übernehmen.
- Ein Text, für den kein Mensch die redaktionelle Verantwortung trägt, wird offengelegt. Unser Freigabe-Eintrag ist dieser Nachweis.
- Das Register `disclosureRegister` hält je Inhalt: erzeugendes Modell, Kennzeichnung, menschliche Prüfung.
- Werbung wird je Markt nach dessen Regeln gekennzeichnet.

Und unabhängig vom Gesetz: Unsere Bildsprache verbietet erzeugte Bilder von Menschen. Wir zeigen echte Screens, eigene Zeichnungen und genau ein Foto.

## Freigabe

Ein Beitrag verlässt das Haus nur durch ein Tor. Der Weg ist in der Datenbank festgelegt (`marketing.social_posts`):

**Entwurf → freigegeben → geplant → gesendet** (oder fehlgeschlagen)

- Agenten schreiben Entwürfe und dürfen bis „freigegeben“ vorschlagen. Ein Mensch gibt frei und sendet.
- Jede Änderung setzt den Beitrag auf „Entwurf“ zurück und nimmt die Freigabe weg.
- Geplantes und Gesendetes lässt sich nicht mehr ändern. Geplantes kann man beim Anbieter zurückziehen.
- Veröffentlicht wird über das Publishing-Gateway im HQ (`packages/publishing`, Anbieter Ayrshare). Kalender, Entwürfe und Kennzahlen stehen unter HQ → Marketing → Social.

> **Offen**
>
> Der Redaktionsplan fehlt: Rhythmus je Kanal und wer schreibt. Ayrshare braucht noch Konto und Schlüssel, bevor der erste Beitrag aus dem HQ gesendet werden kann.


---

# App Store

> Name, Untertitel, Beschreibung, Screenshots, App-Symbol, Datenschutz-Angaben, Review-Zugang und die Sprache für Abos — alles, was in App Store Connect landet.

Quelle: https://brand.heyalbert.family/app-store/ · Hey Albert Marke und Designsystem

Im App Store entscheiden Eltern, und Kinder benutzen mit. Beide müssen vorkommen. Der Text nennt die Situation zuerst und die Funktion danach. Keine Superlative — Apple mag sie nicht, und wir auch nicht.

Die App erscheint im Konto von **Emma Rocket Ltd OOD** (Team `YG75LZA4JP`), Bundle-Präfix `com.emmarocket.albert`. Eine App für iPhone, iPad, Mac und Apple Watch, als Universal Purchase.

## Felder und Grenzen

| Feld | Grenze | Register | Stand |
|---|---|---|---|
| Name | 30 Zeichen | — | „Hey Albert“; ein Zusatz ist offen |
| Untertitel | 30 Zeichen | Erzähler | offen, siehe unten |
| Werbetext | 170 Zeichen, ohne neue Prüfung änderbar | Erzähler | für Saison und Neuigkeiten |
| Beschreibung | 4.000 Zeichen | Erzähler, Preis im Sachbearbeiter | Entwurf unten |
| Schlüsselwörter | 100 Zeichen, mit Komma | — | aus `marketing.keywords` |
| Was ist neu | 4.000 Zeichen | Erzähler | wie das Changelog der Website |

> **Offen**
>
> Der Untertitel ist nicht entschieden. `docs/21` nennt „Albert zaubert, damit ihr Familie sein könnt.“ als Untertitel. Das sind 45 Zeichen, erlaubt sind 30. Die Website führt „Er kümmert sich. Ihr dürft Familie sein.“ Der Gründer wählt eine Fassung, die in 30 Zeichen passt.

## Die Beschreibung

Der erste Satz steht ohne „Mehr“ im Bild. Er ist eine Szene, keine Definition. Danach folgen die Bereiche als das, was sie im Leben tun, und am Ende Preis und Datenschutz im Register Sachbearbeiter.

> **Beispiel**
>
> Freitag, 18:40, Rückfahrt vom Turnier. Oma Grete hat sich eingetragen, ohne anzurufen.
> 
> Albert ist der Family Manager für euer Zuhause. Er plant die Woche mit euch und hält alles zusammen — Termine, Fahrten, Essen, Hausaufgaben, Verträge, Fristen. Für alle, die zu euch gehören.
> 
> Neben jeder Sache steht ein Name. Alle im Haus sehen ihn, auch die Kinder. Lena ist neun. Was heute an ihr hängt, sieht sie und hakt es selbst ab.
> 
> Albert schlägt vor, ihr entscheidet. Rückgängig geht immer. Eure Daten liegen in Frankfurt.

- Die Anrede ist **ihr**, wie auf der Website.
- Jede Aussage muss beim Start stimmen. Was noch nicht gebaut ist, steht nicht im Store.
- Keine Wörter von der Nie-Liste, kein „KI“, kein „smart“, kein „automatisch“.

## Screenshots

Echte Screens von Familie Sonntag, eine Aussage je Bild. Über dem Screen steht ein kurzer Satz im Register Erzähler, höchstens sechs Wörter. Die ersten drei Bilder entscheiden, denn nur sie erscheinen in der Suche.

| Gerät | Pflichtgröße in App Store Connect | Unsere Screens heute |
|---|---|---|
| iPhone 6,9 Zoll | 1320 × 2868 px (oder 1290 × 2796) | 780 × 1688, zu klein |
| iPad 13 Zoll | 2064 × 2752 px (oder 2048 × 2732) | 1668 × 2388, zu klein |
| Mac | 16:10, z. B. 2880 × 1800 px | 2880 × 1800, passt |
| Apple Watch | je Modell, z. B. 422 × 514 px | 792 × 968, nicht in Apples Liste |

> **Hinweis**
>
> Die Größen sind der Stand Herbst 2026. Bis zu zehn Bilder je Gerät und Sprache, dazu bis zu drei Vorschauvideos. Vor dem Hochladen in App Store Connect gegen Apples aktuelle Liste prüfen. Die Store-Screens werden neu aufgenommen, in voller Auflösung, aus dem Simulator mit dem Seed von Familie Sonntag.

**Vorgeschlagene Reihenfolge**, aus dem, was es schon gibt:

1. **Heute** — „Oma Grete fährt um 18:40.“
2. **Woche** — „Neben jeder Sache ein Name.“
3. **Eingang** — „Der Elternbrief wird ein Vorschlag.“
4. **Kinder** — „Lena packt selbst.“
5. **Essen** — „Mittwoch kochen Sofia und Lena.“
6. **Wichtiges** — „Lenas Ausweis läuft im März ab.“
7. **Watch** — „16:40 · Handball, Halle Süd.“

![Main](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![Wochenboard](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

![Eingang](https://brand.heyalbert.family/bilder/screens/Eingang.png)

*Eingang · iphone · 780 × 1688 px*

![MomentTurnbeutel](https://brand.heyalbert.family/bilder/screens/MomentTurnbeutel.png)

*MomentTurnbeutel · iphone · 780 × 1688 px*

![Essensplan](https://brand.heyalbert.family/bilder/screens/Essensplan.png)

*Essensplan · iphone · 780 × 1688 px*

![Safe](https://brand.heyalbert.family/bilder/screens/Safe.png)

*Safe · mac · 2880 × 1800 px*

![Watch](https://brand.heyalbert.family/bilder/screens/Watch.png)

*Watch · watch · 792 × 968 px*

> **Nicht so**
>
> Screens ohne Zusammenhang, Gerätemodelle mit Glanz und Perspektive, Kindergesichter, erfundene Bewertungen, „#1 Familien-App“.

## App-Symbol

Das Symbol ist der Kritzelball in Tinte und Rosa auf Creme, ohne Schrift. Es muss ohne Namen erkennbar sein und auch bei 29 Punkten noch wie Albert aussehen.

> **Offen**
>
> Eine Vektorfassung des Logos fehlt. Die Vektoren, aus denen App-Symbol und Favicon heute entstehen, sind noch dunkelgrün und müssen auf Tinte und Rosa umgefärbt werden (`docs/22` §7). Bis dahin gibt es kein abgenommenes App-Symbol für den Store.

Die heutigen Fassungen stehen im Kapitel [Logo](/logo/).

## Datenschutz-Angaben

Die Angaben für Apples Datenschutz-Etikett stehen in `docs/44-app-privacy.md`. Die Grundhaltung in drei Sätzen:

1. Albert sammelt nichts, was der Haushalt nicht selbst eingetragen hat. Kein Tracking, keine Werbe-IDs.
2. Was das Gerät nicht verlassen muss, verlässt es nicht. Texterkennung läuft auf dem Gerät.
3. Die Verarbeiter sitzen in der EU, die Datenbank liegt in Frankfurt.

| Datenart ab Phase 0 | Erhoben | Verknüpft | Tracking |
|---|---|---|---|
| Name | ja | ja | nein |
| Mailadresse | ja | ja | nein |
| Benutzer-ID | ja | ja | nein |
| Geburtsdatum | ja | ja | nein |
| Absturzdaten | ja | nein | nein |

Tracking ist in der ganzen Tabelle „nein“, ohne Ausnahme. Weitere Datenarten kommen mit ihren Phasen dazu.

- **Altersfreigabe:** angestrebt 4+.
- **Nicht in der Kids-Kategorie.** Die Kategorie verbietet Dinge, die Albert für Eltern braucht, und verlangt eine Trennung, die dem fünften Leitsatz widerspricht.
- **Konto löschen** geht in der App, mit zwei Toren: ein Knopf, dann das Wort „LÖSCHEN“ tippen.
- **Berechtigungen** werden erst gefragt, wenn sie gebraucht werden. Nie beim Start, nie im Bündel.

> **Offen**
>
> `docs/44` nennt Anthropic als Verarbeiter für ausdrücklich angeforderte Auswertungen und Cloudflare R2 als Speicher. `CLAUDE.md` und `docs/34` schließen US-Anbieter im Datenpfad aus. Vor der Einreichung ist zu klären, welcher Stand gilt, und `docs/44` anzupassen.

## Review-Zugang

Apples Prüfer melden sich mit dem Seed-Haushalt **Familie Sonntag** an. Er ist zugleich unser Beispiel auf allen Bildern.

- Das Passwort steht nur in App Store Connect, nie im Repository.
- Der Seed ist vollständig: eine Woche mit Offenem, ein Vorschlag im Eingang, Lenas Bereich mit Talern.
- Notiz für die Prüfer: kurz, im Register Sachbearbeiter, mit dem Weg zu jeder Berechtigung.

## Abos und Preis

Albert ist ein Abo. Die Sprache dafür ist offen und ruhig. Ein Abo kostet jeden Monat etwas, weil Albert jeden Monat etwas tut.

> **So**
>
> „Der erste Monat kostet 0 €.“ · „Ihr bezahlt Albert, sonst niemand.“ · „Kündigen in den Einstellungen eures Apple-Geräts, mit einem Tipp.“

> **Nicht so**
>
> „Premium freischalten“ · „Jetzt sichern“ · „Nur heute“ · ein Sternchen am Preis · „ab 4,99 €“

- Die Größen heißen nach Szenen, nicht nach Stufen.
- Ein Abo schaltet den ganzen Haushalt frei, serverseitig. Apples Familienfreigabe fürs Abo bleibt aus.
- Das Small Business Program wird vor dem Start beantragt.

> **Offen**
>
> Zwei Preismodelle stehen in den Dokumenten. `docs/24` §11: drei Größen Tisch, Haus und Dorf zu 4,99, 8,99 und 12,99 € im Monat, der erste Monat 0 €. `docs/42`: Monat und Jahr, 79,99 € im Jahr, 30 Tage Probezeit. Der Gründer entscheidet, bevor die In-App-Käufe angelegt werden.


---

# Mail, Briefe und Support

> Wie Hey Albert schreibt, wenn es im Postfach landet — Absender und Domains, Aufbau der Vorlagen, Betreffzeilen, Bestätigung und Abmelden, Briefe im Namen der Familie und Antworten im Support.

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

Eine Mail ist oft das Erste, was jemand von uns liest, noch vor der App. Darum hält jede Mail dieselben Regeln ein wie jede Fläche: richtiges Register, kein Ausrufezeichen, kein Emoji, ein Knopf mit einem Verb.

## Absender und Domains

Zwei Domains trennen Systemmails von allem, was wir freiwillig schicken. So leidet die Zustellung der Anmeldung nie unter einem Newsletter.

| Art | Absender | Domain | Antwort an |
|---|---|---|---|
| Systemmails: Anmeldung, Bestätigung, Einladung, Passwort, Adresswechsel | `Hey Albert <albert@mail.hey-albert.app>` | `mail.hey-albert.app` | — |
| Liste, Newsletter, Umfrage | `Hey Albert <albert@hello.hey-albert.app>` | `hello.hey-albert.app` | `contact@hey-albert.app` |
| Interne Hinweise ans Team | `Hey Albert Liste <albert@mail.hey-albert.app>` | `mail.hey-albert.app` | — |

- Versand über Resend, Region EU. Systemmails gehen über das SMTP von Supabase an Resend.
- SPF, DKIM und DMARC sind gesetzt, DMARC mit `p=quarantine`.
- `contact@hey-albert.app` ist ein echtes Postfach bei Google Workspace. Dort antwortet ein Mensch.
- Der Absendername ist immer „Hey Albert“. Nie ein Vorname, nie „noreply“.

## Aufbau einer Mail

Jede Mail hat dieselben fünf Teile. Die Texte stehen je Sprache in der Vorlage und lassen sich im HQ unter Texte ändern, ohne Code.

| Teil | Was | Grenze |
|---|---|---|
| **Betreff** | der Inhalt in einem Satz, danach „— Hey Albert“ | etwa 50 Zeichen |
| **Titel** | groß, in Bricolage, ein Satz | ein Satz |
| **Satz** | was jetzt gilt und was als Nächstes kommt | zwei bis drei Sätze |
| **Knopf** | ein Verb, die Folge | einzeilig |
| **Kleingedrucktes** | warum diese Mail kam, wie man sie abbestellt | zwei Sätze |

Oben steht das Logo im Kreis, unten Firma, Impressum und der Link zum Abmelden.

> **Beispiel**
>
> **Betreff:** Bitte bestätigt eure Adresse — Hey Albert
> 
> **Titel:** Noch ein Tipp, dann seid ihr dabei.
> 
> **Satz:** Bestätigt eure Adresse, dann steht ihr auf der Liste für die Testphase. Wir melden uns, sobald es losgeht — mit Neuigkeiten und eurer Einladung.
> 
> **Knopf:** Adresse bestätigen
> 
> **Klein:** Wenn ihr das nicht wart, müsst ihr nichts tun. Der Link gilt drei Tage.

## Anrede

- **Liste, Newsletter, Umfrage:** „ihr“. Hinter einer Adresse auf der Liste steht meist ein Haushalt.
- **Systemmails:** „du“. Den Link fordert eine Person für ihr eigenes Konto an: „Hier ist dein Link.“
- **Nie** „Sie“, nie „Liebe Nutzerin, lieber Nutzer“.

## Betreffzeilen

Der Betreff sagt, was drin ist. Er lockt nicht.

| Mail | Betreff |
|---|---|
| Bestätigung | Bitte bestätigt eure Adresse — Hey Albert |
| Willkommen | Ihr steht auf der Liste — Hey Albert |
| Wieder da | Schön, dass ihr wieder da seid — Hey Albert |
| Abgemeldet | Ihr seid von der Liste — Hey Albert |
| Umfrage | Fünf Minuten für Albert — was wäre euch wichtig? |
| Erinnerung | Kurze Erinnerung: fünf Minuten für Albert |

> **Nicht so**
>
> „Nur noch heute!“ · „Du hast etwas verpasst“ · „Re:“ ohne vorherige Mail · Großbuchstaben · ein Emoji vorn im Betreff

## Bestätigung und Abmelden

- **Doppelte Bestätigung.** Wer sich einträgt, bekommt eine Mail mit Link. Erst nach dem Klick steht die Adresse auf der Liste. Der Link gilt drei Tage.
- **Nachweis.** Jede Einwilligung wird mit Zeit, Fassung und Herkunft protokolliert.
- **Abmelden mit einem Klick.** Jede Mail der Liste trägt den Kopf `List-Unsubscribe` mit One-Click und unten einen sichtbaren Link.
- **Eine Bestätigung, dann Ruhe.** Nach dem Abmelden kommt genau eine Mail, die es bestätigt. Danach nichts mehr.
- **Takt.** Der Newsletter kommt etwa einmal im Monat. Erinnerungen an die Umfrage hören auf, wenn jemand „nein“ sagt.
- **Messen.** Zustellung, Öffnung und Klick kommen über den Resend-Webhook. Eigene Zählung je Kontakt nur nach Einwilligung.

## Sprachen

Die Mails der Liste gibt es in allen elf Sprachen der Website. Die Sprache folgt der Seite, auf der sich jemand eingetragen hat. Die Systemmails sind heute deutsch.

> **Offen**
>
> Die fünf Vorlagen der Systemmails in `supabase/templates/` nennen im Fuß noch die alte Domain „heyalbert.de“ statt `hey-albert.app`. Sie tragen Farbwerte inline, weil Mailprogramme keine CSS-Variablen kennen. Diese Werte sollten aus den Tokens erzeugt werden, statt von Hand zu stehen. Englische Systemmails fehlen.

## Briefe im Namen der Familie

Albert entwirft Antworten an Schule, Verein, Versicherung, Handwerker und Behörde. Das ist das Register **Briefeschreiber**, und es ist nicht Alberts Stimme, sondern die der Familie.

- Ein Brief an die Versicherung klingt nach Tobias, nicht nach Software.
- Sachlich, höflich, knapp. Ohne Anbiederung, ohne Drohgebärde.
- Anrede, Form und Ton übernimmt Albert aus dem, was die Familie vorher geschrieben hat. Wer die Schule siezt, siezt sie weiter.
- Sätze im Schnitt zwölf Wörter, höchstens 18.
- Jeder Entwurf ist sichtbar als Entwurf markiert. Ein Erwachsener liest ihn, ändert ihn und schickt ihn ab — jedes Mal.
- Im Brief selbst steht kein Hinweis auf Albert. Der Absender ist die Familie.

> **Entwurf an die Grundschule am Park**
>
> Sehr geehrte Frau Weber,
> 
> danke für den Elternbrief zur Klassenfahrt. Lena fährt mit. Die Unterschrift liegt bei, die 8,00 € gibt sie am Freitag ab.
> 
> Viele Grüße
> Anna Sonntag

## Support

Im Support schreibt ein Mensch, nicht Albert.

- Wenn etwas schiefging: einmal entschuldigen, dann sagen, was wir tun.
- Keine Textbausteine, keine Ticketnummer im ersten Satz.
- Antwort in der Sprache der Anfrage, mit „ihr“ oder „du“, so wie die Anfrage geschrieben ist.
- Fehler und leere Zustände sagen drei Dinge: was hierher gehört, warum es leer oder schiefgegangen ist, was man tun kann. Kein „Fehler“, kein „Ups“.

> **So**
>
> „Die Bestätigungsmail ist bei euch nicht angekommen. Das lag an uns. Wir haben sie eben noch einmal geschickt, der Link gilt drei Tage.“

> **Nicht so**
>
> „Vielen Dank für Ihre Anfrage. Ihr Ticket #4711 wurde erstellt. Wir bitten um Ihr Verständnis.“


---

# Wie wir entwickeln

> Eine Quelle, viele Oberflächen. Wie Tokens, Bauteile und Prüfer zusammenhängen, welche Regeln im Code gelten und wann eine Ansicht fertig ist.

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

Hey Albert läuft im Browser, auf iPhone, iPad, Mac und Watch. Alle Oberflächen zeigen dieselben Zeilen aus derselben Datenbank. Und alle tragen dieselbe Gestaltung aus derselben Quelle: `packages/design-system`.

Dieses Kapitel ist für alle, die Code schreiben. Das gilt für Menschen im Team, für externe Fachleute und für Agenten.

## Eine Quelle

Jeder Wert der Marke steht genau einmal im Repository. Farben, Maße, Schriften und Bewegungen liegen in `packages/design-system/tokens/quelle/*.json`. Alles andere verweist darauf.

| Was | Wo | Wird zu |
|---|---|---|
| Tokens | `tokens/quelle/*.json` (Format der W3C Design Tokens Community Group) | `tokens/*.css`, `tailwind/theme.css`, `swift/Tokens.swift` |
| Bauteile | `components/<gruppe>/<Name>.jsx` mit `.d.ts` und `.prompt.md` | Vorlage für `apps/web/src/bausteine` und für SwiftUI |
| Web-Primitive | `bauteile/ui/*.tsx` (shadcn auf unseren Rollen) | Formulare, Dialoge, Tabellen im HQ und auf der Website |
| Website-Blöcke | `bloecke/*.tsx`, eins zu eins zu `packages/content-model` | die Seiten von hey-albert.app aus Payload |
| Regeln | `regeln/regeln.json` | diese Seite, Brand-QA, Agenten |
| Schriften, Zeichen, Logos | `assets/` | alle Oberflächen, lokal ausgeliefert |

> **Warum nur eine Quelle**
>
> Zwei Quellen für dieselbe Sache sind keine Redundanz, sondern eine Gabelung. Die erste Brand-Seite vom 30. August wurde am 4. September gelöscht, weil sie eigene Werte trug. Auch diese Seite enthält keinen Wert. Alles hier wird beim Bau aus dem Paket gelesen.

## Die Reihenfolge

Jeder Bereich entsteht in derselben Folge. So steht das Fundament, bevor jemand eine Fläche sieht.

1. **Schema und RLS.** Die Tabelle mit `household_id`, Index und vier Policies, in einer Migration.
2. **Tests.** pgTAP für alle fünf Rollen: `owner`, `adult`, `child`, `guest`, `service`.
3. **Domänenlogik.** Reine Funktionen ohne Oberfläche, mit eigenen Tests.
4. **Oberfläche.** Aus Bauteilen des Systems, gegen den Seed von Familie Sonntag.

Gegen leere Screens wird nie gebaut. Der Seed-Haushalt hat eine echte Woche: Mo 1. bis So 7. September, heute ist Mittwoch.

## Der Stack je Oberfläche

### Web-App und HQ

`apps/web` ist Next.js 16 mit App Router. Die Tokens kommen als CSS-Variablen direkt aus dem Paket, im Layout per Import von `tokens/colors.css` und den übrigen Token-Dateien. Tailwind dient nur Layout-Hilfen wie Raster, Abstände und Umbrüche. Farbe, Schrift und Radius laufen über Rollen.

Die Bauteile in `apps/web/src/bausteine` sind die Produktionsfassungen der Bauteile im System. `Rahmen.tsx` ist `LeisteMac` und `Kopfzeile`, `Zeichen.tsx` ist `Icon`. Weicht eine Fassung ab, ist das ein Fehler, kein Stil.

### Website

`apps/site` baut hey-albert.app aus Payload. Jeder Block im Inhaltsmodell hat genau ein Bauteil in `packages/design-system/bloecke`. `RenderBloecke` wählt nach `blockType`. `pnpm test` im Paket prüft, dass kein Block ohne Bauteil bleibt.

### Apple

`apps/apple` wird SwiftUI Multiplatform mit Swift 6 und strikter Nebenläufigkeit. Die Rollen liegen in `swift/Tokens.swift`: `AlbertFarbe`, `AlbertRaum`, `AlbertSchrift`, `AlbertForm`, `AlbertBewegung`. Jede Farbe trägt hell und dunkel und entscheidet zur Laufzeit.

> **Offen**
>
> Die Swift-App zieht erst mit ihrer Phase in `apps/apple` ein. Bis dahin ist `Tokens.swift` erzeugt, aber in keinem Xcode-Projekt eingebunden.

## Tokens als Code

Die Quelle ist JSON im Format der W3C Design Tokens Community Group, ein Satz je Datei: `farben-hell`, `farben-dunkel`, `schrift`, `raum`, `form`, `bewegung`. Style Dictionary 5 erzeugt daraus drei Ausgaben, ohne Werte umzurechnen.

```bash
cd packages/design-system
pnpm tokens        # erzeugen und gegen die eingefrorene Referenz prüfen
pnpm tokens:diff   # nur prüfen
```

`tokens-diff` vergleicht jedes Paar aus Name und Wert mit `tokens/referenz/`. Weicht ein Wert ab, bricht der Lauf ab. Neue Rollen stehen mit Begründung in `tokens/referenz/ergaenzungen.txt`.

Die erzeugten Dateien tragen in der ersten Zeile „Erzeugt aus tokens/quelle“. Niemand ändert sie von Hand. Der GitHub-Lauf `design.yml` erzeugt sie neu und prüft, dass nichts abweicht.

## Regeln im Code

- Kein Hex-Wert in einem Bauteil. Farbe läuft über Rollen (--grund, --karte, --tinte, --akzent).
- Keine Schatten, nirgends. Tiefe kommt aus Schleier, stärkerer Kontur und Kippung.
- Bedeutungen werden nicht getauscht: Rosa = Akzent und Jetzt, Gelb = Familie und Ritual, Blau = Fahrt, Offen-Rosa nur als gestrichelter Rand für „ohne Zuständigen“. Rosa heißt nie „Fehler“.
- Farbe ist nie der einzige Träger. Initiale oder Name steht dabei.
- Inaktiv ist eine gerechnete Rolle, keine Deckkraft.
- Text und Bedienelemente mindestens 4,5:1, Flächen und Konturen mindestens 3:1.
- Zielflächen: Zeiger 28, Finger 44, Kind 56 px — nie darunter.
- Fokus immer über :focus-visible: 2 px Ring in Offen-Rosa mit 2 px Abstand.
- 120 ms Zustände, 200 ms Einblendungen, 300 ms Atem. Kein Federn, kein Kreisel. Bei reduzierter Bewegung steht alles still.
- Skelett statt Kreisel. Das Skelett hat die Form des Inhalts.
- Jede Änderung ist optimistisch und hat „Rückgängig“.
- Schriften werden lokal ausgeliefert, nie von Google-Servern.
- Kein Emoji, keine Unicode-Zeichen als Icon-Ersatz.
- Fehlt ein Zeichen, wird es aus dem Satz geholt, nicht erfunden.

### Farbe nur über Rollen

> **So**
>
> ```css
> .karte {
>   background: var(--flaeche-karte);
>   color: var(--text-koerper);
>   border: var(--strich-haar) solid var(--linie-haar);
>   border-radius: var(--radius-karte);
>   padding: var(--karte-innen);
> }
> ```

> **Nicht so**
>
> ```css
> .karte {
>   background: #EEE8DD;
>   color: rgba(0, 0, 0, 0.87);
>   border-radius: 10px;
>   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
> }
> ```
> Ein Hex-Wert, eine freie Deckkraft, ein freier Radius, ein Schatten. Vier Verstöße in vier Zeilen.

### React mit Tailwind

Das Tailwind-Theme kennt nur unsere Rollen. Tailwinds eigene Palette, Schatten und Radien sind abgeschaltet. `bg-red-500` oder `shadow-md` gibt es deshalb gar nicht.

> **So**
>
> ```tsx
> <button className="bg-knopf-primaer-flaeche text-knopf-primaer-text rounded-pille h-ziel-finger px-raum-2
>   hover:bg-knopf-primaer-flaeche-zeiger focus-visible:outline-2 focus-visible:outline-rand-fokus">
>   Ich fahre
> </button>
> ```

> **Nicht so**
>
> ```tsx
> <button className="bg-black text-white rounded-lg shadow-md h-8 opacity-50 focus:ring" disabled>
>   OK!
> </button>
> ```
> Fremde Farbe, freier Radius, Schatten, Zielfläche unter 44, Deckkraft für inaktiv, `:focus` statt `:focus-visible`, „OK“ als Knopftext und ein Ausrufezeichen.

Inaktiv ist eine gerechnete Rolle: `disabled:bg-knopf-inaktiv-flaeche disabled:text-knopf-inaktiv-text`. Deckkraft multipliziert sich mit dem Untergrund. Dann stimmt keine gerechnete Kontrastzahl mehr.

### SwiftUI

> **So**
>
> ```swift
> Text("Schwimmen mit Lena")
>   .foregroundStyle(AlbertFarbe.textKoerper)
>   .padding(AlbertRaum.karteInnen)
>   .background(AlbertFarbe.flaecheKarte,
>               in: RoundedRectangle(cornerRadius: AlbertForm.radiusKarte))
>   .overlay(RoundedRectangle(cornerRadius: AlbertForm.radiusKarte)
>     .stroke(AlbertFarbe.linieHaar, lineWidth: AlbertForm.strichHaar))
> ```

> **Nicht so**
>
> ```swift
> Text("Schwimmen mit Lena")
>   .foregroundColor(colorScheme == .dark ? .white : Color(hex: "#1A1A1A"))
>   .background(Color.yellow.opacity(0.4))
>   .cornerRadius(10)
>   .shadow(radius: 4)
> ```
> Dunkler Modus als Verzweigung statt als Rolle, Hex-Wert, Systemgelb mit Deckkraft, freier Radius, Schatten.

### Schriften lokal

Die vier Schriften liegen als woff2 für das Web und als TTF für die App im Paket. Nichts wird von Google-Servern geladen. Sonst ginge die IP-Adresse jedes Besuchers in die USA. Das LG München I hat das 2022 als Rechtsverletzung gewertet.

### Fokus

Fokus zeigt sich immer über `:focus-visible`, nie über `:focus`. Der Ring ist 2 px breit, in `--rand-fokus`, mit 2 px Abstand. So sieht ihn, wer mit der Tastatur arbeitet, und niemand sonst.

## Prüfer

| Prüfer | Was er findet | Befehl |
|---|---|---|
| Brand-QA | Hex-Wert außerhalb der Quelle, Schatten, freie Radien, verbotene Wörter, Ausrufezeichen, Bild ohne `alt` | `pnpm qa` im Paket |
| Token-Diff | Werte, die von der eingefrorenen Referenz abweichen | `pnpm tokens:diff` |
| Blöcke | Block im Inhaltsmodell ohne Bauteil | `pnpm test` |
| Storybook | Tokens, Primitive, jeder Block in de, en, tr, hell und dunkel, Handy und Tisch | `pnpm storybook` (Port 3112) |
| Bildvergleich | jede Story hell und dunkel, Handy und Tisch, Schwelle 0,1 % | `pnpm vr`, Referenzen neu: `pnpm vr:update` |
| Kontrast | Pflichtpaarungen nach WCAG in beiden Modi | `python3 tooling/check-kontrast.py` |
| Sprache | Satzlänge, Register, Wortlisten | `python3 tooling/check-sprache.py` |
| Agent `design-pruefer` | Token-Verstöße und Definition of Done einer Ansicht, nur lesend | in Claude Code vor jedem „fertig“ |
| Kapitel dieser Seite | Direktiven, Argumente, Sprache | `node apps/brand/skripte/pruefen.ts` |

> **Offen**
>
> `tooling/check-kontrast.py` und `tooling/check-sprache.py` brechen zurzeit ab. Beide suchen Module unter Pfaden des Vorgängers. Bis sie umgestellt sind, rechnet diese Seite die Kontraste selbst (Kapitel Farbe) und `pnpm qa` prüft die Wortliste.

Der GitHub-Lauf `design.yml` startet bei jeder Änderung unter `packages/design-system`. Er erzeugt die Tokens, prüft die Referenz, testet die Blöcke, läuft Brand-QA und Typen, baut Storybook und vergleicht die Bilder.

## Fertig ist eine Ansicht erst mit

- [ ] leerer Zustand
- [ ] Skelett statt Kreisel
- [ ] Tastatur und :focus-visible
- [ ] Handy und Tisch
- [ ] hell und dunkel als Token-Umschaltung
- [ ] optimistisches Update mit „Rückgängig“
- [ ] richtiges Register
- [ ] kein Hex-Wert
- [ ] Zielflächen 28/44/56

Auf dem Mac gehört Tastaturbedienung dazu, auch für Ziehen und Ablegen. In der App gehören Dynamic Type und VoiceOver dazu. Konflikte sind sichtbar, aber sie blockieren nicht.

## Ein neues Bauteil

Kein Bauteil entsteht nur in einer App. Was in `apps/web`, in der Swift-App oder auf der Website gebaut wird, kommt zuerst oder spätestens im selben Commit ins System.

1. `components/<gruppe>/<Name>.jsx` mit allen Zuständen: Standard, gedrückt, fokussiert, inaktiv, leer, hell und dunkel, Kind-Größe, wo Kinder bedienen.
2. `<Name>.d.ts` mit deutschen Props.
3. `<Name>.prompt.md`: wofür, welches Register, ein Beispiel mit Familie Sonntag, die Grenzen.
4. Eine `@dsCard`-Karte im Ordner und ein Eintrag in `_ds_manifest.json`.
5. Die Produktionsfassung in der App, mit gleichem Namen und gleichen Props.
6. `pnpm qa`, Storybook-Story, Bildvergleich.

Ein bestehendes Bauteil ändern heißt: erst `.prompt.md` lesen, dann das JSX, dann die Fassung in der App.

## Einen Token ändern

1. Den Wert in `tokens/quelle/*.json` ändern, bei Farben hell **und** dunkel.
2. `pnpm tokens` laufen lassen. Der Diff bricht ab und zeigt die Abweichung.
3. Die Änderung mit Datum, Kontext und Grund in `docs/entscheidungen.md` eintragen.
4. Die Referenz in `tokens/referenz/` neu einfrieren.
5. Kontrast und Bildvergleich prüfen, dann die erzeugten Dateien mit einchecken.

Eine neue Rolle braucht keine Entscheidung, aber eine Zeile in `ergaenzungen.txt` mit Grund. Eine bestehende Rolle ändert sich nur mit Entscheidung.

## Git und Veröffentlichen

Commits schreibt das Konto `guido77-EnP`, auf Deutsch, der Betreff als Satz. Vor jedem `git push` wird gefragt. Danach prüft `tooling/deploy-pruefen.sh` die Bauten von albert-web, albert-site und den GitHub-Lauf. Ein roter Bau bleibt nie stehen.

Screens, Stories und Beispiele zeigen immer Familie Sonntag. Echte Familiendaten gehören nie ins Repository. Der Seed ist zugleich der Zugang für Apples App-Review.


---

# Tokens

> Alle Werte der Marke als benannte Rollen, hell und dunkel. Wie sie heißen, wie ihr sie einbindet — im Web, in Swift, in Token-Werkzeugen — und die vollständige Tabelle.

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

Ein Token ist ein Name für eine Entscheidung. `--flaeche-karte` sagt, wofür eine Farbe da ist. Der Wert dahinter darf sich ändern, der Name bleibt. Bauteile kennen nur Namen, nie Werte.

## Namen

Tokens heißen deutsch, mit Absicht. Jeder Name beschreibt eine Rolle, nie eine Stufe auf einer Leiter. „Karte“, nicht „Beige 200“.

| Ebene | Beispiele | Wer sie benutzt |
|---|---|---|
| Grundfarben | `--grund`, `--karte`, `--tinte`, `--rosa`, `--gelb`, `--blau` | nur die semantischen Rollen |
| Semantische Rollen | `--flaeche-seite`, `--text-koerper`, `--linie-haar`, `--rand-offen`, `--akzent` | Bauteile und Seiten |
| Bauteil-Rollen | `--knopf-primaer-flaeche`, `--knopf-inaktiv-text`, `--leiste-ort-zeiger` | ein Bauteil und seine Zustände |
| Personen | `--person-1` bis `--person-8`, `--person-linie-1` bis `--person-linie-8`, `--person-text` | Klebezettel, Avatare, Spuren |
| Maße | `--raum-2`, `--karte-innen`, `--ziel-finger`, `--radius-karte`, `--strich-haar` | Abstand, Zielfläche, Form |
| Schrift | `--schrift-titel`, `--grad-karten-titel`, `--gewicht-text-fest`, `--laufweite-titel` | Typografie |
| Bewegung | `--dauer-kurz`, `--verlauf-ruhig` | Übergänge |

Ein Bauteil greift zu einer semantischen Rolle, wenn es eine gibt. `--grund` direkt zu benutzen ist erlaubt, aber `--flaeche-seite` sagt mehr.

> **So**
>
> `background: var(--flaeche-karte-fahrt); color: var(--text-auf-blau);`

> **Nicht so**
>
> `background: var(--blau); color: var(--tinte);` — im dunklen Modus wird die Tinte creme, das Blau bleibt hell. Dann steht helle Schrift auf hellem Grund.

## Hell und dunkel

Der dunkle Modus ist eine Neudefinition der Rollen, keine zweite Gestaltung. Er hängt an einem Attribut auf dem Wurzelelement:

```html
<html data-modus="dunkel">
```

Die Rollen bekommen dann andere Werte. Kein Bauteil fragt nach dem Modus. Personen-Zettel, Rosa, Gelb und Blau bleiben auch nachts helle Flächen. Text darauf nimmt `--person-text`, `--text-auf-gelb`, `--text-auf-blau` oder `--text-auf-rosa`, die dunkel bleiben.

Bei reduzierter Bewegung stehen alle Dauern auf 0 ms. Das erzeugt `tokens/motion.css` als eigenen Block für `prefers-reduced-motion`.

## Die Dateien

| Datei | Inhalt | Für |
|---|---|---|
| [`/tokens/tokens.json`](/tokens/tokens.json) | jeder Token aufgelöst: Name, CSS-Variable, hell, dunkel, Alias, Bedeutung | Agenten, Skripte, Prüfungen |
| [`/tokens/tokens.dtcg.json`](/tokens/tokens.dtcg.json) | die Quelle im W3C-Format, alle Sätze in einer Datei | Token-Werkzeuge, Style Dictionary |
| [`/tokens/tokens.css`](/tokens/tokens.css) | CSS-Variablen hell und dunkel, Schrift, Raum, Form, Bewegung | jede Web-Oberfläche |
| [`/tokens/fonts.css`](/tokens/fonts.css) | `@font-face` für die vier Schriften, lokal | Web, zusammen mit den Schriftdateien |
| [`/tokens/tailwind.css`](/tokens/tailwind.css) | Tailwind-v4-Theme: dieselben Rollen als Utilities | Next.js mit Tailwind |
| [`/tokens/Tokens.swift`](/tokens/Tokens.swift) | `AlbertFarbe`, `AlbertRaum`, `AlbertSchrift`, `AlbertForm`, `AlbertBewegung` | SwiftUI |
| [`/regeln.json`](/regeln.json) | Regeln, die keine Werte sind: Wörter, Register, Grenzen | Texte und Prüfungen |

## Einbinden im Web

Im Monorepo kommt alles aus dem Workspace-Paket. Die Reihenfolge zählt: Tokens zuerst, dann Bauteil-Zustände.

```tsx
// app/layout.tsx
import "@hey-albert/design-system/styles.css";
```

Wer Tailwind benutzt, bindet das Theme nach Tailwind ein. Es schaltet Tailwinds eigene Farben, Schatten und Radien ab.

```css
@import "tailwindcss";
@import "@hey-albert/design-system/tailwind/theme.css";
@import "@hey-albert/design-system/tailwind/shadcn.css";
```

Danach gibt es `bg-grund`, `text-tinte`, `rounded-karte`, `p-raum-2`, `h-ziel-finger` und `font-schrift-titel`. Den dunklen Modus erkennt die Variante `dark:` über `data-modus`.

Außerhalb des Monorepos: `tokens.css` und `fonts.css` herunterladen, die Schriften aus dem Paket daneben legen, beide Dateien einbinden.

## Einbinden in Swift

`Tokens.swift` in das Ziel kopieren oder als Datei eines Swift-Pakets einbinden. Farben sind dynamisch und folgen dem Erscheinungsbild des Systems.

```swift
Text("Felix · Handball")
  .foregroundStyle(AlbertFarbe.textKoerper)
  .padding(AlbertRaum.karteInnen)
  .background(AlbertFarbe.flaecheKarte, in: RoundedRectangle(cornerRadius: AlbertForm.radiusKarte))
```

## In Token-Werkzeugen

`tokens.dtcg.json` folgt dem Format der W3C Design Tokens Community Group. Werkzeuge wie Tokens Studio lesen es direkt. Die Themen stehen in `$themes`: **Hell** nimmt `farben-hell`, **Dunkel** legt `farben-dunkel` darüber. `$metadata` legt die Reihenfolge der Sätze fest.

> **Hinweis**
>
> Ein Wert, der in einem Werkzeug geändert wird, gilt erst, wenn er in `packages/design-system/tokens/quelle` steht und `pnpm tokens` gelaufen ist. Die Quelle ist das Repository, nie das Werkzeug.

## Alle Tokens

Ein Klick auf einen Namen kopiert `var(--name)`.

#### Farbe · Grundfarben (Notizbuch: warmes Papier, Tinte)

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

#### Farbe · Semantische Rollen: 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 |

#### Farbe · Semantische Rollen: 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 |

#### Farbe · Semantische Rollen: 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 |

#### Farbe · Semantische Rollen: Akzent und Bedeutung

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

#### Farbe · Personenfarben (Klebezettel). Text darauf ist immer Tinte. Acht Plätze; Familie Sonntag belegt fünf.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| person-1 | var(--person-1) | #D5F5C2 | #D5F5C2 | Anna - Mint |
| person-2 | var(--person-2) | #A8E5E5 | #A8E5E5 | Tobias - Türkis |
| person-3 | var(--person-3) | #F6D0FF | #F6D0FF | Felix - Flieder |
| person-4 | var(--person-4) | #FFD6A5 | #FFD6A5 | Lena - Pfirsich |
| person-5 | var(--person-5) | #AEBAFF | #AEBAFF | Sofia - Himmel |
| person-6 | var(--person-6) | #C7EFD0 | #C7EFD0 | frei |
| person-7 | var(--person-7) | #FFC9C9 | #FFC9C9 | frei |
| person-8 | var(--person-8) | #E3DCA8 | #E3DCA8 | frei |
| person-text | var(--person-text) | #1A1A1A (→ tinte) | #1A1A1A |  |
| person-linie-1 | var(--person-linie-1) | #8FCF6E | #A6DE87 |  |
| person-linie-2 | var(--person-linie-2) | #62BFBF | #7FD6D6 |  |
| person-linie-3 | var(--person-linie-3) | #D28FE8 | #E4A8F5 |  |
| person-linie-4 | var(--person-linie-4) | #E0A55F | #F0BE7C |  |
| person-linie-5 | var(--person-linie-5) | #7B8BE0 | #9AA8F0 |  |
| person-linie-6 | var(--person-linie-6) | #7FC993 | #98DBAA |  |
| person-linie-7 | var(--person-linie-7) | #E08F8F | #F0A8A8 |  |
| person-linie-8 | var(--person-linie-8) | #B7AE6A | #CFC57F |  |

#### Schrift · Schriften

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| schrift-titel | var(--schrift-titel) | "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif |  |  |
| schrift-text | var(--schrift-text) | Inter, system-ui, -apple-system, sans-serif |  |  |
| schrift-mono | var(--schrift-mono) | "Roboto Mono", ui-monospace, "SF Mono", monospace |  |  |
| schrift-hand | var(--schrift-hand) | "Reenie Beanie", "Bradley Hand", cursive |  |  |

#### Schrift · Gewichte

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| gewicht-titel | var(--gewicht-titel) | 800 |  |  |
| gewicht-text | var(--gewicht-text) | 400 |  |  |
| gewicht-text-halb | var(--gewicht-text-halb) | 500 |  |  |
| gewicht-text-fest | var(--gewicht-text-fest) | 600 |  |  |

#### Schrift · Grade

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| grad-anrede-mac | var(--grad-anrede-mac) | 40px |  | „Guten Morgen, Anna.“ auf dem Mac |
| grad-anrede-phone | var(--grad-anrede-phone) | 30px |  | dieselbe Zeile auf dem iPhone |
| grad-zahl-gross | var(--grad-zahl-gross) | 34px |  | Zahl-Kachel: 8,7 h |
| grad-block-titel | var(--grad-block-titel) | 22px |  | Logo in der Leiste |
| grad-abschnitt | var(--grad-abschnitt) | 17px |  |  |
| grad-karten-titel | var(--grad-karten-titel) | 14.5px |  | Kartentitel |
| grad-text | var(--grad-text) | 14px |  |  |
| grad-zweit | var(--grad-zweit) | 12px |  | Zweitzeile, Zeiten |
| grad-klein | var(--grad-klein) | 11px |  |  |
| grad-kapitaelchen | var(--grad-kapitaelchen) | 10px |  | Wochentag im Tagesreiter |

#### Schrift · Laufweite

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| laufweite-titel | var(--laufweite-titel) | -0.03em |  | eng, wie in den Screensets |
| laufweite-text | var(--laufweite-text) | 0em |  |  |
| laufweite-kapitaelchen | var(--laufweite-kapitaelchen) | 0.08em |  |  |

#### Schrift · Zeilen

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| zeile-titel | var(--zeile-titel) | 1.02 |  |  |
| zeile-karten-titel | var(--zeile-karten-titel) | 1.2 |  |  |
| zeile-text | var(--zeile-text) | 1.45 |  |  |

#### Schrift · Ziffern

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| ziffern-tabellarisch | var(--ziffern-tabellarisch) | "tnum" 1, "lnum" 1 |  | Zahlen und Zeiten: tabellarische Ziffern |

#### Raum · 8-px-Raster

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| raum-halb | var(--raum-halb) | 4px |  |  |
| raum-1 | var(--raum-1) | 8px |  |  |
| raum-2 | var(--raum-2) | 16px |  |  |
| raum-3 | var(--raum-3) | 24px |  |  |
| raum-4 | var(--raum-4) | 32px |  |  |
| raum-5 | var(--raum-5) | 40px |  |  |
| raum-6 | var(--raum-6) | 48px |  |  |
| raum-8 | var(--raum-8) | 64px |  |  |

#### Raum · Abstände, wie in den Screensets gemessen

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| karte-innen | var(--karte-innen) | 12px |  |  |
| karte-abstand | var(--karte-abstand) | 8px |  |  |
| flaeche-rand-mac | var(--flaeche-rand-mac) | 32px |  |  |
| flaeche-rand-phone | var(--flaeche-rand-phone) | 20px |  |  |

#### Raum · Zielflächen

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| ziel-zeiger | var(--ziel-zeiger) | 28px |  |  |
| ziel-finger | var(--ziel-finger) | 44px |  |  |
| ziel-kind | var(--ziel-kind) | 56px |  |  |

#### Raum · Leisten

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| leiste-mac | var(--leiste-mac) | 220px |  |  |
| leiste-mac-eng | var(--leiste-mac-eng) | 72px |  |  |
| leiste-phone-hoehe | var(--leiste-phone-hoehe) | 64px |  |  |
| umbruch-tisch | var(--umbruch-tisch) | 768px |  | ab hier ist es ein Tisch, kein Handy (nur Tailwind-Breakpoint, nicht in spacing.css) |

#### Form · Radien

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| radius-karte | var(--radius-karte) | 16px |  | Karten und Menüs |
| radius-klein | var(--radius-klein) | 12px |  | Tagesreiter, kleine Karten |
| radius-leiste | var(--radius-leiste) | 24px |  | iPhone-Leiste |
| radius-block | var(--radius-block) | 22px |  | Mac-Block |
| radius-pille | var(--radius-pille) | 999px |  | Pillen, Kreise, Knöpfe |

#### Form · Striche

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| strich-haar | var(--strich-haar) | 1px |  |  |
| strich-stark | var(--strich-stark) | 1.5px |  | Kontur wird stark, statt Schatten |
| strich-gestrichelt | var(--strich-gestrichelt) | 1.5px |  |  |
| muster-gestrichelt | var(--muster-gestrichelt) | 5px 4px |  |  |

#### Form · Kippung

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| kippung-zettel | var(--kippung-zettel) | 0.3deg |  | was liegt, ist leicht gekippt |
| kippung-null | var(--kippung-null) | 0deg |  | was schwebt, steht gerade |

#### Form · Schatten und Fokus

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| schatten | var(--schatten) | none |  | nicht verhandelbar |
| fokus-ring | var(--fokus-ring) | 2px |  |  |
| fokus-abstand | var(--fokus-abstand) | 2px |  |  |

#### Bewegung · Dauern

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| dauer-kurz | var(--dauer-kurz) | 120ms |  |  |
| dauer-mittel | var(--dauer-mittel) | 200ms |  |  |
| dauer-atem | var(--dauer-atem) | 300ms |  |  |

#### Bewegung · Verläufe

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| verlauf-ruhig | var(--verlauf-ruhig) | cubic-bezier(0.2, 0, 0.2, 1) |  |  |
| verlauf-atem | var(--verlauf-atem) | cubic-bezier(0.4, 0, 0.6, 1) |  |  |

#### Bewegung · Reduzierte Bewegung

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| dauer-kurz | var(--dauer-kurz) | 0ms |  |  |
| dauer-mittel | var(--dauer-mittel) | 0ms |  |  |
| dauer-atem | var(--dauer-atem) | 0ms |  |  |

## Herunterladen

- [Tokens: JSON, CSS, Tailwind, Swift](https://brand.heyalbert.family/downloads/hey-albert-tokens.zip)


---

# Für Agenten und Sprachmodelle

> Wie Maschinen diese Seite lesen. Adressen, Dateien, ein Skill zum Einbinden, Vorlagen für typische Aufträge und die Grenzen, die für jeden Agenten gelten.

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

Diese Seite hat zwei Leserschaften. Menschen sehen Farbfelder, Zeichnungen und Beispiele. Agenten bekommen dieselben Inhalte als Markdown und JSON, mit denselben Werten. Beides entsteht aus derselben Quelle, beim selben Bau.

## Adressen

| Adresse | Inhalt |
| --- | --- |
| https://brand.heyalbert.family/llms.txt | Verzeichnis aller Kapitel und Dateien für Sprachmodelle |
| https://brand.heyalbert.family/llms-full.txt | Alle Kapitel auf Deutsch in einer Datei |
| https://brand.heyalbert.family/en/llms-full.txt | Alle Kapitel auf Englisch in einer Datei |
| https://brand.heyalbert.family/<kapitel>.md | Jedes Kapitel als Markdown, z. B. /farbe.md |
| https://brand.heyalbert.family/tokens/tokens.json | Alle Tokens, aufgelöst, hell und dunkel, mit Bedeutung |
| https://brand.heyalbert.family/tokens/tokens.dtcg.json | Tokens im Format der W3C Design Tokens Community Group |
| https://brand.heyalbert.family/tokens/tokens.css | CSS-Variablen, hell und dunkel |
| https://brand.heyalbert.family/tokens/tailwind.css | Tailwind-v4-Theme |
| https://brand.heyalbert.family/tokens/Tokens.swift | SwiftUI-Tokens |
| https://brand.heyalbert.family/regeln.json | Wortlisten, Register, Grenzen, Gestaltungsregeln |
| https://brand.heyalbert.family/bauteile.json | Alle Bauteile mit Typen und Prompt |
| https://brand.heyalbert.family/skill/SKILL.md | Agent-Skill zum Einbinden in Claude Code und andere Werkzeuge |

Jede Seite gibt es auch als Markdown unter ihrer Adresse mit `.md`: `/farbe.md`, `/iphone.md`, `/en/stimme.md`. Die Startseite heißt `/index.md`. Wo ein Mensch ein Farbfeld sieht, steht im Markdown eine Tabelle mit Token, Wert hell, Wert dunkel und Bedeutung.

## llms.txt

`/llms.txt` folgt dem Vorschlag von llmstxt.org: ein kurzes Verzeichnis in Markdown, mit einem Satz je Kapitel und den Adressen der Daten. Ein Agent liest es zuerst und lädt dann nur, was er braucht. `/llms-full.txt` und `/en/llms-full.txt` enthalten alle Kapitel einer Sprache in einer Datei.

## Die Daten

| Datei | Wann laden |
|---|---|
| `regeln.json` | vor jedem Text und jeder Oberfläche: verbotene Wörter, Register mit Satzlängen, Format von Zeit und Datum, Gestaltungsregeln, Definition of Done |
| `tokens/tokens.json` | vor jedem Code mit Farbe, Maß oder Schrift: jeder Token mit CSS-Variable, hell, dunkel und Bedeutung |
| `bauteile.json` | vor jeder Oberfläche: alle Bauteile mit Quelle, Typen und Prompt |
| Kapitel als `.md` | für die Aufgabe selbst, etwa `iphone.md` für einen Screen oder `social-media.md` für ein Motiv |

Die Namen von Tokens, Bauteilen und Props sind deutsch, mit Absicht. Ein Agent übersetzt sie nicht.

## Der Skill

`/skill/SKILL.md` ist ein Agent-Skill. Er sagt einem Agenten, welche Dateien er zuerst lädt und welche Regeln nie gebrochen werden. Er entsteht beim Bau aus `regeln.json`.

So bindest du ihn in Claude Code ein:

```bash
# für dieses Repository
mkdir -p .claude/skills/hey-albert-brand
curl -s https://brand.heyalbert.family/skill/SKILL.md -o .claude/skills/hey-albert-brand/SKILL.md

# für alle eigenen Projekte
mkdir -p ~/.claude/skills/hey-albert-brand
curl -s https://brand.heyalbert.family/skill/SKILL.md -o ~/.claude/skills/hey-albert-brand/SKILL.md
```

Im Monorepo selbst gibt es dazu den Skill `hey-albert-design`. Er zeigt direkt auf `packages/design-system` und braucht keinen Download. Für Texte gibt es den Skill `texten`.

## Vorlagen für Aufträge

Gute Aufträge nennen die Quelle, die Familie, die Grenze und die Prüfung. Die folgenden Vorlagen lassen sich kopieren und anpassen.

### Einen Screen bauen

```text
Bau die Fläche „Heute“ für das iPhone in apps/web.
Lies zuerst https://brand.heyalbert.family/iphone.md, /bauteile.json und /tokens/tokens.json.
Nimm nur Bauteile aus packages/design-system; fehlt eines, leg es dort zuerst an.
Daten: Seed Familie Sonntag, Mittwoch 3. September. Lena (9) hat 15:30 Schwimmen, Tobias fährt.
Fertig heißt: leerer Zustand, Skelett, :focus-visible, hell und dunkel, Rückgängig, Zielflächen 44/56.
Prüfe am Ende mit dem Agenten design-pruefer und pnpm qa.
```

### Einen Text schreiben

```text
Schreib den leeren Zustand für die Einkaufsliste.
Register: Family Manager (R2), höchstens 12 Wörter je Satz. Regeln: /regeln.json.
Drei Teile: was hierher gehört, warum es leer ist, ein Knopf mit einem Verb.
Kein Ausrufezeichen, kein Emoji, „ihr“ zur Familie. Beispiel mit Familie Sonntag.
Gib zwei Fassungen und sag, welches Register du gewählt hast.
```

### Ein Social-Motiv entwerfen

```text
Entwirf einen Instagram-Beitrag 4:5 zum Thema Fahrten.
Lies /social-media.md und /bildsprache.md. Fläche Blau, weil es um eine Fahrt geht.
Titel als Szene mit Uhrzeit und Name: „Freitag, 18:40. Oma Grete fährt.“
Screen: Main (iPhone). Keine Kindergesichter, kein Stockfoto, kein erzeugtes Bild.
Wörter aus nie_in_der_vermarktung in /regeln.json sind tabu.
```

### Prüfen

```text
Prüfe apps/web/src/app/(albert)/(app)/heute gegen das Designsystem.
Grundlage: /regeln.json (gestaltung, fertig) und /tokens/tokens.json.
Finde Hex-Werte, Schatten, freie Radien, Deckkraft für inaktiv, :focus statt :focus-visible,
Zielflächen unter 44, verbotene Wörter, fehlende leere Zustände.
Ändere nichts. Gib je Fund Datei, Zeile, Regel und Vorschlag.
```

## Was Agenten nie tun

> **Nicht so**
>
> - echte Familiendaten in Code, Seeds, Screens, Prompts oder Beispiele schreiben
> - einen Wert erfinden, der kein Token ist — fehlt eine Rolle, wird sie in der Quelle angelegt und begründet
> - ein Bauteil nur in einer App bauen
> - verbotene Wörter in Oberfläche oder Vermarktung schreiben, auch nicht „nur als Entwurf“
> - Bilder von Menschen oder Kindern erzeugen oder Stockfotos einsetzen
> - ohne Freigabe veröffentlichen: kein `git push`, kein Deploy, kein Beitrag in einem Kanal

> **So**
>
> - Quelle lesen, bevor gebaut wird
> - Familie Sonntag und ihre Woche benutzen
> - Unklares als offen benennen, statt es still zu entscheiden
> - am Ende prüfen lassen: `design-pruefer`, `pnpm qa`, Bildvergleich

## Arbeiten mit Agenten und Albert im Produkt

Zwei Dinge heißen ähnlich und sind getrennt.

**Agenten beim Arbeiten** schreiben Code, Texte und Entwürfe für das Team. Für sie gilt diese Seite.

**Albert im Produkt** liest nur Post, für die eine Regel der Familie greift. Jede Ableitung ist ein Vorschlag mit Vorschau, „Übernehmen“ und „Rückgängig“. Nichts wird still geändert oder versendet. An ein Modell geht erkannter Text, nie ein Bild, und kein Anbieter aus den USA liegt im Datenpfad. Gesundheits- und Kinderdaten bleiben auf dem Gerät. Die vollständigen Regeln stehen in `docs/34-ki-und-daten.md`.

In der Gestaltung zeigt sich das so: Jeder Vorschlag von Albert hat einen gestrichelten grauen Rand. Ein Mensch sieht damit ohne Nachdenken, dass der Vorschlag nicht von einem Menschen kam.

### VorschlagKarte

Quelle: `packages/design-system/components/karten/VorschlagKarte.jsx`

Alberts Vorschlag auf dem iPhone – gelb, mit Formen, immer mit zwei Knöpfen.

```jsx
<VorschlagKarte titel="Samstag fehlt ein Fahrer."
  text="Rückfahrt vom Auswärtsspiel, 14:00. Bei Tobias steht ab 13:00 nichts."
  schritt="Tobias fragen" zweitSchritt="Später" />
```

So klingt Albert: eine Beobachtung, eine Frage, zwei Knöpfe. Nie "Ich habe für dich…". Auf dem Mac nimmst du stattdessen `<Karte art="vorschlag">` - dort ist der Vorschlag gestrichelt und ohne Füllung.

```ts
/**
 * Alberts Vorschlag am iPhone: gelbe Karte mit Formen, zwei Knoepfe, Unterzeile.
 */
export interface VorschlagKarteProps {
  /** Eine Beobachtung: "Samstag fehlt ein Fahrer." */
  titel: string;
  /** Zwei kurze Saetze: was er sieht, was daraus folgt. */
  text?: React.ReactNode;
  /** Erster Knopf, ein Verb: "Tobias fragen", "Übernehmen". */
  schritt?: string;
  onSchritt?: () => void;
  /** Zweiter Knopf. Es gibt immer zwei - Albert erledigt nie still. */
  zweitSchritt?: string;
  onZweitSchritt?: () => void;
  unterzeile?: string;
  style?: React.CSSProperties;
}
export function VorschlagKarte(props: VorschlagKarteProps): JSX.Element;
```


---

# Downloads

> Logos, Schriften, Zeichen, Tokens und Screens von Familie Sonntag zum Herunterladen, einzeln oder als Paket. Dazu, wer was wofür benutzen darf.

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

Alles hier entsteht beim Bau aus `packages/design-system` und den Screens der Website. Was ihr herunterladet, ist also derselbe Stand, den App und Website gerade benutzen.

## Pakete

- [Logos](https://brand.heyalbert.family/downloads/hey-albert-logos.zip)
- [Zeichen (SVG)](https://brand.heyalbert.family/downloads/hey-albert-zeichen.zip)
- [Schriften mit Lizenzen](https://brand.heyalbert.family/downloads/hey-albert-schriften.zip)
- [Tokens: JSON, CSS, Tailwind, Swift](https://brand.heyalbert.family/downloads/hey-albert-tokens.zip)
- [Screens von Familie Sonntag (PNG)](https://brand.heyalbert.family/downloads/hey-albert-screens.zip)
- [Alles in einem Paket](https://brand.heyalbert.family/downloads/hey-albert-markenpaket.zip)

Das große Markenpaket enthält alle Logos, Zeichen, Schriften, Token-Dateien, Screens und den Skill für Agenten, dazu eine kurze Liesmich-Datei.

## Logos

| Fassung | Maße | Größe | Datei |
| --- | --- | --- | --- |
| logo-albert-256 | 256 × 256 px | 32 KB | https://brand.heyalbert.family/marke/logos/logo-albert-256.png |
| logo-albert-auf-schwarz | 912 × 912 px | 76 KB | https://brand.heyalbert.family/marke/logos/logo-albert-auf-schwarz.png |
| logo-albert-hell | 1024 × 1024 px | 23 KB | https://brand.heyalbert.family/marke/logos/logo-albert-hell.png |
| logo-albert-mono | 912 × 912 px | 66 KB | https://brand.heyalbert.family/marke/logos/logo-albert-mono.png |
| logo-albert | 912 × 912 px | 77 KB | https://brand.heyalbert.family/marke/logos/logo-albert.png |

Die Regeln zum Logo stehen im Kapitel [Logo](/logo/). Es gibt das Logo zurzeit nur als PNG.

## Schriften

| Rolle | Familie | Einsatz |
| --- | --- | --- |
| schrift-titel | "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif |  |
| schrift-text | Inter, system-ui, -apple-system, sans-serif |  |
| schrift-mono | "Roboto Mono", ui-monospace, "SF Mono", monospace |  |
| schrift-hand | "Reenie Beanie", "Bradley Hand", cursive |  |

Dateien: [bricolage-grotesque-latin-ext.woff2](https://brand.heyalbert.family/schriften/web/bricolage-grotesque-latin-ext.woff2), [bricolage-grotesque-latin.woff2](https://brand.heyalbert.family/schriften/web/bricolage-grotesque-latin.woff2), [inter-latin-ext.woff2](https://brand.heyalbert.family/schriften/web/inter-latin-ext.woff2), [inter-latin.woff2](https://brand.heyalbert.family/schriften/web/inter-latin.woff2), [reenie-beanie-latin.woff2](https://brand.heyalbert.family/schriften/web/reenie-beanie-latin.woff2), [roboto-mono-latin-ext.woff2](https://brand.heyalbert.family/schriften/web/roboto-mono-latin-ext.woff2), [roboto-mono-latin.woff2](https://brand.heyalbert.family/schriften/web/roboto-mono-latin.woff2), [BricolageGrotesque[opsz,wdth,wght].ttf](https://brand.heyalbert.family/schriften/app/BricolageGrotesque[opsz,wdth,wght].ttf), [Inter[opsz,wght].ttf](https://brand.heyalbert.family/schriften/app/Inter[opsz,wght].ttf), [OFL-BricolageGrotesque.txt](https://brand.heyalbert.family/schriften/app/OFL-BricolageGrotesque.txt), [OFL-Inter.txt](https://brand.heyalbert.family/schriften/app/OFL-Inter.txt), [OFL-ReenieBeanie.txt](https://brand.heyalbert.family/schriften/app/OFL-ReenieBeanie.txt), [OFL-RobotoMono.txt](https://brand.heyalbert.family/schriften/app/OFL-RobotoMono.txt), [ReenieBeanie.ttf](https://brand.heyalbert.family/schriften/app/ReenieBeanie.ttf), [RobotoMono[wght].ttf](https://brand.heyalbert.family/schriften/app/RobotoMono[wght].ttf), [LIZENZEN.md](https://brand.heyalbert.family/schriften/LIZENZEN.md)

Bricolage Grotesque, Inter und Reenie Beanie stehen unter der SIL Open Font License 1.1, Roboto Mono unter der Apache License 2.0. Die Lizenztexte liegen im Schriftenpaket. Für das Web gibt es woff2, für Apps TTF als variable Schriften.

## Tokens

| Datei | Für |
|---|---|
| [`tokens.json`](/tokens/tokens.json) | alle Tokens aufgelöst, hell und dunkel |
| [`tokens.dtcg.json`](/tokens/tokens.dtcg.json) | W3C-Format für Token-Werkzeuge |
| [`tokens.css`](/tokens/tokens.css) | CSS-Variablen |
| [`fonts.css`](/tokens/fonts.css) | `@font-face`, lokal |
| [`tailwind.css`](/tokens/tailwind.css) | Tailwind-v4-Theme |
| [`Tokens.swift`](/tokens/Tokens.swift) | SwiftUI |
| [`regeln.json`](/regeln.json) | Wörter, Register, Grenzen, Gestaltungsregeln |

Wie man sie einbindet, steht im Kapitel [Tokens](/tokens/).

## Zeichen

| Zeichen | Sach-Rolle | Datei |
| --- | --- | --- |
| bell |  | https://brand.heyalbert.family/marke/zeichen/bell.svg |
| calendar |  | https://brand.heyalbert.family/marke/zeichen/calendar.svg |
| camera |  | https://brand.heyalbert.family/marke/zeichen/camera.svg |
| car-front | fahrt | https://brand.heyalbert.family/marke/zeichen/car-front.svg |
| chart-column |  | https://brand.heyalbert.family/marke/zeichen/chart-column.svg |
| check |  | https://brand.heyalbert.family/marke/zeichen/check.svg |
| chevron-down |  | https://brand.heyalbert.family/marke/zeichen/chevron-down.svg |
| chevron-left |  | https://brand.heyalbert.family/marke/zeichen/chevron-left.svg |
| chevron-right |  | https://brand.heyalbert.family/marke/zeichen/chevron-right.svg |
| circle-alert | konflikt | https://brand.heyalbert.family/marke/zeichen/circle-alert.svg |
| circle-check | ritual | https://brand.heyalbert.family/marke/zeichen/circle-check.svg |
| circle-plus |  | https://brand.heyalbert.family/marke/zeichen/circle-plus.svg |
| circle-question-mark | vorschlag | https://brand.heyalbert.family/marke/zeichen/circle-question-mark.svg |
| clock |  | https://brand.heyalbert.family/marke/zeichen/clock.svg |
| coins | taler | https://brand.heyalbert.family/marke/zeichen/coins.svg |
| cross | arzt | https://brand.heyalbert.family/marke/zeichen/cross.svg |
| file-text | dokument | https://brand.heyalbert.family/marke/zeichen/file-text.svg |
| gauge |  | https://brand.heyalbert.family/marke/zeichen/gauge.svg |
| globe |  | https://brand.heyalbert.family/marke/zeichen/globe.svg |
| graduation-cap | schule | https://brand.heyalbert.family/marke/zeichen/graduation-cap.svg |
| heart | freude | https://brand.heyalbert.family/marke/zeichen/heart.svg |
| house |  | https://brand.heyalbert.family/marke/zeichen/house.svg |
| inbox |  | https://brand.heyalbert.family/marke/zeichen/inbox.svg |
| link |  | https://brand.heyalbert.family/marke/zeichen/link.svg |
| lock |  | https://brand.heyalbert.family/marke/zeichen/lock.svg |
| mail |  | https://brand.heyalbert.family/marke/zeichen/mail.svg |
| message-circle |  | https://brand.heyalbert.family/marke/zeichen/message-circle.svg |
| message-square |  | https://brand.heyalbert.family/marke/zeichen/message-square.svg |
| moon |  | https://brand.heyalbert.family/marke/zeichen/moon.svg |
| music | musik | https://brand.heyalbert.family/marke/zeichen/music.svg |
| pencil |  | https://brand.heyalbert.family/marke/zeichen/pencil.svg |
| plus |  | https://brand.heyalbert.family/marke/zeichen/plus.svg |
| scan-line |  | https://brand.heyalbert.family/marke/zeichen/scan-line.svg |
| search |  | https://brand.heyalbert.family/marke/zeichen/search.svg |
| shopping-basket | einkauf | https://brand.heyalbert.family/marke/zeichen/shopping-basket.svg |
| sliders-horizontal |  | https://brand.heyalbert.family/marke/zeichen/sliders-horizontal.svg |
| star |  | https://brand.heyalbert.family/marke/zeichen/star.svg |
| sticky-note | notiz | https://brand.heyalbert.family/marke/zeichen/sticky-note.svg |
| sun |  | https://brand.heyalbert.family/marke/zeichen/sun.svg |
| table |  | https://brand.heyalbert.family/marke/zeichen/table.svg |
| undo-2 |  | https://brand.heyalbert.family/marke/zeichen/undo-2.svg |
| user-plus |  | https://brand.heyalbert.family/marke/zeichen/user-plus.svg |
| user |  | https://brand.heyalbert.family/marke/zeichen/user.svg |
| users | familie | https://brand.heyalbert.family/marke/zeichen/users.svg |
| utensils | essen | https://brand.heyalbert.family/marke/zeichen/utensils.svg |
| volleyball | sport | https://brand.heyalbert.family/marke/zeichen/volleyball.svg |
| waves-ladder | schwimmen | https://brand.heyalbert.family/marke/zeichen/waves-ladder.svg |

Jedes Zeichen ist ein SVG mit 2 px Strich und `stroke: currentColor`. Es nimmt die Textfarbe seiner Umgebung an.

## Screens

![Anlass](https://brand.heyalbert.family/bilder/screens/Anlass.png)

*Anlass · mac · 2880 × 1800 px*

![Aufgaben](https://brand.heyalbert.family/bilder/screens/Aufgaben.png)

*Aufgaben · mac · 2880 × 1800 px*

![Eingang](https://brand.heyalbert.family/bilder/screens/Eingang.png)

*Eingang · iphone · 780 × 1688 px*

![Einkauf](https://brand.heyalbert.family/bilder/screens/Einkauf.png)

*Einkauf · iphone · 780 × 1688 px*

![Essensplan](https://brand.heyalbert.family/bilder/screens/Essensplan.png)

*Essensplan · iphone · 780 × 1688 px*

![FamilyFeed](https://brand.heyalbert.family/bilder/screens/FamilyFeed.png)

*FamilyFeed · iphone · 780 × 1688 px*

![FamilyFeedMac](https://brand.heyalbert.family/bilder/screens/FamilyFeedMac.png)

*FamilyFeedMac · mac · 2880 × 1800 px*

![Gewohnheiten](https://brand.heyalbert.family/bilder/screens/Gewohnheiten.png)

*Gewohnheiten · iphone · 780 × 1688 px*

![Haushalt](https://brand.heyalbert.family/bilder/screens/Haushalt.png)

*Haushalt · mac · 2880 × 1800 px*

![Jahresbuch](https://brand.heyalbert.family/bilder/screens/Jahresbuch.png)

*Jahresbuch · objekt · 2246 × 1588 px*

![LenaBereich](https://brand.heyalbert.family/bilder/screens/LenaBereich.png)

*LenaBereich · ipad · 1668 × 2388 px*

![Main](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![MomentTurnbeutel](https://brand.heyalbert.family/bilder/screens/MomentTurnbeutel.png)

*MomentTurnbeutel · iphone · 780 × 1688 px*

![MomentVersicherung](https://brand.heyalbert.family/bilder/screens/MomentVersicherung.png)

*MomentVersicherung · iphone · 780 × 1688 px*

![Rueckblick](https://brand.heyalbert.family/bilder/screens/Rueckblick.png)

*Rueckblick · ipad · 1668 × 2388 px*

![Safe](https://brand.heyalbert.family/bilder/screens/Safe.png)

*Safe · mac · 2880 × 1800 px*

![Schule](https://brand.heyalbert.family/bilder/screens/Schule.png)

*Schule · iphone · 780 × 1688 px*

![Sonntagsrunde](https://brand.heyalbert.family/bilder/screens/Sonntagsrunde.png)

*Sonntagsrunde · breitbild · 3840 × 2160 px*

![Taler](https://brand.heyalbert.family/bilder/screens/Taler.png)

*Taler · iphone · 780 × 1688 px*

![Ueberall](https://brand.heyalbert.family/bilder/screens/Ueberall.png)

*Ueberall · iphone · 780 × 1688 px*

![Watch](https://brand.heyalbert.family/bilder/screens/Watch.png)

*Watch · watch · 792 × 968 px*

![Wochenboard](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

Alle Screens zeigen Familie Sonntag, nie eine echte Familie. Jeder Screen lässt sich als PNG in voller Auflösung laden.

## Vorschaubilder für Links

| Sprache | Datei |
| --- | --- |
| bg | https://brand.heyalbert.family/bilder/og/og-bg.png |
| da | https://brand.heyalbert.family/bilder/og/og-da.png |
| de | https://brand.heyalbert.family/bilder/og/og-de.png |
| en | https://brand.heyalbert.family/bilder/og/og-en.png |
| es | https://brand.heyalbert.family/bilder/og/og-es.png |
| fr | https://brand.heyalbert.family/bilder/og/og-fr.png |
| it | https://brand.heyalbert.family/bilder/og/og-it.png |
| no | https://brand.heyalbert.family/bilder/og/og-no.png |
| pl | https://brand.heyalbert.family/bilder/og/og-pl.png |
| sv | https://brand.heyalbert.family/bilder/og/og-sv.png |
| tr | https://brand.heyalbert.family/bilder/og/og-tr.png |

## Wer was benutzen darf

> **Vorschlag, noch nicht festgelegt**
>
> Nutzungsbedingungen für Logos und Screens sind bisher nicht schriftlich geregelt. Bis dahin gilt dieser Vorschlag:
> 
> - Logos und Screens gehören Emma Rocket Ltd OOD, Sofia.
> - Presse, Partner und alle, die über Hey Albert berichten, dürfen sie für diesen Zweck benutzen.
> - Logos und Screens dürfen nicht verändert, umgefärbt, beschnitten oder mit anderen Marken kombiniert werden.
> - Die Screens dürfen nicht so wirken, als zeigten sie eine echte Familie.
> - Die Schriften folgen ihren eigenen offenen Lizenzen.

Fragen zur Nutzung, zu Formaten oder zu einer Fassung, die hier fehlt: contact@hey-albert.app.


---

# Änderungen und offene Punkte

> Was sich an Marke und Gestaltung wann und warum geändert hat, und was noch nicht entschieden oder nicht gebaut ist. Ehrlich, mit Quelle.

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

Das Designsystem hat eine Geschichte. Wer gegen ein früheres System gebaut hat, findet hier, was sich geändert hat. Wer neu dazukommt, findet die offenen Stellen. Quelle für alles: `docs/entscheidungen.md` und `docs/status.md`.

## Stand

Das Paket `@hey-albert/design-system` trägt die Version 0.1.0. Die Werte sind seit dem 22. September in `tokens/quelle` eingefroren und werden gegen `tokens/referenz` geprüft.

> **Offen**
>
> Am 31. August galt eine Regel für die Versionsnummer: groß, wenn ein Wert wandert oder ein Token verschwindet; mittel, wenn etwas dazukommt; klein, wenn sich nur Text ändert. Diese Regel stand im Vorgänger und ist nicht ins Paket übernommen. Die Nummer 0.1.0 sagt deshalb noch nichts.

## Änderungen

| Datum | Was | Warum |
|---|---|---|
| 21.10.2026 | brand.heyalbert.family entsteht, erzeugt aus dem Paket. `regeln/regeln.json` wird die maschinenlesbare Quelle für Wörter, Register, Grenzen und Gestaltungsregeln. Token-Beschreibungen tragen echte Umlaute. | Ein Ort für Team, externe Fachleute und Agenten, ohne zweite Quelle. |
| 30.09.2026 | Die Website sieht wieder aus wie vor der Umstellung auf Payload. Payload-Blöcke werden im Markup des alten Generators gezeichnet, `stil.css` ist die Quelle des Aussehens. | Die erste Payload-Fassung wich sichtbar ab. |
| 22.09.2026 | Tokens als Code: Quelle im W3C-Format, Style Dictionary erzeugt CSS, Tailwind-Theme und Swift. Zehn shadcn-Primitive auf Rollen, sechzehn Website-Blöcke, Storybook, Bildvergleiche, Brand-QA. Sieben neue Rollen für Zeiger- und Druckzustände. | Werte standen noch als Hex in `components.css` und `Karte.jsx`. Jetzt steht ein Hex-Wert nur in der Quelle. |
| 20.09.2026 | Gruppe `components/hq` mit `Satellit` und `Trichter`. | Das HQ bekam Bauteile, die erst im System entstehen und dann in der App. |
| 19.09.2026 | Monorepo: das System liegt als `packages/design-system`. Die Web-App holt Tokens und Schriften aus dem Paket. `Rahmen.tsx` ist `LeisteMac` und `Kopfzeile` für App und HQ. | Ein Rahmen, eine Quelle, nichts zweimal gebaut. |
| 04.09.2026 | Das Designsystem aus Claude Design wird die einzige Quelle. Waldtinte-Tokens, alte Schirme und die erste Brand-Seite gehen ins Archiv. Die vier Schriften werden heruntergeladen und lokal ausgeliefert. | Zwei Quellen sind eine Gabelung. Schriften von Google-Servern geben die IP-Adresse jedes Besuchers weiter. |
| 04.09.2026 | Website und App teilen eine Palette. Die alte Palette aus dem Homepage-Blueprint gilt nicht mehr. | Ein eigener Token-Satz für die Website ist ausgeschlossen. |
| 02.09.2026 | Die Farbwelt der A2-Screensets wird die App: warmes Creme, schwarze Leiste, Rosa als Akzent, beige Karten, Gelb für Familie, Blau für Fahrten. | Entscheidung des Gründers nach den letzten Screensets. |
| 31.08.2026 | „Inaktiv“ ist eine gerechnete Rolle statt Deckkraft. | Deckkraft multipliziert sich mit dem Untergrund, dann stimmt keine Kontrastzahl. |
| 30.08.2026 | Das Zeichen ist ein Knäuel mit Augen, auch als Favicon. Maskottchen und Markenzeichen sind zwei Aufgaben. | Albert räumt das Leben nicht auf, er behält den Überblick, während es weitergeht. |
| 30.08.2026 | Schriften werden lokal ausgeliefert. | Urteil des LG München I vom 20.01.2022 zu Google Fonts. |
| 28.08.2026 | Die Welt „Notizbuch“ ist gesetzt: Papier, Tinte, Klebezettel, keine Schatten. Die Signalfarbe gehört keiner Person. | Sieben Gestaltungswelten wurden verglichen. |
| 23.08.2026 | Grundlage Tinte auf Papier, Haarlinien, 8-px-Raster, kein Elevationssystem. | Ein Küchenkalender, ein Aktenordner und das Jahresbuch sind Papier. |

## Offene Punkte

Jeder Punkt ist gegen die Dateien geprüft, Stand 21. Oktober.

### Gestaltung

> **Zeichensatz unbestätigt**
>
> Die 47 Zeichen in `assets/icons` sind Lucide. Das war eine Substitution, weil kein eigener Satz vorlag. Die Substitution ist weder bestätigt noch getauscht. Die App soll bis dahin SF Symbols tragen.

> **Logo nur als PNG**
>
> Das Logo liegt in fünf PNG-Fassungen vor, eine Vektorfassung fehlt. `docs/22` nennt Vektoren für App-Symbol und Favicon in `design/assets/quelle`. Dieser Ordner liegt nicht im Repository, und laut `docs/22` sind diese Vektoren noch dunkelgrün statt Tinte und Rosa.

> **Zweittext auf Karte unter 4,5:1**
>
> `docs/entscheidungen.md` sagt am 4. September: `--grau` wurde auf einen dunkleren Wert korrigiert, damit Zweittext auf Karte 4,5:1 erreicht. In `tokens/quelle` steht noch der alte Wert. Gerechnet ergibt `grau` auf `karte` 4,41:1. Dasselbe gilt für `--text-inaktiv`: die Korrektur auf 3,0:1 ist beschlossen, in der Quelle steht der Wert mit 2,47:1 auf `grund`. Beide Werte brauchen eine Entscheidung und dann `pnpm tokens`.

> **Personenlinien unter 3:1**
>
> Die Linien in Personenfarbe erreichen im hellen Modus auf `grund` nur 1,67:1 bis 2,85:1. Im dunklen Modus liegen sie über 8:1. Das System verspricht 3:1 für diese Linien nicht. Initiale und Name tragen die Person mit. Sollen Linien allein tragen, braucht es dunklere Stufen.

> **Kontraste gerechnet, nicht gemessen**
>
> Alle Kontrastwerte auf dieser Seite und in `guidelines/farben-kontrast.html` sind nach WCAG gerechnet. Gemessen mit einem Prüfgerät auf echten Bildschirmen wurde nichts.

> **Ohne Vorlage im System**
>
> Für iPad, Watch, Safe, Finanzen, Album, Jahresbuch und die Sonntagsrunde als eigene Fläche gibt es keine Vorlage im Designsystem. Die Screens der Website zeigen einige davon. Diese Screens sind aber Vorlagen für die Vermarktung, keine abgenommenen Flächen. Die Kapitel zu den Screens kennzeichnen ihre Anatomie deshalb als Vorschlag.

> **Bilder der Homepage**
>
> Drei Tuschezeichnungen, das Foto des Gründers und ein Foto des gedruckten Jahresbuchs fehlen. Die Bauteile zeigen dort `Bildplatz`.

### Sprache

> **Fünftes Register**
>
> `docs/21` und der Skill `texten` nennen den **Briefeschreiber** als fünftes Register. Das Designsystem (`guidelines/sprache.html`, `readme.md`) nennt den **Flüsterer** für Watch und Mitteilungen. Bis zur Entscheidung gilt `docs/21`. Der Flüsterer ist eine Längengrenze von sieben Wörtern.

> **Wortlisten an mehreren Orten**
>
> `regeln/regeln.json` ist seit heute die Quelle für verbotene Wörter. `skripte/qa.mjs` hat noch eine eigene Liste, `tooling/check-sprache.py` eine dritte. Beide lesen `regeln.json` noch nicht.

### Werkzeuge

> **Zwei Prüfer brechen ab**
>
> `tooling/check-sprache.py` sucht das Modul `sprache`, `tooling/check-kontrast.py` das Modul `albert_tokens`. Beide lagen im Vorgänger unter Pfaden, die es hier nicht gibt. `pnpm qa` und `pnpm tokens:diff` laufen grün.

> **Alte Pfade in Regeln und Prüfer**
>
> `.claude/rules/design-tokens.md`, der Agent `design-pruefer` und `docs/22` §1 und §10 nennen noch `design/system/` und `Scripts/`. Die Quelle ist heute `packages/design-system`, der Ablauf zum Ändern steht im Kapitel [Wie wir entwickeln](/entwickeln/).

> **Noch nicht eingebunden**
>
> `swift/Tokens.swift` ist erzeugt, aber in keinem Xcode-Projekt eingebunden: `apps/apple` enthält bisher nur ein README. `apps/web` benutzt Tokens und eigene Bausteine, aber noch nicht das Tailwind-Theme und die shadcn-Primitive des Pakets.

### Rechtliches

> **Nutzungsbedingungen**
>
> Wer Logos und Screens wofür benutzen darf, ist nicht schriftlich geregelt. Der Vorschlag steht unter [Downloads](/downloads/).