itstube.de

Corporate Identity Center - Alle Marken-Assets an einem Ort

🎨 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

📥 Assets Download

Laden Sie alle Brand-Assets und Ressourcen herunter