itstube.de CI-Center

🎨 Farbpalette

Primär Blau

#3b4d66

Gradient Start

#667eea

Gradient End

#764ba2

Hell Grau

#f8fafc

Border Grau

#e5e7eb

Text Dunkel

#333333

Text Medium

#666666

Weiß

#ffffff

🔤 Schriftarten

Primäre Schrift: Inter

ITSTUBE.DE

Innovative IT-Lösungen für Ihr Unternehmen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Verwendung: Alle Text-Elemente, Headlines, Navigation, Body-Text

Fallback-Schriften

System Font Stack für optimale Performance

Fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

Font-Weights:
• Regular (400) - Fließtext
• Medium (500) - Navigation, Labels
• Semibold (600) - Subtitles, wichtige Texte
• Bold (700) - Headlines, Titel

🏷️ Logos & Markenzeichen

🧩 UI-Komponenten

Buttons

Card Styles

Standard Card
Border-radius: 15px, Box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08)

Navigation Items

Active

Inactive

Item

🔧 Icons & Symbole

🖥️

IT-Services

☁️

Cloud

🔧

Support

📱

Mobile

🛡️

Security

💾

Data

🌐

Web

⚡

Performance

📋 Brand Guidelines

Logo-Verwendung

Mindestgröße: 120px Breite für optimale Lesbarkeit
Mindestabstand: 20px zu anderen Elementen
Niemals verzerren, rotieren oder anderweitig modifizieren
Immer auf ausreichenden Kontrast achten
Hover-Effekt: transform: scale(1.05)

Farb-Richtlinien

Primärfarbe #3b4d66 für Navigation und wichtige UI-Elemente
Gradient #667eea → #764ba2 für Buttons und Highlights
Grau-Töne #f8fafc, #e5e7eb für Backgrounds und Borders
Text: #333 (dunkel), #666 (medium), #555 (Listen)
Barrierefreiheit: Minimum Kontrast 4.5:1 beachten

Typografie

Headlines: Inter Bold (700), ab 24px
Subtitles: Inter Semibold (600), 16-20px
Body Text: Inter Regular (400), 16px, line-height: 1.6
Navigation: Inter Medium (500), 14-16px
Zeilenhöhe: 1.6 für optimale Lesbarkeit

Spacing & Layout

Container max-width: 1200px
Standard padding: 2rem (Desktop), 1rem (Mobile)
Card padding: 2rem (Desktop), 1.5rem (Mobile)
Border-radius: 15px (Cards), 20px (große Bereiche), 25px (Buttons)
Box-shadows: 0 4px 15px rgba(0, 0, 0, 0.08)

Animations

Standard transition: all 0.3s ease
Hover transform: translateY(-3px)
Button hover: translateY(-2px)
Backdrop-filter: blur(10px) für glasmorphe Effekte