management/shared/branding.md

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 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).

⚠️ 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: 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: 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), Unsplash, 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, ThreadNet-Web#10).