---
title: Brand Design System Playbook
description: Komplette Methodik, um für jede beliebige Marke ein konsistentes, KI-fähiges Brand & Design System zu bauen — von der Discovery bis zum live deployten Hub mit Office-Templates.
date: 2026-04-30
version: 1.0
---

# Brand Design System Playbook

> Reproduzierbarer Workflow, um für eine beliebige Marke ein vollständiges Design System zu bauen, online zu deployen und für KI-Tools nutzbar zu machen. Dieses Dokument erklärt **was** gebaut wurde, **in welcher Reihenfolge**, **mit welchen Tools** und **mit welchen Dateien**. Übertragbar auf jede andere Marke.

## 0. Endergebnis pro Marke

Acht zusammenhängende Layer, die zusammen ein vollständiges Brand Design System bilden:

| Layer | Was es ist | Beispiel-URL bei der Autismus-Stiftung |
|-------|------------|----------------------------------------|
| 1. Brand-Context | Markdown-Master mit Mission, Werte, Voice, Personas, Tokens, Components, Templates, Governance | `/brand-context.md` |
| 2. AI-Index | llmstxt.org-Standard-Index mit Links zu allen Brand-Quellen | `/llms.txt`, `/llms-full.txt` |
| 3. Design Tokens | CSS Custom Properties + DTCG-JSON mit allen Farben, Typo, Spacing, Radien | `/design-system/assets/tokens/` |
| 4. Hub-Seite | Single Source of Truth als HTML mit Prompt-Adapter, Mission, Voice, Identity, Downloads, Governance, AI-Context | `/design-system/` |
| 5. Component Library | Live-Vorschauen aller UI-Components mit Code | `/design-system/components/` |
| 6. Document Library | Office-Templates (DOCX, PPTX) mit Print-Anatomy, Typo, Farben | `/design-system/documents/` |
| 7. Logo-Galerie | Alle Logo-Varianten zum Direkt-Download | `/brand-guideline/logo/` |
| 8. WordPress-Patterns | Block-Pattern-PHP zum Drop-in für Code-Snippets-Plugin | `/design-system/wp/block-patterns.php` |

## 1. Discovery — Was hast du schon?

**Ziel:** Inventur aller existierenden Brand-Assets, bevor irgendetwas gebaut wird.

### 1.1 Live-Site analysieren

Wenn die Marke schon eine Live-Website hat:

```bash
curl -s https://[domain] -o /tmp/live-home.html
```

Aus der Live-Seite extrahieren:

- **CSS-Variablen** (`:root { --brand: ...; }`) → werden zur Single Source of Truth für Tokens
- **Header- und Footer-HTML** → 1:1-Übernahme in Hub-Seite, damit Hub aussieht wie der Rest der Site
- **Schrift-Stack** (`font-family: ...`) → in Design Tokens
- **Button-, Card-, Hero-Stile** → Component Library

### 1.2 Bestehende Brand-Dokumente sammeln

- Briefkopf, OnePager, Broschüren, PowerPoint-Master als DOCX/PPTX
- Logo-Dateien in allen Varianten (SVG, PNG, EPS, AI)
- Style Guide PDFs (falls vorhanden)
- Voice-and-Tone-Notizen, Persona-Dokumente
- Sales-Call-Transcripts, Interview-Mitschriften

### 1.3 Stakeholder-Interview

Drei Fragen pro Stakeholder:

1. „Was sagt diese Marke nie?" (Verbotsliste)
2. „Wer ist die Zielperson, wenn wir mit dieser Marke sprechen?" (Personas)
3. „Welche drei Sätze beschreiben den Markenkern?" (Mission)

## 2. Brand-Context — Das Markdown-Herzstück

**Ziel:** Eine einzige Markdown-Datei, die jedes KI-Tool live nachladen kann und die alles enthält, was eine KI über die Marke wissen muss.

### 2.1 Datei-Struktur (`brand-context.md`)

24 nummerierte Sektionen, alle mit `## NN-name`-Slugs für direkte Anker-Links:

```markdown
## 01-organisation        # Geschichte, Aufbau, Vorstand
## 02-mission-vision      # Drei Sätze
## 03-markenwerte         # Vier Werte mit Definition
## 04-brand-voice-grundprinzipien
## 05-sprachliche-leitlinien   # MUSS-Regeln
## 06-niemals-verwenden    # Verbotsliste
## 07-persona-johanna      # Erste Persona
## 08-persona-lisa
## 09-persona-peter
## 10-logo-system
## 11-farbpalette
## 12-typografie
## 13-spacing-radien
## 14-layout-grids
## 15-bildsprache
## 16-ikonografie
## 17-style-guide          # Schreibregeln
## 18-ai-governance        # Pflicht-Checks vor jedem Asset
## 19-datenschutz
## 20-component-library    # Verweis auf Sub-Page
## 21-page-templates
## 22-wordpress-patterns
## 23-document-standards   # Office-Templates
## 24-referenz             # Quellen
```

### 2.2 Pflicht-Inhalte

**Persona-Profile** — pro Persona: Alter, Lebenssituation, Trigger-Wörter, CTA, Kanal-Affinität, Sprachregister.

**Verbotsliste** — explizit ausgeschriebene Wörter und Wendungen, die nie verwendet werden dürfen, mit Begründung.

**Voice-Beispiele** — pro Voice-Prinzip: ein „Statt …" / „Sondern …" -Vergleichspaar.

**Tokens** — alle CSS-Variablen mit Hex-Wert UND semantischem Namen. Nie nur „Magenta", immer „Magenta = #d92d68 = `--color-magenta` = Konversions-Farbe".

### 2.3 UTF-8-Falle

Apache liefert `.md`-Dateien als `text/markdown` ohne Charset-Header. Browser raten dann manchmal Latin-1 → Umlaute werden zu „ü". 

**Fix:** UTF-8-BOM (`EF BB BF`) am Anfang der Datei. Browser erkennen BOM zuverlässig.

```python
with open('brand-context.md','w',encoding='utf-8-sig') as f:  # 'utf-8-sig' = mit BOM
    f.write(content)
```

## 3. AI-Index — llms.txt nach llmstxt.org-Standard

**Ziel:** Eine kurze, kuratierte Index-Datei, die KI-Tools beim ersten Zugriff lesen, um zu wissen, welche Quellen es gibt.

### 3.1 Format

```markdown
# [Markenname] — Brand & AI Context

> [Ein-Satz-Beschreibung]. Person-First-Language ist Pflicht.

[3-Satz-Boilerplate über die Marke]

## Master Context
- [brand-context.md](https://[domain]/brand-context.md): Vollständiger Markenkontext
- [llms-full.txt](https://[domain]/llms-full.txt): Identisch als Plain Text
- [Brand-Guidelines HTML](https://[domain]/brand-guideline/)

## Strategie & Mission
- [Mission, Vision, Tagline](https://[domain]/brand-context.md#02-mission-vision)
- [Markenwerte](https://[domain]/brand-context.md#03-markenwerte)

## Brand Voice & Sprache
- [Voice-Grundprinzipien](https://[domain]/brand-context.md#04-...)
- [Verbotsliste](https://[domain]/brand-context.md#06-...)
...
```

### 3.2 Single canonical URL pro Datei

**Wichtig:** Jede AI-Datei darf nur EINE öffentliche URL haben. Keine Duplikate (`/brand-context.md` UND `/design-system/brand-context.md`) — sonst weiß die KI nicht, welche die aktuelle ist.

Konvention:
- `/llms.txt` → Site-Root
- `/llms-full.txt` → Site-Root  
- `/brand-context.md` → Site-Root

## 4. Design Tokens

**Ziel:** Alle Farben, Schriften, Spacings, Radien, Schatten als CSS-Variablen UND als DTCG-JSON.

### 4.1 CSS Custom Properties (`tokens.css`)

```css
:root {
  /* Brand-Farben — primäre Marken-Identität */
  --color-magenta:        #d92d68;
  --color-magenta-dark:   #b01f52;
  --color-magenta-light:  #fdeef4;
  --color-magenta-xlight: #fef6f9;
  
  /* Live-Aliases — direkt aus dem WordPress-Theme */
  --brand:        var(--color-magenta);
  --brand-dark:   var(--color-magenta-dark);
  --brand-soft:   var(--color-magenta-light);
  
  /* Neutrale Farben */
  --color-text:        #515151;
  --color-heading:     #1A1A1A;
  --ink:               #231f20;  /* Live-Heading */
  --color-gray-line:   #ebebeb;
  --border:            #e5e7eb;  /* Live-Border */
  
  /* Persona-Tints */
  --persona-johanna-tint: #efe6f0;
  --persona-lisa-tint:    #e6f0ef;
  --persona-peter-tint:   #f0ede6;
  
  /* Typografie */
  --font-headline: 'Posterama 2001', sans-serif;
  --font-body:     'Roboto', system-ui, sans-serif;
  --font-mono:     Consolas, monospace;
  
  --fs-hero:  clamp(2.4rem, 5vw, 3.6rem);
  --fs-h1:    clamp(2rem, 4vw, 3rem);
  --fs-h2:    clamp(1.5rem, 3vw, 2.2rem);
  --fs-h3:    1.2rem;
  --fs-body:  1rem;
  --fs-small: 0.85rem;
  
  --fw-light:  300;
  --fw-regular: 400;
  --fw-bold:   700;
  --fw-black:  900;
  
  /* Spacing — 8px-Skala */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 96px;
  
  /* Radien */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}
```

### 4.2 DTCG-JSON (`tokens.json`)

Für Tooling (Style-Dictionary, Token-Studio, Figma-Plugins):

```json
{
  "color": {
    "magenta": { "value": "#d92d68", "type": "color" },
    "magenta-dark": { "value": "#b01f52", "type": "color" }
  },
  "spacing": {
    "1": { "value": "4px", "type": "dimension" },
    "2": { "value": "8px", "type": "dimension" }
  }
}
```

## 5. Hub-Seite

**Ziel:** Eine HTML-Seite, die als Eingangstür für alles dient — Mensch UND KI.

### 5.1 Struktur

```
Header (sticky, identisch zur Live-Site)
Hero (Eyebrow + H1 + Lead + 3 CTAs + 4 Stats)
Prompt-Adapter (Magenta-Bar, Copy-Button für KI-Prompts)
Mission & Values
Brand Voice (Do / Don't)
Visual Identity (Tokens visuell)
Component Previews (Grid)
Downloads (Karten zu allen Assets)
AI Governance (6 Pflicht-Checks)
Context Viewer (lädt brand-context.md live)
Live-Footer (1:1 von der Hauptsite)
```

### 5.2 Prompt-Adapter — die wichtigste Komponente

Eine prominente Box, ganz oben, mit:

- Magenta-Border-Top (4px)
- Pre-formatted Text mit Copy-Button
- Inhalt:

```
Brand- und Markenkontext der [Markenname]:
https://[domain]/brand-context.md

Lies diese Datei und wende sie konsequent an:
[3 wichtigste Voice-Regeln in Klartext]

Auftrag:
[hier deine eigentliche Aufgabe einfügen]
```

Daneben: drei Karten-Links zu `brand-context.md`, `llms.txt`, `llms-full.txt`.

JavaScript:

```javascript
document.getElementById('copy-prompt').addEventListener('click', function(){
  var t = document.getElementById('prompt-text').innerText;
  navigator.clipboard.writeText(t).then(function(){
    /* feedback */
  });
});
```

### 5.3 Live-Footer 1:1 übernehmen

Den `<footer>` der Hauptsite samt CSS extrahieren und im Hub als self-contained Block einbauen, mit allen CSS-Variablen scoped innerhalb `.site-footer`. Damit ist die Hub-Seite immun gegen CSS-Drift:

```html
<style>
.site-footer {
  --brand: #d92d68; --ink: #231f20; --text-muted: #6b7280;
  /* … alle Live-Variablen lokal definiert */
}
[exakter CSS-Block aus der Live-Site]
</style>

[exakter Footer-HTML-Block aus der Live-Site]

<script>
// Mail-Link-Decoder + Back-to-Top
</script>
```

## 6. Component Library

**Ziel:** Jede UI-Komponente einmalig dokumentieren mit Live-Preview und Code zum Kopieren.

### 6.1 Pro Component

```html
<section class="comp" id="[slug]">
  <h2>[Component-Name]</h2>
  <div class="comp-meta">[Variante] · [Use-Case]</div>
  <p>[2-3 Sätze: was, wann, wie]</p>
  
  <div class="preview">
    [echtes HTML-Element, wie es live aussieht]
  </div>
  
  <pre><code>[HTML/CSS-Code zum Kopieren]</code></pre>
  
  <dl class="spec">
    <dt>Use-Case</dt><dd>...</dd>
    <dt>Varianten</dt><dd>...</dd>
    <dt>Tokens</dt><dd><code>--brand</code>, <code>--space-3</code></dd>
  </dl>
</section>
```

### 6.2 Page-Anatomy als erstes Element

Ein universelles Skelett, das die Reihenfolge aller Sektionen pro Seite vorschreibt:

```
1. Header (sticky)
2. Persona-Bar (max 3 Tags)
3. Hero
4. Trust-Block
5. Content-Sektionen (max 5 H2)
6. FAQ-Akkordeon
7. Related-Cards
8. Full-CTA oder CTA-Bar
9. Footer
```

## 7. Document Library — Office-Templates

**Ziel:** Print-Pendant zur digitalen Identity. DOCX und PPTX, die jeder ohne Designer nutzen kann.

### 7.1 Sieben Standard-Templates

| Nr | Template | Format | Zweck |
|----|----------|--------|-------|
| 01 | Letterhead | DIN A4 hoch | Briefe an Behörden, Partner |
| 02 | OnePager | DIN A4 hoch | Themen-Sheet, Beraterbesuche |
| 03 | Broschüre | DIN A4 quer, Wickelfalz | 6 Panels für Kampagnen |
| 04 | PowerPoint-Master | 16:9 | Pitches, Vorträge |
| 05 | Report | DIN A4 hoch, mehrseitig | Satzung, Jahresbericht |
| 06 | Pressemitteilung | DIN A4 hoch | Medien |
| 07 | Spendenbescheinigung | DIN A4, amtliches Muster | Pflichtformular |

### 7.2 Unifizierter 4-Spalten-Footer

Jedes Template (außer Letterhead, der sein eigenes Design hat) bekommt denselben 4-Spalten-Footer:

```
┌──────────────┬─────────────┬─────────────┬─────────────┐
│ STIFTUNGSSITZ│ VORSTAND    │ REGISTER    │ SPENDENKONTO│
│ Name         │ Person 1    │ Rechtsform  │ Bank        │
│ Straße       │ Person 2    │ Status      │ IBAN        │
│ PLZ Ort      │ Person 3    │ Register-Nr │ BIC         │
│              │ ...         │ Sitz        │             │
│ Tel          │             │ Aufsicht    │             │
│ Email        │             │             │             │
│ Web          │             │             │             │
└──────────────┴─────────────┴─────────────┴─────────────┘
```

Magenta-Top-Border 4px über jeder Spalte. Roboto 8pt. Eyebrow-Headers in Magenta 7pt UPPERCASE.

### 7.3 Footer-Builder-Helper (Python)

`_footer_builder.py` mit zentralem Daten-Dict:

```python
STIFTUNG = {
  'name': 'Marken-Name',
  'street': '...',
  'plz_ort': '...',
  'tel': '...',
  'email': '...',
  'web': '...',
  'rechtsform': 'Stiftung bürgerlichen Rechts',
  'status': 'gemeinnützig und mildtätig',
  'register': 'Registernummer',
  'sitz': 'Sitz Stadt',
  'aufsicht': 'Aufsicht Behörde',
  'vorstand': ['Person 1 (Vors.)', 'Person 2 (stv. Vors.)', ...],
  'bank_name': '...',
  'iban': 'IBAN: ...',
  'bic': 'BIC: ...',
}

def build_footer(doc):
    """Insert unified 4-column footer in section's footer."""
    section = doc.sections[0]
    footer = section.footer
    # Clear existing (paragraphs AND tables!)
    for child in list(footer._element):
        footer._element.remove(child)
    # Add 4-col table
    table = footer.add_table(rows=1, cols=4, width=Cm(17.0))
    [...]
```

**Kritisch:** Footer-Clear muss BEIDE entfernen, sonst stapeln sich alter und neuer Footer.

### 7.4 Letterhead-Sonderfall

Der Brief hat KEINEN normalen Word-Footer, sondern absolut positionierte TextBoxes mit:

- Pink Absender-Zeile über der Empfänger-Adresse
- Rechts-Meta-Block mit Sender, Datum, Zeichen, St.-Nr., Seite
- Pink Betreff
- Vier-Spalten-Footer im Untermargin

Strategie: Original-DOCX als Master nehmen und nur Daten per XML-Find-Replace austauschen — siehe `LETTER-COOKBOOK.md`.

### 7.5 Token-System für Briefe

```
{{EMPF_NAME}}    Empfänger Zeile 1
{{EMPF_STR}}     Empfänger Zeile 2
{{EMPF_PLZ_ORT}} Empfänger Zeile 3
{{ZEICHEN}}      Aktenzeichen
{{ST_NR}}        Steuernummer
{{DATUM}}        Datum
{{BETREFF}}      Pink Betreff
{{BODY_P1}}      Erster Body-Absatz
{{BODY_P2}}      Zweiter Body-Absatz (optional)
{{BODY_P3}}      Dritter Body-Absatz (optional)
{{ABSCHLUSS}}    Schluss vor "mit freundlichen Grüßen"
{{ANLAGEN}}      Anlagen-Liste
```

### 7.6 Echte PNG-Previews statt Mocks

Templates → PDF (LibreOffice headless) → PNG (pdftoppm 80 dpi):

```bash
libreoffice --headless --convert-to pdf template.docx --outdir /tmp
pdftoppm -r 80 -f 1 -l 1 -png /tmp/template.pdf /tmp/preview
```

Diese PNGs in der Document-Library-Seite einbetten als Click-to-Zoom.

## 8. Logo-Galerie

**Ziel:** Eine HTML-Seite mit allen Logo-Varianten als Klick-zum-Download.

### 8.1 Pflicht-Varianten

- SVG Kurz (Bildmarke + Wortmarke) — Standard
- SVG Lang (mit Schriftzug-Zusatz) — Print
- PNG transparent (Bildmarke standalone) — Office, Avatar
- PNG weiß (Bildmarke auf dunklem Untergrund)
- PNG quadratisch (Social Avatar)
- Favicon 32×32

### 8.2 Layout

Tile-Grid mit Hintergrund-Variation pro Tile (weiß, navy, magenta, creme), damit Lesbarkeit auf jedem Untergrund testbar ist.

Direktlink-Tabelle darunter: Datei | Pfad | Größe | Anwendung.

## 9. WordPress-Block-Patterns

**Ziel:** Alle Components als ready-to-paste Gutenberg-Patterns.

### 9.1 PHP-Drop-in

Eine `block-patterns.php`, die in das Code-Snippets-Plugin oder als MU-Plugin eingebunden wird:

```php
<?php
register_block_pattern('marke/hero-standard', [
  'title' => 'Hero Standard',
  'description' => 'Eyebrow + H1 + Lead + 2 CTAs',
  'content' => '<!-- wp:html -->[HTML-Block]<!-- /wp:html -->',
  'categories' => ['marke'],
]);
register_block_pattern('marke/full-cta', [...]);
// ... alle Components
```

## 10. Deployment-Strategie

### 10.1 Wenn SSH/SFTP funktioniert

Klassisch: rsync oder Git push.

### 10.2 Wenn SSH blockiert ist (Hosting-Restriktion)

**Webmin Filemin** auf Port 10000 als Workaround. Alle Dateien via HTTPS-POST:

```python
# Text-Datei
s.post(f'{BASE}/filemin/save_file.cgi',
  data={'file':fname, 'path':remote_dir, 'data':text, 
        'encoding':'UTF-8', 'save':'Save'},
  headers={'Referer': f'{BASE}/filemin/edit_file.cgi?file={remote_dir}/{fname}'})

# Binär-Datei (DOCX, PNG): base64 + decode.php-Trick
b64 = base64.b64encode(blob).decode('ascii')
# Save .b64 als Text
# Save decode.php das base64_decode + unlink macht
# Trigger via HTTP-GET → file ist on disk
```

**Niemals** `.htaccess` ohne Backup anfassen. Apache wirft sofort 500 bei syntactischen Fehlern.

### 10.3 Verifikation nach jedem Deploy

```python
for url in URLS:
    r = requests.head(url, allow_redirects=True, timeout=10)
    print(f'{r.status_code} {url}')
```

Mindestens 23 von 24 Asset-URLs müssen 200 liefern. Sonst rollback.

## 11. KI-Governance

**Ziel:** Sicherstellen, dass jeder KI-Output durch sechs Checks läuft, bevor er rausgeht.

### 11.1 Pflicht-Checks

1. **Persona identifiziert?** Default ist nicht zulässig. Im Zweifel zurückfragen.
2. **Kanal geklärt?** E-Mail, Web, Social, Print — eigene Längen und Tonlagen.
3. **Person-First-Language?** „Mensch im X" statt „X-Patient"; Verbotsliste durchsucht.
4. **Niemals-Liste durch?** Mitleid, Druck, mailto-Links, mehr als 5 H2 — alle ausgeschlossen.
5. **CTA persona-passend?** Persona A bekommt nicht Persona B's CTA.
6. **Tokens verwendet?** Kein hart kodierter Hex-Wert. Immer `var(--…)`.

### 11.2 Datenschutz-Klausel

Niemals personenbezogene Daten von Stiftenden, Spendenden, Anfragenden in KI-Prompts. Nur öffentlich freigegebene Inhalte oder anonymisierte Zusammenfassungen.

## 12. Reproduzierbarkeit für andere Marken

### 12.1 Was austauschbar ist

| Was | Wie austauschen |
|-----|------------------|
| Markenname | Globale Suche/Ersetzen in `brand-context.md`, `llms.txt`, Hub-HTML |
| Brand-Farben | `tokens.css` + `tokens.json` neu setzen, Hub greift automatisch zu |
| Logo | In `/brand-guideline/logo/` ersetzen, Galerie-HTML bleibt |
| Personas | In `brand-context.md` Sektionen 07-09 austauschen |
| Vorstands-Liste | In `_footer_builder.py` `STIFTUNG['vorstand']` |
| Adresse, Tel, Email | In `_footer_builder.py` `STIFTUNG`-Dict |
| Live-Footer | Aus neuer Live-Site extrahieren mit Python-Regex |
| Office-Templates | Mit `_footer_builder.py` neu generieren |

### 12.2 Was NICHT austauschbar ist

- Architektur (8 Layer)
- Datei-Struktur (`/brand-context.md`, `/design-system/`, `/design-system/components/`, `/design-system/documents/`)
- Token-Naming-Konvention (`--color-X`, `--brand`, `--ink`)
- Prompt-Adapter-Pattern (URL + Voice-Sätze + „Auftrag:")
- AI-Governance-Checks (6 Pflicht-Checks)

### 12.3 Reihenfolge der Arbeit

```
Tag 1: Discovery + Live-Site analysieren + brand-context.md aufsetzen
Tag 2: Design Tokens + Hub-HTML mit Prompt-Adapter
Tag 3: Component Library + Live-Footer-Übernahme
Tag 4: Office-Templates mit Footer-Builder
Tag 5: Logo-Galerie + WordPress-Patterns + AI-Index
Tag 6: Deploy + Verifikation
Tag 7: Stakeholder-Review + Iteration
```

Eine Person, eine Woche pro Marke.

## 13. Datei-Inventar einer fertigen Marke

```
/brand-context.md                                  # 24 Sektionen
/llms.txt                                          # AI-Index
/llms-full.txt                                     # Plain-Text-Variante
/design-system/
  index.html                                       # Hub
  brand-context.md                                 # Mirror (oder symlink)
  llms.txt                                         # Mirror
  components/
    index.html                                     # Live-Previews + Code
  documents/
    index.html                                     # Print-Previews + Anatomy
  assets/
    tokens/
      tokens.css
      tokens.json
    docs/
      templates/
        01_Letterhead_AS.docx                      # Master mit {{TOKENS}}
        02_OnePager_AS.docx
        03_Broschuere_AS.docx
        04_AS-Master.pptx
        05_Report_AS.docx
        06_Pressrelease_AS.docx
        07_Spendenbescheinigung_AS.docx
        _footer_builder.py                         # Python-Helper
        _generate_letter.py                        # Brief-Generator
        _rebuild_templates.py                      # Footer-Update
        LETTER-COOKBOOK.md                         # Brief-Anleitung
      previews/
        01_Letterhead_AS.png                       # PDF→PNG-Vorschau
        ...
        07_Spendenbescheinigung_AS.png
    logos/
      index.html                                   # Galerie-HTML
  wp/
    block-patterns.php                             # WordPress-Drop-in
/brand-guideline/logo/                             # Logo-Direkt-Downloads
  index.html
  AS_Logo.svg
  AS_Logo-kurz_ohne.svg
  AutismusStiftung_Logo_standalone.png
  ...
```

Insgesamt 30–40 Dateien für ein vollständiges System.

## 14. Werkzeug-Stack

| Werkzeug | Wofür |
|----------|-------|
| Python 3.10+ | Token-Replace in DOCX, Footer-Generator, Deploy-Skripte |
| `python-docx` | DOCX-Manipulation |
| `python-pptx` | PowerPoint-Manipulation |
| `cairosvg` | SVG → PNG |
| `pdftoppm` (Poppler) | PDF → PNG für Previews |
| LibreOffice headless | DOCX → PDF |
| `requests` + Webmin Filemin | HTTPS-Deploy ohne SSH |
| `curl`, `grep`, `sed` | Live-Site analysieren |

Alles open-source, keine Bezahl-Tools.

## 15. Was du in jedem Brand-Projekt vermeiden musst

- **Mehr als eine kanonische URL pro Datei** (KI weiß nicht, welche aktuell ist)
- **Hard-coded Hex-Werte in Templates** (verhindern globalen Theme-Switch)
- **Globale Find-Replace ohne Kontext** (`<w:t>1</w:t>` ersetzt auch Page-Number-Felder)
- **Footer-Clear nur für Paragraphen** (Tabellen-Footer bleibt stehen → doppelter Footer)
- **`.htaccess` ohne Backup anfassen** (sofortiger 500 Internal Server Error)
- **PDF-Preview-Links, ohne dass die PDFs existieren** (tote Links auf Hub)
- **Brand-Voice-PDF und Brand-Summary-PPTX als Karte verlinken, ohne dass sie existieren** (Trust-Bruch)
- **Ein Footer in der Live-Site, ein anderer im Design-System** (Kunden bemerken den Bruch sofort)

## 16. Was sich nach 2 Iterationen bewährt hat

- **Brand-Context als Markdown** (nicht PDF) — KI-Tools können live nachladen
- **llms.txt-Standard** statt eigene Konvention — Tooling-Support wächst
- **CSS-Variablen mit doppelter Aliasing-Schicht** (`--color-magenta` UND `--brand`) — Übergang zwischen WordPress-Theme-Konvention und Design-System-Konvention
- **Office-Templates mit Token-System statt Hard-coded Body** — schneller Brief-Workflow
- **Live-Footer 1:1-Übernahme statt Nachbau** — keine visuellen Brüche
- **Echte PNG-Previews aus den DOCX/PPTX gerendert** statt schematischer SVG-Mocks — Stakeholder vertrauen sofort
- **Prompt-Adapter mit Copy-Button** ganz oben auf der Hub-Seite — die wichtigste UI-Entscheidung des ganzen Systems

## 17. Lizenz und Nutzung

Diese Methodik ist frei verwendbar. Für eine konkrete Marke erfordert die Übertragung etwa 5–7 Arbeitstage einer einzelnen Person mit Python-Grundkenntnissen, Affinität zu Design Systems und Zugang zur Live-Website der Marke.

Quellen-Doku des hier dokumentierten Systems:
[autismusstiftung.de/design-system/](https://autismusstiftung.de/design-system/)