# Marca para proyectos open source: del README a las versiones [Canonical HTML page](https://gradiently.design/es/guide/open-source-project-branding) Casi todo el mundo conoce un proyecto open source por una vista previa de enlace, un README y una publicación de versión. Un poco de marca en esos tres sitios hace que el proyecto parezca cuidado, fiable y digno de una estrella. ## The short version - La marca de un proyecto open source vive sobre todo en cuatro sitios: el logotipo, la cabecera del README, la imagen de vista previa social del repositorio y los anuncios de versión. - Un buen logotipo open source es lo bastante sencillo para leerse a 16 píxeles como favicon y en pequeño en una lista de dependencias. - Los README de GitHub pueden alternar la imagen de cabecera entre versiones clara y oscura con el elemento HTML picture y prefers-color-scheme. - La imagen de vista previa social es lo que aparece cuando alguien comparte el enlace del repositorio, así que debe indicar el nombre del proyecto y qué hace. - Las publicaciones de versión con un estilo constante ayudan a los usuarios a notar las nuevas versiones y a asociarlas con el mismo proyecto. La **marca de un proyecto open source** no necesita una agencia de diseño. Necesita cuatro cosas hechas una vez y mantenidas con coherencia: un logotipo sencillo, una cabecera de README que se lea en modo claro y oscuro, una imagen social para cuando se comparta el repositorio y una plantilla reconocible para los anuncios de versión. Juntas dicen a un visitante en pocos segundos que el proyecto está mantenido y tiene un punto de vista, que a menudo es lo que consigue la primera estrella o el primer colaborador. ## Por qué importa la marca en un proyecto open source Los desarrolladores juzgan los proyectos rápido, y lo hacen por señales de cuidado: un README claro, versiones recientes, un nombre fácil de volver a encontrar. Una identidad visual coherente es una de esas señales. También ayuda a recordar tu proyecto entre varias bibliotecas parecidas y da a colaboradores y ponentes de conferencias algo que poner en una diapositiva. Nada de esto sustituye a una buena documentación; hace que una buena documentación se note más. ## Un logotipo open source que funciona a 16 píxeles Tu logotipo aparecerá como favicon, como avatar de GitHub, como pequeña insignia en un sitio de documentación y, a veces, como pegatina. Diseña primero para el caso más pequeño. Una sola forma contundente o una letra en una tipografía firme supera a una ilustración detallada. Exporta un SVG para la web y PNG transparentes para todo lo demás; [SVG frente a PNG](https://gradiently.design/es/guide/svg-vs-png) explica cuál usar en cada caso, y [el diseño de favicons](https://gradiently.design/es/guide/favicon-design) trata los tamaños diminutos. ### Difícil de usar - Una mascota detallada con líneas finas - Cinco colores que desaparecen en tamaño pequeño - Un logotipo tipográfico demasiado largo para leerse en un avatar - Solo un PNG sobre fondo blanco ### Fácil de usar - Una forma o letra que se lee a 16 px - Uno o dos colores más un fondo - Un símbolo corto para avatares, un logotipo tipográfico para cabeceras - SVG más PNG transparente, versiones clara y oscura Pon el símbolo sobre un fondo degradado para avatares y cabeceras y dejará de parecer un icono por defecto. Mantén tranquilo el degradado detrás del logotipo donde este se apoya; [el logotipo sobre fondo degradado](https://gradiently.design/es/guide/logo-on-gradient-background) explica cómo. - Azul terminal: `linear-gradient(135deg, #0d1117 0%, #1f2a44 55%, #3b82f6 100%)` - Verde de compilación: `radial-gradient(circle at 25% 25%, #a7f3d0 0%, #10b981 45%, #064e3b 100%)` - Violeta de versión: `linear-gradient(160deg, #1a1033 0%, #6d28d9 50%, #f0abfc 100%)` - Ámbar cálido: `linear-gradient(120deg, #fff7ed 0%, #fdba74 50%, #c2410c 100%)` Cuatro fondos de proyecto que combinan con los temas oscuro y claro de GitHub. Copia uno para avatares, cabeceras y la imagen social. ## Una cabecera de README que funciona en modo oscuro Muchos desarrolladores leen GitHub en modo oscuro, y una cabecera hecha para blanco brillará como una linterna. GitHub admite el elemento HTML `` en Markdown, así que puedes servir una versión clara y otra oscura de la misma cabecera. Un banner de 1200×600, el tamaño de un banner de blog, es un ancho cómodo para un README. [El diseño en modo oscuro](https://gradiently.design/es/guide/dark-mode-design) trata la parte del color. ```html

Tidepool: a tiny job queue for Postgres

``` Pégalo al principio de README.md. GitHub muestra la imagen oscura a quienes leen en modo oscuro y la clara al resto. Exporta ambas a 1200×600 y muéstralas a 600 de ancho para que se vean nítidas en pantallas de alta densidad. Pon tres cosas en la cabecera: el logotipo, el nombre del proyecto y una descripción de una línea. Las insignias, los comandos de instalación y las capturas van debajo, en texto, donde se pueden copiar y mantener al día. ## Cómo añadir una imagen de vista previa social en GitHub Cuando alguien pega el enlace de tu repositorio en un chat, un foro o una publicación, la plataforma muestra su **imagen de vista previa social**. Sin ella, GitHub genera una tarjeta por defecto con los datos del repositorio. Puedes subir la tuya en los ajustes del repositorio, en Social preview; GitHub indica las dimensiones recomendadas en esa página. Diséñala desde tu maestro de vista previa de enlace de 1200×630 y mantén las palabras en el centro para que pequeñas diferencias de formato no recorten nada. [El tamaño de la imagen Open Graph](https://gradiently.design/es/guide/open-graph-image-size) explica los recortes, y [las etiquetas Open Graph](https://gradiently.design/es/guide/open-graph-tags) trata la misma imagen para tu sitio de documentación. Una imagen horizontal de vista previa social para un proyecto open source llamado Tidepool, con su descripción en una línea Una vista previa social a 1200×630: nombre, una línea y nada cerca de los bordes. ## Gráficos de anuncio de versión que se notan Muchos usuarios se enteran de una nueva versión por una publicación y no por el registro de cambios. Un gráfico de versión constante, con el mismo fondo y composición y solo cambiando el número de versión y el titular, enseña a la gente a reconocer tus anuncios. Abre con lo que los usuarios ya pueden hacer, no solo con el número de versión. Un anuncio horizontal de la versión 2.0 de un proyecto open source, con el titular Reintentos con espera creciente Una publicación de versión para X o Bluesky a 1600×900: la función va primero, la versión apoya. Un gráfico cuadrado de versión con los puntos destacados de Tidepool 2,0 sobre el mismo degradado La versión cuadrada para LinkedIn a 1200×1200, con los puntos destacados. | Gráfico | Tamaño | Dónde aparece | | --- | --- | --- | | Cabecera de README | 1200×600 px | Parte superior del repositorio | | Vista previa social | Maestro de vista previa de enlace, 1200×630 px | Enlaces compartidos del repositorio | | Publicación de versión | 1600×900 px | X y Bluesky | | Publicación de versión, cuadrada | 1200×1200 px | LinkedIn | | Banner de comunidad | 960×540 px | Banner de servidor de Discord | | Vista previa del sitio de documentación | 1200×630 px | Enlaces compartidos de la documentación | El conjunto de trabajo de un proyecto. Un diseño maestro los cubre todos. 1. **Crea el símbolo** Una forma o letra, probada a 16 px. Exporta SVG y PNG transparente. 2. **Elige un fondo** Un degradado o color que combine con los temas oscuro y claro de GitHub. 3. **Construye la cabecera del README** Versiones clara y oscura, logotipo, nombre y una línea. 4. **Sube la vista previa social** Ajustes del repositorio, Social preview. Pruébala pegando el enlace en un chat. 5. **Convierte la publicación de versión en plantilla** Mantén la composición; cambia la versión y el titular cada vez. Gradiently encaja con mantenedores que prefieren no abrir una herramienta de diseño. Funciona dentro de ChatGPT, Claude y cualquier asistente compatible con servidores MCP remotos, así que puedes pedir un gráfico de versión mientras escribes las notas de la versión, y el diseño se abre en el Studio para una revisión final. Los diseños se apoyan en un Mark, un fondo degradado con el que nadie más puede exportar una vez que lo reservas, así que el estilo de tu proyecto es de verdad solo suyo. La [guía de configuración de MCP](https://gradiently.design/es/developers/mcp) lleva unos minutos. ## FAQ ### ¿Cómo añado una imagen de vista previa social a un repositorio de GitHub? Abre los ajustes del repositorio, busca Social preview y sube una imagen. GitHub muestra ahí las dimensiones recomendadas; mantén el texto en el centro para que no se recorte nada importante. ### ¿Cómo hago que la imagen de un README cambie en modo oscuro? Usa el elemento HTML picture con un source para prefers-color-scheme: dark y un img de reserva para el modo claro. GitHub lo renderiza en archivos Markdown. ### ¿Necesita logotipo un proyecto open source? No es obligatorio, pero un logotipo sencillo hace que el proyecto se reconozca mejor en avatares, documentación y charlas. Diséñalo para que se lea en tamaño favicon. ### ¿Qué debe incluir un gráfico de anuncio de versión? El nombre del proyecto, la versión y la función principal escrita como lo que los usuarios ya pueden hacer. Mantén la misma composición en cada versión.