msolarczekandClaude Opus 5
9ec7fa5356
- 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>
69 lines
3.2 KiB
Markdown
69 lines
3.2 KiB
Markdown
# 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`
|