# Space
> The 8 px grid, the paddings and margins measured from the reference screens, the sidebars and the three target sizes for pointer, finger and children’s hands.
Source: https://brand.heyalbert.family/en/raum/ · Hey Albert brand and design system
Everything sits on an 8 px grid. The half step of 4 px is allowed when two things belong tightly together. Other spacings do not exist.
## The grid
| Token | CSS | Value | Dark | Meaning |
| --- | --- | --- | --- | --- |
| 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 | For |
|---|---|
| `--raum-halb` | between an icon and its text, between dots |
| `--raum-1` | between pills, between buttons in a row |
| `--raum-2` | between groups inside a card, between tabs |
| `--raum-3` | between sections of a surface |
| `--raum-4` | the margin of a surface on the Mac |
| `--raum-5` to `--raum-8` | large sections, mostly on the website |
## Padding and margins
These measures were taken from the reference screens. They apply in the app and on the website.
- **Card padding** `--karte-innen`: from the card edge to its content.
- **Card gap** `--karte-abstand`: between two cards, horizontally and vertically.
- **Surface margin, Mac** `--flaeche-rand-mac`: between sidebar and content, and all round.
- **Surface margin, iPhone** `--flaeche-rand-phone`: left and right.
There is no token for the iPad yet. The [iPad](/en/ipad/) chapter describes the proposal.
## Sidebars
The sidebar is Hey Albert’s black signature.
- **Mac:** fully expanded `--leiste-mac` wide, collapsed `--leiste-mac-eng`. Collapsed, only Albert’s ball and the place icons remain.
- **iPhone:** `--leiste-phone-hoehe` tall, fixed at the bottom, with radius `--radius-leiste`. The pink plus sticks out.
More in the [Mac](/en/mac/) and [iPhone](/en/iphone/) chapters.
## Target sizes
Every element you can operate has a minimum size. Never below it, not even in dense lists.
| Token | CSS | Value | Dark | Meaning |
| --- | --- | --- | --- | --- |
| ziel-zeiger | var(--ziel-zeiger) | 28px | | |
| ziel-finger | var(--ziel-finger) | 44px | | |
| ziel-kind | var(--ziel-kind) | 56px | | |
- **Pointer, 28:** Mac with mouse or trackpad. Precise, therefore small.
- **Finger, 44:** iPhone and iPad. That is Apple’s minimum for touch.
- **Child, 56:** everything children operate. Small hands are less precise. The type grows with it, so the button does not look clumsy, just bigger.
The test question for every view: could a nine-year-old use it alone? Lena is nine. If she misses her checkmark, the target is too small.
### Knopf
Source: `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;
```
## Phone and desktop
`--umbruch-tisch` is the line between phone and desktop. Below it the phone layout applies, above it the desktop layout. The token exists only as a Tailwind breakpoint, not as a CSS variable.
Most website visits come from a phone. So every surface is built for the phone first.
## In short
> **Do**
>
> - Every spacing is a `--raum-…` token or a measured value like `--karte-innen`.
> - Choose target sizes by device and person: pointer, finger, child.
> **Don't**
>
> - Spacings like 10, 14 or 18 px.
> - Buttons below the target size “because space is tight”.
> - A custom margin per surface.