# Raum
> Das 8-px-Raster, die Polster und Ränder aus den Referenz-Screens, die Leisten und die drei Zielflächen für Zeiger, Finger und Kinderhände.
Quelle: https://brand.heyalbert.family/raum/ · Hey Albert Marke und Designsystem
Alles liegt auf einem Raster von 8 px. Der halbe Schritt von 4 px ist erlaubt, wenn zwei Dinge eng zusammengehören. Andere Abstände gibt es nicht.
## Das Raster
| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| 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) |
| Token | Wofür |
|---|---|
| `--raum-halb` | Abstand zwischen Zeichen und Text, zwischen Punkten |
| `--raum-1` | zwischen Pillen, zwischen Knöpfen einer Reihe |
| `--raum-2` | zwischen Gruppen in einer Karte, zwischen Reitern |
| `--raum-3` | zwischen Abschnitten einer Fläche |
| `--raum-4` | Rand der Fläche auf dem Mac |
| `--raum-5` bis `--raum-8` | große Abschnitte, vor allem auf der Website |
## Polster und Ränder
Diese Maße sind an den Referenz-Screens gemessen. Sie gelten in der App und auf der Website.
- **Kartenpolster** `--karte-innen`: der Abstand vom Kartenrand zum Inhalt.
- **Kartenabstand** `--karte-abstand`: zwischen zwei Karten, waagerecht und senkrecht.
- **Flächenrand Mac** `--flaeche-rand-mac`: zwischen Leiste und Inhalt, und rundum.
- **Flächenrand iPhone** `--flaeche-rand-phone`: links und rechts.
Auf dem iPad gilt bisher kein eigener Token. Das Kapitel [iPad](/ipad/) beschreibt den Vorschlag.
## Leisten
Die Leiste ist die schwarze Signatur von Hey Albert.
- **Mac:** voll ausgeklappt `--leiste-mac` breit, eingeklappt `--leiste-mac-eng`. Eingeklappt steht nur noch der Ball von Albert und die Zeichen der Orte.
- **iPhone:** `--leiste-phone-hoehe` hoch, fixiert am unteren Rand, mit Radius `--radius-leiste`. Das rosa Plus steht heraus.
Mehr dazu in den Kapiteln [Mac](/mac/) und [iPhone](/iphone/).
## Zielflächen
Jedes Element, das man bedienen kann, hat eine Mindestgröße. Darunter geht es nie, auch nicht in dichten Listen.
| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| ziel-zeiger | var(--ziel-zeiger) | 28px | | |
| ziel-finger | var(--ziel-finger) | 44px | | |
| ziel-kind | var(--ziel-kind) | 56px | | |
- **Zeiger, 28:** Mac mit Maus oder Trackpad. Präzise, darum klein.
- **Finger, 44:** iPhone und iPad. Das ist Apples Mindestmaß für Berührung.
- **Kind, 56:** alles, was Kinder bedienen. Kleine Hände treffen ungenauer. Die Schrift wächst mit, damit der Knopf nicht klobig wirkt, sondern einfach größer.
Die Prüffrage für jede Ansicht: Könnte eine Neunjährige sie allein benutzen? Lena ist neun. Wenn sie ihren Haken nicht trifft, ist die Fläche zu klein.
### Knopf
Quelle: `packages/design-system/components/bausteine/Knopf.jsx`
Der Handlungsknopf auf Karten und Flächen — schwarz für den einen Schritt, beige für den zweiten.
```jsx
Ich fahre
Später
Fertig
```
Register Family Manager: kurz, zupackend, ein Verb — „Ich fahre“, „Tobias fragen“, „Übernehmen“, „Rückgängig“. Nie „OK“, nie „Abbrechen“ ohne Gegenstand.
Ein Knopf ist immer einzeilig. Knöpfe stehen in einer `Knopfreihe`: nebeneinander, wenn beide Platz haben, sonst untereinander in voller Breite — nie ein zweizeiliger Knopf, nie zwei ungleich breite Knöpfe untereinander. `ziel="kind"` gibt 56 px mit 16-px-Schrift, wo Kinder bedienen. `inaktiv` rechnet eigene Rollen statt Deckkraft.
```ts
/**
* Handlungsknopf. Primär schwarz mit hellem Text („Ich fahre“), Zweitknopf beige („Später“),
* Klein ohne Fläche für Nebenwege. Schriftgrad und Polster wachsen mit der Zielfläche.
*/
export interface KnopfProps {
art?: "primaer" | "zweit" | "klein";
/** Zielfläche: Zeiger 32 / 12,5 px, Finger 44 / 14 px, Kind 56 / 16 px. */
ziel?: "zeiger" | "finger" | "kind";
/** Sach-Rolle oder Lucide-Name eines Zeichens links im Knopf. */
zeichen?: string;
/** Inaktiv ist eine eigene Rolle, keine Deckkraft. */
inaktiv?: boolean;
/** Füllt die Breite - für iPhone-Karten. */
breit?: boolean;
/** Erlaubt Zeilenumbruch in der Beschriftung. Standard aus: ein Knopf ist einzeilig;
* wird die Reihe zu eng, stapelt die Knopfreihe die Knöpfe in voller Breite. */
umbruch?: boolean;
type?: "button" | "submit" | "reset";
children?: React.ReactNode;
onClick?: (e: React.MouseEvent) => void;
style?: React.CSSProperties;
}
export function Knopf(props: KnopfProps): JSX.Element;
/** Die Knopfreihe: nebeneinander, wenn Platz ist, sonst untereinander in voller Breite. */
export interface KnopfreiheProps {
children?: React.ReactNode;
/** Mindestbreite je Knopf in px, ab der zwei nebeneinander passen. Standard 104. */
mindest?: number;
ausrichtung?: "mitte";
style?: React.CSSProperties;
}
export function Knopfreihe(props: KnopfreiheProps): JSX.Element;
```
## Handy und Tisch
`--umbruch-tisch` ist die Grenze zwischen Handy und Tisch. Darunter gilt das Handy-Layout, darüber das Tisch-Layout. Den Token gibt es nur als Tailwind-Umbruch, nicht als CSS-Variable.
Auf der Website kommen die meisten Besuche vom Handy. Deshalb wird jede Fläche zuerst für das Handy gebaut.
## Kurz
> **So**
>
> - Jeder Abstand ist ein `--raum-…`-Token oder ein gemessenes Maß wie `--karte-innen`.
> - Zielflächen nach Gerät und Mensch wählen: Zeiger, Finger, Kind.
> **Nicht so**
>
> - Abstände wie 10, 14 oder 18 px.
> - Knöpfe unter der Zielfläche, „weil der Platz knapp ist“.
> - Ein eigener Rand je Fläche.