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

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

Hey Albert has one data model and many views. An event is a card in the hour grid on the Mac, a row in the list on the iPhone and a question with two answers on the watch. It is always the same row in the database. This chapter covers what applies to every device. The chapters [iPhone](/en/iphone/), [iPad](/en/ipad/), [Mac](/en/mac/) and [Watch](/en/watch/) show the layout region by region, in points.

## One data model, many views

Principle 2 is the foundation of every screen. Week, Today and calendar render the same things. A view may filter, group and condense. It may never hold data of its own.

> **Do**
>
> A new view reads the same rows as the existing ones and shows them differently. Saturday’s ride home is the same thing in the week board, the list, the week at a glance and the Sunday round.

> **Don't**
>
> A view gets its own copy of the data “so it’s faster”. Then there are two truths, and one of them is wrong.

## Devices and their role

| Device | Role | What belongs there |
|---|---|---|
| Mac | the planning machine | planning the week, safe, finances, Sunday round, managing the household |
| iPhone | the everyday device | on the way, in the shop, in the car, in the hallway – one-handed |
| iPad | family and children’s device | in the kitchen, at the table, in the children’s room |
| Apple Watch | the five-second device | leaving, arrived, ticked off, voted |
| Browser | the web app | planning and paperwork on any computer, the same layout as the Mac |

The rule behind it is in `docs/11-produkt.md` §10: what is **planned** belongs on the Mac. What happens **together** belongs on the iPad. What happens **on the way** belongs on the iPhone. What takes **one second** belongs on the watch.

## Places in the app

The app has three kinds of places. Albert himself is not a place. He works in all of them.

- **Surfaces (*Flächen*):** Today (*Heute*), Week (*Woche*), Inbox (*Eingang*). They show things from every area.
- **Areas (*Bereiche*):** Food (*Essen*), Tasks (*Aufgaben*), School (*Schule*), Joy (*Freude*), Important (*Wichtiges*). Each shows one kind of thing in full depth.
- **Personal (*Persönlich*):** Me (*Ich*) and Household (*Haushalt*). Profile, your own things, people and rights.

The groups are not destinations. Nobody clicks on “Areas”; you click on “Food”.

## Navigation per device

| Device | Navigation | Component |
|---|---|---|
| Mac and browser | black sidebar on the left, 220 pt, collapsed 72 pt | `LeisteMac` |
| iPad landscape | sidebar on the left as on the Mac (proposal) | `LeisteMac` |
| iPad portrait | sidebar collapsed (proposal) | `LeisteMac` |
| iPhone | black bar at the bottom, five places, the plus sticks out | `LeistePhone` |
| Watch | none, one question per screen | – |
| Child space, wall mode | no bar, a dedicated entry point | – |

On the iPhone the bar has five places: Today · Week · Plus · Inbox · Me. On the Mac every place sits in three groups.

> **Open**
>
> `docs/11-produkt.md` §6 lists the iPhone tabs as “Heute · Woche · Einkauf · Essen · Mehr” (Today · Week · Shopping · Food · More). The `LeistePhone` component, all reference screens and all website screens show “Heute · Woche · Plus · Eingang · Ich”. This site follows the built component. The decision is the founder’s.

## Roles get different entry points

Hey Albert is not an app with permissions that greys out what someone may not do. From the same data model, every role gets its own entry point. What someone may see is decided by the database, never by a hidden button.

| Role | Who | First page |
|---|---|---|
| `owner`, `adult` | Anna, Tobias | Mac: the whole week · iPhone: Today by urgency · iPad: portal |
| `child · small` (6–9) | Lena | iPad: her space, three picture tiles, 56 pt targets · iPhone: only “what’s now” |
| `child · mid` (10–12) | Felix | iPad: day path, two buttons · iPhone: school folder, take-along list, ask for a ride |
| `child · teen` (13+) | – | almost the adult view, without safe, vault and finances |
| `guest` | Oma Grete, Opa Werner, Oma Hilde | iPhone: three things – events they are invited to, album, “I’ll drive” |
| `service` | Sofia | iPhone: her list – shifts, her drives, shopping; every grant with an expiry date |

Safe, vault and finances only open via `albert.may_enter()`. Children never see them, not even greyed out.

## Density: five seconds

The first page holds as much as this role can take in on this device in five seconds. For Oma Grete that is three things. For Lena four. For Anna at the Mac it may be the whole week; she has sat down. Whoever needs more goes one level deeper.

Three questions come before every screen:

1. Who is this page for? “For everyone” means for no one.
2. How many things are on it, and how many seconds does this role have?
3. Am I hiding things, or building a dedicated entry point? Greying out is always the worse answer.

## Grid, margins, safe areas

Everything sits on the 8 pt grid with 4 pt as a half step. The surface margin is `--flaeche-rand-mac` on the Mac and `--flaeche-rand-phone` on the iPhone. Cards have `--karte-innen` inside and `--karte-abstand` between them.

| Token | CSS | Value | Dark | Meaning |
| --- | --- | --- | --- | --- |
| 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) |

Safe areas belong to the system: status bar, Dynamic Island, home indicator. We draw nothing there and never imitate a status bar. Controls never sit below the iPhone bar.

Target sizes are minimums, not guidelines: pointer 28, finger 44, child 56.

| Token | CSS | Value | Dark | Meaning |
| --- | --- | --- | --- | --- |
| ziel-zeiger | var(--ziel-zeiger) | 28px |  |  |
| ziel-finger | var(--ziel-finger) | 44px |  |  |
| ziel-kind | var(--ziel-kind) | 56px |  |  |

## The header of a surface

Every surface starts the same way. First the header, then the greeting, then the row with date and filters, then the content.

- **Header** (Mac, iPad): search pill with pink magnifier, dashed area chips, three circles on the right in fixed order – bell, messages, pink plus. The iPhone has no header; the plus sits in the bar.
- **Greeting:** “Guten Morgen, Anna.” in Bricolage 800. On Today it greets; on every other surface it names: “Woche 36”, “Aufgaben”, “Einkauf”. Below it a subline with the date and what counts: “zwei Sachen offen, ein Vorschlag” (two things open, one suggestion).
- **Row:** date pill, person filter, span control.

### Kopfzeile

Source: `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;
```

## The five kinds of card

Today, Week and calendar are made of cards. The kind sets the surface, the icon the thing, the dots the people.

| Kind | Surface and edge | For |
|---|---|---|
| Event (*Termin*) | beige, hairline | anything with a time and place |
| Drive (*Fahrt*) | blue | drives from → to |
| Family (*Familie*) | yellow | rituals, shared meals, Sunday round |
| Suggestion (*Vorschlag*) | dashed grey without fill (Mac) · yellow with shapes (iPhone) | Albert’s suggestion, always with two buttons |
| Open (*Offen*) | dashed open-pink | something with no one responsible, shown loudly |

### Karte

Source: `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;
```

## States are mandatory

No screen is finished without its states: empty, loading, error, offline, undo. They are in the chapter [States](/en/zustaende/). A view is only finished with all of this:

- [ ] empty state
- [ ] skeleton instead of spinner
- [ ] keyboard and :focus-visible
- [ ] phone and desktop
- [ ] light and dark as a token switch
- [ ] optimistic update with „Undo“
- [ ] correct register
- [ ] no hex value
- [ ] target sizes 28/44/56

## What is available where

“Full” means it belongs here. “Reduced”: present, deliberately leaner. “Read”: view, not edit. From `docs/11-produkt.md` §10, cut down to the places of the app.

| Place | Mac | iPad | iPhone | Watch |
|---|---|---|---|---|
| Today | reduced | full | full | reduced |
| Week (week board) | full | reduced | read | – |
| Inbox (mail, scan) | full | full | reduced, scanning full | – |
| Food and shopping | full (plan) | full | full (list in the shop) | vote |
| Tasks | full | full | reduced, ticking off full | tick off |
| Drives | planning full | reduced | leaving and arriving full | leaving and arriving |
| School | timetable | reduced | school folder full | dictate homework |
| Joy (feed, occasions, album) | full | full | reduced | – |
| Important (safe, vault, finances) | full | reduced | read | – |
| Sunday round | full | full | read | – |
| Household and rights | full | reduced | read | – |

## Every screen of the Sonntag family

These are the screens the website, the App Store and this site work with. Each links to a PNG for download.

![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*

> **Words in the screens**
>
> Some website screens (the iPhone inbox, the Mac sidebar) say “Inbox”; the `LeisteMac` component and the documentation say “Eingang”. Until this is decided, the app uses “Eingang”.