Skip to content

CLAUDE.md

Latest commit

 

History

History
175 lines (125 loc) · 6.5 KB

CLAUDE.md

File metadata and controls

175 lines (125 loc) · 6.5 KB
Raw

CLAUDE.md

Este arquivo instrui o Claude (Claude Code, Claude in Chrome, claude.ai) sobre as convenções deste projeto. Leia-o antes de propor alterações de UI, código ou documentação.

🎯 Sobre este projeto

Nome: Owner: Daniel Ávila — DIAD/CIP/PRF Stack: <ex: React + Vite + TypeScript + Tailwind + shadcn/ui + Supabase> Categoria: Sistema institucional da Polícia Rodoviária Federal

🎨 Design System: PRF Design System v1.1 (2026)

Este projeto adota OBRIGATORIAMENTE o PRF Design System v1.1. Toda decisão visual deve respeitar os tokens institucionais. Não inventar cores, tipografia, espaçamentos.

Cores institucionais (NÃO substituir)

Azul PRF       #000D4B  (Pantone 19-4027 TPX) — primária
Amarelo PRF    #FFC900  (Pantone 14-0852 TPX) — destaque/alerta
Branco/Gelo    #FFFFFF                        — superfícies elevadas

Estes valores estão alinhados ao Manual de Identidade Visual da PRF (MIV 7.0), Caderno 05, pág. 189 e Caderno 09, pág. 287.

Não usar blue-900, navy, #1e3a8a ou qualquer aproximação. Não usar amarelo como cor de fundo amplo (apenas destaque/alerta).

Fundo de tela (v1.1)

A partir da v1.1, o fundo padrão da aplicação é #F5F5F5 (neutral-50), NÃO mais branco puro. Branco puro (#FFFFFF) fica reservado para superfícies elevadas: cards, modais, popovers, dropdowns.

Fundo de tela / app shell  →  #F5F5F5  (var --bg, classe bg-bg)
Cards, modais, popovers    →  #FFFFFF  (var --bg-elevated, classe bg-bg-elevated)

Tipografia (v1.1)

Família primária: Inter (v4.0+, OFL, auto-hospedável). Família para impressos institucionais: Fira Sans (variante data-typeface="fira").

Inter é desenhada especificamente para UI digital e oficializada na v1.1 conforme orientação CGCOM. Não substituir por Roboto, Arial, ou Helvetica.

Iconografia (v1.1)

Família oficial: Material Symbols Outlined (Apache 2.0, livre, auto-hospedável).

Estilo: outlined, weight 400, grade 0, fill 0, optical size 24.

<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">build</span>
<span class="material-symbols-outlined">description</span>

Catálogo: https://fonts.google.com/icons

Acessibilidade

WCAG 2.1 AA é requisito não-negociável. Combinações proibidas:

  • Branco sobre Amarelo PRF (1.54:1 — falha)
  • Amarelo PRF sobre Branco (1.54:1 — falha)

Combinações válidas para texto:

  • Branco sobre Azul PRF (18.12:1 ✓)
  • Azul PRF sobre Branco (18.12:1 ✓)
  • Amarelo PRF sobre Azul PRF (11.74:1 ✓)
  • Azul PRF sobre Amarelo PRF (11.74:1 ✓)

Arquivos canônicos do design system neste projeto

src/styles/
├── tokens.css           ← variáveis CSS de todas as cores, tipografia, etc.
├── globals.css          ← integração com shadcn/ui (HSL tokens)
└── fonts.css            ← @font-face do Inter + Material Symbols (+ Fira legado)

src/assets/fonts/
├── InterVariable.woff2
├── InterVariable-Italic.woff2
├── MaterialSymbolsOutlined.woff2
└── FiraSans-*.ttf       ← legado, mantidos para data-typeface="fira"

tailwind.config.js       ← tokens mapeados como utilities Tailwind

Fonte canônica (URLs raw para o Claude buscar via web_fetch):

✅ Convenções obrigatórias

Cores em código

// ❌ NUNCA
<div className="bg-blue-900 text-white">
<div style={{ backgroundColor: '#1e3a8a' }}>
<div className="bg-white">                        {/* fundo branco em tela */}

// ✅ SEMPRE
<div className="bg-prf-azul text-white">
<div className="bg-bg">                           {/* fundo de tela #F5F5F5 */}
<div className="bg-bg-elevated">                  {/* card, modal, popover */}
<div className="bg-azul-95 text-prf-azul">        {/* fundo sutil azulado */}
<div className="bg-prf-amarelo text-prf-azul">    {/* destaque institucional */}

Botões

  • 1 botão primário (Azul PRF) por tela. Múltiplos primários diluem hierarquia.
  • Botão "amarelo" reservado para alertas/destaques institucionais.
  • Botão destrutivo usa --status-danger (#B32020), não amarelo.

Status

sucesso     #1F7A3A
atenção     #B26B00
erro        #B32020
informação  #1E4FB2

Tema escuro

Quando aplicável (centros de comando, painéis 24×7), o Amarelo PRF assume papel de cor primária; Azul PRF fica reservado a accent. Tokens já preparados no globals.css via [data-theme="dark"].

📚 Referências oficiais

  • MIV 7.0 (Manual de Identidade Visual da PRF)
  • Caderno 10 — Interfaces Digitais (proposta v1.1) — docs/MIV-7.0-Caderno-10-Interfaces-Digitais.pdf
  • Repositório do design system — github.com/dna1973/prf-design-system
  • Changelog — CHANGELOG.md

🤖 Instruções para o Claude

Ao trabalhar neste projeto:

  1. Antes de qualquer alteração visual, consulte os tokens em src/styles/tokens.css.
  2. Não introduza cores hardcoded — sempre via token (var(--prf-azul) ou classe Tailwind bg-prf-azul).
  3. Não troque a tipografia — Inter é a oficial. Fira Sans só em modo legado explícito.
  4. Para fundo de tela, use bg-bg (cinza claro #F5F5F5). Para cards/modais, bg-bg-elevated (branco).
  5. Para ícones, use Material Symbols Outlined: <span class="material-symbols-outlined">nome_icone</span>. Não importe Lucide ou Heroicons em projetos novos.
  6. Aplique acessibilidade WCAG 2.1 AA automaticamente em qualquer combinação cromática proposta.
  7. Em PDFs gerados, use cabeçalho Azul PRF + régua amarela 4px como assinatura visual padrão.
  8. Em docx/pptx institucionais, use Inter (corpo) e Azul PRF como cor de títulos.

Se Daniel pedir algo que viole o design system (ex: "use um azul mais claro"), alerte antes de executar: explique a vedação institucional e ofereça alternativas dentro da escala auxiliar (azul-40, azul-60 etc.). Só execute se ele confirmar.