LucasH1225/restaurant-website-skills

Restaurant Brand Palette

Turn restaurant visual evidence into a small, accessible website color system. Treat repeated sign, logo, menu and interior colors as evidence. Treat the final token roles and proportions as a design decision that must preserve that evidence while keeping the website readable.

Read references/brand-palette-playbook.md before extracting or choosing colors. Read references/palette-combinations.md when selecting a reusable combination family. Copy assets/brand-palette-template.json and use assets/palette-combo-library.json instead of inventing an unrecorded palette.

Choose The Mode

• Extract: Sample candidate swatches from selected image regions without deciding their meaning.
• Audit: Classify colors as brand anchors, supporting colors, neutrals, incidental colors or rejected noise.
• Create: Select one anchor, one combination family and a complete website token system.
• Refresh: Recheck evidence or contrast and update an existing palette lock without changing layout structure.
• Review: Render the preview, validate every required pairing and report the integration contract.

Let $restaurant-demo-builder choose Recipe, layout grammar, audience and conversion objective. Use this Skill after identity evidence is established and before visual styling is finalized. Let $restaurant-exterior-image-studio produce a storefront asset; this Skill may inspect its untouched factual source for color evidence but must not treat an AI-restyled output as new brand truth.

Prepare The Palette Lock

Save brand-palette.json beside the Demo research record or recipe lock. Record:

• restaurant identity and evidence sources;
• observed colors, regions, source IDs, confidence and classification;
• rejected colors and rejection reasons;
• selected anchor and reusable combination ID;
• derivation from observed colors to website tokens;
• required foreground/background pairings;
• intended color proportions and usage notes;
• review status and whether the result is evidence-derived or a clearly labeled fallback.

Keep source URLs, checked dates and SHA-256 values. Never store API tokens or private credentials.

Inspect Evidence Before Sampling

Prefer repeated, identity-bearing surfaces:

1. official logo or wordmark;
2. storefront sign, awning or deliberate facade paint;
3. printed menu headings, rules and branded panels;
4. repeated interior wall, booth, tile or service-counter colors;
5. packaging, uniforms or social graphics only when their current restaurant identity is verified.

Reject or isolate food colors, skin, sky, clouds, trees, grass, asphalt, neighboring businesses, reflections, temporary decor, screen glow, warm bulb casts, deep camera shadows and automatic white-balance errors. Do not choose “the most common pixel” as the brand color.

Inspect each source with view_image. When exact sampling is useful, crop only the verified branded region:

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

The script reports pixels, not brand meaning. Record why a sampled color is relevant before promoting it.

Select One Anchor And A Combination Family

Choose the anchor from repeated high-confidence evidence. Prefer agreement across two different source types, such as sign plus menu, over repetition inside one photograph. When only one clean owner-controlled logo or menu exists, it may be enough if the region is unambiguous.

Do not force the literal anchor to cover most of the page. Treat it as the brand anchor for actions, headings, rules or structural bands. Derive a quiet canvas and surface neutral so food, menu text and directions remain easy to scan. A 70 / 20 / 10 canvas-and-surface / structural / accent ratio is a starting point, not a fixed formula.

Choose the closest family in the combo library, then adapt its roles to the evidence. The library is a role and harmony guide, not proof of restaurant branding. Record every darkening, lightening, desaturation or neutralization in derivations. Keep hue changes restrained; if a different hue is required for legibility or harmony, use it only as a support color and explain the choice.

When no reliable brand color exists, use a Recipe-compatible neutral fallback, set selection.mode to recipe-fallback, and label the palette as a creative proposal. Do not claim it came from the restaurant.

Build Website Tokens

Provide all tokens in the template, including canvas, surfaces, body text, muted text, primary action, hover state, on-primary text, accent, on-accent text, border, control border and focus. Use the anchor as the source for primary when possible, but darken or lighten it when needed for text contrast.

Record required pairings for normal text, large text and non-text controls. Validate normal text at 4.5:1, large text at 3:1, and meaningful control or focus boundaries at 3:1. Do not rely on color alone to communicate selected, error or availability states.

Run the evidence gate before token work and the handoff gate after all tokens are complete:

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

Preview Before Integration

Render a standalone preview showing tokens, buttons, menu rows, proof surfaces and measured pairings:

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

Inspect the preview visually. Check that the result feels like the restaurant, does not become an undifferentiated wall of the anchor color, preserves food appetite, and keeps muted text readable on mobile.

Hand Off To Demo Builder

Pass $restaurant-demo-builder the validated brand-palette.json, preview and these constraints:

• preserve the selected Recipe and layout fingerprint;
• map the recorded tokens into CSS variables rather than introducing ad hoc hex values;
• use the anchor according to the recorded role and proportion;
• keep photography color grade separate from UI colors;
• rerun palette validation after any token change;
• visually verify desktop and mobile, including text over images and all button states.

Do not let palette selection force an old page skeleton or override verified restaurant evidence. Layout, brand color and photography are separate locks that meet in the final Demo.

Handoff

Report accepted and rejected evidence colors, anchor confidence, selected combination, token derivations, measured contrast results, preview path, fallback status and any owner-verification questions. Do not publish or contact the restaurant without explicit authorization.

Example Invocations

• $restaurant-brand-palette Inspect this storefront, menu and dining-room photo, then create a website palette lock.
• $restaurant-brand-palette Extract the real brand colors and explain which photo colors you rejected as lighting or environment.
• $restaurant-brand-palette Review this Demo palette, repair the weak combinations and hand validated CSS roles to restaurant-demo-builder.