BaseLogo

O logo oficial do TJES, desenhado a partir do arquivo do manual de marca. Use no lugar de uma cópia da imagem do logo no projeto.

Uso

• No cabeçalho e no rodapé, ponha o logo no slot logo do BaseAppShell e do BaseFooter, com background="dark". Eles já dão o tamanho certo.
• Fora deles, o logo ocupa a largura de quem o contém. Dê a largura no elemento em volta.
• Use a versão horizontal sempre que couber. A symbol, sem o endosso, é para espaço pequeno, como um ícone de aplicativo.
• As regras de uso da marca (espaço livre, tamanho mínimo, fundos proibidos) estão na página Marca do TJES.

Anatomia

1. Símbolo: as letras TJ e ES, em rosa e azul.
2. Endosso: "Poder Judiciário / Tribunal de Justiça do Estado do Espírito Santo", em preto TJES no fundo claro e em branco TJES no escuro. Não aparece na versão symbol.

Faça e não faça

Faça	Não faça
Use o BaseLogo do design system.	Copiar o PNG do logo para o projeto.
Passe background="dark" no cabeçalho, no rodapé e em fundo escuro.	Deixar o endosso preto sobre o azul-marinho.
Deixe espaço livre em volta, como pede o manual.	Esticar, girar, recolorir ou redesenhar o logo.
Use a versão symbol quando o endosso ficaria ilegível.	Pôr o logo sobre fundo de cor ácida ou parecida com o rosa ou o azul.

Ícone de Tela de Início

O pacote traz o ícone que o iPhone e o iPad mostram quando a pessoa adiciona o sistema à Tela de Início: apple-touch-icon.png, de 180 x 180 px, com o símbolo sobre fundo branco. Em volta do símbolo fica o espaço livre do manual, seis vezes a barra do "E", e por isso ele continua inteiro quando o iOS arredonda os cantos. O fundo é opaco porque o iOS pinta de preto o que for transparente. O ícone da aba continua sendo o tjes-favicon.png do portal.

No index.html do app, aponte para o arquivo do pacote, sem copiar:

<link rel="apple-touch-icon" href="/node_modules/@lab-inovacao-tjes/design-system/assets/apple-touch-icon.png" />

O Vite copia o arquivo para o build com um nome com hash. O ícone sai do desenho oficial pelo comando pnpm design:app-icon; não edite o PNG à mão.

Logo em PNG para PDF

Onde o BaseLogo não roda, como no PDF que o backend em Python gera com a faixa azul-marinho no alto, o pacote traz o logo-horizontal-on-dark.png: a versão horizontal com o endosso em branco TJES, fundo transparente e 180 px de altura (594 × 180 px). Ele sai do mesmo desenho do BaseLogo pelo comando pnpm design:logo-png; não edite o PNG à mão. O backend não instala o pacote, então copia o arquivo e registra a versão do design system e o sha256 de onde ele veio.

Estilo

Propriedade	Token
Rosa do símbolo	--tj-logo-pink (#f6adcd)
Azul do símbolo	--tj-logo-blue (#1e84ff)
Endosso em fundo claro	--tj-logo-endorsement (preto TJES, #100b20)
Endosso em fundo escuro	--tj-logo-endorsement-on-dark (branco TJES, #fef8fb)
Tamanho	Largura de quem o contém; o cabeçalho e o rodapé usam 44 px de altura, e 30 px abaixo de 992 px

As cores do logo são as mesmas nos temas claro e escuro: o manual não aceita outras.

Código

<BaseAppShell product="Obras e Imóveis">
  <template #logo><BaseLogo background="dark" /></template>
</BaseAppShell>

Propriedades

Propriedade	Tipo	Padrão	Descrição
variant	'symbol' | 'horizontal'	'horizontal'	horizontal: símbolo e endosso, a versão que o manual prefere; symbol: só o TJ ES, para espaço pequeno
background	'light' | 'dark'	'light'	Fundo atrás do logo; em dark, como o cabeçalho, o endosso fica em branco TJES

Acessibilidade

• Não há padrão do WAI-ARIA APG para logo.
• O logo é uma imagem (role="img") com o nome "Tribunal de Justiça do Estado do Espírito Santo". O leitor de tela lê o nome uma vez, sem soletrar o endosso.
• O desenho não usa id, então o cabeçalho e o rodapé podem mostrar o logo na mesma página.
• Testado com axe dentro do cabeçalho do BaseAppShell.
• Não recebe foco. Quando o logo é link para a página inicial, quem recebe o foco é o link do BaseAppShell.