Sistemas de diseño de redes sociales y comunidades
Sistemas de diseño extraídos de redes sociales, plataformas de comunidad y sitios web personales. Los definen los feeds, los perfiles, los avatares y los controles para publicar, a menudo con un color de marca desenfadado y componentes redondeados y amables.
2 ejemplos de DESIGN.md en esta categoría, de Dribbble y Snapchat. Extraídos de las páginas públicas de cada sitio, no son guías de marca oficiales. ¿Es tu primera vez con el formato? Lee qué es un DESIGN.md.
Dribbble
El sistema de diseño de Dribbble se basa en un azul marino casi negro (#0d0c22) combinado con una superficie blanca nítida, con un acento rosa intenso característico (#ea4c89) que se usa con moderación para el énfasis editorial y los elementos interactivos destacados. Todo el sistema tipográfico utiliza exclusivamente Mona Sans en todos los pesos, y crea la jerarquía solo mediante el peso y el tamaño. Los botones con forma de píldora (border-radius: 1e+07px) y las tarjetas redondeadas (radio de 12px) definen el lenguaje geométrico. El diseño es espacioso, con una cuadrícula base de 8px, y la elevación se logra con sombras suaves en lugar de capas pesadas.
Snapchat
Snapchat en la web usa un tema claro de alto contraste, anclado en su amarillo de marca #FFFC00 icónico, superficies principales casi negras (#121314) y un fondo de página blanco y limpio. El diseño combina Avenir Next (principal) con Graphik (secundaria) para lograr una jerarquía tipográfica amigable pero estructurada. Los elementos de interacción —botones, píldoras y etiquetas— usan radios totalmente redondeados (100px), mientras que los campos de entrada usan un radio sutil de 5px. La navegación es una píldora flotante con una sombra suave. El contenido se presenta en tarjetas de medios grandes con texto blanco superpuesto, lo que crea una disposición inmersiva centrada en la vista previa de la app. La densidad general es moderada, con espaciado generoso y una jerarquía visual clara que une las convenciones de la comunicación de marketing y de la interfaz de producto.
¿No ves el sitio que necesitas?
Pega cualquier URL y obtén un DESIGN.md de cualquier web. Colores, tipografía, espaciado y tokens, listos para tu flujo de trabajo con IA.