HMS Licht & Ton – UI Design Dokumentation
1. Projekt-Überblick
Projekt: Neue Homepage für HMS Licht & Ton GbR, Veranstaltungstechnik aus Leipheim/Ellzee
Domain: hms.media-on.de (nicht öffentlich indexiert – noindex, nofollow)
Technologie: Nuxt 3 (Vue 3 + Tailwind CSS, SSR/SSG) + FastAPI Backend + Coolify Deployment
2. Design-Philosophie
Das Design folgt einer dunklen, professionellen Ästhetik orientiert an den Agent Zero WebUI Grautönen. Orange (#EC6925) aus dem HMS-Logo wird dezent als Akzentfarbe eingesetzt – ausschließlich für Buttons, Badges, kleine Text-Highlights und den Logo-Rahmen. Keine großen Orange-Flächen.
Tonalität: Professionell, erfahren, zuverlässig, technisch kompetent – nicht werblich oder übertrieben.
3. Design Tokens
3.1 Farbpalette
Agent Zero Dark Theme (Hauptfarben)
| Token |
Hex |
Verwendung |
--bg |
#131313 |
Seiten-Hintergrund |
--panel |
#1a1a1a |
Panels, Cards, Header |
--surface |
#212121 |
Input-Felder, Surface-Level |
--row |
#272727 |
List-Items, Zwischenebenen |
--card |
#2d2d2d |
Card-Hintergrund |
--border |
#444444a8 |
Borders (mit Alpha) |
--secondary |
#656565 |
Sekundärfarbe, Icons |
--primary |
#737a81 |
Primärfarbe (leicht bläuliches Grau) |
--text |
#ffffff |
Haupttext |
--text-muted |
#d4d4d4 |
Gedimmter Text |
Orange Akzent (Dezent)
| Token |
Wert |
Verwendung |
--color-accent |
#EC6925 |
Buttons, Badges, Text-Akzente, Logo-Rahmen |
--color-accent-hover |
#d4581a |
Button Hover |
--color-accent-light |
rgba(236, 105, 37, 0.08) |
Badge-Hintergrund, Nav-Active |
--color-accent-border |
rgba(236, 105, 37, 0.25) |
Card Hover Border |
--color-accent-dark |
#b8461a |
Dunkle Variante |
Status-Farben (Dark Theme adaptiert)
| Token |
Hex |
Verwendung |
--color-success |
#4ade80 |
Erfolg-Meldungen |
--color-success-bg |
rgba(74, 222, 128, 0.08) |
Erfolg-Hintergrund |
--color-error |
#f87171 |
Fehler-Meldungen, Pflichtfelder |
--color-error-bg |
rgba(248, 113, 113, 0.08) |
Fehler-Hintergrund |
--color-warning |
#fbbf24 |
Warnungen |
--color-info |
#60a5fa |
Info-Meldungen |
3.2 Border Radius (Minimal)
| Token |
Wert |
--radius-sm |
2px |
--radius-md |
3px |
--radius-lg |
4px |
--radius-xl |
4px |
--radius-full |
9999px (Badges, Pills) |
3.3 Typography
- Font Family: Inter (Google Fonts)
- Weights: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold), 800 (Extrabold)
- Größen: xs: 0.75rem bis 6xl: 3.75rem
- Line Height: 1.6 (Body), 1.1-1.3 (Headings)
3.4 Spacing
| Token |
Wert |
--space-xs |
0.25rem (4px) |
--space-sm |
0.5rem (8px) |
--space-md |
1rem (16px) |
--space-lg |
1.5rem (24px) |
--space-xl |
2rem (32px) |
--space-2xl |
3rem (48px) |
--space-3xl |
4rem (64px) |
--space-4xl |
6rem (96px) |
3.5 Shadows (Dark Theme)
| Token |
Wert |
--shadow-sm |
0 1px 2px 0 rgb(0 0 0 / 0.3) |
--shadow-md |
0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3) |
--shadow-lg |
0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3) |
--shadow-xl |
0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3) |
3.6 Transitions
| Token |
Dauer |
--transition-fast |
150ms ease |
--transition-base |
250ms ease |
--transition-slow |
400ms ease |
4. Layout-System
- Sticky, Höhe: 4rem (Desktop), 3.5rem (Mobile)
- Logo links, Desktop-Nav mittig/rechts, Mobile Hamburger rechts
- Background:
var(--panel), Border-Bottom: var(--border)
4.2 Main Content
- Max-Width: 1280px (
max-w-7xl)
- Padding: 1rem (Mobile), 1.5rem (sm), 2rem (lg)
- 4-Spalten Grid (1-Spalte auf Mobile)
- Background:
var(--bg), Border-Top: var(--border)
4.4 Responsive Breakpoints
- sm: 640px (Tablet Portrait)
- md: 768px (Tablet Landscape, Desktop Nav visible)
- lg: 1024px (Desktop, 3-4 Column Grids)
- Mobile-First: Alle Layouts starten mit 1-Spalte, expandieren bei Breakpoints
5. Seiten-Struktur (Sitemap)
Route-Beschreibungen:
#/warenkorb – Artikel anzeigen, Mengen steuern, entfernen, CTA → /mietanfrage#/mietanfrage – Veranstaltungsdaten + Kontaktdaten + Nachricht, Submit an Rentman#/impressum – Statische rechtliche Angaben (§5 TMG)#/datenschutz – Statische Datenschutzerklärung (DSGVO)#/agb-vermietung – Statische AGB Vermietung
6. Komponenten-Design
6.1 Cards
- Background:
var(--panel)
- Border:
1px solid var(--border)
- Border-Radius:
4px (--radius-lg)
- Hover: Border wird heller, Shadow wird stärker
6.2 Buttons
- Primary: Orange bg, white text, 3px radius
- Secondary: Surface bg, muted text, border, 3px radius
- Ghost: Transparent, muted text, hover surface bg
6.3 Inputs
- Background:
var(--surface)
- Border:
1px solid var(--border-strong) (#555555)
- Focus: Orange border + subtle orange box-shadow
- Error: Red border + red box-shadow
6.4 Badges
- Border-Radius:
9999px (pill shape)
- Primary: Orange bg (8% alpha), orange text, orange border (20% alpha)
6.5 Speaker Grid
- CSS Grid:
repeat(auto-fill, minmax(160px, 1fr))
- Mobile: 2 columns
- Icons: 48x48px SVG, gray default, orange on hover
7. UX States
Alle Views implementieren Loading, Empty, Error und Success States:
- Loading: Skeleton-Shimmer Animationen
- Empty: Icon + Titel + Message + CTA Button
- Error: Alert-Icon + Titel + Message + Retry Button
- Success: Checkmark + Bestätigungstext + Weiter-Button
Zusätzliche States pro Seite:
- MietanfragePage: form, submitting, success, error, validation-error
- AdminPage: login, idle, syncing, sync-complete, sync-error
- Legal Pages (Impressum/Datenschutz/AGB): loading, content
8. Accessibility (WCAG 2.1 AA)
- Skip Link: Zum Hauptinhalt springen am Seitenanfang
- Semantic HTML: header, main, footer, nav, section, article
- ARIA: aria-label, aria-current, aria-expanded, aria-controls, aria-invalid, aria-describedby, role=alert, role=status
- Focus Visible: 2px Orange Outline mit 2px Offset
- Form Labels: Jedes Input hat label for=..., Pflichtfelder markiert mit *
- Heading Hierarchy: h1 > h2 > h3, keine Levels übersprungen
- Keyboard Navigation: Alle interaktiven Elemente per Tab erreichbar, Enter auf Cards
- Color Contrast: Text #ffffff auf #131313 = 17.9:1 (AAA), Muted #d4d4d4 auf #131313 = 12.6:1 (AAA)
9. KI-/Meta-Features
- robots: noindex, nofollow, noarchive, nosnippet (KEINE Indexierung gewünscht)
- JSON-LD: LocalBusiness Schema mit Adresse, Öffnungszeiten, Services (Schema.org) – KI-tauglich
- OpenGraph: type, title, description, locale, site_name, url
- Twitter Card: summary_large_image
- Semantic HTML5: Korrekte Struktur für KI-Crawler
- KEINE sitemap.xml – nicht gewünscht (noindex)
- KEINE Indexierung – Domain hms.media-on.de nicht öffentlich indexiert
10. Bilder
- Hero: Unsplash Konzert-Bild (background-image, 35% opacity, dark gradient overlay)
- Über uns: Unsplash Veranstaltungstechnik-Setup Bild
- Referenzen: 9 echte HMS-Fotos (von hms-licht-ton.de, lokal auf Webspace gespeichert)
- Equipment: Platzhalter-Icons, Felder für echte Bilder vorbereitet (item.image)
- Speaker Grid: SVG-Icons (6 Lautsprecher-Typen)
11. Prototyp-URLs
12. Design-Entscheidungen
| Entscheidung |
Begründung |
| Dark Theme (Agent Zero Grautöne) |
User-Präferenz, professionelle Wirkung |
| Orange nur als Akzent |
User-Feedback: Übergänge zu Orange sollten subtil sein |
| Minimale Border-Radius (2-4px) |
User-Feedback: abgerundete Ecken nur ganz minimal |
| Vue 3 SPA für Prototyp |
Gleiche Framework wie Produktion (Nuxt 3) |
| Echte HMS-Fotos für Referenzen |
Authentizität, keine Stock-Fotos |
| SVG-Icons für Speaker Grid |
Kompakt, skalierbar, theme-bar |
| Inter Font |
Modern, clean, gute Lesbarkeit |
| noindex meta |
Domain hms.media-on.de nicht öffentlich indexiert |
| Mietanfrage separat vom Warenkorb |
Warenkorb = Items verwalten, Mietanfrage = Formular mit Event-/Kontaktdaten |
| Legal Pages als eigene Routes |
Impressum, Datenschutz, AGB Vermietung als statische Seiten mit eigenem Routing |
| Admin Dashboard mit Sync-States |
Post-Login: Sync-Trigger, Status-Anzeige, Sync-Log Viewer |
| JSON-LD trotz noindex |
KI-Crawler sollen strukturierte Daten erkennen können, ohne Indexierung |
