Pine Design System

Um banco de negócios: bordô, ouro em linha, bege quente e ângulos retos

O site diz "Somos um banco de negócios" em geométrica leve sobre foto escura; os painéis são bordô com linhas finas de ouro em diagonal; o fundo de seção é bege. Nada é arredondado. O sistema herda isso: sobriedade, contraste alto, ornamento só em linha.

Definidos uma vez, com prefixo --p-; trocar o tema é trocar só os tokens

Três famílias: marca (bordô e ouro, medidos), neutros quentes (bege, taupe, marrons — o site não usa cinza frio) e semânticas (sucesso, atenção, erro, informação — distintas do ouro de propósito, para que "destaque da marca" nunca seja confundido com "atenção").

Os blocos mínimos, cada um com seus estados e o motivo de existir

Átomos combinados nas peças que a jornada repete

Header do site, modal de captação, assistente de abertura, celular do sócio

Os sete passos e os estados que a jornada precisa, com o sistema aplicado

Cada tela é composição dos organismos acima; nada aqui é componente novo. Use o botão de tema no topo para ver o mesmo kit no escuro.

56 peças, do token ao organismo — o checklist do kit

O que torna o kit fácil de usar por gente e por agentes

O que trazemos do C6 — a estrutura, não a cor

O C6 é referência declarada do banco. O que faz o C6 parecer leve não é o preto: é uma pergunta por tela, título grande em tom de conversa, uma linha fina de progresso, um único botão ancorado embaixo, listas sem borda e resumo em tiles. Tudo isso cabe no bordô e no ouro do Pine sem virar cópia.

De onde vêm as regras — e o que o Pine faz que os outros não fazem

Pesquisa de 12/09 cruzando a missão do Pine ("banco de negócios ágil, relacionamentos de longo prazo"; valores Solidez & Tradição, Hipercustomização, Excelência) com nove referências. O detalhe, com fontes, está no artefato Referências visuais Pine PJ.

Depois da conta aberta: o dia a dia da empresa no Pine, no mesmo sistema

O documento do Desktop PJ lista o que a área logada precisa: contas (saldo, aprovações, extrato, Pix, vencimentos), cobrança e arquivos (boletos, CNAB, francesinha, remessa e retorno), produtos (investimentos, crédito, câmbio, confirming) e administração (usuários, emissores de ordem, limites, alçadas, dispositivos). Aqui o kit ganha os organismos desses fluxos, nas duas superfícies, com uma seção própria de crédito agro — a vocação do Pine.

O outro lado da CPR: o que o analista do banco vê — no código do banco, sobre a Catalisa

Backoffice e app são produtos diferentes — e o backoffice é código do banco. O app é o cliente operando a conta (§10). O backoffice é o analista, o gerente e o compliance operando a mesa: código separado, de propriedade do Pine, que só consome a Catalisa por API (motor de decisão, blocos, trilha). Por isso ele nasce no sistema do Pine, não no roxo do painel. A estrutura vem das telas que a Catalisa já opera nas verticais de crédito (veículo, rural, imóvel, pessoal, consignado) e no admin do kit — o banco herda o desenho provado, com a marca dele. Os mocks abaixo seguem essas telas reais: Fila de análise, Dossiê da operação (na mesa porque · limite e folga · score bloco a bloco · cronograma e custo do motor · impeditivos · decisão), Ficha da operação (linha do tempo, documentos, desembolso, auditoria) e Formalizações (emitir instrumento, informar assinatura e registro). O caso é o custeio de arroz que a Vale Verde contratou no app.