# Brand and design system

> Who Hey Albert is, how he sounds and how he looks — in one place, for people and for machines.

Source: https://brand.heyalbert.family/en/ · Hey Albert brand and design system

Hey Albert is the family manager for iPhone, iPad, Mac, Apple Watch and the browser. Appointments, drives, meals, school, paperwork and occasions live in one place. Every task has a name next to it. Albert suggests, a person decides.

This site shows how that sounds and how it looks. It is the one source for everyone who works on Hey Albert.

![The Sonntag family's week board on the Mac: one week in an hourly grid, every task with a name](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

## Who this site is for

**The team.** If you build a screen, write a sentence or design a post, you will find the rule and an example here.

**Outside experts and agencies.** You get the complete brand without access to the repository. Every colour, typeface and screen can be downloaded.

**Language models and agents.** Every chapter is also available as Markdown. Tokens, rules and components are published as JSON. An agent reads the same rules as a person.

> **One source**
>
> This site holds no values of its own. Colours, measurements, fonts, components and screens are pulled straight from `packages/design-system` at build time. When a token changes there, this site changes with it. What you read here is what the app uses.

## How to use it

- **Read the chapters.** Eight groups on the left, from the brand to the downloads. Each chapter ends with a link to the next.
- **Open as Markdown.** Top right, „As Markdown“. Every page also exists at the same address with `.md`, for example `/en/farbe.md`.
- **Connect machines.** `/llms.txt` is the index for language models. Everything else is [in the chapter for machines](/en/ki/).
- **Download.** Logos, icons, fonts, tokens and screens, one by one or as a package.
- **Light or dark.** The circle at the top right switches the mode. Every colour on this site switches with it, just as in the app.

Chapter addresses and token and component names stay German on purpose — they are the names the code uses.

## Five principles

They apply to every screen and every device. They are not up for negotiation.

1. Everything has exactly one person responsible. Anything without one is a problem and is shown loudly. The only exception: the task inbox.
2. One data model, many views. Web, Mac, iPhone, iPad and Watch show the same rows.
3. Bundles, not loose parts. A drive brings its car, driver, passengers and checklist along.
4. Every person has their own space. Children design theirs themselves, within contrast guardrails.
5. Children take part; they are not an audience. Test question: could a nine-year-old use this alone?

## The chapters

**Brand**

- [Brand essentials](https://brand.heyalbert.family/en/marke/) — 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/) — 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/) — 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/) — 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.

**Foundations**

- [Colour](https://brand.heyalbert.family/en/farbe/) — 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/) — 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/) — 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/) — 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/) — 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/) — 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/) — 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/) — 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**

- [Screens](https://brand.heyalbert.family/en/screens/) — 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/) — 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/) — 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/) — 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/) — 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/) — 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**

- [Components](https://brand.heyalbert.family/en/bauteile/) — 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/) — How components answer together – bundle, suggestion, conflict, no one responsible, lanes, forms, lists, scan, children, side sheet, confirm and delete.

**Applications**

- [Website and landing pages](https://brand.heyalbert.family/en/website/) — 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/) — 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/) — 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/) — 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.

**Build**

- [How we build](https://brand.heyalbert.family/en/entwickeln/) — 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/) — 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/) — How machines read this site. Addresses, files, a skill to install, templates for typical briefs, and the limits that apply to every agent.

**Resources**

- [Downloads](https://brand.heyalbert.family/en/downloads/) — 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/) — What changed in brand and design, when and why, and what is not yet decided or built. Honest, with sources.

## Everything to download

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

> **The Sonntag family**
>
> Every example on this site shows the Sonntag family: Anna, Tobias, Felix (11), Lena (9), Sofia the au pair, and three grandparents. The week runs from Monday 1 September to Sunday 7 September. Today is Wednesday the 3rd. We never show real families.