Files

T

msolarczekandClaude Opus 5 9ec7fa5356 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>

2026-09-14 11:39:52 +02:00

3.2 KiB

Raw Blame History

Craftvia — Branding in der Anwendung

Maßgeblich ist das Brandbook: BRANDBOOK.md (§11.4 Farben, §11.5 Typografie). Referenzbild: 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:

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

3.2 KiB Raw Blame History Unescape Escape