craftvia/docs/branding/Aufgabenpaket-Branding-Certvia.md

Umsetzungspaket — Vollständige Branding-Umstellung auf Certvia

Claude-Code-Prompt für einen Entwickler. Basis-Branch dev, Feature-Branch dev/branding-certvia (PR-Ziel dev). Quelle der Wahrheit: Certvia Brand-Board (Certvia-Brand-Board-final.html) + Logo-SVGs (certvia-mark-positiv/negativ/grau/anthrazit.svg, certvia-favicon.svg, certvia-lockup-positiv.svg) aus Certvia-Design-Uebergabe.zip.

0. Ziel & Leitplanken

Die App vollständig auf den Certvia-Styleguide umstellen — Logo, Wortmarke, App-Name, Favicon/Icons, Typografie, Marken-/UI-Farben, Dokument-/Export-Design und alle Texte. Wichtige Leitplanken:

• GEFIM bleibt Dachmarke. „Ein Produkt von GEFIM" (inkl. GEFIM-Logo) bleibt im Footer/Impressum/Export-Fußzeile erhalten. Nur die Produktmarke wird Certvia.
• UI-Farben bleiben wie initial festgelegt (Dark-Theme-Primär #7d6fd6 etc.) — sie sind die Certvia-UI-Palette. Nicht „korrigieren". Marken-Violett #5d52a3 gilt für Logo/Print/Verläufe, UI-Interaktiv bleibt #7d6fd6.
• Keine Funktionsänderung — reines Branding/Design. Kein Umbau von Logik/Datenmodell.

---

1. Design-Tokens (verbindliche Referenz)

Markenfarben (Logo, Print, Verläufe, Akzent):

Rolle	Hex
Violett (Marke)	#5d52a3
Magenta (Akzent: „via", Haken, Highlights)	#812d80
Hellblau	#8dc4e0
Anthrazit (Text/Headlines)	#3b3b3a

UI Dark-Theme (unverändert, = Certvia-Produktpalette): --violet:#7d6fd6 · --violet-deep:#5d52a3 · --blue:#8dc4e0 · --magenta:#b45bb0 · --bg0:#0e1220 · --bg1:#141a2e · --panel:rgba(30,38,64,.72) · --panel-b:rgba(120,135,180,.18) · --elev:#1a2138 · --txt:#e8ecf7 · --muted:#8b93ad · --ok:#39c07f · --warn:#f0ad4e · --risk:#ff6b6b · Primär-Verlauf linear-gradient(135deg,#5d52a3,#7d6fd6) · Fokus-Ring rgba(125,111,214,.35).

Typografie: Headlines/Wortmarke Poppins, Fließtext Open Sans (bereits im Einsatz — bestätigen, selbst hosten, kein ungefragtes Google-Fonts-CDN).

Logo/Marke: C-Monogramm (offenes „C" Violett #5d52a3 + Haken Magenta #812d80, Haken schließt bündig an die C-Öffnung). Wortmarke „Cert" (Poppins Light, Anthrazit) + „via" (Poppins Bold, Magenta). Auf dunklem Grund: C #7d6fd6, Haken #d17bcf, Text weiß.

---

2. Story B0 — Bestandsaufnahme / Branding-Inventar (zuerst!) (S)

Als Entwickler möchte ich alle Branding-Berührungspunkte finden, damit nichts übersehen wird.

• Repo-weit suchen und als kurze Inventarliste (Datei → Fundstelle → Maßnahme) dokumentieren:

  rg -i "gefim" -l            # Produktname vs. Dachmarke unterscheiden
  rg -i "shield|logo|brand|favicon|wordmark|app[_-]?name|siteName|title" src public
  rg -i "#5d52a3|#7d6fd6|#812d80|#8dc4e0|#b45bb0|#0e1220" src   # hartkodierte Farben außerhalb der Tokens
  rg -i "poppins|open sans|fonts.googleapis" src public
  

• AK: Inventarliste liegt vor; jede Fundstelle ist einer der Stories S1–S9 zugeordnet; klar getrennt „Produktmarke → Certvia" vs. „Dachmarke → GEFIM bleibt".

---

3. Stories

S1 — Design-Tokens zentralisieren & Certvia-Palette verankern (M)

• Eine zentrale Token-Quelle (CSS-Variablen/theme/Tailwind-Config) als Single Source of Truth; hartkodierte Farben aus S0 durch Tokens ersetzen.
• Marken- vs. UI-Tokens klar benennen (--brand-violet #5d52a3 vs. --ui-primary #7d6fd6), damit Logo/Print und UI nicht vermischt werden.
• AK: keine hartkodierten Markenfarben mehr in Komponenten; Umschalten zentral möglich; UI optisch unverändert (nur konsolidiert).

S2 — Logo, Wortmarke & Icons (M)

• App-Header/Sidebar, Login (/login) und Plattform-Login (/platform/login): GEFIM-Schild → Certvia-Logo (Lockup C-Monogramm + „Certvia"). Dark-Variante nutzen.
• Favicon + PWA/Manifest-Icons (public/, manifest.webmanifest, apple-touch-icon) auf certvia-favicon.svg (C auf Violett-Tile) und generierte PNGs (32/180/192/512).
• meta-theme-color = #5d52a3 (schon so auf der Website).
• SVG-Assets aus dem Design-Paket in public/assets/logo/ bzw. src/components/brand/ einbinden; Logo als React-Komponente <CertviaLogo variant="lockup|mark" theme="light|dark" />.
• AK: in allen App-Bereichen erscheint das Certvia-Logo; Favicon/Tab-Icon = Certvia; keine GEFIM-Schild-Reste in Produkt-UI.

S3 — App-Name, Titel, Meta & i18n-Texte (S–M)

• App-Name/<title>/OG-/Twitter-Meta, PWA-Name, Sidebar-Kopf, „Über"/Version-Info → Certvia.
• i18n (de/en): alle Produktname-Strings auf „Certvia"; Tagline „Informationssicherheit. Endlich einfach." wo passend.
• AK: Browser-Tab, Meta, Manifest und sichtbare Produktnamen zeigen „Certvia"; „ein Produkt von GEFIM" bleibt erhalten.

S4 — Typografie bestätigen & selbst hosten (S)

• Poppins (300/400/500/600/700) + Open Sans (400/600/700) self-hosted (woff2) statt CDN; Fallback-Stack; font-display: swap.
• AK: keine externen Font-Requests; Wortmarke „Certvia" korrekt (Light + Bold), Headlines Poppins, Fließtext Open Sans.

S5 — Dokument-/Export-Corporate-Design (M–L)

• DOCX/PDF/Print-Export (Richtlinien, VDA-ISA-Katalog, Reports) auf Certvia-Corporate-Design: Deckblatt/Kopf mit Certvia-Logo + Farben, Fußzeile „Certvia — ein Produkt von GEFIM" + GEFIM-Logo, Poppins/Open Sans.
• Betrifft den (offenen) DOCX/PDF-Export — Branding-Layer so bauen, dass er beim Export-Feature andockt.
• AK: exportierte Dokumente tragen Certvia-Branding; GEFIM als Dachmarke in der Fußzeile.

S6 — E-Mail-/Benachrichtigungs-Templates (S–M, falls vorhanden)

• Sobald SMTP/E-Mail (Paket 4) existiert bzw. für Einladungs-/Reset-Mails: Header/Footer/Farben/Logo auf Certvia; Absender-/Signatur-Text „Certvia — ein Produkt von GEFIM".
• Falls E-Mail noch nicht aktiv: nur die Template-Basis brandfähig vorbereiten.
• AK: vorhandene Mail-Templates gebranded oder brandfähige Basis vorbereitet.

S7 — Auth-, Fehler- & Systemseiten (S)

• Login, Change-Password, deaktiviertes Konto, 404/500, Wartungs-/Status-Banner, Loading-/Empty-States: Certvia-Logo + Palette.
• AK: keine ungebrandeten/gemischten Screens mehr.

S8 — Mandanten-Branding-Default = Certvia (S–M)

• Der Whitelabel-/Branding-Fallback je Mandant (Admin Phase 2 „Logo-Upload") ist Certvia als Default; Custom-Logo überschreibt nur, wenn gesetzt.
• AK: ohne Custom-Logo zeigt jeder Mandant Certvia; „ein Produkt von GEFIM" bleibt unabhängig davon.

S9 — Restliche GEFIM-Referenzen bereinigen (S)

• Alle in S0 gefundenen Produkt-Referenzen „GEFIM" → „Certvia" (Kommentare, Alt-Texte, aria-labels, Klassennamen unkritisch). Dachmarken-Hinweise bewusst belassen.
• AK: rg -i "gefim" liefert nur noch Dachmarken-Kontext (Footer/Impressum/Export-Fußzeile/Assets gefim/).

---

4. QA / Definition of Done

• Visuelles Review der Kernscreens (Dashboard, Richtlinien, Assets, Risiken, Lieferanten, Aufgaben, Admin, beide Logins, Export, Fehlerseiten) hell und dunkel — Screenshots im PR.
• Kontrast prüfen: Magenta #812d80 auf Weiß und #d17bcf auf Dunkel (WCAG AA für Text/aktive Elemente).
• rg -i "gefim" = nur Dachmarken-Kontext; keine externen Font-/Logo-Requests; keine hartkodierten Markenfarben.
• npx tsc --noEmit → npm run lint → npm run build grün; Demo-Umgebung lauffähig.
• Reines Branding-PR — keine funktionalen Diffs.

5. Reihenfolge

S0 (Inventar) → S1 (Tokens) → S2 (Logo/Icons) → S3 (Name/Meta/i18n) → S4 (Fonts) → S7 (Auth/Fehler) → S9 (Cleanup) → S5 (Export) → S8 (Mandanten-Default) → S6 (Mail, falls vorhanden).

6. Assets (mitliefern an den Entwickler)

Aus Certvia-Design-Uebergabe.zip: logo/certvia-mark-positiv.svg, -negativ.svg, -grau.svg, -anthrazit.svg, certvia-favicon.svg, certvia-lockup-positiv.svg, logo/README-Logo.md, Brand-Board.html (Farb-/Typo-Referenz) sowie gefim-dachmarke/ (GEFIM-Logo für den „ein Produkt von GEFIM"-Hinweis).

Hinweis: Falls PNG-Rastergrößen (Favicon/Apple-Touch/PWA 32/180/192/512) benötigt werden, kann ich sie aus dem SVG erzeugen und beilegen — sag kurz Bescheid.