Reconhecimento
em cada detalhe.

Treze degraus cobrem do hero institucional à legenda de uma célula. Passo assina expressão e título; Inter carrega leitura, rótulo e dado. O tracking fecha conforme o tamanho cresce — em display-lg chega a −0.055em — e abre nos degraus pequenos em caixa alta, onde a letra precisa de ar.

Cada amostra abaixo é renderizada com a classe real do sistema. Se a fonte Passo não estiver disponível no ambiente, o fallback declarado assume e a métrica muda — é o comportamento esperado, não um defeito da escala.

Onze degraus, de zero a 80 px, resolvem todo o respiro do sistema. A escala é geométrica até 16 px e passa a crescer por múltiplos de 8 a partir daí, para que blocos grandes não precisem de valores intermediários inventados.

<div class="tp-portal" data-density="compact">…</div>

Não invente valores fora da escala. Se um respiro parecer errado entre dois degraus, o problema costuma estar na hierarquia do bloco, não na escala.

O portal e o produto usam grades de colunas iguais com gutter vindo da escala de espaçamento. Abaixo, as mesmas grades que os componentes aplicam — não uma ilustração.

O raio comunica a natureza da superfície: quanto maior a peça, maior o arredondamento. Controles ficam entre 4 e 8 px; painéis, entre 12 e 18 px; peças editoriais chegam a 42 px.

Aliases de compatibilidade: --tp-radius-md lê --tp-radius e --tp-radius-lg lê --tp-card-radius, e não o contrário: os nomes de contexto são a origem porque é neles que o perfil institucional atua. --tp-component-card-radius aponta para --tp-radius-xl, o raio do .tp-card. Prefira sempre o nome da escala.

A borda separa superfícies sem criar peso. O sistema usa uma espessura padrão e três tons; qualquer valor acima de 1 px é excepcional e sempre tem função — foco, seleção ou marcação de estado.

Foco nunca é só borda: --tp-focus-width (3px) desenha um outline com --tp-focus-offset (3px) fora do controle, preservando a borda original e o contraste em ambos os temas.

São quatro grafismos, e só quatro: arco de grande raio, linha de acento, pontos modulares e gradiente institucional. Todos saem dos mesmos primitivos de cor da marca — nenhum introduz forma, cor ou textura fora do sistema.

Regra do guia de estilos: os grafismos nunca competem com a informação. Devem organizar, direcionar o olhar ou reforçar a presença da marca — não preencher espaço vazio por decoração.

A elevação responde a uma pergunta: o que está por cima de quê. Quatro níveis genéricos e três papéis nomeados cobrem o sistema. No tema escuro, sombra clareia pouco — por isso os níveis de menu, tooltip e diálogo têm valor próprio, mais opaco.

Elevação não substitui borda. Toda superfície flutuante mantém --tp-border-default para continuar legível em alto contraste e quando a sombra é suprimida pelo sistema operacional.

Movimento existe para explicar uma mudança de estado, nunca para enfeitar. Três durações e três curvas cobrem o sistema inteiro. Acima de 240 ms a interface passa a parecer lenta; abaixo de 120 ms a transição não é percebida e só atrapalha.

@media (prefers-reduced-motion: reduce) {
  .tp-toast { animation: none; }
  .tp-skeleton-line { animation: none; background-image: none; }
  .tp-progress-indeterminate::before { animation: none; inline-size: 100%; }
}

Nove camadas nomeadas, em ordem crescente. Nenhum componente declara um número solto: se algo precisa subir, ele recebe o token da camada a que pertence. O diagrama abaixo mostra a pilha com o elemento mais ao fundo no topo da lista e o mais à frente embaixo.

1. --tp-z-dropdown30
2. --tp-z-popover35
3. --tp-z-sticky40
4. --tp-z-menu50
5. --tp-z-overlay99999
6. --tp-z-drawer100000
7. --tp-z-dialog100000
8. --tp-z-toast100001
9. --tp-z-preloader999999

Resumo textual: dropdown (30) e popover (35) ficam sobre o conteúdo; sticky (40) e menu (50) sobre eles; overlay (99999), gaveta e diálogo (100000) retêm a interação; toast (100001) fica acima do diálogo; o preloader (999999) cobre tudo até a aplicação iniciar.

Os tokens --z-index-1 a --z-index-999999 vêm da base TailAdmin e permanecem para compatibilidade das páginas originais. Em código novo, use apenas os --tp-z-*: eles nomeiam o papel, não o número.

O layout vira em quatro pontos próprios do sistema. Cada virada tem uma razão de leitura, não um dispositivo: a coluna deixa de caber, a tabela precisa rolar, o trilho lateral vira barra horizontal.

Zoom até 200% é equivalente a reduzir a largura: as mesmas viradas se aplicam. Nenhum conteúdo do sistema depende de largura mínima para ser lido, e toda tabela fica dentro de uma região rolável com foco por teclado.

Telas conceituais. Orientam o sistema; não representam produto publicado nem regras de negócio aprovadas. Premissas e decisões pendentes estão em Plataformas e dispositivos.

Matriz de plataformas

A coluna vale para a largura que o aplicativo recebe. .tp-app é um contêiner de consulta: a mesma casca vira telefone num painel estreito de um monitor grande.

Dois públicos, uma casca

Decidido em 22/09/2026: além do colaborador, o gestor tem aplicativo. Não é o painel encolhido — resolve o que aparece no meio do dia: uma aprovação, um crédito, uma olhada na campanha. A casca é a mesma; o que muda são os destinos.

A mesma tela em três molduras

O mesmo markup do Início, sem uma linha diferente, em três larguras. A barra de abas vira trilho e depois navegação lateral; os blocos passam de uma para duas colunas.