Design systems réseaux sociaux et communautés
Des design systems extraits de réseaux sociaux, de plateformes communautaires et de sites personnels. Fils d’actualité, profils, avatars et commandes de publication les définissent, souvent avec une couleur de marque ludique et des composants arrondis et accueillants.
2 exemples de DESIGN.md dans cette catégorie, issus de Dribbble et Snapchat. Extraits des pages publiques de chaque site, pas de chartes de marque officielles. Vous découvrez le format ? Lisez ce qu’est un DESIGN.md.
Dribbble
Le système de design de Dribbble repose sur un bleu marine presque noir et profond (#0d0c22), associé à une surface blanche nette, ponctuée par un accent rose vif caractéristique (#ea4c89), utilisé avec parcimonie pour la mise en valeur éditoriale et les éléments interactifs. L'ensemble du système typographique repose exclusivement sur Mona Sans, dans toutes ses graisses, et crée la hiérarchie uniquement par le poids et la taille. Les boutons en forme de pilule (border-radius : 1e+07px) et les cartes arrondies (rayon de 12px) définissent le langage géométrique. La mise en page est aérée, avec une grille de base de 8px, et l'élévation est suggérée par des ombres portées subtiles plutôt que par des superpositions marquées.
Snapchat
Le site web de Snapchat repose sur un thème clair à fort contraste, ancré par son jaune de marque emblématique #FFFC00, des surfaces principales presque noires (#121314) et un fond de page blanc et épuré. Le design associe Avenir Next (principale) à Graphik (secondaire) pour une hiérarchie typographique à la fois conviviale et structurée. Les éléments d'interaction, boutons, pastilles et étiquettes, utilisent des rayons entièrement arrondis (100px), tandis que les champs de saisie adoptent un rayon discret de 5px. La navigation prend la forme d'une pastille flottante dotée d'une ombre portée douce. Le contenu est présenté dans de grandes cartes média avec du texte blanc superposé, pour une mise en page immersive qui met en avant l'aperçu de l'application. La densité globale est modérée, avec des espacements généreux et une hiérarchie visuelle claire qui fait le lien entre les conventions du marketing et celles des interfaces produit.
Vous ne trouvez pas le site qu’il vous faut ?
Collez une URL pour obtenir le DESIGN.md de n’importe quel site. Couleurs, typographie, espacements et tokens, prêts pour votre workflow IA.