Atualizações

Logos de parceiros

• Pasta nova assets/parceiros/, em SVG e PNG: Ágora, Avenue, Brasilprev, BTG Pactual, C6 Bank, Genial, Inter, Morgan Stanley, Nomad, Safra, Stoa e XP Investimentos.
• Três regras: ordem alfabética, todos em cinza sólido (colors.parceiro, #5E5E5E) e o mesmo peso visual, com a altura de cada logo tabelada.
• DESIGN.md 3.7.

Logo com opacidade reduzida

Reduzir a opacidade do logo é permitido, por exemplo para usá-lo como marca d'água. O veto de opacidade continua valendo para cor de preenchimento, e o texto dele agora diz isso.

Ativos da assinatura de e-mail

• Pasta nova assets/assinatura/, em PNG: logos de LinkedIn, Instagram, YouTube, Facebook, X e WhatsApp em azul e branco, ícones de telefone, e-mail e site, e os marcadores de foto redondo e quadrado.
• Logo de rede social passa a usar a biblioteca Phosphor, porque a Lucide não tem logo de marca. A exceção vale só para esse caso.

Acesso do Claude à internet

O tutorial Usando Claude ganhou um primeiro passo: liberar em Configurações, Recursos, o acesso de rede e os três domínios que a skill usa. Sem isso, a skill não alcança o design system.

Tutoriais com o passo a passo em tela

Dois caminhos para usar o design system com o Claude, cada um com os prints de cada tela.

• Usando Claude: instalar a skill em cinco passos e três exemplos de pedido do dia a dia.
• Usando Claude Design: página nova. Montar o design system da API Capital no Claude Design com uma conta gratuita no GitHub, e como atualizar quando sair versão nova.

Skill versão 4

A skill do Claude passa a ler o design system direto do repositório no GitHub, com este site como reserva. Quem tem a versão 3 instalada recebe o aviso para trocar.

• Instalação com o caminho da tela em português: Configurações → Personalizar → Habilidades → Adicionar → Fazer upload de habilidade. O arquivo pode chegar como .zip ou .skill.
• Botão do topo passa a se chamar Usar no Claude.
• Vetos de texto reforçados na skill: travessão entra na lista dos que mais reincidem.
• Documentação sem travessão, em obediência ao próprio catálogo de vetos.

A página de ativos

Pegar um arquivo de marca deixa de ser garimpo no repositório. A página Ativos reúne logo, pelicano, tagline, ícone, favicon, textura, gradiente, paleta, wallpaper, social, fotografia e fontes, cada um com prévia, os formatos ao lado e o endereço a um clique.

• Busca por nome e atalho por categoria.
• Copiar URL entrega o endereço público pronto para colar na peça, que é como o sistema manda usar o ativo.
• Prévia sobre xadrez em logo, pelicano, tagline e gradiente: o xadrez mostra que o arquivo não tem fundo próprio.
• Fontes: amostra da família em uso e download em pacote único por família (WOFF2, OTF ou TTF e a licença).
• Pelicano em nove versões, entre elas as bicolores Azul sobre branco e Branco sobre azul, com endereço próprio em assets/logo/pelicano/.
• Gradientes refeitos com transparência real: cada um vai do transparente à cor.
• A lista vem de ativos.json, gerado do próprio assets/: ativo novo no repositório aparece na página sozinho.

Densidade em ferramenta

Escala para telas de trabalho (formulário de geração, editor, painel de dados), um nível menor que a de página pública.

• Tipografia · Densidade em ferramenta: título de seção em corpo 700 azul; rótulo de campo em corpo-pequeno 600; dica, apoio e rótulo de caixa de marcar em corpo-pequeno 400; etiqueta em rotulo; tabela e miúdos em legenda.
• botao-utilidade e botao-utilidade-cheio: 32 px de altura, tipografia botao-utilidade (14/600), respiro lateral 12, canto canto-ferramenta (10 px). Em ferramenta, todo botão é um destes.
• campo-ferramenta: 40 px de altura, respiro lateral 12, texto em corpo-pequeno.
• checkbox: 16 × 16 px, desenhado (appearance: none); marcado, fundo acao e tique branco de 2 px. Rádio idem, redondo.
• Gráfico: legenda de séries centrada, com respiro até a área de dados; vão de 12 px entre título e subtítulo; rótulo de valor sem contorno e sem sombra, branco quando sobre barra escura, nunca atravessando a borda da barra; animação desligada em peça exportada. tokens/tema-echarts.js atualizado.
• Tokens novos: typography.botao-utilidade, rounded.canto-ferramenta. DESIGN.md 3.6. Páginas de Tipografia, Botões, Campos e Caixas de seleção atualizadas.

Tema do motor de gráficos

O sistema passa a publicar o tema do motor de gráficos (Apache ECharts), gerado do DESIGN.md como os demais tokens.

• tokens/tema-echarts.js: registra o tema api-capital no Apache ECharts: ordem das cores de série, tipografia, eixos, grade, legenda, dica, rosca com furo, candlestick em ok/erro. Carregue o ECharts, depois este arquivo, e inicie o gráfico com echarts.init(el, 'api-capital').
• O arquivo é gerado por tokens/gerar_tokens.py; não se edita à mão. Mudou a cor ou a fonte no DESIGN.md, mudou o gráfico em toda ferramenta que lê daqui.

As réguas da carta mensal

Três regras nasceram no desenho da carta mensal e viraram lei do sistema.

• A paleta do gráfico serve à mensagem: a ordem de série da marca é o padrão, não camisa de força. Em gráfico denso ou heatmap, cores de dado fora da marca entram quando melhoram a leitura.
• Tabela curta de comparação centraliza: título de coluna e valor centrados, o valor sob o seu título; o número à direita fica pra tabela longa de dados.
• Peça editorial impressa: capa e abertura em Playfair medium, título de seção em regular, separadores capilares no miolo. Playfair Bold ficou restrito a chamada e anúncio. A escala impressa ganhou os níveis "Título de seção" e "Chamada gritante".
• DESIGN.md interno v3.5; páginas de Gráficos, Tabelas, Tipografia e Formas atualizadas.

Os utilitários de espaço

Cada degrau da escala virou classe utilitária, gerada do DESIGN.md como tudo. Distância escrita à mão passa a ser o mesmo erro que hex escrito à mão.

• Três famílias, 103 classes: vao (gap, com variantes só-colunas e só-linhas), margem e respiro, por lado e por eixo, como .api-respiro-x10, .api-margem-topo-x6.
• A página de Espaçamento documenta as três famílias com exemplo vivo, código e a tabela de classes de cada uma.
• DESIGN.md interno v3.4, com a régua e o padrão de nome em §Utilitários de espaço.

Vinte páginas novas: os elementos-base, os componentes e os gráficos

A documentação sai de quatro páginas para vinte e quatro. Tudo que o DESIGN.md já cravava agora tem página própria, com exemplo vivo montado nas classes do sistema.

• Elementos-base completo: visão geral, cor, elevação, grid e margens, espaçamento, formas, estados, tipografia e tokens.
• Componentes completo: visão geral, botões, campos de formulário, caixas de seleção, barra de topo, navegação, caixas de destaque, avisos, tabelas e passo numerado.
• Visualização de dados: a página de gráficos, com as cinco cores de série em ordem fixa e as regras de construção.
• Todo exemplo é construído na própria página, ao modo da Visa: a grade nos dois formatos com anatomia por letras, os cinco modelos de coluna, as duas páginas de exemplo com texto, as cotas de espaçamento e os pares Faça / Não faça de cor, botão, campo, seleção, destaque e passo numerado.
• A estrutura de cada página segue o site de referência da Visa; o conteúdo vem todo do DESIGN.md, sem invenção.

O site de documentação, os arquivos de logo justos e a régua de alinhamento

O endereço deixa de ser uma página única e vira documentação navegável, e duas classes de defeito recorrente nas peças geradas morrem pela raiz.

• Site de documentação com barra lateral, sub-cabeçalho padrão e as primeiras páginas: Cards de conteúdo, Barra de topo (padrão de navegação horizontal, com anatomia e exemplos), Usando Claude e esta página de atualizações.
• Regra nova de alinhamento: toda borda de alinhamento é uma linha só. Topo, navegação e conteúdo sentam na mesma vertical; elemento fora da vertical dos vizinhos é defeito. Veto novo no catálogo: borda-serrilhada.
• Arquivos de logo justos: os 130 arquivos (SVG, PNG e PDF) foram substituídos por versões em que o canvas é a caixa exata da arte. Dimensionar pelo arquivo passou a dar o tamanho certo; a área livre virou régua de aplicação.
• Família content-card: o card de ferramenta e painel, sem contorno sobre fundo cinza-claro, em oito variações, com as réguas de altura e de ação ancorada na base.
• Barra de topo especificada: logo principal em 56/44/36 px por altura de barra, título da página em Playfair regular alinhado ao texto da logo, itens em Inter 500.
• Tipografia: tokens novos de documentação (título de página e de seção em Playfair medium, subtítulo em Inter medium) e a Playfair embarcada nos seis pesos. Hero e chamada de impacto seguem no display bold.

Regras da primeira leva de uso real

Os primeiros materiais produzidos por terceiros com o sistema expuseram os erros que a regra ainda não barrava. Esta versão fecha esses buracos.

• Componente novo: barra de topo de ferramenta e página interna, com fundo azul-meia-noite, logo e título da página, sem subtítulo.
• Componente novo: número de passo. O número entra no próprio título, em Inter tabular; a bolinha colorida com número dentro virou veto.
• Componente novo: caixa de seleção. Checkbox branco com marca em azul; checkbox em latão virou veto.
• Regra nova: o latão é detalhe, não segunda cor, com veto a latão em botão, rótulo, borda ou espalhado pela tela.
• Regra nova: formulário sem caixa dentro de caixa. Grupo de campos se marca com título e espaço, nunca com um segundo fundo cinza.
• Regra nova: botão é um dos cinco declarados; botão inventado virou veto. Anexo usa ícone Lucide, nunca emoji.
• O catálogo anti-slop foi de 48 para 55 vetos.

Lançamento do Design System

O sistema sai do repositório interno e vira produto público, em domínio próprio, para qualquer pessoa ou Claude da API Capital consumir.

• Primeiro upload para o GitHub, em repositório público, com GitHub Pages e HTTPS em design.apicapital.com.br.
• DESIGN.md completo: tokens de cor com cadeia semântica, escala tipográfica, espaço, forma e os componentes declarados.
• ANTI_SLOP_VISUAL.md: o catálogo de vetos visuais, com teste declarado por veto.
• Biblioteca de ativos: logos, ícones (com a Lucide completa), texturas, gradientes, fotos, wallpapers, social e favicon: 2.147 arquivos indexados por URL no INDICE_ATIVOS.md.
• Folha única de consumo em código: tokens/api-capital.css (fontes, variáveis e classes de componente).
• Skill do Claude v3, ponteiro puro: lê o sistema deste endereço a cada trabalho, sem cópia embutida.