Usar hex/rgb hardcoded diretamente no JSX (color="#22c55e", style={{background: '#0a0a0a'}}) ao inves de variaveis CSS do token system (var(--bl-green-500)).

Impossivel trocar tema ou ajustar paleta de forma centralizada. Cores ficam espalhadas por dezenas de arquivos. Manutencao vira pesadelo.

RH.BOS, COMERCIAL.BOS, REPORTS.BOS (todos)

Tres greens diferentes coexistindo: #22c55e (Tailwind green-500), #00E05A e variantes hardcoded nos apps. O verde canonico do LAND BILHON e #6bc950 (var(--bl-green-500)) mas nao estava sendo respeitado como fonte unica de verdade.

Usuario percebe que cada app parece de uma empresa diferente. Botoes, badges e indicadores de sucesso tem verdes visivelmente distintos. Identidade visual fragmentada.

RH.BOS, COMERCIAL.BOS, REPORTS.BOS (cross-app)

Bordas com opacidade variavel sem padrao: rgba(255,255,255,0.06), rgba(255,255,255,0.08), rgba(255,255,255,0.12) usados aleatoriamente em cards e containers. Cada dev escolhe o que parece bom.

Hierarquia visual de containers fica inconsistente. Alguns cards parecem mais "profundos" que outros sem motivo funcional. Glass effect perde coerencia.

COMERCIAL.BOS (War Room, CRM), REPORTS.BOS (dashboards)

Usar fontFamily: 'Inter' ou style={{fontFamily: 'IBM Plex Mono'}} diretamente no JSX ao inves dos tokens var(--bl-font-sans) ou var(--bl-font-mono).

Se a font stack mudar (ex: Inter para Geist), componentes com inline nao atualizam. Dificulta manutencao e cria divergencia tipografica entre paginas.

RH.BOS (Scorecard, Copilot), COMERCIAL.BOS (CRM cards)

Textos com font-size: 8px, font-size: 0.45rem ou text-xs com scale adicional. Fontes abaixo de 9px sao ilegiveis em monitores padrao e violam acessibilidade basica.

Usuarios nao conseguem ler informacoes criticas. Acessibilidade WCAG comprometida. Em telas de resolucao padrao o texto vira borrao. Dados de negocio ficam invisiveis.

COMERCIAL.BOS (mini-cards CRM), RH.BOS (tabelas compactas)

Legendas de graficos Recharts/Chart.js com fonte default muito pequena. Cores dos datasets nao combinam com labels minusculos. Em dashboards com 4+ graficos fica impossivel identificar series.

Grafico perde utilidade se legenda nao e legivel. Usuarios confundem series e tomam decisoes erradas. Reports impressos ficam inuteis.

REPORTS.BOS (Intelligence), COMERCIAL.BOS (War Room KPIs)

Badges de status com texto cortado: "Em andament...", "Aguardando apr...". Badges com largura fixa que nao comportam o conteudo. Status da vaga ou deal fica incompreensivel.

Informacao critica de status fica ilegivel. Usuario precisa passar mouse para ler o texto completo, mas em mobile nao tem hover. Funcionalidade basica comprometida.

RH.BOS (status vagas), COMERCIAL.BOS (pipeline stages)

Cada app com topbar diferente: RH.BOS usa topbar com logo a esquerda, COMERCIAL.BOS tem hamburguer menu, REPORTS.BOS tem barra sem glass effect. O componente Global Top Bar (liquid glass) nao esta sendo reutilizado.

Usuario percebe 3 sistemas diferentes ao navegar entre apps. Zero coerencia na experiencia. A topbar e o primeiro elemento que o usuario ve — se diverge, tudo parece quebrado.

RH.BOS, COMERCIAL.BOS, REPORTS.BOS (todos)

Pagina com titulo no breadcrumb/topbar E titulo grande no body. Ex: topbar mostra "COMERCIAL.BOS > War Room" e logo abaixo tem h1 "War Room Dashboard". Dois titulos disputando atencao.

Hierarquia visual quebrada. Espaco vertical desperdicado. Redundancia confunde o usuario sobre onde esta. Poluicao visual no topo da pagina.

COMERCIAL.BOS (War Room, Growth), RH.BOS (Hiring Scorecard)

Paginas do mesmo app com max-width diferente: formularios com max-w-4xl, dashboards com max-w-5xl, tabelas com max-w-6xl. Ao navegar, conteudo "pula" de largura.

Experiencia de navegacao instavel. Sidebar e topbar ficam fixos mas o conteudo muda de largura a cada pagina. Sensacao de "app quebrado".

COMERCIAL.BOS (CRM vs Dashboard vs Growth)

Containers com padding misturado na mesma app: px-4 em uma pagina, px-6 em outra, p-6 em outra. Margens do conteudo nao alinham entre paginas.

Desalinhamento sutil mas perceptivel ao navegar. Conteudo "pula" lateralmente. Impressao de falta de cuidado profissional.

RH.BOS (varias paginas), COMERCIAL.BOS (CRM pages)

Cards clicaveis sem nenhum feedback visual no hover. Cursor permanece default, borda nao muda, sem transicao. O card parece estatico e nao-interativo.

Usuario nao percebe que o card e clicavel. Affordance zero. Em dashboards com cards de KPI, usuario nao descobre que pode clicar para detalhar.

COMERCIAL.BOS (KPI cards), REPORTS.BOS (report cards)

Botao primario verde no RH.BOS usa #6bc950, no COMERCIAL.BOS usa #00E05A, e no REPORTS.BOS usa Tailwind bg-green-500. Tres verdes diferentes para a mesma acao primaria.

CTA principal muda de cor entre apps. Inconsistencia na acao mais importante da interface. Parece que cada app foi feito por uma equipe diferente.

RH.BOS, COMERCIAL.BOS, REPORTS.BOS (todos)

Inputs de formulario sem focus ring ou com focus ring azul default do browser. Em dark mode o azul padrao fica estranho. Alguns inputs usam outline: none sem substituicao.

Usuario nao sabe qual campo esta ativo. Navegacao por teclado fica impossivel de acompanhar visualmente. Acessibilidade comprometida.

RH.BOS (formularios de vaga), COMERCIAL.BOS (filtros CRM)

Badges de status com formatos mistos: rounded-md na lista de vagas, rounded-full no pipeline, rounded-lg nos reports. Mesma informacao (status) com 3 formatos visuais diferentes.

Usuario nao associa badges visuais entre paginas. O mesmo status "Ativo" parece diferente em cada contexto. Inconsistencia no padrao de leitura rapida.

RH.BOS (vagas, candidatos), COMERCIAL.BOS (pipeline, deals)

Blur do glassmorphism variando: topbar com blur(20px), modais com blur(10px), sidebars com blur(40px), cards com blur(12px) e blur(16px). Sem token definido.

Efeito glass perde consistencia. Algumas areas parecem mais "profundas" que outras sem logica. Em dispositivos fracos, blur alto causa lag de render.

RH.BOS (sidebar), COMERCIAL.BOS (modais), REPORTS.BOS (topbar)

Pagina com fundo #0a0a0a plano, sem o grid sutil e sem glow orbs (radial gradients) que definem a identidade visual LAND BILHON. Pagina parece de outro sistema completamente diferente.

Quebra total da identidade visual. O dark mode do Bilhon nao e apenas "fundo preto" — e o ecossistema de grid + glow + glass que cria profundidade. Sem isso, parece template generico.

REPORTS.BOS (paginas novas), COMERCIAL.BOS (paginas legadas)

Banner de Demo Mode renderizado DEPOIS do titulo da pagina ao inves de ser o primeiro elemento visivel. Usuario ve conteudo real antes de perceber que esta em modo demo.

Usuario pode confundir dados demo com dados reais por alguns segundos. Em apresentacoes, o banner nao e visivel sem scroll. Ordem semantica incorreta.

COMERCIAL.BOS (24 paginas com toggle), RH.BOS (Demo Mode)

Dados de demonstracao renderizados identicamente aos dados reais. Nenhum badge, borda ou indicador visual diferenciando. Em modo DEMO COMPLETO, tabelas e cards parecem producao.

Risco critico: usuario ou gestor pode tomar decisao baseada em dados demo achando que sao reais. Em reunioes, dados falsos podem ser apresentados como verdadeiros.

COMERCIAL.BOS (CRM, War Room), RH.BOS (Scorecard), REPORTS.BOS (Intelligence)

Sidebar mobile com z-index: 40 enquanto modais usam z-index: 50 e a topbar z-index: 1000. Sidebar aberta nao cobre conteudo corretamente ou fica atras de outros overlays.

Em mobile, sidebar aberta nao bloqueia interacao com conteudo atras. Cliques "atravessam" a sidebar. Botoes do conteudo principal ficam clicaveis sobre a navegacao.

COMERCIAL.BOS (mobile view), RH.BOS (mobile view)

Dropdown de navegacao usando bg-elevated (rgba transparente) como background. O DemoBanner roxo e outros elementos do body sangram visualmente atraves do menu. Parece que tem sobreposicao de menus.

Menu fica ilegivel quando ha conteudo colorido por baixo. DemoBanner, cards e textos aparecem mesclados com os itens do dropdown. Experiencia visual quebrada e confusa.

RH.BOS (dropdown nav), COMERCIAL.BOS (dropdown nav)