Catálogo · fonte da verdade

Componentes e tokens da Plataforma de Gestão Tributária Especial. Cada peça já vem com seus estados; estado que não está aqui não existe. Os mockups reusam este catálogo. A paleta é um placeholder profissional (azul + cinza-ardósia); re-tematizar é trocar os tokens de marca no ds.css.

Fundamentos

Cores (tokens semânticos)

Nada de cor crua na tela: tudo aponta pra um token. Trocar --color-primary re-tematiza o sistema inteiro (o dark sai de graça).

primary#1351b4
primary-hover#0c326f
primary-darkernavy #071d41
primary-subtleblue-50
secondaryteal #0d9488
secondary-hoverteal-700
secondary-subtleteal-50
headingslate-900
text-mutedslate-500
borderslate-200
successgreen-600
warningamber-600
dangerred-600
infosky-600

Fundamentos

Escalas de cor (primitivas)

As variações completas. O cinza é a escala slate (ardósia, levemente azulada). Os semânticos acima apontam pra elas.

Slate (cinza) · neutro

Blue · primary

Green · success

Amber · warning

Red · danger

Sky · info

Teal · secondary

Tipografia (escala)

Base do body = 16px · Source Sans 3 · pesos 400 regular / 500 medium / 600 semibold / 700 bold. Tudo via tokens --text-*, nada cravado.

Declaração de Regimes Específicos

display · --text-4xl · 36px · 700 · hero, número grande de KPI

Declaração de Regimes Específicos

h1 · --text-3xl · 30px · 600 · título de página

Declaração de Regimes Específicos

h2 · --text-2xl · 24px · 600 · seção

Declaração de Regimes Específicos

h3 · --text-xl · 20px · 600

Declaração de Regimes Específicos

h4 · --text-lg · 18px · 600
Declaração de Regimes Específicos
h5 · --text-base · 16px · 600
Declaração de Regimes Específicos
h6 · --text-sm · 14px · 600 · uppercase

Corpo de leitura em 16px. A maioria dos parágrafos e conteúdo textual usa este tamanho.

corpo · --text-base · 16px · 400

UI densa em 14px: menu, botão, campo, célula de tabela. Padrão de apps densos (Linear, GitHub, Stripe).

UI · --text-sm · 14px · 400/500/600

Legenda / caption em 12px: metadados, ajuda de campo, badge, timestamps.

legenda · --text-xs · 12px · 400/500

Fundamentos

Espaçamento e raio

Escala 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 56. Layout usa só estes passos.

4
8
12
16
24
32
40
48
56
sm · 4
base · 8
lg · 12
pill

Componentes

Botões

Hierarquia: primário → secundário (texto na cor da marca) → terciário (neutro, fundo branco) → ghost. Todos os estados, incluindo foco visível no teclado.

Hierarquia

Tamanhos · pequeno · médio · grande

Estados · normal · hover · foco · ativo · loading · desabilitado

Tracejado (adicionar) e largura total

.btn--dashed para a ação de adicionar em estado vazio. .btn--block deixa qualquer botão em largura total (dispensa CSS local de width:100%).

Tamanhos de controle

Alturas por token: --control-h-sm 32 · --control-h 40 · --control-h-lg 44. Botões têm as 3 alturas (.btn--sm · .btn · .btn--lg). Inputs têm 2 (.input 40 · .input--lg 44); não há input de 32, pequeno demais para digitar. Input e botão da mesma altura alinham lado a lado. Em formulários, use o input de 44 (.input--lg) como padrão; o de 40 só em contextos específicos.

Botões · sm 32 · base 40 · lg 44

Inputs · base 40 · lg 44

Par grande (44): input + botão alinhados

Botões de ícone

Regra do DS: todo botão só‑ícone tem aria-label + tooltip (passe o mouse ou dê foco pelo teclado). Sempre SVG, nunca emoji.

Fechar Editar Excluir Confirmar Mais ações Buscar Pequeno (sm)

Componentes

Campos (com estados)

Erro com aria-invalid + mensagem ligada por aria-describedby. Placeholder é exemplo, não instrução.

Usamos para notificações do processo.
Informe um identificador válido.
R$
%
dias

Componentes

Campo somente leitura

Dado confirmado que veio de fora (ex.: base de CNPJ da Receita) e o usuário não edita. Rótulo + valor, sem cara de campo editável. Rótulo 14px, valor 16px. Use .readonly-field com .readonly-field__label e .readonly-field__value.

CNPJ (raiz)12.345.678
Razão socialBanco Meridiano S.A.
Nome fantasiaMeridiano
Município / UFSão Paulo / SP

Componentes

Combo (input com dropdown)

Digite pra filtrar; itens ricos (código + nome + detalhe) com marca de selecionado. Setas ↑↓, Enter e Esc no teclado.

Select custom: o nativo não estiliza as opções. Este abre um dropdown com opções ricas (ícone + nome + detalhe), teclado (↑↓, Enter, Esc, Home/End) e marca de selecionado.

Multiselect: escolha vários, chips removíveis e busca que filtra a lista. Ideal para atribuir codTrib em massa.

Componentes

Seleção

Cada tipo num bloco, com os estados nomeados: padrão, selecionado, foco (teclado), hover e desabilitado. O checkbox tem ainda indeterminado e selecionado‑desabilitado.

Checkbox

Radio

Toggle

Componentes

Cartão selecionável

Opção de escolha rica (radio ou checkbox): número OU ícone à esquerda, título + descrição, selo opcional (ex.: sugestão de IA da Axians) e indicador à direita. Forma listas de enquadramento densas, como o D-1001. Estados: padrão, hover, selecionado, foco (teclado) e desabilitado. O input real vive dentro do <label> (acessível); o estado visual sai de :has(input:checked).

Radio (1 escolha) · com selo de IA

Checkbox (várias) · ícone no lugar do número · desabilitado

Componentes

Status, tags e badges

Status sempre cor + rótulo (nunca só cor). Tags para filtros; badge para contagem.

Conforme Pendente Divergente Em análise Rascunho Pequeno Grande Rascunho
Competência: 08/2026 Regime: Lucro Real Só divergentes
Notificações 3 Fila 12 Erros 5

Componentes

Alertas (callout na página)

Competência aberta

Você pode enviar documentos até 20/09.

Apuração concluída

Nenhuma divergência encontrada nesta competência.

3 documentos sem competência

Classifique-os para entrarem na apuração.

Falha no processamento

Reenvie o arquivo XML da nota 12.347.

Componentes

Statusbar (estado da submissão)

Hero de estado no topo do detalhe de uma submissão (reutilizado no D-1001 e no D-1011): ícone-chip + título + descrição + comentário citado + ações à direita. Variantes info/warning/success/danger.

Em revisão

A submissão está com o aprovador. Enquanto não for revisada, você ainda pode cancelar e editar.

Ajustes solicitados

O aprovador devolveu a submissão com pedidos de ajuste. Faça as correções e reenvie.

Ana Prado: “Revise o codTrib das contas de cosseguro antes de reenviar.”

Componentes

Tabela

Seleção (checkbox), cabeçalho ordenável (na cor da marca), colunas de ícone+texto, avatar+texto e progresso, e ações à direita. Valor com tabular-nums. Rola sozinha em telas estreitas.

Documento Responsável Conformidade Valor Situação Ações
NF-e 12.345 ASAna Silva
92%
 R$ 12.480,00 Conforme EditarExcluir
NF-e 12.346 BCBruno Costa
68%
 R$ 3.210,55 Pendente EditarExcluir
NF-e 12.347 CDCarla Dias
40%
 R$ 890,00 Divergente EditarExcluir

Scroll horizontal + ações fixas à direita .table-wrap · .table--stickyactions

Tabela dentro de .table-wrap: em tela menor ela não encolhe nem corta status ou botão; rola na horizontal. Com .table--stickyactions, a coluna de ações fica sempre visível e a célula fixa herda o fundo da linha (zebra, hover e seleção acompanham).

CódigoContaNaturezacodTribConta referencialSituação Ações
1.1.01.001Seguros · VidaCredora1100101011.01.01 Sugerida pela IA
1.1.01.013Seguros · AeronáuticoCredora1100101021.01.02 Sem sugestão

Componentes

Rodapé de tabela

Contagem à esquerda + paginador à direita, com borda superior. Padrão único .tablefoot para toda listagem paginada; o paginador reusa .pagination/.page-btn (numerado) ou .tpager (compacto).

Mostrando 1–50 de 52 contas

Componentes

Filtro ativo

Fica logo acima de uma tabela ou lista quando um KPI ou atalho recorta o que está sendo exibido: mostra por que a lista está filtrada e deixa limpar em um clique. Padrão único .filterbar (ícone de funil + rótulo + chip removível) para reutilizar em toda tela que filtra.

Filtrando por Sugeridas pela IA
Filtrando por A classificar

Componentes

Accordion

Notas fiscais eletrônicas com competência classificada e situação diferente de rascunho.
Sim, enquanto o prazo de entrega não expirar. Depois disso, apenas com retificação.
Abra o documento, ajuste o campo apontado e reprocesse a apuração.

Componentes

Abas

Padrão ARIA APG: tablist / tab / tabpanel, aria-selected, aria-controls e navegação por setas (Home e End inclusos).

Visão geral da competência: totais, prazo de entrega e situação da apuração.

Componentes

Modais

Modal centralizado para foco em uma tarefa; confirmação para ações destrutivas.

Larguras: .modal (480) · .modal--md (560) · .modal--lg (720). O card anima na entrada (ds-modal-in); ao encadear dois modais, use .is-leaving no card que sai e o fundo escuro permanece contínuo.

Componentes

Comprovante (recibo)

Comprovante de envio à Receita, reutilizável (D-1001, eventos mensais, "Recibos e envios"). Vive num .modal--md reabrível e evolui no tempo: protocolo (transmitido) → recibo (aceito) → ocorrências (rejeitado). Tom do bloco de estado por variante (info/success/danger), nunca verde no provisório.

Transmitido — em processamento

Protocolo emitido. Ainda não cumpre a obrigação; o recibo sai quando a Receita concluir.

ContribuinteMAG Seguros
Protocolo do lote000120260903112000000042
Recepção03/09/2026, 11:20
Recibo (nrRecibo)Aguardando processamento

Aceito pela Receita Federal

Comprovante definitivo. A obrigação foi cumprida (prova válida).

Protocolo do lote000120260903112000000042
Recibo (nrRecibo)1001202601000000000000000000001
Processamento03/09/2026, 11:27
Hash do arquivo9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b

Rejeitado pela Receita Federal

Não gerou recibo. Corrija os dados e retransmita (gera nova chave).

Protocolo do lote000120260903112000000042
Recibo (nrRecibo)Não gerado

Ocorrência (erro impeditivo)

MS1097 · A validade informada se sobrepõe a um período já existente.

Componentes

Padrão de formulário

Seções com título + descrição, grade de campos que se reorganiza sozinha, campo longo ocupa a linha toda, e barra de ações fixa ao pé.

Identificação

Dados básicos do estabelecimento.

Endereço

Usado nas guias e notificações.

Componentes

Wizard (etapas)

  1. Estabelecimento
  2. 2Documentos
  3. 3Revisão
  4. 4Envio

Componentes

Timeline

Um componente, três níveis de detalhe. Bolinha: cor semântica (success/info/warning/danger) ou --muted. Título + hora na mesma linha (.timeline__head), descrição (.timeline__text/.timeline__desc) e, quando precisar, campos rotulados (.timeline__fields) e ator (.timeline__who). Variante .timeline--muted deixa as bolinhas neutras e leva a linha até o fim do último item.

Simples (título + hora · texto)

  • Apuração concluída

    Hoje, 09:12

    Sem divergências na competência 08/2026.

  • 42 documentos importados

    Ontem, 16:40

    Lote enviado por Ana Silva.

  • Competência aberta

    05/08, 11:03

    Prazo de entrega até 20/09.

Só texto (sem status, sem hora ao lado)

  • Conta criada

    Perfil de administrador definido.

  • Empresas adicionadas

    Cinco empresas do grupo vinculadas.

  • Certificados cadastrados

Detalhado (título + hora, status, campos e ator)

  • Enviada para revisão

    02/09/2026 · 11:15
    Status
    Em revisão
    Realizado por
    RARicardo Alves · Elaborador

  • Processada pela Receita Federal

    03/09/2026 · 11:27
    Status
    Processado com sucesso
    Realizado por
    Receita Federal · Sistema
    Recibo
    1001202601000000000000000000001

Componentes

Counters (KPIs) e progresso

Documentos1.284 8% vs. mês anterior
Conformes1.19092,7% do total
Divergentes31 3% vs. mês anterior
Valor apuradoR$ 2,4Mcompetência 08/2026
Processamento72%

Componentes

Estados de tela

Vazio, carregando (skeleton) e feedback (toast). Toda tela cobre estes cenários.

Nenhum documento

Envie os documentos da competência para começar.

Salvo

Apuração gravada.

Falhou

Verifique a conexão.

Painel assíncrono (mensagens de status)

O resultado do processamento é anunciado ao leitor de tela sem mover o foco. Sucesso em role="status" (aria-live polite); erro em role="alert" (assertive).

Componentes

Upload (dropzone)

Depois de escolher, o arquivo aparece como .filecard (o par do dropzone): ícone + nome + meta + ações. Serve tanto para o arquivo recém-selecionado quanto para um já importado.

certificado-mag.pfx
PFX · 12,4 KB

Componentes

Avatar e menu

Sem foto, o avatar mostra iniciais (nunca uma foto genérica). O menu abre no clique.

Ana Silva · ana.silva@empresa.com
JD Iniciais como fallback.

Componentes

Drawer

Painel lateral para editar ou adicionar sem sair da tela. Comportamento de diálogo vem do ds-dialog.js: o foco entra ao abrir, o Tab dá a volta dentro do painel, o fundo fica inerte (teclado e leitor de tela não alcançam), Esc fecha e o foco volta ao gatilho. Estrutura: .drawer-backdrop > .drawer com .drawer__header · .drawer__body · .drawer__footer. Tamanhos: .drawer--sm 440 · .drawer--md 560 (padrão) · .drawer--lg 760.

Componentes

Navegação lateral (expansível)

Menu com ícones. Clique em "Colapsar" pra virar só ícones (o painel encolhe) e de novo pra expandir. Item ativo destacado na marca.