Fundament: Branding Craftvia

- Farb-Tokens laut Brandbook §11.4 (Lotsenblau, Signalorange, Graphit, Hafengrau,
  Stahlgrau, Zink, Funktionsfarben) in globals.css + src/lib/brand.ts; helles Theme
- Inline-SVG-Logo src/components/brand/craftvia-logo.tsx (horizontal/signet,
  color/mono/reversed, App-Icon-Kachel, optionale Tagline); Certvia-/GEFIM-Logos entfernt
- Favicon/PWA-Icons aus dem Signet erzeugt (scripts/generate-brand-icons.ts),
  site.webmanifest (Craftvia, theme_color #082E5B)
- Inter selbst gehostet (next/font/local, lokale OFL-Datei), Open Sans/Poppins entfernt
- Metadaten, WebAuthn-RP-Name, Mail-/Dokument-CD auf Craftvia umgestellt
- docs/craftvia/BRANDING.md ersetzt docs/BRANDING-CERTVIA.md

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-14 11:39:52 +02:00
co-authored by Claude Opus 5
parent 8491c7f173
commit 9ec7fa5356
62 changed files with 549 additions and 1070 deletions
+68
View File
@@ -0,0 +1,68 @@
# Craftvia — Branding in der Anwendung
Maßgeblich ist das Brandbook: [BRANDBOOK.md](BRANDBOOK.md) (§11.4 Farben, §11.5 Typografie).
Referenzbild: [assets/craftvia-brand-identity-v1.png](assets/craftvia-brand-identity-v1.png).
Dieses Dokument beschreibt, **wo** die Marke im Code verankert ist.
## Quellen der Wahrheit
| Was | Datei |
|---|---|
| CSS-Tokens (Browser) | `src/app/globals.css` — `--brand-*` (Kernfarben), `--ui-*` (UI-Rollen), shadcn-Tokens abgeleitet |
| JS-Konstanten (Metadaten, Mail, Dokumente) | `src/lib/brand.ts` — `BRAND`, `BRAND_COLORS`, `STATUS_COLORS`, `BRAND_FONTS` |
| Logo (Inline-SVG) | `src/components/brand/craftvia-logo.tsx` |
| Mandanten-Logo-Override | `src/components/brand/tenant-brand.tsx` + `resolveTenantBranding()` |
| E-Mail-Layout | `src/lib/email-brand.ts` |
| Dokument-/Druck-CD | `src/lib/document-brand.ts`, `@media print` in `globals.css` |
| Favicon/PWA-Icons | `scripts/generate-brand-icons.ts` → `public/favicon/*`, `public/favicon.ico` |
| Manifest | `public/site.webmanifest` (`theme_color` #082E5B) |
## Farben
| Rolle | Name | Hex | Token |
|---|---|---|---|
| Primär | Lotsenblau | `#082E5B` | `--brand-lotsenblau` → `--primary` |
| Akzent/CTA | Signalorange | `#FF6A00` | `--brand-signalorange` → `--ui-accent` (`bg-cta`) |
| Text | Graphit | `#34383D` | `--foreground` |
| Fläche | Hafengrau | `#F3F5F7` | `--background` |
| Sekundärtext | Stahlgrau | `#66727D` | `--muted-foreground` |
| Linien | Zink | `#D9E0E5` | `--border`, `--input` |
| Erfolg / Warnung / Fehler / Info | | `#23845D` / `#C87912` / `#C64242` / `#2F6FA3` | `--ok` / `--warn` / `--risk` / `--info` |
Regeln: Signalorange sparsam (eine Hauptaktion je Ansicht, aktive Elemente). Farbe nie
als einziges Statussignal — immer mit Text oder Icon. Keine Verläufe, keine Schlagschatten
(`--shadow-card` ist eine feine Kontur); die Utility-Namen `bg-grad*` zeigen Vollfarbe.
## Logo
`<CraftviaLogo />` — Props:
- `variant`: `"horizontal"` (Signet + Wortmarke, Default) | `"signet"`
- `tone`: `"color"` (Default) | `"mono"` (einfarbig Lotsenblau) | `"reversed"` (weiß, für dunkle Flächen)
- `tile` (nur Signet): App-Icon-Kachel in Lotsenblau mit weißem C und orangem Haken
- `tagline`: „Handwerk. Digital auf Kurs." unter der Wortmarke
- `height`: Renderhöhe in px
Konstruktion (viewBox 64×64, exportiert als `SIGNET`): kräftiges C (Kreisbogen r=19,
Strichstärke 11) mit Öffnung rechts oben; oranger Haken startet links außerhalb, durchquert
das C (dort per Maske freigestellt) und endet als Pfeil nach rechts oben. Wortmarke
„Craft" Lotsenblau + „via" Signalorange, Gewicht 800.
Nach Änderungen an der Geometrie Icons neu erzeugen:
```bash
npx tsx scripts/generate-brand-icons.ts
```
## Typografie
Inter (Brandbook §11.5), selbst gehostet über `next/font/local`
(`src/app/fonts/inter-variable.ttf`, SIL Open Font License) — kein Laden aus dem Netz.
TODO: auf woff2-Subsets umstellen (Dateigröße).
## Produktidentität
- Name: **Craftvia**, Tagline: **Handwerk. Digital auf Kurs.**
- In-Product-Assistent: **Lotse** (eigene Figur, getrennt vom Logo; Modul `lotse`)
- TOTP-Issuer: `Craftvia · Plattform` (`src/server/mfa.ts`), WebAuthn-RP-Name: `Craftvia`
- Mail-Absender-Default: `MAIL_FROM_NAME` → `Craftvia`