Geometria precisaContorno quadrado, chanfros e espaçamentos uniformes.
Destaque quenteLaranja em uma pequena parte da tela, apenas para o principal.
Movimento compreensívelUma ação — uma mudança breve.
02
Personalidade da marca
Precisão tecnológica, superfícies tranquilas e um único destaque quente. Abaixo estão os princípios de estilo observáveis, não uma interpretação do símbolo.
GeometriaUm contorno quadrado com cantos arredondados: um espaço e um limite de acesso.
MateriaisGrafite fosco e uma única borda âmbar.
Uma só redeTexto explicativo sóbrio
TipografiaUma palavra grande e clara com uma explicação discreta.
MovimentoCausa → mudança → resultado.
03
Logotipo
Composição atual do site: símbolo e nome NODQ. O arquivo vetorial aprovado ainda não foi publicado, por isso o download do logo não está disponível.
NODQ
Composição principal · símbolo + NODQSímbolo · o status de ativo independente não foi aprovadoTamanhos pequenos · 32 / 24 / 16 px — verificação de legibilidade
O quadriculado é apenas o fundo da prévia. As versões monocromáticas e o favicon não são mostrados: não há arquivos originais.
Área de proteção
NODQ
Proposta, não um padrão vigente: x = ¼ da altura do símbolo, área livre ≥ 1x em todos os lados.
Tamanho mínimoCandidatos para verificação: composição a partir de 120 px de largura, símbolo a partir de 24 px. O favicon 16/32/48 px é um recurso separado e precisa ser verificado.Proposta · requer aprovação
Não fazer assim
NODQ
✕ Não esticar
NODQ
✕ Não girar
NODQ
✕ Não alterar as cores
NODQ
✕ Sem sombras alheias
O objeto tridimensional da página inicial é um recurso decorativo; onde é necessário um símbolo reproduzível, usa-se o logo plano.
04
Cores
Os valores correspondem aos tokens do site e aos arquivos nodq-tokens.css / .json.
Laranja NODQDestaque principal e CTA#F7931A · RGB 247, 147, 26
InkTexto escuro e inscrição sobre laranja#121613 · RGB 18, 22, 19
CTA ao passar o cursor#FFAA33
CTA pressionado#E3810C
Reflexo (gráfico)#FFBD59
Face em sombra (gráfico)#D96800
Texto secundário · tema escuro#B6BCB7
Texto secundário · tema claro#59625B
Link · tema claro#9A4A00
Sucesso#8DD6AB / #166B40
Aviso#FFD08A / #875000
Erro#FF9B92 / #B7342A
Destaque / selecionado✓ Sucesso! Aviso✕ ErroTexto principal · secundário · linkFoco do teclado
Contraste dos pares: #121613 sobre #F7931A ≈ 7,95:1 · #F5F4F0 sobre #0A0C0B ≈ 17,8:1 · #9A4A00 sobre #F5F4F0 ≈ 5,7:1. Não se usa texto branco pequeno sobre laranja. Os valores CMYK/Pantone não foram publicados.
05
Tipografia
Onest 400/500/600/700 e JetBrains Mono para endereços e legendas. Os valores correspondem aos estilos reais do site.
Aa Bb 0123Onest · 400 / 500 / 600 / 700 · cirílico e latinoNormalMédioSeminegritoNegrito
Não misturar conjuntos lineares, preenchidos e tridimensionais.
Espaço
Agente
Poder concedido
Liquidação
09
Movimento
Um exemplo por vez. Curva cubic-bezier(0.2, 0.8, 0.2, 1). Se a redução de movimento estiver ativada no sistema, o quadro final será mostrado.
Botão / aba180 ms · passar o cursor, seleção
Mudança de estado350 ms · novo status
Percurso da marca1000 ms · uma ação
Sem identidade visual em arco-íris, cursor personalizado, controle forçado da rolagem, títulos digitados letra a letra ou animações de valores aleatórios.