# Imagery

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

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

Our images are calm and warm. Paper, not glass. No gradients, no shadows, hairlines. We show what Hey Albert does instead of claiming it.

## The product is the subject

The real week board with two open items and one suggestion convinces more than any sentence about “overview”. So our most important image is a screen of the Sonntag family.

![The Sonntag family’s week board on the Mac, Wednesday 3 September](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

Screens sit on flat device frames:

- **No gloss.** No reflection, no perspective, no 3D.
- **Cropped** rather than floating at an angle.
- **One device, one statement.** A stack of Mac and iPhone shows that the same things appear everywhere.

![Main](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![Eingang](https://brand.heyalbert.family/bilder/screens/Eingang.png)

*Eingang · iphone · 780 × 1688 px*

![Taler](https://brand.heyalbert.family/bilder/screens/Taler.png)

*Taler · iphone · 780 × 1688 px*

![LenaBereich](https://brand.heyalbert.family/bilder/screens/LenaBereich.png)

*LenaBereich · ipad · 1668 × 2388 px*

![Watch](https://brand.heyalbert.family/bilder/screens/Watch.png)

*Watch · watch · 792 × 968 px*

![Haushalt](https://brand.heyalbert.family/bilder/screens/Haushalt.png)

*Haushalt · mac · 2880 × 1800 px*

All screens as full-resolution PNG:

- [Sonntag family screens (PNG)](https://brand.heyalbert.family/downloads/hey-albert-screens.zip)

## Drawing

Everything that is not a screen is our own drawing: flat ink, monoline, round ends. In it exactly **one** yellow accent, as a surface, never as text.

- Subjects are real situations: the hallway at 7:38, the gym bag on its hook, the dinner table on Sunday, the car, the supermarket.
- Homes are lived in, not tidied. A spotless kitchen does not speak to our family.
- Children **do** something: tick off, add, decide together. They are never shown being looked after.
- The person colours are also the colours of the drawings. Anyone who knows Anna recognises her colour.

> **Open: the drawings do not exist yet**
>
> The homepage has three places for ink drawings. They are marked with the `Bildplatz` component until the drawings exist. Neither a stock image nor a generated image replaces them.

## One photo, one object

- **Exactly one real photo:** the founder, in the section “Wer dahinter steht” (who is behind it). No other photos of people.
- **One physical object:** the printed yearbook (*Jahresbuch*), open, from above.

![The Sonntag family’s yearbook, open](https://brand.heyalbert.family/bilder/screens/Jahresbuch.png)

*Jahresbuch · objekt · 2246 × 1588 px*

## Albert as a character

In pictures Albert is a wizard; in tone he is the family manager. He is an ink drawing, not a mascot. He appears sparingly:

- small in the website header, at the step “Sagen” (say it), in the children’s area;
- in onboarding, empty states, briefings, the Sunday round and the yearbook.

He never appears in lists, tables, the safe, finances, system surfaces, pricing, FAQs or trust sections.

## What we show and what we never show

**We show**

- real screens of the Sonntag family on flat device frames
- flat ink drawings with exactly one yellow accent
- exactly one real photo: the founder
- one physical object: the printed yearbook

**We never show**

- children’s faces
- stock photos
- AI-generated images
- gloss, perspective, 3D devices
- carousels, autoplay video
- real family data

And from the brand:

- No exhausted parents and no piles of notes. We do not sell a problem.
- No screens without context.
- No people staring at a phone while someone is talking.
- No progress bars, rankings or other people’s coin balances, not even as decoration.

> **Open: photos of children**
>
> `docs/21-marke-und-stimme.md` (I.7) allows real children with revocable consent and says “when in doubt, we draw”. The design system and `regeln.json` exclude children’s faces and allow a single photo, the founder’s. Until decided, the stricter rule applies: no children’s faces.

## Making screenshots

Every screen shows the Sonntag family in their week: Mon 1 to Sun 7 September, today is Wednesday the 3rd. Never a real family, never real names, never real addresses.

- **Content:** an honest week. Two items without anyone responsible, one suggestion from Albert. A board with nothing open looks staged.
- **Mode:** light. Dark mode only where dark mode itself is the topic.
- **Status bar:** no imitation of a foreign status bar on mock-ups.
- **Sizes** at double resolution, as in `apps/site/bilder`:

| Device | Pixels | Points | Screens |
|---|---|---|---|
| Mac | 2880 × 1800 | 1440 × 900 | Wochenboard, Haushalt, Safe, Anlass, Aufgaben, FamilyFeedMac |
| iPhone | 780 × 1688 | 390 × 844 | Main, Eingang, Einkauf, Essensplan, Schule, Taler, … |
| iPad portrait | 1668 × 2388 | 834 × 1194 | LenaBereich, Rueckblick |
| Watch | 792 × 968 | 396 × 484 | Watch |

## Files for the website

- **Source:** full-resolution PNG in `apps/site/bilder/`. They stay as fallback and for preview images.
- **Served:** AVIF with WebP fallback, each at 480, 720, 1080 px and full width. Generated with `python3 tooling/bilder-optimieren.py`, which only recomputes when the PNG is newer.
- **The first image** on a page has no fade-in and is preloaded so it appears fast.
- **Preview images** for shared links: 1200 × 630 per language, generated with `tooling/og-bilder.py`.

| Language | File |
| --- | --- |
| bg | https://brand.heyalbert.family/bilder/og/og-bg.png |
| da | https://brand.heyalbert.family/bilder/og/og-da.png |
| de | https://brand.heyalbert.family/bilder/og/og-de.png |
| en | https://brand.heyalbert.family/bilder/og/og-en.png |
| es | https://brand.heyalbert.family/bilder/og/og-es.png |
| fr | https://brand.heyalbert.family/bilder/og/og-fr.png |
| it | https://brand.heyalbert.family/bilder/og/og-it.png |
| no | https://brand.heyalbert.family/bilder/og/og-no.png |
| pl | https://brand.heyalbert.family/bilder/og/og-pl.png |
| sv | https://brand.heyalbert.family/bilder/og/og-sv.png |
| tr | https://brand.heyalbert.family/bilder/og/og-tr.png |

## Alt text

Every image has alt text. It says what the image shows, not how nice it is.

> **Do**
>
> “The Sonntag family’s week board on the Mac. Friday, 16:40: the drive to handball has no driver yet.”

> **Don't**
>
> “Screenshot”, “image”, “Hey Albert app dashboard”, an empty alt text on an image that says something.

Drawings that only decorate get `alt=""`. A screen always says something, so it always gets text.