SIGNE Navy
Confiança, estabilidade
Texto, fundos institucionais e a versão monocromática do símbolo.
Cores que transmitem confiança e impulsionam o futuro.
Paleta, escalas, gradiente, cores de estado, contraste medido, gráficos e tokens.
Quatro cores, quatro papéis
Clique em qualquer valor para copiar.
SIGNE Blue
Tecnologia, progresso
Ações primárias, links e o início do gradiente.
SIGNE Cyan
Inovação, acessibilidade
Destaques, dados e o fim do gradiente. Nunca sob texto branco.
Cloud
Clareza, equilíbrio
Fundo padrão de telas e documentos.
Proporção de uso
60%
25%
10%
5%
- Cloud e branco
- Fundo e respiro
- Navy
- Texto e blocos de âncora
- Blue
- Ação e ênfase
- Cyan e gradiente
- Destaque pontual
Uma peça do SIGNE é majoritariamente clara. Quando o Blue passa de um décimo da área, ele deixa de chamar atenção — que é a única função dele.
Os passos de cada cor
As cores de marca sozinhas não constroem interface: hover, borda, fundo de etiqueta e estado desabilitado saem destas escalas.
Blue
Ações, links e o início do gradiente. O passo 500 é a cor de marca.50
#EBF2FF
Fundo de aviso e seleção
100
#D6E4FF
Fundo de etiqueta
200
#ADC9FF
Borda de campo em foco
300
#85ADFF
Estado desabilitado
400
#3D86F0
Hover sobre fundo escuro
500marca
#0066FF
Botão primário, link
600
#0052CC
Hover do botão primário
700
#003D99
Pressionado
800
#002966
Texto sobre Blue 50
Cyan
Destaques e dados. Escurece rápido: do 500 em diante já aceita texto branco.50
#E6FBFA
Fundo de destaque
100
#C2F5F3
Gráfico de fundo
200
#85EBE8
Marcador secundário
300
#47E0DC
Realce
400marca
#00D6D1
Fim do gradiente
500
#00B3AF
Ícone sobre claro
600
#00908B
Texto e séries de gráfico
700
#006D69
Texto sobre Cyan 50
800
#004A47
Fundo escuro alternativo
Neutros
Estrutura da interface: fundo, borda, texto secundário e texto principal.Branco
#FFFFFF
Cartão e campo
Cloudmarca
#F7F9FC
Fundo de página
Cinza 200
#E3E8F0
Borda e divisória
Cinza 400
#9AA6B8
Placeholder e ícone inativo
Cinza 600
#4A5768
Texto secundário
Navymarca
#07111F
Texto principal
Gradiente principal
Sempre de Blue para Cyan. Use em blocos, faixas e no símbolo — nunca atrás de texto pequeno.
#0066FF → #00D6D1
✓90° — horizontal
Padrão em faixas e blocos largos.
✓135° — diagonal
Para blocos altos e capas.
✕Invertido
A leitura é sempre de Blue para Cyan.
✕Radial
Só gradiente linear.
✕Com terceira cor
Duas cores, nunca três.
Texto de 11 px sobre o gradiente: some no meio do percurso.
✕Sobre texto pequeno
Texto abaixo de 18 px não sobrevive à variação de fundo.
- Sempre de Blue para Cyan, nesta ordem.
- Só em blocos, faixas e no símbolo — nunca em texto, ícone ou borda fina.
- Sobre o gradiente, o texto é branco e tem no mínimo 18 px.
- Em bloco alto use 135°; em faixa larga, 90°.
O que o processo está dizendo
Um sistema de licitação vive de estado. Estas cinco cores são funcionais, reservadas, e existem para que cada tela não invente o próprio vermelho.
- SucessoHomologado, habilitado, proposta aceitaO processo avançou como esperado.#0E7A54AA
- AtençãoPrazo próximo do fim, pendência de documentoExige ação de alguém antes de uma data.#B36B00AA grande
- ErroInabilitado, proposta recusada, lote desertoO processo parou ou foi negado.#C02626AA
- Em andamentoEm disputa, em análise, aguardando lanceAcontecendo agora; usa a cor de marca.#0066FFAA grande
- NeutroRascunho, cancelado pelo autor, arquivadoSem carga positiva nem negativa.#4A5768AA
Regras
- Cor nunca é o único indicador: todo estado leva rótulo e, quando couber, ícone.
- O verde de sucesso (#0E7A54) é funcional e não é o verde da FIVETECH (#33CC33) — não os troque.
- Estas cinco cores são reservadas: não use nenhuma delas como série de gráfico.
- Fundo claro para a etiqueta, cor cheia para o texto e o ícone.
Medido, não estimado
As razões abaixo são calculadas a partir dos próprios HEX da paleta pela fórmula da WCAG 2.1 — se uma cor mudar, o número muda junto.
Texto de exemplo
18,9:1
Branco sobre NavyAAA
Capas e rodapés.
Texto de exemplo
10,4:1
Cyan sobre NavyAAA
Rótulos e números de destaque.
Texto de exemplo
4,8:1
Branco sobre BlueAA
Botão primário.
Texto de exemplo
10,4:1
Navy sobre CyanAAA
Etiqueta de destaque.
Texto de exemplo
18,0:1
Navy sobre CloudAAA
Texto corrido padrão.
Texto de exemplo
7,0:1
Cinza 600 sobre CloudAA
Texto secundário.
Texto de exemplo
1,8:1
Branco sobre Cyanreprova
Proibido: some.
Texto de exemplo
3,9:1
Navy sobre BlueAA grande
Evite: só sobrevive em título grande.
Texto de exemplo
2,3:1
Cinza 400 sobre Cloudreprova
Só decorativo, nunca texto.
Texto corrido precisa de 4,5:1; texto a partir de 24 px, de 3:1. Um par marcado como “AA grande” só pode ser usado em título.
Gráficos, tabelas e indicadores
Cinco séries em ordem fixa, validadas para daltonismo e contraste nos fundos claro e escuro.
Ordem das séries
- 1Blue#0066FF#2E7AE6
- 2Âmbar#E0701A#CC7A2B
- 3Teal#00908B#1C9E99
- 4Índigo#6B4EFF#8370E6
- 5Magenta#D6216B#D6457A
Pior par vizinho: ΔE 13,2 em protanopia no claro e 13,7 no escuro — acima do alvo de 8. Contraste de todas as séries acima de 3:1 sobre o fundo.
Exemplo aplicado
Dados fictícios, só para demonstrar a paleta
Processos por modalidade
- Pregão eletrônico42%
- Dispensa28%
- Concorrência17%
- Inexigibilidade9%
- Credenciamento4%
Cinco categorias, cinco cores da ordem fixa, legenda sempre presente e um filete de 2 px separando os blocos. Séries de mesma natureza — como “processos” em um gráfico de barras simples — usam só a cor 1.
Magnitude — escala sequencial
Uma cor só, do claro ao escuro. Para mapa de calor, volume e intensidade.
Polaridade — escala divergente
Âmbar e Blue com cinza no meio. Para variação acima e abaixo de uma referência.
- Atribua as cores na ordem fixa acima, série por série. Nunca recicle a ordem nem gere uma sexta cor: a partir da sexta série, agrupe em “Outros” ou separe em gráficos menores.
- Magnitude usa a escala sequencial de uma cor só, do claro ao escuro — nunca arco-íris.
- Polaridade usa a escala divergente, com cinza no meio.
- O verde da FIVETECH não entra em gráfico do SIGNE, e as cores de estado não viram série.
- A cor nunca aparece sozinha: legenda sempre, rótulo direto quando couber e alternativa em tabela.
Como isso entra no código
Variáveis CSS
Pendências
- CMYK e Pantone das quatro cores principais, para impressão.
- Conferir se as escalas 50–800 batem com o que o produto já usa em código.
- Definir a paleta do tema escuro do produto (hoje o manual só cobre o claro).
- Confirmar as cores de estado com o time de produto antes de virarem norma.
E as cores da FIVETECH?
A paleta institucional da empresa vive na página da marca FIVETECH. O verde não entra em botão, ícone, gráfico ou gradiente do SIGNE.