101 lines
2.5 KiB
Markdown
101 lines
2.5 KiB
Markdown
# 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:
|
|
|
|
1. Hero (Claim + CTA)
|
|
2. Leistungs- oder Produktsektion
|
|
3. Vorteilsektion
|
|
4. Vertrauens-/Support-Sektion
|
|
5. Abschließende CTA
|
|
6. 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
|
|
|