Design System
Identidade visual Brasil Almanaque Digital e regras de cores semânticas.
1. Camada Semântica de Cores
--background#FFFDF2--paper#F6E7B8--surface#FFF8E8--surface-strong#F9F1D2--brand-primary#0B6B3A--brand-secondary#0F172A--brand-accent#FACC15--action-primary#FACC15--action-secondary#0B6B3A--success#16A34A--warning#F2B705--danger#E539352. Tipografia
H1. Título Gigante
H2. Título de Seção
H3. Subtítulo
Texto corrido de exemplo para verificar legibilidade em telas móveis e desktop. O design do almanaque digital prioriza conforto de leitura sob o fundo quente.
Texto secundário ou descrição menor para rotulagem de formulários ou notas explicativas no rodapé.
Uso semântico das cores
Exemplos reais aplicados de acordo com os guias de significado visual.
Palpitar no Jogo
Vinicius Jr
AtacantePelé
Rei do FutebolAtualização de Regrasinfo
Os palpites para cada partida podem ser alterados até 30 minutos antes do início do jogo.
Pacote Lendário
Abra seu primeiro pacotinho
Uma prévia do álbum digital do Paixão pela Copa. No lançamento, você poderá ganhar figurinhas com quizzes, palpites e desafios.
5. Novos Componentes Mobile First & Microinterações
Componentes adicionados para estruturar a navegação, abas, rankings e as microinterações de clique e foco do app.
Estados de Botões & Cards Interativos
Card Clicável Padrão
Hover sutil com translação e foco nítido ao navegar via teclado (Tab).
Card Clicável Retro 3D
Efeito tridimensional retro clássico que se move e afunda no clique/pressionamento.
Tabs & IconButtons
Estas abas usam estado React controlado de forma responsiva. Elas adaptam-se dinamicamente ao tamanho da tela e contam com transições elegantes de fade-in.
Bolão dos Amigos
Crie seu grupo privado de palpites, convide amigos e dispute quem entende mais de futebol com medalhas exclusivas.
Ranking do Bolão
6. Estados de Interface e UX
Padrões visuais recomendados para informar e orientar o torcedor sobre o andamento do sistema.
Loading & Skeletons
Buscando placares da rodada...
Você ainda não tem figurinhas
Abra seu primeiro pacotinho demo e veja como o álbum digital vai funcionar.
Nenhum palpite feito ainda
Escolha um jogo e marque seu placar para sentir como será participar dos bolões.
Não foi possível carregar agora
Verifique sua conexão e tente novamente em alguns instantes.
Palpite salvo!
No lançamento, seus palpites poderão render pontos, posição no ranking e figurinhas especiais.
Bolão dos TorcedoresEM BREVE
O bolão completo por grupos e ligas públicas com premiações clássicas de rankings.
7. Preview Mobile Simulado
Simulação da experiência 'app-like' em telas móveis com barra de navegação e cabeçalho compactos.
Bolão Ativo
Seu palpite para Brasil vs Suíça foi salvo com sucesso!
8. Preview Desktop Simulado
Simulação da interface e grid de layouts para monitores e telas maiores.
Copa do Mundo
- Jogos Realizados12 / 64
- Seus Palpites8 feito(s)
- Sua Coleção15 figurinhas
O Rei Pelé é o único jogador a vencer 3 Copas do Mundo como jogador.
Conquistas icônicas de 1958, 1962 e 1970 eternizadas no Almanaque.
Tabelinha do MVP
Você pode acompanhar a tabela interativa do Grupo A e simular palpites instantâneos diretamente da Home.
Você está à frente de 82% dos torcedores participantes.
9. Motion e Microinterações (Framer Motion)
Biblioteca unificada para transições aceleradas por hardware, toques táteis e revelação sequencial de elementos.
Respostas Táteis de Toque & Clique
BRASIL
TAÇA 2026
Barra de Progresso do Álbum
Montagem Condicional com AnimatePresence
Stagger Sequencial (Revelação de Cromos)
Clique em "Reiniciar Revelação" para visualizar o stagger.