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

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

The logo is a scribble ball with a face: a few strokes in ink, one in pink, and inside two big eyes and a smile. It looks as if someone drew it in the margin of a notebook. That is the point. Hey Albert lives in the „notebook“ (*Notizbuch*) world: warm paper, ink, a highlighter for what matters.

## Versions

All versions are derived from the delivered file and cut out. Always use the standard version unless the background calls for another.

| Version | Size | Weight | File |
| --- | --- | --- | --- |
| logo-albert-256 | 256 × 256 px | 32 KB | https://brand.heyalbert.family/marke/logos/logo-albert-256.png |
| logo-albert-auf-schwarz | 912 × 912 px | 76 KB | https://brand.heyalbert.family/marke/logos/logo-albert-auf-schwarz.png |
| logo-albert-hell | 1024 × 1024 px | 23 KB | https://brand.heyalbert.family/marke/logos/logo-albert-hell.png |
| logo-albert-mono | 912 × 912 px | 66 KB | https://brand.heyalbert.family/marke/logos/logo-albert-mono.png |
| logo-albert | 912 × 912 px | 77 KB | https://brand.heyalbert.family/marke/logos/logo-albert.png |

- **Standard, ink and pink** — on cream, card and all light surfaces. The first choice.
- **Single colour** — where only one colour works: stamps, embossing, one-colour print.
- **On black** — on the black sidebar and on dark surfaces. The eyes stay light, the pupils dark.
- **Small, 256 px** — for avatar, sidebar and email header. Do not enlarge.
- **Original in dark green** — the delivered source file. Archive only, never in use.

## Wordmark

The wordmark is the name „Hey Albert“ set in Bricolage Grotesque, weight `--gewicht-titel`, tightly tracked with `--laufweite-titel`. It is set as text, not as an image. That keeps it sharp, searchable and readable aloud.

| Version | Size | Weight | File |
| --- | --- | --- | --- |
| logo-albert-256 | 256 × 256 px | 32 KB | https://brand.heyalbert.family/marke/logos/logo-albert-256.png |
| logo-albert-auf-schwarz | 912 × 912 px | 76 KB | https://brand.heyalbert.family/marke/logos/logo-albert-auf-schwarz.png |
| logo-albert-hell | 1024 × 1024 px | 23 KB | https://brand.heyalbert.family/marke/logos/logo-albert-hell.png |
| logo-albert-mono | 912 × 912 px | 66 KB | https://brand.heyalbert.family/marke/logos/logo-albert-mono.png |
| logo-albert | 912 × 912 px | 77 KB | https://brand.heyalbert.family/marke/logos/logo-albert.png |

- **In the Mac sidebar** the wordmark is written out in full.
- **Collapsed**, the sidebar shows only the ball in a cream circle.
- **Under the wordmark** the claim may appear: „Er kümmert sich. Ihr dürft Familie sein.“ Without the wordmark next to it, it reads „Hey Albert. Er kümmert sich. Ihr dürft Familie sein.“ — otherwise the „Er“ (*he*) has nothing to refer to.

## Backgrounds

The logo sits on a calm, flat background. Good choices are `--grund`, `--karte`, `--hell`, and `--schwarz` for the on-black version. On yellow, pink or blue only the standard version, and only when the surface is large and calm.

The logo never sits on photos. Hey Albert shows exactly one photo, the founder, and that needs no logo.

## Clear space and minimum size

| Version | Size | Weight | File |
| --- | --- | --- | --- |
| logo-albert-256 | 256 × 256 px | 32 KB | https://brand.heyalbert.family/marke/logos/logo-albert-256.png |
| logo-albert-auf-schwarz | 912 × 912 px | 76 KB | https://brand.heyalbert.family/marke/logos/logo-albert-auf-schwarz.png |
| logo-albert-hell | 1024 × 1024 px | 23 KB | https://brand.heyalbert.family/marke/logos/logo-albert-hell.png |
| logo-albert-mono | 912 × 912 px | 66 KB | https://brand.heyalbert.family/marke/logos/logo-albert-mono.png |
| logo-albert | 912 × 912 px | 77 KB | https://brand.heyalbert.family/marke/logos/logo-albert.png |

> **Proposal, not decided**
>
> There is no fixed rule yet for clear space and minimum size. The proposal:
> 
> - **Clear space** all round of one quarter of the logo width. No text, edge or other mark inside it.
> - **Minimum size** 24 px on screen. Below that the eyes and strokes blur. Only the favicon is smaller, and it is drawn for that size.
> - **With the wordmark** the ball is as tall as capitals plus descender; the gap to the type is a quarter of the ball's width.
> 
> Until a decision is made, the proposal serves as a guideline.

## Misuse

The logo is a drawing. It is never changed, only scaled.

| Version | Size | Weight | File |
| --- | --- | --- | --- |
| logo-albert-256 | 256 × 256 px | 32 KB | https://brand.heyalbert.family/marke/logos/logo-albert-256.png |
| logo-albert-auf-schwarz | 912 × 912 px | 76 KB | https://brand.heyalbert.family/marke/logos/logo-albert-auf-schwarz.png |
| logo-albert-hell | 1024 × 1024 px | 23 KB | https://brand.heyalbert.family/marke/logos/logo-albert-hell.png |
| logo-albert-mono | 912 × 912 px | 66 KB | https://brand.heyalbert.family/marke/logos/logo-albert-mono.png |
| logo-albert | 912 × 912 px | 77 KB | https://brand.heyalbert.family/marke/logos/logo-albert.png |

> **Don't**
>
> - Distort, squash or stretch it.
> - Rotate or tilt it. Sticky notes may tilt, the logo may not.
> - Recolour it, not even in a person's colour.
> - Add an outline, shadow, gloss or 3D. Hey Albert has no shadows, anywhere.
> - Place it on busy backgrounds, patterns or gradients.
> - Make it translucent.
> - Redraw or re-scribble it. There is one drawing, and this is it.
> - Confuse the logo with the wizard. The wizard is the figure in the product; the ball is the brand's mark.

## App icon and favicon

For the website and the web app, the favicon and app icon already exist in ink and pink on cream. They live in `apps/site` and are copied onto this site.

> **Open: vector and native app icon**
>
> - **A vector version is missing.** All logos are PNGs derived from the delivered file. Print, large surfaces and animation need an SVG.
> - **The native app's icon** was fed by older vectors in dark green (`docs/22-gestaltung.md` §7). Those vectors are not in this repository. They need recolouring to ink and pink once the Apple app moves to `apps/apple`.
> - **The dark-mode and tinted iOS icon variants** have not been drawn yet.

## Download

- [Logos](https://brand.heyalbert.family/downloads/hey-albert-logos.zip)

The logos belong to Emma Rocket Ltd OOD. You may use them to report on Hey Albert. You may not alter them.