HexaHost Branding Guide

Dieser Guide basiert auf dem bestehenden Design aus HexaHost-Frontend und HexaHost-Backend. Nutze ihn als Standard für neue Projekte, damit Optik, Struktur und Tonalität konsistent bleiben.

1) Markenidentität

Positionierung: Zuverlässiges Hosting mit persönlichem Support aus Deutschland.
Tonalität: Klar, direkt, professionell, vertrauensvoll.
Bildsprache: Modern, technisch, leicht futuristisch (Glassmorphism + Neon-Akzente).

2) Farben

Primäre Farben:

Hintergrund: #0d0821
Primary: #ff51f9
Accent Violet: #a348ff
Accent Blue: #3978ff
Highlight: #f093ff

Weitere Farben:

Success: #32fba2
Warning: #ffcc00
Error: #ff4d6d
Text Primary: #ffffff
Text Secondary: #cfc9dd

Designprinzip:

Dunkler Hintergrund + leuchtende Akzente.
Gradient-Buttons für wichtige CTAs.
Transparente Karten mit Blur für Tiefe.

3) Typografie

Hauptschrift: Inter (Body, Navigation, UI)
Logo/Brand: Russo One (nur sparsam nutzen)
Sekundär: Source Sans Pro (optional für Slogans)

Empfohlene Größen:

H1: 3rem
H2: 2.25rem
H3: 1.5rem
Body: 1rem
Small: 0.875rem

4) Layout und Spacing

Container-Breite: 1200px
Standard-Abstand horizontal: 1.5rem
Sektionen: 3rem bis 4rem vertikales Padding
Radius: 0.75rem bis 1.5rem

5) Komponenten

Header: Fixiert mit Blur-Hintergrund.
Buttons:
- Primary: Pink/Violett-Gradient
- Secondary: Glas-Look mit Border
Cards: .glass-card mit Blur, Border und Shadow.
Footer: 3-4 Spalten mit Produkt-, Firmen- und Support-Links.

6) Inhaltsstruktur (Seiten)

Jede neue Marketing-Seite sollte diese Reihenfolge nutzen:

Hero (Claim + CTA)
Leistungs- oder Produktsektion
Vorteilsektion
Vertrauens-/Support-Sektion
Abschließende CTA
Footer

7) Text- und CTA-Regeln

CTAs immer aktiv formulieren:
- "Jetzt starten"
- "Produkte entdecken"
- "Kontakt aufnehmen"
Pro Abschnitt ein klares Ziel.
Kurze, konkrete Nutzenargumente statt technischer Überladung.

8) Technische Standards

Wiederverwendbare Includes für Header/Footer nutzen.
Styles zentral in assets/css/style.css.
JS nur für Interaktion (Navigation, Accordions, Form-Hinweise).
Performance: Preconnect für Fonts/CDN und CSS früh laden.

9) Template-Nutzung

Verwende den Ordner HexaHost-Template-Website als Startpunkt:

public/index.php als Basisseite
includes/header.php und includes/footer.php für einheitliches Layout
assets/css/style.css für Designsystem und Komponenten

2.5 KiB Raw Permalink Blame History