Pular para o conteúdo

Diretrizes da marca

Recursos e ativos para ajudá-lo a trabalhar com a marca OpenCode.

Baixar todos os recursos
Conteúdo

Escreva OpenCode como uma palavra só, com O e C maiúsculos. Não escreva Opencode, Open Code, OpenCode AI nem Open-Code.

Use opencode em minúsculas só em código e nomes de pacotes, como opencode-figma ou @acme/opencode-plugin.

O logo sozinho, para ícones de apps, avatares e outros espaços pequenos. As versões quadradas têm margem para lugares que cortam em quadrado.

Avatares quadrados de 1024px para Slack, Discord, GitHub e outros perfis. O fundo preenche todo o quadrado e o logo fica bem dentro do círculo, então resistem a um corte redondo.

O nome completo com as letras do OpenCode. Use sempre que houver espaço para escrever o nome por extenso.

Uma versão do logotipo em uma só cor, para impressão, bordado e lugares que só permitem uma cor.

Escolha a versão que deixa o logo nítido no seu fundo, escura em fundos claros e clara em fundos escuros. O logo e o logotipo são arquivos separados, então use um ou outro.

O logo para usar em quase tudo. O tom interno é transparente. Sobre branco ou preto ele fica igual aos cinzas de dois tons, e sobre fotos, degradês e cores o fundo aparece por trás.

Logo

Logotipo

Uma cor, com miolos abertos e sem tom interno. Use em fundos de cor chapada, em impressão de uma cor e onde não der para usar os cinzas, o simples escuro em cores claras e o simples claro em cores escuras.

Logotipo

O logo e o logotipo usam uma tinta em três opacidades, com uma tinta mais clara para fundos escuros. Os valores abaixo são essa tinta sobre branco ou #0B0B0B, como os arquivos padrão a mostram. Clique em um valor para copiá-lo.

  • TintaO contorno do logo e as letras de “code”.
  • Tinta 70%As letras de “open”. A tinta com 70% de opacidade.
  • Tinta 20%O tom interno do logo. A tinta com 20% de opacidade.

  • TintaO contorno do logo e as letras de “code”.
  • Tinta 72%As letras de “open”. A tinta com 72% de opacidade.
  • Tinta 28%O tom interno do logo. A tinta com 28% de opacidade.

Use as versões claras em fundos claros e as escuras em fundos escuros. O logo e o logotipo são separados. Use um ou outro, nunca os dois juntos.

  • 1 traço1 traço

    Deixe pelo menos dois traços de espaço em todos os lados do logo e do logotipo. No logo, um traço é a espessura do contorno, um quarto da largura. No logotipo, é a espessura das letras, um sétimo da altura.
  • Prefira manter cada borda e o traço de 4px em pixels inteiros.
    Não use tamanhos fora de 4:5, ou as bordas caem entre pixels e ficam borradas.

    As proporções do logo são fixas em 4:5, e um traço é um quarto da largura. Redimensione em passos de 4 × 5px, para que cada borda e cada traço caia em um pixel inteiro.
    LogoTraço
    16 × 20px4px
    20 × 25px5px
    24 × 30px6px
    32 × 40px8px
    48 × 60px12px
    64 × 80px16px
    LogotipoTraço
    78 × 14px2px
    117 × 21px3px
    156 × 28px4px
    195 × 35px5px
    234 × 42px6px
    312 × 56px8px
  • Logo

    Pelo menos 16 × 20px, com traço de 4px. Menor que isso, fica borrado.
  • Logotipo

    Pelo menos 117 × 21px, com traço de 3px. Menor que isso, fica borrado.

Erros comuns a evitar ao usar o logo e o logotipo.

  • Não recolorir o logo com outras cores.
  • Não usar uma única cor vibrante.
  • Não preencher o logo com degradê.
  • Não inverter os tons.
  • Não esticar ou achatar o logo.
  • Não adicionar sombras.
  • Não adicionar brilhos ou contornos.
  • Não colocar outras palavras ao lado do logo.
  • Não usar cinza sobre cinza com pouco contraste.
  • Não colocar o logo cinza de dois tons sobre fundo colorido, onde os cinzas ficam sujos.

Plugins, provedores e ferramentas que funcionam com o OpenCode, e projetos feitos com ele, podem dizer isso. Use um selo ou um lockup de parceria, e dê ao seu projeto um nome que deixe claro que ele é seu.

Coloque um selo no seu README, docs ou site com link para opencode.ai. Escolha o arquivo claro ou escuro para o seu fundo (o HTML alterna sozinho) e não mude as cores nem o texto. Todo estilo vem em 20, 32 e 44px (Shields só em 20px), em SVG e em PNG a 2×.

Para plugins, provedores e ferramentas que rodam com o OpenCode.

Moldura

Células

Sólido

Shields

Moldura

Células

Sólido

Shields

Moldura

Células

Sólido

Shields

Para projetos feitos com o OpenCode.

Moldura

Células

Sólido

Shields

Moldura

Células

Sólido

Shields

Moldura

Células

Sólido

Shields

Coloque o logo do OpenCode e o logo do parceiro lado a lado, com um × entre eles. Deixe 3 traços de espaço de cada lado do ×, ajuste o logo do parceiro para parecer tão alto quanto o do OpenCode e mantenha área de respiro em volta de todo o conjunto.

  • OpenCode × GitHub, Claro
  • OpenCode × GitHub, Escuro

Comece pelo seu próprio nome, para deixar claro que o projeto é seu.

Escreva Linear for OpenCode ou chame o pacote de opencode-linear. Não escreva OpenCode Linear nem Linear by OpenCode.

OpenCode e o logo do OpenCode são marcas registradas da Anomaly. Não as use para sugerir que a Anomaly apoia ou patrocina você, no nome do seu produto ou empresa, nem em produtos à venda sem permissão. Em caso de dúvidas, escreva para press@opencode.ai.