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