# Zeichen

> Ein Satz aus Strichzeichen, eingefärbt über die Textfarbe. Feste Sach-Rollen sagen, was eine Sache ist – vom Auto für die Fahrt bis zum Fragezeichen für Alberts Vorschlag. Kein Emoji, nirgends.

Quelle: https://brand.heyalbert.family/zeichen/ · Hey Albert Marke und Designsystem

Zeichen sind bei uns Strichzeichen: 2 px Strich, runde Enden, keine Füllung. Ein Zeichen steht neben Text und macht ihn schneller erfassbar. Den Text ersetzt es nicht.

## Der Satz

| Zeichen | Sach-Rolle | Datei |
| --- | --- | --- |
| bell |  | https://brand.heyalbert.family/marke/zeichen/bell.svg |
| calendar |  | https://brand.heyalbert.family/marke/zeichen/calendar.svg |
| camera |  | https://brand.heyalbert.family/marke/zeichen/camera.svg |
| car-front | fahrt | https://brand.heyalbert.family/marke/zeichen/car-front.svg |
| chart-column |  | https://brand.heyalbert.family/marke/zeichen/chart-column.svg |
| check |  | https://brand.heyalbert.family/marke/zeichen/check.svg |
| chevron-down |  | https://brand.heyalbert.family/marke/zeichen/chevron-down.svg |
| chevron-left |  | https://brand.heyalbert.family/marke/zeichen/chevron-left.svg |
| chevron-right |  | https://brand.heyalbert.family/marke/zeichen/chevron-right.svg |
| circle-alert | konflikt | https://brand.heyalbert.family/marke/zeichen/circle-alert.svg |
| circle-check | ritual | https://brand.heyalbert.family/marke/zeichen/circle-check.svg |
| circle-plus |  | https://brand.heyalbert.family/marke/zeichen/circle-plus.svg |
| circle-question-mark | vorschlag | https://brand.heyalbert.family/marke/zeichen/circle-question-mark.svg |
| clock |  | https://brand.heyalbert.family/marke/zeichen/clock.svg |
| coins | taler | https://brand.heyalbert.family/marke/zeichen/coins.svg |
| cross | arzt | https://brand.heyalbert.family/marke/zeichen/cross.svg |
| file-text | dokument | https://brand.heyalbert.family/marke/zeichen/file-text.svg |
| gauge |  | https://brand.heyalbert.family/marke/zeichen/gauge.svg |
| globe |  | https://brand.heyalbert.family/marke/zeichen/globe.svg |
| graduation-cap | schule | https://brand.heyalbert.family/marke/zeichen/graduation-cap.svg |
| heart | freude | https://brand.heyalbert.family/marke/zeichen/heart.svg |
| house |  | https://brand.heyalbert.family/marke/zeichen/house.svg |
| inbox |  | https://brand.heyalbert.family/marke/zeichen/inbox.svg |
| link |  | https://brand.heyalbert.family/marke/zeichen/link.svg |
| lock |  | https://brand.heyalbert.family/marke/zeichen/lock.svg |
| mail |  | https://brand.heyalbert.family/marke/zeichen/mail.svg |
| message-circle |  | https://brand.heyalbert.family/marke/zeichen/message-circle.svg |
| message-square |  | https://brand.heyalbert.family/marke/zeichen/message-square.svg |
| moon |  | https://brand.heyalbert.family/marke/zeichen/moon.svg |
| music | musik | https://brand.heyalbert.family/marke/zeichen/music.svg |
| pencil |  | https://brand.heyalbert.family/marke/zeichen/pencil.svg |
| plus |  | https://brand.heyalbert.family/marke/zeichen/plus.svg |
| scan-line |  | https://brand.heyalbert.family/marke/zeichen/scan-line.svg |
| search |  | https://brand.heyalbert.family/marke/zeichen/search.svg |
| shopping-basket | einkauf | https://brand.heyalbert.family/marke/zeichen/shopping-basket.svg |
| sliders-horizontal |  | https://brand.heyalbert.family/marke/zeichen/sliders-horizontal.svg |
| star |  | https://brand.heyalbert.family/marke/zeichen/star.svg |
| sticky-note | notiz | https://brand.heyalbert.family/marke/zeichen/sticky-note.svg |
| sun |  | https://brand.heyalbert.family/marke/zeichen/sun.svg |
| table |  | https://brand.heyalbert.family/marke/zeichen/table.svg |
| undo-2 |  | https://brand.heyalbert.family/marke/zeichen/undo-2.svg |
| user-plus |  | https://brand.heyalbert.family/marke/zeichen/user-plus.svg |
| user |  | https://brand.heyalbert.family/marke/zeichen/user.svg |
| users | familie | https://brand.heyalbert.family/marke/zeichen/users.svg |
| utensils | essen | https://brand.heyalbert.family/marke/zeichen/utensils.svg |
| volleyball | sport | https://brand.heyalbert.family/marke/zeichen/volleyball.svg |
| waves-ladder | schwimmen | https://brand.heyalbert.family/marke/zeichen/waves-ladder.svg |

Jedes Zeichen lässt sich als SVG herunterladen. Alle zusammen liegen im Paket:

- [Zeichen (SVG)](https://brand.heyalbert.family/downloads/hey-albert-zeichen.zip)

> **Offen: Lucide ist eine Übergangslösung**
>
> Für Hey Albert wurde nie ein eigener Zeichensatz geliefert. Die Referenz-Screens zeigen Zeichen in der Art von SF Symbols. Als nächster Treffer ist der Satz **Lucide** eingezogen (ISC-Lizenz). Das ist eine Substitution. Sie muss bestätigt oder gegen den echten Satz getauscht werden. In der Apple-App stehen bis dahin SF Symbols.

## Sach-Rollen

Manche Zeichen haben eine feste Bedeutung. Das Zeichen sagt, was für eine Sache eine Karte ist. Diese Zuordnung wird nicht getauscht.

| Zeichen | Sach-Rolle | Datei |
| --- | --- | --- |
| car-front | fahrt | https://brand.heyalbert.family/marke/zeichen/car-front.svg |
| circle-alert | konflikt | https://brand.heyalbert.family/marke/zeichen/circle-alert.svg |
| circle-check | ritual | https://brand.heyalbert.family/marke/zeichen/circle-check.svg |
| circle-question-mark | vorschlag | https://brand.heyalbert.family/marke/zeichen/circle-question-mark.svg |
| coins | taler | https://brand.heyalbert.family/marke/zeichen/coins.svg |
| cross | arzt | https://brand.heyalbert.family/marke/zeichen/cross.svg |
| file-text | dokument | https://brand.heyalbert.family/marke/zeichen/file-text.svg |
| graduation-cap | schule | https://brand.heyalbert.family/marke/zeichen/graduation-cap.svg |
| heart | freude | https://brand.heyalbert.family/marke/zeichen/heart.svg |
| music | musik | https://brand.heyalbert.family/marke/zeichen/music.svg |
| shopping-basket | einkauf | https://brand.heyalbert.family/marke/zeichen/shopping-basket.svg |
| sticky-note | notiz | https://brand.heyalbert.family/marke/zeichen/sticky-note.svg |
| users | familie | https://brand.heyalbert.family/marke/zeichen/users.svg |
| utensils | essen | https://brand.heyalbert.family/marke/zeichen/utensils.svg |
| volleyball | sport | https://brand.heyalbert.family/marke/zeichen/volleyball.svg |
| waves-ladder | schwimmen | https://brand.heyalbert.family/marke/zeichen/waves-ladder.svg |

Im Code heißt das Zeichen nach seiner Rolle, nicht nach seiner Datei: `<Icon name="fahrt" />` statt `<Icon name="car-front" />`. So bleibt die Bedeutung an einer Stelle, im Bauteil `Icon`.

## Wie Zeichen stehen

- **Im Kartenkopf** steht das Zeichen der Sache links in einem hellen Kreis: 26 px auf dem Mac, 24 px auf dem iPhone (Bauteil `SachSymbol`). Rechts stehen die Punkte der Menschen. Sonst nichts im Kopf.
- **Eingefärbt** wird über `currentColor`. Das Zeichen trägt die Textfarbe seines Elternteils. So schaltet es mit dem Modus um und kommt in Screenshots und Exporten mit.
- **Inline gerendert**, nie als Bild-URL. Die Pfade liegen in `components/bausteine/zeichen.js`, Quelle bleiben die SVG-Dateien in `assets/icons/`.
- **Dekorativ** ohne `titel`: Das Zeichen bekommt `aria-hidden`, weil der Text daneben steht. Steht ein Zeichen allein, etwa in einem runden Knopf, braucht es einen `titel` oder ein Label am Knopf.

### Icon

Quelle: `packages/design-system/components/bausteine/Icon.jsx`

Ein Zeichen aus dem Lucide-Satz — für alles, was ein Symbol braucht.

```jsx
<Icon name="fahrt" groesse={16} titel="Fahrt" />
```

- `name` nimmt eine Sach-Rolle (`fahrt`, `schule`, `sport`, `essen`, `arzt`, `musik`, `freude`, `familie`, `ritual`, `schwimmen`, `vorschlag`) oder direkt einen Lucide-Dateinamen (`bell`, `search`, `plus`).
- Das Zeichen wird inline gerendert und über `stroke: currentColor` eingefärbt — es trägt also die Textfarbe seines Elternteils und kommt in Screenshots und Exporten mit.
- Quelle sind die Dateien in `assets/icons/`; `components/bausteine/zeichen.js` hält ihren Pfad-Inhalt. Kommt ein Zeichen dazu: Datei nach `assets/icons/` legen und `zeichen.js` neu erzeugen — nie ein SVG von Hand zeichnen.
- Ohne `titel` ist das Zeichen dekorativ (`aria-hidden`) — richtig, weil neben jedem Zeichen Text steht.

```ts
/** Zeichen aus dem Lucide-Satz, inline gerendert und über `stroke` eingefärbt. */
export interface IconProps {
  /** Sach-Rolle ("fahrt", "schule", "essen", "familie", "ritual", "vorschlag", ...) oder Lucide-Dateiname ("bell"). */
  name: string;
  /** Kantenlänge in px. Standard 16. */
  groesse?: number;
  /** Strichstärke. Standard 2 — wie im Satz. */
  strich?: number;
  /** Strichfarbe. Standard currentColor. */
  farbe?: string;
  /** Wenn gesetzt, wird das Zeichen für VoiceOver benannt; sonst ist es dekorativ. */
  titel?: string;
  style?: React.CSSProperties;
}
export function Icon(props: IconProps): JSX.Element | null;
export const SACHEN: Record<string, string>;
```

### SachSymbol

Quelle: `packages/design-system/components/bausteine/SachSymbol.jsx`

Der helle Kreis mit dem Zeichen der Sache – immer links im Kartenkopf, nie woanders.

```jsx
<SachSymbol art="fahrt" titel="Fahrt" />
```

Was für eine Sache es ist, sagt dieses Symbol; wer dabei ist, sagen die Punkte rechts (`Punktgruppe`); was für eine Art es ist, sagt die Kartenfarbe. Kein Menü, kein Chevron im Kopf.

```ts
/** Zeichen der Sache in einem hellen Kreis - steht links im Kartenkopf. */
export interface SachSymbolProps {
  /** Sach-Rolle: "fahrt" | "schule" | "sport" | "essen" | "arzt" | "musik" | "freude" | "familie" | "ritual" | "vorschlag" | "schwimmen". */
  art?: string;
  /** Kreisdurchmesser in px. Standard 26 (Mac), 24 auf dem iPhone. */
  groesse?: number;
  /** Auf farbigen Karten - haelt den Kreis hell. */
  aufFarbe?: boolean;
  titel?: string;
  style?: React.CSSProperties;
}
export function SachSymbol(props: SachSymbolProps): JSX.Element;
```

## Keine Emoji

Es gibt keine Emoji. Nicht in der App, nicht auf der Website, nicht in Social Media, nicht in Mails. Auch keine Unicode-Zeichen als Ersatz für ein Zeichen, etwa Sterne, Häkchen oder Pfeile aus der Schrift.

Als Textzeichen erlaubt sind genau vier:

| Zeichen | Wofür | Beispiel |
|---|---|---|
| `→` | von – nach, in Fahrten | Sportplatz Nord → Zuhause |
| `·` | Trenner in einer Zeile | 16:40 · Handball, Halle Süd |
| `›` | Ablagepfad | Wichtiges › Versicherungen |
| `–` | Halbgeviertstrich, mit Leerzeichen | 14:00 – 14:30 |

## Ein Zeichen fehlt

Kein eigenes Zeichnen. Fehlt ein Zeichen, wird es aus demselben Satz geholt:

1. Die SVG-Datei aus dem Satz nach `packages/design-system/assets/icons/` legen.
2. `components/bausteine/zeichen.js` neu erzeugen.
3. Braucht das Zeichen eine Bedeutung, die Sach-Rolle in `SACHEN` im Bauteil `Icon` eintragen.

## Kurz

> **So**
>
> - Zeichen neben Text, in der Textfarbe.
> - Sach-Rolle statt Dateiname.
> - Allein stehende Zeichen mit Label.

> **Nicht so**
>
> - Emoji, auch nicht „nur in Social Media“.
> - Gefüllte Zeichen, andere Strichstärken, zweifarbige Zeichen.
> - Ein selbst gezeichnetes Zeichen oder eines aus einem anderen Satz.
> - Ein Menü oder einen Pfeil im Kartenkopf.