Skip to content

Instantly share code, notes, and snippets.

@jenssgb

jenssgb/scenario-box-design-system.md

Created April 7, 2026 10:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jenssgb/665115868088c0568d1206a67ce34960 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jenssgb/665115868088c0568d1206a67ce34960 to your computer and use it in GitHub Desktop.
Download ZIP
Szenario-Boxen Design System – HTML-Pattern für strukturierte Kundenantworten
Raw
scenario-box-design-system.md

Szenario-Boxen – Design System für HTML-Dokumente

Dieses Dokument beschreibt das visuelle Pattern der Szenario-Boxen, wie sie in Kunden-E-Mails und Content-Seiten verwendet werden. Ziel: Ein Agent kann dieses Dokument lesen und die Boxen exakt reproduzieren – auch für andere Formate wie LinkedIn-Posts, Landing Pages oder Präsentationen.

Grundstruktur

Eine Szenario-Box besteht aus drei Ebenen:

  1. Äußerer Container – farbiger Rahmen, abgerundete Ecken
  2. Header-Bar – vollfarbiger Balken mit weißem Text, negativer Margin (ragt in den Rahmen)
  3. Schritt-Boxen – nummerierte Inhaltskästen mit hellem Hintergrund, abwechselnd in zwei Farbtönen

Visueller Aufbau (Schematisch)

┌─────────────────────────────────────── border: 2px solid #FARBE ──┐
│ ████████████████████████████████████████████████████████████████   │
│ █  HEADER-BAR (volle Hintergrundfarbe, weißer Text)           █   │
│ ████████████████████████████████████████████████████████████████   │
│                                                                   │
│  ┌─────────────────────────────────────────────────────────────┐  │
│  │ ① Schritt-Titel (farbig)                                   │  │
│  │    Beschreibungstext                                        │  │
│  └─────────────────────────────────────────── helle Farbe A ───┘  │
│                                                                   │
│  ┌─────────────────────────────────────────────────────────────┐  │
│  │ ② Schritt-Titel (farbig)                                   │  │
│  │    Beschreibungstext                                        │  │
│  └─────────────────────────────────────── helle Farbe B ───────┘  │
│                                                                   │
│  ┌─────────────────────────────────────────────────────────────┐  │
│  │ ③ Schritt-Titel (farbig)                                   │  │
│  │    Beschreibungstext                                        │  │
│  └─────────────────────────────────────── helle Farbe A ───────┘  │
│                                                                   │
└───────────────────────────────────────────────────────────────────┘

HTML-Bausteine im Detail

1. Äußerer Container

<div style="border: 2px solid #0078d4; border-radius: 8px; padding: 20px; margin: 20px 0;">
    <!-- Header-Bar + Schritt-Boxen hier -->
</div>

Regeln:

  • border: 2px solid mit der Hauptfarbe des Szenarios
  • border-radius: 8px – leicht abgerundet, nicht zu rund
  • padding: 20px – Innenabstand auf allen Seiten
  • margin: 20px 0 – vertikaler Abstand zwischen Boxen

2. Header-Bar

<div style="background-color: #0078d4; color: white; padding: 8px 16px; border-radius: 4px; margin: -20px -20px 16px -20px; font-size: 12pt;">
    Titel des Szenarios
</div>

Regeln:

  • background-color = gleiche Farbe wie die Border des Containers
  • color: white – immer weißer Text
  • margin: -20px -20px 16px -20px – negativer Margin oben/links/rechts zieht die Bar bündig an die Container-Ränder (gleicht das padding des Containers aus). Unten 16px Abstand zum ersten Schritt.
  • border-radius: 4px – leichte Abrundung
  • font-size: 12pt – etwas größer als der Body-Text
  • Kein bold/strong nötig – die Farbe reicht als visuelles Signal

3. Schritt-Boxen (nummeriert)

<div style="background-color: #f0f6ff; border-radius: 6px; padding: 14px; margin-bottom: 12px;">
    <strong style="color: #0078d4;">① Schritt-Titel</strong><br>
    <span style="margin-left: 24px;">Beschreibungstext mit Details zum Schritt.</span>
</div>

Regeln:

  • background-color = eine helle Variante der Szenario-Farbe (siehe Farbpaletten unten)
  • border-radius: 6px
  • padding: 14px
  • margin-bottom: 12px – Abstand zwischen den Schritten. Der letzte Schritt hat kein margin-bottom.
  • Titel in <strong> mit der Szenario-Hauptfarbe
  • Nummerierung mit Unicode-Kreisziffern: ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩
  • Beschreibungstext eingerückt mit margin-left: 24px
  • Abwechselnde Hintergrundfarben (Farbe A / Farbe B) für bessere visuelle Trennung

4. Personen-Badges (optional)

Wenn Personen/Rollen in Schritten vorkommen:

<span style="display: inline-block; background: #666; color: white; padding: 2px 8px; border-radius: 3px; font-size: 9pt; margin-right: 6px;">Lisa</span>

Regeln:

  • display: inline-block – fließt im Text
  • Hintergrundfarbe je nach Rolle frei wählbar (Standard: #666 grau)
  • color: white
  • padding: 2px 8px – kompakt
  • border-radius: 3px – leicht gerundet
  • font-size: 9pt – kleiner als Fließtext

5. Kosten-/Ergebnis-Callout (optional)

Innerhalb eines Schritts, für Highlight-Informationen wie Kosten oder Ergebnisse:

<div style="margin-top: 8px; padding: 8px 12px; background: white; border-left: 3px solid #2e7d32; margin-left: 24px;">
    💰 <strong>Total cost: $0</strong> — Web-only agent. No Copilot license needed.
</div>

Regeln:

  • Weißer Hintergrund, farbiger linker Rand (border-left: 3px solid)
  • Eingerückt mit margin-left: 24px (auf gleicher Ebene wie der Schritt-Text)
  • Emoji + Bold für das Schlüsselwort

Farbpaletten

Jedes Szenario bekommt eine eigene Farbpalette. Hier die bewährten Kombinationen:

Blau (Standard, neutral, informativ)

Element Farbe Hex
Border + Header Microsoft Blue #0078d4
Schritt-Box Farbe A Hellblau #f0f6ff
Schritt-Box Farbe B Grün-Tint #e8f5e9
Text-Akzent Microsoft Blue #0078d4

Lila (Alternative, Prozess, Technik)

Element Farbe Hex
Border + Header Lila #7b2d8e
Schritt-Box Farbe A Helles Lila #f3e8f9
Schritt-Box Farbe B Lavendel #ede7f6
Text-Akzent Lila #7b2d8e

Grün (Positiv, Features, Ergebnisse)

Element Farbe Hex
Border + Header Dunkelgrün #2e7d32
Schritt-Box Farbe A Mintgrün #e8f5e9
Schritt-Box Farbe B Helles Gelb/Warm #fff8e1
Text-Akzent Dunkelgrün #2e7d32

Dunkelgrau (Beispiele, Storytelling, Demo)

Element Farbe Hex
Border + Header Anthrazit #37474f
Schritt-Box Farbe A Hellgrau #eceff1
Schritt-Box Farbe B Fast-Weiß #f5f5f5
Text-Akzent Anthrazit #37474f

Orange (Kosten, Warnung, Einschränkungen)

Element Farbe Hex
Border + Header Dunkelorange #e65100
Schritt-Box Farbe A Helles Gelb #fff8e1
Schritt-Box Farbe B Helles Orange #fff3e0
Text-Akzent Dunkelorange #e65100

Wann welche Farbe verwenden

Farbe Einsatzzweck
🔵 Blau Hauptszenario, Kernaussage, neutrale Information
🟣 Lila Alternativ-Szenario, technischer Prozess, Admin-Schritte
🟢 Grün Positives Ergebnis, verfügbare Features, Vorteile
⬛ Dunkelgrau Konkretes Beispiel, Story, Demo-Ablauf
🟠 Orange Kosten, Einschränkungen, Lizenz-Anforderungen

Vollständiges Beispiel: Zwei Szenario-Boxen im Zusammenspiel

Das folgende Beispiel zeigt zwei Boxen – eine blaue (Hauptszenario) und eine lila (Alternativszenario) – wie sie typischerweise in einer Kundenantwort erscheinen:

<!-- ===== SZENARIO A: Agent Builder (kostenlos) ===== -->
<div style="border: 2px solid #0078d4; border-radius: 8px; padding: 20px; margin: 20px 0;">
    <div style="background-color: #0078d4; color: white; padding: 8px 16px; border-radius: 4px; margin: -20px -20px 16px -20px; font-size: 12pt;">
        Szenario A: Agent Builder in Copilot Chat (kostenlos)
    </div>

    <div style="background-color: #f0f6ff; border-radius: 6px; padding: 14px; margin-bottom: 12px;">
        <strong style="color: #0078d4;">① Agent erstellen</strong><br>
        <span style="margin-left: 24px;">
            <span style="display: inline-block; background: #0078d4; color: white; padding: 2px 8px; border-radius: 3px; font-size: 9pt; margin-right: 6px;">Lisa</span>
            öffnet <em>microsoft365.com/chat</em> → klickt auf <strong>New agent</strong> → beschreibt den Agenten in natürlicher Sprache.
        </span>
    </div>

    <div style="background-color: #e8f5e9; border-radius: 6px; padding: 14px; margin-bottom: 12px;">
        <strong style="color: #0078d4;">② Wissen konfigurieren</strong><br>
        <span style="margin-left: 24px;">Agent Builder konfiguriert automatisch: Name, Instruktionen, Starter-Prompts. Lisa fügt öffentliche URLs als Wissensquelle hinzu.</span>
    </div>

    <div style="background-color: #f0f6ff; border-radius: 6px; padding: 14px; margin-bottom: 12px;">
        <strong style="color: #0078d4;">③ Testen &amp; Publizieren</strong><br>
        <span style="margin-left: 24px;">Lisa testet im "Try it"-Bereich, verfeinert die Instruktionen und veröffentlicht den Agenten.</span>
    </div>

    <div style="background-color: #e8f5e9; border-radius: 6px; padding: 14px;">
        <strong style="color: #0078d4;">④ Teilen</strong><br>
        <span style="margin-left: 24px;">Lisa teilt den Agenten mit ihrem Team. Alle können ihn in Copilot Chat nutzen.</span>
        <div style="margin-top: 8px; padding: 8px 12px; background: white; border-left: 3px solid #34a853; margin-left: 24px;">
            💰 <strong>Kosten: $0</strong> — Web-only Agent, keine Copilot-Lizenz nötig.
        </div>
    </div>
</div>

<!-- ===== SZENARIO B: Copilot Studio (erweitert) ===== -->
<div style="border: 2px solid #7b2d8e; border-radius: 8px; padding: 20px; margin: 20px 0;">
    <div style="background-color: #7b2d8e; color: white; padding: 8px 16px; border-radius: 4px; margin: -20px -20px 16px -20px; font-size: 12pt;">
        Szenario B: Copilot Studio (erweiterte Agenten)
    </div>

    <div style="background-color: #f3e8f9; border-radius: 6px; padding: 14px; margin-bottom: 12px;">
        <strong style="color: #7b2d8e;">① Agent in Copilot Studio erstellen</strong><br>
        <span style="margin-left: 24px;">
            <span style="display: inline-block; background: #7b2d8e; color: white; padding: 2px 8px; border-radius: 3px; font-size: 9pt; margin-right: 6px;">Admin</span>
            öffnet <em>copilotstudio.microsoft.com</em> → erstellt einen neuen Agenten mit SharePoint-Wissensquellen und Aktionen.
        </span>
    </div>

    <div style="background-color: #ede7f6; border-radius: 6px; padding: 14px; margin-bottom: 12px;">
        <strong style="color: #7b2d8e;">② SharePoint-Quellen anbinden</strong><br>
        <span style="margin-left: 24px;">Der Agent greift auf interne Dokumente zu – z.B. Richtlinien, Produktkataloge, FAQ-Seiten.</span>
    </div>

    <div style="background-color: #f3e8f9; border-radius: 6px; padding: 14px;">
        <strong style="color: #7b2d8e;">③ In Teams oder Copilot Chat veröffentlichen</strong><br>
        <span style="margin-left: 24px;">User nutzen den Agenten direkt in Teams oder Copilot Chat.</span>
        <div style="margin-top: 8px; padding: 8px 12px; background: white; border-left: 3px solid #e65100; margin-left: 24px;">
            💰 <strong>Kosten: $0.01 pro Nachricht</strong> — Pay-as-you-go für Tenant-Daten-Zugriff.
        </div>
    </div>
</div>

Varianten und Erweiterungen

Tabellen innerhalb von Szenario-Boxen

Wenn ein Schritt eine Übersicht enthält (z.B. Feature-Liste), kann eine Tabelle direkt in die Schritt-Box eingebettet werden:

<div style="background-color: #e8f5e9; border-radius: 6px; padding: 14px;">
    <strong style="color: #2e7d32;">✅ Was ist inklusive</strong>
    <table style="margin-top: 8px; border-collapse: collapse; width: 100%;">
        <thead>
            <tr>
                <th style="padding: 8px 12px; text-align: left; border: 1px solid #005a9e; background-color: #0078d4; color: white; font-weight: normal;">Feature</th>
                <th style="padding: 8px 12px; text-align: left; border: 1px solid #005a9e; background-color: #0078d4; color: white; font-weight: normal;">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="padding: 8px 12px; border: 1px solid #ddd;">Web-Wissen</td>
                <td style="padding: 8px 12px; border: 1px solid #ddd;">✅ Kostenlos</td>
            </tr>
            <tr style="background-color: #f9f9f9;">
                <td style="padding: 8px 12px; border: 1px solid #ddd;">SharePoint-Daten</td>
                <td style="padding: 8px 12px; border: 1px solid #ddd;">🔒 Lizenz nötig</td>
            </tr>
        </tbody>
    </table>
</div>

Fortschritts-/Stufenmodell (Upgrade Path)

Für Stufenmodelle (z.B. "Start free → Add PAYG → License power users") gibt es eine Variante mit nummerierten Kreisen:

<div style="border: 2px solid #0078d4; border-radius: 8px; padding: 20px; margin: 20px 0;">
    <div style="background-color: #0078d4; color: white; padding: 8px 16px; border-radius: 4px; margin: -20px -20px 16px -20px; font-size: 12pt;">
        Der natürliche Upgrade-Pfad
    </div>

    <div style="background-color: #fafafa; border-radius: 6px; padding: 16px;">
        <table style="border: none; margin: 0;">
            <tr style="background: none;">
                <td style="border: none; width: 80px; text-align: center; vertical-align: top;">
                    <div style="background: #e8f5e9; border-radius: 50%; width: 44px; height: 44px; line-height: 44px; text-align: center; font-weight: bold; color: #2e7d32; margin: 0 auto; font-size: 13pt;">1</div>
                </td>
                <td style="border: none; vertical-align: top; padding-bottom: 16px;">
                    <strong>Kostenlos starten</strong> — Agent Builder für alle aktivieren<br>
                    <span style="color: #555; font-size: 10pt;">User bauen Web-only Agents. Null Kosten. Baut AI Literacy auf.</span>
                </td>
            </tr>
            <tr style="background: none;">
                <td style="border: none; text-align: center; vertical-align: top;">
                    <div style="background: #fff3e0; border-radius: 50%; width: 44px; height: 44px; line-height: 44px; text-align: center; font-weight: bold; color: #e65100; margin: 0 auto; font-size: 13pt;">2</div>
                </td>
                <td style="border: none; vertical-align: top; padding-bottom: 16px;">
                    <strong>Pay-as-you-go hinzufügen</strong> — Azure-Subscription verbinden<br>
                    <span style="color: #555; font-size: 10pt;">$0.01/Nachricht. Budget-kontrolliert. Ideal für Pilot-Teams.</span>
                </td>
            </tr>
            <tr style="background: none;">
                <td style="border: none; text-align: center; vertical-align: top;">
                    <div style="background: #e3f2fd; border-radius: 50%; width: 44px; height: 44px; line-height: 44px; text-align: center; font-weight: bold; color: #0078d4; margin: 0 auto; font-size: 13pt;">3</div>
                </td>
                <td style="border: none; vertical-align: top;">
                    <strong>Power User lizenzieren</strong> — Copilot-Lizenz für High-Value User<br>
                    <span style="color: #555; font-size: 10pt;">$30/User/Monat. Copilot in Word, Excel, Outlook, Teams.</span>
                </td>
            </tr>
        </table>
    </div>
</div>

Zusammenfassungs-Tabelle nach Szenario-Boxen

Nach zwei oder mehr Szenario-Boxen folgt häufig eine Vergleichstabelle, die alle Szenarien gegenüberstellt:

<table style="border-collapse: collapse; width: 100%; margin: 20px 0;">
    <thead>
        <tr style="background-color: #0078d4; color: white;">
            <th style="padding: 8px 12px; text-align: left; border: 1px solid #005a9e; font-weight: normal;">Kriterium</th>
            <th style="padding: 8px 12px; text-align: left; border: 1px solid #005a9e; font-weight: normal;">Szenario A</th>
            <th style="padding: 8px 12px; text-align: left; border: 1px solid #005a9e; font-weight: normal;">Szenario B</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="padding: 8px 12px; border: 1px solid #ddd;">Kosten</td>
            <td style="padding: 8px 12px; border: 1px solid #ddd;">$0</td>
            <td style="padding: 8px 12px; border: 1px solid #ddd;">$0.01/Nachricht</td>
        </tr>
        <tr style="background-color: #f9f9f9;">
            <td style="padding: 8px 12px; border: 1px solid #ddd;">Lizenz</td>
            <td style="padding: 8px 12px; border: 1px solid #ddd;">Keine</td>
            <td style="padding: 8px 12px; border: 1px solid #ddd;">PAYG oder Copilot</td>
        </tr>
    </tbody>
</table>

Designprinzipien (für den Agent)

  1. Farbe = Bedeutung. Jede Szenario-Box hat eine Farbe, die den Typ signalisiert. Nie zwei Boxen hintereinander in derselben Farbe.

  2. Schritte erzählen eine Geschichte. Die Nummerierung ①②③④ ist chronologisch. Der Leser wird durch einen Prozess geführt.

  3. Abwechselnde Hintergrundfarben innerhalb einer Box (Farbe A / Farbe B) verhindern, dass die Schritte visuell verschmelzen.

  4. Der letzte Schritt hat kein margin-bottom. Er sitzt bündig am unteren Rand des Containers.

  5. Callout-Boxen (Kosten, Ergebnis) stehen immer innerhalb eines Schritts, nie alleinstehend.

  6. Personen-Badges identifizieren Rollen auf einen Blick und machen das Szenario konkret/greifbar.

  7. Maximal 4–5 Schritte pro Box. Mehr wird unübersichtlich. Bei mehr Inhalt → zweite Box oder Tabelle.

  8. Header-Bar-Text ist kurz und prägnant. Keine ganzen Sätze. Format: "Szenario X: Kernaussage" oder eine Frage.

  9. Der negative Margin der Header-Bar (margin: -20px -20px 16px -20px) ist essentiell — er sorgt dafür, dass die Bar bündig am Container-Rand sitzt und wie ein richtiger Header aussieht.

  10. Inline-Styles statt CSS-Klassen. Alle Styles sind inline, damit die HTML-Datei in Outlook, Teams und Browsern identisch aussieht (Mail-Clients ignorieren <style>-Blöcke).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment