management/docs/wiki/architecture/branding.md

---
type: wiki-page
area: architecture
related: []
---

# Branding: Marke, Farben, Bildsprache

Übergreifend, weil dieselben Farben in mehreren Oberflächen eingestellt werden
(Chat-Clients, Wikis, künftige Dienste) und sich das nicht pro Host oder Linie
trennen lässt: **Bestand** (welche Farbe wo eingetragen ist) und **Historie**
(was wann warum geändert wurde).

Hier im `management`-Repo, weil es als einziges der beteiligten Repos
**gespiegelt** ist und jede Werkzeugentscheidung überlebt: Wird das
BookStack-Experiment nach [ADR-0007](../../adr/0007-wiki-oberflaeche-docusaurus-vs-bookstack.md)
abgeräumt oder ein Client ersetzt, bleiben Marke und Paletten bestehen.

## Bildmarke

`threadnet-mark.png` (Bildmarke) und `threadnet-logo-wortmarke.png` (mit
Schriftzug), erstellt von sorb. Sie liegen im Wiki-Repo unter `static/img/` und
sind die Quelle für alle abgeleiteten Formate — Favicon, App-Icons für macOS,
Windows und Linux, Web-Icons.

⚠️ Beim Ableiten den **transparenten Rand wegschneiden** und mit `resize()`
skalieren, nicht mit `thumbnail()` — Letzteres verkleinert nur und lässt das Motiv
in großen Icons als Briefmarke zurück (real passiert, siehe
[AAR 2026-08-02](../../aar/2026-08-02-wiki-und-desktop-clients.md)).

⚠️ **Und danach mittig setzen — das ist ein zweiter, eigener Schritt.** Beim ersten
Anlauf wurde nur beschnitten und skaliert: Das Motiv füllte 81 % der Breite, saß
aber mit 3 % Rand oben und 40 % unten an der Oberkante. In runden und quadratischen
Icon-Slots fällt das sofort auf. Korrigiert am 2026-08-06 auf 21 % oben wie unten.

**Das Rezept, das jetzt gilt:** Bounding-Box des Motivs ermitteln, darauf
beschneiden, auf ~81 % der Kantenlänge skalieren, auf einer quadratischen,
transparenten Fläche **mittig einsetzen**. Alle Größen aus *derselben* Quelldatei
ableiten — dann können sie nicht auseinanderlaufen.

### Wo überall Icons liegen

Elf Artefakte, alle aus einer Quelle (Stand 2026-08-06, `v0.4.0`):

| Ort | Was |
|---|---|
| `apps/web/res/vector-icons/` | 1024, 512, 180, 152, 144, 120, 24 px |
| `apps/desktop/build/icon.png` | App-/Installer-Icon |
| `apps/desktop/build/icon.ico` | Windows, 7 Größen von 16 bis 256 |
| `apps/desktop/build/icon.icns` | macOS, via `iconutil` aus einem `.iconset` |
| `apps/desktop/build/icon.icon/Assets/element.png` | Layer des macOS-Icon-Composers |

Prüfen lässt sich die Gleichheit über die Prüfsumme von `vector-icons/1024.png`
gegen `build/icon.png` — weichen sie ab, ist eine Seite nachgezogen worden und die
andere nicht.

## Paletten

### aXion1337 Dark — das Stammschema

Gruvbox Dark. Grundtöne `#282828` / `#1d2021`, Text `#ebdbb2`, Akzent `#bd93f9`,
Sekundär `#fe8019`. Die acht Username-Farben sind der Gruvbox-Satz.
**`aXion1337 Light` ist das exakte helle Gegenstück** (Gruvbox Light) — gleiche
Rollenverteilung, gespiegelte Helligkeitsachse. Wer eines ändert, zieht das andere
mit.

### Terrakotta-Beige — sorbs BookStack-Schema

Am 2026-08-02 in der BookStack-Oberfläche eingestellt und von dort extrahiert
(die Werte stehen als CSS-Variablen im ausgelieferten HTML). Fünf der sieben sind
der Coolors-Satz `#264653 · #2A9D8F · #E9C46A · #F4A261 · #E76F51`:

| Rolle in BookStack | Wert | Ton |
|---|---|---|
| Primäre Farbe | `#264653` | Charcoal |
| Standard-Linkfarbe | `#5f757b` | gedämpftes Blaugrau |
| Regalfarbe | `#e76e51` | Burnt Sienna |
| Buchfarbe | `#e9c46a` | Saffron |
| Kapitelfarbe | `#f3a261` | Sandy Brown |
| Seitenfarbe | `#77bb41` | Grün |
| Seitenentwurfsfarbe | `#e32400` | Rot |

Bemerkenswert: **dieses von Hand eingestellte Schema ist bis auf zwei Ziffern die
offizielle Sunset-Boulevard-Palette** (siehe nächster Abschnitt) — `#e76e51` statt
`#e76f51`, `#f3a261` statt `#f4a261`. Beide Wege sind unabhängig voneinander auf
demselben Coolors-Satz gelandet. Die Irritation an der ersten Theme-Fassung war
also berechtigt und ließ sich an der Originalquelle belegen.

### theme-factory — die zehn benannten Themes

Quelle ist Anthropics [theme-factory-Skill](https://github.com/anthropics/skills/tree/main/skills/theme-factory):
je Theme vier Farben plus ein Schriftpaar. Sie sind seit 2026-08-02 **wörtlich
übernommen** (gitops `b10b607`), nachdem eine erste Fassung die Namen frei
interpretiert hatte.

| Theme | Hintergrund | hell/dunkel | Akzent · Sekundär · Highlight |
|---|---|---|---|
| Ocean Depths | `#f1faee` | hell | `#2d8b8b` · `#a8dadc` · `#457b9d` |
| Sunset Boulevard | `#264653` | dunkel | `#e76f51` · `#f4a261` · `#e9c46a` |
| Forest Canopy | `#faf9f6` | hell | `#2d4a2b` · `#7d8471` · `#a4ac86` |
| Modern Minimalist | `#ffffff` | hell | `#36454f` · `#708090` · `#d3d3d3` |
| Golden Hour | `#4a403a` | dunkel | `#f4a900` · `#c1666b` · `#d4b896` |
| Arctic Frost | `#fafafa` | hell | `#4a6fa5` · `#d4e4f7` · `#c0c0c0` |
| Desert Rose | `#5d2e46` | dunkel | `#d4a5a5` · `#b87d6d` · `#e8d5c4` |
| Tech Innovation | `#ffffff` | hell | `#0066ff` · `#00ffff` · `#1e1e1e` |
| Botanical Garden | `#f5f3ed` | hell | `#4a7c59` · `#f9a620` · `#b7472a` |
| Midnight Galaxy | `#e6e6fa` | hell | `#2b1e3e` · `#4a4e8f` · `#a490c2` |

⚠️ **Ob ein Theme hell oder dunkel gemeint ist, steht nicht verlässlich in den
Beschreibungen** — „Warm Sand · backgrounds" findet sich bei einem Theme, dessen
Showcase-Seite dunkel ist. Maßgeblich ist `theme-showcase.pdf` im Skill: sieben der
zehn sind hell, nur Sunset Boulevard, Golden Hour und Desert Rose dunkel.
„Midnight" Galaxy ist trotz des Namens ein helles Theme mit dunkelviolettem Akzent.
Wer die Werte prüfen will, rendert die PDF-Seiten und misst die Hintergrundfarbe,
statt der Prosa zu glauben.

Die übrigen Rollen (Flächenabstufungen, Username-Farben) sind aus diesen vier
Farben gemischt — so bleibt jedes Theme in sich stimmig, ohne dass Werte
dazuerfunden werden.

## Namensgebung: ThreadNet oder aXion1337.Chat?

**Beides, auf verschiedenen Ebenen — und das ist Absicht, kein Versehen.**

| Ebene | Name | Wo gesetzt |
|---|---|---|
| Betriebssystem, Startmenü, Installer, PWA | **ThreadNet** | `productName` in `apps/desktop/axion1337/build.json`, `name` in `apps/web/res/manifest.json` |
| in der Anwendung | **aXion1337.Chat** | `brand` in `element-values.yaml` (Prod) und `apps/desktop/axion1337/config.json` |
| eingebettetes Call-Widget | **aXion1337.Chat** | `VITE_PRODUCT_NAME` in `.env.production` (threadnet-call) |
| Anmeldeseite (Authentik) | **ThreadNet** | `branding_title` im Brand-Blueprint (gitops, `apps/authentik/authentik-blueprints.yaml`) |

Das Call-Widget folgt der Zeile darüber: Es läuft *in* der Anwendung, also heißt es
dort auch so. Die Anmeldeseite dagegen kommt **vor** der Anwendung — dort meldet man
sich am Werkzeug an, nicht in der Gemeinschaft. Deshalb ThreadNet.

Die Leitplanke dahinter steht in [`vision/threadnet.md`](../vision/threadnet.md):
*ThreadNet ist das Tool, axion1337.chat die Community.* Das Programm heißt
ThreadNet — auch wenn es jemand für eine andere Instanz nutzt; die Gemeinschaft
darin heißt aXion1337.Chat.

⚠️ **Nicht „geradeziehen".** Wer nur eine der beiden Stellen sieht, hält es für
eine Inkonsistenz. Ist es nicht.

**Attribution:** „ThreadNet — powered by Element" steht seit `v0.4.0` in
*Einstellungen → Hilfe & Info*, direkt unter der Client-Version, verlinkt auf
element.io. Element Web steht unter der AGPL; ein Fork unter eigenem Namen ist
erlaubt, die Nennung ist die faire Form davon. Bewusst **nicht** im Kopiertext der
Versionsangabe — der landet in Fehlerberichten, dort ist die Fork-Herkunft nur
Rauschen.

## Wo was eingestellt ist

| Oberfläche | Ort | Anmerkung |
|---|---|---|
| Element/ThreadNet-Web | `apps/production/custom-configs/element-values.yaml` (gitops), `setting_defaults.custom_themes` | 17 Themes; Änderungen chirurgisch, **nie die YAML neu serialisieren** |
| Web-Icons + PWA | `apps/web/res/vector-icons/`, `apps/web/res/manifest.json` (ThreadNet-Web) | `theme_color` = `#ed4f4c`, die Markenfarbe — nicht Elements `#76CFA6` |
| Desktop-Icons | `apps/desktop/build/` (ThreadNet-Web) | `.png`, `.ico`, `.icns`, Layer-Asset — alle aus derselben Quelle |
| ThreadNet Desktop | `apps/desktop/axion1337/config.json` (ThreadNet-Web) | eigene Kopie derselben Themes — beim Ändern beide mitziehen |
| BookStack | *Settings → Customization*, getrennt für hell und dunkel | liegt in der Datenbank, **nicht im Repo** — schriftlich hier und in `theme/sorbs-palette.md` |
| BookStack (Feinschliff) | `theme/*.css` im Wiki-BookStack-Repo | nur Flächen, Text, Ränder — die sieben Farben oben gehören in die Oberfläche |
| Docusaurus-Wiki | `src/css/custom.css` (homelab/wiki) | bislang nur Akzentfarbe |
| Titelbild Login | `apps/web/res/themes/element/img/backgrounds/alpenglow.jpg` (ThreadNet-Web), gesetzt in `SdkConfig.ts` | siehe unten — Bilddatei kommt nur über einen Build in den Container |
| Anmeldeseite Authentik | Brand-Blueprint in `apps/authentik/authentik-blueprints.yaml` (gitops) | Favicon und Hintergrund werden **von axion1337.chat referenziert**, nicht hochgeladen. **Logo ist noch Authentiks eigenes** → gitops#55 |

### Titelbild

Seit 2026-08-06 zeigt die Login-Seite ein Alpenglühen über einer Bergkette statt
Elements See: **John Towner** ([@heytowner](https://unsplash.com/@heytowner)),
[Unsplash](https://unsplash.com/photos/JgOeRuGD_Y4), *Unsplash License*.

Die Lizenz erlaubt kommerzielle Nutzung und Bearbeitung ohne Genehmigung und
**verlangt keine Namensnennung**. Genannt wird er trotzdem — in *Einstellungen →
Hilfe & Info* unter „Danksagungen". Verboten wäre nur der Weiterverkauf
unbearbeiteter Bilder und das Nachbauen eines konkurrierenden Bilddienstes; beides
trifft uns nicht.

⚠️ **Die Danksagung ist bewusst nicht übersetzt.** Elements Schlüssel
`credits|default_cover_photo` liegt in 32 Sprachdateien, 31 davon nennen deren
Fotografen namentlich. Nur `en`/`de` anzupassen hätte in 29 Sprachen eine **falsche
Attribution** stehen lassen — und diese 29 pflegen wir nicht, sie kommen aus Elements
Übersetzungsdienst. Deshalb steht die Zeile als fester Text im TSX, wie schon die
„powered by Element"-Attribution.

⚠️ **Authentik hängt an dieser Datei.** Der Flow-Hintergrund dort zeigt auf
`https://axion1337.chat/themes/element/img/backgrounds/alpenglow.jpg`. Wer das Bild im
Client umbenennt oder entfernt, macht die Anmeldeseite grau — und merkt es nicht,
weil im Client alles stimmt.

### Warum in Authentik kein PNG-Logo funktioniert

Der erste Versuch setzte `branding_logo` auf `vector-icons/512.png`. Ergebnis: das
Logo rendert in der Anmeldemaske in **Naturgröße**. Authentiks Default ist ein SVG,
das sich seiner Box anpasst — ein PNG tut das nicht, und der Slot begrenzt die Höhe
nicht.

Zurückgesetzt am 2026-08-06 auf Authentiks eigenes Logo. Ein Ersatz braucht eine
**Wortmarke im Querformat, am besten als SVG**; alles Vorhandene ist quadratisch,
auch `threadnet-logo-wortmarke.png` (Bildmarke *über* Schriftzug). Offen in
gitops#55.

⚠️ **Nicht über Authentiks Oberfläche einstellen.** Solange `branding_logo` im
Blueprint steht, gewinnt der Blueprint: eine Auswahl in der UI hält bis zur nächsten
Reconciliation und ist dann wieder weg.

⚠️ **Das BookStack-Schema lebt nur in der Datenbank.** Bei einem Volume-Verlust
ist es weg — deshalb steht es oben in dieser Tabelle. Wiederherstellen heißt:
sieben Felder in der Oberfläche neu eintragen.

Es steht bewusst an **zwei** Stellen schriftlich, und die Rollen sind verschieden:
`theme/sorbs-palette.md` im BookStack-Repo ist die betriebsnahe Kopie mit den
DB-Schlüsseln, liegt aber in der Gruppe `homelab` — die hat **keine Mirrors** und
ist von außerhalb des Labs nicht lesbar. Diese Datei hier ist die gespiegelte
und damit maßgebliche Fassung. Wer die Farben ändert, zieht beide mit; im
Zweifel gilt, was in der laufenden Instanz eingestellt ist.

## Offen

Ob die Terrakotta-Richtung das Stammschema ablösen oder eine Alternative neben
Gruvbox bleiben soll, ist nicht entschieden — das gehört in die Rebranding-Runde
(→ [`vision/threadnet.md`](../vision/threadnet.md), ThreadNet-Web#10).