Uma entrada.
A identidade inteira.

Café com BPO — kit completo V4

Para olhar a identidade, use apenas index.html ou o catálogo publicado. Você não precisa abrir cada arquivo. Este pacote é a versão completa de trabalho; novos recursos continuam sujeitos à escolha de Ghuto César.

Para criar outro projeto

1. Entregue o ZIP inteiro à ferramenta ou desenvolvedor. Se a ferramenta não aceita ZIP, extraia e anexe a pasta.
2. Cole o pedido abaixo. A ferramenta lê as regras e utiliza os arquivos; você não escolhe dependências manualmente.
3. Use NOVO-PROJETO.html como tela inicial de referência. O catálogo index.html mostra a biblioteca inteira.

Crie este projeto usando o kit Café com BPO V4 anexado. Leia primeiro INSTRUCAO-PARA-NOVOS-PROJETOS.md e MANUAL-DE-MARCA.md. Reutilize os arquivos e componentes; não apenas imite a captura de tela. Use a aba de fichário como assinatura nas ações documentais, com hierarquia de intensidade. Inclua navegação responsiva, estados e as seis atmosferas. Mostre a primeira tela para minha aprovação. Explique qualquer divergência. Meu pedido específico é: [descreva aqui o aplicativo ou peça].

No Codex, AGENTS.md deve ficar na raiz do novo projeto (ou ter suas regras incorporadas ao arquivo já existente). Em outros construtores, o texto de instrução entra nas regras de projeto. Se o construtor não aceita CSS ou assets próprios, só a referência visual não garante reprodução fiel.

O que o pacote contém

• Manual, regras para ferramentas, guia técnico, lista de decisões e AGENTS.md.
• CSS de base, seis temas, expressão e navegação; JavaScript de navegação e dissolução reutilizável.
• Logo original e versões transparentes colorida, preta e branca em SVG e PNG.
• 48 ícones: sprite, arquivos individuais e manifesto com nomes.
• Fontes locais e licenças, textura de papel, linhas e atmosfera, placas para composição.
• Catálogo único, tela inicial de app e proposta imprimível.
• Movimento de letras, vidro/pixels e storyboard demonstrativo; relatórios de verificação.

Os SVGs de logo são derivados do raster original para tela. Não são vetores mestres de impressão. O kit não inclui backend financeiro, autenticação, vídeo MP4 pronto, trilha sonora ou master de impressão — esses entregáveis não foram criados nesta etapa.

Versões anteriores são histórico. Para iniciar projetos novos, use este ZIP V4 e não combine regras antigas.

Café com BPO — manual de trabalho V4

Ghuto César define e aprova a estética. Este é o manual corrente; substitui as orientações visuais V3/V3.1/V3.2/V3.3 quando houver conflito. O kit é completo para reutilizar o que foi construído, e permanece em desenvolvimento estético.

Direção e decisões

A referência é matéria de trabalho: caderno, ficha, arquivo, documento e conversa. Tecnologia aparece em passagens de composição; valores e ações continuam claros.

Pesquisa de referência não determina gosto. A revisão crítica é responsabilidade de quem projeta, e não vira conteúdo da interface do produto.

Logo

Colorida para assinatura reconhecível sobre fundo com contraste; preta em superfície clara/uma tinta; branca em superfície escura. Na UI, colorida no claro e branca no escuro é o ponto de partida. Fotografia exige escolha pela região de fundo. Não recolorir a versão colorida pela família de UI.

Sem caixa branca involuntária. Área de proteção proposta: altura da linha COM BPO em cada lado. Largura digital inicial de 140 px: conferir a leitura na aplicação real. Não há símbolo compacto oficial aprovado. SVGs/PNGs transparentes são derivados do raster original para tela; master vetorial e mínimos de impressão ainda precisam do original de criação.

Temas, tipo e leitura

CSS de base + cafe-themes.css são a fonte dos tokens. data-cafe-palette aceita cafe, verde, azul; data-cafe-mode aceita light, dark. Cada escuro recebe fundos da sua família. --cafe-brand-yellow conserva #FFC72C; --cafe-accent é a ação da família. --cafe-module orienta módulo; --cafe-success/warning/danger orientam estado com palavras.

DM Sans é a tipografia operacional: menus, campos, status, tabela e números. Newsreader é editorial: abertura, apresentação, citação e cartela. Pesos e escala vêm do CSS. Números tabulares para comparar; dinheiro com moeda e periodicidade. Não usar textura forte atrás de dados ou texto contínuo. Fontes locais com suas licenças acompanham o kit.

Botões, linhas e profundidade

Fichário: contorno 1 px, margem de acento 3 px, aba superior de 10 px e sombra de 4 px. A aba conecta o gesto aos documentos. cafe-command + cafe-command-tab. Uma ação principal por contexto; não repetir fichário em todos os comandos secundários. Controles menores ou secundários podem usar cafe-button.

Recorte: canto 16 px, divisão 1 px e base 3 px; alternativa direta. Trilho: linha 2 px/acento 4 px, tipografia editorial; pode se parecer com um link, preferir composição e apresentação. Nenhuma alternativa é obrigatória.

Linhas gerais: 1 px para detalhes/tabelas; 2 px para agrupar; 4 px para sinal de marca em seção, margem ou cartela. Ajustar em vídeo à escala e resolução. Não aplicar borda grossa em cada campo.

Excluir: superfície neutra, texto claro, margem de risco. Uma exclusão real pede identificação do item e confirmação apropriada. Salvando: opacidade 1, rótulo e progresso; bloqueia repetição. Indisponível é outro estado. Foco visível não depende de brilho ou sombra.

Navegação e ícones

Menu lateral de 240 px no desktop; 76 px recolhido. Rótulo acessível continua presente no modo compacto. Uma seta flutuante atravessa a margem; alvo 44 px. No celular, drawer com diálogo nativo, título, fechar e Escape. Navegação deve conservar seção ativa, contexto e acesso constante às tarefas.

Menu amplo é uma experiência editorial; não é substituição obrigatória da navegação operacional. Ações flutuantes recebem rótulo/contexto, aria-expanded e fechamento previsível. Não esconder ação principal atrás delas.

48 ícones: 42 de operação e navegação + 6 de café. Matriz de 24, traço 1,6, terminações e ritmo comuns; aberturas pequenas como gesto da família. Em 16 px conferir leitura óptica; não presumir que simples escala resolve. Xícara, grão, vapor, coador, pausa e conversa de café entram em comunidade/composição. Conta, pagamento e nota mantêm significado reconhecível. Usar rótulo nas funções; controles só com ícone precisam de aria-label.

Matéria e movimento

Plano limpo para operação. Grão/pauta para apresentação. Esfumaçado tem origem e direção na cena. Luz é borda/linha pontual; placa fosca cria camada. Evitar acumulação automática de grão, fumaça, vidro e brilho. Aprovar a composição inteira.

Resposta de controle: 120–180 ms. Entrada de camada: 800 ms. Atmosfera: 1.800 ms. Dissolução: 2.500 ms, sem loop, superfície original coexistindo com máscara progressiva e pequenos fragmentos da mesma região. A captura dos fragmentos reproduz cor e texto de um painel simples; não é uma biblioteca de screenshot de qualquer HTML. Não aplicar a dados financeiros que precisam permanecer presentes.

Recomposição suave de 500 ms; interrupção limpa. Movimento reduzido entrega o estado sem partículas ou transições. Prefira efeito após gesto explícito e repouso final. Letras entram por palavra em aberturas, não em campos, tabelas e alertas.

Peças, vídeos e documentos

Cartelas: abertura, identificação de pessoa, dados e encerramento. Storyboard de nove segundos em 16:9 e 9:16. Proposta imprimível em HTML. SVGs de placa, luz e esfumaçado: camadas transparentes 1920 × 1080. O SVG da placa não desfoca o vídeo atrás; configurar o desfoque no editor de vídeo. As camadas entregues usam café/amarelo; adaptar deliberadamente à família escolhida.

Vídeos exportados, trilha, fotografia e master de impressão não foram produzidos nesta etapa. Novas peças precisam de composição, áreas seguras do destino e tempo de leitura; não transformar um print do app em template universal.

Continuidade

Leia INSTRUCAO-PARA-NOVOS-PROJETOS.md. Reutilize código/assets; atualize uma versão central do kit em vez de criar bases concorrentes para cada aplicativo. CSS de demonstração não é CSS de produto. backend, regras financeiras e permissões pertencem ao projeto específico.

Registrar futuras decisões: escolhido/ajustado/descartado, data e comentário de Ghuto, exemplo e limite. DECISOES-V4.json acompanha o estado corrente. Verificar seis atmosferas, celular, teclado, contraste e redução de movimento. Verificação técnica não substitui a aprovação estética.

Instrução de projeto — Café com BPO V4

Este documento é a entrada única para a ferramenta. O usuário define a tarefa do novo projeto; o kit define sua identidade.

Ordem de leitura

1. MANUAL-DE-MARCA.md: direção, estados de decisão e limites.
2. GUIA-DE-USO.md: arquivos, classes e integração.
3. DECISOES-V4.json: fonte estruturada do que foi escolhido ou ainda é experimental.
4. NOVO-PROJETO.html: estrutura de partida; index.html: repertório completo.

Regras que devem sobreviver à criação

• A estética é aprovada por Ghuto César. Research/revisão técnica oferece argumentos, sem votação de gosto. A crítica de design é feita pela ferramenta; não criar painéis de “advogado do diabo” no produto.
• Preserve o desenho da logo e sua transparência. Use a versão conforme o contraste real do fundo. Não gerar uma logo nova nem colocar uma caixa branca automática.
• Café, verde e azul, cada uma em claro e escuro. Separe família de cor, cor de módulo e feedback. Use os tokens; não invente hex para cada componente.
• DM Sans para operação; Newsreader para composição editorial. As fontes e licenças ficam em fonts/. Preserve os arquivos e caminhos.
• Aba de fichário é a direção bem recebida. Use cafe-command cafe-command-tab em ações documentais de destaque. Não colocar fichário em cada linha e ação secundária.
• Navegação lateral: expandida/recolhida no desktop; drawer no celular. Setas flutuantes precisam de nome acessível, alvo mínimo de 44 px e estado aria-expanded. Fechar menus com Escape e devolver o foco.
• Ícones: usar a biblioteca de 48. Se precisar de novo, matriz de 24, traço 1,6, parentesco de desenho; verificar em tamanho real e explicar a extensão. Café nos momentos adequados; não transformar todos os símbolos financeiros em xícaras.
• Estados têm rótulo. Salvando continua legível e bloqueia repetição. Indisponível pode perder intensidade. Excluir usa superfície neutra, sinal de risco e confirmação com o item real.
• Valores têm moeda, referência e periodicidade. Contratos/NF têm identificação e estado. Dados fictícios nunca são apresentados como operação real.
• Linhas de 1 px separam detalhes, 2 px agrupam, 4 px assinam composição. A regra é hierarquia, não aplicar a maior espessura em tudo.
• Efeitos são recursos de composição. Reutilize os gestos de cafe-expression.css e cafe-motion.js. Não desaparecer a superfície para então mostrar uma cena desvinculada de partículas.
• Movimento reduzido mostra conteúdo imediatamente. Evite loop decorativo. Informação necessária à tarefa permanece estável.
• Reutilize assets e componentes; não use CSS do catálogo como dependência de produto. Não copie IDs de hospedagem de outro projeto.

Entrega obrigatória ao usuário

Uma primeira tela com menu, ação de fichário, conteúdo e estados. Mostrar as seis atmosferas e a versão de celular. Explicar somente divergências relevantes. Verificar foco/teclado, overflow, contraste e movimento. Não chamar o projeto aprovado apenas porque foi implementado.

O aplicativo precisa de sua própria lógica, dados e permissões. Não transportar JavaScript demonstrativo como se fosse regra financeira.

Guia técnico — kit Café com BPO V4

Esta é a orientação corrente. COMECE-AQUI.md atende ao usuário; este guia atende à implementação. Sem dependências de framework. Fontes locais em fonts/.

Ordem de CSS

1. cafe-design-system.css: tokens/base/componentes.
2. cafe-themes.css: seis atmosferas e ajustes de estado.
3. cafe-expression.css: fichário, recorte, trilho, matéria e movimento.
4. cafe-navigation.css: menu lateral, drawer e setas flutuantes.

Use body class cafe-theme. No html, data-cafe-palette=cafe|verde|azul e data-cafe-mode=light|dark. theme-init.js é um exemplo de preferência local; adapte ao perfil do aplicativo. Suas paletas não mudam o desenho do logo.

JavaScript de produto

• cafe-navigation.js: expansão, drawer e ações flutuantes. data-cafe-collapse no botão dentro de cafe-workspace; data-cafe-drawer e data-cafe-fan apontam para IDs únicos. Não muda dados de negócio.
• cafe-motion.js: new CafeDissolve(panel,canvas,status). play() e restore(animate). Usa o painel DOM simples, uma máscara e fragmentos do mesmo plano. Canvas precisa estar dentro do contêiner da composição. Usa movimento reduzido automaticamente.

catalogo.js, manual.js, expressao.js e identidade.js são da demonstração. Não transportar como lógica financeira. NOVO-PROJETO.html mostra um começo de app com as dependências mínimas e comentários de integração.

Classes principais

Layout: cafe-container, cafe-stack, cafe-cluster, cafe-grid-2/3/4, cafe-main-aside. Tipo: cafe-app-title, cafe-headline, cafe-display, cafe-lead, cafe-caption, cafe-mono. Ações: cafe-button + primary/secondary/text/module/danger; cafe-command + cafe-command-tab/cut/rail. Campos: cafe-field, cafe-field-label, cafe-input, cafe-select, cafe-textarea, cafe-input-group, cafe-check. Dados: cafe-table-scroll, cafe-table, cafe-stat-number, cafe-tag, cafe-alert, cafe-empty, cafe-progress. Navegação V4: cafe-workspace, cafe-rail, cafe-rail-link, cafe-workspace-content, cafe-floating-arrow, cafe-fan-panel. Proposta: cafe-document, cafe-document-header, cafe-document-total. Composição: cafe-frost, cafe-pixel-canvas, cafe-texture-paper/rule, cafe-steam, cafe-light-seam.

Sprite icones-assinatura.svg: usar use href=icones-assinatura.svg#ID em servidor. Ícones individuais em icones/. Lista em icones-manifesto.json. O catálogo e a tela inicial incorporam os symbols para visualização local. Preserve rótulos; ícone isolado exige nome acessível.

Integração e revisão

Links navegam, botões executam ações. Campos têm label; placeholder não substitui rótulo. Erros vinculados por aria-describedby, aria-invalid só no estado real. Dinâmicas anunciadas por role=status. Dados/estado com palavra além da cor. Diálogos têm título e fechamento. Tabelas têm caption, cabeçalhos e scroll limitado à região no celular.

A camada temática ajusta salvar em andamento: opacidade 1. Atributos nativos disabled/aria-busy precisam ser controlados pela lógica real. Cor de módulo não presume texto branco em todas as atmosferas. Confira pares efetivamente renderizados.

Não carregar catalogo.css, expressao.css, manual.css ou identidade.css como base de produto: são layouts de catálogo. Em uma nova aplicação, crie o layout sobre os quatro CSS de produto e os tokens.

Sirva fontes/CSS/SVGs no mesmo projeto. O kit inclui fontes e licenças; preserve os arquivos. A proposta-exemplo.html tem perfil próprio de impressão: conferir A4/paginação antes de uma proposta real.

A regra de criação está em INSTRUCAO-PARA-NOVOS-PROJETOS.md. Este guia não define outra paleta, aprovação ou proibição de efeitos.

Café com BPO — orientação do projeto V4

Leia INSTRUCAO-PARA-NOVOS-PROJETOS.md, MANUAL-DE-MARCA.md e GUIA-DE-USO.md deste kit. Se o kit estiver numa subpasta, localize os arquivos antes de implementar.

Ghuto César aprova a estética. Aba de fichário é a direção bem recebida. Preserve logo transparente, seis atmosferas, fontes e biblioteca de ícones. Reutilize componentes, navegação e assets. Não copiar IDs de hospedagem do catálogo para um novo projeto.

Faça crítica de design internamente; mostre propostas concretas e divergências relevantes. Não criar painéis de advogado do diabo na interface. Efeitos novos continuam para avaliação, e dados operacionais permanecem estáveis. Verificar teclado, celular e movimento reduzido. Não apresentar demonstrações como dados ou backend real.

{
  "kit_version": "4.0.0",
  "aesthetic_owner": "Ghuto César",
  "authoritative_documents": ["INSTRUCAO-PARA-NOVOS-PROJETOS.md", "MANUAL-DE-MARCA.md", "GUIA-DE-USO.md"],
  "palette_families": ["cafe", "verde", "azul"],
  "modes": ["light", "dark"],
  "direction": {"document_action": "cafe-command cafe-command-tab", "state": "bem recebida por Ghuto, aplicações revisáveis"},
  "alternatives": ["cafe-command-cut", "cafe-command-rail"],
  "required": ["logo preservado e transparente", "seis atmosferas", "DM Sans e Newsreader", "dados e estados explícitos", "opacidade 1 em salvamento", "menu responsivo e foco", "movimento reduzido"],
  "experimental": ["biblioteca de 48 ícones", "vidro e dissolução", "esfumaçado e grão", "luz e placa suspensa", "cartelas e storyboard"],
  "review": "Crítica interna da ferramenta; não criar painéis de advogado do diabo no produto.",
  "not_delivered": ["backend financeiro", "MP4 final", "trilha sonora", "master vetorial de impressão"]
}

Verificação e revisão V4

Ghuto César aprova a estética. Revisão independente por outro agente: a direção funciona; fichário é a assinatura mais convincente; consolidar regras, navegação e continuidade da dissolução. Essas prioridades foram implementadas no V4. Não houve pesquisa de uso com operadores.

Verificações técnicas atuais: verificacao-v4.json. O histórico de pesquisa e versões fica em sites/referencias-v33 no workspace, fora das regras de início de novos projetos. Verificação automatizada não é auditoria completa de acessibilidade nem aprovação estética.