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

Système de design inspiré de Slack

Category: Productivité & SaaS Plateforme de communication professionnelle. Palette primaire aubergine, palette multi-accents pour le logo, surfaces claires avec barre latérale sombre, ton chaleureux et accessible.

1. Thème visuel et atmosphère

L'identité de Slack repose sur l'idée que le travail doit se sentir humain et même un peu amusant. La surface canonique est claire — des zones de contenu blanches avec une barre latérale aubergine profonde (#4A154B) — à l'opposé des outils à dominante sombre. Ce contraste est intentionnel : la barre latérale est une ancre de navigation calme et toujours présente, tandis que la zone de contenu est lumineuse et ouverte.

La palette du logo — bleu, vert, jaune, rouge — apparaît principalement dans l'icône dièse et dans les contextes marketing, et non disséminée dans l'interface. Dans le produit lui-même, Slack utilise un système de couleurs sobre et professionnel, avec l'aubergine comme seul ancre de marque.

Caractéristiques principales :

• Surfaces de contenu prioritairement claires : blanc #FFFFFF et quasi-blanc #F8F8F8
• Barre latérale aubergine profonde #4A154B — l'élément d'interface le plus reconnaissable de la marque
• Quatre couleurs d'accent du logo (bleu, vert, jaune, rouge) utilisées avec parcimonie, uniquement comme points forts
• Larsseit pour les titres (marketing), sans-serif système pour l'interface
• Arrondi mais pas cartoonesque : rayon de 4–8px sur la plupart des composants
• Dense mais aéré : rangées de messages compactes avec une hiérarchie de fils claire
• Ton chaleureux et conversationnel — émojis, réactions et illustrations sont de première importance

---

2. Palette de couleurs et rôles

Primaire de marque

Jeton	Hex	Rôle
--color-aubergine	#4A154B	Arrière-plan de la barre latérale, couleur principale de la marque
--color-aubergine-dark	#350d36	États de survol sur les surfaces aubergine
--color-aubergine-light	#611f69	Mise en évidence de l'élément actif dans la barre latérale

Couleurs d'accent du logo (à utiliser avec parcimonie — points forts, icônes, marketing uniquement)

Jeton	Hex	Nom	Rôle
--color-blue	#36C5F0	Bleu ciel	Icônes de canaux, liens, états informatifs
--color-green	#2EB67D	Vert sarcelle	Statut en ligne, états de succès
--color-yellow	#ECB22E	Or	Statut absent, avertissements, points forts
--color-red	#E01E5A	Rubis	Notifications, erreurs, badge de mentions

Surface et arrière-plan

Jeton	Hex	Rôle
--bg-primary	#FFFFFF	Zone principale des messages, modales
--bg-secondary	#F8F8F8	Panneaux de fils, surfaces secondaires
--bg-tertiary	#F1F1F1	Arrière-plans des champs de saisie, états de survol
--bg-sidebar	#4A154B	Barre latérale gauche (aubergine)
--bg-sidebar-hover	rgba(255,255,255,0.1)	Survol d'un élément de la barre latérale
--bg-sidebar-active	rgba(255,255,255,0.2)	Élément actif de la barre latérale
--bg-message-hover	#F8F8F8	Survol d'une rangée de message

Couleurs de texte

Jeton	Hex	Rôle
--text-primary	#1D1C1D	Texte principal du corps (quasi-noir)
--text-secondary	#616061	Horodatages, étiquettes atténuées
--text-sidebar	rgba(255,255,255,0.9)	Noms des canaux dans la barre latérale
--text-sidebar-muted	rgba(255,255,255,0.6)	Éléments inactifs de la barre latérale
--text-link	#1264A3	Liens en ligne dans les messages
--text-mention	#1264A3	Couleur du texte des @mentions

Couleurs sémantiques

Jeton	Hex	Rôle
--color-success	#2EB67D	Notifications de succès, états positifs
--color-warning	#ECB22E	États d'avertissement
--color-danger	#E01E5A	États d'erreur, actions destructrices
--color-info	#36C5F0	Points forts informatifs

Bordure et séparateur

Jeton	Hex	Rôle
--border-default	#DDDDDD	Séparateurs standard, bordures de cartes
--border-subtle	#F1F1F1	Séparateurs discrets entre les rangées
--border-focus	#1264A3	Couleur de l'anneau de focus

---

3. Règles typographiques

Polices de caractères

Rôle	Officielle	Substitut web
Titres d'affichage / Marketing	Larsseit	'Larsseit', 'Helvetica Neue', Arial, sans-serif
Interface / Corps / Chrome	Slack Lato (personnalisé)	system-ui, -apple-system, BlinkMacSystemFont, sans-serif
Code / Monospace	—	'Monaco', 'Menlo', 'Courier New', monospace

Slack utilise Larsseit pour les titres marketing et une variante Lato personnalisée pour l'interface du produit. Pour une utilisation web, system-ui est le substitut le plus sûr.

Échelle typographique

Niveau	Taille	Graisse	Hauteur de ligne	Espacement des lettres	Usage
Affichage XL	48px	800	1.1	-1px	Titres héros marketing
Affichage L	36px	700	1.15	-0.5px	Héros de section
Titre 1	28px	700	1.25	normal	Titres de modales, en-têtes de page
Titre 2	22px	700	1.3	normal	Titres de cartes, sections de paramètres
Titre 3	18px	700	1.35	normal	En-têtes de sous-sections
Corps L	16px	400	1.5	normal	Texte des messages, descriptions
Corps	15px	400	1.46667	normal	Texte d'interface par défaut (taille de base de Slack)
Corps SM	13px	400	1.38462	normal	Métadonnées secondaires
Légende	12px	400	1.33	normal	Horodatages, indices
Code	12px	400	1.5	normal	Code en ligne, blocs de code

Règles typographiques

• La taille de corps de base de Slack est 15px — légèrement inférieure à 16px pour plus de densité
• Canaux non lus : graisse 700 — le gras est le principal indicateur de non-lu
• Horodatages : 12px --text-secondary, affichés au survol uniquement
• Blocs de code : arrière-plan #F8F8F8, bordure 1px solid #DDDDDD, border-radius 4px
• Ne jamais utiliser de tailles de police inférieures à 12px
• Titres marketing : espacement des lettres -1px pour les grandes tailles d'affichage

---

4. Styles des composants

Boutons

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

Champs de saisie

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

Élément de canal dans la barre latérale

.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 non lu

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

Pièces jointes de message / Cartes

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

Réactions

.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. Principes de mise en page

Mise en page à trois colonnes

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

Système d'espacement (base 4px)

Jeton	Valeur	Usage
--space-1	4px	Espaces serrés
--space-2	8px	Rembourrage de composant
--space-3	12px	Rembourrage des champs de saisie
--space-4	16px	Rembourrage standard
--space-6	24px	Rembourrage de carte
--space-8	32px	Espaces entre sections

Structure de la barre latérale

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

Compositeur de message

• Épinglé en bas de la zone de message
• border: 1px solid #DDDDDD, border-radius: 8px, margin: 0 16px 16px
• Barre d'outils : émoji, pièce jointe, format, bouton d'envoi

---

6. Profondeur et élévation

Slack utilise des ombres légères sur une surface claire :

Niveau	Usage	Ombre
Plat	Rangées de messages, éléments de la barre latérale	none
Bas	Cartes, champs de saisie	0 1px 3px rgba(0,0,0,0.08)
Moyen	Menus déroulants, popovers	0 4px 12px rgba(0,0,0,0.12)
Élevé	Modales, dialogues	0 8px 24px rgba(0,0,0,0.15)
Superposition	Arrière-plans de modales	rgba(0,0,0,0.5)

---

7. À faire et à ne pas faire

✅ À faire

• Utiliser l'aubergine #4A154B pour la barre latérale — c'est l'élément d'interface le plus iconique de Slack
• Garder la zone de contenu principale blanche et claire
• Utiliser #1D1C1D (quasi-noir) pour tout le texte du corps, pas le noir pur
• Mettre les noms de canaux en gras pour indiquer le statut non lu — la graisse est l'indicateur
• Utiliser les quatre couleurs d'accent uniquement pour les rôles sémantiques (succès, avertissement, danger, info)
• Appliquer border-left: 4px sur les pièces jointes et les intégrations de messages
• Afficher les horodatages au survol uniquement
• Utiliser #1264A3 pour les liens et les états de focus
• Garder les éléments de la barre latérale compacts : hauteur 28px, border-radius 6px

❌ À ne pas faire

• Ne pas utiliser une zone de contenu principale sombre — Slack est prioritairement clair
• Ne pas disperser bleu/vert/jaune/rouge comme accents décoratifs
• Ne pas utiliser le noir pur #000000 pour le texte
• Ne pas utiliser des bulles de dialogue — les messages sont des rangées plates
• Ne pas créer des boutons à grand rayon — 4px est la norme
• Ne pas afficher les horodatages en permanence
• Ne pas utiliser les MAJUSCULES pour les noms de canaux
• Ne pas utiliser des tailles de police inférieures à 12px

---

8. Comportement responsive

Points de rupture

Point de rupture	Largeur	Mise en page
Mobile	< 768px	Panneau unique, barre latérale en tiroir gauche
Tablette	768–1024px	Barre latérale + zone de messages uniquement
Bureau	> 1024px	Mise en page complète à trois colonnes

Adaptations mobiles

• Barre latérale : tiroir gauche, glisser à droite pour ouvrir
• Barre d'onglets du bas : Accueil, MDs, Activité, Vous
• Panneau de fil : superposition plein écran
• Compositeur : épinglé au-dessus du clavier
• Éléments de la liste de canaux : hauteur de cible tactile 44px
• Barre d'en-tête aubergine conservée sur mobile

---

9. Guide de prompt pour agent

Lors de la génération de designs dans le style Slack, suivez cette approche :

Application des couleurs :

Définissez background: #FFFFFF comme canevas principal. Utilisez #4A154B (aubergine) pour la barre latérale. Tout le texte principal est #1D1C1D. Les liens et les anneaux de focus utilisent #1264A3. Les quatre couleurs du logo — #36C5F0, #2EB67D, #ECB22E, #E01E5A — sont uniquement sémantiques : info, succès, avertissement, danger.

Typographie :

Utilisez system-ui, -apple-system, sans-serif pour toute l'interface. La taille de base est 15px. Canaux non lus : graisse 700. Texte du corps : graisse 400. Horodatages : 12px #616061, survol uniquement. Code : Monaco, Menlo, monospace, 12px, arrière-plan #F8F8F8.

Mise en page :

Trois colonnes : barre latérale aubergine de 240px + zone de messages blanche flexible + panneau de fil optionnel de 400px. Éléments de la barre latérale : hauteur 28px, rayon 6px, gras si non lu. Compositeur : épinglé en bas, border: 1px solid #DDDDDD, border-radius: 8px.

Composants :

Boutons : rayon 4px, hauteur 36px, primaire aubergine. Champs de saisie : bordure 1px solid #DDDDDD, anneau de focus #1264A3. Rangées de messages : plates, sans bulles, avatar circulaire de 36px. Réactions : pilule border: 1px solid #DDDDDD, border-radius: 24px.

Ton :

Slack est chaleureux, professionnel et humain. Les états vides utilisent des illustrations amicales. Les appels à l'action sont directs : « Envoyer un message », « Commencer ». Les messages d'erreur sont clairs et utiles. Jamais alarmant.

Antipatterns à éviter :

Pas de zone de contenu sombre. Pas de bulles de dialogue. Pas de texte noir pur. Pas d'accents multi-couleurs dispersés. Pas de noms de canaux en MAJUSCULES. Pas de police inférieure à 12px. Pas de grand rayon de bouton.