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:
@@ -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`
|
||||
Reference in New Issue
Block a user