Style Social

Style Social

Ton lecteur reconnaît sa tribu en trois secondes. Le produit doit sembler vivant, chaleureux, incarné.

Quand l'utiliser

• Réseaux sociaux, communautés, forums, messageries, plateformes de créateurs, espaces membres, commentaires.
• Évite-le pour un outil pro sérieux, une banque ou un site institutionnel : le ludique y nuit à la crédibilité.

Palette

• Fond light : #ffffff, surface #f7f5f9 (neutre teinté violet). Fond dark : #0a0a0a, surface #17151a.
• Texte light : #1c1a1f (17:1). Secondaire : #6b6470 (5.7:1). Texte dark : #f5f3f7, secondaire #a8a2ad (8:1).
• Neutres toujours teintés, jamais de gris froid pur.
• Accent au choix : rose vif #f472b6, violet #8b5cf6 ou bleu #3b82f6.
• Sur blanc, ces accents sont trop clairs pour du texte (rose 2.7:1, bleu 3.7:1) : fonce en #db2777 ou #7c3aed pour les liens. En dark, rose (7.5:1) et violet (4.7:1) passent.
• Réactions : cœur #ef4444, applaudissement #facc15, rire #fb923c.
• Présence : en ligne #22c55e, absent #facc15, occupé #ef4444.

Typographie

• Manrope, Nunito ou Poppins (Google Fonts) pour une sensation ronde. Inter si tu veux plus neutre.
• Échelle : titre de page 22px/1.3 (700), nom d'auteur 15px (600), body de post 15 à 16px/1.5 (400), meta et timestamp 13px (400, muted), compteur 13px (600, tabular-nums).
• Emojis natifs bienvenus dans les copies du produit et les réactions, rendus en taille texte.
• Mentions @nom en accent foncé, 600.

Layout & grille

• Desktop : nav 240px, feed 600 à 680px, suggestions 320px. Sous 1024px, colonne droite masquée. Sous 768px, tab bar bas 56px.
• Rythme 4px : 4, 8, 12, 16, 24. Padding de post 16px. Densité modérée, le feed respire.
• Threads : indentation 40px, ligne verticale 2px reliant les réponses au parent.
• Composer toujours accessible : en haut du feed desktop, barre basse ou bouton flottant mobile.

Composants signature

• Avatar rond : 40px feed, 32px thread, 24px empilé. Dot de présence 10px avec anneau 2px couleur du fond.
• Post card : avatar, nom, timestamp relatif ("il y a 3 min"), contenu, médias radius 12px, réactions, commentaires.
• Réactions : pills 32px emoji + compteur, actif en fond accent à 15%.
• Chat : bulles radius 18px (coin 4px côté émetteur), les tiennes à droite en accent, les autres à gauche en --surface.
• Badge de notification : pastille rouge 18px, texte blanc 11px 700, "9+" au-delà.
• Composer : plein écran sur mobile, compteur de caractères, aperçu des liens.
• Signaux humains : "Léa est en train d'écrire", "Vu par 12 personnes".

Motion

• Réaction : pop scale(1.3) puis 1, 250ms, cubic-bezier(0.34, 1.56, 0.64, 1). Confettis seulement pour les jalons (100e abonné).
• Nouveaux posts : slide depuis le haut 250ms, via un bouton "3 nouveaux posts".
• Typing indicator : 3 points de 6px qui bouncent, boucle 1.2s, décalage 150ms.
• Pull-to-refresh natif sur mobile.
• Interdit : déplacer le feed pendant la lecture.

Tokens CSS

:root {
  --bg: #ffffff;
  --surface: #f7f5f9;
  --text: #1c1a1f;
  --muted: #6b6470;
  --border: #e9e5ee;
  --accent: #8b5cf6;
  --accent-text: #7c3aed;
  --heart: #ef4444;
  --online: #22c55e;
  --radius-bubble: 18px;
  --radius-card: 16px;
  --font: Manrope, Nunito, system-ui, sans-serif;
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="dark"] {
  --bg: #0a0a0a; --surface: #17151a; --text: #f5f3f7;
  --muted: #a8a2ad; --border: #2a2630; --accent-text: #a78bfa;
}

Checklist avant livraison

• Toute action destructive a un undo ("Message supprimé. Annuler" pendant 5s).
• Les états vides invitent à agir ("Suis 3 personnes pour remplir ton feed").
• Avatars avec fallback initiales sur fond teinté.
• Contraste des accents vérifié en light et en dark.
• Compteurs abrégés (1,2 k) avec valeur exacte au survol.
• Le feed ne saute pas quand de nouveaux contenus arrivent.

À éviter

• Gris froids purs, interfaces cliniques.
• Réactions sans compteur ni retour visuel.
• Scroll infini sans repère ni fin atteignable.
• Métriques de vanité en avant au détriment des conversations.

Prompts de démarrage

• "Crée le feed d'une communauté de cyclistes en style-social avec posts, réactions, threads et suggestions de groupes."
• "Conçois une messagerie de groupe avec bulles, typing indicator, réactions et fil de réponses."
• "Fais la page profil d'un créateur avec abonnés, posts épinglés et bouton de soutien."
• "Construis un forum de questions-réponses avec votes, meilleure réponse et threads imbriqués."