Brand

Brand-Integration

Celestia ist als White-Label-System konzipiert – es stellt die technische und gestalterische Foundation, während die visuelle Identität vollständig an die jeweilige Kundenmarke angepasst wird. Diese Seite beschreibt, wie Brands in Celestia integriert werden.

Das White-Label-Prinzip

Foundation bleibt, Branding variiert

Konstant (Celestia Foundation):

Semantische HTML-Struktur
Barrierefreiheits-Standards (WCAG 2.1 AA)
Interaktionsmuster und UX-Prinzipien
Performance-Optimierungen
Komponenten-Architektur

Variabel (Kunden-Brand):

Farbpaletten und Farbsemantik
Typografie und Schriftarten
Bildsprache und Iconografie
Voice & Tone
Visuelle Details (Radien, Schatten, Animationen)

Vorteile dieses Ansatzes

Für Kund*innen:

Professionelle technische Basis ohne Kompromisse
Vollständige Markenindividualität
Schnellere Projektlaufzeiten
Kostenbewusste Lösung

Für Stutz Medien:

Skalierbare Projektumsetzung
Qualitätsgarantie durch Fundamentals
Effiziente Wartung durch Standards
Fokus auf strategische Beratung

Brand-Onboarding-Prozess

Phase 1: Brand Discovery

Ziel: Verständnis der Kundenmarke erlangen

Aktivitäten:

Brand Guidelines Review
Analyse bestehender Markenmaterialien
Workshops mit Marketing-Teams
Definition von Brand-Attributen

Deliverables:

Brand Audit Dokument
Design-Token-Mapping
Anforderungskatalog

Phase 2: Token-Konfiguration

Ziel: Design Tokens für die Marke definieren

Primäre Brand-Farben:

:root {
  /* Beispiel: TechCorp Brand */
  --color-brand-primary: #6b4ee6; /* Brand Purple */
  --color-brand-secondary: #00d9c0; /* Teal Accent */
  --color-brand-accent: #ff6b35; /* Orange Highlight */
}

Neutrale Palette:

/* Kann an Brand angepasst oder neutral bleiben */
--color-neutral-900: #1a1a1a; /* Fast black */
--color-neutral-100: #f5f5f5; /* Light gray */

Typografie:

/* Custom Fonts oder System Fonts */
--font-family-brand: "Brand Sans", system-ui, sans-serif;
--font-family-body: "Brand Serif", Georgia, serif;

Phase 3: Komponenten-Anpassung

Ziel: Core-Komponenten mit Brand-Identität versehen

Beispiele:

Button:

Primary: Brand Primary Farbe
Secondary: Brand Secondary oder neutral
Border-Radius: Brand-spezifisch (0px für scharf, 8px für weich)

Cards:

Schatten: Subtil oder ausgeprägt je nach Brand
Border-Radius: Konsistent mit Buttons
Background: White oder leicht getönt

Typography:

Überschriften: Brand Font oder neutral
Fliesstext: Lesbarkeit priorisieren
Spezielle Stile: Quotes, Leads

Phase 4: Custom Elements

Ziel: Brand-spezifische Komponenten erstellen

Typische Custom Components:

Hero-Section mit Brand-Bildsprache
Testimonial-Cards im Brand-Stil
Footer mit Brand-Struktur
Spezielle Formulare

Phase 5: Testing & Launch

Ziel: Qualitätssicherung und Go-Live

Checks:

Alle Brand-Farben korrekt implementiert
Typografie konsistent
Accessibility-Standards eingehalten
Responsive auf allen Geräten
Performance-Metriken erreicht
Kunden-Approval eingeholt

Design Token Strategie

Token-Hierarchie für Multi-Brand

Celestia Core Tokens (Fundamental)
  ↓
Brand Primitive Tokens (Kunden-Farben, Fonts)
  ↓
Brand Semantic Tokens (Kontextuelle Zuordnung)
  ↓
Component Tokens (Final)

Beispiel-Implementierung

Core (Konstant):

/* Immer gleich, unabhängig von Brand */
--spacing-scale-base: 4px;
--border-radius-none: 0;
--border-radius-sm: 2px;
--border-radius-md: 4px;
--border-radius-lg: 8px;

Brand Primitive (Variabel):

/* Projektspezifisch in theme.css */
--brand-purple-500: #6b4ee6;
--brand-purple-600: #5a3fd4;
--brand-teal-400: #00d9c0;

Semantic (Mapping):

/* Verbindet Core mit Brand */
--color-primary: var(--brand-purple-500);
--color-primary-hover: var(--brand-purple-600);
--color-accent: var(--brand-teal-400);

Typografie-Integration

Font-Strategien

Option 1: Google Fonts (Standard)

Kostenlos
Grosse Auswahl
Einfache Integration
CDN-Performance

Option 2: Adobe Fonts

Professionelle Qualität
Lizenz inklusive (bei Adobe CC)
Optimierte Web-Fonts

Option 3: System Fonts

Maximale Performance
Keine Ladezeit
“Native” Look
Für utility-fokussierte Brands

Option 4: Custom Fonts

Eigene Corporate Fonts
Hochgeladen als Asset
Lizenzprüfung erforderlich

Typografie-System

Unabhängig von Font beibehalten:

Type Scale (1.25 Ratio)
Line Heights (1.2 für Headings, 1.6 für Body)
Font Weights (400, 500, 600, 700)
Letter Spacing (-0.025em für Headings)

Bildsprache und Assets

Brand-Image-Strategie

Fotografie:

Authentisch vs. Stock
Farbgebung (natürlich vs. getönt)
Menschen vs. Produkte vs. Abstrakt
Stimmung (hell/optimistisch vs. dunkl/dramatisch)

Illustrationen:

Stil (geometrisch, organisch, handgezeichnet)
Farbschema (Brand-Farben oder neutral)
Komplexität (einfach vs. detailliert)

Icons:

Bibliothek (Tabler, Heroicons, Phosphor)
Stil (Outline vs. Filled vs. Duotone)
Grössen (16px, 20px, 24px)

Asset-Management

Struktur:

/public/brands/
  ├── brand-a/
  │   ├── logo.svg
  │   ├── fonts/
  │   └── images/
  └── brand-b/
      ├── logo.svg
      ├── fonts/
      └── images/

Voice & Tone Anpassung

Content-Strategie pro Brand

Formell vs. Informell:

Siezen vs. Duzen
Fachbegriffe vs. einfache Sprache
Lange vs. kurze Sätze

Persönlichkeit:

Professionell und seriös
Locker und umgänglich
Innovativ und disruptiv
Traditionell und vertrauenswürdig

Mikro-Copy

Button-Labels:

Formell: "Absenden", "Abbrechen", "Weiter"
Informell: "Los geht's!", "Nee, doch nicht", "Weiter so"
Action-oriented: "Jetzt starten", "Kostenlos testen", "Demo buchen"

Fehlermeldungen:

Technisch: "Error 404: Resource not found"
Nutzerfreundlich: "Ups, diese Seite existiert nicht. Zur Startseite?"
Brand-affin: "Hier ist nichts zu finden – aber wir haben was Besseres!"

Brand-Don’ts

Was vermieden werden sollte

Technische Einschränkungen:

Layout-Strukturen brechen
Accessibility-Standards missachten
Performance opfern
Mobile-First ignorieren

Design-Fehler:

Zu viele verschiedene Fonts
Kontrastverhältnisse unter WCAG AA
Überfrachtete Layouts
Inkonsistente Animationen

Brand-Konflikte:

Konkurrierende Primärfarben
Widersprüchliche Tonalität
Zu ähnlich an Mitbewerber
Keine klare Differenzierung

Governance und Prozesse

Brand-Approval

Wer genehmigt:

Design Lead bei Standard-Anpassungen
Kunde bei finaler Brand-Integration
Brand Manager bei komplexen Fällen

Dokumentation:

Brand Token Config
Style Guide pro Kunde
Component Library Screenshot
Design-Entscheidungen begründet

Brand-Evolution

Wie Brands sich weiterentwickeln können:

Saisonale Themes (Weihnachten, Sommer)
Campaign-Spezifische Landingpages
A/B-Testing mit Varianten
Graduelle Design-Updates

Best Practices

Dos

Brand Guidelines früh im Prozess einholen
Design Tokens systematisch aufsetzen
Alle Komponenten in Brand testen
Accessibility unabhängig von Brand sicherstellen
Kunden in den Prozess einbeziehen
Brand-Assets versionieren
Dokumentation für Handoff erstellen
Fallbacks für Fonts definieren

Don’ts

Brands zwingen, Celestia-Standard zu akzeptieren
Ohne Brand-Guidelines starten
Custom-Komponenten ohne Notwendigkeit erstellen
Performance für Brand-Features opfern
Unlizenzierte Fonts verwenden
Brand-Konsistenz über Projekte hinweg ignorieren
Accessibility für “schönes Design” aufgeben
Kunden ohne Approval deployen

Jede Marke ist einzigartig. Celestia stellt sicher, dass diese Einzigartigkeit technisch exzellent und skalierbar umgesetzt wird.