Capítulo 1
Módulo: EncomendasCtt
Módulo gerado automaticamente via AST. Sem mocks ou dados legados.
Modelos Detectados
Nenhum modelo encontrado.
Rotas Detectadas
Nenhuma rota encontrada.
Capítulo 2
Módulo: Frotas
Módulo gerado automaticamente via AST. Sem mocks ou dados legados.
Modelos Detectados
Nenhum modelo encontrado.
Rotas Detectadas
Nenhuma rota encontrada.
Capítulo 3
Módulo: Principal
Módulo gerado automaticamente via AST. Sem mocks ou dados legados.
Modelos Detectados
Nenhum modelo encontrado.
Rotas Detectadas
Nenhuma rota encontrada.
Capítulo 4
Módulo: Roteirizacao
Módulo gerado automaticamente via AST. Sem mocks ou dados legados.
Modelos Detectados
Nenhum modelo encontrado.
Rotas Detectadas
Nenhuma rota encontrada.
Capítulo 11 • Oficial
Design System & Padrões Visuais da Plataforma
Guia canônico de tokens, tipografia, componentes e regras de interface adotadas em todas as telas (App, Swagger, Webhooks e MCP).
As 5 Regras de Ouro de UI / UX do AIDD v4
1. Scrollbar Estrita de 4px
Barras de rolagem em todas as caixas, painéis e janelas têm largura/altura cravada em
4px, com track transparente e thumb suave arredondado.
2. Integridade de 100% Viewport
Nenhum elemento estoura ou quebra a grade horizontal. Colunas têm rolagem interna independente e títulos usam
ellipsis sem quebra feia de linha.
3. Atalho Universal Ctrl + K
Todas as telas possuem campo de busca rápida com o atalho nativo
Ctrl + K (ou Cmd + K no Mac) e badge visual <kbd>.
4. Botões em Linha Única
Botões e badges nunca quebram ícones ou textos para a segunda linha (
white-space: nowrap !important com flex-shrink: 0).
Paleta Oficial de Cores (Design Tokens)
Dark Base
#020617 (Background)
Dark Surface
#0f172a (Cards/Panels)
Dark Elevated
#1e293b (Hover/Borders)
Brand Primary
#0284c7 (Ações/Destaques)
Medical Critical
#ef4444 (Vermelho/Emergência)
Urgency High
#f97316 (Laranja/Urgente)
Success / Pharma
#10b981 (Verde/Farmácia)
Intelligence / MCP
#8b5cf6 (Roxo/Agentes)
Tipografia & Famílias de Fonte
Plus Jakarta Sans
Utilizada para toda a interface do usuário, títulos, botões, modais e textos de navegação.
Exemplo: Título Bold 800
Exemplo: Corpo de Texto Regular 500
JetBrains Mono
Utilizada para payloads JSON, identificadores de tabela, rotas de API, código e métricas.
GET /api/financeiro/contas
{"status": 200, "latencia_ms": 1.2}
Showcase de Componentes Prontos
Variantes de Botão
Pills de Métodos HTTP
GET
POST
PUT
DELETE
PATCH
Barra de Busca com Atalho
Ctrl K
CSS Canônico para Inclusão em Novos Módulos
/* Regra Universal de Scrollbar 4px */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }
/* Proteção de Linha Única em Botões */
button, .btn { white-space: nowrap !important; flex-shrink: 0 !important; display: inline-flex; align-items: center; gap: 0.4rem; }