Tema
Partir do template da STI
A STI publica o template-basico-vue, o ponto de partida dos sistemas Vue do Tribunal. Esta página compara a versão 1.0.2 do template com o design system e diz o que trocar quando o projeto começa por ele.
O template continua valendo para a estrutura do projeto: pastas pages, features e shared, roteador, Pinia, chamadas à API, Dockerfile e Nginx. O que muda é a moldura da tela e o estilo.
Fonte e cores
O design system mantém a Roboto e as cores medidas no portal tjes.jus.br. O template usa outras:
| Template 1.0.2 | Design system | |
|---|---|---|
| Fonte | Inter, baixada do Google Fonts | Roboto e Roboto Mono, dentro do pacote |
--bs-primary | #0c0a39, o azul-marinho | #2d66f5, o azul do manual de marca |
Azul-marinho #0c0a39 | Cor primária: botão, menu lateral, rodapé | Só o cabeçalho e o rodapé (--tj-background-brand) |
| Botão primário | Azul-marinho | Azul de ação |
A escolha foi manter a Roboto e as cores do portal:
- A Roboto é a fonte do portal do TJES, e o pacote traz o arquivo da fonte. O sistema funciona no laboratório sem internet, o que não acontece com a Inter do Google Fonts.
- O azul de ação
#2d66f5é o azul institucional do manual de marca do TJES (o portal usa#2d66f4, a um ponto de distância). O azul-marinho continua no cabeçalho e no rodapé, iguais aos do template. - Os pares de texto e fundo do design system têm o contraste medido em teste nos temas claro e escuro.
Com o design system, as classes do Bootstrap que o template usa mudam de cor: bg-primary, text-bg-primary, btn-primary e text-primary passam a ser o azul de ação. É o esperado nos botões; nas peças que o template pinta de azul-marinho, troque a peça pelo componente da tabela abaixo.
Peça por peça
| Peça do template | No design system | O que fazer |
|---|---|---|
AppLayout.vue | BaseAppShell com um BasePage por tela | Troque o conteúdo do layout pelo BaseAppShell e ponha cada página num BasePage, que dá o título (h1) e as ações da tela. |
Navbar.vue: barra fixa de 56 px em azul-marinho, logo, nome do sistema e menu do celular | Cabeçalho do BaseAppShell: 64 px, mesmo azul-marinho, product, unit e os slots logo, search e tools | Apague o Navbar.vue. No celular, o menu lateral do BaseAppShell vira uma faixa sob o cabeçalho, sem o menu que desliza da esquerda. A faixa abre rolada até a tela atual e mostra uma seta onde há mais links. |
Sidebar.vue e SidebarDropdown.vue: menu lateral azul-marinho, 232 px aberto e 72 px recolhido, com submenus | Menu lateral do BaseAppShell: fundo claro, 256 px aberto e 64 px recolhido, propriedade nav e v-model:collapsed | Passe os itens de navigation.ts para nav. O nav tem grupos com título e itens, sem submenu: cada grupo com filhos do template vira um grupo do nav. O ícone vai sem o prefixo bi bi- (house-door). |
UserMenu.vue: botão com as iniciais e lista com perfil e "Sair" | user-name, user-role e o slot user-menu do BaseAppShell, com o BaseAvatar | Passe o nome e o perfil da pessoa e ponha os links e o botão "Sair" no slot user-menu. |
Footer.vue: logo de 140 px de largura, ano, versão e endereço, em azul-marinho, embaixo do conteúdo | BaseFooter no slot footer do BaseAppShell: mesmo conteúdo e mesmo azul-marinho, com a Roboto e links opcionais. O logo tem a altura do logo do cabeçalho, para não ficar maior que ele no celular | Apague o Footer.vue e ponha um BaseFooter no slot footer, com a versão em version (:version="versao"). O ano, o nome e o endereço do Tribunal já vêm nele. O logo vai no slot logo. |
Faixa de ambiente: borda de 3 px embaixo da barra, verde em dev, laranja em hom e rosa em prod, lida de VITE_APP_AMBIENTE | Não há faixa de ambiente no design system | Por enquanto o BaseAppShell não mostra o ambiente. Se o projeto precisar dela, abra uma issue no design system. |
Toast.vue e useNotificacao | BaseToast e useToast() | Monte um <BaseToast /> no App.vue e troque as chamadas de useNotificacao por useToast().show(). |
style.css: importa o Bootstrap e o Bootstrap Icons e redefine as cores --bs-* e o .btn-primary | @lab-inovacao-tjes/design-system/styles.css | Apague o style.css e importe o CSS do design system no main.ts. Ele já traz o Bootstrap, o Bootstrap Icons e as fontes. |
index.html: carrega a Inter do Google Fonts | Fontes dentro do pacote | Tire os <link> do Google Fonts. O theme-color #0c0a39 pode ficar: é a cor do cabeçalho. |
Passo a passo
- Instale o pacote, como em Começar.
- No
main.ts, troqueimport "@/style.css"porimport '@lab-inovacao-tjes/design-system/styles.css'e chameinitTheme(). - No
index.html, tire os<link>do Google Fonts. - Troque o
AppLayout.vuepeloBaseAppShell, com os menus denavigation.tsemnave a pessoa emuser-nameeuser-role. - Apague
Navbar.vue,Sidebar.vue,SidebarDropdown.vue,UserMenu.vueeFooter.vue. Se o sistema mostrava o rodapé (exibirRodape), ponha umBaseFooterno slotfooterdoBaseAppShell. - Troque o
Toast.vuepeloBaseToast.
As versões de Node aceitas são as mesmas do template: ^20.19.0 || ^22.19.0.
Comparação com o portal do TJES
O portal tjes.jus.br é o site público do Tribunal. Os sistemas internos usam a mesma marca, numa moldura própria, mais compacta.
Como medimos: em 05/11/2026, com o Playwright, no Chromium e no WebKit (o motor do Safari), nas larguras de 390, 768 e 1440 px, com 900 px de altura. No portal, a página inicial. No design system 0.9.0, a página BaseAppShell, em tela cheia, onde a moldura fica a 16 px das bordas da janela: o exemplo "Com rodapé" para o cabeçalho, o rodapé e os logos, e o primeiro exemplo, com o painel da pessoa aberto, para o seletor de tema. Os dois navegadores deram os mesmos números, com até 0,4 px de diferença no cabeçalho e no rodapé do portal. O script scripts/portal-compare.ts refaz a medição, e a saída de 05/11/2026 está em portal-compare-2026-11-05.json, com a posição e o tamanho de cada parte em cada largura e em cada navegador.
Medidas
| Parte | Portal | Design system 0.9.0 |
|---|---|---|
| Cabeçalho | 130 px de altura a 390 px, 264 px a 768 px e 176 px a 1440 px, onde fica numa coluna de 1160 px no centro | 56 px de altura abaixo de 992 px e 64 px a partir de 992 px, na largura toda da moldura |
| Logo do cabeçalho | 313 × 90 px nas três larguras | 145 × 44 px a partir de 992 px; 99 × 30 px abaixo |
| Rodapé | Listas de links do Tribunal: 900 px de altura a 1440 px, 1495 px a 768 px e 2042 px a 390 px | Uma faixa com logo, ano, versão e endereço: 93 px a 1440 px, 81 px a 768 px e 159 px a 390 px |
| Logo do rodapé | 54 × 54 px | Igual ao do cabeçalho em cada largura. Na 0.8.0, 140 × 42 px em qualquer largura |
| Acessibilidade | Barra do Rybená presa na lateral esquerda, a 5 px da borda e a 360 px do topo, com os botões "Libras", "Voz" e "+ Acessibilidade": 28 × 28 px a 390 e 768 px, 36 × 36 px a 1440 px | Sem botões extras: teclado, foco visível, contraste medido e alto contraste do Windows. No painel da pessoa, as opções do seletor de tema têm 26 px de altura (tamanho sm) e de 44 a 97 px de largura, nas três larguras |
| Cookies | Barra do GDPR Cookie Compliance 4.15.10 no pé da janela, na largura toda: 239 px de altura a 390 px, 237 px a 768 px e 93 px a 1440 px. Os botões "Aceitar Cookies", "Rejeitar" e "Personalizar" têm 30 px de altura a 390 px e 36 px a 768 e 1440 px; o de fechar, 30 × 30 px a 390 px e 36 × 36 px nas outras | Sem aviso |
| Ícone da aba | tjes-favicon.png, 91 × 90 px, 2688 bytes | O mesmo arquivo: os dois têm o mesmo sha256, que está no JSON da medição |
Os botões do Rybená, os do aviso de cookies e as opções do seletor de tema passam do alvo mínimo de 24 × 24 px do WCAG 2.2 (critério 2.5.8, nível AA) e ficam abaixo dos 44 × 44 px dos links da faixa do menu. A faixa tem 44 × 44 px porque a pessoa passa por ela a cada troca de tela. O tema se escolhe uma vez e fica guardado, por isso o seletor fica no tamanho sm do menu da pessoa.
O protótipo do P19 foi medido do mesmo jeito, no mesmo dia, na versão publicada em 05/11/2026 às 15h14 (horário de Brasília). Ele fica no repositório construction-and-property, cuja main usa o design system 0.8.0. Depois da entrada, o cabeçalho é o do BaseAppShell, com as medidas da coluna do design system: 56 px de altura e logo de 99 × 30 px a 390 e 768 px, 64 px e logo de 145 × 44 px a 1440 px. A tela de entrada do protótipo é própria dele: um cartão de 244 px de altura com o logo de 220 × 67 px, em vez do cabeçalho do padrão Login e sessão expirada.
Os arquivos do portal são o logo do cabeçalho, logo_tjes_texto_cor.png, o do rodapé, logo_tjes_br.png, e o ícone da aba, tjes-favicon.png. O Rybená vem de outro endereço, https://cdn.rybena.com.br/dom/master/latest/rybena.js, sempre na versão mais nova. No kit base, a sessão de login fica num cookie do Flask, com a proteção de formulário (CSRF); o design system guarda só a escolha de tema, no navegador.
O que o Rybená oferece
Em 05/11/2026, na página inicial do portal:
- Libras. Abre um player com uma intérprete 3D que passa o texto da página para Libras. No design system: não tem. Depende do Rybená, que fica com a STIC (veja "O que fazer").
- Voz. Abre o mesmo player, que lê o texto da página em voz alta. No design system: não tem leitura própria. Quem precisa usa o leitor de tela do computador ou do celular; os componentes passam no axe e seguem os padrões do WAI-ARIA APG.
- + Acessibilidade. Abre uma lista de 31 funções e perfis prontos: contraste claro, escuro e invertido, saturação e correção de cores, guia e máscara de leitura, cursor grande, zoom, espaçamento e altura de linha, "Dislexia", destaque de links e títulos, pausar animações, navegação por teclado e três funções com IA (descrever imagem, simplificar texto e significado da palavra). No design system: parte vem do próprio sistema: tema claro e escuro, alto contraste do Windows, navegação por teclado com foco visível e transições que somem quando o sistema pede menos movimento. Zoom e espaçamento de texto não foram conferidos aqui. As funções com IA não existem.
Pelo teclado, em 06/11/2026, na página inicial do portal: os três são botões (<button>) com nome acessível ("Libras", "Voz" e "+ Acessibilidade") e entram na ordem do Tab, mas ficam no fim dela: o "Libras" é o 177º de 179 elementos que recebem foco. Num navegador automatizado, 184 toques de Tab a partir do topo não chegaram a ele, o que ainda precisa de conferência à mão. Com leitor de tela não foi testado. Como a barra é de outra empresa, o comportamento dela com teclado e leitor de tela entra na análise da STIC (veja "O que fazer").
O que fazer
| Parte | O que fazer | Quem | Depende de |
|---|---|---|---|
| Cabeçalho | Manter a altura de 64 px no computador e 56 px no celular, na largura toda da moldura, para sobrar mais tela para o trabalho. O do portal tem de 130 a 264 px de altura. | Equipe de UX/UI | Nada |
| Logo do cabeçalho | Manter. O cabeçalho do sistema tem 64 px de altura no computador e 56 px no celular, com o nome do sistema ao lado do logo; um logo de 90 px não cabe nele. | Equipe de UX/UI | Tamanho mínimo do logo na tela, com a Comunicação: o manual fala em 6,5 cm impressos |
| Rodapé | Manter a faixa curta. Os links do Tribunal já estão no portal. | Equipe de UX/UI | Nada |
| Logo do rodapé | Feito nesta versão. Para tirar o logo, o sistema deixa de passar o slot logo. | Equipe de UX/UI | Conversa com a Comunicação antes de tirar |
| Acessibilidade | Não pôr o Rybená no design system por enquanto: é um programa de outra empresa, baixado sempre na versão mais nova. | STIC | Análise de segurança e contrato do Rybená |
| Cookies | Levantar o que cada sistema guarda e decidir se precisa de aviso. | Encarregado de dados do TJES, com a STIC | Levantamento por sistema |
| Ícone da aba | Feito. | Equipe de UX/UI | Nada |
O portal pode mudar. Ao refazer a comparação, registre a data e a versão do design system.