Kultur: Programm und Haltung
Museum, Kunsthalle, Kulturzentrum, Festival, Veranstaltungshaus
Eine starke Hausschrift, Schwarz auf Off-White und ein Farbsystem für Sparten oder Blöcke. Im Mittelpunkt stehen Programm, Termine und Tickets. Bewegung ist kurz und sachlich, Barrierefreiheit gehört fest dazu: Stedelijk respektiert reduzierte Bewegung an zehn Stellen und bietet Vorlesen an. Für Festivals kann die Headline lauter werden, die Struktur bleibt gleich.
Schrift
Programm und Haltung
Eine starke Hausschrift, Schwarz auf Off-White und ein Farbsystem für Sparten oder Blöcke.
Museum, Kunsthalle, Kulturzentrum, Festival, Veranstaltungshaus
- Headline
- Schibsted Grotesk
- Text
- Atkinson Hyperlegible Next
- Akzent
- IBM Plex Mono
Farbe
- #0b0b0b
- #efede9
- #c4421a
- #3d5f9a
- #2f7d4a
- #b0186b
Bewegung
- Dauer
- UI und Hover 150–250, Filter/Ansichtswechsel 300–350, Bild-Reveal höchstens 500
Aufbau der Seite
SignaturScrollspy-Kapitelnavigation (Sticky-Kapitelindex)
HeroÜbergroßer Schrift-Hero (randlos eingepasste Wortmarke) · text-fitEditorial-/Magazin-Layout · Magazin-Cover als Hero
- Aktuelle Ausstellungen / HighlightsEditorial-/Magazin-Layout · Zeitung
- Programm-Kalender mit FilternProgramm-Kalender mit Liste und Monat · Liste und MonatFacettenfilter mit Ergebnisliste · Filterleiste
- Rubriken-Reihen (Musik, Film, Kunst …)Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Kartenreihe
- Besuch planen (Öffnungszeiten, Preise, Anfahrt mit Adresse als Text und Karte per 2-Klick, Barrierefreiheit)Öffnungszeiten mit Live-Status · KarteKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · KartenbildAkkordeon mit Höhenanimation auf auto · FAQSeite „Barrierefreiheit“ als Vorlage · Erklärung
- Magazin / HintergrundEditorial-/Magazin-Layout · Magazin
- Kontakt (Kasse, Führungen und Gruppen, Vermietung, Presse)Kontakt- und Anfrageformular als eigene Sektion
- NewsletterNewsletter-Modul mit Persönlichkeit · Wochenzettel
Nicht verwenden
- Smooth Scroll mit Lenis Programmlisten, Ticket-Widgets und iframes (Spektrix, Enviso) vertragen keine Scroll-Übernahme
- Jede Art von Cursor-Effekt – öffentliche Häuser haben ein breites Publikum, auch mit Screenreader und Tastatur
- Prozent-Zähler-Preloader (0 bis 100) und webgl-ladeszene-fortschritt – Besucher wollen Öffnungszeiten, keine Ladeshow
- Abschnittsweises Einrasten (Fullpage-Snap) blockiert das schnelle Überfliegen des Programms
- Überschwing-Kurven im eigenen Design – bei Barbican stammen sie nur aus einer Tooltip-Bibliothek
- Farbe als einzige Unterscheidung der Sparten – immer zusätzlich ein Text-Label
Regeln
- Programm vor Image: Termine, Ort, Uhrzeit und Ticket-Button auf jeder Teaser-Karte, Datum in Mono-Tabellenziffern.
- Spartenfarben als System, nicht als Deko; jede Farbe besteht den AA-Kontrast und trägt zusätzlich ein Label.
- Sticky-Navigation mit klarer Unterkante (HKW: 78px, 1px Linie); Ticket und Suche immer erreichbar.
- Teaser-Blöcke dürfen im Rhythmus Fläche und Schrift tauschen (HKW: jeder dritte Block).
- prefers-reduced-motion respektieren; Vorlesen bzw. Leichte Sprache und Barrierefreiheits-Infos fest in der Navigation.
- Fließtext mindestens 18px, max. 68ch; Headlines dürfen laut sein, Text bleibt ruhig.
- Filter wechseln die Ansicht per FLIP in ≤ 350 ms, ohne Seiten-Neuladen.
- text-um-form nur als Zusatz (optional, Priorität F): auf Kundenseiten Variante css (Umfluss ohne Bibliothek und ohne Bewegung) in einem einzelnen Magazin-Beitrag; Variante pretext nur für Eigenprojekte und Festival-Seiten.
- Pflichtangaben und Recht (Leitfaden 8a): Ticketpreise als Gesamtpreis inkl. Gebühren; für termingebundene Tickets gilt meist kein Widerrufsrecht, das klar sagen; öffentliche Häuser: BITV 2.0 mit Erklärung zur Barrierefreiheit und Feedback-Weg, ggf. Leichte Sprache und Gebärdensprache; Online-Ticketverkauf privater Häuser: Variante bfsg prüfen; Werkabbildungen nur mit Bildrechten (z. B. VG Bild-Kunst); Besucherfotos nur mit Einwilligung – vom Kunden prüfen lassen.
Bild und Ton
- Licht: Dokumentarisch: Ausstellungsansichten in neutralem Licht, Künstlerfotos wie geliefert.
- Ausschnitt: Werk oder Raumansicht, Plakatmotiv; Bühnenfotos im Moment der Handlung.
- Personen: Künstler:innen und Publikum, nur mit Rechten und Bildnachweis.
- Formate: 4:5, 3:2, 1:1
- Nicht: Keine Stock-Konzertmengen, keine Bilder ohne Bildnachweis, keine Duotone oder Filter über Kunstwerken, keine Slideshow im Hero.
- Anrede: Sie
- Sätze: Kurz und klar; Leichte Sprache als eigene Fassung. Termine immer als Datum · Uhrzeit · Ort.
- Haltung: Einladend und selbstbewusst, ohne Kunstjargon. Ein Festival darf duzen, dann auf der ganzen Seite.
- Tonproben: Heute geöffnet bis 18 Uhr. Unter 18 Jahren frei., Die Ausstellung zeigt 40 Arbeiten aus fünf Jahrzehnten.
- Nicht schreiben: „Spannungsfeld“, „verhandelt“, „Diskurs“ als Füllwörter, „Ein Muss für jeden Kunstliebhaber“.
Hero, Raum und Form
- Hero-Raster: 12 Spalten: Plakat-Satz über die volle Breite (schrift-hero-viewportbreit, Variante textfit), echtes Motiv über 7 Spalten daneben oder darunter (editorial-magazin-layout, Variante cover).
- Hero-Bild: Echtes Ausstellungs- oder Saisonmotiv, 4:5 oder 3:2; kein Video, keine Slideshow.
- Überschrift: clamp(2.75rem, 7vw, 7rem), Schibsted 800–900, oben links, per textfit auf Breite.
- Handlung: „Tickets“ (gefüllt, Pixel-Füllung) und „Programm“ (Kontur mit Ecken) direkt unter dem Titel.
- Zusatz: Öffnungsstatus heute und die nächsten drei Termine in IBM Plex Mono 0.8125rem; Spartenlabel mit Farbe und Wort.
- Sektionsabstand: clamp(56px, 7vw, 112px)
- Dichte: dicht
- Raum: Programm geht vor: Teaser dicht, Datum, Ort und Ticket mit 8 px Abstand. Laut werden darf nur der Titel, nicht der Weißraum.
- Spalten: 12
- Maximale Breite: 1600px
- Raster: Teaser 3 bis 4 Spalten, jeder dritte Block tauscht Fläche und Schrift (HKW). Sticky Navigation mit 1px Unterkante.
- Radius klein: 0
- Radius groß: 0
- Schatten: keiner
- Form: Grafisch und eckig. Nebenwege als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken), Tickets füllen sich in Pixeln (fuellung-vom-eintrittspunkt, Variante pixel).