Design Library
Interner Playground fuer UI-Bausteine. Dient der QA und schnellen Wiederverwendung im Sprint, ohne fertige Layouts.
Typography
Headings, Body und Muted Text fuer klare Hierarchien.
Buttons
Standard-Buttons fuer Primary, Secondary und Ghost.
Motion / Animations
Animations respect prefers-reduced-motion.
Reveal: fadeUp
Kurzer Text, der beim In-View einblendet.
Stagger Liste
MotionCard
Card Title
Hover lift + shadow-lift token.
Form Elements
Labels, Inputs und Textarea als Basis.
Cards / Surface
Card-Struktur mit Surface-Tokens, ohne Layout-Vorgabe.
Card Title
Kurzer Platzhaltertext fuer die Card.
Card mit Liste
- List Item A
- List Item B
- List Item C
Grid System
Beispiele fuer 2-, 3- und responsive 4-Spalten-Layouts.
Sections Preview
Sections als Struktur-Demo (neutral, ohne finales Design).
Hero Section
Kurzer Platzhaltertext fuer die Hero Section.
Feature Grid
Feature A
Kurzbeschreibung.
Feature B
Kurzbeschreibung.
Feature C
Kurzbeschreibung.
FAQ
Frage 1
Kurze Antwort.
Frage 2
Kurze Antwort.
CTA Section
Platzhalter CTA Text.
Kontakt
Senden Sie uns eine kurze Anfrage. Dieses Formular ist ein Platzhalter.
Events
Vorschau der Event Cards und der Event Grid Section (live falls vorhanden).
Artist Stories
Horizontale Story-Reihe (Instagram-Style). Live-Daten, wenn in den Site Settings (Startseite) aktiviert und Artists mit Story-Videos zugewiesen. Ohne Konfiguration erscheint nur der Hinweis.
Artist-Stories
Sidebar Layout Preview
Desktop: fixe Sidebar links. Mobile: Drawer (Hamburger Button).
Content-Bereich mit linkem Offset durch die Sidebar.
Hinweis: Auf Mobile wird die Sidebar als Drawer eingeblendet.
Brand Assets
Icons und Social Share Assets aus den globalen Site Settings (read-only).
Favicon
Empfohlen: ICO oder PNG (32x32 / 48x48)
OpenGraph Image
Empfohlen: 1200x630
Apple Touch Icon
Empfohlen: 180x180
Android Icon (192x192)
Empfohlen: PNG 192x192
Android Icon (512x512)
Empfohlen: PNG 512x512
Maskable Icon
Empfohlen: PNG 512x512 (optional)
Safari Pinned Tab Icon
Empfohlen: SVG (monochrome mask)
Global Site Settings
Header, Footer sowie Kontakt- und Tracking-Preview (read-only).