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

Cor Preferencial, sobre fundos claros. SVG

Mono azul Uma cor só, sobre fundos claros. SVG

Mono rosa Uma cor só, sobre fundos claros. SVG

Mono vermelho Uma cor só, sobre fundos claros. SVG

Mono preto Impressões em uma cor e documentos. SVG

Negativo Sobre fundos escuros, fotos ou cores da marca. SVG

Símbolo

Cor Preferencial, sobre fundos claros. SVG

Mono azul Uma cor só, sobre fundos claros. SVG

Mono rosa Uma cor só, sobre fundos claros. SVG

Mono vermelho Uma cor só, sobre fundos claros. SVG

Mono preto Impressões em uma cor e documentos. SVG

Negativo Sobre fundos escuros, fotos ou cores da marca. SVG

Manual completo: Manual de Identidade Visual Sinapse (PDF, 3 MB).

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.

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.

150 px · recomendado

100 px · mínimo

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 sinapse SINAPSE SinapSE sInapse SiNaPsE

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

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.

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

Conheça o ITpS

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

pnpm dlx shadcn@latest add @sinapse/itps-brand

Marca.tsx

import { ItpsLockup, ItpsSignature } from "@/components/ui/itps-brand"

{/* Header: símbolo ITpS + marca do produto (logo ou nome) */}
<a href="/" aria-label="Detecta, início">
  <ItpsLockup>
    <img src="/logo-produto.svg" alt="" className="h-[18px] w-auto" />
  </ItpsLockup>
</a>

{/* Footer: última linha, obrigatória */}
<footer>
  {/* ...conteúdo do produto... */}
  <ItpsSignature />
</footer>

Vue 3 e Nuxt 4 (shadcn-vue)

Terminal

pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/itps-brand.json

Marca.vue

<script setup lang="ts">
import { ItpsLockup, ItpsSignature } from "@/components/ui/itps-brand"
</script>

<template>
  <a href="/" aria-label="Detecta, início">
    <ItpsLockup>
      <img src="/logo-produto.svg" alt="" class="h-[18px] w-auto">
    </ItpsLockup>
  </a>

  <footer>
    <!-- ...conteúdo do produto... -->
    <ItpsSignature />
  </footer>
</template>

Astro e HTML

Terminal

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

<!-- Header: símbolo ITpS + marca do produto -->
<a href="/" class="itps-brand-lockup" aria-label="Detecta, início">
  <img src="/brand/itps/simbolo-cor.svg" alt="" class="itps-brand-lockup__itps dark:hidden">
  <img src="/brand/itps/simbolo-negativo.svg" alt="" class="itps-brand-lockup__itps hidden dark:block">
  <span class="itps-brand-lockup__product">
    <span class="itps-brand-lockup__name">Detecta</span>
  </span>
</a>

<!-- Footer: última linha, obrigatória -->
<div class="itps-signature">
  <div class="itps-signature__content">
    <a href="https://www.itps.org.br/" class="itps-signature__brand" aria-label="Instituto Todos pela Saúde (ITpS)">
      <img src="/brand/itps/logo-cor.svg" alt="" class="itps-signature__logo dark:hidden">
      <img src="/brand/itps/logo-negativo.svg" alt="" class="itps-signature__logo hidden dark:block">
    </a>
    <div class="itps-signature__text">
      <p>© Uma iniciativa do <span class="itps-signature__name">Instituto Todos pela Saúde (ITpS)</span></p>
      <p class="itps-signature__address">Avenida Paulista, 1.938 - 16º andar, CEP: 01310-942 - São Paulo (SP)</p>
    </div>
    <a href="https://www.itps.org.br/" class="itps-signature__link">Conheça o ITpS</a>
  </div>
</div>

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 <img>.

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

pnpm dlx shadcn@latest add @sinapse/sinapse-logo

SinapseLogo.tsx

import { SinapseLogo } from "@/components/ui/sinapse-logo"

<SinapseLogo />                                  {/* logotipo: cor no claro, negativo no .dark */}
<SinapseLogo version="simbolo" height={24} />    {/* símbolo */}
<SinapseLogo scheme="negativo" />                {/* sobre bg-brand ou foto */}
<SinapseLogo version="simbolo" decorative />     {/* 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

pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/sinapse-logo.json

SinapseLogo.vue

<script setup lang="ts">
import { SinapseLogo } from "@/components/ui/sinapse-logo"
</script>

<template>
  <SinapseLogo />
  <SinapseLogo version="simbolo" :height="24" />
  <SinapseLogo scheme="negativo" />
</template>

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

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

<a href="/" aria-label="Sinapse">
  <img src="/brand/sinapse/logo-cor.svg" alt="" width="159" height="32" class="h-8 w-auto dark:hidden">
  <img src="/brand/sinapse/logo-negativo.svg" alt="" width="159" height="32" class="hidden h-8 w-auto dark:block">
</a>

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. Arquivos no site: logotipo em cor e negativo, símbolo em cor e negativo.

Manual de identidade visual do ITpS (site do ITpS). Dúvidas ou casos fora dos manuais: equipe de comunicação do ITpS.