MT-R/PoC-mt-r
1
0
Fork 0
Code Issues 15 Pull requests Projects Releases Packages Wiki Activity Actions

Brand-Icon: länglicher Schriftzug + quadratische Variante (MT-/Rad) #18

New issue
Closed
opened 2026-07-07 10:06:41 +02:00 by kreativmonkey · 1 comment
kreativmonkey commented 2026-07-07 10:06:41 +02:00
Owner
Copy link

Für die neue Marke MT-Rad sollen echte Logo-/Icon-Assets entstehen (bisher ist die Wortmarke rein CSS im Theme, es gibt kein Logo-Asset — u. a. für Favicon, Sveltia-Panel, Social/OG).

Gewünscht (zwei Varianten)

  1. Länglicher Schriftzug (horizontale Wortmarke): „MT‑Rad" wie im aktuellen Header — Serif „Bitter" 800, roter Bindestrich, ggf. mit Claim.
  2. Quadratische Variante (App-Icon/Favicon-tauglich): „MT‑" in der ersten, „Rad" in der zweiten Zeile, quadratisch, auch klein lesbar.

Vorgaben (Design-Entscheidungen, bereits getroffen)

  • Wortmarke Slab-Serif Bitter 800, roter Bindestrich als Marken-Element.
  • Farbwelt (aus dem Theme): Anthrazit #343434, Slate #4b656d, Rot #d10000, Teal #7bb1b9. Kein „AI-Slop"-Look, an die modernisierte Alt-Palette halten.
  • Als SVG (skalierbar), plus abgeleitete PNG-Favicons/Apple-Touch/OG in üblichen Größen. In poc-hugo-sveltia/static/ ablegen und im Theme verdrahten (Favicon in baseof.html, optional Sveltia logo in static/admin/config.yml, OG-Image).

Ergebnis in diesem Issue festhalten: die erzeugten Assets (Pfade), wo sie eingebunden sind, ggf. kurze Vorschau/Beschreibung. Bezug zu #9 (Branding MTA-R→MT-R).

Bearbeitung: Hintergrund-Subagent, Modell Sonnet (SVG/Design, self-contained). Branch + PR gegen poc-hugo-sveltia.

Für die neue Marke **MT-Rad** sollen echte Logo-/Icon-Assets entstehen (bisher ist die Wortmarke rein CSS im Theme, es gibt kein Logo-Asset — u. a. für Favicon, Sveltia-Panel, Social/OG). **Gewünscht (zwei Varianten)** 1. **Länglicher Schriftzug** (horizontale Wortmarke): „MT‑Rad" wie im aktuellen Header — Serif „Bitter" 800, **roter Bindestrich**, ggf. mit Claim. 2. **Quadratische Variante** (App-Icon/Favicon-tauglich): **„MT‑" in der ersten, „Rad" in der zweiten Zeile**, quadratisch, auch klein lesbar. **Vorgaben (Design-Entscheidungen, bereits getroffen)** - Wortmarke Slab-Serif **Bitter 800**, roter Bindestrich als Marken-Element. - Farbwelt (aus dem Theme): Anthrazit `#343434`, Slate `#4b656d`, **Rot `#d10000`**, Teal `#7bb1b9`. Kein „AI-Slop"-Look, an die modernisierte Alt-Palette halten. - Als **SVG** (skalierbar), plus abgeleitete PNG-Favicons/Apple-Touch/OG in üblichen Größen. In `poc-hugo-sveltia/static/` ablegen und im Theme verdrahten (Favicon in `baseof.html`, optional Sveltia `logo` in `static/admin/config.yml`, OG-Image). **Ergebnis in diesem Issue festhalten:** die erzeugten Assets (Pfade), wo sie eingebunden sind, ggf. kurze Vorschau/Beschreibung. Bezug zu #9 (Branding MTA-R→MT-R). _Bearbeitung: Hintergrund-Subagent, Modell Sonnet (SVG/Design, self-contained). Branch + PR gegen `poc-hugo-sveltia`._
kreativmonkey commented 2026-07-07 10:18:00 +02:00
Author
Owner
Copy link

Umgesetzt in PR MT-R/poc-hugo-sveltia#2

Branch feat/brand-icons → MT-R/poc-hugo-sveltia#2

Erzeugte Assets

Alle Dateien liegen in static/ des Hugo-Repos (MT-R/poc-hugo-sveltia):

Pfad Beschreibung
static/brand/wortmarke.svg Horizontale Wortmarke „MT-Rad" (310×104 px)
static/brand/icon-square.svg Quadratisches App-Icon „MT-/Rad" (512×512 px)
static/brand/icon-512.png PNG-Derivat 512×512
static/brand/og-image.svg OG-Image-Vorlage (1200×630)
static/brand/og-image.png OG-Image PNG (1200×630)
static/favicon.svg SVG-Favicon (modern, 64×64 ViewBox)
static/favicon-32x32.png PNG-Favicon 32×32
static/apple-touch-icon.png Apple Touch Icon 180×180

Design-Entscheidungen

  • Font: Bitter ExtraBold (wght=800) via fontTools als SVG-Pfade extrahiert — vollständig self-contained, kein externer Fontserver nötig
  • Markenelement: Bindestrich in Rot #d10000 (wie im bestehenden CSS-Theme)
  • Palette eingehalten: Anthrazit #343434 · Rot #d10000 · Slate #4b656d · Teal #7bb1b9
  • Square-Icon: „MT-" Zeile 1 / „Rad" Zeile 2 — auch bei 32 px lesbar (geprüft)
  • OG-Image: rote Akzentlinie oben (wie site-header border-top), teal-Linie unten

Einbindung

  • layouts/_default/baseof.html: Favicon-Links (<link rel="icon">, apple-touch-icon) + Open Graph + Twitter-Card-Meta-Tags
  • static/admin/config.yml: logo: /brand/icon-square.svg → Sveltia-Redaktionspanel zeigt das Icon auf der Login-Seite
  • scripts/gen-brand-svgs.py: Generator-Script für reproduzierbare Neugeneration (benötigt fontTools + resvg)

Build-Status

nix develop --command hugo baut sauber (42 statische Dateien, keine Fehler/Warnungen).

## Umgesetzt in PR MT-R/poc-hugo-sveltia#2 Branch `feat/brand-icons` → https://git.f4mily.net/MT-R/poc-hugo-sveltia/pulls/2 ### Erzeugte Assets Alle Dateien liegen in `static/` des Hugo-Repos (`MT-R/poc-hugo-sveltia`): | Pfad | Beschreibung | |---|---| | `static/brand/wortmarke.svg` | Horizontale Wortmarke „MT-Rad" (310×104 px) | | `static/brand/icon-square.svg` | Quadratisches App-Icon „MT-/Rad" (512×512 px) | | `static/brand/icon-512.png` | PNG-Derivat 512×512 | | `static/brand/og-image.svg` | OG-Image-Vorlage (1200×630) | | `static/brand/og-image.png` | OG-Image PNG (1200×630) | | `static/favicon.svg` | SVG-Favicon (modern, 64×64 ViewBox) | | `static/favicon-32x32.png` | PNG-Favicon 32×32 | | `static/apple-touch-icon.png` | Apple Touch Icon 180×180 | ### Design-Entscheidungen - **Font**: Bitter ExtraBold (wght=800) via `fontTools` als **SVG-Pfade** extrahiert — vollständig self-contained, kein externer Fontserver nötig - **Markenelement**: Bindestrich in Rot `#d10000` (wie im bestehenden CSS-Theme) - **Palette eingehalten**: Anthrazit `#343434` · Rot `#d10000` · Slate `#4b656d` · Teal `#7bb1b9` - Square-Icon: „MT-" Zeile 1 / „Rad" Zeile 2 — auch bei 32 px lesbar (geprüft) - OG-Image: rote Akzentlinie oben (wie `site-header border-top`), teal-Linie unten ### Einbindung - `layouts/_default/baseof.html`: Favicon-Links (`<link rel="icon">`, `apple-touch-icon`) + Open Graph + Twitter-Card-Meta-Tags - `static/admin/config.yml`: `logo: /brand/icon-square.svg` → Sveltia-Redaktionspanel zeigt das Icon auf der Login-Seite - `scripts/gen-brand-svgs.py`: Generator-Script für reproduzierbare Neugeneration (benötigt `fontTools` + `resvg`) ### Build-Status `nix develop --command hugo` baut sauber (42 statische Dateien, keine Fehler/Warnungen).
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
MT-R/PoC-mt-r#18
No description provided.