# Portí UI — design system padrão da VM

Todo sistema novo da Portí construído nesta VM usa isto. Página de referência: `porti-design-system.html` (abrir no navegador).

## O que tem
- `tokens.css` — variáveis `--porti-*` (cores, tipografia, raio, sombra, espaçamento) + tema escuro. **Fonte da verdade.**
- `logos/` — símbolo (claro/roxo/branco), wordmark (roxo/claro/branco), lockups e `icone-porti.png` 1024 para ícone de app. Só PNG por enquanto; SVG pendente com o designer.
- `porti-design-system.html` — levantamento, componentes de exemplo e decisões.

## Regras rápidas
- Roxo de **marca** `#4D1A83` (logo, capas, fundo de ícone). Roxo de **ação** `#6007C1` (botões, links, foco); no escuro `#7C3AED`.
- Fundo `#F7F4EF`, cards `#FFFFFF`, bordas `#E2DDD8`, texto `#111111`, secundário `#4A4A5A`, rótulos `#8B8B9A`.
- Fontes: Inter (interface) e JetBrains Mono (rótulos em caixa alta, números, código). Carregar do Google Fonts:
  `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap">`
- Raio: 8 px controles, 12 px cards, 20 px painéis. Espaçamento 4/8/12/16/24/32/48.
- Sidebar em gradiente `#1A0A2E → #0F0720`, item ativo `rgba(124,58,237,.15)` + texto `#C4B5FD` + borda esquerda `#7C3AED`.
- Botão primário: `--porti-gradient` com sombra `0 2px 8px rgba(96,7,193,.25)`. Badges com fonte mono e fundo a 10 % da cor.
- Sobre roxo, logo e wordmark ficam em `#D5D2D9` (nunca azul, nunca a esfera 3D antiga).
- Nomes: **portí**, **antecipaí**, **medescomplica** em minúsculas.

## Como usar num projeto
1. Copiar `tokens.css` para o projeto por script (ex.: `scripts/sync-ui.sh`) e importar antes do CSS próprio. Nunca editar a cópia.
2. Mapear as variáveis do projeto para as `--porti-*` (ex.: `--bg: var(--porti-off-white)`).
3. Copiar os logos necessários de `logos/` para a pasta pública; gerar ícones 192/512 a partir de `icone-porti.png`.
4. Adicionar um teste que compara a cópia com `/home/deploy/porti-ui/tokens.css` (exemplo em `porti-revenue/backend/tests/test_design_tokens.py`).

Projetos que já usam: porti-revenue (CS Manager). Porti Negócios e Ops Antecipaí têm os mesmos tokens copiados à mão (v8.1) e devem migrar para o sync.

## Site público
https://design.porti.digital — nginx `sites-available/design-porti` servindo esta pasta (root `/home/deploy/porti-ui`), certificado Let's Encrypt com renovação automática, DNS A na Cloudflare (DNS-only). `index.html` é cópia de `porti-design-system.html`; `logos.zip` é gerado dos PNG de `logos/`. Para publicar mudanças: editar, `cp porti-design-system.html index.html`, regerar o zip, commit.