Brand-System (Markensystem)

Markensystem

Ein vollständiges visuelles und redaktionelles Referenzsystem, einsatzbereit: Farben, Typografie, Verlauf, Komponenten, Logoregeln, externer Ton und Deliverable-Struktur. Es gilt für alle Outputs, die für Kunden, Interessenten oder eine externe Zielgruppe bestimmt sind.

Diese Werte sind Standardwerte. Wenn ein Projekt eine eigene Designsprache hat, lies diese zuerst und ersetze die Tokens (Palette, Schriftarten, Logo): Die Kompositionsregeln, der Ton und die Deliverable-Struktur bleiben gültig.

Grundgedanke: Sparsamkeit der Mittel, großzügiger Weißraum, gut lesbare Typografie, schweizerisch-bauhäuslerische Ästhetik.

Referenzdateien:

• references/tokens.css und references/tokens.json: Die untenstehenden Tokens, bereit zum Import.
• references/charte.png (und .svg): Palette, Typografie und Komponenten auf einer Tafel.

---

1. Palette

Rolle	Hex	Hinweise
Logofarbe	#295FEC	Nur für das Logo
Primär (CTA, Links, Akzente)	#3D65E8	Interface, Akzenttexte, Buttons
Heller Hintergrund (global)	#EBEFF7	Hintergrund von Content-Slides, Bannern
Hintergrund Off-White (Basis des Verlaufs)	#F8F9FB	Basis von Slides und Seiten mit Verlauf
Oberfläche, Karte	#FFFFFF	Karten, Blöcke, Rahmen
Helle Oberfläche (Block)	#F0F2F7	Karten in Rastern
Haupttext	#111827	Fließtext, dunkle Überschriften
Dezenter Text	#6B7280	Labels, Legenden, Metadaten
Status Grün	#22C55E	Positive Indikatoren

Pro Medium nur eine Akzentfarbe: die Primärfarbe.

2. Hintergrundverlauf

Ein sanfter radialer Verlauf, angewendet auf helle Flächen und Slides. Er bleibt subtil: auf den ersten Blick unsichtbar.

background: radial-gradient(
  ellipse at 85% 10%,
  rgba(180, 215, 245, 0.55) 0%,
  rgba(200, 230, 252, 0.25) 35%,
  transparent 65%
), #F8F9FB;

/* Variante auf zwei gegenüberliegenden Ecken */
background:
  radial-gradient(ellipse at 90% 5%, rgba(165, 210, 245, 0.45) 0%, transparent 50%),
  radial-gradient(ellipse at 5% 95%, rgba(165, 210, 245, 0.25) 0%, transparent 45%),
  #F8F9FB;

In PPTX: Slide-Hintergrund #F8F9FB, radialer Verlaufsfüllung in der oberen rechten Ecke, Startfarbe #B4D7F5 mit 55 % Deckkraft, zu transparent.

3. Komponenten

Buttons

• Primäre Aktion: Pillenform (Radius 999 px), Primär-Hintergrund, weißer Text, Pfeilsymbol rechts.
• Sekundäre Aktion: Pille, weißer Hintergrund, dünne Umrandung, dunkler Text, Pfeilsymbol rechts.

Karten

• Weißer oder heller Hintergrund, Radius 16 px, weicher Schatten, keine ausgeprägte Umrandung.
• Metadaten: Das Jahr in dezentem Text, dann ein Punkt als Trennzeichen (z. B. „2024 · Projektname“).
• Titel in Halbfett, Fließtext in Regular, Link unten in dezentem Text.

4. Typografie

Verwendung	Schriftart	Schriftstärke
Hauptüberschriften	Inter	Black 900 oder ExtraBold 800
Untertitel, Labels	Inter	SemiBold 600
Fließtext	Inter	Regular 400
Metadaten, Legenden	Inter	Regular 400, dezenter Text

Bevorzugte Fallback-Schriftart: Public Sans. System-Fallbacks: Geist, SF Pro, Helvetica Neue. Keine Serifen- oder Zierschriften.

5. Icons

Phosphor Icons oder Lucide, Stärke Regular oder Light je nach Kontext. Keine Emojis in den Deliverables.

6. Logo

Das Projektlogo wird mit dem Projekt bereitgestellt: Dieses Skill enthält keine Logodateien. Verwendungsregeln, die für jedes Logo gelten:

• Slides, Titelblatt auf farbigem Hintergrund: Logotype oben links, weiße Version falls vorhanden, Symbolhöhe 36 bis 40 px.
• Content-Slides, heller Hintergrund: Nur Symbol oder vollständiger Logotype in der Fußzeile, Höhe 20 bis 24 px, dezenter Text, unten links ausgerichtet.
• Word-Dokumente: Logotype im Header der ersten Seite, links ausgerichtet, Höhe 28 bis 32 px, ohne Verzerrung.
• Web-Artefakte: Inline-SVG-Symbol, 32 px, mit einem Link zur Website.
• Schutzabstand: Mindestens die 1-fache Höhe des Symbols auf jeder Seite, kein Text oder grafisches Element in diesem Bereich.
• Zu vermeiden: Logo verzerren oder strecken, außerhalb der Logofarbe oder Weiß neu einfärben, eine unscharfe oder unterauflösende Version verwenden, auf einem Hintergrund mit unzureichendem Kontrast platzieren.

7. Externer Ton

• Auf Augenhöhe, niemals herablassend, niemals werblich.
• Präzise und fundiert: reale Fälle, Metriken, beobachtbare Mechanismen.
• Zugänglich ohne zu vereinfachen. Expertise zeigt sich in Präzision, nicht in Superlativen.
• Wende parallel sober-writing für die redaktionelle Haltung und francais-parfait für Texte auf Französisch an.

In allen externen Dokumenten tabu: „leidenschaftlich“, „ergebnisorientiert“, „Wertschöpfer“, selbstlobende Biografien in der dritten Person, Kompetenzlisten ohne Kontext oder Belege, Agenturton, der viel verspricht und wenig erklärt.

8. Deliverable-Struktur

Angebot, One-Pager

1. Der Kontext und die Herausforderung des Kunden, ohne Einleitung über sich selbst.
2. Der Interventionansatz und sein Mechanismus.
3. Die Deliverables und Meilensteine.
4. Der Preis und die Zahlungsmodalitäten.
5. Die relevanten Referenzen (ähnliche Fälle).

Fallstudie

1. Die Ausgangssituation: Metriken, Einschränkungen, Organisation.
2. Die getroffenen Entscheidungen und warum.
3. Die messbaren Ergebnisse.
4. Was anders hätte gemacht werden können.

Professionelle Biografie (80 bis 100 Wörter)

• Beginne mit der Rolle und dem differenzierenden Ansatz.
• Zwei oder drei konkrete Belege: Kunden, Ergebnisse, Kontexte.
• Schließe mit der aktuellen Verfügbarkeit oder Spezialisierung.

Akquise-E-Mail Betreff spezifisch für den Empfänger; Textkörper 80 bis 120 Wörter, mit einer Beobachtung zu seiner Situation, einem direkten Vorschlag und einem klaren Call-to-Action.

Word-Dokument Logotype im Header, Fußzeile mit Projektkontaktdaten, Fließtext in Inter oder Public Sans, Überschriften in Halbfett, nur eine Akzentfarbe, keine dekorativen Schnörkel.

9. Kombinieren mit slides und pptx

Drei Skills, drei Rollen:

Skill	Rolle
brand-system (dieser)	Die Identität: Palette, Typografie, Verlauf, Komponenten, Logo, Ton
slides	Das Layout: fünfzehn Layouts, narrative Struktur, Überschriften
pptx (Skill von Anthropic, separat zu installieren)	Die technische Erstellung der .pptx-Datei

Vorgehen für die Erstellung einer Präsentation:

1. Lese brand-system, um die Tokens festzulegen (oder ersetze sie durch die des Projekts).
2. Lese slides, um die Deck-Struktur und Layouts auszuwählen, unter Verwendung dieser Tokens.
3. Lese pptx, um die Datei zu generieren, und wende die Werte der ersten beiden Skills an.
4. Überprüfe das Ergebnis Slide für Slide (Export als Bilder) mit der Prüfung von slides.

10. Überprüfung vor jedem Deliverable

1. Die Positionierung basiert auf Beweisen, nicht auf Eigenschaften.
2. Der Ton ist auf Augenhöhe, nicht werblich.
3. Das Logo beachtet seine Verwendungsregeln und Schutzabstände.
4. Logofarbe und Interface-Akzentfarbe sind unterschiedlich: #295FEC für das eine, #3D65E8 für das andere.
5. Nur Typografie Inter oder Public Sans.
6. Keine Emojis, keine Gedankenstriche (em-dash), keine hohlen Modewörter.
7. sober-writing angewendet, und francais-parfait für Texte auf Französisch.