Brand-Assets
Was hier liegt
| Datei | Inhalt | Verwendung |
|---|---|---|
logo-mark.svg |
Das W-Monogramm mit Wolfskopf, aus dem Original-Logo der Kundin abgeleitet | Header, Hero, WOLF-Prinzip, Footer, Vorhang beim Seitenwechsel, 404 |
logo-full.png |
Komplettes Lockup (Monogramm + Wortmarke) auf Tinte, 2400 × 1260 px | Social-Preview (OpenGraph), z. B. beim Teilen auf LinkedIn |
Wie logo-mark.svg entstanden ist
Quelle: v3-anelia-wolf-gold.svg der Kundin. Daraus wurde für die Website aufbereitet:
- C2PA-Metadaten entfernt. Der Block war rund 16 KB groß und wird auf jeder Seite mit eingebettet, weil das Monogramm inline im HTML steht.
- Weißes Hintergrundrechteck entfernt, damit die Marke auf Tinte und auf Elfenbein sitzt.
- Wortmarke entfernt. „ANELIA WOLF“ steht auf der Website als echter Text (Jost, gesperrt),
nicht als Bild: das bleibt bei jeder Fenstergröße scharf, ist vorlesbar und lässt sich
markieren. Das Original-Lockup steckt in
logo-full.png. viewBoxauf die Marke beschnitten, damit sie in ihrem Feld keine Luft verschenkt.- Die schwarzen Flächen auf
currentColorgestellt. Dadurch ist das W auf dunklen Flächen elfenbein und auf hellen tinte, ohne zweite Datei. Der Wolf behält seinen Goldverlauf. - Feste IDs vergeben:
v-left,v-right,wolf.BrandMark.tsxhängt daran die Klassen für die Animation.
Die Original-Koordinaten wurden nicht verändert, nur der Ausschnitt. Der Goldverlauf
(userSpaceOnUse) trifft deshalb exakt dieselben Stellen wie im Original.
Wenn ein neues Logo kommt
Die Datei einfach ersetzen. Voraussetzungen:
- SVG, kein
<script>. Ein Skript bricht den Build absichtlich ab, mit Fehlermeldung. Die Datei wird inline eingebettet, auf einer Seite, die „keine externen Skripte“ zusagt. - Kein Hintergrundrechteck, transparent.
- Die schwarzen Teile auf
fill="currentColor", der Wolf auf seinen Verlauf. - IDs
v-left,v-right,wolfvergeben, sonst wird in DOM-Reihenfolge animiert.
Fehlt die Datei ganz, zeichnet die Website automatisch die eigene Näherung
(src/components/brand/WolfMark.tsx). Nichts bricht.
Portraits
Fotos von Anelia gehören nach public/photos/, siehe die dortige README.