Brand and design system
Who Hey Albert is, how he sounds and how he looks — in one place, for people and for machines.
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.
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.
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.txtis the index for language models. Everything else is in the chapter for machines. - 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.
- 1Everything has exactly one person responsible. Anything without one is a problem and is shown loudly. The only exception: the task inbox.
- 2One data model, many views. Web, Mac, iPhone, iPad and Watch show the same rows.
- 3Bundles, not loose parts. A drive brings its car, driver, passengers and checklist along.
- 4Every person has their own space. Children design theirs themselves, within contrast guardrails.
- 5Children take part; they are not an audience. Test question: could a nine-year-old use this alone?
Brand
Brand essentialsHey Albert's positioning, claim, stance and audience — and the rules that follow for every sentence and every image.AlbertWho 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 toneHow Hey Albert writes — forms of address, five registers, tone, stylistic devices, hard limits, formatting, word lists and the ten microcopy patterns.LogoThe 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
ColourWarm 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.TypeFour 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.ShapeFive 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.SpaceThe 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.MotionShort and calm. Three durations, two curves, no springs, no spinner. Motion explains what happens and stands still when the system asks for less motion.IconsA 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.ImageryThe 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.AccessibilityHey 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
ScreensHow 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.iPhoneThe 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.iPadThe 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 browserThe 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 WatchThe 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.StatesEmpty, 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
ComponentsEvery 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.PatternsHow components answer together – bundle, suggestion, conflict, no one responsible, lanes, forms, lists, scan, children, side sheet, confirm and delete.
Applications
Website and landing pagesHow 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 mediaStance, 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 StoreName, 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 supportHow 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 buildOne source, many surfaces. How tokens, components and checks fit together, which rules apply in code, and when a view is done.TokensEvery 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 modelsHow machines read this site. Addresses, files, a skill to install, templates for typical briefs, and the limits that apply to every agent.