open-design/design-systems/slack/DESIGN-de.md

Von Slack inspiriertes Design-System

Category: Produktivität & SaaS Plattform für die Kommunikation am Arbeitsplatz. Aubergine als Primärfarbe, mehrfarbige Logo-Palette, helle Oberflächen mit dunkler Seitenleiste, warm und einladend.

1. Visuelles Thema und Atmosphäre

Slacks Identität basiert auf der Idee, dass Arbeit menschlich und sogar ein bisschen Spaß machen sollte. Die charakteristische Oberfläche ist hell — weiße Inhaltsbereiche mit einer tiefen Aubergine-Seitenleiste (#4A154B) — das Gegenteil von dunkel-zuerst-Tools. Dieser Kontrast ist bewusst gewählt: Die Seitenleiste ist ein ruhiger, immer präsenter Navigationsanker, während der Inhaltsbereich hell und offen ist.

Die Logo-Palette — blau, grün, gelb, rot — erscheint hauptsächlich im Hashtag-Icon und in Marketingkontexten, nicht verstreut durch die Benutzeroberfläche. Im Produkt selbst verwendet Slack ein zurückhaltendes, professionelles Farbsystem mit Aubergine als einzigem Markenanker.

Hauptmerkmale:

• Helle Inhaltsoberflächen zuerst: Weiß #FFFFFF und Nahweiß #F8F8F8
• Tiefes Aubergine #4A154B in der Seitenleiste — das markanteste UI-Element der Marke
• Vier Logo-Akzentfarben (blau, grün, gelb, rot) nur sparsam als Highlights verwendet
• Larsseit für Überschriften (Marketing), System-Serifenlos für die Benutzeroberfläche
• Abgerundet, aber nicht cartoonartig: 4–8px Radius bei den meisten Komponenten
• Dicht, aber luftig: kompakte Nachrichtenzeilen mit klarer Thread-Hierarchie
• Warmer und gesprächiger Ton — Emojis, Reaktionen und Illustrationen sind erstklassig

---

2. Farbpalette und Rollen

Marken-Primärfarbe

Token	Hex	Rolle
--color-aubergine	#4A154B	Seitenleistenhintergrund, Marken-Primärfarbe
--color-aubergine-dark	#350d36	Hover-Zustände auf Aubergine-Oberflächen
--color-aubergine-light	#611f69	Highlight für aktive Elemente in der Seitenleiste

Logo-Akzentfarben (sparsam verwenden — nur für Highlights, Icons, Marketing)

Token	Hex	Name	Rolle
--color-blue	#36C5F0	Himmelblau	Kanal-Icons, Links, Info-Zustände
--color-green	#2EB67D	Grünblau	Online-Status, Erfolgszustände
--color-yellow	#ECB22E	Gold	Abwesend-Status, Warnungen, Highlights
--color-red	#E01E5A	Rubin	Benachrichtigungen, Fehler, Erwähnungs-Badge

Oberfläche und Hintergrund

Token	Hex	Rolle
--bg-primary	#FFFFFF	Hauptnachrichtenbereich, Modals
--bg-secondary	#F8F8F8	Thread-Panels, sekundäre Oberflächen
--bg-tertiary	#F1F1F1	Eingabehintergründe, Hover-Zustände
--bg-sidebar	#4A154B	Linke Seitenleiste (Aubergine)
--bg-sidebar-hover	rgba(255,255,255,0.1)	Hover auf Seitenleistenelementen
--bg-sidebar-active	rgba(255,255,255,0.2)	Aktives Seitenleistenelement
--bg-message-hover	#F8F8F8	Hover auf Nachrichtenzeilen

Textfarben

Token	Hex	Rolle
--text-primary	#1D1C1D	Primärer Fließtext (nahschwarz)
--text-secondary	#616061	Zeitstempel, gedämpfte Beschriftungen
--text-sidebar	rgba(255,255,255,0.9)	Kanalnamen in der Seitenleiste
--text-sidebar-muted	rgba(255,255,255,0.6)	Inaktive Elemente in der Seitenleiste
--text-link	#1264A3	Inline-Links in Nachrichten
--text-mention	#1264A3	@Erwähnungs-Textfarbe

Semantische Farben

Token	Hex	Rolle
--color-success	#2EB67D	Erfolgs-Toasts, positive Zustände
--color-warning	#ECB22E	Warnzustände
--color-danger	#E01E5A	Fehlerzustände, destruktive Aktionen
--color-info	#36C5F0	Informations-Highlights

Rahmen und Trennlinien

Token	Hex	Rolle
--border-default	#DDDDDD	Standard-Trennlinien, Kartenrahmen
--border-subtle	#F1F1F1	Dezente Trennlinien zwischen Zeilen
--border-focus	#1264A3	Fokusring-Farbe

---

3. Typografie-Regeln

Schriftarten

Rolle	Offiziell	Web-Fallback
Display / Marketing-Überschriften	Larsseit	'Larsseit', 'Helvetica Neue', Arial, sans-serif
UI / Text / Chrome	Slack Lato (angepasst)	system-ui, -apple-system, BlinkMacSystemFont, sans-serif
Code / Monospace	—	'Monaco', 'Menlo', 'Courier New', monospace

Slack verwendet Larsseit für Marketing-Überschriften und eine angepasste Lato-Variante für die produktinterne Benutzeroberfläche. Für Web-Einsatz ist system-ui der sicherste Fallback.

Typografische Skala

Ebene	Größe	Stärke	Zeilenhöhe	Buchstabenabstand	Verwendung
Display XL	48px	800	1.1	-1px	Marketing-Hero-Überschriften
Display L	36px	700	1.15	-0.5px	Abschnitts-Heroes
Heading 1	28px	700	1.25	normal	Modal-Titel, Seitenüberschriften
Heading 2	22px	700	1.3	normal	Kartentitel, Einstellungsabschnitte
Heading 3	18px	700	1.35	normal	Unterabschnittsüberschriften
Body L	16px	400	1.5	normal	Nachrichtentext, Beschreibungen
Body	15px	400	1.46667	normal	Standard-UI-Text (Slacks Basisgröße)
Body SM	13px	400	1.38462	normal	Sekundäre Metadaten
Caption	12px	400	1.33	normal	Zeitstempel, Hinweise
Code	12px	400	1.5	normal	Inline-Code, Code-Blöcke

Typografie-Regeln

• Slacks Basis-Textgröße beträgt 15px — etwas kleiner als 16px für mehr Dichte
• Ungelesene Kanäle: Stärke 700 — Fettschrift ist der primäre Ungelesen-Indikator
• Zeitstempel: 12px --text-secondary, nur beim Hover anzeigen
• Code-Blöcke: Hintergrund #F8F8F8, Rahmen 1px solid #DDDDDD, Radius 4px
• Keine Schriftgrößen unter 12px verwenden
• Marketing-Überschriften: Buchstabenabstand -1px für große Display-Größen

---

4. Komponentenstile

Schaltflächen

/* Primary */
.btn-primary {
  background: #4A154B;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
  border: none;
}
.btn-primary:hover { background: #611f69; }

/* Secondary */
.btn-secondary {
  background: #FFFFFF;
  color: #1D1C1D;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }

/* Danger */
.btn-danger {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }

Eingabefelder

.input {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  color: #1D1C1D;
  font-size: 15px;
  padding: 8px 12px;
  height: 36px;
}
.input:focus {
  border-color: #1264A3;
  box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
  outline: none;
}

Seitenleisten-Kanalelement

.channel-item {
  height: 28px;
  padding: 0 16px;
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  font-weight: 400;
}
.channel-item:hover {
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
}
.channel-item.active {
  background: rgba(255,255,255,0.2);
  color: #FFFFFF;
}
.channel-item.unread {
  color: #FFFFFF;
  font-weight: 700;
}

Ungelesen-Badge

.badge {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
}

Nachrichten-Anhänge / Karten

.attachment {
  border-left: 4px solid #DDDDDD;
  background: #F8F8F8;
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin: 4px 0;
}

Reaktionen

.reaction {
  border: 1px solid #DDDDDD;
  border-radius: 24px;
  background: #F8F8F8;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
  background: rgba(18,100,163,0.1);
  border-color: #1264A3;
}

---

5. Layout-Prinzipien

Dreispaltiges Layout

┌──────────────┬──────────────────────────────┬─────────────┐
│   Sidebar    │        Message Area          │   Thread    │
│   (240px)    │          (flex: 1)           │  (400px)    │
│  #4A154B     │          #FFFFFF             │  optional   │
└──────────────┴──────────────────────────────┴─────────────┘

Abstands-System (Basis 4px)

Token	Wert	Verwendung
--space-1	4px	Enge Abstände
--space-2	8px	Komponenten-Padding
--space-3	12px	Eingabe-Padding
--space-4	16px	Standard-Padding
--space-6	24px	Karten-Padding
--space-8	32px	Abschnittsabstände

Seitenleisten-Struktur

[Arbeitsbereichsname ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
  # general
  # random
  # design  ● (unread)
────────────────────
▼ Direct Messages
  John Doe
  Jane Smith

Nachrichten-Eingabebereich

• Am unteren Rand des Nachrichtenbereichs fixiert
• border: 1px solid #DDDDDD, border-radius: 8px, margin: 0 16px 16px
• Werkzeugleiste: Emoji, Anhang, Formatierung, Senden-Schaltfläche

---

6. Tiefe und Elevation

Slack verwendet helle Schatten auf heller Oberfläche:

Ebene	Verwendung	Schatten
Flach	Nachrichtenzeilen, Seitenleistenelemente	none
Niedrig	Karten, Eingaben	0 1px 3px rgba(0,0,0,0.08)
Mittel	Dropdowns, Popovers	0 4px 12px rgba(0,0,0,0.12)
Hoch	Modals, Dialoge	0 8px 24px rgba(0,0,0,0.15)
Overlay	Modal-Hintergründe	rgba(0,0,0,0.5)

---

7. Dos und Don'ts

✅ Do

• Aubergine #4A154B für die Seitenleiste verwenden — das ikonischste UI-Element von Slack
• Den Hauptinhaltsbereich weiß und hell halten
• #1D1C1D (Nahschwarz) für den gesamten Fließtext verwenden, nicht reines Schwarz
• Kanalnamen fett setzen, um den Ungelesen-Status anzuzeigen — die Schriftstärke ist der Indikator
• Die vier Akzentfarben nur für semantische Rollen verwenden (Erfolg, Warnung, Gefahr, Info)
• border-left: 4px auf Nachrichten-Anhängen und Einbettungen anwenden
• Zeitstempel nur beim Hover anzeigen
• #1264A3 für Links und Fokus-Zustände verwenden
• Seitenleistenelemente kompakt halten: 28px Höhe, 6px Rahmenradius

❌ Don't

• Keinen dunklen Hauptinhaltsbereich verwenden — Slack ist hell-zuerst
• Blau/Grün/Gelb/Rot nicht als dekorative Akzente verstreuen
• Kein reines Schwarz #000000 für Text verwenden
• Keine Sprechblasen verwenden — Nachrichten sind flache Zeilen
• Schaltflächen nicht mit großem Radius gestalten — 4px ist Standard
• Zeitstempel nicht dauerhaft anzeigen
• Kanalnamen nicht in GROSSBUCHSTABEN schreiben
• Keine Schriftgrößen unter 12px verwenden

---

8. Responsives Verhalten

Haltepunkte

Haltepunkt	Breite	Layout
Mobil	< 768px	Einzelnes Panel, Seitenleiste als linke Schublade
Tablet	768–1024px	Seitenleiste + nur Nachrichtenbereich
Desktop	> 1024px	Vollständiges dreispaltiges Layout

Mobile Anpassungen

• Seitenleiste: Linke Schublade, nach rechts wischen zum Öffnen
• Untere Tab-Leiste: Home, DMs, Aktivität, Profil
• Thread-Panel: Vollbild-Overlay
• Eingabebereich: Über der Tastatur fixiert
• Kanallistenelemente: 44px Touch-Zielhöhe
• Aubergine-Top-Header-Leiste auf Mobilgeräten beibehalten

---

9. Agent-Prompt-Leitfaden

Beim Erstellen von Slack-ähnlichen Designs diesen Ansatz befolgen:

Farbverwendung:

background: #FFFFFF als Hauptleinwand setzen. #4A154B (Aubergine) für die Seitenleiste verwenden. Der gesamte Primärtext ist #1D1C1D. Links und Fokusringe verwenden #1264A3. Die vier Logo-Farben — #36C5F0, #2EB67D, #ECB22E, #E01E5A — sind nur semantisch: Info, Erfolg, Warnung, Gefahr.

Typografie:

system-ui, -apple-system, sans-serif für die gesamte Benutzeroberfläche verwenden. Basisgröße ist 15px. Ungelesene Kanäle: Stärke 700. Fließtext: Stärke 400. Zeitstempel: 12px #616061, nur beim Hover. Code: Monaco, Menlo, monospace, 12px, Hintergrund #F8F8F8.

Layout:

Drei Spalten: 240px Aubergine-Seitenleiste + flexibler weißer Nachrichtenbereich + optionales 400px Thread-Panel. Seitenleistenelemente: 28px Höhe, 6px Radius, fett wenn ungelesen. Eingabebereich: unten fixiert, border: 1px solid #DDDDDD, border-radius: 8px.

Komponenten:

Schaltflächen: 4px Radius, 36px Höhe, Aubergine als Primärfarbe. Eingaben: 1px solid #DDDDDD Rahmen, #1264A3 Fokusring. Nachrichtenzeilen: flach, keine Sprechblasen, 36px kreisförmiger Avatar. Reaktionen: Pille border: 1px solid #DDDDDD, border-radius: 24px.

Ton:

Slack ist warm, professionell und menschlich. Leere Zustände verwenden freundliche Illustrationen. CTAs sind direkt: „Send message", „Get started". Fehlermeldungen sind klar und hilfreich. Niemals beunruhigend.

Zu vermeidende Anti-Patterns:

Kein dunkler Inhaltsbereich. Keine Sprechblasen. Kein reiner schwarzer Text. Keine verstreuten Mehrfarb-Akzente. Keine Kanalnamen in GROSSBUCHSTABEN. Keine Schrift unter 12px. Kein großer Schaltflächen-Radius.