Pular para o conteúdo principal

Status: Approved · v3 · SPEC-UX-VISUAL-001

depends_on: SPEC-BRAND-001, SPEC-UX-TOKENS-001

used_by: IS-MVP-01.1, IS-MVP-15.3, IS-MVP-17.1, IS-MVP-17.2, IS-MVP-17.3, IS-MVP-17.4, IS-MVP-19.2

Linguagem visual v3 — Raiz e Neutro

Futebol raiz com acabamento profissional: noite, tensão de jogo, informação confiável e protagonismo local.

1. Direção canônica​

O redesign v3 mantém a linguagem adulta, editorial e esportiva de Noite de Holofote, mas separa identidade (Raiz | Neutro) de luminosidade (dark | light). O default para quem não possui preferência é Neutro Dark. Usuários com preferência v2 migram para Raiz Dark/Light, preservando a experiência existente.

Preferência v3 inválida, valor legado desconhecido ou storage corrompido é tratado como ausência e usa Neutro Dark, sem registrar o valor bruto e sem sobrescrevê-lo até uma escolha válida. O parser aceita somente o shape e os enums definidos por ADR-015.

Identidade muda primary, seleção, foco e marcas themable; luminosidade muda canvas, surfaces, texto e bordas. Nenhuma combinação altera conteúdo, hierarquia, disponibilidade, permissão ou estado esportivo. ADR-015 governa persistência e compatibilidade.

Esta edição substitui a direção visual anterior de ADR-005; a decisão de marca, o símbolo e o protagonismo do futebol de bairro permanecem válidos. A decisão completa está em ADR-013.

2. Referências canônicas​

Em ordem de autoridade para decisões visuais:

  1. design/RaizFC Book.dc.html — fundamentos, capítulos e catálogo de componentes;
  2. design/RaizFC Prototipo.dc.html — 16 telas mobile e fluxos operacionais;
  3. design/RaizFC Web.dc.html — 7 telas web;
  4. design/RaizFC Cards.dc.html — 10 composições compartilháveis e regras de geração;
  5. assets/new_brand/ — assets oficiais, laranjas #EA580C/#FB923C e fontes Bebas Neue + Inter.

Specs de domínio, contratos e permissões continuam governando comportamento. Quando um protótipo encurtar ou simplificar uma regra funcional, a interface se adapta ao domínio; o HTML não cria uma exceção de produto.

3. Princípios visuais​

  1. Dark-first, não dark-only: Neutro Dark é o default sem preferência; todas as identidades oferecem equivalência semântica, de conteúdo e de contraste em dark/light.
  2. Placar e estado juntos: placar, relógio/contexto e validação formam uma unidade. Aguardando validação, Validada, Contestada ou Provisório nunca ficam relegados ao rodapé.
  3. Entidade protagonista: escudo, foto, nome e território aparecem antes da assinatura RaizFC. Hero público de time/torcida e card de entidade podem herdar a cor da entidade quando o contraste for seguro.
  4. Primary por identidade: #EA580C é ação no modo Raiz; o modo Neutro usa primary neutro. Verde é feedback de sucesso/vitória, nunca identidade da plataforma.
  5. Hierarquia editorial: seções, listas e dados esportivos substituem grades genéricas de boxes coloridos.
  6. Expressividade controlada: glow, textura e fotografia criam atmosfera em hero, placar e arte compartilhável; formulários, tabelas e extratos permanecem documentais.

4. Modos de identidade e luminosidade​

Os quatro modos obrigatórios são Raiz Dark, Raiz Light, Neutro Dark e Neutro Light. O seletor real pertence ao Onboarding/Perfil; controles dev do snapshot nunca são UI de produção.

Noite de Holofote​

Base de luminosidade dark para as identidades Raiz e Neutro. Usa background #111111, surface #1B1816 e surface-alt #2A2420. O glow é difuso e localizado; não pode comprometer texto ou parecer neon/bet. Cards e divisores continuam perceptíveis por borda, contraste de superfície e espaço, não por sombras excessivas.

Editorial Terrão​

Alternativa clara com background #FBF7ED, surface #FFFFFF e surface-alt #F3E7CE. Mantém calor e identidade, mas não vira bege monocromático. A troca de tema não altera hierarquia, ordem, copy, disponibilidade de ação nem estado esportivo.

O provider de tema deve iniciar em neutral/dark quando não houver preferência, respeitar a escolha persistida e evitar flash do tema incorreto. Preferência do sistema não substitui esse default; qualquer adoção futura exige nova decisão canônica.

Identidade Raiz​

Usa #EA580C como primary nos dois níveis de luminosidade. É a migração compatível para preferências v2 e mantém a expressão de ADR-013.

Identidade Neutro​

Não usa laranja como cor genérica de ação: primary é #E8E4DC no dark e #2A2520 no light. O logo oficial permanece intacto e pode conter seus laranjas; escudos e cores de entidades não são recoloridos.

5. Tipografia​

  • Bebas Neue: somente placares, números de estatísticas e títulos de impacto. Pode usar caixa alta e tracking curto. Nunca em texto corrido, label, helper, formulário, tabela ou ação.
  • Inter: toda interface, navegação, texto, metadata, feedback e formulário.
  • Fallback: a ausência temporária da fonte não pode esconder conteúdo, mudar estado ou cortar dados; a implementação deve reservar métricas e validar o carregamento.

Escala e valores estão em SPEC-UX-TOKENS-001.

6. Identidade de entidade​

Páginas públicas e cards de time/torcida podem usar a cor oficial da entidade no hero. A cor entra como fundo, faixa ou glow controlado, sempre atrás de uma camada de contraste. O escudo não é recolorido e fica acima da marca da plataforma. Quando a entidade não tem cor válida ou o contraste falha, usa-se Noite de Holofote.

Placeholders usam iniciais ou geometria neutra. Não se inventa escudo, cor oficial, foto, título ou estatística.

7. Linguagem por contexto​

Páginas públicas​

Hero de entidade, território e estado abre a narrativa; jogos, forma, ranking e conteúdo seguem em seções editoriais. Toda rota pública deve fornecer og:image coerente com a mesma identidade e snapshot público.

Gestão e formulários​

Clareza precede espetáculo. Labels persistem, ações têm prioridade inequívoca, pendências mostram contexto, prazo, responsável e próxima ação. Bebas não entra em campos ou instruções. Textura fica restrita a cabeçalhos compactos e previews.

Partidas e súmula​

Placar, participantes e status dominam. O fluxo de validação deve refletir SPEC-DOMAIN-MATCH-001: aguardando validação pode seguir para validada ou contestada; contestação segue para mediação/resolução pela autoridade. O prazo canônico permanece 72h para partidas elegíveis; a UI lê esse valor do domínio e não mantém duração local concorrente.

Feed e rankings​

Resultado, jogo marcado, ranking, campanha e publicação oficial têm composições próprias. Provisório e contestado são explícitos. Uma classificação nunca parece definitiva quando o domínio não a consolidou.

Financeiro​

Visual neutro, transparente e documental. Saldo, Pix, apoio e taxa não usam brilho promocional, moedas, odds, prêmio ou promessa de retorno.

Cards compartilháveis​

Mais expressivos que a UI, mas controlados. Fundo Noite de Holofote é o fallback; cards de time/torcida herdam a identidade da entidade. Assinatura e URL pública fecham a peça. Regras completas estão em SPEC-UX-SHARE-VISUAL-001.

8. Composição, textura e imagem​

  • grid e alinhamentos são fortes; assimetria fica em hero/cards, não em formulários;
  • cards comuns usam radius moderado e borda; não existe uma cor aleatória por função;
  • poeira, ruído de impressão, linha gasta e glow podem aparecer com baixa opacidade em hero, splash, cards e empty especial;
  • textura é proibida atrás de texto pequeno, tabelas, ledgers e formulários longos;
  • fotografia prioriza cenas autênticas e dignas do futebol local, com consentimento e finalidade;
  • ícones são lineares, consistentes e têm rótulo acessível quando a ação não for óbvia.

9. Motion e estados​

Feedback usa press, fade, slide discreto, skeleton e progress em aproximadamente 120–240 ms. prefers-reduced-motion/configuração equivalente elimina shimmer e transição decorativa. Resultado, aniversário ou título não dispara confete automaticamente.

Loading, empty e erro seguem SPEC-UX-STATES-001: skeleton espelha a tela final; vazio explica e oferece ação; falha parcial preserva conteúdo seguro; erro documental informa recuperação e requestId quando aplicável.

10. O que evitar​

  • interface light-first ou tema escuro tratado como exceção;
  • grandes cards arredondados com cor distinta por função;
  • Bebas em texto corrido ou formulário;
  • status de validação longe do placar;
  • logo RaizFC competindo com escudo/foto da entidade;
  • gradiente neon, odds, moedas, confete ou linguagem de cassino;
  • dashboard corporativo sem identidade ou flyer poluído em tela operacional;
  • tempo real, campeão, ranking ou resultado definitivo simulados sem suporte do domínio;
  • texto genérico como “Nada por aqui!” ou “Operação realizada com sucesso”.

11. Critérios de aceite​

  • Os quatro modos são equivalentes e persistidos; ausência ou valor inválido inicia em Neutro Dark e preferência v2 reconhecida migra para Raiz com a mesma luminosidade.
  • Todos os valores de cor vêm dos tokens semânticos canônicos; nenhum componente depende do nome de uma cor física.
  • Bebas Neue aparece somente em placar, número de stat e título de impacto; Inter cobre o restante.
  • Hero público de time/torcida respeita cor, escudo e contraste da entidade; RaizFC permanece assinatura.
  • Status esportivo e de validação é textual, acessível e visível junto do dado que qualifica.
  • Layouts mantêm paridade de intenção com os protótipos mobile/web nos quatro modos, sem contrariar domínio ou permissão.
  • Estados loading/empty/error mantêm a hierarquia e a recuperação definidas no Book, capítulo 13.
  • Toda rota pública possui estratégia de og:image; todo card exportável inclui assinatura e URL.
  • O resultado parece mídia esportiva adulta e profissional, nunca bet, jogo infantil ou flyer improvisado.

12. Histórico​

  • 3.0 — separa identidade Raiz/Neutro de luminosidade dark/light, adota Neutro Dark para novas preferências e preserva migração v2 conforme ADR-015.
  • 2.2 — absorve Design Direction v1.0 “Noite de Holofote” e substitui a direção visual anterior.
  • 2.1 — direção terrão light-first e regras editoriais anteriores, preservadas no histórico Git.