# Form

> Radien aus fünf Stufen, Linien, die etwas bedeuten, und Tiefe ohne Schatten – aus Schleier, Kontur und Kippung. Dazu Klebezettel, spielerische Formen und die Anatomie einer Karte.

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

Die Formen von Hey Albert sind weich und flach. Alles ist Papier auf Papier. Nichts glänzt, nichts wirft Schatten.

## Radien

Fünf Radien, jeder mit einer Aufgabe. Was keinen Token hat, hat keinen Radius.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| radius-karte | var(--radius-karte) | 16px |  | Karten und Menüs |
| radius-klein | var(--radius-klein) | 12px |  | Tagesreiter, kleine Karten |
| radius-leiste | var(--radius-leiste) | 24px |  | iPhone-Leiste |
| radius-block | var(--radius-block) | 22px |  | Mac-Block |
| radius-pille | var(--radius-pille) | 999px |  | Pillen, Kreise, Knöpfe |

- `--radius-karte` für Karten, Menüs, Dialoge.
- `--radius-klein` für Tagesreiter und kleine Karten.
- `--radius-leiste` für die iPhone-Leiste, `--radius-block` für den schwarzen Block der Mac-Leiste.
- `--radius-pille` für Pillen, Kreise und alle Knöpfe. Knöpfe sind bei uns immer rund.

## Linien bedeuten etwas

Eine Linie ist bei uns nie Schmuck. Die Art des Rands sagt, in welchem Zustand eine Sache ist.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| strich-haar | var(--strich-haar) | 1px |  |  |
| strich-stark | var(--strich-stark) | 1.5px |  | Kontur wird stark, statt Schatten |
| strich-gestrichelt | var(--strich-gestrichelt) | 1.5px |  |  |
| muster-gestrichelt | var(--muster-gestrichelt) | 5px 4px |  |  |
| kippung-zettel | var(--kippung-zettel) | 0.3deg |  | was liegt, ist leicht gekippt |
| kippung-null | var(--kippung-null) | 0deg |  | was schwebt, steht gerade |
| schatten | var(--schatten) | none |  | nicht verhandelbar |
| fokus-ring | var(--fokus-ring) | 2px |  |  |
| fokus-abstand | var(--fokus-abstand) | 2px |  |  |

| Rand | Heißt | Tokens |
|---|---|---|
| durchgezogen, Haarlinie | ruhiges Feld, alles geklärt | `--strich-haar`, `--linie-haar` |
| durchgezogen, Kontur | der Zeiger liegt darauf | `--strich-stark`, `--linie-stark` |
| gestrichelt grau | Vorschlag von Albert, noch nicht übernommen | `--strich-gestrichelt`, `--muster-gestrichelt`, `--rand-vorschlag` |
| gestrichelt Offen-Rosa | ohne Zuständigen | `--rand-offen` |
| gestrichelt dünn | Bereichs-Chip im Kopf der Fläche | `--strich-haar` |
| Ring mit Abstand | Fokus über die Tastatur | `--fokus-ring`, `--fokus-abstand`, `--rand-fokus` |

Haarlinien sind immer `--strich-haar`. Das Strichmuster ist überall dasselbe: `--muster-gestrichelt`.

## Keine Schatten

Es gibt keine Schatten. Nicht unter Karten, nicht unter Menüs, nicht unter Knöpfen. Der Token `--schatten` steht auf `none` und ist nicht verhandelbar.

Tiefe entsteht aus drei Mitteln:

1. **Der Schleier.** `--flaeche-schleier` dämpft, was hinter einem Dialog, einem Menü oder dem Scanner liegt.
2. **Die Kontur.** Was der Zeiger berührt, bekommt eine stärkere Linie: `--strich-haar` wird `--strich-stark`. Die Fläche bleibt gleich.
3. **Die Kippung.** Was liegt, ist leicht gekippt (`--kippung-zettel`). Was schwebt, steht gerade (`--kippung-null`). Klebezettel liegen, Menüs schweben.

> **Nicht so**
>
> `box-shadow`, `drop-shadow`, Tailwind-Klassen wie `shadow-md`, Milchglas, Unschärfe unter Karten, halbtransparente Karten, Verläufe als Tiefe.

## Klebezettel

Jeder Mensch hat seinen Zettel in seiner Personenfarbe. Avatare, Spuren je Mensch und die Zettel auf der Fläche „Heute“ sind Klebezettel.

- Fläche `--person-1` bis `--person-8`, Text `--person-text`.
- Leicht gekippt, abwechselnd nach links und rechts: `--kippung-zettel`.
- Immer mit Initiale oder Name. Farbe allein reicht nie.

## Spielerische Formen

Stern, Herz, Kleks, Kreis und Puzzleteil (Bauteil `DekoForm`) bringen Freude auf eine Fläche. Sie sind kein Schmuck für alles.

- Nur auf gelben und rosa Flächen.
- Immer in der dunkleren Stufe derselben Farbe: `--gelb-dunkel` auf Gelb.
- Angeschnitten am Rand der Fläche, nie mitten im Text.
- Nie auf Karten mit Bedienelementen, nie im Safe, nie bei Finanzen, nie im Register Sachbearbeiter.

### DekoForm

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

Die spielerische Form auf einer gelben oder rosa Fläche – Freude, kein Schmuck.

```jsx
<DekoForm form="stern" groesse={110} farbe="var(--gelb-dunkel)" style={{ right: -18, bottom: -22 }} />
```

Die Elternfläche braucht `position: relative` und `overflow: hidden`. Nie auf Karten mit Bedienelementen, nie im Safe, nie bei Finanzen.

```ts
/** Spielerische Form als Deko auf gelben und rosa Flaechen - Stern, Herz, Kleks, Puzzleteil. */
export interface DekoFormProps {
  form?: "stern" | "herz" | "kleks" | "kreis" | "puzzle";
  groesse?: number;
  /** Immer die dunklere Stufe derselben Flaechenfarbe: var(--gelb-dunkel), var(--blau-dunkel). */
  farbe?: string;
  drehung?: number;
  style?: React.CSSProperties;
}
export function DekoForm(props: DekoFormProps): JSX.Element;
```

## Die Anatomie einer Karte

Die Karte ist das Ding, aus dem Heute, Woche und Kalender bestehen. Sie hat immer denselben Aufbau.

- **Fläche** nach Art: Termin `--flaeche-karte`, Fahrt `--flaeche-karte-fahrt`, Familie `--flaeche-karte-familie`, Vorschlag `--flaeche-karte-vorschlag` mit grauem gestricheltem Rand, Offen mit gestricheltem Rand in Offen-Rosa.
- **Radius** `--radius-karte`, **Polster** `--karte-innen`, **Abstand** zur nächsten Karte `--karte-abstand`.
- **Rand:** eine Haarlinie als Platzhalter für die Kontur. Kein Schatten.
- **Kopf:** links das Symbol der Sache im hellen Kreis, rechts die Punkte der Menschen. Dazwischen nichts, kein Menü, kein Pfeil.
- **Titel** in `--grad-karten-titel`, darunter Zeit und Ort in `--grad-zweit`.
- **Pillen** für Zustände, zum Beispiel „Kein Fahrer“.
- **Knöpfe** unten, in einer `Knopfreihe`. Ein Vorschlag hat immer zwei: „Übernehmen“ und „Rückgängig“, oder eine Frage mit zwei Antworten.

Drei Träger an drei Orten: Die Kartenfarbe sagt die Art. Das Symbol sagt die Sache. Die Punkte sagen die Leute.

### Karte

Quelle: `packages/design-system/components/karten/Karte.jsx`

Die Karte – das Ding, aus dem Heute, Woche und Kalender bestehen. Ein Datenmodell, viele Ansichten.

```jsx
<Karte art="fahrt" titel="Rückfahrt Auswärtsspiel" ort="Sportplatz Nord → Zuhause"
  zeit="14:00 – 14:30" leute={["felix"]} hoehe="hoch"
  pillen={<ZustandsPille>Kein Fahrer</ZustandsPille>}
  knoepfe={<Knopf>Ich fahre</Knopf>} />

<Karte art="vorschlag" titel="Bei Tobias steht ab 13:00 nichts. Fragen?"
  unterzeile="Vorschlag von Albert"
  knoepfe={<KarteVorschlagKnoepfe onUebernehmen={…} onZurueck={…} />} />
```

Register Family Manager, kurz und ruhig. Die Bedeutungen werden nicht getauscht: blau ist Fahrt, gelb ist Familie, gestrichelt rosa heisst "ohne Zuständigen". Ein Vorschlag hat immer zwei Knöpfe – Albert erledigt nie still.

```ts
/**
 * Die Karte in fuenf Arten. Die Farbe sagt die Art, das Symbol die Sache, die Punkte die Leute.
 */
export interface KarteProps {
  /** "termin" beige | "fahrt" blau | "familie" gelb | "vorschlag" gestrichelt grau | "offen" gestrichelt rosa. */
  art?: "termin" | "fahrt" | "familie" | "vorschlag" | "offen";
  /** Kartentitel, ein Gegenstand: "Rückfahrt Auswärtsspiel". */
  titel: string;
  /** Zweitzeile: Ort oder Bündel-Teile, mit " · " getrennt. */
  ort?: React.ReactNode;
  /** Zeitspanne als "16:00 – 17:00" (Halbgeviertstrich mit Leerzeichen). */
  zeit?: string;
  /** Wer dabei ist; der Zustaendige zuerst. */
  leute?: string[];
  /** Sach-Symbol, wenn es nicht aus der Art folgt: "schule", "sport", "arzt", "musik". */
  symbol?: string;
  /** "kurz" (78 px) oder "hoch" (132 px) - fuer das Stundenraster. */
  hoehe?: "kurz" | "hoch";
  /** Zustands- und Fahrt-Pillen. */
  pillen?: React.ReactNode;
  /** Handlungsknoepfe; bei Vorschlaegen immer zwei. */
  knoepfe?: React.ReactNode;
  /** Kleine Zeile unter dem Inhalt, z. B. "Vorschlag von Albert". */
  unterzeile?: React.ReactNode;
  /** Einzeiler fuer Listen: Symbol, Titel, Zeit, Punkt. */
  kompakt?: boolean;
  klickbar?: boolean;
  /** Leicht gekippt, wie ein liegender Klebezettel. */
  gekippt?: boolean;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Karte(props: KarteProps): JSX.Element;
export function KarteVorschlagKnoepfe(props: { uebernehmen?: string; zurueck?: string; onUebernehmen?: () => void; onZurueck?: () => void }): JSX.Element;
```

## Kurz

> **So**
>
> - Radius aus den fünf Tokens.
> - Zustand über die Art des Rands zeigen.
> - Tiefe über Schleier, Kontur und Kippung.

> **Nicht so**
>
> - Schatten in jeder Form.
> - Freie Radien wie `rounded-[10px]`.
> - Spielerische Formen auf Karten mit Knöpfen.
> - Eckige Knöpfe.