workbuddy_skills/open-design/design-systems/slack/DESIGN-nl.md

Ontwerpsysteem Geïnspireerd door Slack

Category: Productiviteit & SaaS Werkplekcommunicatieplatform. Aubergine als primaire kleur, multi-accentlogo-palet, lichte oppervlakken met donkere zijbalk, warm en toegankelijk.

1. Visueel Thema & Sfeer

De identiteit van Slack is gebouwd rond het idee dat werk menselijk moet aanvoelen en zelfs een beetje leuk. Het canonieke oppervlak is licht — witte inhoudsgebieden met een diepe aubergine (#4A154B) zijbalk — het tegenovergestelde van donker-eerst-tools. Dit contrast is bewust: de zijbalk is een rustig, altijd aanwezig navigatieanker, terwijl het inhoudsgebied helder en open is.

Het logopalet — blauw, groen, geel, rood — verschijnt voornamelijk in het hashtag-icoon en marketingcontexten, niet verspreid door de UI. In het product zelf gebruikt Slack een ingehouden, professioneel kleursysteem met aubergine als enige merkanker.

Kernkenmerken:

• Licht-eerst inhoudsoppervlakken: wit #FFFFFF en bijna-wit #F8F8F8
• Diepe aubergine #4A154B zijbalk — het meest herkenbare UI-element van het merk
• Vier logo-accentkleuren (blauw, groen, geel, rood) spaarzaam gebruikt als uitlichting
• Larsseit voor koppen (marketing), systeem sans-serif voor UI
• Afgerond maar niet cartoonesk: 4–8px radius op de meeste componenten
• Compact maar ademend: compacte berichtrijen met duidelijke draadhiërarchie
• Warme en conversationele toon — emoji's, reacties en illustraties zijn eersteklas elementen

---

2. Kleurenpalet & Rollen

Primaire Merkkleur

Token	Hex	Rol
--color-aubergine	#4A154B	Zijbalkachtergrond, primaire merkkleur
--color-aubergine-dark	#350d36	Hoverstatus op aubergine-oppervlakken
--color-aubergine-light	#611f69	Actief item markering in zijbalk

Logo-accentkleuren (spaarzaam gebruiken — alleen voor uitlichting, iconen, marketing)

Token	Hex	Naam	Rol
--color-blue	#36C5F0	Hemelsblauw	Kanaalpictogrammen, links, informatiestatussen
--color-green	#2EB67D	Teal groen	Online status, successtatussen
--color-yellow	#ECB22E	Goud	Afwezigheidsstatus, waarschuwingen, uitlichtingen
--color-red	#E01E5A	Robijn	Meldingen, fouten, vermeldingsbadge

Oppervlak & Achtergrond

Token	Hex	Rol
--bg-primary	#FFFFFF	Hoofd berichtgebied, modals
--bg-secondary	#F8F8F8	Draadpanelen, secundaire oppervlakken
--bg-tertiary	#F1F1F1	Invoerachtergrondsden, hoverstatus
--bg-sidebar	#4A154B	Linkerzijbalk (aubergine)
--bg-sidebar-hover	rgba(255,255,255,0.1)	Hover zijbalkitem
--bg-sidebar-active	rgba(255,255,255,0.2)	Actief zijbalkitem
--bg-message-hover	#F8F8F8	Hover berichtrij

Tekstkleuren

Token	Hex	Rol
--text-primary	#1D1C1D	Primaire inhoudstekst (bijna zwart)
--text-secondary	#616061	Tijdstempels, gedempte labels
--text-sidebar	rgba(255,255,255,0.9)	Kanaalnamen in zijbalk
--text-sidebar-muted	rgba(255,255,255,0.6)	Inactieve zijbalkitems
--text-link	#1264A3	Inlinelinks in berichten
--text-mention	#1264A3	Tekstkleur @vermelding

Semantische Kleuren

Token	Hex	Rol
--color-success	#2EB67D	Succestoasts, positieve statussen
--color-warning	#ECB22E	Waarschuwingsstatussen
--color-danger	#E01E5A	Foutstatussen, destructieve acties
--color-info	#36C5F0	Informatieve uitlichtingen

Rand & Verdeler

Token	Hex	Rol
--border-default	#DDDDDD	Standaard scheidingslijnen, kaartrandlingen
--border-subtle	#F1F1F1	Subtiele scheidingslijnen tussen rijen
--border-focus	#1264A3	Focusring kleur

---

3. Typografieregels

Lettertypen

Rol	Officieel	Web-terugval
Display / Marketingkoppen	Larsseit	'Larsseit', 'Helvetica Neue', Arial, sans-serif
UI / Inhoud / Chrome	Slack Lato (aangepast)	system-ui, -apple-system, BlinkMacSystemFont, sans-serif
Code / Monospace	—	'Monaco', 'Menlo', 'Courier New', monospace

Slack gebruikt Larsseit voor marketingkoppen en een aangepaste Lato-variant voor de UI in het product. Voor webgebruik is system-ui de veiligste terugval.

Typografieschaal

Niveau	Grootte	Gewicht	Regelhoogte	Letterafstand	Gebruik
Display XL	48px	800	1.1	-1px	Marketing hero-koppen
Display L	36px	700	1.15	-0.5px	Sectie-hero's
Kop 1	28px	700	1.25	normal	Modaltitels, paginakoppen
Kop 2	22px	700	1.3	normal	Kaartitels, instellingssecties
Kop 3	18px	700	1.35	normal	Subsectiekoppen
Inhoud L	16px	400	1.5	normal	Berichttekst, beschrijvingen
Inhoud	15px	400	1.46667	normal	Standaard UI-tekst (basisgrootte van Slack)
Inhoud SM	13px	400	1.38462	normal	Secundaire metadata
Bijschrift	12px	400	1.33	normal	Tijdstempels, hints
Code	12px	400	1.5	normal	Inlinecode, codeblokken

Typografieregels

• De basisinhoudsgrootte van Slack is 15px — iets kleiner dan 16px voor dichtheid
• Ongelezen kanalen: gewicht 700 — vet is de primaire ongelezen indicator
• Tijdstempels: 12px --text-secondary, alleen weergeven bij hover
• Codeblokken: achtergrond #F8F8F8, rand 1px solid #DDDDDD, border-radius 4px
• Gebruik nooit lettergroottes onder 12px
• Marketingkoppen: letter-spacing -1px voor grote displayformaten

---

4. Componentstijlen

Knoppen

/* 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; }

Invoervelden

.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;
}

Zijbalkkanaalitem

.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;
}

Ongelezen Badge

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

Berichtbijlagen / Kaarten

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

Reacties

.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. Lay-outprincipes

Driekolomslay-out

┌──────────────┬──────────────────────────────┬─────────────┐
│   Zijbalk    │        Berichtgebied          │   Draad     │
│   (240px)    │          (flex: 1)           │  (400px)    │
│  #4A154B     │          #FFFFFF             │  optioneel  │
└──────────────┴──────────────────────────────┴─────────────┘

Ruimtesysteem (4px basis)

Token	Waarde	Gebruik
--space-1	4px	Nauwe tussenruimtes
--space-2	8px	Componentopvulling
--space-3	12px	Invoervulling
--space-4	16px	Standaardopvulling
--space-6	24px	Kaartopvulling
--space-8	32px	Sectietussenruimtes

Zijbalkstructuur

[Werkruimtenaam ▼]
────────────────────
Draden
Alle DM's
Concepten & Verzonden
────────────────────
▼ Kanalen
  # general
  # random
  # design  ● (ongelezen)
────────────────────
▼ Directe berichten
  John Doe
  Jane Smith

Berichtcomponist

• Vastgemaakt aan de onderkant van het berichtgebied
• border: 1px solid #DDDDDD, border-radius: 8px, margin: 0 16px 16px
• Werkbalk: emoji, bijlage, opmaak, verzendknop

---

6. Diepte & Elevatie

Slack gebruikt lichte schaduwen op een licht oppervlak:

Niveau	Gebruik	Schaduw
Vlak	Berichtrijen, zijbalkitems	none
Laag	Kaarten, invoervelden	0 1px 3px rgba(0,0,0,0.08)
Midden	Dropdowns, popovers	0 4px 12px rgba(0,0,0,0.12)
Hoog	Modals, dialoogvensters	0 8px 24px rgba(0,0,0,0.15)
Overlay	Modalachtergronden	rgba(0,0,0,0.5)

---

7. Aanbevelingen & Waarschuwingen

✅ Doe Dit

• Gebruik aubergine #4A154B voor de zijbalk — dit is het meest iconische UI-element van Slack
• Houd het hoofdinhoudsgebied wit en licht
• Gebruik #1D1C1D (bijna zwart) voor alle inhoudstekst, niet puur zwart
• Maak kanaalnamen vet om de ongelezen status te tonen — gewicht is de indicator
• Gebruik de vier accentkleuren alleen voor semantische rollen (succes, waarschuwing, gevaar, informatie)
• Pas border-left: 4px toe op berichtbijlagen en ingesloten elementen
• Toon tijdstempels alleen bij hover
• Gebruik #1264A3 voor links en focusstatussen
• Houd zijbalkitems compact: 28px hoogte, 6px border-radius

❌ Doe Dit Niet

• Gebruik geen donker hoofdinhoudsgebied — Slack is licht-eerst
• Verspreid blauw/groen/geel/rood niet als decoratieve accenten
• Gebruik geen puur zwart #000000 voor tekst
• Gebruik geen tekstballonnen — berichten zijn platte rijen
• Maak knoppen niet groot-radius — 4px is standaard
• Toon tijdstempels niet permanent
• Gebruik geen HOOFDLETTERS voor kanaalnamen
• Gebruik geen lettergroottes onder 12px

---

8. Responsief Gedrag

Breekpunten

Breekpunt	Breedte	Lay-out
Mobiel	< 768px	Enkel paneel, zijbalk als linkerpaneel
Tablet	768–1024px	Alleen zijbalk + berichtgebied
Desktop	> 1024px	Volledige driekolomslay-out

Mobiele Aanpassingen

• Zijbalk: linkerpaneel, veeg naar rechts om te openen
• Onderste tabbalk: Start, DM's, Activiteit, Jij
• Draadpaneel: volledig-scherm overlay
• Componist: vastgemaakt boven toetsenbord
• Kanalenlijstitems: 44px aanraakvlak hoogte
• Aubergine bovenste headerbalk behouden op mobiel

---

9. Agentpromptgids

Bij het genereren van Slack-stijl ontwerpen, volg deze aanpak:

Kleurtoepassing:

Stel background: #FFFFFF in als het hoofdcanvas. Gebruik #4A154B (aubergine) voor de zijbalk. Alle primaire tekst is #1D1C1D. Links en focusringen gebruiken #1264A3. De vier logokleuren — #36C5F0, #2EB67D, #ECB22E, #E01E5A — zijn uitsluitend semantisch: informatie, succes, waarschuwing, gevaar.

Typografie:

Gebruik system-ui, -apple-system, sans-serif voor alle UI. Basisgrootte is 15px. Ongelezen kanalen: gewicht 700. Inhoudstekst: gewicht 400. Tijdstempels: 12px #616061, alleen bij hover. Code: Monaco, Menlo, monospace, 12px, achtergrond #F8F8F8.

Lay-out:

Drie kolommen: aubergine zijbalk 240px + flexibel wit berichtgebied + optioneel draadpaneel 400px. Zijbalkitems: 28px hoogte, 6px radius, vet wanneer ongelezen. Componist: vastgemaakt onderaan, border: 1px solid #DDDDDD, border-radius: 8px.

Componenten:

Knoppen: 4px radius, 36px hoogte, aubergine primair. Invoervelden: rand 1px solid #DDDDDD, focusring #1264A3. Berichtrijen: plat, geen tekstballonnen, cirkelavatar 36px. Reacties: pill border: 1px solid #DDDDDD, border-radius: 24px.

Toon:

Slack is warm, professioneel en menselijk. Lege staten gebruiken vriendelijke illustraties. CTA's zijn direct: "Stuur bericht", "Aan de slag". Foutmeldingen zijn duidelijk en behulpzaam. Nooit alarmerend.

Te vermijden antipatronen:

Geen donker inhoudsgebied. Geen tekstballonnen. Geen puur zwarte tekst. Geen verspreide meerkleurige accenten. Geen HOOFDLETTERS in kanaalnamen. Geen lettertype onder 12px. Geen grote knopradius.