design.porti.digital · v1 · 13 set 2026

Portí Design System

A identidade visual da Portí para produto: cores, tipografia, forma, componentes e logos, com os arquivos para usar. As etiquetas hoje marcam o que já está em uso e a definir o que falta decidir antes de virar pacote.

2apps usam os tokens v8.1 (Porti Negócios, Ops Antecipaí)

5roxos "primários" diferentes entre projetos e ícone

8arquivos de logo gerados hoje a partir do ícone oficial

0tokens de espaçamento definidos

Marca

Símbolo: o "p" formado por um anel e uma gota, chapado, sem volume. Wordmark em minúsculas com acento. Sobre roxo, as duas peças ficam no lavanda claro #D5D2D9 do ícone oficial; sobre fundo claro, no purple #551388. Os arquivos abaixo foram gerados a partir do ícone oficial e do wordmark do Ops Antecipaí.

lockup-porti-roxo.png · fundo claro

lockup-porti-claro.png · sobre o roxo do ícone #4D1A83

lockup-porti-claro.png · sobre a sidebar

simbolo-porti-roxo.png

icone-porti.png · 1024×1024 · ícone de app

simbolo-porti-branco.png · sobre o gradiente

Voz e nomes hoje

Do único texto de marca escrito na VM (proposta-api/src/defaults.ts): o nome é portí em minúsculas com acento; produtos também em minúsculas: antecipaí, medescomplica, portí Pay. Tagline: "Soluções financeiras para sua jornada médica". Tom: consultivo e profissional. As agentes (Íris, Lia, Nina, Bia) usam tom caloroso com dois ou três emojis por mensagem.

Faltando a definir

Arquivos em SVG (os atuais são PNG extraídos de imagem), área de proteção e tamanho mínimo, e a decisão sobre o roxo de fundo: o ícone oficial usa #4D1A83, mais fechado que o indigo #6007C1 dos apps.

Cor

Paleta dos tokens --porti-* em porti-negocios/client/src/index.css:46. O indigo é a cor de ação; o purple entra no gradiente de assinatura e em textos de destaque. Neutros quentes, puxados para o bege, e não cinzas puros.

Roxos hoje

#6007C1

Indigo · primária--porti-indigobotões, links, foco, ring

#551388

Purple--porti-purpleinício do gradiente, texto de destaque

#7B2FBE

Purple light--porti-purple-lighthover, ícones

#7C3AED

Indigo light--porti-indigo-lightprimária no tema escuro, nav ativa

#a78bfa

Lavanda--chart-4gráficos, texto no escuro

#c4b5fd

Lavanda clara--chart-5texto de destaque no escuro

Neutros hoje

#F7F4EF

Off-white · fundo--porti-off-whitefundo da página

#FFFFFF

Surface--porti-surfacecards, tabelas

#F0EDE8

Surface alt--porti-surface-altcabeçalho de tabela, secundário

#E2DDD8

Border--porti-borderhairlines, inputs

#C8C2BB

Border strong--porti-border-strongdivisores

#8B8B9A

Muted--porti-mutedrótulos, legendas

#4A4A5A

Slate--porti-slatetexto secundário

#111111

Graphite--porti-graphitetexto principal

Semânticas hoje

#16a34a

Success--porti-successbadges, KPIs positivos

#d97706

Warning--porti-warningalertas, pendências

#dc2626

Error--porti-errorerros, risco

#0284c7

Info--porti-infoavisos neutros

Sidebar e tema escuro hoje

#1A0A2E

Sidebar topogradiente 180°porti-sidebar

#0F0720

Sidebar basegradiente 180°porti-sidebar

#0D0A14

Fundo escuro--background (.dark)

#1A1525

Card escuro--card (.dark)

#261D35

Secundário escuro--secondary (.dark)

#F0EDE8

Texto no escuro--foreground (.dark)

Gradientes hoje

135°

Assinatura--porti-gradientbotão primário, capas

Suave--porti-gradient-softfundos de seção

glow

Glow--porti-gradient-glowtopo de página

Conflito: qual é o roxo da Portí? 5 valores

#6007C1

Porti Negócios e Ops Antecipaív8.12 apps em produção

#6611b1

@porti/standards--purple-800mockup HTML, porta 3010

#4B1A6C

Gerador de propostasbrandColorPDFs enviados a clientes

#4D1A83

Ícone oficialfundo do app icono roxo da marca de fato

#551388

Comum a todosgradienteúnico valor consensual

Tipografia

Inter para interface e JetBrains Mono para rótulos, números e código. Ambas carregadas do Google Fonts; nenhuma está hospedada na VM. A única fonte em arquivo é Poppins, no gerador de propostas, que não segue o v8.1.

display · 32 / 600 / -0.02emSucesso do cliente

h1 · 24 / 600Carteira por etapa

h2 · 18 / 600Dr. Mateus Andrade · Medescomplica

body · 15 / 400 / 1.6A primeira nota fiscal foi emitida em 4 dias após a abertura do CNPJ, dentro do prazo de 15 dias definido para a etapa de Ativação.

small · 13 / 400Atualizado há 12 min · fonte: Medescomplica

label · mono 10 / 0.12em / caixa altaprodução · últimos 30 dias

número · mono tabularR$ 148.320,00 · 116 contas · 7,8 %

A definir a definir

Hospedar as fontes no pacote (woff2) para não depender do Google Fonts nos PDFs e no modo offline; fixar a escala (32 / 24 / 18 / 15 / 13 / 10) e decidir se o gerador de propostas migra de Poppins para Inter.

Forma e espaço

Aqui é onde os projetos mais divergem. Três escalas de raio convivem, e nenhum projeto declara tokens de espaçamento: cada tela usa padding escrito à mão.

Porti Negócios--radius: 0.5rem (8 px), único

Ops Antecipaíxl 28 · lg 18 · md 12 · sm 8

@porti/standardsshell 28 · card 20 · sm 14

Sombras hoje

shadow-card (Ops Antecipaí)

0 10px 24px rgba(17,17,17,.05)

kpi-card hover (Porti Negócios)

0 4px 20px rgba(96,7,193,.08)

Espaçamento a definir

Proposta de partida, ainda não usada em lugar nenhum: 4 · 8 · 12 · 16 · 24 · 32 · 48 px. Padding interno de card 16 a 20 px, gap entre cards 12 px, margem de seção 32 a 40 px.

Componentes

Renderizados com o CSS utilitário .porti-* do Porti Negócios, sem alteração. É o vocabulário que já existe: botão primário em gradiente, badges em mono, KPI card com hover roxo, tabela com cabeçalho em caixa alta, sidebar em gradiente escuro.

Botões

Badges

Adoçãosaudávelatençãorisco

Input

E-mail do médico

KPI card

Contas em adoção

64+9 esta semana

Tabela

Conta	Etapa	Saúde	Produção 30 d
Dra. Camila Rocha	Ativação	saudável	R$ 38.400
Dr. Henrique Sales	Adoção	atenção	R$ 12.150
Dr. Otávio Lima	Expansão	risco	R$ 0

Navegação lateral

Meu dia Kanban Carteira Gestão

Card sobre fundo

Time-to-value

4,2 diasmeta 15 dias

Inventário por projeto

Onde cada decisão visual está escrita hoje. Nenhum projeto importa de outro: o bloco de tokens foi copiado à mão.

Projeto	Arquivo	Primária	Fonte	Raio	Logo	Situação
Porti Negócios	`/srv/porti-negocios/current/client/src/index.css:46`	`#6007C1`	Inter · JetBrains Mono	8 px	não	v8.1
Ops Antecipaí	`/srv/ops-antecipai/current/web/src/styles.css:1`	`#6007C1`	Inter · JetBrains Mono	28/18/12/8	wordmark png (lockup antigo com esfera, descartado)	v8.1 copiado
@porti/standards	`/srv/ops-antecipai/standards/current/styles.css:1`	`#6611b1`	Inter · JetBrains Mono	28/20/14	não	diverge
Gerador de propostas	`~/proposta-api/src/defaults.ts:6`	`#4B1A6C`	Poppins (ttf local)	—	texto "portí"	diverge
CS Manager (porti-revenue)	`~/porti-revenue/front/src/styles.css:1`	`#d98a1f` âmbar	sistema	12 px	ícone genérico	fora da marca
Análises Portí e FIDC	`~/analises-porti/front/src/styles.css:1`	`#0E6A66` teal	Spectral · Public Sans · IBM Plex Mono	5 px	não	fora da marca
EON OS (@eon/ui)	`~/eon-os/surfaces/ui/src/tokens.ts`	`#0B7285` petróleo	SF Pro (sistema)	6/10/14	não	outra marca

O EON OS é o único design system de verdade na VM: tokens em TypeScript que geram o CSS, preset Tailwind exportado, Storybook e um teste que falha se os tokens divergirem do documento. É o molde para o pacote da Portí.

Decisões antes de virar pacote

Cada item abaixo é uma escolha que só você pode fazer. Com elas fechadas, o pacote @porti/ui sai com tokens, preset Tailwind, CSS puro para projetos sem Tailwind e os logos, e o CS Manager é o primeiro a adotar.

1. Roxo primário

O ícone oficial usa #4D1A83, quase o mesmo do gerador de propostas. Os apps usam #6007C1. Uma saída: #4D1A83 como cor de marca (logo, fundos, capas) e #6007C1 como cor de ação (botões, links). Aposentar #6611b1 e #4B1A6C.

recomendo marca #4D1A83 · ação #6007C1

2. Raio

Escala única: 8 px em controles, 12 px em cards, 20 px em painéis grandes. Cobre os três projetos com um só conjunto.

recomendo 8 / 12 / 20

3. Fonte

Inter e JetBrains Mono hospedadas no pacote. Poppins fica só se o gerador de propostas precisar manter a cara do deck.

recomendo Inter

4. Espaçamento

Adotar a escala 4 · 8 · 12 · 16 · 24 · 32 · 48 px e trocar os paddings escritos à mão aos poucos.

recomendo adotar

5. Logo

Pedir ao designer o SVG do símbolo e do wordmark, mais a versão branca. Sem isso o pacote embarca só PNG.

depende de fornecedor

6. Tema escuro

Manter como está (só no Porti Negócios) ou levar para todos os apps. Os tokens do .dark já existem.

recomendo levar

7. Onde vive

Repositório próprio em ~/porti-ui publicado como pacote local, ou pasta dentro do porti-revenue. Repositório próprio evita que um app mande nos outros.

recomendo repositório próprio

8. Marcas fora do roxo

Análises Portí e FIDC (teal) e EON OS (petróleo) ficam como estão ou entram na paleta? Ferramentas internas podem ter identidade própria.

recomendo manter

Usar no seu projeto

Tudo que está nesta página em arquivo. Os tokens são a fonte da verdade: copie o CSS para o projeto por script, importe antes do seu CSS e nunca edite a cópia.

Tokens

Variáveis --porti-* de cor, tipografia, raio, sombra e espaçamento, com tema escuro.

Baixar tokens.css

Logos

Símbolo, wordmark e lockup em claro, roxo e branco, mais o ícone de app 1024×1024. PNG; o SVG está pendente.

Baixar logos.zip ver pasta

Fontes

Inter e JetBrains Mono, do Google Fonts. Cole no <head>:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap">

Exemplo de uso

@import "./porti-tokens.css";
:root { --bg: var(--porti-off-white); --primary: var(--porti-indigo); --radius: var(--porti-radius-md); }
body { font-family: var(--porti-sans); background: var(--bg); color: var(--porti-graphite); }
.btn-primary { background: var(--porti-gradient); color: #fff; border-radius: var(--porti-radius-sm); }

Referência de implementação completa: CS Manager (porti-revenue), com script de sync e teste de paridade. Guia curto em README.md. Dúvidas e ajustes: Jonathan.