Sistema de design

Tipografia

Lufga · 5 pesos

Cor primária

#00DE87

Temas

Escuro + claro

Base de espaço

4 px

Raio de card

24 a 32 px

Seções

07

Assinatura verbal

Transforme seu progresso em aprovação.

Paleta núcleo

50
#E9FCF3

100
#BDF6DC

300
#6EEBB6

500 · base
#00DE87

600 · texto
#00A868

700
#00794C

900
#042E1F

000
#FFFFFF

050
#F1F1F3

150
#E4E4E8

300
#C9C9D1

500
#8A8A92

700
#55555C

850
#262628

900
#1C1C1E

950
#131313

Grafite sobre verde

Contraste 8.9:1, combinação padrão para botões e cards de destaque.

Verde sobre grafite

Contraste 9.6:1, títulos, números e destaques no tema escuro.

Verde 700 sobre papel

No tema claro, texto verde usa 600/700. Nunca #00DE87 em corpo de texto.

Aa

Light 300

Números display grandes

Aa

Regular 400

Corpo de texto

Aa

Medium 500

Rótulos, navegação

Aa

SemiBold 600

Botões, títulos de card

Aa

Bold 700

Headlines

Escala de espaço · base 4

Raio de canto

Cantos generosos são a assinatura do sistema. Nada de raio menor que 8 fora de gráficos.

Elevação

No tema escuro a hierarquia vem da superfície (#131313 → #1C1C1E → #262628), não da sombra.

Tema claro

Tema escuro

Tema claro

Tema escuro

Tema claro

Tema escuro

Tema claro

Tema escuro

Horas estudadas

Sequência ativa

Questões por matéria

Ranking da turma

Constância semanal

Horas por dia

Evolução do acerto

Últimos 6 simulados

Finalizar simulado?

Você respondeu 48 de 60 questões. As 12 restantes serão contadas como erro.

Como a Aprovato fala

Direta, no "você", sempre apontando o próximo passo. Nada de motivação vazia, o dado é o incentivo.

✓ "Faltam 12 questões para bater sua meta."

✕ "Acredite em você, o sucesso vem!"

Números

Métricas grandes usam Light 300 com tracking -4%; a unidade sempre menor e em neutro.

348 questões

Uso do verde

Um destaque verde por tela. Verde significa progresso ou ação, nunca decoração, nunca fundo de bloco de texto longo.

Faça

• Cantos de 24 a 32px em todo card de conteúdo.
• Grafite como tinta sobre qualquer área verde.
• Hachura e neutro para o dado secundário dos gráficos.
• Um único card verde por tela.

Não faça

• Gradientes de marca ou verde sobre verde.
• Texto branco em cima do verde #00DE87.
• #00DE87 em corpo de texto no tema claro.
• Botões quadrados ou com raio pequeno.

Barra de abas

Quatro destinos fixos: Dash, Questões, Mapas mentais e Flashcards. Altura de 56px mais área segura, ícone de 22px e rótulo de 11px.

Alvos de toque

Nada abaixo de 44px de altura tocável. Botões primários ocupam a largura do card no mobile.

Cards de largura cheia

Margem lateral de 20px, raio de 22 a 26px e um único card verde por tela, como no desktop.

Permitido

HTML, CSS, JS

HTML semântico, CSS com variáveis nativas e JavaScript em módulos ES. Tudo roda direto no navegador.

Fora do projeto

• React, Vue, Angular, Svelte
• TypeScript, Sass, Less
• Tailwind ou utilitários de CSS
• npm, bundler, etapa de build

Padrão de código

• Arquivos em kebab-case, um por responsabilidade
• Indentação de 2 espaços
• Classes em BEM simplificado, sem estilo inline
• Sem variável global no JS

Estrutura de pastas

aprovato/
  index.html
  css/
    base.css
    tokens.css
    components.css
  js/
    app.js
    modules/
  assets/
    logo/
    icons/

Tokens em CSS nativo

:root {
  --apr-verde: #00DE87;
  --apr-grafite: #131313;
  --apr-papel: #F1F1F3;
  --apr-raio-card: 24px;
  --apr-espaco: 4px;
  --apr-fonte: "Lufga", sans-serif;
}