# Marca Como usar as marcas Sinapse e ITpS nos produtos: versões, cores, área de proteção, tamanhos, fundos e usos indevidos, com os arquivos oficiais. Quem é quem ## Arquitetura de marcas O Sinapse é um produto do Instituto Todos pela Saúde (ITpS). O Design System nasceu nele e atende a todos os produtos digitais do ITpS. As duas marcas compartilham cores e tipografia, mas cada uma tem seu papel. ### Sinapse Produto do ITpS e origem do Design System Marca principal do Sinapse Hub e deste site. Aparece em destaque, no topo, com o logotipo completo. ### ITpS Instituto Todos pela Saúde Assina todos os produtos do ITpS: símbolo ao lado da marca do produto no header e linha de assinatura ("Uma iniciativa do") no fim do footer. Nome ou logo do produto + ITpS ### Outros produtos ITpS Usam o Design System Mostram o próprio nome ou logo com a marca ITpS no header e no footer (veja Marca ITpS em produtos). Não usam o logotipo Sinapse: o DS é a base visual, não a marca do produto. Arquivos oficiais ## Versões e downloads Use sempre estes arquivos: nunca redesenhe o logotipo nem o recrie com texto. O logotipo principal é a versão preferencial; o símbolo serve para ícones, avatares, favicons e espaços reduzidos. Os SVGs são para uso digital (RGB). Arquivos para impressão (CMYK, AI, EPS) ficam com a comunicação do ITpS. ### Logotipo principal ![Sinapse, logotipo principal cor](/brand/sinapse/logo-cor.svg) Cor Preferencial, sobre fundos claros. [SVG](/brand/sinapse/logo-cor.svg) ![Sinapse, logotipo principal mono azul](/brand/sinapse/logo-mono-azul.svg) Mono azul Uma cor só, sobre fundos claros. [SVG](/brand/sinapse/logo-mono-azul.svg) ![Sinapse, logotipo principal mono rosa](/brand/sinapse/logo-mono-rosa.svg) Mono rosa Uma cor só, sobre fundos claros. [SVG](/brand/sinapse/logo-mono-rosa.svg) ![Sinapse, logotipo principal mono vermelho](/brand/sinapse/logo-mono-vermelho.svg) Mono vermelho Uma cor só, sobre fundos claros. [SVG](/brand/sinapse/logo-mono-vermelho.svg) ![Sinapse, logotipo principal mono preto](/brand/sinapse/logo-mono-preto.svg) Mono preto Impressões em uma cor e documentos. [SVG](/brand/sinapse/logo-mono-preto.svg) ![Sinapse, logotipo principal negativo](/brand/sinapse/logo-negativo.svg) Negativo Sobre fundos escuros, fotos ou cores da marca. [SVG](/brand/sinapse/logo-negativo.svg) ### Símbolo ![Sinapse, símbolo cor](/brand/sinapse/simbolo-cor.svg) Cor Preferencial, sobre fundos claros. [SVG](/brand/sinapse/simbolo-cor.svg) ![Sinapse, símbolo mono azul](/brand/sinapse/simbolo-mono-azul.svg) Mono azul Uma cor só, sobre fundos claros. [SVG](/brand/sinapse/simbolo-mono-azul.svg) ![Sinapse, símbolo mono rosa](/brand/sinapse/simbolo-mono-rosa.svg) Mono rosa Uma cor só, sobre fundos claros. [SVG](/brand/sinapse/simbolo-mono-rosa.svg) ![Sinapse, símbolo mono vermelho](/brand/sinapse/simbolo-mono-vermelho.svg) Mono vermelho Uma cor só, sobre fundos claros. [SVG](/brand/sinapse/simbolo-mono-vermelho.svg) ![Sinapse, símbolo mono preto](/brand/sinapse/simbolo-mono-preto.svg) Mono preto Impressões em uma cor e documentos. [SVG](/brand/sinapse/simbolo-mono-preto.svg) ![Sinapse, símbolo negativo](/brand/sinapse/simbolo-negativo.svg) Negativo Sobre fundos escuros, fotos ou cores da marca. [SVG](/brand/sinapse/simbolo-negativo.svg) Manual completo: [Manual de Identidade Visual Sinapse (PDF, 3 MB)](/brand/sinapse/manual-identidade-visual-sinapse.pdf). Paleta institucional ## Cores As mesmas cores do ITpS, já presentes nos tokens do DS. No logotipo, a sobreposição do símbolo usa o rosa a 40%. Combine com branco, preto e tons de cinza. Azul HEX #1961AC RGB 25 97 172 CMYK 90 60 0 0 Pantone 2935C Token \--itps-secondary-900 Rosa HEX #EB5E57 RGB 235 94 87 CMYK 0 75 60 0 Pantone 171C Token \--itps-primary-900 · bg-brand Vermelho HEX #D3242D RGB 211 36 45 CMYK 12 96 84 0 Pantone 485C Token \--itps-primary-950 Preto HEX #000000 RGB 0 0 0 CMYK 0 0 0 100 Pantone — Token — Respiro ## Área de proteção Mantenha em volta do logotipo um espaço livre igual à altura do símbolo (20 módulos no manual), inclusive até as bordas da tela ou da página. Nada entra nessa área: texto, ícones ou outras marcas. ![Logotipo Sinapse com a área de proteção marcada](/brand/sinapse/logo-cor.svg) Legibilidade ## Tamanho mínimo Impressão: 22 mm de largura para o logotipo e 7 mm para o símbolo. Em telas, até a comunicação definir valores próprios, seguimos o padrão do ITpS: logotipo com no mínimo 100 px de largura (150 px recomendado) e símbolo com no mínimo 24 px. Exceções: o favicon e o header e o footer de produtos do ITpS, que seguem as medidas de [Marca ITpS em produtos](#marca-itps-em-produtos). ![Logotipo Sinapse com 150 px](/brand/sinapse/logo-cor.svg) 150 px · recomendado ![Logotipo Sinapse com 100 px](/brand/sinapse/logo-cor.svg) 100 px · mínimo ![Símbolo Sinapse com 24 px](/brand/sinapse/simbolo-cor.svg) 24 px · símbolo Aplicação ## Fundos e contraste Em fundos claros, use a versão em cor. Em fundos escuros ou nas cores da marca, use a negativa. Sobre fotos, escolha áreas neutras e limpas. No modo escuro dos produtos, troque para a versão negativa. Fundo claro Versão em cor. Fundo escuro Versão negativa. Azul da marca Versão negativa. Rosa da marca Versão negativa. Fontes ## Tipografia Itaú Display Fonte institucional, usada só dentro do logotipo, que já vem convertido em curvas. É propriedade do Itaú: não a use em interfaces nem em composições de texto. Open Sans Fonte dos produtos e do Design System (`--font-sans`), prevista nos dois manuais como alternativa oficial. Nome em texto ## Grafia Em texto corrido, escreva o nome só com a inicial maiúscula. O Design System é o **Sinapse Design System** (forma curta: Sinapse DS). Sinapse (correto) sinapse (incorreto) SINAPSE (incorreto) SinapSE (incorreto) sInapse (incorreto) SiNaPsE (incorreto) Evite ## Usos indevidos O logotipo não tem versão em contorno e não deve ser alterado. Também não o aplique sobre fundos que prejudiquem a leitura. Não: distorcer Não estique nem comprima o logotipo. Não: aplicar efeitos Sem sombras, desfoques ou brilhos. Não: trocar as cores Só as combinações do manual. Não: rotacionar O logotipo fica sempre na horizontal. Produtos do ITpS ## Marca ITpS em produtos Todo produto do ITpS, como o Sinapse ou o Detecta, leva a marca do ITpS em dois lugares: no header, o símbolo ITpS ao lado da marca do produto; no footer, a linha de assinatura como última linha. O produto aparece com o próprio logo ou com o nome em texto, nunca com o logotipo Sinapse (a menos que o produto seja o Sinapse). ### Header ![Sinapse](/brand/sinapse/logo-cor.svg) ![Sinapse](/brand/sinapse/logo-negativo.svg)Nome do produto - Símbolo ITpS com 20 px de altura, divisor de 1 px e a marca do produto com 18 px de altura, com 12 px de espaço de cada lado do divisor. - É o único lugar em que a marca do ITpS aparece só como símbolo. Quando ela aparece assim, a linha de assinatura no footer é obrigatória. ### Footer Conteúdo do footer do produto: marca, descrição, links e redes. [](https://www.itps.org.br/) © Uma iniciativa do Instituto Todos pela Saúde (ITpS) Avenida Paulista, 1.938 - 16º andar, CEP: 01310-942 - São Paulo (SP) [Conheça o ITpS](https://www.itps.org.br/) - Obrigatória em todo produto do ITpS, como última linha do footer, em toda a largura da página. - Logo ITpS com 32 px de altura, divisor, "© Uma iniciativa do Instituto Todos pela Saúde (ITpS)", endereço e o link "Conheça o ITpS". No celular ficam só o logo e a frase. - Faixa com 5% do azul da marca sobre o fundo do footer e linha rosa de 4 px embaixo. ### React e Next.js (shadcn/ui) Terminal ```bash pnpm dlx shadcn@latest add @sinapse/itps-brand ``` Marca.tsx ```tsx import { ItpsLockup, ItpsSignature } from "@/components/ui/itps-brand" {/* Header: símbolo ITpS + marca do produto (logo ou nome) */} {/* Footer: última linha, obrigatória */} ``` ### Vue 3 e Nuxt 4 (shadcn-vue) Terminal ```bash pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/itps-brand.json ``` Marca.vue ```vue ``` ### Astro e HTML Terminal ```bash mkdir -p public/brand/sinapse && for f in logo-cor.svg logo-mono-azul.svg logo-mono-rosa.svg logo-mono-vermelho.svg logo-mono-preto.svg logo-negativo.svg simbolo-cor.svg simbolo-mono-azul.svg simbolo-mono-rosa.svg simbolo-mono-vermelho.svg simbolo-mono-preto.svg simbolo-negativo.svg; do curl -fsSL -o "public/brand/sinapse/$f" "https://dsystem.sinapse.org.br/brand/sinapse/$f"; done && mkdir -p public/brand/itps && for f in logo-cor.svg logo-negativo.svg simbolo-cor.svg simbolo-negativo.svg; do curl -fsSL -o "public/brand/itps/$f" "https://dsystem.sinapse.org.br/brand/itps/$f"; done ``` marca.html ```html Detecta

© Uma iniciativa do Instituto Todos pela Saúde (ITpS)

Avenida Paulista, 1.938 - 16º andar, CEP: 01310-942 - São Paulo (SP)

Conheça o ITpS
``` No projeto ## Usar no código O componente `SinapseLogo` desenha a arte oficial, troca para a versão negativa no modo escuro, garante o tamanho mínimo e já tem nome acessível. Em Astro e HTML, baixe os SVGs e use ``. ### React e Next.js (shadcn/ui) Com o namespace @sinapse configurado (veja Comece por aqui). Instala o componente em components/ui; ele desenha a arte oficial, sem arquivos extras. Terminal ```bash pnpm dlx shadcn@latest add @sinapse/sinapse-logo ``` SinapseLogo.tsx ```tsx import { SinapseLogo } from "@/components/ui/sinapse-logo" {/* logotipo: cor no claro, negativo no .dark */} {/* símbolo */} {/* sobre bg-brand ou foto */} {/* ao lado do nome "Sinapse" escrito */} ``` ### Vue 3 e Nuxt 4 (shadcn-vue) Instala o componente em components/ui/sinapse-logo; ele desenha a arte oficial, sem arquivos extras. Terminal ```bash pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/sinapse-logo.json ``` SinapseLogo.vue ```vue ``` ### Astro e HTML Baixa os SVGs oficiais para public/brand/sinapse/ (também serve para favicons e documentos em qualquer stack). Troque para a versão negativa no modo escuro. Terminal ```bash mkdir -p public/brand/sinapse && for f in logo-cor.svg logo-mono-azul.svg logo-mono-rosa.svg logo-mono-vermelho.svg logo-mono-preto.svg logo-negativo.svg simbolo-cor.svg simbolo-mono-azul.svg simbolo-mono-rosa.svg simbolo-mono-vermelho.svg simbolo-mono-preto.svg simbolo-negativo.svg; do curl -fsSL -o "public/brand/sinapse/$f" "https://dsystem.sinapse.org.br/brand/sinapse/$f"; done && mkdir -p public/brand/itps && for f in logo-cor.svg logo-negativo.svg simbolo-cor.svg simbolo-negativo.svg; do curl -fsSL -o "public/brand/itps/$f" "https://dsystem.sinapse.org.br/brand/itps/$f"; done ``` logo.html ```html ``` ## ITpS A marca do Instituto Todos pela Saúde segue o manual do ITpS: logotipo com no mínimo 100 px de largura (150 px recomendado), versão negativa em fundos escuros e as mesmas cores primárias. No header e no footer de produtos valem as medidas de [Marca ITpS em produtos](#marca-itps-em-produtos). Arquivos no site: logotipo [em cor](/brand/itps/logo-cor.svg) e [negativo](/brand/itps/logo-negativo.svg), símbolo [em cor](/brand/itps/simbolo-cor.svg) e [negativo](/brand/itps/simbolo-negativo.svg). [Manual de identidade visual do ITpS](https://www.itps.org.br/comunicacao/manual-de-identidade-visual-do-instituto-todos-pela-saude) (site do ITpS). Dúvidas ou casos fora dos manuais: equipe de comunicação do ITpS.