Princípios
Cinco regras que valem para toda tela, de qualquer área.
O lima marca só a ação principal, o item ativo do menu e a “Sua vez”. Se tudo chama atenção, nada chama.
Todo item mostra de quem é a vez e o que fazer agora, com o prazo ao lado.
Todo selo tem ponto e texto. Vermelho só para erro ou atraso real.
Botões de 48px, barra inferior para uma mão e tabelas que viram cartões.
Bordas finas e sombras quase invisíveis. A sombra separa camadas, não decora.
Cores
A marca dá o tom (marinho e lima); os neutros fazem o trabalho pesado. Os módulos não criam cores novas.
--navy #102b35Texto forte, menu, botão escuro--lime #c4e63bSó a ação principal e “Sua vez”--lime-bg #f2f8dcSeleção de texto--canvas--surface--line--ink-soft--mutedTipografia
Duas famílias da marca. Unbounded só no título da página e nos números; Cabin em todo o resto.
Unbounded 600 · 27pxManutenção
Unbounded 500 · 30px42 de 60
Cabin 700 · 16pxAgenda de hoje
Cabin 400 · 15px (16px no celular)A OS só avança depois do checklist de alta tensão.
Cabin 400 · 13,5pxQuem age: Você · Próximo: registrar o diagnóstico.
Forma e profundidade
Raios generosos e três níveis de sombra, todos discretos.
Componentes
Peças reais do protótipo, com o mesmo CSS. Mudou aqui, mudou no sistema todo.
6 de 6 itens · Rafael
hoje, 10:42SoH 81% · 2 módulos com desvio
hoje, 11:30Aguardando liberação
Quando algo depender de você, aparece aqui com o prazo.
Referências de startups
O que pegamos de cada produto. São referências de padrão: nenhum código foi copiado. Detalhes e fontes em docs/pesquisa/.
Lateral discreta, poucos separadores e “Criar” sempre à mão, inclusive no celular.
Fundo, borda e texto têm uma função cada. Toque de 44px ou mais e status nunca só por cor.
Selos com fundo e borda no mesmo tom. Estado vazio que diz o que falta e oferece a ação.
“Ir para…” e “Registrar…” em um só lugar. É um atalho, nunca o único caminho.
Métrica com meta e barra, quadro com “Mover para…” no celular e histórico vertical da OS e da bateria.
O dia do técnico começa pela próxima OS, e o passo a passo exige EPIs e precauções antes das evidências.
Regras rápidas
Para qualquer pessoa que criar uma tela nova.
Fazer
- Um botão lima por tela, com verbo + objeto (“Nova OS”).
- Mostrar quem age, o próximo passo e o prazo.
- Testar em 375px, 768px e 1440px.
- Usar os tokens de
css/os.css.
Evitar
- Cor de área como fundo ou como status.
- Unbounded em textos corridos ou botões.
- Sombras fortes, gradientes decorativos e ícones em excesso.
- Rolagem lateral e janelas cortadas no celular.
ProLAB OS · design system v3 do protótipo. Referência em código: apps/prolab-os/prototipo/css/os.css. Regras: docs/identidade-visual.md.