CSS do appSessão: 235420d3App: financeiroVersão 1.3 · 4c6a45189764Aguardando decisão do donoPara aceitar, reprovar ou treinar, abra uma vez o link do dono neste navegador.
Cada área mostra à esquerda o CSS servido hoje em 4do.io e à direita a proposta. Os valores de hoje vêm de AppShell.module.css e tokens.css.
01
Cores
Hoje
Fundo--fin-bg
Superfície 2--fin-surface-2
Violeta--fin-primary
Ciano--fin-accent
Ciano da porta--access-context
Laranja da porta--access-action
Proposta
Neutros: três camadas
Palco--bg
Trilho--surface-2
Cartão--surface
Cor com função
Seleção--brand
Ação--action
Conectado--ok
Erro--bad
Hoje há duas paletas na área logada. A aba Cadastro de pessoas usa o ciano e o laranja da porta; o resto usa violeta e ciano 4DO.
A proposta dá uma função a cada cor: violeta marca o que está selecionado, ciano é a ação principal, verde e vinho dizem o estado. O resto é neutro.
02
Header
Hoje
FINANCEIRO
Meus clientes ▾
Buscar empresa ou tela
Proposta
Financeiro
Fundo branco com sombra leve separa o header do palco; hoje ele tem a mesma cor do fundo.
Busca com lupa e borda que aparece no hover. Seletor e busca com 40 px de altura, iguais.
Não espreme: abaixo de 900 px a busca e o rótulo «Perfil» saem, e o seletor de empresa mantém o nome inteiro. Hoje ele vira «M» com o painel lateral do Chrome aberto.
03
Sidebar
Hoje
Proposta
Barra do item ativo em violeta. Hoje é ciano #01e2fe sobre branco, 1,6:1: quase não aparece.
Ícone em cada item, que fica violeta no item ativo; hover em cinza neutro.
Rótulo «Escritório» com 12 px; hoje tem 10 px.
04
Botões
Hoje: cinco estilos sem regra
Dois «primários»: ciano em pílula (AppShell) e violeta quadrado (Cadastro de empresas)
Proposta: quatro famílias, uma forma
NormalHoverFoco do teclado · desabilitado · pequeno
Primário: ciano em pílula, um por tela, para a ação principal (Acessar, + Novo, Abrir).
Secundário: contorno; terciário: texto violeta, para links de ação; perigo: vinho, só para remover.
Texto do botão sempre legível: o «Cadastrar» violeta de hoje tem texto escuro sobre violeta, 2,4:1; a proposta não usa violeta como fundo de botão.
Desabilitado fica cinza com texto legível; hoje o «+ Novo» desabilitado vira um ciano claro que parece ativo.
05
Campos
Hoje
Proposta
Busca sempre em pílula com lupa; campo de dado (CNPJ, CPF) em letra mono.
Borda com 3:1 ou mais nos dois temas; foco com anel violeta.
06
Tipografia
Hoje: Treinar
Financeiro · 4DO Tecnologia Ltda · Admin
Conhecimento em um só lugar.
Configure as fontes, prepare o conteúdo e cuide dos acessos.
Proposta: seis tamanhos
40 · títuloConhecimento
28 · seçãoPessoas da empresa
20 · cartãoDocuments
16 · textoConfigure as fontes e cuide dos acessos.
14 · apoioReceba documentos e acompanhe a leitura.
13 · dado69.425.860/0001-73
Hoje o texto de apoio (28 px) é maior que o título (18 px) no Treinar. A proposta inverte: título 40, texto 16.
Mínimo de 13 px. Hoje há rótulos de 10 e 11 px no menu e nas tabelas.
07
Abas
Hoje
EmpresasCadastroTreino
Proposta
Sublinhado violeta sob a aba ativa, sobre uma linha que ocupa a largura toda: fica claro onde as abas terminam e o conteúdo começa.
08
Estados e selos
Hoje
SuperadminAtivoInativo
Proposta
AtivoConectadoNão medidoBloqueadoSuperadmin
Estado com ponto e fundo claro na cor do estado; papel da pessoa (Superadmin) em violeta, separado do estado.