Guidelines

Regras para desenvolvedores e AI Builders.

Regras do AI Builder

Do

Use tokens semânticos (bg-background, bg-card, text-muted-foreground)
Use status tokens para estado: bg-success-background / bg-warning-background / bg-destructive-background
Importe primitivas de @morada-ai/niemeyer/components
Use @tabler/icons-react
Siga os page templates em /templates
font-heading para títulos, font-body para texto corrido
aria-label em botões com apenas ícone

Don’t

Hardcodar cores (bg-white, text-gray-500, #ffffff)
Usar <button>/<input>/<select> nativos onde existe primitivo
Usar lucide-react, react-icons ou outros sets de ícones
Criar wrappers ad-hoc de Card ou Button — extenda via className
Remover focus ring (outline-none) sem restaurar focus-visible
Pular <Label> em form inputs
Usar o modificador `!` (important) do Tailwind dentro de primitivas

// Contexto para AI prompts:
// Framework: Next.js 16+, React 19+, TypeScript (pacote suporta React 18+)
// Styling: Tailwind CSS 4 + tokens semânticos do Niemeyer
// Components: @morada-ai/niemeyer/components — primitivas shadcn customizadas
// Icons: somente @tabler/icons-react
// Fonts: Outfit (font-heading), Lato (font-body) — ambas obrigatórias como CSS variables

Acessibilidade

WCAG 2.1 nível AA.

Regra	Detalhe
Contraste texto	Mínimo 4.5:1 (normal) ou 3:1 (texto grande)
Teclado	Todo conteúdo interativo acessível via Tab; focus ring visível
Semântica	HTML semântico, headings em ordem, um h1 por página
Labels	Todo input com <Label htmlFor=...> associado
ARIA	aria-label em icon buttons, aria-invalid em erros
Cor	Nunca use cor como único indicador (combine com ícone ou texto)

Dark mode

Ativado via classe .dark no elemento html. Sempre prefira tokens semânticos — eles trocam automaticamente.

// Correto — adapta ao tema
<div className="bg-background text-foreground border-border" />

// Errado — não adapta
<div className="bg-white text-gray-900 border-gray-200" />

Ícones

Exclusivamente @tabler/icons-react. Dimensione com utilitários padrão do Tailwind — `size-4` (16px), `size-5` (20px), `size-6` (24px) cobrem a maioria dos casos.

Contexto	Tamanho	Classe
Dentro de Button ou Input	16px	size-4
Item de menu / sidebar	24px	size-6
Feature icon (em círculo)	32px	size-8
Ilustração / hero	40–48px	size-10 → size-12