DESIGN SYSTEM

Catálogo de tokens

Fonte de verdade: src/app/globals.css. Alterne o tema do sistema para conferir claro e escuro — token que só foi olhado num tema não foi olhado.

Superfícies e estrutura

--bg

fundo da página

--surface

painéis e cards

--raise

elevação sobre surface

--border

filetes e divisores

--border-strong

ênfase estrutural

Texto

--fg

texto principal

--fg-muted

texto secundário

--faint

metadados

Assinatura

Azul é a cor de assinatura (MV2-025). Um ponto de destaque por tela — se tudo é destaque, nada é.

--accent

assinatura: CTA e progresso

--accent-ink

acento textual

--accent-soft

fundo de realce

--accent-line

filete de realce

Loop metacognitivo

Verde, amarelo e vermelho só aparecem juntos em questão e revisão, sempre com rótulo de texto. Cor nunca comunica estado sozinha.

--loop-green

sabia e demonstrei domínio

--loop-yellow

tive dúvida, chutei ou sabia em parte

--loop-red

nunca vi, não sabia

Estados de sistema

Tokens próprios, separados do loop de propósito: reusar o vermelho da metacognição para erro de formulário faria o aluno ler julgamento onde há só falha técnica.

--success

sucesso de sistema

--warning

aviso de sistema

--danger

erro de sistema

Tipografia

Você sabe o que fazer hoje.

Corpo em Hanken Grotesk, 16px. Hierarquia por peso e escala, nunca por espaçamento de letra.

SEMANA 3 DE 12 · 128 DIAS · IBM Plex Mono para números tabulares