# Monosystem

Die Regeln hinter MonoStereo.

Farben, Schrift, Raster, Linien, Flächen und die Bausteine der App an einem Ort. Links stehen die Regeln, rechts unter „Beispiel“ das lebende Ding aus der App selbst, mit denselben Variablen und denselben Komponenten. Was hier steht, gilt für die App, die Website, das EPK und die Mails.

Zuletzt aktualisiert: 06.10.2026

Seite: https://monostereo.de/monosystem

## Kapitel

- Grundsätze: Schwarz, Weiß, und eine Taste, die antwortet.
- Farben: Graustufen als Token, jede mit gemessenem Kontrast.
- Schrift: Drei Schriften, drei Stimmen.
- Raster und Abstände: Vier Pixel, acht Sprossen.
- Linien: Eine Linie läuft von Kante zu Kante.
- Flächen: Grauwert trennt, nicht der Rahmen.
- Interaktion: Jede Taste antwortet, bevor du loslässt.
- Symbole: Ein Set, zwei Pixel Strich.
- Marke: MS. und zwei Zeilen, nie als Live-Text.
- Bausteine: Wenige Teile, jedes mit einem Zweck.
- Screens: Im Zusammenhang zeigt sich der Rhythmus.
- Bildsprache: Fotos in Farbe, alles andere nicht.
- Sprache: Du, und immer eine Musikerin.

## Grundsätze: Schwarz, Weiß, und eine Taste, die antwortet.

### Farben: keine

- Konsequent monochrom: Schwarz, Weiß, Graustufen. Keine Akzentfarbe, nie, auch nicht für Fehler oder Erfolg.
- Zustände arbeiten mit Helligkeit, Invertierung und Form.
- Ausnahmen sind Inhalt, kein Interface: Fotos, Sharepic-Presets, das Bandbild im Kopf.

Beispiel: lebend auf der Seite (monochrom).

### Invertierung heißt Handlung

- Pro Screen-Zustand genau ein invertierter Button: die eine primäre Handlung, in der Regel der Einwurf.
- Alles andere ist Ghost (Outline) oder Textlink. Orte sind Ghost, Handlungen sind invertiert.
- Die Regel zählt Handlungs-Buttons, nicht Auswahlzustände und nicht Transientes wie eine Snackbar.

Beispiel: lebend auf der Seite (invertierung).

### Scharfe Kanten, keine Schatten

- Radius höchstens 2 px. Kreise gibt es nur als benannte Ausnahme: Zähler-Badge, Bandbild, Wechsler-Marker.
- Keine Schatten, keine Verläufe, keine Emojis im Interface.
- Flächen trennen sich über Grauwert oder eine Hairline, nie über Dekoration.

Beispiel: lebend auf der Seite (kanten).

### Im Zweifel weglassen

- Jedes Element soll sich anfühlen wie eine Taste am Vierspurgerät: satt, eindeutig, ohne Dekoration.
- Ein Baustein, der nichts tun kann, ist schlechter als keiner. Ein Text, der nichts erklärt, fällt weg.

## Farben: Graustufen als Token, jede mit gemessenem Kontrast.

### Die Token

- Alle Werte leben als CSS-Variablen in einer Datei. Dort nachschlagen, nie raten, nie Hex hart einkodieren.
- Hell und Dunkel sind zwei Wertesätze derselben Namen. Eine Komponente kennt nur den Namen.
- Bei Kontrast-Korrekturen wird der Variablenwert geändert, nicht die einzelne Stelle.

| Token | Rolle | Hell | Dunkel |
|---|---|---|---|
| --bg | Seitengrund, Basis-Kartenfläche | #ffffff | #0f0f0f |
| --panel | Gruppenkopf, Eingang-Karten, Dialoge, Sheets | #efefef | #1a1a1a |
| --surface-2 | Zustand: gedrückt, Hover, aktiver Chip, Verschachtelung | #e0e0e0 | #2c2c2c |
| --text | Text, Fokus-Ring, tragende Kante, invertierte Fläche | #111111 | #ececec |
| --text-muted | Hero-Unterzeile | #333333 | #c9c9c9 |
| --dim | Meta, Mono-Labels, inaktive Symbole | #636363 | #9a9a9a |
| --line | Hairlines und Rahmen | #707070 | #6a6a6a |
| --wave-played | Wellenform, gespielt | #111111 | #ececec |
| --wave-rest | Wellenform, ungespielt | #888888 | #6a6a6a |
| --overlay | Schleier hinter Dialogen | rgba(0, 0, 0, 0.4) | rgba(0, 0, 0, 0.6) |
| --kachel-ground | Dunkler Grund zwischen Kacheln (Kachel-Layout) | #0f0f0f | #0f0f0f |
| --kachel-bg | Fläche einer Kachel | #ffffff | #1a1a1a |

### Kontrast, geprüft

- AA in beiden Modi: 4,5:1 für Text, 3:1 für große Headlines und UI-Grafik wie Hairlines.
- Die Tabelle rechts ist aus den echten Werten gerechnet, nicht abgeschrieben.
- Der Markensatz „farben: keine. kontrast: geprüft.“ ist damit belegt.

| Paar | Grenze | Hell | Dunkel |
|---|---|---|---|
| Text auf Grund (--text auf --bg) | 4,5:1 | 18,88:1 | 16,23:1 |
| Meta auf Grund (--dim auf --bg) | 4,5:1 | 6,01:1 | 6,81:1 |
| Text auf Panel (--text auf --panel) | 4,5:1 | 16,42:1 | 14,73:1 |
| Meta auf Panel (--dim auf --panel) | 4,5:1 | 5,22:1 | 6,19:1 |
| Text auf Zustandsfläche (--text auf --surface-2) | 4,5:1 | 14,30:1 | 11,82:1 |
| Meta auf Zustandsfläche (--dim auf --surface-2) | 4,5:1 | 4,55:1 | 4,96:1 |
| Invertiert (Grund auf Text) (--bg auf --text) | 4,5:1 | 18,88:1 | 16,23:1 |
| Hairline auf Grund (UI-Grafik) (--line auf --bg) | 3:1 | 4,95:1 | 3,54:1 |
| Hairline auf Panel (UI-Grafik) (--line auf --panel) | 3:1 | 4,31:1 | 3,22:1 |
| Ungespielte Welle auf Panel (--wave-rest auf --panel) | 3:1 | 3,08:1 | 3,22:1 |
| Meta in der Kachel-Fläche (--kachel-dim auf --kachel-panel) | 4,5:1 | 5,22:1 | 4,96:1 |

### Drei Ebenen, drei Rollen

- Grund und Text-Kante tragen die Basis-Listenkarten.
- Panel ist die eigene Fläche für Gruppenköpfe, Eingang-Karten, Dialoge und Sheets.
- Die dritte Stufe ist Zustand: gedrückt, Hover, aktiver Chip, Verschachtelung. Nie für Basis-Karten.

Beispiel: lebend auf der Seite (ebenen).

## Schrift: Drei Schriften, drei Stimmen.

### Anton, Helvetica, DM Mono

- Anton für Headlines, Datums-Köpfe und Dialog-Titel: Versalien, groß, eng, Zeilenhöhe 1,05.
- Helvetica für Songtitel, Fließtext und Buttons: Titel bold, Text regular, Zeilenhöhe 1,5.
- DM Mono für alle Labels, Meta-Zeilen, Filter, Zeiten und Status: Versalien, Laufweite 0,08 em.
- Songtitel bleiben Helvetica, in jedem Kontext. Anton dafür wurde geprüft und verworfen.

Beispiel: lebend auf der Seite (schriften).

### Die Type-Scale

- Sieben Stufen, alle als Token: 11 px Mono-Label, 14 px Bereichslabel, 16 px Fließtext, 20 px Titel, 32 px Display, dazu zwei fluide Headline-Stufen.
- Jedes Eingabefeld trägt mindestens 16 px. Das ist kein Stil, sondern verhindert den Zoom in iOS Safari.

Beispiel: lebend auf der Seite (typescale).

### Mono-Laufweite und ihre drei Ausnahmen

- Standard 0,08 em, etwa ein Pixel bei 11 px.
- Ausnahme eins: die Filter-Leiste läuft weiter, 0,2 em, editorial.
- Ausnahme zwei: die Kicker-Familie über Empty States und Bilanzen, 0,1 em.
- Ausnahme drei: Drag- und Anlege-Labels, 0,14 bis 0,16 em. Ziffern und Zeiten laufen ohne Laufweite.

Beispiel: lebend auf der Seite (laufweite).

### Versalien sind Typografie, keine Rechtschreibung

- Das Wording folgt der deutschen Rechtschreibung: Satzanfänge und Substantive groß, Sätze mit Punkt, Beschriftungen ohne.
- Versalien bleiben dort, wo die Schrift sie setzt: Anton-Headlines, Mono-Labels, Filter- und Tab-Namen, Mono-Buttons.
- Eigennamen folgen ihrer eigenen Schreibung: kiosk61, MonoStereo, PJ Harvey.

So:
- Gig eintragen
- Noch keine Anfrage.
- ANTWORT · 1
- unter Momente

Nicht so:
- gig eintragen
- noch keine anfrage
- Antwort · 1
- unter MOMENTE

## Raster und Abstände: Vier Pixel, acht Sprossen.

### Die Abstands-Leiter

- Acht Sprossen auf 4-px-Basis, von 4 bis 64 px, alle als Token. Im Zweifel die nächsthöhere.
- 2 px gehört dem Radius und der Hairline, nicht dem Abstand.
- Layout-Einmalwerte (Kopfhöhen, Safe-Area) stehen außerhalb der Leiter und sind im Code als solche markiert.
- Innerhalb einer randlosen Liste gilt Abstand null: die Kante trennt, kein Leerraum.

Beispiel: lebend auf der Seite (abstaende).

## Linien: Eine Linie läuft von Kante zu Kante.

### Trenner in voller Breite

- Trennlinien sind 1 px in der Hairline-Farbe und laufen über die volle Breite, wie Kopf und Tab-Bar.
- Listenzeilen ziehen sich dafür über das Seitenpadding hinaus; der Text bleibt auf der Kante.
- Die tragende Kante der Basis-Karte ist der volle Textton, nicht die Hairline.
- Vertikale Trenner nur als Zeilen-Marker zwischen Symbol und Titel, nie als Rahmen.

Beispiel: lebend auf der Seite (linien).

## Flächen: Grauwert trennt, nicht der Rahmen.

### Mono-Bänder, hell und invertiert

- Ein Bereichslabel steht als Mono-Versalien auf dem Grund, eine Stufe über dem Mono-Label.
- Das invertierte Band ist die Ausnahme für das, was wartet: „ANTWORT · 1“, „NACHFASSEN FÄLLIG“. Höchstens eines je Liste.

Beispiel: lebend auf der Seite (baender).

### Panel und Kachel

- Panel: Gruppenkopf, Eingang-Karte, Dialog, Sheet. Radius 2 px, Hairline nur, wo eine Fläche in derselben Helligkeit liegt.
- Kachel-Layout im hellen Modus: helle Kacheln auf dunklem Grund, das Bereichslabel zwischen den Kacheln im Grund-Ton.
- Fotos laufen bis an die Kachelkante.

Beispiel: lebend auf der Seite (panel).

## Interaktion: Jede Taste antwortet, bevor du loslässt.

### Gedrückt unter 100 Millisekunden

- Kein Übergang hinein: der Druck ist sofort sichtbar, das Loslassen darf ausklingen.
- Vier Familien: Flächen füllen sich mit der Zustandsstufe, Text tauscht die Graustufe, Invertiertes wird eine Stufe heller, Bilder dunkeln leicht ab.
- Nur Grauwert oder Invertierung, nie Farbe.

Beispiel: lebend auf der Seite (gedrueckt).

### Fokus-Ring

- 2 px im Textton, 2 px Abstand, nur bei Tastaturfokus. Tab drücken und schauen.
- Tastatur erreicht alles: Sheets und Dialoge haben eine Fokus-Falle, Escape heißt behalten.

Beispiel: lebend auf der Seite (fokus).

### Scroll-Fade, der eine funktionale Verlauf

- Ein 48-px-Streifen über der Tab-Bar tönt den Inhalt zum Textton hin, solange unter der Falz noch etwas liegt.
- 10 % auf hellem Grund, 5 % auf dunklem. Am Ende der Liste ist er weg.
- Sonst gibt es keine Verläufe. Der Streifen ist Hinweis, nicht Dekoration.

Beispiel: lebend auf der Seite (scrollfade).

### Sparsam bewegt

- Ein Übergang von 150 ms für Zustände, 300 ms für das Sheet von unten. Unterstreichungen erscheinen ohne Slide.
- Unter prefers-reduced-motion bleibt jeder Zustand, nur der Übergang entfällt.
- Nichts springt: Bilder reservieren ihren Platz, bevor sie laden.

## Symbole: Ein Set, zwei Pixel Strich.

### Iconoir, Stroke 2 px

- Iconoir ist die einzige Quelle. Strichstärke global 2 px, Farbe folgt dem Text.
- Gefüllte Symbole nur als Listen-Marker neben fetter Typografie: Wellenform, Play, Noten, Textbalken.
- Jeder Icon-Button trägt ein aria-label. Dekorative Symbole sind aria-hidden.

Beispiel: lebend auf der Seite (set).

### Die Kopf-Symbole und ihre Grauwert-Ausnahme

- Proberaum und Eingang im Kopf zeigen ihren Zustand nur über den Grauwert: inaktiv gedämpft, aktiv im Textton.
- Das ist die dokumentierte Ausnahme von „Zustände nie nur über Grau“. Outline gegen gefüllt zerstörte hier die Erkennbarkeit.
- Trägt die Band ein Bandbild, ersetzt es das Symbol: rund, in Farbe, aktiv mit 2-px-Ring.

Beispiel: lebend auf der Seite (headericons).

### Icon-Archiv

- Alle Symbole der App als Liste: Export-Name und Iconoir-Quelle, direkt übernehmbar.

- WaveIcon (SoundHigh)
- WaveBarsIcon (eigener Pfad)
- NotesIcon (eigener Pfad)
- TextBarsIcon (eigener Pfad)
- PlayFilled (eigener Pfad)
- CalendarIcon (Calendar)
- ShareIcon (ShareIos)
- MapPinIcon (MapPin)
- MomenteIcon (MediaImage)
- PeopleIcon (Group)
- ProfilIcon (User)
- LockIcon (Lock)
- ArrowLeftIcon (ArrowLeft)
- ArrowRightIcon (ArrowRight)
- FlagIcon (Pin)
- TipFlagIcon (TriangleFlag)
- LinkIcon (Link)
- LinkSlashIcon (LinkSlash)
- TrashIcon (Trash)
- PlusIcon (Plus)
- TrayIcon (Archive)
- IdeaIcon (LightBulb)
- ExpandIcon (Expand)
- MoveIcon (eigener Pfad)
- FeedbackIcon (ChatBubbleEmpty)
- PencilIcon (EditPencil)
- CloseIcon (Xmark)
- GripIcon (Drag)
- CheckIcon (Check)
- CheckBoldIcon (Check)
- XmarkIcon (Xmark)
- QuestionIcon (QuestionMark)
- PlayIcon (Play)
- PrinterIcon (Printer)
- QrCodeIcon (QrCode)
- MoreIcon (MoreHoriz)
- ChevronRightIcon (NavArrowRight)
- ChevronLeftIcon (NavArrowLeft)
- DownloadIcon (Download)
- MinusIcon (Minus)
- SendIcon (Send)
- ClockIcon (Clock)
- MailIcon (Mail)
- ChevronDownIcon (NavArrowDown)

## Marke: MS. und zwei Zeilen, nie als Live-Text.

### Lock-up und Monogramm

- Das Monogramm „MS.“ in Anton, Quadrat mit 2 px Radius, vertikal geteilt: links dunkle Fläche mit hellem M, rechts helle Fläche mit dunklem S.
- Daneben die Wortmarke „Mono / Stereo“ zweizeilig, so hoch wie das Monogramm.
- Alles als SVG mit Pfaden, damit kein Gerät eine Ersatzschrift zeigt. Das Monogramm allein ist Favicon und App-Icon.

Beispiel: lebend auf der Seite (lockup).

### Tagline

- „deine monochrome freundin“ lebt nur im Footer der Website. Nirgends sonst.
- Das frühere Motto ist entfallen; das Plus in der App trägt es noch als aria-label.

Beispiel: lebend auf der Seite (tagline).

## Bausteine: Wenige Teile, jedes mit einem Zweck.

### Invertierter Button

Wann: Für die eine primäre Handlung eines Screens, oder als „Behalten“ im Verlust-Dialog.

- Fläche im Textton, Schrift im Grund, 48 px hoch, Radius 2 px.
- Gedrückt wird er eine Stufe heller, bleibt aber invertiert.

Beispiel: lebend auf der Seite (cta).

### Ghost-Button

Wann: Für Orte und sekundäre Handlungen: anlegen, öffnen, weiter.

- Hairline-Rahmen, Text im Textton, 48 px hoch.
- Kompakt und linksbündig über einer Liste als „+ Gig“.

Beispiel: lebend auf der Seite (ghost).

### Textlink

Wann: Für Tertiäres und Destruktives: löschen, zurücknehmen, trennen.

- Unterstrichen, 48 px Tap-Höhe. Destruktiv sitzt links, vorwärts sitzt rechts.
- Destruktive Textlinks sind Mono, gedämpft.

Beispiel: lebend auf der Seite (textlink).

### Icon-Button

Wann: Für wiederholte Einzelaktionen in einer Liste, etwa den Papierkorb an einer Anmerkung.

- 48 × 48 px Tap-Ziel, Symbol 2 px Stroke, immer mit aria-label.
- Im Kopf 40 × 40 px mit Grauwert-Zustand.

Beispiel: lebend auf der Seite (iconbutton).

### Listenzeile

Wann: Für alles, was in einer Liste steht und einen Ort öffnet.

- Titel bold, darunter die Meta-Zeile in Mono, rechts ein Chevron.
- Hairline unten, von Kante zu Kante. Die ganze Zeile ist die Taste.

Beispiel: lebend auf der Seite (listenzeile).

### Filterzeile

Wann: Für Ansichten eines Bereichs, die nebeneinander stehen: ZUSAGE · ANFRAGEN · KONTAKTE.

- Reine Mono-Versalien ohne Box. Aktiv im Textton mit 2-px-Unterstreichung, inaktiv gedämpft.
- Rolle tablist, der Zustand lebt in der URL.

Beispiel: lebend auf der Seite (filterzeile).

### Empty State

Wann: Wenn eine Liste leer ist: Zustand als Headline, Nutzen als ein Satz, genau eine Handlung.

- Die Handlung ist Ghost; die eine Invertierung bleibt das Plus.
- Ein Zustand, in dem die Handlung nichts tun könnte, bekommt keine.

Beispiel: lebend auf der Seite (emptystate).

### Fehlerzustand

Wann: Wenn etwas nicht geladen werden konnte. Er tarnt sich nie als Leere.

- Gleiche Hülle wie der Empty State, fester Wortlaut, eine Handlung: nochmal laden.
- Fehler, Laden und Leer sind drei Zustände, nicht einer.

Beispiel: lebend auf der Seite (fehler).

### Verlust-Dialog

Wann: Vor allem, was unwiederbringlich löscht. Er nennt, was mitgeht, mit Zahlen, wo es welche gibt.

- Der sichere Weg „Behalten“ ist invertiert, der destruktive ein Textlink. Escape heißt behalten.
- Ton sachlich. Bei null entfällt der Satzteil.

Beispiel: lebend auf der Seite (lossdialog).

### Sheet

Wann: Für Anzeige und Auswahl ohne Texteingabe: Auswahl-Sheets, Menüs auf dem Handy.

- Von unten, Radius 2 px oben, Fokus-Falle, Escape schließt. Keine Grabber-Linie.
- Editoren mit Tastatur sind echte Seiten, keine Sheets.

Beispiel: lebend auf der Seite (sheet).

## Screens: Im Zusammenhang zeigt sich der Rhythmus.

### Songliste

- Worauf achten: Termin-Streifen, Zustandszeile und Songkarten stapeln sich ohne Leerraum. Hält der lange Titel die Karte, ohne die Zahl zu verdrängen? Bleibt „ja“ daneben eine Karte gleicher Höhe?
- Die Gruppen sind Zustände, nicht Proben: offene Versionen stehen mit in der Reihe, die Zustandszeile zählt sie.

Beispiel: lebend auf der Seite (screen-songliste).

### Anfragen

- Worauf achten: Gruppen nach Handlung – TO DO, NACHFASSEN, ERLEDIGT. Jede Anfrage ist eine Kachel wie in der Songliste; der Marker links sagt die Zeit („in 7 tagen“) oder den Zustand. Bricht der lange Venue-Name sauber, ohne den Marker zu verdrängen?
- Die Überschrift sagt die Handlung, der Marker nur die Zeit: „NACHFASSEN“ steht einmal über der Gruppe, nicht in jeder Kachel.

Beispiel: lebend auf der Seite (screen-anfragen).

### Detailseite

- Worauf achten: oben nur Name und Stand, darunter sofort die Mail – bei einer Antwort die Antwort zuerst, kräftig, und direkt darunter TO DO. Ältere Mails und frühere Anfragen stehen zugeklappt.
- Handlungen nur, wenn sie dran sind: Antworten und Nachfassen über bzw. unter der Mail; Zusage, Abschließen und Termin im Gespräch sonst als Textlinks am Ende.

Beispiel: lebend auf der Seite (screen-detail).

### Empty State und Fehlerzustand

- Worauf achten: gleiche Hülle, anderer Satz, andere Handlung. Der Unterschied ist die Regel vom 25.09. und nur im Vergleich sichtbar.
- Links ist nichts da und die Handlung legt an. Rechts kam nichts an und die Handlung lädt nochmal.

Beispiel: lebend auf der Seite (screen-leer-fehler).

### Momente

- Worauf achten: der einzige Farbraum. Das invertierte Band trägt den Namen in Anton, darunter Querformat über die volle Breite und Quadrate zu zweit. Bleibt das Raster ruhig, wenn ein Moment mit einem breiten Foto endet?
- Ein langer Momentname bricht innerhalb des Bands um, das Band wächst, das Raster darunter rückt nach.

Beispiel: lebend auf der Seite (screen-momente).

## Bildsprache: Fotos in Farbe, alles andere nicht.

### Das Momente-Raster

- Fotos zeigen echte Farbe. Das Interface drumherum bleibt monochrom.
- Querformat ab 1,3:1 läuft über die volle Breite und wird nicht beschnitten. Hochformat und Quadrat stehen als Quadrat, zwei nebeneinander.
- Der Ausschnitt liegt am Motiv-Punkt, der beim Hochladen einmal bestimmt wird. Die Detailansicht zeigt immer das ganze Bild.
- Fuge 8 px, Radius 0, kein Rahmen, keine Beschriftung im Raster.

Beispiel: lebend auf der Seite (raster).

## Sprache: Du, und immer eine Musikerin.

### Generisches Femininum

- Nutzerinnen, Musikerinnen, Bookerinnen. Alle sind mitgemeint, eine Form, konsequent. Kein Sternchen, kein Doppelpunkt.
- Wo es natürlicher klingt, neutral: die Band, alle, wer hochlädt.

So:
- Frag die Person, die dich eingeladen hat.
- Wer schon in der Band ist, bleibt.
- an eure Produzentin

Nicht so:
- Frag den Nutzer, der dich eingeladen hat.
- Mitglieder:innen bleiben.
- an euren Produzenten

### „Du“, und die Band ist „ihr“

- Anrede immer du, groß nur am Satzanfang. Die Band als Ganzes ist ihr.
- MonoStereo spricht als wir, wenn es etwas tut.

### Erklärmodus als Normalfall, der schnippische als Ausnahme

- Erklären: locker, sachlich, nennt den Nutzen ohne Umweg über einen Gag.
- Schnippisch: ein bewusster Spruch an wenigen Stellen, höchstens einer je Screen, Instrumente gleichmäßig verteilt.
- In Fehl- und Verlust-Situationen immer Erklärmodus. Nie ein Spruch, wenn etwas auf dem Spiel steht.

So:
- Der Server hat gerade nicht geantwortet. Eure Sachen sind noch da.
- Im Kasten. Sogar der Schlagzeugerin gefällt's.

Nicht so:
- Ups, da ist was schiefgelaufen 🙈
- Datei gelöscht. Tja, Bassistinnen halt.

### Zitate nur von Künstlerinnen, nur Songtitel

- Wo das Produkt Persönlichkeit zeigt, zitiert es Songtitel von Frauenbands und Künstlerinnen, mit Namen in Klammern.
- Nie Liedzeilen, die sind geschützt. Höchstens ein Zitat-Moment je Screen.

So:
- du hast den farbfilm vergessen (nina hagen)

Nicht so:
- eine ganze Liedzeile aus dem Text
- ein Zitat eines Musikers