A disciplina precede a expressão: alinhamentos, grelhas e ritmos mantêm-se consistentes em todos os ecrãs.
01 / Doutrina
Princípios da direção
O sistema visual não dramatiza o comando; torna-o legível. Cada escolha deve reduzir ambiguidade e preservar a hierarquia da informação.
Cada elemento tem uma função operacional e qualquer ornamento sem significado é removido.
O âmbar é uma ordem, não um ambiente: assinala foco, prioridade, seleção ou progressão.
A densidade é controlada por contraste e espaço, nunca por efeitos decorativos ou brilho indiscriminado.
A geometria comunica estado e categoria: forma, orientação e preenchimento obedecem a regras estáveis.
A tecnologia parece atual e credível, sem distorções, interferências, scanlines ou nostalgia de terminal.
02 / Cor
Paleta operacional
O carvão organiza profundidade; o off-white transporta informação; o âmbar conduz a atenção. Cores de estado nunca substituem texto ou forma.
:root {
--coal-950: #0F1113; --coal-900: #15181B;
--coal-800: #1B1F23; --coal-700: #22272C; --coal-600: #2B3137;
--amber-300: #F2C66D; --amber-400: #D9A441; --amber-600: #A77A27;
--white-100: #E9EDF0; --white-300: #B5BDC4; --white-500: #7F8992;
--state-success: #5FC28B; --state-warning: #F2C66D;
--state-danger: #FF7B72; --state-info: #70B7E6;
--space-950: #09141F; --space-800: #0D2230;
}
#0F1113
Carvão profundo
--coal-950Rodapés, molduras externas e zonas de máxima profundidade. Não usar como texto.
#15181B
Carvão base
--coal-900Fundo principal da aplicação e referência para todos os rácios de contraste.
#1B1F23
Elevação 1
--coal-800Painéis persistentes, barras de comando e cartões em repouso.
#22272C
Elevação 2
--coal-700Controlos, linhas selecionáveis e agrupamentos dentro de painéis.
#2B3137
Elevação 3
--coal-600Hover, superfícies temporárias e separação de camadas próximas.
#D9A441
Âmbar primário
--amber-400Seleção, ação primária, progresso e suportes de mira. Evitar grandes áreas preenchidas.
7,92:1 sobre carvão base · AA/AAA#F2C66D
Âmbar luminoso
--amber-300Texto âmbar pequeno, foco de teclado e alertas não críticos.
11,09:1 sobre carvão base · AAA#A77A27
Âmbar reduzido
--amber-600Linhas, divisores e decoração. Não usar em texto pequeno sobre elevações.
4,63:1 sobre carvão base · AA normal#E9EDF0
Off-white principal
--white-100Títulos, valores críticos e texto principal. Substitui branco puro.
15,14:1 sobre carvão base · AAA#B5BDC4
Texto secundário
--white-300Descrições, metadados e texto de apoio.
9,37:1 sobre carvão base · AAA#7F8992
Texto terciário
--white-500Labels desativadas e dados de baixa prioridade. Reservar para 14 px ou mais.
5,00:1 sobre carvão base · AA normal#5FC28B
Sucesso
--state-successOrdem concluída, ligação estável ou produção positiva.
8,13:1 sobre carvão base · AAA#F2C66D
Alerta
--state-warningRisco próximo, capacidade limitada ou decisão pendente.
11,09:1 sobre carvão base · AAA#FF7B72
Perigo
--state-dangerAtaque recebido, perda irreversível ou erro que bloqueia a ação.
7,07:1 sobre carvão base · AAA#70B7E6
Informação
--state-infoContexto cartográfico, ajuda e fenómenos não hostis.
8,15:1 sobre carvão base · AAA#09141F
Azul-espaço base
--space-950Fundo de mapa, órbitas e cartografia. Nunca substituir o carvão em painéis.
#0D2230
Azul-espaço elevado
--space-800Sectores realçados, volumes de navegação e profundidade no mapa.
Verificação WCAG: os rácios acima foram calculados com a fórmula de luminância relativa WCAG 2.x contra #15181B. Nos painéis #22272C, off-white, texto secundário, âmbar primário e todas as cores de estado mantêm pelo menos 5,97:1; o âmbar reduzido fica reservado a linhas e elementos não textuais.
03 / Tipografia
Voz de comando
A tipografia separa leitura, decisão e telemetria. Não condensar por estilo: encurtar a mensagem antes de sacrificar legibilidade.
LIMIAR
Space Grotesk, 500–700. Geométrica sem parecer ornamental; usar em títulos, nomes de operações e números hero.
Frota em trânsito
IBM Plex Sans, 400–700. Família principal para navegação, controlos, mensagens e leitura contínua.
ETA 06:42:18
IBM Plex Mono, 400–600. Usar em labels, coordenadas, IDs, temporizadores e valores alinhados.
Display XL
80/76 · 600
tracking −5%
80/76 · 600
tracking −5%
Comando de sector
Título L
44/46 · 600
tracking −3,5%
44/46 · 600
tracking −3,5%
Rede do Vão estabilizada
Heading M
24/29 · 600
tracking −1,5%
24/29 · 600
tracking −1,5%
Composição da frota
Body M
16/26 · 400
tracking 0
16/26 · 400
tracking 0
A rota atravessa dois sectores neutros e chega ao nó de destino dentro da janela diplomática acordada.
Label S
12/17 · 600
tracking +14%
12/17 · 600
tracking +14%
Postura operacional / Defesa
Data M
14/20 · 500
tracking 0
14/20 · 500
tracking 0
SEC–14.08 · ETA 06:42:18 · 78% INTEGRIDADE
04 / Estrutura
Grelha e espaçamento
Todos os valores partem de uma unidade base de 4 px. A consistência espacial deve ser mais visível do que qualquer decoração.
space-14 pxspace-28 pxspace-312 pxspace-416 pxspace-520 pxspace-624 pxspace-832 pxspace-1040 pxspace-1248 pxspace-1664 pxRaios mínimos, quase retos:
2 px
4 px
6 px máx.
Espessuras de linha:
1 px / estrutura
2 px / ícone e foco
3 px / ênfase rara
Usar contentores de 12 colunas em desktop, 8 em tablet e 4 em mobile. O gutter recomendado é 24 px, reduzido para 16 px abaixo de 680 px.
05 / Simbologia
Construção dos sinais
Os ícones devem ser reconhecíveis em 24 px, funcionar numa só cor e manter a mesma leitura em mapa, lista e painel de detalhe.
- Grelha: desenhar em 24×24 com margem ótica mínima de 2 px em todos os lados.
- Traço: manter 2 px uniformes; não misturar espessuras no mesmo pictograma.
- Terminações: usar pontas retas e uniões angulares; evitar curvas suaves sem função.
- Ângulos: privilegiar 90° e 45° para preservar ritmo e reconhecimento.
- Preenchimento: reservar áreas sólidas para estado ativo, seleção ou perigo confirmado.
- Silhueta: cada classe deve continuar distinguível sem detalhe interno.
TriânguloUnidade ligeira
RetânguloUnidade pesada
CírculoInstalação
06 / Produção
Regras para SVG
O ficheiro vetorial é um ativo de sistema, não uma ilustração isolada. Deve aceitar cor, escala e estado a partir do componente que o contém.
- Usar
viewBox="0 0 24 24"; variantes de detalhe podem usar 32×32 ou 48×48. - Definir
stroke="currentColor"e controlar a cor no componente. - Não incluir elementos
<text>; labels e nomes vivem no HTML. - Nomear ficheiros em kebab-case:
ship-scout.svg,resource-kethrium.svg. - Remover grupos vazios, metadados do editor, máscaras redundantes e atributos duplicados.
- Unir paths quando isso reduz o ficheiro sem alterar a leitura ou dificultar manutenção.
- Usar
stroke-linecap="butt"estroke-linejoin="miter"por defeito.
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" aria-hidden="true"> <path d="M12 2l7 18-7-4-7 4 7-18z"/> <path d="M12 7v9M8 15h8"/> </svg>
07 / Biblioteca inicial
Ícones de produção
Treze símbolos originais, desenhados para a grelha de 24 px. A cor demonstrada não deve ser incorporada no ficheiro SVG.
08 / Interação
Estados interativos
O estado deve ser evidente sem depender apenas de cor. Borda, fundo, ícone e texto trabalham em conjunto.
Default
Borda neutra, elevação 2 e conteúdo em off-white.
Hover
Fundo sobe uma elevação; borda e ícone recebem âmbar.
Selecionado
Barra de 3 px, fundo âmbar a 10% e estado textual explícito.
Alerta
Perigo usa forma de aviso, texto direto e vermelho reservado.
09 / Controlo de qualidade
Faz / não faças
Nove pares de decisão para manter a direção consistente quando novos ecrãs, ativos ou equipas entram em produção.
Faz
- Usa o âmbar para foco, prioridade e ação — sempre com intenção operacional.
- Constrói hierarquia com espaço, peso tipográfico e elevação de carvão.
- Desenha ícones primeiro a 24 px e valida a silhueta a tamanho real.
- Combina cor com forma, texto ou padrão em todos os estados críticos.
- Alinha números em IBM Plex Mono e ativa algarismos tabulares.
- Mantém cantos entre 2 e 6 px e linhas estruturais de 1 px.
- Usa azul-espaço apenas na cartografia e em profundidade astronómica.
- Escreve labels curtas, concretas e orientadas à decisão.
- Preserva áreas silenciosas para a informação crítica respirar.
Não faças
- Não transformes o âmbar numa iluminação geral ou num fundo dominante.
- Não uses sombras difusas, vidro decorativo ou brilho sem estado associado.
- Não mistures espessuras, pontas arredondadas e ângulos livres nos ícones.
- Não comuniques sucesso, alerta ou perigo apenas através da cor.
- Não uses a fonte mono em parágrafos longos ou mensagens narrativas.
- Não introduzas cápsulas, cantos muito arredondados ou cartões fofos.
- Não leves o azul-espaço para painéis de gestão ou formulários.
- Não uses linguagem vaga como “algo correu mal”; indica causa e ação.
- Não simules desgaste digital, interferência ou estética retro.