# Branding de projeto open source: do README às notas de versão

[Canonical HTML page](https://gradiently.design/pt-pt/guide/open-source-project-branding)

A maioria das pessoas conhece um projeto open source através da pré-visualização de uma ligação, de um README e de uma publicação de versão. Um pouco de branding nestes três faz um projeto parecer cuidado, de confiança e merecedor de uma estrela.

## The short version

- O branding de um projeto open source vive sobretudo em quatro sítios: o logótipo, o cabeçalho do README, a imagem de pré-visualização social do repositório e os anúncios de versão.
- Um bom logótipo open source é simples o suficiente para se ler a 16 píxeis como favicon e em tamanho pequeno numa lista de dependências.
- Os README do GitHub podem alternar uma imagem de cabeçalho entre versões clara e escura usando o elemento HTML picture e prefers-color-scheme.
- A imagem de pré-visualização social é a que aparece quando alguém partilha a ligação do repositório, por isso deve dizer o nome do projeto e o que ele faz.
- As publicações de versão com um visual consistente ajudam os utilizadores a notar novas versões e a ligá-las ao mesmo projeto.

O **branding de um projeto open source** não precisa de uma agência de design. Precisa de quatro coisas feitas uma vez e mantidas consistentes: um logótipo simples, um cabeçalho de README que se lê nos modos claro e escuro, uma imagem de pré-visualização social para quando o repositório é partilhado e um modelo reconhecível para os anúncios de versão. Em conjunto, dizem a um visitante em poucos segundos que o projeto é mantido e tem um ponto de vista, o que muitas vezes conquista a primeira estrela ou o primeiro contribuidor.

## Porque é que o branding importa num projeto open source

Os programadores avaliam os projetos depressa, e avaliam por sinais de cuidado: um README claro, versões recentes, um nome fácil de voltar a encontrar. Uma identidade visual consistente é um desses sinais. Ajuda também as pessoas a lembrar-se do teu projeto entre várias bibliotecas semelhantes e dá a contribuidores e oradores de conferências algo para pôr num diapositivo. Nada disto substitui uma boa documentação; faz com que uma boa documentação se note mais.

## Um logótipo open source que funciona a 16 píxeis

O teu logótipo vai aparecer como favicon, avatar do GitHub, pequeno emblema num site de documentação e, de vez em quando, um autocolante. Desenha primeiro para o caso mais pequeno. Uma única forma forte ou uma letra num tipo de letra confiante vale mais do que uma ilustração detalhada. Exporta um SVG para a web e PNG transparentes para tudo o resto; [SVG vs PNG](https://gradiently.design/pt-pt/guide/svg-vs-png) explica qual usar onde, e [design de favicon](https://gradiently.design/pt-pt/guide/favicon-design) trata dos tamanhos minúsculos.

### Difícil de usar

- Uma mascote detalhada com traços finos
- Cinco cores que desaparecem em tamanho pequeno
- Um logótipo de texto demasiado longo para ler num avatar
- Só um PNG sobre fundo branco

### Fácil de usar

- Uma forma ou letra que se lê a 16 px
- Uma ou duas cores mais um fundo
- Uma marca curta para avatares, um logótipo de texto para cabeçalhos
- SVG mais PNG transparente, versões clara e escura

Põe a marca sobre um fundo de gradiente para avatares e cabeçalhos e ela deixa de parecer um ícone predefinido. Mantém o gradiente calmo atrás do logótipo, onde ele assenta; [logótipo sobre fundo de gradiente](https://gradiently.design/pt-pt/guide/logo-on-gradient-background) explica como.

- Azul de terminal: `linear-gradient(135deg, #0d1117 0%, #1f2a44 55%, #3b82f6 100%)`
- Verde de compilação: `radial-gradient(circle at 25% 25%, #a7f3d0 0%, #10b981 45%, #064e3b 100%)`
- Violeta de versão: `linear-gradient(160deg, #1a1033 0%, #6d28d9 50%, #f0abfc 100%)`
- Âmbar quente: `linear-gradient(120deg, #fff7ed 0%, #fdba74 50%, #c2410c 100%)`

Quatro fundos de projeto que ficam bem ao lado dos temas escuro e claro do GitHub. Copia um para avatares, cabeçalhos e a pré-visualização social.

## Um cabeçalho de README que funciona no modo escuro

Muitos programadores leem o GitHub em modo escuro, e um cabeçalho feito para fundo branco brilha como uma lanterna. O GitHub suporta o elemento HTML `<picture>` em Markdown, por isso podes servir uma versão clara e uma escura do mesmo cabeçalho. Um banner de 1200×600, o tamanho de um banner de blogue, é uma largura confortável para um README. [Design para modo escuro](https://gradiently.design/pt-pt/guide/dark-mode-design) trata do lado da cor.

```html
<p align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="./.github/header-dark.png">
    <img alt="Tidepool: a tiny job queue for Postgres" src="./.github/header-light.png" width="600">
  </picture>
</p>
```

Cola no topo de README.md. O GitHub mostra a imagem escura a quem lê em modo escuro e a clara a todos os outros. Exporta ambas em 1200×600 e mostra com 600 de largura para ficarem nítidas em ecrãs de alta densidade.

Põe três coisas no cabeçalho: o logótipo, o nome do projeto e uma descrição de uma linha. Os distintivos, os comandos de instalação e as capturas de ecrã ficam por baixo, em texto, onde podem ser copiados e mantidos atualizados.

## Como adicionar uma imagem de pré-visualização social no GitHub

Quando alguém cola a ligação do teu repositório num chat, num fórum ou numa publicação, a plataforma mostra a sua **imagem de pré-visualização social**. Sem uma, o GitHub gera um cartão predefinido a partir dos detalhes do repositório. Podes carregar a tua nas Definições do repositório, em Social preview; o GitHub indica nessa página as dimensões recomendadas. Desenha-a a partir da tua matriz de pré-visualização de ligação de 1200×630 e mantém as palavras ao centro, para que pequenas diferenças de forma não cortem nada. [Tamanho da imagem Open Graph](https://gradiently.design/pt-pt/guide/open-graph-image-size) explica os cortes, e [Open Graph tags](https://gradiently.design/pt-pt/guide/open-graph-tags) trata da mesma imagem para o teu site de documentação.

Uma imagem horizontal de pré-visualização social para um projeto open source chamado Tidepool, com a sua descrição de uma linha

Uma pré-visualização social em 1200×630: o nome, uma linha, nada perto das margens.

## Gráficos de anúncio de versão que as pessoas notam

Muitos utilizadores sabem de uma nova versão por uma publicação e não pelo registo de alterações. Um gráfico de versão consistente, o mesmo fundo e a mesma composição com apenas o número da versão e o título a mudar, habitua as pessoas a reconhecer os teus anúncios. Começa pelo que os utilizadores agora podem fazer, não só pelo número da versão.

Um anúncio horizontal da versão 2.0 de um projeto open source, com o título Novas tentativas com recuo

Uma publicação de versão para X ou Bluesky em 1600×900: a funcionalidade lidera, a versão apoia.

Um gráfico de versão quadrado com os destaques do Tidepool 2,0 sobre o mesmo gradiente

A versão quadrada para LinkedIn em 1200×1200, com a lista dos destaques.

| Gráfico | Tamanho | Onde aparece |
| --- | --- | --- |
| Cabeçalho do README | 1200×600 px | Topo do repositório |
| Pré-visualização social | Matriz de pré-visualização de ligação, 1200×630 px | Ligações de repositório partilhadas |
| Publicação de versão | 1600×900 px | X e Bluesky |
| Publicação de versão, quadrada | 1200×1200 px | LinkedIn |
| Banner da comunidade | 960×540 px | Banner do servidor Discord |
| Pré-visualização do site de documentação | 1200×630 px | Ligações de documentação partilhadas |

O conjunto de trabalho de um projeto. Um design de base cobre todos.

1. **Faz a marca** Uma forma ou letra, testada a 16 px. Exporta SVG e PNG transparente.
2. **Escolhe um fundo** Um gradiente ou cor que fique bem nos temas escuro e claro do GitHub.
3. **Constrói o cabeçalho do README** Versões clara e escura, logótipo, nome e uma linha.
4. **Carrega a pré-visualização social** Definições do repositório, Social preview. Testa colando a ligação num chat.
5. **Cria o modelo da publicação de versão** Mantém a composição; muda a versão e o título de cada vez.

O Gradiently serve os mantenedores que preferem não abrir uma ferramenta de design. Funciona dentro do ChatGPT, do Claude e de qualquer assistente que suporte servidores MCP remotos, por isso podes pedir um gráfico de versão enquanto escreves as notas da versão, e o design abre no Studio para uma verificação final. Os designs assentam num Mark, um fundo de gradiente com que mais ninguém pode exportar depois de o reivindicares, por isso o visual do teu projeto é genuinamente só dele. O [guia de configuração do MCP](https://gradiently.design/pt-pt/developers/mcp) leva alguns minutos.

## FAQ

### Como adiciono uma imagem de pré-visualização social a um repositório do GitHub?

Abre as Definições do repositório, encontra Social preview e carrega uma imagem. O GitHub mostra aí as dimensões recomendadas; mantém o texto ao centro para que nada importante seja cortado.

### Como faço uma imagem do README mudar no modo escuro?

Usa o elemento HTML picture com uma source para prefers-color-scheme: dark e um img de reserva para o claro. O GitHub apresenta-o nos ficheiros Markdown.

### Um projeto open source precisa de logótipo?

Não é obrigatório, mas um logótipo simples torna o projeto mais fácil de reconhecer em avatares, documentação e apresentações. Desenha-o para se ler em tamanho de favicon.

### O que deve incluir um gráfico de anúncio de versão?

O nome do projeto, a versão e a funcionalidade principal escrita como o que os utilizadores agora podem fazer. Mantém a composição igual em todas as versões.