Design System v1.0 · o método RAID em forma de jogo
Princípios
Cada decisão visual responde a um pilar do método. Quando houver dúvida, volte aqui.
Divertido, nunca ansioso
Cores vivas, cantos redondos, botões que afundam. Nada de cronômetro, sirene ou tela vermelha.
Honesto no sinal
A comemoração cresce com o ganho real. Erro nunca recebe festa; acerto pequeno nunca vira fogos.
Legível sempre
Estado de domínio, regras e próxima revisão ficam à vista. Contraste alto no que importa.
Prêmio anunciado
Todo ganho aparece antes da partida no bilhete. Sem sorteio, sem baú surpresa, sem moeda.
Partida com fim
A tela final muda de clima, a Capi vai dormir e não existe botão "só mais uma".
O ganho é do aluno
A única unidade é o domínio do tópico. Nada de XP, gemas ou ranking contra outros.
Logo
Ícone da Capi + wordmark em Fredoka SemiBold vetorizada, minúsculo, com o pingo do "i" no formato da cabeça da Capi. Detalhes na página da marca.
Capi, a mascote
Capivara calma, que nunca pressiona. Veste uma roupa por matéria (veja o guarda-roupa). Ela reage ao que aconteceu de verdade: nunca finge alegria sobre um erro e nunca some quando você erra. Modelada em 3D no Blender (8 roupas × 6 expressões). Use capi3d({expr, roupa, size}) em capi.js; a versão 2D capi() continua como fallback leve.
Voz e tom
A Capi fala como um colega do 3º ano que já passou no vestibular: informal, direto, gentil. Fala do conteúdo, nunca de você ("você é burro", "você é gênio").
| Momento | Escreva | Evite | Por quê |
|---|---|---|---|
| Acerto | "Capiscou! AA e Aa têm a mesma cara." | "Você é um gênio!!!" | Feedback sobre a tarefa, não sobre a pessoa (Hattie e Timperley) |
| Quase | "Quase! Faltou um passo: fenótipo, não genótipo." | "Errado." | O "quase" precisa apontar o que faltou |
| Erro | "Ainda não. Olha esse trecho da apostila." | "Que pena! Você perdeu uma vida 💔" | Erro recebe sinal neutro e uma pista |
| Notificação | "Heredogramas está quase escapando da memória. 3 min resolvem." | "ÚLTIMA CHANCE! Sua ofensiva vai acabar!" | Urgência verdadeira, não inventada |
| Fim | "Pronto por hoje. Te vejo sexta pra revisar." | "Só mais uma fase?" | A partida acaba de verdade |
Cores
Duas cores de marca: Rio (água onde a capivara vive: progresso e ação) e Tangerina (conquista). Neutros puxados para o caramelo. As cores de estado sempre vêm acompanhadas de forma ou ícone.
Tipografia
Baloo 2 para marca, títulos e botões (redonda e amigável). Nunito para perguntas e texto (legível em tela pequena). JetBrains Mono para números, datas e regras do sistema.
Espaço e forma
Grade de 4px. Tudo que é tocável tem profundidade: uma borda inferior sólida de 4px que some quando pressionado. Superfícies de leitura ficam planas.
r-sm 10 · r-md 14 · r-lg 20 · r-xl 28 · pill
Botões e alternativas: r-md. Cards: r-lg. Telas e painéis: r-xl.
Movimento e som
Regra única e verificável: a intensidade do retorno é proporcional ao ganho real de domínio. É a inversão direta das "perdas disfarçadas de ganho" das bets.
| Nível | Evento | Visual | Som | Capi | |
|---|---|---|---|---|---|
| 0 | Erro | Faixa neutra cinza, sem tremor | 1 nota grave e curta, volume baixo | pensando | |
| 1 | Quase | Faixa sol, etapas ✓/? | 2 notas neutras | quase | |
| 2 | Acerto | Faixa rio + pop | 1 nota aguda | feliz | |
| 3 | Subiu de caixa | Caixa preenche com bounce | 2 notas subindo | feliz | |
| 4 | Rodada concluída | Faixa tangerina + confete | Arpejo de 4 notas | comemora | |
| 5 | Fim da partida | Fundo muda, trilha para | Silêncio | dormindo |
Durações: t-fast 120ms para toque, t-med 260ms para aparecer, t-slow 600ms para celebração. Com prefers-reduced-motion, tudo fica estático.
Botões
Classe .cp-btn. Um botão primário por tela. Tangerina só para conquista (resgatar prêmio do bilhete). Clique para sentir o afundar.
Pergunta e alternativas
.cp-opt com role="radio". A tela de pergunta tem só 4 coisas: barra de progresso, enunciado, alternativas e botão. Sem timer, sem pontos.
Aa × Aa. Qual a proporção esperada de fenótipos?
Retorno
Três camadas, de cima para baixo: verificação (faixa), elaboração (etapas + fonte) e regulação (o que fazer agora).
AA e Aa têm a mesma aparência, por isso fica 3 : 1.
Você separou os alelos certo. Faltou lembrar que a pergunta era de fenótipo.
Essa é a proporção do cruzamento-teste. Veja o trecho abaixo.
Nós do mapa
.cp-node. Cada estado tem cor e ícone próprio, para funcionar com daltonismo. O chefão (.boss) é o simulado do capítulo.
Consolidado
Vencido
Revisar hoje
Em prática
Novo
Bloqueado
Chefão
Bilhete da partida
.cp-ticket. O "bilhete de aposta" virado do avesso: o prêmio é certo e aparece antes de jogar.
Progresso e constância
Barra de rodada, caixas de domínio (Leitner) e calendário de 14 dias. O calendário nunca zera: é registro, não ameaça.
Formulários
Usados na evocação livre ("escreva de memória") e nas configurações.
Telas do jogo
As quatro telas do laço, montadas só com os componentes acima.
Bora fechar Genética?
Aa × Aa. Qual a proporção de fenótipos?
Pronto por hoje.
2 tópicos subiram de caixa · 7 min
Anti-padrões proibidos
Estes elementos não entram no Capisco, nem "só para testar". Cada um viola uma linha do Quadro 1 do TCC.