Musubi/docs/03-design.md

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.