Paleta de Marca para Restaurante

O que Paleta de Marca para Restaurante faz?

Transforme evidências visuais de restaurante em um sistema de cores pequeno e acessível para websites. Trate cores repetidas de placas, logotipos, cardápios e interiores como evidência. Considere os papéis finais dos tokens e suas proporções como uma decisão de design que deve preservar essa evidência, mantendo o site legível.

Leia references/brand-palette-playbook.md antes de extrair ou escolher cores. Leia references/palette-combinations.md ao selecionar uma família de combinação reutilizável. Copie assets/brand-palette-template.json e use assets/palette-combo-library.json em vez de inventar uma paleta não registrada.

Escolha o Modo

• Extrair: Amostre amostras candidatas de regiões de imagem selecionadas sem decidir seu significado.
• Auditar: Classifique cores como âncoras da marca, cores de suporte, neutros, cores incidentais ou ruído rejeitado.
• Criar: Selecione uma âncora, uma família de combinação e um sistema completo de tokens do website.
• Atualizar: Reavalie evidências ou contraste e atualize um bloqueio de paleta existente sem alterar a estrutura do layout.
• Revisar: Renderize a pré-visualização, valide cada par exigido e relate o contrato de integração.

Deixe que $restaurant-demo-builder escolha a Receita, gramática de layout, público e objetivo de conversão. Use esta Skill após a identidade ser estabelecida e antes da estilização visual ser finalizada. Deixe que $restaurant-exterior-image-studio produza um ativo de fachada; esta Skill pode inspecionar sua fonte factual intocada em busca de evidências de cor, mas não deve tratar uma saída reestilizada por IA como nova verdade da marca.

Prepare o Bloqueio de Paleta

Salve brand-palette.json junto ao registro de pesquisa ou bloqueio de receita da Demonstração. Registre:

• identidade do restaurante e fontes de evidência;
• cores observadas, regiões, IDs de fonte, confiança e classificação;
• cores rejeitadas e motivos de rejeição;
• âncora selecionada e ID de combinação reutilizável;
• derivação das cores observadas para os tokens do website;
• pares necessários de primeiro plano/fundo;
• proporções de cor pretendidas e notas de uso;
• status de revisão e se o resultado é derivado de evidência ou uma substituição claramente rotulada.

Mantenha URLs de fonte, datas verificadas e valores SHA-256. Nunca armazene tokens de API ou credenciais privadas.

Inspecione Evidências Antes de Amostrar

Prefira superfícies repetidas e portadoras de identidade:

1. logotipo oficial ou marca nominal;
2. placa de fachada, toldo ou pintura deliberada da fachada;
3. títulos de cardápio impressos, regras e painéis com marca;
4. cores repetidas de parede, cabine, azulejo ou balcão;
5. embalagens, uniformes ou gráficos sociais apenas quando sua identidade atual do restaurante for verificada.

Rejeite ou isole cores de comida, pele, céu, nuvens, árvores, grama, asfalto, comércios vizinhos, reflexos, decoração temporária, brilho de tela, tons de lâmpada, sombras profundas de câmera e erros automáticos de balanço de branco. Não escolha "o pixel mais comum" como cor da marca.

Inspecione cada fonte com view_image. Quando a amostragem exata for útil, recorte apenas a região verificada da marca:

python3 <palette-skill>/scripts/extract_swatches.py \
  --image <fonte-da-imagem> \
  --crop <esquerda> <topo> <direita> <base> \
  --colors 8 \
  --output <ordem-de-trabalho>/cores-amostradas-da-fachada.json

O script relata pixels, não significado da marca. Registre por que uma cor amostrada é relevante antes de promovê-la.

Selecione uma Âncora e uma Família de Combinação

Escolha a âncora a partir de evidências repetidas de alta confiança. Prefira concordância entre dois tipos diferentes de fonte, como placa mais cardápio, em vez de repetição dentro de uma única fotografia. Quando houver apenas um logotipo ou cardápio limpo e controlado pelo proprietário, pode ser suficiente se a região for inequívoca.

Não force a âncora literal a cobrir a maior parte da página. Trate-a como a âncora da marca para ações, cabeçalhos, regras ou faixas estruturais. Derive uma tela e superfície neutras e silenciosas para que comida, texto do cardápio e direções permaneçam fáceis de escanear. Uma proporção de 70 / 20 / 10 de tela-e-superfície / estrutural / destaque é um ponto de partida, não uma fórmula fixa.

Escolha a família mais próxima na biblioteca de combinações, depois adapte seus papéis à evidência. A biblioteca é um guia de papéis e harmonia, não uma prova do branding do restaurante. Registre cada escurecimento, clareamento, dessaturação ou neutralização em derivations. Mantenha mudanças de matiz contidas; se um matiz diferente for necessário para legibilidade ou harmonia, use-o apenas como cor de suporte e explique a escolha.

Quando não houver cor de marca confiável, use uma substituição neutra compatível com a Receita, defina selection.mode como recipe-fallback e rotule a paleta como uma proposta criativa. Não afirme que veio do restaurante.

Construa Tokens do Website

Forneça todos os tokens no template, incluindo tela, superfícies, texto do corpo, texto suave, ação primária, estado de hover, texto sobre primário, destaque, texto sobre destaque, borda, borda de controle e foco. Use a âncora como fonte para primary quando possível, mas escureça ou clareie quando necessário para contraste de texto.

Registre pares necessários para texto normal, texto grande e controles não textuais. Valide texto normal em 4,5:1, texto grande em 3:1 e limites significativos de controle ou foco em 3:1. Não confie apenas na cor para comunicar estados selecionado, erro ou disponibilidade.

Execute o portão de evidências antes do trabalho com tokens e o portão de entrega após todos os tokens estarem completos:

python3 <palette-skill>/scripts/validate_palette.py \
  --palette <demo>/brand-palette.json \
  --combo-library <palette-skill>/assets/palette-combo-library.json \
  --stage evidence

python3 <palette-skill>/scripts/validate_palette.py \
  --palette <demo>/brand-palette.json \
  --combo-library <palette-skill>/assets/palette-combo-library.json \
  --stage handoff

Pré-visualize Antes da Integração

Renderize uma pré-visualização independente mostrando tokens, botões, linhas de cardápio, superfícies de prova e pares medidos:

python3 <palette-skill>/scripts/render_palette_preview.py \
  --palette <demo>/brand-palette.json \
  --out <demo>/brand-palette-preview.html

Inspecione a pré-visualização visualmente. Verifique se o resultado parece com o restaurante, não se torna uma parede indiferenciada da cor âncora, preserva o apetite pela comida e mantém o texto suave legível em dispositivos móveis.

Entregue ao Construtor de Demonstração

Passe para $restaurant-demo-builder o brand-palette.json validado, a pré-visualização e estas restrições:

• preserve a Receita selecionada e a impressão digital do layout;
• mapeie os tokens registrados em variáveis CSS em vez de introduzir valores hexadecimais ad hoc;
• use a âncora de acordo com o papel e proporção registrados;
• mantenha a gradação de cor da fotografia separada das cores da interface;
• reexecute a validação da paleta após qualquer alteração de token;
• verifique visualmente desktop e mobile, incluindo texto sobre imagens e todos os estados de botão.

Não deixe que a seleção da paleta force um esqueleto de página antigo ou sobrescreva evidências verificadas do restaurante. Layout, cor da marca e fotografia são bloqueios separados que se encontram na Demonstração final.

Entrega

Relate cores de evidência aceitas e rejeitadas, confiança da âncora, combinação selecionada, derivações de tokens, resultados de contraste medidos, caminho da pré-visualização, status de substituição e quaisquer perguntas de verificação com o proprietário. Não publique nem entre em contato com o restaurante sem autorização explícita.

Exemplos de Invocação

• $restaurant-brand-palette Inspecione esta foto de fachada, cardápio e sala de jantar e crie um bloqueio de paleta para o site.
• $restaurant-brand-palette Extraia as verdadeiras cores da marca e explique quais cores da foto você rejeitou como iluminação ou ambiente.
• $restaurant-brand-palette Revise esta paleta de Demonstração, corrija as combinações fracas e entregue papéis CSS validados para o construtor de demonstração do restaurante.