Um arquivo, três línguas: design, código e negócio.

Cores semânticas

Componentes consomem papéis semânticos, nunca valores soltos nem a paleta do Tailwind.

• --background

  Fundo da página

  Base estável para leitura e contraste.

• --background-soft

  Fundo suave / seções

  Cria hierarquia sem introduzir uma nova cor arbitrária.

• --foreground

  Texto principal

  Legibilidade é requisito, não ornamento.

• --card

  Superfície de cartão

  Agrupa conteúdo de forma previsível nos dois temas.

• --card-foreground

  Texto sobre cartão

  Mantém contraste em superfícies.

• --popover

  Superfície flutuante

  Camadas consistentes reduzem ambiguidade.

• --popover-foreground

  Texto flutuante

  Contraste consistente em overlays.

• --primary

  Ação principal

  Define uma ação dominante e previsível.

• --primary-foreground

  Texto sobre ação principal

  Mantém CTA legível.

• --secondary

  Ação secundária

  Cria hierarquia entre ações.

• --secondary-foreground

  Texto secundário forte

  Suporte sem perder contraste.

• --muted

  Superfície neutra

  Apoio visual sem competir.

• --muted-foreground

  Texto de apoio

  Metadados legíveis sem roubar foco.

• --accent

  Destaque funcional

  Sinaliza foco e destaque sem substituir cores de marca.

• --accent-foreground

  Texto sobre destaque

  Contraste garantido.

• --accent-soft

  Destaque funcional suave

  Realce discreto para estados de apoio.

• --brand-moss

  Verde musgo de marca

  Acento estrutural associado a tecnologia, pesquisa e continuidade.

• --brand-moss-soft

  Superfície musgo suave

  Hierarquia de progressão e estados positivos.

• --brand-burgundy

  Bordô de marca

  Acento editorial para decisões, ênfase e identidade autoral.

• --brand-burgundy-soft

  Superfície bordô suave

  Ênfase sem competir com o conteúdo.

• --brand-lilac-soft

  Lilás suave de apoio

  Apoia elementos lúdicos sem virar cor estrutural.

• --destructive

  Erro / destrutivo

  Torna risco e erro inequívocos.

• --destructive-foreground

  Texto sobre erro

  Mensagem crítica legível.

• --border

  Borda padrão

  Estrutura visual consistente.

• --border-soft

  Borda suave

  Divisão sutil para conteúdo editorial.

• --input

  Borda de campo

  Campos identificáveis nos dois temas.

• --ring

  Anel de foco

  Navegação por teclado visível.

• --artifact

  Papel de artefato

  Fundo neutro para diagramas e documentos originais, igual nos dois temas.

Cores com escopo de case

Só podem ser usadas dentro do case a que pertencem; não mudam com o tema.

• --project-vegam-purple

  VegAM · roxo da marca

  Cor original do TCC; não muda com o tema.

• --project-vegam-yellow

  VegAM · amarelo da marca

  Fundo das telas e do infográfico originais.

• --project-vegam-paper

  VegAM · texto claro

  Texto sobre o roxo do VegAM.

• --project-vegam-ink

  VegAM · texto escuro

  Texto sobre o amarelo do VegAM.

Tipografia

Escala

• text-display-1

  Título de página (desktop)

  3.75rem / 1.05

• text-display-1-compact

  Título de página (celular)

  3rem / 1.05

• text-display-2

  Título de seção; título de case no celular

  2.25rem / 1.1

• text-title-1

  Título de bloco do case (desktop)

  1.875rem / 2.25rem

• text-title-2

  Título de card e de bloco (celular)

  1.5rem / 2rem

• text-title-3

  Títulos curtos em listas e grades

  1.25rem / 1.75rem

• text-body-lg

  Texto de abertura

  1.125rem / 1.75rem

• text-body

  Texto corrido

  1rem / 1.625rem

• text-body-sm

  Apoio, navegação e botões

  0.875rem / 1.25rem

• text-caption

  Legendas e notas

  0.75rem / 1rem

• text-meta

  Rótulos em caixa alta

  0.75rem / 1rem

• text-tag

  Tags e selos

  0.6875rem / 1rem

• text-doc-body

  Texto do currículo impresso

  0.8125rem / 1.3rem

Receitas

Combinações de tokens reutilizadas por vários componentes.

• Receita pill

  Botões e links de ação: primary (fundo foreground) e secondary (borda). Ver lib/design-system/recipes.ts.

• Documento claro

  A classe .light aplicada a um contêiner usa os tokens do tema claro só naquele trecho (currículo).

• Impressão

  Header, footer e fundo ambiente usam print:hidden; @page define A4 com margens de 14 × 16 mm.

• Figura de case

  Imagens de case com fit, fundo (card, artifact, vegam) e largura mínima no celular para diagramas.

Inventário de componentes

Lista verificada por teste: todo arquivo em components/ precisa estar aqui.