6.8/10
UEMA 2023 · A literatura de ficção é fonte para entendimento da realidade?
Tokens
As cores da Educt continuam, só que chapadas. Violeta e azul levam texto branco; as outras levam texto em tinta. Tinta nunca vai sobre cor escura. Assim todas passam no contraste AA.
Tinta
#1A1C27 · surface.foregroundTexto, bordas e sombras. A única cor escura do sistema.15,8
Papel
#FFF5EE · novoFundo das telas. Alternativas no painel: lavanda e branco.5,3
Violeta
#7A4BE6 · primary novoAção principal, C2, marca. Texto por cima em branco.5,1
Azul
#2F66E0 · blue.500Ação secundária, turmas, C3. Texto por cima em branco.Azul da marca
#5B8DF5 · blue.400Listra da marca, logo, foco e barras. Sem texto por cima.6,1
Coral
#FF6B57 · coral.400Destaque, sequência, C5. Mantido.13,0
Marca-texto
#FFE066 · novoAba ativa, seleção, XP, adesivos.9,9
Âmbar
#FFB930 · warningAtenção, pendente, C4.7,6
Menta
#34C759 · successCorrigida, concluído, C1.4,5
Vermelho
#EF4444 · destructiveErro e exclusão. Sublinhado ondulado na redação.Grafite
#5E6280 · novoTexto de apoio. 5,5:1 sobre papel (o atual dá 4,9 no branco).O número no canto de cada cor é o contraste com o texto que vai por cima: tinta, ou branco no violeta e no azul. Tudo passa no AA (4,5:1). Clique numa cor para copiar o token.
Tipografia
Display · 92 / títulos
Bricolage Grotesque 800960/1000
Bricolage Grotesque 800960/1000
Título · 32 / 26 / 19Critérios de avaliação
Citação · Literata itálico“desperdiça cerca de 30% de tudo que produz”
Acento · Instrument Serif itálicoCronista
Corpo · Inter 15 / 1,55O Brasil ocupa uma posição paradoxal no cenário mundial: é um dos maiores produtores agrícolas do planeta e, ao mesmo tempo, desperdiça boa parte do que produz.
Rótulo · JetBrains Mono 700Trecho selecionado · Nota 200/200 · 09 jun
Inter continua no texto corrido e na interface. Trechos citados da redação usam Literata itálico, feita para leitura em tela. A Instrument Serif fica para nomes e estados vazios, nunca em botões.
Forma
Borda · tinta
1,5 · professor
2 · padrão
3 · aparelho
Sombra · dura, sem desfoque
0 · leitura
2 · padrão
4 · destaque
8 · palco
Raio · reto
3 · cartão, campo, botão
pílula · chip
círculo · avatar
O que muda no ds-tokens
| Token | Hoje | Neo |
|---|---|---|
| Borda | 1px rgba(155,106,240,.12) | 2px #1A1C27 em tudo que é objeto |
| Sombra | Difusa, só no card elevado | 2px 2px 0 tinta em tudo que se aperta ou flutua |
| Hover / clique | Sobe 3px e cresce 2% | Parado no hover; no clique afunda três quartos da sombra (1,5px) em 80 ms |
| Texto sobre cor | Branco (3,7 no violeta, 2,2 no verde) | Tinta (6,1 a 13:1); branco no violeta (5,3:1) e no azul (5,1:1) |
| Gradiente | Escuro, 4 cores fora da paleta | Listra tricolor chapada: azul, violeta, coral |
| Fundo | #FFFFFF | Papel #FFF5EE; cartões brancos |
| Desabilitado | Opacidade 40% | Contorno tracejado, sem sombra, texto grafite |
| Foco | Anel azul a 10% | A sombra do campo vira violeta |
| Cinzas soltos | #D1D5DB, #6B7280, #F3F4F6… | Saem. Só tinta, grafite e papel |
Componentes
Clique nos botões para sentir o “afundar”. Tudo aqui segue o painel lá de cima.
Botõesreto · tinta
Etiquetasstatus · modelo
+40 vs. anteriorNota máxima
Marca-textouma cor por competência
a norma culta, o repertório, o argumento, os conectivos e a proposta de intervenção. Erros pontuais ganham sublinhado.
C1C2C3C4C5sublinhado = trecho aberto
Camposraio 3 · foco violeta
Todos os modelos
Abas e filtrosseleção = marca-texto
Janelabarra de título retrô
3º ano B · Prof. Marina
Redações enviadas na turma não contam no seu limite mensal.
Estado vaziotracejado
Nenhum repertório esperando organização.
Progressobarra · níveis
ENEM554/1000
ENEM · critério 5160/200
UEMA · critério 50.8/2
O medidor tem uma marca a cada 20% e funciona em qualquer escala de nota.
Avisoscor + ícone
Redações enviadas dentro de uma turma não contam no seu limite mensal.
Redação enviada. A correção chega em até 2 minutos.
Código de turma inválido. Confira com seu professor.
Navegaçãoclique numa aba · traço em 120ms
Feedback e estados
Como o app avisa, confirma e espera. Erro nunca é só cor: sempre vem com ícone e uma frase que diz o que fazer.
Campos · validaçãoa sombra muda de cor
Texto de ajuda, quando precisar.
Faltou um número. O código tem 5 dígitos depois do traço.
Código válido.
Campo bloqueado: diga por quê.
320 / 300 caracteres
Passou do limite. Corte 20 caracteres.
Toast · some em 4 sacima da barra de abas
Alterações salvas.
Não deu para salvar.Verifique a conexão.
Salvo no caderno.
Banner · topo da telafica até resolver
Diálogosó para o que não volta
Excluir este item?
Diga o que se perde junto. Isso não dá para desfazer.
Notificaçõesbolinha coral = nova
Notificações
Hoje
Título da notificaçãoTexto de apoio em uma ou duas linhas.há 4 min
Nova, não lidaA bolinha coral marca o que ainda não foi visto.há 1 h
Esta semana
Já lidaO texto de apoio fica grafite.seg
Já lidaO ícone indica o tipo; a cor vem da paleta.dom
Carregandomostre a forma, não um giro
Loader da marca, para esperas curtas
Corrigindo · ENEMdemo acelerada · ~1 min no app
- Checagem de nota zero4 verificaçõesokFuga ao temaTipo textualMais de 7 linhasCópia dos textos motivadores
- Competência 1Norma culta160/200
- Competência 2Tema e repertório160/200
- Competência 3Argumentação120/200
- Competência 4Coesão160/200
- Competência 5Proposta de intervenção160/200
Sua nota
0/1000
A espera vira leitura: o aluno vê o que está sendo avaliado, na mesma ordem e com as mesmas cores da tela de nota.
- Nota zero primeiro. As verificações eliminatórias passam uma a uma. Se alguma falhar, a correção para ali e mostra o motivo.
- Uma competência por vez. A atual fica amarela; ao terminar, o quadrado ganha a cor da competência e a nota de 0 a 200 aparece com um pulo.
- Corrigida. A barra vira verde, a nota total conta até o valor final e o adesivo carimba o cartão. Os quadrados pulam em sequência.
Com movimento reduzido, cada etapa troca de estado sem animação e a nota aparece direto.
Seleçãomarcado = violeta · área de toque 44px
Switch
Tooltip
Soma dos 5 critérios
Só para explicar, nunca para esconder ação.
Formulários
Toda linha clicável tem 44px de altura, e o que está aberto ganha a sombra violeta do foco.
Selectclique para abrir
Modelo de correção
Menu de açõesdestrutivo por último
Item da lista
Senhamostrar · requisitos ao vivo
- 8 caracteres ou mais
- Pelo menos um número
- Uma letra maiúscula
Upload de arquivovazio · enviando · pronto · erro
arquivo.jpgEnviando · 64%
arquivo.jpg2,4 MB
foto-grande.png14 MB
Regras
O que segura o estilo no lugar quando a tela fica cheia.
- Violeta e azul levam branco; o resto, tinta
Coral, verde, âmbar e amarelo levam tinta. Violeta e azul levam texto e ícone brancos. Tinta nunca vai sobre cor escura, e branco nunca vai sobre cor clara: é isso que faz todas passarem no contraste.
- Sombra quer dizer “aperte”
Botões, atalhos, opções e janelas flutuantes têm sombra. Texto de leitura, como a redação e listas de critérios, fica sem.
- Uma cor forte por bloco
Cada cartão escolhe uma cor de destaque. O resto é papel, branco e tinta.
- Cor do critério é fixa por posição
1 menta, 2 violeta, 3 azul, 4 âmbar, 5 coral, em qualquer modelo (ENEM, UEMA…). O app usa vermelho no 5; aqui é coral para não confundir com erro.
- O gradiente vira listra
A assinatura azul → violeta → coral aparece em blocos chapados, no logo e na barra da nota. Sem degradê.
- Brincadeira com hora marcada
Adesivos tortos, marca-texto e serifa itálica aparecem em momentos de conquista e leitura, não em formulários.
Logo
Cinco caminhos para a marca, todos com azul, violeta e coral. Os quatro primeiros puxam a sombra na diagonal, como no pôster neobrutalista. O quinto usa as barras inclinadas da outra referência. Selecionadas por enquanto: D para a logo e o ícone de três camadas em fundo branco, já aplicados nas telas do app. As cores seguem o seletor Roxo do painel.
Selo PRO
O PRO fica chapado, sem a sombra colorida, para não repetir a logo ao lado. Cada opção aparece junto da logo, como no cabeçalho do app, e ao lado do nome, como no Perfil.