Duas perguntas do Michel, respondidas lado a lado: (1) como a esfera animada pode ficar moderna e conversar com a engrenagem da marca; (2) como tirar o peso do fundo quase preto do card, na Home e no quiz. Tudo aqui é CSS e SVG puro, sem biblioteca, sem canvas. Passe o olho e escolha - a implementação vai pra outra sessão.
O problema de hoje: a bolinha com varredura cônica é o desenho padrão de qualquer assistente de IA e não tem nenhuma relação com o anel de 12 dentes do nosso favicon. As três propostas partem da geometria literal do logo (raio 25, traço 11, passo 13,09 = 12 dentes exatos, núcleo 8,5).
Esfera com gradiente radial e um rastro cônico girando por fora. Bonita, mas genérica.
Zero conexão com a engrenagem: nenhum dente, nenhum passo, e o teal aparece como brilho de plástico, não como a moeda da marca.
Uma moeda teal com o anel de 12 dentes do logo em volta. Um dente tangerina anda de dente em dente com passo seco, e os dentes já vencidos ficam acesos em branco.
É o favicon inteiro: mesmo raio, mesmo traço, mesmos 12 dentes, mesmo núcleo. E o movimento não é giro liso de assistente, é passo de 30 graus - jeito de mecanismo, não de bolha.
O próprio ícone do app: o quadrado teal parado, com o anel de dentes girando devagar por dentro e um dente tangerina encaixado num soquete escuro dando a volta.
Parado, é o favicon pixel a pixel. É a marca em movimento, não uma prima dela. O ponto fraco é justamente esse: se o logo do topo estiver na mesma tela, dá briga de dois logos.
O anel de dentes fica parado, com um índice tangerina fixo no meio-dia, e só um ponteiro fino varre por dentro. Silencioso, quase parado.
A marca não gira: quem se move é a leitura. Lê como instrumento de precisão, que é a pegada fintech jovem-séria. O mais discreto e o mais barato dos três.
As três dobras abaixo são réplicas fiéis da Home, com o card branco vizinho junto - é ele que faz o contraste doer. O card da IA precisa continuar sendo o dominante da dobra, só que sem o paredão quase preto.
No app o painel é maior e fica ao lado das perguntas o tempo todo, então o peso do escuro cansa mais. Réplica dos três estados.
Recalculadas sobre o fundo já composto com o banho de tangerina, e conferidas por um segundo revisor. Só entram os pares que mudam.
| Par | Fundo 1 (visor) | Fundo 2 (bloco) | Veredito |
|---|---|---|---|
| Título do card | 14,77 | 5,97 no pior pixel | AA nos dois |
| Texto de apoio | 7,43 | 4,81 | AA nos dois |
| Letrinha miúda | 5,15 | 4,81 | AA nos dois |
| Pastilha lemon do "aí" | 11,83 dentro do visor | 5,40 | passa nos dois |
| Pastilha lemon fora do visor | 1,07 | - | por isso o visor existe |
| Botão tangerina como bloco | 1,46 + anel de tinta | 3,47 | passa com o ajuste |
| Campo teal da esfera | 6,77 | 5,44 dentro do poço | a esfera não some |
| Cores que precisam sair junto | #587570, #A8700E e #9E5F00 em texto pequeno; #cfe0dc, #9fbdb7 e #7f9995 sobre o teal | reprovam | |