# Hey Albert — Marke und Designsystem / brand and design system

> Hey Albert ist der Family Manager für iPhone, iPad, Mac, Apple Watch und den Browser. Diese Seite beschreibt Marke, Stimme, Gestaltung, Screens, Bauteile und Tokens — für Menschen und für Maschinen. Alles ist aus packages/design-system erzeugt; Bauteil- und Tokennamen sind absichtlich deutsch.
> Hey Albert is the family manager for iPhone, iPad, Mac, Apple Watch and the browser. This site describes brand, voice, design, screens, components and tokens — for people and for machines. Component and token names are German by design.

Regeln, die immer gelten / rules that always apply: kein Hex-Wert in Bauteilen, nur Rollen-Tokens · keine Schatten · kein Emoji, kein Ausrufezeichen in der Oberfläche · „ihr“ zur Familie, „du“ zum Einzelnen, nie „Sie“ · Beispiele immer mit Familie Sonntag, nie mit echten Familien.

## Kapitel (Deutsch)

- [Marke und Designsystem](https://brand.heyalbert.family/index.md): Wer Hey Albert ist, wie er klingt und wie er aussieht — an einem Ort, für Menschen und für Maschinen.
- [Marke im Kern](https://brand.heyalbert.family/marke.md): 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.md): 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.md): 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.md): 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.
- [Farbe](https://brand.heyalbert.family/farbe.md): 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.md): 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.md): 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.md): 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.md): 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.md): 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.md): 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.md): 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](https://brand.heyalbert.family/screens.md): 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.md): 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.md): 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.md): 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.md): 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.md): 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](https://brand.heyalbert.family/bauteile.md): 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.md): Wie Bauteile zusammen Antworten geben – Bündel, Vorschlag, Konflikt, ohne Zuständigen, Spuren, Formulare, Listen, Scan, Kinder, Seitenblatt, Bestätigen und Löschen.
- [Website und Landingpages](https://brand.heyalbert.family/website.md): 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.md): 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.md): 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.md): 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.
- [Wie wir entwickeln](https://brand.heyalbert.family/entwickeln.md): 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.md): 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.md): 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.
- [Downloads](https://brand.heyalbert.family/downloads.md): 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.md): Was sich an Marke und Gestaltung wann und warum geändert hat, und was noch nicht entschieden oder nicht gebaut ist. Ehrlich, mit Quelle.

## Chapters (English)

- [Brand and design system](https://brand.heyalbert.family/en/index.md): Who Hey Albert is, how he sounds and how he looks — in one place, for people and for machines.
- [Brand essentials](https://brand.heyalbert.family/en/marke.md): Hey Albert's positioning, claim, stance and audience — and the rules that follow for every sentence and every image.
- [Albert](https://brand.heyalbert.family/en/albert.md): Who Albert is — the figure in the picture, the family manager in tone, and the line he never crosses: he suggests, a person decides.
- [Voice and tone](https://brand.heyalbert.family/en/stimme.md): How Hey Albert writes — forms of address, five registers, tone, stylistic devices, hard limits, formatting, word lists and the ten microcopy patterns.
- [Logo](https://brand.heyalbert.family/en/logo.md): The scribble ball with a face and the „Hey Albert“ wordmark — versions to download, backgrounds, clear space, misuse, and the honest state of the vector and app icon.
- [Colour](https://brand.heyalbert.family/en/farbe.md): Warm paper, ink, a pink accent and one sticky note per person. Every colour is a role with a fixed meaning, light and dark from one source.
- [Type](https://brand.heyalbert.family/en/schrift.md): Four typefaces with four jobs – Bricolage Grotesque for titles, Inter for everything that is read and operated, Roboto Mono for identifiers, Reenie Beanie for Albert’s margin notes. All served locally.
- [Shape](https://brand.heyalbert.family/en/form.md): Five radius steps, lines that carry meaning, and depth without shadows – from a veil, an outline and a tilt. Plus sticky notes, playful shapes and the anatomy of a card.
- [Space](https://brand.heyalbert.family/en/raum.md): The 8 px grid, the paddings and margins measured from the reference screens, the sidebars and the three target sizes for pointer, finger and children’s hands.
- [Motion](https://brand.heyalbert.family/en/bewegung.md): Short and calm. Three durations, two curves, no springs, no spinner. Motion explains what happens and stands still when the system asks for less motion.
- [Icons](https://brand.heyalbert.family/en/zeichen.md): A set of stroke icons, coloured through the text colour. Fixed roles say what a thing is – from the car for a drive to the question mark for Albert’s suggestion. No emoji, anywhere.
- [Imagery](https://brand.heyalbert.family/en/bildsprache.md): The product is the subject. Real screens of the Sonntag family on flat frames, ink drawings with exactly one yellow accent, a single photo. Plus how screenshots are made and which files the website needs.
- [Accessibility](https://brand.heyalbert.family/en/zugaenglichkeit.md): Hey Albert is built for a whole family, from nine-year-old Lena to Oma Grete. Contrast, target sizes, focus, screen readers, text sizes, motion and plain language belong to every view, not to the end.
- [Screens](https://brand.heyalbert.family/en/screens.md): How a Hey Albert screen is built – on iPhone, iPad, Mac, Watch and in the browser. Devices, places, roles, density, grid, header and cards, with every screen of the Sonntag family.
- [iPhone](https://brand.heyalbert.family/en/iphone.md): The everyday device region by region – Today, week as a list, week at a glance, child space – with measurements in points, the tab bar, target sizes, gestures and what the iPhone does not have.
- [iPad](https://brand.heyalbert.family/en/ipad.md): The family and children’s device – Lena’s space (established), the adult view in landscape and portrait and the kitchen wall mode (proposals), with measurements in points.
- [Mac and browser](https://brand.heyalbert.family/en/mac.md): The planning machine – week in the hour grid, sidebar expanded and collapsed, areas with list and side column. Applies to a Mac app and to the web app in the browser, with measurements in points and keyboard shortcuts.
- [Apple Watch](https://brand.heyalbert.family/en/watch.md): The five-second device – one question, two answers, seven words at most. Layout in points, what the watch carries, notifications and what the watch does not have.
- [States](https://brand.heyalbert.family/en/zustaende.md): Empty, loading, error, offline, undo, optimistic update, conflict, no one responsible, Albert’s suggestion, disabled – each with layout, register, example text from the Sonntag family and its component.
- [Components](https://brand.heyalbert.family/en/bauteile.md): Every component of the design system with a live example, usage rule and types – named in German, from one source, for web, Mac, iPhone and iPad.
- [Patterns](https://brand.heyalbert.family/en/muster.md): How components answer together – bundle, suggestion, conflict, no one responsible, lanes, forms, lists, scan, children, side sheet, confirm and delete.
- [Website and landing pages](https://brand.heyalbert.family/en/website.md): How hey-albert.app is built, how it speaks and what it shows — fourteen sections, landing pages per audience, eleven languages, preview images and the bar for performance and accessibility.
- [Social media](https://brand.heyalbert.family/en/social-media.md): Stance, channels, formats with safe zones and ready-made example motifs built from tokens and real screens — plus rules for images, copy, labelling and approval.
- [App Store](https://brand.heyalbert.family/en/app-store.md): Name, subtitle, description, screenshots, app icon, privacy details, review access and the language for subscriptions — everything that ends up in App Store Connect.
- [Mail, letters and support](https://brand.heyalbert.family/en/mail.md): How Hey Albert writes when it lands in the inbox — senders and domains, template structure, subject lines, confirmation and unsubscribing, letters on the family’s behalf and replies in support.
- [How we build](https://brand.heyalbert.family/en/entwickeln.md): One source, many surfaces. How tokens, components and checks fit together, which rules apply in code, and when a view is done.
- [Tokens](https://brand.heyalbert.family/en/tokens.md): Every value of the brand as a named role, light and dark. How they are named, how to use them — on the web, in Swift, in token tools — and the complete table.
- [For agents and language models](https://brand.heyalbert.family/en/ki.md): How machines read this site. Addresses, files, a skill to install, templates for typical briefs, and the limits that apply to every agent.
- [Downloads](https://brand.heyalbert.family/en/downloads.md): Logos, fonts, icons, tokens and screens of the Sonntag family to download, one by one or as a package. Plus who may use what, and for what.
- [Changes and open points](https://brand.heyalbert.family/en/aenderungen.md): What changed in brand and design, when and why, and what is not yet decided or built. Honest, with sources.

## Daten / data

- [/llms.txt](https://brand.heyalbert.family/llms.txt): Index of all chapters and files for language models
- [/llms-full.txt](https://brand.heyalbert.family/llms-full.txt): All chapters in German, one file
- [/en/llms-full.txt](https://brand.heyalbert.family/en/llms-full.txt): All chapters in English, one file
- [/tokens/tokens.json](https://brand.heyalbert.family/tokens/tokens.json): All tokens, resolved, light and dark, with meaning
- [/tokens/tokens.dtcg.json](https://brand.heyalbert.family/tokens/tokens.dtcg.json): Tokens in W3C Design Tokens Community Group format
- [/tokens/tokens.css](https://brand.heyalbert.family/tokens/tokens.css): CSS variables, light and dark
- [/tokens/tailwind.css](https://brand.heyalbert.family/tokens/tailwind.css): Tailwind v4 theme
- [/tokens/Tokens.swift](https://brand.heyalbert.family/tokens/Tokens.swift): SwiftUI tokens
- [/regeln.json](https://brand.heyalbert.family/regeln.json): Word lists, registers, limits, design rules
- [/bauteile.json](https://brand.heyalbert.family/bauteile.json): All components with types and prompt
- [/skill/SKILL.md](https://brand.heyalbert.family/skill/SKILL.md): Agent skill for Claude Code and other tools

## Optional

- [Logos](https://brand.heyalbert.family/downloads/hey-albert-logos.zip)
- [Icons (SVG)](https://brand.heyalbert.family/downloads/hey-albert-zeichen.zip)
- [Fonts with licences](https://brand.heyalbert.family/downloads/hey-albert-schriften.zip)
- [Tokens: JSON, CSS, Tailwind, Swift](https://brand.heyalbert.family/downloads/hey-albert-tokens.zip)
- [Sonntag family screens (PNG)](https://brand.heyalbert.family/downloads/hey-albert-screens.zip)
- [Everything in one package](https://brand.heyalbert.family/downloads/hey-albert-markenpaket.zip)