Design systems de redes sociais e comunidades
Sistemas de design extraídos de redes sociais, plataformas de comunidade e sites pessoais. Feeds, perfis, avatares e controles de publicação definem esses sistemas, muitas vezes com uma cor de marca divertida e componentes arredondados e amigáveis.
2 exemplos de DESIGN.md nesta categoria, de Dribbble e Snapchat. Extraídos das páginas públicas de cada site. Não são diretrizes oficiais de marca. Ainda não conhece o formato? Leia o que é um DESIGN.md.
Dribbble
O sistema de design do Dribbble é construído sobre um azul-marinho quase preto e profundo (#0d0c22), combinado com uma superfície branca nítida, e pontuado por um rosa-choque característico (#ea4c89), usado com moderação para ênfase editorial e destaques interativos. Todo o sistema tipográfico utiliza exclusivamente a família Mona Sans em todos os pesos, criando hierarquia apenas por peso e tamanho. Botões em formato de pílula (border-radius: 1e+07px) e cards arredondados (raio de 12px) definem a linguagem geométrica. O layout é espaçoso, com uma grade base de 8px, e a elevação é transmitida por sombras suaves em vez de camadas pesadas.
Snapchat
O site da Snapchat usa um tema claro de alto contraste, ancorado no amarelo icônico da marca, #FFFC00, em superfícies principais quase pretas (#121314) e em um fundo de página branco e limpo. O design combina Avenir Next (primária) com Graphik (secundária), criando uma hierarquia tipográfica amigável, mas bem estruturada. Os elementos de interação, como botões, pílulas e tags, usam cantos totalmente arredondados (100px), enquanto os campos de entrada usam um raio sutil de 5px. A navegação é uma pílula flutuante com uma sombra suave. O conteúdo é apresentado em cards de mídia grandes com texto branco sobreposto, criando um layout imersivo e voltado à prévia do app. A densidade geral é moderada, com espaçamento generoso e uma hierarquia visual clara que une convenções de marketing e de interface de produto.
Não encontrou o site que procura?
Cole qualquer URL para gerar o DESIGN.md de qualquer site. Cores, tipografia, espaçamento e tokens, prontos para o seu fluxo de trabalho com IA.