tmj-90/brand

Marke etablieren oder prüfen

Eine Factory, die UI ohne Marke ausliefert, liefert Vorlagen aus. Dieser Skill verleiht dem Produkt eine spezifische visuelle und verbale Identität – oder prüft und erweitert die vorhandene – und hält sie in einer Form fest, die Auslieferungsagenten verwenden können: BRAND.md plus Tokens. Er besitzt die Identität (Richtung, Palette, Typografie-Paarung, Sprachstil). Die Token-Struktur gehört zum Skill design-system; die Oberflächenausführung zum Skill frontend-design.

Tiefe	Referenz
Paletten-Ebenen, oklch-Tokens, Kontrast, Typografie-Paarung und flüssige Skalierung	references/color-and-typography.md
Sprachspektren, Merkmale, Nachrichtenhierarchie, Konsistenz-Checkliste	references/voice-and-messaging.md

Schritte

1. Erkennen. Rufe search_lore für Marke, Positionierung, Sprachstil und Design-ADRs auf. Suche im Repo nach BRAND.md, DESIGN.md, Token-Dateien (*.tokens.json, tokens.css, theme.ts), einem :root-Block mit benutzerdefinierten Eigenschaften, Logo-Assets und Marketingtexten. Lies die README des Produkts und das Ticket für Zielgruppe und Zweck. Entscheide: Existiert eine Marke?

2. Marke existiert → prüfen und im eigenen Stil erweitern. Ersetze sie nicht durch deinen Geschmack.

   • Bewerte sie anhand der erforderlichen Qualitäten (Schritt 4) und der unten stehenden Verbotsliste; benenne jede Lücke mit Datei und Wert.
   • Miss jedes Text-/Hintergrund-Paar, das die Marke verwendet, in jedem Theme, gegen den WCAG-Kontrast (4,5:1 für Text, 3:1 für großen Text und UI) – berechne das Verhältnis; oklch-Helligkeit ist kein Kontrastverhältnis. Eine Markenfarbe, die als Text nicht besteht, erhält eine dunklere textsichere Variante, keine Ausnahme.
   • Fülle Lücken in der vorhandenen Richtung: Hover/Aktiv-Stufen, eine fehlende Oberflächenebene, eine dunkle Variante, ein textsicherer Akzent, fehlende semantische Rollen.

3. Keine Marke → eine Richtung festlegen und begründen, warum sie zu diesem Produkt und Publikum passt: Editorial/Magazin, Swiss/International, Neo-Brutalismus, Bento, Glas-Morphism mit echter Tiefe, heller oder dunkler Luxus, Retro-Futurismus. „Clean minimal” ist keine Richtung; Dark Mode wird für die Benutzer gewählt, nicht aus Gewohnheit. Definiere dann:

   • Palette als oklch-Tokens mit angegebener Aufgabe pro Farbe: Oberflächen (mindestens zwei Ebenen), Text (primär, dezent), Akzent und die semantischen Rollen Erfolg / Warnung / Gefahr / Info – jeweils mit einer textsicheren Variante, wenn die Füllfarbe als Text nicht besteht.
   • Typografie-Paarung – Anzeige- + Textfamilien mit Begründung (und Mono, wenn das Produkt Code oder Daten zeigt), eine clamp()-flüssige Skalierung und einen Ladeplan: selbst gehostet, subset, eine kritische Schriftstärke vorab geladen, metrisch angepasster Fallback.
   • Sprachstil – Zielgruppe, das Einzeiler-Versprechen, 3–5 Sprachmerkmale, jeweils mit einem Paar „wir sagen / wir sagen nicht”, und wie sich der Sprachstil bei Fehlern und leeren Zuständen ändert.

4. Erforderliche Qualitäten prüfen. Die Marke muss es der gelieferten UI ermöglichen, mindestens vier der zehn im Skill frontend-design aufgeführten Qualitäten zu zeigen (Skalierungshierarchie, Abstandsrhythmus, Tiefe, typografischer Charakter, semantische Farbe, durchdachte Zustände, Komposition, Atmosphäre, klärende Bewegung, Datenvisualisierung im System). Nenne die vier plus in BRAND.md.

5. Artefakte schreiben. BRAND.md: Richtung und Begründung, Paletten-Tabelle (Token, Wert, Aufgabe, Kontrastergebnis), Typografie-Paarung und Skalierung, Sprachstil, gelieferte Qualitäten, offene Fragen. Wenn die Arbeit visuell ist, eine Token-Datei im Format des Repos (DTCG JSON oder CSS Custom Properties – siehe Skill design-system), zum Beispiel:

   :root {
     --color-surface: oklch(98% 0.01 95);
     --color-text: oklch(22% 0.02 265);
     --color-accent: oklch(64% 0.19 28); /* nur Füllung; Text verwendet --color-accent-text */
     --color-accent-text: oklch(50% 0.19 28);
     --text-display: clamp(2.5rem, 1rem + 6vw, 6rem);
     --text-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
     --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   }
   

6. Unbekannte Strategie kennzeichnen, nicht erfinden. Wenn Positionierung oder Zielgruppe wirklich unentschieden sind und das Ticket dies nicht klärt, erfinde keine. Als Auslieferungs-Skill: mark_ticket_blocked mit der konkreten Frage; als Loreseed: suggest_lore die Marke mit den offenen Fragen benannt.

7. Abschließen. Als Auslieferungs-Skill (du bist auf dem Worktree-Branch des Tickets – überprüfe mit git branch --show-current), committen, pro-AC Nachweise mit dem Skill record-evidence aufzeichnen (das BRAND.md-Diff, Kontrasttabelle, Qualitätenliste), dann anhalten; der Runner reicht zur Überprüfung ein. Als Loreseed: suggest_lore die Marke; es bleibt ein Vorschlag, bis ein Mensch ihn bestätigt.

Verboten (eine Prüfung muss diese erkennen)

• Standard-Kartenraster mit einheitlichem Abstand und ohne Hierarchie.
• Die zentrierte Überschrift + Gradienten-Blob-Hero mit generischem CTA.
• Unveränderte Bibliotheks-/Tailwind-shadcn-Standardwerte, die als fertiges Design ausgegeben werden.
• Identischer Radius, Abstand und Schatten auf jeder Komponente.
• Grau auf Weiß mit einer dekorativen Akzentfarbe.
• Standard-Schriftstapel ohne angegebenen Grund; mehr als zwei Familien ohne Begründung.
• Eine Akzentfarbe, die für Text in Körpergröße verwendet wird, wenn sie 4,5:1 nicht besteht.
• Reflexartiger Dark Mode, aus Gewohnheit statt aus Eignung gewählt.

Erledigt, wenn

BRAND.md eine Richtung mit ihrer Begründung angibt; jedes Palettenpaar ein gemessenes Kontrastergebnis hat, das in jedem Theme besteht; die Typografie-Paarung, Skalierung und der Ladeplan definiert sind; der Sprachstil Merkmale mit Beispielen hat; vier oder mehr erforderliche Qualitäten benannt sind; offene strategische Fragen aufgelistet statt erraten sind; Tokens im Format des Repos existieren.

Regeln

• Lege eine Richtung fest und begründe sie; niemals „clean minimal”.
• Tokens, keine Literale, damit Auslieferungsagenten sie wiederverwenden können.
• Erweitere eine vorhandene Marke in ihrem Stil; überschreibe sie niemals mit Vorlieben.
• Bewegungstokens sind für transform/opacity; niemals layoutgebundene Animationen in das System einbacken.
• Unbekannte Strategie ist eine benannte offene Frage, niemals eine erfundene Antwort.