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

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

fehler · 1

auch ein Fehler ist grau, nicht rot

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

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

Radius 2 px, Hairline

Panel, Grauwert trennt

der Kreis als Ausnahme

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.

Beispiel

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.

Beispiel

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

Grund, mit Kante im Textton darunter

Panel

Zustand: gedrückt, Hover, aktiv

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

Noch kein Gig.

Aussidefestival 2027

Sobald einer steht, sieht die ganze Band Datum, Ort und Uhrzeit, statt es in der Gruppe zu suchen.

letzter take 03.07. · 3 anmerkungen

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

--text-label · 11pxMono-Label
--text-bereichslabel · 14pxBereichslabel
--text-body · 16pxFließtext, Buttons, Eingaben
--text-sub · 20pxTitel, Namen
--text-display · 32pxGroße Zahlen
--h1 · clamp(32px, 8vw, 56px)Headlines

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

0,08 emstandard · 3 anmerkungen
0,2 emFilter
0,1 emgigs · zusage
0 em03:41 · 12.07.

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.

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

--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-5 · 24px
--space-6 · 32px
--space-7 · 48px
--space-8 · 64px

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

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

gig-chancen · eingang

antwort · 1

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

proberaum

Eine Kachel auf dem dunklen Grund. Der Text bleibt auf der Kachelkante.

Interaktion

Jede Taste antwortet, bevor du loslässt.

Hell und Dunkel

Ein Schalter, zwei Wertesätze. Alles auf dieser Seite kippt mit.

Beispiel

hell / dunkel, dieselbe Seite

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

Drücken und halten. Der Zustand kommt ohne Übergang.

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

Mit Tab hierher: der Ring erscheint nur bei Tastaturfokus.

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

Unter dieser Zeile liegt noch Inhalt. Der Streifen tönt den Rand zum Textton hin, statt eine Fläche darüberzulegen. Er ist ein Hinweis auf mehr, keine Dekoration. Sobald die Liste zu Ende ist, verschwindet er. Auf dunklem Grund ist er halb so stark.

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

Stroke 2 px; die zwei rechts sind die gefüllten Marker

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

inaktiv gedämpft, aktiv im Textton

Icon-Archiv

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

Beispiel

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

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

deine monochrome freundin

Bausteine

Wenige Teile, jedes mit einem Zweck.

Invertierter Button

wannFü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

Ghost-Button

wannFü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

Textlink

wannFü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

Icon-Button

wannFü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

Kopf-Symbol: Tippen wechselt den Grauwert

Listenzeile

wannFü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

Filterzeile

wannFü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

Empty State

wannWenn 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

gigs · zusage

noch kein gig.

Sobald einer steht, sieht die ganze Band Datum, Ort und Uhrzeit, statt es in der Gruppe zu suchen.

Fehlerzustand

wannWenn 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

gigs · zusage

nicht geladen.

Der Server hat gerade nicht geantwortet. Eure Sachen sind noch da.

Verlust-Dialog

wannVor 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

Sheet

wannFü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

Screens

Im Zusammenhang zeigt sich der Rhythmus.

Die Band „kaltmiete“ ist erfunden, mit allem, was hier steht: Songs, Venues, Anfragen, Fotos.

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

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

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

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

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

Herbstfest GeraSamstag, 12. September 2026 · 14 Fotos

Proberaum, letzter Abend vor der TourDonnerstag, 12. November 2026 · 3 Fotos

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

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.

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.

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.

du hast den farbfilm vergessen (nina hagen)

Nicht so

eine ganze Liedzeile aus dem Text
ein Zitat eines Musikers