Gestaltungsrichtung
Ruhige technische Atmosphäre, dunkle hochwertige Basisoptik, transparente Glasflächen, Bento-Logik, kontrollierte Akzente und klare technische Typografie.
Interner Projektstandard
Design-System
Zentrale Referenz für Theme, Icons, Buttons, Cards, Animationen, Formulare, Barrierefreiheit und Go-Live-Prüfung. Diese Seite ist Entwicklungswerkzeug, kein öffentlicher Inhaltsbereich.
Foundations
Projektgrundlagen
Die Website bleibt statisch, wartbar, markenkonsistent und ohne unnötige externe Abhängigkeiten.
Typografie
Inter für UI und Text, Syne als Brand-/Heading-Kandidat, JetBrains Mono für technische Akzente.
Layout
Container-first, responsive, großzügige Abstände und wiederverwendbare Kartenmuster.
Go-Live-Anspruch
Keine sichtbaren Platzhalter, klare Nutzerführung, Build grün, Responsive geprüft, Barrierefreiheit mitgeführt.
Theme
Brand Theme und High Contrast
Der Standardmodus ist der Brand Style. Das High-Contrast Theme ist eine bewusst aktivierbare Accessibility-Darstellung.
Token-Übersicht
| Token | Nutzung | Variable |
|---|---|---|
| Page | globale Seitenfläche | var(--color-page) |
| Surface | normale Kartenfläche | var(--color-surface) |
| Surface muted | ruhige Sekundärfläche | var(--color-surface-muted) |
| Surface raised | erhöhte UI-Fläche | var(--color-surface-raised) |
| Header | Header-/Footer-Chrome | var(--color-header) |
| Text primary | Headlines / starke Labels | var(--color-text-primary) |
| Text secondary | Fließtext / Beschreibungen | var(--color-text-secondary) |
| Text muted | Meta / Hilfstexte | var(--color-text-muted) |
| Border | Standardlinien | var(--color-border) |
| Focus | Tastaturfokus | var(--color-focus-ring) |
Icons
Freigegebene Lucide Icons
Icons laufen lokal über @lucide/astro. Verwendet werden nur Icons,
die in src/components/icons/Icon.astro freigegeben sind.
Telefon
phone
Barrierefreiheit
accessibility
Kontrast
contrast
Externer Link
externalLink
Pfeil rechts
arrowRight
Menü
menu
Prüfung
check
Icon mit Text
Dekorative Icons bleiben aria-hidden. Der sichtbare Text ist die Beschriftung.
Icon-only Button
Icon-only Buttons brauchen ein zugängliches Label am Button. Das Icon selbst bleibt dekorativ.
Cards
Karten, Bento und Contentmodule
Digitale Struktur
Klare Informationsarchitektur, wartbare Technik und nachvollziehbare Abläufe.
Auftritt & Wirkung
Modernes Erscheinungsbild, klare Botschaften und belastbare Seitenführung.
Industrie & Zugang
Technisches Verständnis, Vermittlung und Struktur zwischen Anbietern und Bedarf.
Bento Large
Für zentrale Aussagen, wichtige Leistungsbereiche oder erklärende Hauptmodule.
Sidefact
Kleiner, konkreter Zusatznutzen.
Status
Kurze Prüf- oder Systeminformation.
Wide CTA
Breiter Abschlussbereich oder Querinformation mit klarer Nutzerführung.
Animationen
Hero- und Visual-Thumbnails
Animationen sind atmosphärisch, thematisch passend und dürfen nie notwendig sein, um Inhalte zu verstehen. Reduced Motion wird berücksichtigt.
Signal Mesh
Ruhige technische Verbindung für Home, Struktur und Systemthemen.
Broken Grid Repair
Barrieren sichtbar machen und geordnet auflösen.
Editorial Ticker
Dynamischer News-/Redaktionscharakter für Öffentlichkeitsarbeit.
Process Flow
Beleg-, Handels- oder Prozessfluss mit modularen Elementen.
Formulare
Eingaben und Kontaktlogik
Formularmuster
Formularregeln
- Labels immer sichtbar halten
- Fokuszustände klar und konsistent anzeigen
- Fehler nicht nur farblich markieren
- Pflichtfelder textlich erklären
V2.0.0 UI-Prototypen
Zwei Richtungen für den nächsten Release-Stand
Diese Muster testen Wirkung, Spartenfarben, Liquid-Glass-Tiefe, Leuchtlabels, Trust-Elemente und Hover-Atmosphäre. Es ist noch kein globaler Rollout.
Prototype A
Liquid Tech Studio
Premium-Techstudio mit flüssiger TiefeDunkle Brand-Basis, Royal-Blue-Tiefe, Liquid-Glass-Flächen und hochwertige Leuchtlabels. Wirkt mutiger, technischer und klarer als die aktuelle Go-Live-Basis.
Deep NavyRoyal BlueLiquid GlassNeon Labels
Prototype B
Collaborative Signal System
Digitale Zusammenarbeit als visuelles SystemEmerald und Matrix Green stehen für Systeme, Ordnung, Datenfluss und kollaborative Arbeitslogik. Die Farbe wirkt technisch, strukturiert und partnerschaftlich.
EmeraldMatrix GreenSystem FlowCollaboration
Prototype C
Radiant Impact Layer
Sichtbarkeit mit kontrollierter LeuchtwirkungSoft Gold und Signal Yellow tragen Auftritt, Wirkung, Marke, Labels und Reklameleuchten. Die Farbe setzt Aufmerksamkeit, ohne das Layout laut oder billig zu machen.
Soft GoldSignal YellowBrand GlowVisibility
Prototype D
Copper Access Grid
Praxisnähe, Handel und industrielle VerbindungCopper und Orange markieren Zugang, Vermittlung, Handel, Industrie und konkrete Schnittstellen. Die Farbe bringt Wärme, Praxis und Umsetzungsnähe in das System.
CopperOrangeAccessIndustry
Spartenfarben
Brandfarbe bleibt getrennt von Spartenfarben
Blau bleibt Brand-/Hintergrundsystem. Die Sparten nutzen eigene Akzente, damit Zugehörigkeiten später eindeutig und hochwertig erkennbar sind.
Brand / Hauptsystem Deep Navy / Royal Blue Hintergrund, Tiefe, technische Atmosphäre
Digitale Struktur Emerald / Matrix Green Struktur, Systeme, Datenfluss, Kollaboration
Auftritt & Wirkung Soft Gold / Signal Yellow Sichtbarkeit, Wirkung, Marke, Reklameleuchten
Industrie & Zugang Copper / Orange Praxis, Zugang, Industrie, Handel
Badge System
Produktive Sector- und Status-Badges
Diese Badges sind als neutrale oder spartenbezogene Orientierungselemente gedacht. Sie funktionieren für Beiträge, Leistungsseiten, neutrale Content-Module und spätere Zuordnungen innerhalb des Design-Systems.
Neutral
Allgemein System Hinweis
Digitale Struktur
Digitale Struktur IT & Systeme System Flow
Auftritt & Wirkung
Auftritt & Wirkung Sichtbarkeit Signal Accent
Industrie & Zugang
Industrie & Zugang Praxisbezug Access Layer
Badges
Status und Go-Live-Markierungen
Brand Theme High Contrast Responsive No External CDN Build Green
Accessibility
Barrierearme Basis
Semantik, Tastaturbedienung, Fokuszustände, Kontrast und Screenreader-Verträglichkeit werden bei neuen Komponenten aktiv geprüft.
Qualitätscheck
- eine H1 pro Seite
- sinnvolle H2/H3-Hierarchie
- sprechende Link- und Buttontexte
- kein externer Font-, Icon- oder CDN-Request
- Build vor PR erfolgreich
- Desktop, Tablet und Mobile geprüft
Theme-Test
Der Toggle prüft die echte Theme-Implementierung und nicht nur eine optische Demo.
Darstellung
Kontrast prüfen
Aktiviert das High-Contrast Theme zur schnellen Sichtprüfung.
Go-Live
Prüf- und Platzhalterlogik
Entfernen
Demo- oder Beispielinhalte dürfen nicht unverändert online bleiben.
Ersetzen
Bild-, Text- oder Datenplatzhalter müssen vor Go-Live ersetzt werden.
Prüfen
Fachliche, rechtliche oder technische Prüfstellen bleiben sichtbar markiert.