---
name: style-social
description: Social / community platform design - playful, feeds, avatars, reactions, threads, chat bubbles. Use when the user asks for "social network", "community", "chat", "feed", "creator platform", "forum" style.
---

# Style Social

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

## Palette

- BG: blanc `#ffffff` (light) ou near-black `#0a0a0a` (dark).
- Accent principal: rose vif `#f472b6`, violet `#8b5cf6`, ou bleu communautaire `#3b82f6`.
- Reaction colors: cœur rouge, applaudissement jaune, rire orange.
- Neutrals doux (jamais du gris froid pur, toujours teinté).

## Typographie

- Display + body: sans humaniste rond (Inter, Manrope, Poppins, Nunito).
- Body 15-16 px, line-height 1.5.
- Emojis natifs bienvenus dans les copies.

## Layout

- Feed vertical central, sidebars nav gauche et suggestions droite (desktop).
- Cards de post : avatar rond + nom + timestamp → contenu → reactions → comments.
- Threads : indentation visuelle, ligne verticale de rattachement.
- Composer input toujours accessible (bottom bar mobile, top desktop).

## Composants signature

- Avatar rond (border-radius: 50%) avec statut online (dot vert).
- Boutons reactions inline (thumbs up, heart, laugh) avec compteur.
- Chat bubbles : own à droite en accent, others à gauche en neutre.
- Notifications badge avec count.
- Modal composer plein écran mobile.

## Motion

- Reactions animées (heart qui pop, confettis pour milestones).
- Nouveaux posts qui slide in du haut.
- Typing indicator (3 dots qui bouncent).
- Pull-to-refresh natif sur mobile.

## Rules

- Aucune interaction destructive sans undo (ex: "Message envoyé - annuler dans 5s").
- Signals humains partout : "X est en train d'écrire", "Y a vu ta story".
- Densité modérée : le feed respire.