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

Sistema di design ispirato a Slack

Category: Produttività e SaaS Piattaforma di comunicazione aziendale. Palette primaria melanzana, palette multi-accento del logo, superfici chiare con barra laterale scura, tono caldo e accessibile.

1. Tema visivo e atmosfera

L'identità di Slack si costruisce attorno all'idea che il lavoro debba sembrare umano e persino un po' divertente. La superficie canonica è chiara — aree di contenuto bianche con una profonda barra laterale melanzana (#4A154B) — l'opposto degli strumenti a dominante scura. Questo contrasto è intenzionale: la barra laterale è un'ancora di navigazione tranquilla e sempre presente, mentre l'area del contenuto è luminosa e aperta.

La palette del logo — blu, verde, giallo, rosso — appare principalmente nell'icona del cancelletto e nei contesti di marketing, non disseminata nell'interfaccia. Nel prodotto stesso, Slack utilizza un sistema di colori sobrio e professionale con il melanzana come unico ancoraggio del brand.

Caratteristiche principali:

• Superfici di contenuto prevalentemente chiare: bianco #FFFFFF e quasi bianco #F8F8F8
• Profonda barra laterale melanzana #4A154B — l'elemento di interfaccia più riconoscibile del brand
• Quattro colori di accento del logo (blu, verde, giallo, rosso) usati con parsimonia, solo come evidenziazioni
• Larsseit per i titoli (marketing), sans-serif di sistema per l'interfaccia
• Arrotondato ma non cartoonesco: raggio di 4–8px sulla maggior parte dei componenti
• Denso ma respirabile: righe di messaggi compatte con chiara gerarchia dei thread
• Tono caldo e conversazionale — emoji, reazioni e illustrazioni sono elementi di prima classe

---

2. Palette di colori e ruoli

Colore primario del brand

Token	Hex	Ruolo
--color-aubergine	#4A154B	Sfondo della barra laterale, colore principale del brand
--color-aubergine-dark	#350d36	Stati di hover su superfici melanzana
--color-aubergine-light	#611f69	Evidenziazione dell'elemento attivo nella barra laterale

Colori di accento del logo (usare con parsimonia — solo evidenziazioni, icone, marketing)

Token	Hex	Nome	Ruolo
--color-blue	#36C5F0	Azzurro cielo	Icone di canale, link, stati informativi
--color-green	#2EB67D	Verde acqua	Stato online, stati di successo
--color-yellow	#ECB22E	Oro	Stato assente, avvisi, evidenziazioni
--color-red	#E01E5A	Rubino	Notifiche, errori, badge menzioni

Superficie e sfondo

Token	Hex	Ruolo
--bg-primary	#FFFFFF	Area principale dei messaggi, modali
--bg-secondary	#F8F8F8	Pannelli dei thread, superfici secondarie
--bg-tertiary	#F1F1F1	Sfondi dei campi di input, stati di hover
--bg-sidebar	#4A154B	Barra laterale sinistra (melanzana)
--bg-sidebar-hover	rgba(255,255,255,0.1)	Hover su elemento della barra laterale
--bg-sidebar-active	rgba(255,255,255,0.2)	Elemento attivo della barra laterale
--bg-message-hover	#F8F8F8	Hover su riga del messaggio

Colori del testo

Token	Hex	Ruolo
--text-primary	#1D1C1D	Testo principale del corpo (quasi nero)
--text-secondary	#616061	Timestamp, etichette attenuate
--text-sidebar	rgba(255,255,255,0.9)	Nomi dei canali nella barra laterale
--text-sidebar-muted	rgba(255,255,255,0.6)	Elementi inattivi della barra laterale
--text-link	#1264A3	Link in linea nei messaggi
--text-mention	#1264A3	Colore del testo delle @menzioni

Colori semantici

Token	Hex	Ruolo
--color-success	#2EB67D	Notifiche di successo, stati positivi
--color-warning	#ECB22E	Stati di avviso
--color-danger	#E01E5A	Stati di errore, azioni distruttive
--color-info	#36C5F0	Evidenziazioni informative

Bordo e divisore

Token	Hex	Ruolo
--border-default	#DDDDDD	Divisori standard, bordi delle schede
--border-subtle	#F1F1F1	Separatori sottili tra le righe
--border-focus	#1264A3	Colore dell'anello di focus

---

3. Regole tipografiche

Caratteri tipografici

Ruolo	Ufficiale	Alternativa web
Titoli di visualizzazione / Marketing	Larsseit	'Larsseit', 'Helvetica Neue', Arial, sans-serif
Interfaccia / Corpo / Chrome	Slack Lato (personalizzato)	system-ui, -apple-system, BlinkMacSystemFont, sans-serif
Codice / Monospaziato	—	'Monaco', 'Menlo', 'Courier New', monospace

Slack usa Larsseit per i titoli di marketing e una variante personalizzata di Lato per l'interfaccia del prodotto. Per l'uso web, system-ui è l'alternativa più sicura.

Scala tipografica

Livello	Dimensione	Peso	Altezza di riga	Spaziatura lettere	Utilizzo
Visualizzazione XL	48px	800	1.1	-1px	Titoli hero di marketing
Visualizzazione L	36px	700	1.15	-0.5px	Hero di sezione
Titolo 1	28px	700	1.25	normal	Titoli di modali, intestazioni di pagina
Titolo 2	22px	700	1.3	normal	Titoli di schede, sezioni delle impostazioni
Titolo 3	18px	700	1.35	normal	Intestazioni di sottosezione
Corpo L	16px	400	1.5	normal	Testo dei messaggi, descrizioni
Corpo	15px	400	1.46667	normal	Testo di interfaccia predefinito (dimensione base di Slack)
Corpo SM	13px	400	1.38462	normal	Metadati secondari
Didascalia	12px	400	1.33	normal	Timestamp, suggerimenti
Codice	12px	400	1.5	normal	Codice in linea, blocchi di codice

Regole tipografiche

• La dimensione di corpo base di Slack è 15px — leggermente inferiore a 16px per maggiore densità
• Canali non letti: peso 700 — il grassetto è il principale indicatore di non letto
• Timestamp: 12px --text-secondary, mostrati solo al passaggio del cursore
• Blocchi di codice: sfondo #F8F8F8, bordo 1px solid #DDDDDD, border-radius 4px
• Non usare mai dimensioni di font inferiori a 12px
• Titoli di marketing: spaziatura lettere -1px per le grandi dimensioni di visualizzazione

---

4. Stili dei componenti

Pulsanti

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

Campi di input

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

Elemento di canale nella barra laterale

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

Badge messaggi non letti

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

Allegati messaggi / Schede

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

Reazioni

.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. Principi di layout

Layout a tre colonne

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

Sistema di spaziatura (base 4px)

Token	Valore	Utilizzo
--space-1	4px	Spazi ridotti
--space-2	8px	Padding del componente
--space-3	12px	Padding dei campi di input
--space-4	16px	Padding standard
--space-6	24px	Padding delle schede
--space-8	32px	Spazi tra sezioni

Struttura della barra laterale

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

Compositore di messaggi

• Fissato in fondo all'area dei messaggi
• border: 1px solid #DDDDDD, border-radius: 8px, margin: 0 16px 16px
• Barra degli strumenti: emoji, allegato, formato, pulsante di invio

---

6. Profondità ed elevazione

Slack usa ombre leggere su una superficie chiara:

Livello	Utilizzo	Ombra
Piatto	Righe dei messaggi, elementi della barra laterale	none
Basso	Schede, campi di input	0 1px 3px rgba(0,0,0,0.08)
Medio	Menu a discesa, popover	0 4px 12px rgba(0,0,0,0.12)
Alto	Modali, finestre di dialogo	0 8px 24px rgba(0,0,0,0.15)
Sovrapposizione	Sfondi delle modali	rgba(0,0,0,0.5)

---

7. Cosa fare e cosa non fare

✅ Fare

• Usare il melanzana #4A154B per la barra laterale — è l'elemento di interfaccia più iconico di Slack
• Mantenere l'area di contenuto principale bianca e chiara
• Usare #1D1C1D (quasi nero) per tutto il testo del corpo, non il nero puro
• Mettere in grassetto i nomi dei canali per indicare lo stato non letto — il peso è l'indicatore
• Usare i quattro colori di accento solo per ruoli semantici (successo, avviso, pericolo, informazione)
• Applicare border-left: 4px agli allegati e alle incorporazioni dei messaggi
• Mostrare i timestamp solo al passaggio del cursore
• Usare #1264A3 per link e stati di focus
• Mantenere gli elementi della barra laterale compatti: altezza 28px, border-radius 6px

❌ Non fare

• Non usare un'area di contenuto principale scura — Slack è prevalentemente chiaro
• Non disseminare blu/verde/giallo/rosso come accenti decorativi
• Non usare il nero puro #000000 per il testo
• Non usare fumetti — i messaggi sono righe piatte
• Non fare pulsanti con raggio grande — 4px è lo standard
• Non mostrare i timestamp in modo permanente
• Non usare MAIUSCOLO per i nomi dei canali
• Non usare dimensioni di font inferiori a 12px

---

8. Comportamento responsivo

Breakpoint

Breakpoint	Larghezza	Layout
Mobile	< 768px	Pannello singolo, barra laterale come cassetto sinistro
Tablet	768–1024px	Solo barra laterale + area messaggi
Desktop	> 1024px	Layout completo a tre colonne

Adattamenti per mobile

• Barra laterale: cassetto sinistro, scorrere a destra per aprire
• Barra delle schede inferiore: Home, MD, Attività, Tu
• Pannello thread: sovrapposizione a schermo intero
• Compositore: fissato sopra la tastiera
• Elementi dell'elenco canali: altezza del target di tocco 44px
• Barra dell'intestazione melanzana superiore mantenuta su mobile

---

9. Guida ai prompt per agente

Quando si generano design in stile Slack, seguire questo approccio:

Applicazione dei colori:

Impostare background: #FFFFFF come tela principale. Usare #4A154B (melanzana) per la barra laterale. Tutto il testo principale è #1D1C1D. Link e anelli di focus usano #1264A3. I quattro colori del logo — #36C5F0, #2EB67D, #ECB22E, #E01E5A — sono esclusivamente semantici: informazione, successo, avviso, pericolo.

Tipografia:

Usare system-ui, -apple-system, sans-serif per tutta l'interfaccia. La dimensione base è 15px. Canali non letti: peso 700. Testo del corpo: peso 400. Timestamp: 12px #616061, solo al passaggio del cursore. Codice: Monaco, Menlo, monospace, 12px, sfondo #F8F8F8.

Layout:

Tre colonne: barra laterale melanzana da 240px + area messaggi bianca flessibile + pannello thread opzionale da 400px. Elementi della barra laterale: altezza 28px, raggio 6px, grassetto quando non letti. Compositore: fissato in basso, border: 1px solid #DDDDDD, border-radius: 8px.

Componenti:

Pulsanti: raggio 4px, altezza 36px, melanzana primario. Campi di input: bordo 1px solid #DDDDDD, anello di focus #1264A3. Righe dei messaggi: piatte, senza fumetti, avatar circolare da 36px. Reazioni: pillola border: 1px solid #DDDDDD, border-radius: 24px.

Tono:

Slack è caldo, professionale e umano. Gli stati vuoti usano illustrazioni amichevoli. Le chiamate all'azione sono dirette: «Invia messaggio», «Inizia». I messaggi di errore sono chiari e utili. Mai allarmante.

Antipattern da evitare:

Nessuna area di contenuto scura. Nessun fumetto. Nessun testo nero puro. Nessun accento multicolore disseminato. Nessun nome di canale in MAIUSCOLO. Nessun font inferiore a 12px. Nessun raggio di pulsante grande.