Design System und UI-Komponenten für lauger.de
Design System und UI-Komponenten Referenz
Die Hauptfarben der lauger.de Website
#ff6440
#e65533
#333333
#7B7B7B
#f8f8f8
#ffffff
Dies ist ein Beispieltext in der Standard-Schriftart Roboto mit 15px Größe. Die Textfarbe ist #7B7B7B für optimale Lesbarkeit auf weißem Hintergrund.
Fetter Text und kursiver Text sind ebenfalls verfügbar. Dies ist ein Standard-Link in der Primary Orange Farbe.
Dies ist ein Blockzitat. Es verwendet eine größere Schrift (18px) und hat einen orangen linken Rand zur Hervorhebung.
Hover über die Buttons um den Effekt zu sehen (dunkleres Orange #e65533)
Normal State Hover State.cta-buttons ist ein Layout-Container für mehrere Buttons nebeneinander. Er fügt automatisch Spacing zwischen den Buttons hinzu (10px margin-right). Funktioniert mit allen Button-Typen: .btn-main, .btn-small, .btn-solid-border
Verwendet auf der Homepage im 4-Spalten-Layout (.col-md-3) für Kernkompetenzen.
Icons mit orangem Farbakzent, Hover-Effekt hebt die Karte an.
Wichtig: Benötigt Parent-Element mit Klasse .service
Setup, Migration und Betrieb von Kubernetes und OpenShift.
AWS, Azure, GCP - Cloud-Strategie und Migration.
LLM-Integration, AI-Automation und ML-Infrastructure.
Terraform, Terragrunt, Helm - Automatisierte Infrastruktur.
Umfassende Analyse Ihrer bestehenden Infrastruktur mit Fokus auf Cloud-Readiness.
Lassen Sie uns in einem unverbindlichen Gespräch besprechen, wie ich Sie unterstützen kann.
Jetzt Kontakt aufnehmenAlle Gespräche und Analysen werden streng vertraulich behandelt.
Bei Focus wird der Border orange (#ff6440)
Font Awesome Icons in Primary Orange (#ff6440)
fa-cloud
fa-server
fa-cogs
fa-shield-alt
fa-search
fa-dharmachakra
fa-check
fa-envelope
fa-phone
fa-map-marker-alt
fa-graduation-cap
fa-users
Standard margin-bottom für Komponenten:
Karte hebt sich um 10px und bekommt stärkeren Schatten
Alle interaktiven Elemente verwenden:
transition: all 0.3s ease;