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

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

The iPhone is the everyday device. It is used in the hallway, in the shop, in the car, one-handed and often in a hurry. So an iPhone screen asks one question: what is happening now? Everything else is one level deeper.

## Device and measurements

All reference and website screens are drawn for **390 × 844 pt** (the smaller iPhone 14, 15 and 16, stored @2x as 780 × 1688 px). Other sizes only change the width of the content. Margin, bar, circles and target sizes stay the same.

| Measure | Value | Token |
|---|---|---|
| Surface margin | 20 pt | `--flaeche-rand-phone` |
| Status bar, top safe area | 47 pt | system |
| Tab bar | 64 pt high, 16 pt from the edge | `--leiste-phone-hoehe`, `--radius-leiste` |
| Plus | 56 pt, sticks out | `--ziel-kind` |
| Bottom safe area | 34 pt | system |
| Greeting | 30 pt | `--grad-anrede-phone` |
| Card title, text, subline | 14.5 · 14 · 12 pt | `--grad-karten-titel`, `--grad-text`, `--grad-zweit` |
| Target size | 44 pt, children and plus 56 pt | `--ziel-finger`, `--ziel-kind` |

> **Open**
>
> There are no reference screens for larger devices (430 pt wide) or the smallest (375 pt). Proposal: margin and measurements stay, cards get wider, and at 375 pt the week at a glance shows initials without icons.

## Today

Today is the first surface for adults. Sorted by urgency, not by area: what is running, what comes next, what needs to go along, what is open. Four to six blocks. No person filter, because whoever opens Today is standing in the hallway themselves.

**iPhone · Today** · 390 × 844 pt · established

| Nr. | Region | Frame (x, y, w, h in pt) | Measure | Tokens | Components | What goes there |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Status bar, safe area | 0, 0, 390, 47 | 47 pt, owned by the system |  |  | Belongs to the system. Nothing of ours goes here, and we never draw our own status bar. |
| 2 | Greeting and subline | 20, 56, 350, 58 | greeting 30 pt, subline 12 pt, margin 20 pt | --grad-anrede-phone, --grad-zweit, --flaeche-rand-phone | Anredezeile | „Guten Abend, Anna.“ in Bricolage 800, below it weekday, date and time: „Freitag, 5. September · 18:12“. Full stop at the end, never an exclamation mark. |
| 3 | Day circles | 20, 126, 350, 46 | seven circles of 44 pt | --ziel-finger, --schwarz, --rosa-hell, --sonntag | Tagesreiter | Mon to Sun as circles. Today is black, Sunday a muted pink-grey. A pink circle means something is open that day. Tap to switch day. |
| 4 | Section label | 20, 184, 350, 18 | 10 pt small caps | --grad-kapitaelchen, --laufweite-kapitaelchen, --text-zweit |  | „Heute noch“ (still today). Groups by urgency, not by module. |
| 5 | Cards by urgency | 20, 212, 350, 366 | full width 350 pt, padding 12 pt | --karte-innen, --karte-abstand, --radius-karte, --bedeutung-fahrt, --bedeutung-familie | Karte, VorschlagKarte, BuendelKarte | What is running, what comes next, what needs to go along, what is open. Four to six blocks, no more. Drives blue, family yellow, events beige. A suggestion from Albert appears as a yellow VorschlagKarte where it is urgent. No person filter: whoever opens Today is standing in the hallway themselves. |
| 6 | Toast with Undo | 16, 671, 358, 59 | above the tab bar, button 44 pt | --schwarz, --akzent, --ziel-finger | Toast | Appears after every change: „Oma Grete hat die Fahrt übernommen.“ with „Rückgängig“ (Undo) next to it. It never covers the tab bar. |
| 7 | Tab bar, fixed | 16, 752, 358, 64 | 64 pt high, 16 pt inset | --leiste-phone-hoehe, --radius-leiste, --flaeche-leiste, --ziel-finger | LeistePhone | Black, five places: Today · Week · Plus · Inbox (Eingang) · Me (Ich). The active place has a pink underline, the inbox carries its counter. Each place is 44 pt. The bar stays put while scrolling. |
| 8 | Plus, protruding | 167, 739, 56, 56 | 56 pt circle | --ziel-kind, --akzent | LeistePhone, SchnellMenue | The only thing that sticks out of the bar. Pink, 56 pt, because children press it too. Opens the quick menu: event, task, drive, scan document, contact, note. |
| 9 | Home indicator, safe area | 0, 818, 390, 26 | 34 pt safe area, the bar overlaps it |  |  | Belongs to the system. No controls below the tab bar. |

## Week as a list

On the iPhone a seven-day grid is too dense. So the week runs as a list: one day per row, expandable, with Albert’s suggestion at the top when something is missing.

**iPhone · Week as list** · 390 × 844 pt · established

| Nr. | Region | Frame (x, y, w, h in pt) | Measure | Tokens | Components | What goes there |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Status bar, safe area | 0, 0, 390, 47 | 47 pt, owned by the system |  |  | Belongs to the system. Nothing of ours goes here, and we never draw our own status bar. |
| 2 | Title and span | 20, 60, 300, 58 |  | --grad-anrede-phone, --grad-zweit | Anredezeile | „Woche 36“, below it „1. – 7. September“. Here the heading names, it does not greet. |
| 3 | Own avatar | 334, 62, 36, 36 |  | --person-1 | Avatar | Your own sticky note with initial. Leads to „Ich“ (Me). |
| 4 | Span control | 20, 133, 300, 30 |  | --radius-pille, --knopf-zweit, --schwarz | SpannenRegler | Today · 3 days · Mon – Fri · Mon – Sun · Month, always in this order. Same data, different range. |
| 5 | Person filter | 20, 175, 280, 44 | circles 44 pt | --ziel-finger, --person-1, --person-2, --person-3, --person-4, --person-5 | PersonenFilter | First circle black with two heads: everyone. Then one circle per person with initial. Selected circles get a dark ring. |
| 6 | Albert’s suggestion | 20, 231, 350, 140 |  | --bedeutung-familie, --text-auf-gelb, --gelb-dunkel | VorschlagKarte | Yellow, with shapes, always two buttons. „Samstag fehlt ein Fahrer.“ and „Tobias fragen“. Below it, small: „Vorschlag von Albert“. |
| 7 | List rows per day | 20, 384, 350, 168 |  | --hell, --linie-haar, --schwarz | Listenzeile, Karte | One day per row. Past days collapse. The text says who carries the day: „heute · Anna und Felix“, the hours on the right, „3,0 h“. Expanded, compact cards sit inside. |
| 8 | Tab bar, fixed | 16, 752, 358, 64 | 64 pt high, 16 pt inset | --leiste-phone-hoehe, --radius-leiste, --flaeche-leiste, --ziel-finger | LeistePhone | Black, five places: Today · Week · Plus · Inbox (Eingang) · Me (Ich). The active place has a pink underline, the inbox carries its counter. Each place is 44 pt. The bar stays put while scrolling. |
| 9 | Plus, protruding | 167, 739, 56, 56 | 56 pt circle | --ziel-kind, --akzent | LeistePhone, SchnellMenue | The only thing that sticks out of the bar. Pink, 56 pt, because children press it too. Opens the quick menu: event, task, drive, scan document, contact, note. |
| 10 | Home indicator, safe area | 0, 818, 390, 26 | 34 pt safe area, the bar overlaps it |  |  | Belongs to the system. No controls below the tab bar. |

## Week at a glance

The glance in passing. It answers one question: who carries which day, and where is someone missing?

**iPhone · Week at a glance** · 390 × 844 pt · established

| Nr. | Region | Frame (x, y, w, h in pt) | Measure | Tokens | Components | What goes there |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Status bar, safe area | 0, 0, 390, 47 | 47 pt, owned by the system |  |  | Belongs to the system. Nothing of ours goes here, and we never draw our own status bar. |
| 2 | Title | 20, 60, 300, 58 |  | --grad-anrede-phone | Anredezeile | „Woche 36“, below it „1. – 7. September · heute Mittwoch“. |
| 3 | Number tiles | 20, 134, 350, 96 | three tiles, number 34 pt | --grad-zahl-gross, --gelb, --rosa, --blau | ZahlKachel | „8,7 h heute verplant“, „2 Fahrten heute“, „1 offen diese Woche“. Large number in Bricolage 800 on a coloured surface. |
| 4 | Week dot field | 20, 242, 350, 182 |  | --hell, --rand-offen | Wochenueberblick, Tagesreiter | Seven columns, one dot per thing, the initial says who. Open items are a dashed dot. Answers: who carries which day, and where is someone missing? |
| 5 | Cards with action | 20, 435, 350, 235 |  | --bedeutung-fahrt, --bedeutung-familie | Karte, ZustandsPille, Knopf | What needs an answer: the ride home without a driver, with „Ich fahre“ (I’ll drive), then the Sunday round. |
| 6 | Tab bar, fixed | 16, 752, 358, 64 | 64 pt high, 16 pt inset | --leiste-phone-hoehe, --radius-leiste, --flaeche-leiste, --ziel-finger | LeistePhone | Black, five places: Today · Week · Plus · Inbox (Eingang) · Me (Ich). The active place has a pink underline, the inbox carries its counter. Each place is 44 pt. The bar stays put while scrolling. |
| 7 | Plus, protruding | 167, 739, 56, 56 | 56 pt circle | --ziel-kind, --akzent | LeistePhone, SchnellMenue | The only thing that sticks out of the bar. Pink, 56 pt, because children press it too. Opens the quick menu: event, task, drive, scan document, contact, note. |
| 8 | Home indicator, safe area | 0, 818, 390, 26 | 34 pt safe area, the bar overlaps it |  |  | Belongs to the system. No controls below the tab bar. |

The day in the hour grid exists on the iPhone too, with day circles, person filter, time axis and now line (reference screen `iphone-a2-tag.png`). It follows the same regions as Today, with the person filter below the day circles.

## Child space

Children get their own entry point, not a trimmed adult view. Target sizes 56 pt, read-aloud register (*Vorleser*), short sentences, big words. The child always sees who is watching.

**iPhone · Child space (Taler)** · 390 × 844 pt · established

| Nr. | Region | Frame (x, y, w, h in pt) | Measure | Tokens | Components | What goes there |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Status bar, safe area | 0, 0, 390, 47 | 47 pt, owned by the system |  |  | Belongs to the system. Nothing of ours goes here, and we never draw our own status bar. |
| 2 | Own circle and who is watching | 20, 60, 350, 44 | circle 44 pt | --person-4, --ziel-finger | Avatar | Lena’s circle on the left. On the right, when an adult is watching: „Mama schaut mit“ (Mum is watching). The child always knows who can see. |
| 3 | Greeting | 20, 118, 350, 52 |  | --grad-anrede-phone | Anredezeile | „Deine Taler“ (your Taler), below it „Montag, 1. September · Werte setzen Mama und Papa“. Read-aloud register: short, big words. |
| 4 | Taler balance | 20, 186, 350, 56 |  | --gelb, --grad-zahl-gross | TalerStand | „14 Taler“ and „diese Woche +3“ with what was done. Never a deduction, never a comparison with Felix. |
| 5 | Wishes and savings goals | 20, 255, 350, 203 |  | --hell, --linie-haar | Karte | „Zoo mit Oma Grete“ shared with Felix, „Skateboard“ for Lena alone. The bar shows the goal, never how much someone has to catch up. |
| 6 | Parents’ shelf | 20, 472, 350, 75 |  | --radius-pille |  | What can be exchanged: cinema 20, ice cream 4, pocket money 10 Taler = €5.00. Parents set the values. |
| 7 | Open chore | 20, 561, 350, 73 |  | --ziel-kind | Knopf | „Müll rausbringen · Donnerstag 18:00 · noch frei“ with „Übernehmen“ (take it on). The child picks something up by choice. |
| 8 | Two child-size buttons | 20, 649, 350, 56 | 56 pt high | --ziel-kind, --knopf-primaer-flaeche, --knopf-zweit-flaeche | Knopfreihe, Knopf | „Einlösen“ (redeem) and „Wunsch vorschlagen“ (suggest a wish). Two real buttons that go to people: Mum or Dad confirm redemption. |
| 9 | Tab bar, fixed | 16, 752, 358, 64 | 64 pt high, 16 pt inset | --leiste-phone-hoehe, --radius-leiste, --flaeche-leiste, --ziel-finger | LeistePhone | Black, five places: Today · Week · Plus · Inbox (Eingang) · Me (Ich). The active place has a pink underline, the inbox carries its counter. Each place is 44 pt. The bar stays put while scrolling. |
| 10 | Plus, protruding | 167, 739, 56, 56 | 56 pt circle | --ziel-kind, --akzent | LeistePhone, SchnellMenue | The only thing that sticks out of the bar. Pink, 56 pt, because children press it too. Opens the quick menu: event, task, drive, scan document, contact, note. |
| 11 | Home indicator, safe area | 0, 818, 390, 26 | 34 pt safe area, the bar overlaps it |  |  | Belongs to the system. No controls below the tab bar. |

> **Open**
>
> Matrix III in `docs/11-produkt.md` gives small children (6–9) only “what’s now, two things” on the iPhone. The “Taler” screen shows Lena (9) with wishes, shelf and an open chore – a lot more. Either the Taler screen belongs to the middle stage, or the matrix gets an exception for Taler. In the “Taler” screen the plus also covers the note at the bottom, and “Wunsch vorschlagen” runs past its button. Both must be fixed before the App Store.

## The tab bar

### LeistePhone

Source: `packages/design-system/components/leiste/LeistePhone.jsx`

Die Leiste am unteren Rand des iPhones – fünf Plätze, nur das Plus tritt heraus.

```jsx
<LeistePhone aktiverOrt="Woche" onWahl={setOrt} onPlus={schnellAnlegen} />
```

Der aktive Ort ist rosa unterstrichen, der Eingang trägt seinen rosa Zaehler. Zielfläche 44 px, das Plus 56 px – es wird auch von Kindern gedrückt.

```ts
/**
 * Die schwarze Leiste unten am iPhone: Heute, Woche, Plus, Eingang, Ich.
 */
export interface LeistePhoneProps {
  aktiverOrt?: string;
  plaetze?: Array<{ name: string; zeichen: string; zaehler?: number; plus?: boolean }>;
  onWahl?: (ort: string) => void;
  onPlus?: () => void;
  style?: React.CSSProperties;
}
export function LeistePhone(props: LeistePhoneProps): JSX.Element;
export const PLAETZE: Array<{ name: string; zeichen: string; zaehler?: number; plus?: boolean }>;
```

The bar stays put while scrolling and is never translucent. A toast sits above it, never on it. The counter on the inbox only counts what needs a decision.

## Gestures and interaction

- **Tapping** a card opens it. Proposal, not established: as a sheet from the bottom, with a grabber on top, closed by pulling down.
- **Tapping a day circle** switches the day. Swiping between days is a proposal, not established.
- **Ticking off** is a tap on the circle on the left, 44 pt, 56 pt for children. Ticked items are struck through and stay until the day is over.
- **Every change** shows immediately and reports with a toast and “Rückgängig” (Undo).
- **Plus** opens the quick menu: event, task, drive, scan document, contact, note.
- **Voice input** for homework and events runs on the device.

No swipe to delete without a way back. Anything that cannot be undone is asked first.

## Roles on the iPhone

| Role | First page | What is missing |
|---|---|---|
| Anna, Tobias | Today by urgency | – |
| Felix (middle) | school folder, take-along list, ask for a ride | safe, vault, finances, other people’s resolutions |
| Lena (small) | what’s now, two things | times only where she can read them; everything locked |
| Oma Grete (guest) | three cards: invited events, album, “Ich kann fahren” (I can drive) | bar, menu, settings; type one step larger, targets 56 pt |
| Sofia (au pair) | her list: today’s shifts, her drives, shopping | parents’ events, finances, documents, other people’s tasks |

> **Open**
>
> There is no screen yet for guests and the au pair. Whether they see the bar is not decided. Proposal from matrix III: guests without a bar, Sofia with a bar but only Today and Me.

## Every surface on the iPhone

![Today: Guten Abend, Anna. Handball tournament, ride home with Oma Grete, pasta, and above them a toast with Undo](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![Week: video call with Sofia in São Paulo with two times, fuel in Zurich in CHF and euros](https://brand.heyalbert.family/bilder/screens/Ueberall.png)

*Ueberall · iphone · 780 × 1688 px*

![Inbox: two scanned pages, parents’ letter about the class trip as a suggestion with sender, amount, deadline and filing place](https://brand.heyalbert.family/bilder/screens/Eingang.png)

*Eingang · iphone · 780 × 1688 px*

![Food: plan Monday to Sunday, Saturday without a cook yet, Albert suggests Tobias](https://brand.heyalbert.family/bilder/screens/Essensplan.png)

*Essensplan · iphone · 780 × 1688 px*

![Shopping list sorted by aisle, nine items still missing](https://brand.heyalbert.family/bilder/screens/Einkauf.png)

*Einkauf · iphone · 780 × 1688 px*

![Felix’s folder with three homework items and a study slot as a suggestion](https://brand.heyalbert.family/bilder/screens/Schule.png)

*Schule · iphone · 780 × 1688 px*

![Deadlines: car insurance with a cancellation draft, Lena’s child ID, Felix’s dental cover](https://brand.heyalbert.family/bilder/screens/MomentVersicherung.png)

*MomentVersicherung · iphone · 780 × 1688 px*

![Resolutions of Tobias, Lena and Oma Grete with a tick per day](https://brand.heyalbert.family/bilder/screens/Gewohnheiten.png)

*Gewohnheiten · iphone · 780 × 1688 px*

![Family Feed with a photo of the lake and a comment from Oma Grete](https://brand.heyalbert.family/bilder/screens/FamilyFeed.png)

*FamilyFeed · iphone · 780 × 1688 px*

![Lena has ticked off her take-along list for swimming, below Arrived and Ask for a ride](https://brand.heyalbert.family/bilder/screens/MomentTurnbeutel.png)

*MomentTurnbeutel · iphone · 780 × 1688 px*

![Lena’s Taler: 14 Taler, wishes, parents’ shelf, open chore](https://brand.heyalbert.family/bilder/screens/Taler.png)

*Taler · iphone · 780 × 1688 px*

## What the iPhone does not have

- The seven-day week board as a grid. On the iPhone the week is a list or a glance.
- Editing safe, vault and finances. Reading yes, deadlines yes, editing on the Mac.
- Mail rules, roles and rights, timetable editing.
- A sidebar or hamburger menu.
- A redrawn status bar in mock-ups. The frame in `ui_kits/iphone/PhoneRahmen.jsx` leaves it out on purpose.