# Design

Musubi gehört zur Familie von apps.zielke.studio (Patchcord, drop.two, drop.look): gleiche Typografie, gleiche Tonalität, gleiche Zurückhaltung – aber eine **eigene Farbwelt**. Die Farben kommen aus dem japanischen Färbehandwerk (Indigo/Ai-zome), passend zum Namen.

> Hinweis: Die Farben der anderen Apps ließen sich von der Website nicht automatisch auslesen. Vor dem Festlegen einmal nebeneinanderlegen und prüfen, dass Indigo sich klar abhebt.

## Leitidee

Ein Knoten verbindet Fäden. In Musubi werden Quellen und Ausgänge **geknüpft**: Die zentrale Ansicht zeigt links die Quellen, rechts Bildschirme und Kanäle, dazwischen Schnüre. Eine aktive Verbindung ist eine Indigo-Schnur mit kleinem Knoten an der Stelle, wo sie anliegt. Das ist das eine wiedererkennbare Element; alles andere bleibt ruhig.

## Farben

Regie-Räume sind dunkel. **Dunkel ist Standard**, hell ist unterstützt.

| Name | Rolle | Dunkel | Hell |
|---|---|---|---|
| Sumi (Tusche) | Hintergrund | `#14151B` | `#F4F4F6` |
| Kasumi (Dunst) | Flächen, Karten | `#1E2029` | `#FFFFFF` |
| Usuzumi (verdünnte Tusche) | Linien, Rahmen, gehobene Flächen | `#2B2E3A` | `#DADBE2` |
| Washi (Papier) | Text | `#ECE9E2` | `#16171D` |
| Nezumi (Maus­grau) | gedämpfter Text, Beschriftungen | `#8E8C96` | `#6A6974` |
| **Ai (Indigo)** | **einzige Markenfarbe**: aktive Schnüre, Auswahl, Hauptaktion | `#8A99F2` | `#4F63D9` |

### Signalfarben – nur für Zustände, nie als Deko

| Name | Bedeutung | Wert |
|---|---|---|
| Shu (Zinnober) | Tally PGM / „auf Sendung“, Sprechtaste aktiv | `#E5484D` |
| Moegi (Frühlingsgrün) | Tally Vorschau, Verbindung gut | `#3DBE7A` |
| Kohaku (Bernstein) | Warnung: Frames verloren, Pegel nah an 0 dBFS | `#E8A23A` |

Rot und Grün tauchen ausschließlich in diesen Bedeutungen auf. So bleibt Tally auf einen Blick lesbar.

## Typografie

| Einsatz | Schrift |
|---|---|
| App-Oberfläche | SF Pro (System) – Titel 600, Text 400 |
| Zahlen: Pegel, IP-Adressen, Latenz, Frames | SF Mono, tabellarische Ziffern |
| Website, Onboarding, App-Store-Bilder | Kanit 600 für Überschriften, Kanit 400 für Text |
| Ein hervorgehobenes Wort pro Überschrift | Instrument Serif *italic*, gleiche Größe wie Kanit |

Beispiel-Hero (Website): „Ein Kabel. Alle *Signale*.“

## Formen und Abstände

- Abstände in 8er-Schritten, innerhalb von Karten 16.
- Ecken: Karten 12, Schaltflächen 8, Chips 6.
- Linien 1 pt in Usuzumi. Keine Schatten, keine Verläufe.
- Schnüre in der Knoten-Ansicht: 2 pt, inaktiv Usuzumi, aktiv Ai; Knoten = gefüllter Kreis 6 pt.

## Texte

Stil wie auf apps.zielke.studio: kurz, konkret, Du-Form.

- Untertitel: **„NDI rein. Bild, Ton und Stimme raus.“**
- Begriffe durchgängig: *Quelle, Bildschirm, Kanal, Szene, Regie, Knoten, Sprechtaste, Vorschau, Sendung*.
- Schaltflächen sagen, was passiert: „Szene laden“, „Mit Knoten verbinden“, „Sprechen“.
- Fehler erklären Ursache und Ausweg:
  - „Keine NDI-Quellen gefunden. Prüfe, ob das Technik-Netz an `en7` hängt.“
  - „ZowieBox PGM antwortet nicht mehr. Neuer Versuch in 3 s.“
- Leere Zustände laden zum Handeln ein: „Noch keine Szene. Zieh eine Quelle auf einen Bildschirm.“

## Bildschirme (Version 1)

1. **Knoten-Ansicht** (Hauptfenster): Quellen links, Ausgänge rechts, Schnüre dazwischen; oben Szenenname, rechts oben Status (Netz, Knoten verbunden, Ruhezustand blockiert).
2. **Ausgabe-Fenster:** randloses Vollbild je Bildschirm; optional dezente Statuszeile nur für die Regie.
3. **Ton:** Kanalzüge je Ausgangskanal mit Pegel, Gain, Mute; Sprechtaste groß unten rechts.
4. **Einstellungen:** Schnittstellen (Technik/Klinik), Audio-Gerät, Startverhalten.

## App-Icon

Eine Indigo-Schnur, die einen einfachen Knoten um ein kleines, abgerundetes Bildschirm-Rechteck bildet, auf Sumi-Grund. Kein Text.

- Quelle: `design/icon/musubi-icon.svg` (macOS-Raster 1024/824, Ai `#8A99F2` auf Sumi `#14151B`), Entwurf mit Artlist (Recraft Vector) erzeugt und nachbearbeitet.
- `musubi-icon-small.svg`: gleiche Form mit dickerer Schnur für 16–64 px.
- `musubi-mark.svg`: nur der Knoten, transparent (Website, Onboarding).
- `alt-two-screens.svg`: verworfene Alternative (zwei Bildschirme, eine Schnur).
- Eingebunden als `App/Resources/Assets.xcassets/AppIcon.appiconset`.