Portí Design System

A identidade visual da Portí aplicada a produto digital. Segue o brandbook oficial (Minerva Comunica, 2026): cores, assinaturas, tipografia e regras de uso. O que o brandbook não define para telas (neutros de interface, cores de estado, raios, espaçamento, fonte mono) está marcado como derivado e foi escolhido para respeitar a marca.

Marca

O símbolo é o "p" construído com um anel e uma gota, e ele faz parte da palavra: na assinatura principal o símbolo é a primeira letra de "portí". Nunca separar o símbolo do restante nem usar um "p" comum ao lado dele. Transmite credibilidade, resolutividade e modernidade; pilares confiável, acessível, resolutiva.

Assinaturas

Principal · índigo sobre branco

Principal · cinza sobre índigo

Monocromática branca sobre preto frio

Variação (empilhada) · para formatos quadrados

Favicon · ícone e favorito

Símbolo isolado · ícones, apps e redes

Símbolo sobre as cores da marca

Regras de uso

Não permitido

1. Mover os elementos de lugar
2. Rotacionar
3. Distorcer
4. Alterar a cor da assinatura
5. Usar degradês que não fazem parte da assinatura
6. Alterar a fonte do logotipo
7. Aplicar sombra
8. Aplicar sobre fundos que prejudiquem a leitura
9. Aplicar sobre imagens com muita informação

Voz e nomes

Nomes sempre em minúsculas: portí, antecipaí, medescomplica, repasse médico, portí club. Tagline: "Soluções financeiras para sua jornada médica". Propósito: descomplicar a vida de quem salva vidas. Tom consultivo e profissional; as agentes (Íris, Lia, Nina, Bia) usam tom caloroso com dois ou três emojis.

Cor

O Índigo é a cor central: autoridade, inovação e visão de futuro. O Roxo Vibrante é para pontos de maior atenção, guiando o olhar. O Preto frio dá seriedade e é a cor de texto. O Cinza claro equilibra e dá legibilidade. Preze pela abordagem completa com as cores.

Primárias brandbook

Complementares brandbook

Neutros de interface derivado

O brandbook define só o Preto frio e o Cinza. Para telas, os intermediários são tons frios da mesma família, sem puxar para o bege.

Estados derivado

Tipografia

Goodly para títulos e marca: arredondada, moderna e humana. Nata Sans como auxiliar para texto: neutra, clara e versátil. Hierarquia do brandbook: título em Bold, subtítulo em Medium, corpo em Regular, blocos pequenos em Light. Textos alinhados à esquerda, com bom espaçamento entre linhas.

Disponibilidade

Nata Sans está no Google Fonts e é a fonte de interface. Goodly é comercial e vem na pasta "Tipografia" do pacote da marca: hospedar no pacote quando os arquivos forem entregues; até lá os títulos caem em Nata Sans Bold. JetBrains Mono (números e rótulos) não está no brandbook e é uma escolha de interface.

Forma e espaço derivado

O brandbook fala em formas arredondadas que comunicam proximidade e leveza, e o favicon é um quadrado de cantos bem arredondados. Para interface, três raios e uma escala de espaçamento.

Espaçamento

4 · 8 · 12 · 16 · 24 · 32 · 48 px. Padding de card 16 a 20 px, gap entre cards 12 px, margem de seção 32 a 40 px.

Sombra

Só em elementos flutuantes (menus, modais): 0 10px 24px rgba(9,3,13,.05). Nunca na assinatura. Sem degradês em botões ou fundos: o brandbook não os prevê.

Componentes

Vocabulário base de interface com os tokens acima. Botão de ação em Roxo Vibrante sólido; sidebar em Roxo 900; badges em pílula com fundo a 10 % da cor.

Botões

Aprovar propostaEditarDescartar

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 diaKanbanCarteiraGestão

Card sobre fundo

Time-to-value

4,2 diasmeta 15 dias

Submarcas

Cada produto tem assinatura própria com a gota como elemento comum. Os planos do medescomplica escurecem conforme sobem; antecipaí, repasse médico e portí club combinam roxo e preto frio.

medescomplica basic

medescomplica pro

medescomplica premium

medescomplica enterprise

antecipai

repasse medico

porti club

Projetos

Estado de adoção do design system nos sistemas da Portí na VM.

Usar no seu projeto

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. Os logos vêm do brandbook em alta resolução; o SVG oficial está na pasta "Marca" do pacote da agência.

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

@import "./porti-tokens.css";
:root { --bg: var(--porti-bg); --primary: var(--porti-action); --radius: var(--porti-radius-md); }
body { font-family: var(--porti-sans); background: var(--bg); color: var(--porti-text); }
h1, h2 { font-family: var(--porti-display); font-weight: 700; }
.btn-primary { background: var(--porti-action); color: #fff; border-radius: var(--porti-radius-sm); }
.sidebar { background: var(--porti-sidebar); }

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