Zum Inhalt
← Rezepte
Alle Rezepte

Musik und Kunst: Ära und Bühne

Band / Musiker:in / DJ / Label / Chor und Ensemble / bildende Künstler:in mit Ausstellungen

Jedes Release ist eine Ära mit eigener Farbe: Ein einziges Token aus dem Cover färbt Signal, Effekt und den Namen, der Rest ist Tinte und Papier. Zuerst kommen Hören und Tickets, dann Videos, Bio und ein Pressebereich, aus dem Veranstalter und Presse alles ohne Nachfrage holen. Bewegung ist Takt statt Kurve: Das Cover baut sich in Pixelstufen auf, Seiten schließen als Verschluss, der Hero-Clip läuft als Zeichenraster. Genau ein experimenteller Effekt pro Ansicht, immer mit Pause-Knopf und Standbild. Abgrenzung: kreativstudio-buehne verkauft Leistungen an Auftraggeber (Leistungen, Cases, Anfrage) und bleibt bei einer weichen Expo-Kurve; kultur-programm-haltung ist ein Haus mit vielen Terminen an einem Ort, Spartenfarben und „Besuch planen“. Hier steht eine Künstlerin, eine Band oder ein Label im Mittelpunkt, das an vielen Orten spielt, Releases veröffentlicht und mit jeder Ära anders aussieht.

Bauplan tokens.css Alle Techniken

Schrift

Ära und Bühne

Jedes Release ist eine Ära mit eigener Farbe: Ein einziges Token aus dem Cover färbt Signal, Effekt und den Namen, der Rest ist Tinte und Papier.

Band

Headline
Science Gothic
Text
Redaction
Akzent
Martian Mono

Farbe

  • #111113
  • #EEEBE3
  • #2D3BFF
  • #C2361F
  • #9A9893
  • #5C5A55
  • #FF6B5E

Bewegung

cubic-bezier(0, 0, 1, 1)
Dauer
0 (harter Schnitt, Bildwechsel im Clip, Hover), 80 je Stufe (Cover-Pixelaufbau 6 Stufen = 480, Verschluss beim Seitenwechsel 6 Stufen = 480), 240 (Release-Titel in 3 Stufen); UI nach token-toggle-asymmetrisch: Öffnen 250–300 (Menü, Player-Platzhalter, Warenkorb, Filter), Schließen etwa 65 % davon (170–200)

Aufbau der Seite

SignaturASCII-, Dither- und Pixel-Stil (Render und Hover)Echo-/Stapel-Typografie

HeroASCII-, Dither- und Pixel-Stil (Render und Hover) · VideoEcho-/Stapel-TypografieoderFlüssiger Marmor-Hintergrund · Tinte

  1. Live: Termine und Tickets (nach Tour gruppiert; je Termin Datum, Stadt und Land, Ort, Support, Status als Wort: Tickets, Wenige Karten, Ausverkauft, Zusatzkonzert, Verlegt mit altem und neuem Datum, Abgesagt; Ticketlink zum Anbieter, .ics je Termin; vergangene Termine eingeklappt; Filter nach Land erst ab etwa 15 Terminen)Tourdaten und Termine mit Ticketstatus · Tour eines ActsFacettenfilter mit Ergebnisliste · Filterleiste
  2. Musik: aktuelles Release (Cover unverzerrt, Titel, VÖ-Datum, Formate mit Preis oder Shop-Link, Trackliste als Text, „Anhören“ mit allen Plattformen als normale Links; eingebetteter Player erst nach Klick)Player per Zwei-Klick (Spotify, Apple Music, Bandcamp, SoundCloud, YouTube, Vimeo)
  3. Diskografie (alle Releases, neuestes zuerst; je Karte Cover, Titel, Jahr, Format; führt zur Release-Seite)Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Produktreihe
  4. Videos (Musikvideos, Live-Mitschnitte, Visualizer: YouTube oder Vimeo erst nach Klick; eigene Clips als stumme Vorschau, höchstens drei gleichzeitig; Premiere selbst gehostet nur mit Untertiteln bei Sprache)Player per Zwei-Klick (Spotify, Apple Music, Bandcamp, SoundCloud, YouTube, Vimeo)Video-Vorschau bei Hover / im ViewportEigener Videoplayer · Raumlicht
  5. Über: Bio und Besetzung (ein Satz, wer spielt was, kleine Porträts; Live-Besetzung und Gäste; bei Ensembles nach Stimmgruppe oder Instrument)Team-/Über-mich-Layout mit Porträt-Interaktion · Statement-Satz
  6. Presse und Booking (EPK): Pressefotos mit Fotograf:in, Auflösung und Nutzungshinweis zum Download; Bio kurz, mittel, lang mit Wortzahl und Stand zum Kopieren; Pressestimmen mit Medium und Datum; Technical Rider, Stageplot und Logos als Datei mit Stand-Datum; AnsprechpersonenRaster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Projektraster zuTabs und Segmente mit Pfeiltasten · AutomatischKopieren-FeedbackTestimonials neu gedacht · Kundenliste
  7. Newsletter (benannter Brief mit konkretem Vorteil: neue Musik und Vorverkauf zuerst; Region für Termin-Hinweise freiwillig; Double-Opt-in)Newsletter-Modul mit Persönlichkeit · Shop
  8. Merch und Tonträger (nur mit eigenem Shop: Größe und Farbe, Gesamtpreis, Versand, Lieferzeit, Herstellerangaben; ohne eigenen Shop Links zum Label-Shop oder zu Bandcamp)Kaufbox mit Farb- und Größenwahl · SchnellkaufWarenkorb als Seitenpanel · Seitenpanel
  9. Kontakt: Booking, Management, Label, Presse (je Rolle Name, Agentur, Gebiet und E-Mail zum Kopieren; Booking-Anfrage mit Datum, Ort, Art der Veranstaltung und Kapazität; Proberaum oder Atelier mit Karte per 2-Klick nur, wenn Besuch vorgesehen ist)Kontakt- und Anfrageformular als eigene SektionKopieren-Feedback
  10. Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit eigenem Shop oder eigenem Ticketverkauf)Widerrufs- und Kündigungs-Button · RichtigSeite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

OptionalKarussell mit verformten KartenGeneratives Markenzeichen

Nicht verwenden

Regeln
  • Erster Bildschirm: Name des Acts, aktuelles Cover mit „Anhören“ und die nächsten drei Termine mit Ticketlink. Der Hero-Clip ist eigenes Material (Musikvideo, Visualizer, Live-Mitschnitt), nie Stock.
  • Ära-Token: Eine CSS-Variable --aera, aus dem Cover gewählt, färbt Haupthandlung, Echo, Effekt und Verschluss. Sie hält als Fläche mit Papier-Schrift mindestens 4,5 : 1. Mit dem nächsten Release wird nur dieses Token getauscht.
  • Experimentelle Effekte nach Leitfaden C10: genau ein bewegter Hintergrund pro Ansicht (ascii-dither-pixel-stil mit eigenem Clip oder fluessig-marmor-hintergrund ohne Clip), nie hinter Fließtext, nie neben einem zweiten Material-Effekt. Farben nur aus Tinte, Papier und Ära-Farbe. Sichtbarer Pause-Knopf „Bewegung anhalten“ (läuft länger als 5 s); Standbild als AVIF bei prefers-reduced-motion, ohne WebGL, auf schwachen Geräten (≤ 4 Kerne, Datensparen) und solange der Shader lädt.
  • Dither-Hero: Zellen groß genug, dass nichts flimmert (mobil größer), die Canvas ist aria-hidden, Texte bleiben echtes HTML. Der Clip läuft stumm; Ton nur über sound-umschalter nach Klick, Zustand gemerkt, bei Tab-Wechsel aus. Den Ton-Schalter nur bauen, wenn der Clip wirklich Ton hat.
  • echo-stacked-type nur auf dem Namen (bis etwa 12 Zeichen; bei längeren Namen auf dem kürzesten Wort), höchstens drei Kopien in Ära-Farbe, Papier und Meta-Grau, Telefon zwei; Platz für die volle Spreizung reservieren, Kopien aria-hidden. Im Footer darf der Name noch einmal als Echo stehen, sonst nirgends.
  • Termine (tourdaten-liste): jede Zeile Datum in Martian Mono mit Tabellenziffern, Stadt und Land, Ort, Support, Status als Wort. „Ausverkauft“ nie nur grau oder durchgestrichen; Resale- oder Wartelisten-Link nur, wenn der Veranstalter ihn anbietet. „Verlegt“ zeigt altes und neues Datum. Ticketlink als normaler Link mit Anbietername, öffnet beim Anbieter. Daten aus einer Quelle (JSON oder Import), dazu .ics je Termin und strukturierte Daten nur für sichtbare Termine.
  • Hören: Plattform-Links (Spotify, Apple Music, Bandcamp, YouTube Music, Deezer …) stehen immer als normale Links da; ein eingebetteter Player lädt erst nach Klick (player-einbettung-zwei-klick) mit Anbietername und Hinweis auf den Datenfluss. Trackliste als Text.
  • Cover und Werke unverfälscht: Der Pixelaufbau (6 Stufen à 80 ms) liegt als Ebene über dem schon gemalten Bild und läuft einmal beim Eintritt; kein Dither, keine Verformung auf Cover, Pressefotos und Werkabbildungen.
  • Buttons: tiefen-taste-3d (Variante versatz-brutal) nur für die eine Haupthandlung einer Ansicht („Anhören“, „Tickets“ im Hero, „In den Warenkorb“); in Terminlisten, Downloads und Nebenaktionen kontur-button-zeichnen (Variante laufend, Striche laufen nur bei Hover und Fokus). Ticketlinks in Zeilen mindestens 44 px hoch.
  • Pressebereich ohne Login: Fotos mit Fotograf:in, Jahr, Auflösung und Nutzungsregel direkt am Bild („frei für redaktionelle Berichte über [Act] mit Nennung“), Bio in drei Längen mit Wortzahl und Stand zum Kopieren (kopieren-feedback), Rider und Stageplot mit Datum. Pressestimmen nur echt, mit Medium und Datum.
  • Seitenwechsel: spalten-shutter-wipe in Ära-Farbe, 6 Stufen à 80 ms, nur zwischen Hauptseiten, nicht im Shop, nicht nach Formularen, nicht bei reduzierter Bewegung. Menü als Overlay mit menue-choreografie-wipe-clip über animationsstil_ui (öffnen 300 ms, schließen 200 ms).
  • karussell-karten-verformen nur als Zusatz (optional, Priorität F) in der Diskografie auf Desktop mit Feinzeiger, Variante welle; die Grundlage bleibt css-native-karussell. generatives-markenzeichen (optional, Variante team) nur für Teilen-Bilder je Tourstadt, Saat ist die Stadt; die Termin-Liste bleibt Text.
  • Pflichtangaben und Recht (Leitfaden 8a): Impressum nach § 5 DDG (Band als GbR mit allen Vertretungsberechtigten, Chor als e. V. mit Vereinsregister). Eigener Ticketverkauf: Gesamtpreis inkl. aller Gebühren; für termingebundene Konzerttickets gilt meist kein Widerrufsrecht (§ 312g Abs. 2 Nr. 9 BGB, BGH 13.07.2022, VIII ZR 317/21), das klar sagen. Eigener Merch-Shop: Preise inkl. MwSt., Versand, Lieferzeit, Widerrufsbelehrung, Widerrufs-Button (§ 356a BGB), Herstellerangaben nach GPSR; BFSG prüfen. Eigene Songs auf der eigenen Seite: Als GEMA-Mitglied Lizenz für Eigenpräsentation (kostenlos, ein Jahr, ohne Werbung Dritter, Rechtehinweis sichtbar) oder Tarif. Eingebettete Player und Videos erst nach Klick (§ 25 TDDDG). Newsletter mit Double-Opt-in. Fotos von Publikum nur mit Einwilligung, Werkabbildungen mit Bildrecht (ggf. VG Bild-Kunst), KI-erzeugte Bilder oder Visuals, die echt wirken könnten, kennzeichnen (Art. 50 KI-VO) – vom Kunden prüfen lassen.
Bild und Ton
  • Licht: Wie vom Act geliefert; Live-Fotos mit Bühnenlicht, Pressefotos unverändert.
  • Ausschnitt: Cover quadratisch und unverzerrt, Live-Bilder angeschnitten, Pressefotos in voller Auflösung zum Download.
  • Personen: Ja: der Act; Publikum nur unscharf oder als Menge.
  • Formate: 1:1, 16:9, 4:5
  • Nicht: Kein Dither oder Pixel auf Cover, Pressefotos und Werkabbildungen; keine Stock- oder KI-Konzertbilder; keine Pastell-Verläufe.
  • Anrede: du
  • Sätze: Knapp, Fakten zuerst: Datum, Stadt, Status als Wort. Bio in drei Längen mit Wortzahl.
  • Haltung: Eigenständig und direkt. Ein Chor, ein Ensemble oder eine Künstlerin mit Galerie-Publikum siezt, dann durchgehend.
  • Tonproben: Neues Album am 14. März. Jetzt anhören., [Stadt], [Ort]: ausverkauft. Warteliste beim Veranstalter.
  • Nicht schreiben: „Die Band, auf die alle gewartet haben“, Hype-Wörter, „Stay tuned!“, Status nur als Farbe oder durchgestrichen.
Hero, Raum und Form
  • Hero-Raster: Tinte als Grund. Name oben über die volle Breite, darunter 12 Spalten: Cover über Spalte 1 bis 5, Termine über 6 bis 12; Name, Cover und Termine auf eigenen Tinte-Flächen über dem Clip.
  • Hero-Bild: Cover 1:1 als echtes Bild (LCP); Hintergrund ein eigener Clip im Zeichen- bzw. Dither-Pass (ascii-dither-pixel-stil, Variante video), Standbild bei reduzierter Bewegung.
  • Überschrift: clamp(3.5rem, 1rem + 11vw, 12rem), Science Gothic 800 Versal, wdth 140–200, oben randbündig, mit Echo (echo-stacked-type).
  • Handlung: „Anhören“ (versatz-brutal in Ära-Farbe) unter dem Cover, „Tickets“ als laufende Kontur in der Terminliste.
  • Zusatz: Die nächsten drei Termine in Martian Mono mit Status als Wort; Pause-Knopf „Bewegung anhalten“.
  • Sektionsabstand: clamp(64px, 10vw, 160px)
  • Dichte: mittel
  • Raum: Laute Sprünge zwischen Kapiteln, Terminliste dicht (Zeilen mindestens 44 px, 8 px Innenabstand). Platz für die volle Spreizung des Echos reservieren.
  • Spalten: 12
  • Maximale Breite: none
  • Raster: Volle Breite. Termine als Zeilen über alle 12 Spalten (Datum, Stadt, Ort, Status, Ticket), Diskografie 4 Spalten, Pressefotos 3.
  • Radius klein: 0
  • Radius groß: 0
  • Schatten: nur der harte Papier-Versatz der Haupttaste (tiefen-taste-3d, Variante versatz-brutal)
  • Form: Eckig wie Plattenhülle und Plakat. Nebenaktionen als laufende Kontur (kontur-button-zeichnen, Variante laufend). Farbe nur aus Tinte, Papier und --aera.
Vorbilder