PRF Design System

Sistema de design oficial da Polícia Rodoviária Federal — versão para interfaces digitais. Alinhado ao Manual de Identidade Visual (MIV 7.0).

Versão: v1.1 · 2026 Mantenedor: Daniel Ávila — DIAD/CIP/PRF Em coautoria com: Coordenação-Geral de Comunicação Social (CGCOM/PRF) Licença: Uso interno PRF + parceiros institucionais autorizados

---

🆕 Novidades v1.1

• Inter como tipografia oficial (substitui Fira Sans para UI digital)
• Material Symbols como família oficial de iconografia
• Fundo de tela alterado para #F5F5F5 (era branco puro)
• Branco puro reservado para superfícies elevadas (cards, modais)

Detalhes completos em CHANGELOG.md.

---

🎯 O que é

Um sistema de tokens cromáticos, tipográficos, iconográficos e componentes para construção de interfaces digitais da PRF — sistemas internos, painéis operacionais, dashboards, portais institucionais.

Fontes de autoridade:

• Manual de Identidade Visual da PRF (MIV 7.0, 22/11/2024)
• Caderno 10 — Interfaces Digitais (proposta institucional, v1.1, 2026)
• Orientações da Coordenação-Geral de Comunicação Social (CGCOM/PRF)

---

🎨 Cores institucionais

Nome	Hex	Pantone TPX	Uso
Azul PRF	#000D4B	19-4027	Primária
Amarelo PRF	#FFC900	14-0852	Destaque/alerta
Branco/Gelo	#FFFFFF	—	Superfícies elevadas

Plus: escalas auxiliares (azul-10 a azul-95, amarelo-20 a amarelo-100), cores de status (sucesso/atenção/erro/informação), e fundo de aplicação #F5F5F5 (neutral-50) para uso exclusivo em UI digital.

🔤 Tipografia

Inter (v4.0+) — família primária para interfaces digitais.

• Licença OFL (Open Font License).
• Fonte variável (1 arquivo, todos os pesos 100–900).
• Auto-hospedável (sem dependência de CDN).

Fira Sans — disponível como variante legada (data-typeface="fira") para impressos institucionais e contextos que já a adotem.

🎯 Iconografia

Material Symbols Outlined — família oficial.

• Licença Apache 2.0, livre.
• Auto-hospedável.
• Variável (suporta FILL, weight, grade, optical size).
• Catálogo: https://fonts.google.com/icons

♿ Acessibilidade

WCAG 2.1 AA. Combinações de contraste documentadas. Branco/Amarelo (1.54:1) é proibido para texto.

---

📦 Como usar

Opção 1: Tailwind CSS

# 1. baixe os arquivos do design system
curl -L https://github.com/dna1973/prf-design-system/archive/main.tar.gz | tar xz

# 2. copie pra dentro do seu projeto
cp prf-design-system-main/{tokens.css,globals.css,tailwind.config.js,fonts.css} src/styles/
cp -r prf-design-system-main/assets/fonts src/assets/

# 3. importe no entry point (main.tsx ou app/layout.tsx)
import './styles/globals.css';

# 4. use as utilities
<button className="bg-prf-azul text-white hover:bg-azul-30">
  Salvar
</button>

Opção 2: HTML/CSS puro

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="fonts.css">

<style>
  body { background: var(--bg); }     /* #F5F5F5 */
  .meu-card {
    background: var(--bg-elevated);   /* #FFFFFF — branco puro só em superfícies elevadas */
    color: var(--prf-azul);
    font-family: var(--font-sans);    /* Inter */
  }
  .meu-icone { font-family: var(--font-icons); }
</style>

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

Opção 3: Como template Vite

gh repo create meu-projeto-prf --template Dna1973/avila-starter-prf --private --clone

---

📁 Conteúdo do repositório

.
├── tokens.css           # variáveis CSS — fonte primária dos tokens
├── globals.css          # tema shadcn/ui (HSL), tema dark, base styles
├── tailwind.config.js   # tokens mapeados como utilities Tailwind
├── fonts.css            # @font-face do Inter + Material Symbols + Fira (legado)
├── CHANGELOG.md         # histórico de versões
├── assets/
│   ├── fonts/
│   │   ├── InterVariable.woff2
│   │   ├── InterVariable-Italic.woff2
│   │   ├── MaterialSymbolsOutlined.woff2
│   │   ├── FiraSans-*.ttf      # legado (8 pesos)
│   │   └── OFL.txt
│   └── images/
│       ├── brasao-cmyk.png      # brasão oficial
│       └── logotipo-*.png       # variações azul/amarelo/branco
├── components/
│   ├── BrasaoPRF.tsx
│   ├── LogotipoPRF.tsx
│   └── index.ts
├── docs/
│   ├── MIV-7.0-Caderno-10-Interfaces-Digitais.pdf
│   ├── MIV-7.0-Caderno-10-Interfaces-Digitais.docx
│   ├── PROPOSTA-Caderno10-justificativa.md
│   └── README.md
├── CLAUDE.md            # instruções pra Claude/AI assistants
└── README.md            # este arquivo

---

🤖 Uso com Claude / IA

Este repositório inclui um CLAUDE.md de referência — copie-o para a raiz de qualquer projeto novo PRF e o Claude vai automaticamente respeitar o DS ao trabalhar no código.

Em chats novos do Claude, basta apontar para este repo:

"Aplica o PRF Design System (github.com/dna1973/prf-design-system) neste projeto"

O Claude busca os tokens raw, lê os valores, e aplica.

---

🚫 Vedações

1. Não substituir Azul PRF, Amarelo PRF, Inter ou Material Symbols em interfaces da corporação.
2. Não usar Amarelo PRF como cor de fundo amplo de tela.
3. Não usar branco puro como fundo de tela (use --bg = #F5F5F5). Branco puro só em superfícies elevadas.
4. Não combinar texto Branco com fundo Amarelo PRF (ou inverso) — falha WCAG.
5. Não distorcer brasão; respeitar área de respiro de 1x.
6. Não codificar informação exclusivamente por cor — sempre acompanhada de texto/ícone.

Lista completa: ver docs/MIV-7.0-Caderno-10-Interfaces-Digitais.pdf.

---

📝 Versionamento

• v1.x — alterações em componentes, tokens auxiliares, famílias de fonte/ícone.
• v2.0+ — alterações em cores oficiais ou princípios fundamentais.

Toda alteração com prazo mínimo de 90 dias para adequação de sistemas existentes.

Histórico completo: CHANGELOG.md.

---

📞 Contato

Sugestões, dúvidas ou demandas técnicas: abrir issue neste repositório ou processo SEI à CGCOM.