# 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`](./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

```bash
# 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

```html
<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

```bash
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`](./CHANGELOG.md).

---

## 📞 Contato

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