LucasH1225/palette-couleurs-site-restaurant

Palette de marque restaurant

Transformer les preuves visuelles d'un restaurant en un système de couleurs de site web petit et accessible. Considérez les couleurs répétées des enseignes, logos, menus et intérieurs comme des preuves. Considérez les rôles finaux des tokens et leurs proportions comme une décision de conception qui doit préserver ces preuves tout en garantissant la lisibilité du site.

Lisez references/brand-palette-playbook.md avant d'extraire ou de choisir des couleurs. Lisez references/palette-combinations.md lors de la sélection d'une famille de combinaisons réutilisables. Copiez assets/brand-palette-template.json et utilisez assets/palette-combo-library.json au lieu d'inventer une palette non enregistrée.

Choisir le mode

• Extraire : Échantillonner des nuances candidates à partir de régions d'image sélectionnées sans décider de leur signification.
• Auditer : Classifier les couleurs comme ancres de marque, couleurs de soutien, neutres, couleurs incidentes ou bruit rejeté.
• Créer : Sélectionner une ancre, une famille de combinaisons et un système de tokens de site web complet.
• Rafraîchir : Revérifier les preuves ou le contraste et mettre à jour un verrou de palette existant sans modifier la structure de mise en page.
• Réviser : Générer l'aperçu, valider chaque paire requise et signaler le contrat d'intégration.

Laissez $restaurant-demo-builder choisir la recette, la grammaire de mise en page, l'audience et l'objectif de conversion. Utilisez cette compétence après que les preuves d'identité sont établies et avant que le style visuel ne soit finalisé. Laissez $restaurant-exterior-image-studio produire un visuel de vitrine ; cette compétence peut inspecter sa source factuelle non modifiée pour des preuves de couleur, mais ne doit pas traiter une sortie retouchée par IA comme une nouvelle vérité de marque.

Préparer le verrou de palette

Enregistrez brand-palette.json à côté du dossier de recherche de la démo ou du verrou de recette. Enregistrez :

• l'identité du restaurant et les sources de preuves ;
• les couleurs observées, les régions, les identifiants de source, la confiance et la classification ;
• les couleurs rejetées et les raisons du rejet ;
• l'ancre sélectionnée et l'identifiant de combinaison réutilisable ;
• la dérivation des couleurs observées aux tokens du site web ;
• les paires premier plan/arrière-plan requises ;
• les proportions de couleur prévues et les notes d'utilisation ;
• l'état de révision et si le résultat est dérivé de preuves ou un repli clairement étiqueté.

Gardez les URLs sources, les dates de vérification et les valeurs SHA-256. Ne stockez jamais de jetons API ou d'informations d'identification privées.

Inspecter les preuves avant l'échantillonnage

Privilégiez les surfaces répétées et porteuses d'identité :

1. logo officiel ou marque verbale ;
2. enseigne de vitrine, auvent ou peinture de façade intentionnelle ;
3. titres de menu imprimés, règles et panneaux de marque ;
4. couleurs intérieures répétées (mur, cabine, carrelage ou comptoir) ;
5. emballages, uniformes ou graphiques sociaux uniquement lorsque leur identité actuelle de restaurant est vérifiée.

Rejetez ou isolez les couleurs alimentaires, la peau, le ciel, les nuages, les arbres, l'herbe, l'asphalte, les commerces voisins, les reflets, la décoration temporaire, la lueur des écrans, les dominantes chaudes des ampoules, les ombres profondes de l'appareil photo et les erreurs de balance des blancs automatiques. Ne choisissez pas « le pixel le plus courant » comme couleur de marque.

Inspectez chaque source avec view_image. Lorsque l'échantillonnage exact est utile, recadrez uniquement la région vérifiée de la marque :

python3 <palette-skill>/scripts/extract_swatches.py \
  --image <source-image> \
  --crop <left> <top> <right> <bottom> \
  --colors 8 \
  --output <work-order>/sampled-storefront-colors.json

Le script signale les pixels, pas la signification de la marque. Enregistrez pourquoi une couleur échantillonnée est pertinente avant de la promouvoir.

Sélectionner une ancre et une famille de combinaisons

Choisissez l'ancre parmi des preuves répétées à haute confiance. Privilégiez un accord entre deux types de sources différents (par exemple, enseigne plus menu) plutôt qu'une répétition dans une seule photographie. Lorsqu'un seul logo ou menu propre et contrôlé par le propriétaire existe, cela peut suffire si la région est sans ambiguïté.

Ne forcez pas l'ancre littérale à couvrir la majeure partie de la page. Traitez-la comme l'ancre de marque pour les actions, les titres, les règles ou les bandes structurelles. Dérivez une toile calme et une surface neutre afin que la nourriture, le texte du menu et les directions restent faciles à parcourir. Un ratio 70 / 20 / 10 toile-et-surface / structurel / accent est un point de départ, pas une formule fixe.

Choisissez la famille la plus proche dans la bibliothèque de combinaisons, puis adaptez ses rôles aux preuves. La bibliothèque est un guide de rôle et d'harmonie, pas une preuve de marque de restaurant. Enregistrez chaque assombrissement, éclaircissement, désaturation ou neutralisation dans derivations. Limitez les changements de teinte ; si une teinte différente est nécessaire pour la lisibilité ou l'harmonie, utilisez-la uniquement comme couleur de soutien et expliquez le choix.

Lorsqu'aucune couleur de marque fiable n'existe, utilisez un repli neutre compatible avec la recette, définissez selection.mode sur recipe-fallback, et étiquetez la palette comme une proposition créative. Ne prétendez pas qu'elle provient du restaurant.

Construire les tokens du site web

Fournissez tous les tokens du modèle, y compris la toile, les surfaces, le texte du corps, le texte atténué, l'action principale, l'état au survol, le texte sur action, l'accent, le texte sur accent, la bordure, la bordure de contrôle et le focus. Utilisez l'ancre comme source pour primary lorsque possible, mais assombrissez-la ou éclaircissez-la lorsque nécessaire pour le contraste du texte.

Enregistrez les paires requises pour le texte normal, le grand texte et les contrôles non textuels. Validez le texte normal à 4.5:1, le grand texte à 3:1, et les limites de contrôle ou de focus significatives à 3:1. Ne vous fiez pas uniquement à la couleur pour communiquer les états sélectionné, erreur ou disponibilité.

Exécutez la porte de preuves avant le travail sur les tokens et la porte de transfert après que tous les tokens sont complets :

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évisualiser avant l'intégration

Générez un aperçu autonome montrant les tokens, les boutons, les lignes de menu, les surfaces de preuve et les paires mesurées :

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

Inspectez l'aperçu visuellement. Vérifiez que le résultat évoque le restaurant, ne devient pas un mur indifférencié de la couleur d'ancre, préserve l'appétit pour la nourriture et maintient le texte atténué lisible sur mobile.

Transférer au constructeur de démo

Passez à $restaurant-demo-builder le brand-palette.json validé, l'aperçu et ces contraintes :

• préserver la recette sélectionnée et l'empreinte de mise en page ;
• mapper les tokens enregistrés dans des variables CSS plutôt que d'introduire des valeurs hexadécimales ad hoc ;
• utiliser l'ancre selon le rôle et la proportion enregistrés ;
• garder la gradation colorimétrique des photographies séparée des couleurs de l'interface utilisateur ;
• réexécuter la validation de la palette après toute modification de token ;
• vérifier visuellement sur desktop et mobile, y compris le texte sur les images et tous les états de bouton.

Ne laissez pas la sélection de palette forcer une ancienne structure de page ou écraser des preuves vérifiées de restaurant. La mise en page, la couleur de marque et la photographie sont des verrous séparés qui se rencontrent dans la démo finale.

Transfert

Signalez les couleurs de preuves acceptées et rejetées, la confiance en l'ancre, la combinaison sélectionnée, les dérivations de tokens, les résultats de contraste mesurés, le chemin de l'aperçu, le statut de repli et toute question de vérification auprès du propriétaire. Ne publiez pas et ne contactez pas le restaurant sans autorisation explicite.

Exemples d'invocations

• $restaurant-brand-palette Inspecte cette photo de vitrine, ce menu et cette salle, puis crée un verrou de palette pour le site web.
• $restaurant-brand-palette Extrais les vraies couleurs de marque et explique quelles couleurs de la photo tu as rejetées comme éclairage ou environnement.
• $restaurant-brand-palette Révise cette palette de démo, répare les combinaisons faibles et transmet les rôles CSS validés à restaurant-demo-builder.