Turma.

• school or course producer that already sells well and needs retention
• course sold by cohort, with live classes and assignment grading
• brand in navy, green or graphite
• operation with several instructors and simultaneous cohorts
• someone who reads the dashboard every morning, not once a month

• landing page (this is the internal dashboard)
• consumer app for the students themselves
• vibrant, neon or overly playful brand
• mandatory dark theme
• single recorded course with no cohort or grading

Tone

Identidade

• Fundo branco #ffffff; painéis também brancos com fio #e1e5eb. Sem sombra de card, sem gradiente, sem vidro. A única sombra é a do menu suspenso de turmas (ele flutua de verdade).
• Lateral azul-marinho --d-primary (#0e2c4e) de altura total. Texto dela em branco a 74%.
• Texto #101b2d; secundário #5c6675; terciário #6b7584 (--tm-sutil).
• Azul-marinho também é a cor de ação e de "bom": botão principal, período marcado, linha da turma atual no gráfico, barras de venda, variação positiva de KPI, aba de filtro marcada.
• Coral --d-accent (#c4402a, 5:1 sobre branco) aparece só em risco e atraso: aluno em risco, turma abaixo do ritmo, correção fora do prazo, dúvida além da meta de resposta, maior queda da curva, aula com menos de 50% assistindo até o fim, reembolso, variação ruim de KPI e sala de aula ao vivo com erro. Nunca decorativo.
• Fontes: Lexend (--font-lexend) em títulos, KPIs e rótulos de gráfico; Karla (--font-karla) em todo o resto. Número de tabela e de eixo sempre em Karla (.turma-num, algarismos tabulares; a Lexend não tem tnum). Escala fixa: título 24px, título de painel 15px, tabela 13px, apoio 12px.
• Cantos moderados: --d-radius: 6px, painéis 10px, etiquetas e avatares 4–5px.

Regras

• Hierarquia: KPIs do período > retenção por aula e aulas ao vivo de hoje > turmas ativas > risco e dúvidas > correções e certificados > vendas.
• Os números fecham e o que dá para derivar é calculado no Landing.tsx: alunos ativos, acesso na semana, risco, correções e dúvidas saem da soma das turmas; o progresso médio é ponderado por aluno; as bandas de módulo saem da curva (primeira e última aula do módulo); as maiores quedas são calculadas da curva; prazos de correção e espera das dúvidas saem do agora; situação da turma sai das datas; receita líquida, reembolsos e ticket médio saem da tabela por curso, que bate com o gráfico por dia (49 vendas, 5 reembolsos, 11 na garantia).
• Tabela: cabeçalho em faixa #f7f8fa com texto normal (sem caixa alta), coluna ordenada com seta e aria-sort, número à direita, total em tfoot, hover e foco da linha em fundo leve, ações da linha discretas até o hover, texto longo truncado com title, primeira coluna fixa na rolagem lateral do celular (.turma-fixa).
• Tabela e gráfico largos ficam em .turma-rola overflow-x-auto dentro de painel min-w-0. A .turma-rola é position: relative para prender os .sr-only (senão eles vazam e a página rola de lado). A página nunca rola de lado.
• Avatar: iniciais em quadrado cinza com fio de 1px. Sem cor por pessoa, sem aro.
• Ícones lucide size-4/size-3.5, traço 1.8, cor neutra; nunca em quadradinho colorido nem em KPI.
• Foco de teclado: anel de 2px azul-marinho em todo controle (branco dentro da lateral); a busca mostra o foco na borda do campo. Seleção de texto em azul-marinho.
• Animação: data-sobe no título e no boletim; data-revela nos painéis. A linha da curva se desenha uma vez, barras de progresso crescem da esquerda, colunas de venda sobem; esqueleto pulsa. Tudo para com prefers-reduced-motion.
• Celular: a lateral vira gaveta (popover nativo) aberta pelo botão de menu da barra de topo; o boletim fica em 2 colunas; gráficos e tabelas rolam dentro do painel.

Adaptar à marca do cliente

• Troque --d-primary pela cor da escola se ela for escura o bastante para texto branco (é a cor da lateral inteira, do botão e da linha do gráfico): azul, verde-petróleo, grafite, vinho escuro.
• Mantenha o coral só para risco e atraso; se a marca já for vermelha/laranja, troque o coral por um tom reservado (ex.: um magenta escuro) para não confundir marca com alerta.
• Marca clara ou vibrante demais para lateral cheia: use a marca só no logo e mantenha a lateral em azul-marinho ou grafite.
• Marca infantil/lúdica, ou exigência de tema escuro: este design não é o certo.