Brand & Design

Brand-design for a restaurant isn’t a logo — it’s the feeling a guest has when the door closes behind them, and whether the website matches it. Most independent restaurants have one of two failure modes: the brand is strong in the room and absent online, or the brand is loud online and disconnected from what walks in. The bridge is a small set of design tokens — the palette, the typography, the photo treatment, the voice — applied consistently across the site, the GBP, the menu, and the printed materials. It doesn’t take a rebrand; most operators get 80% of the way there with a Saturday morning, a color palette, and three accessible color pairs.

This pillar collects the playbooks, glossary terms, and tools for the design work that touches the website. Read it linearly if you’re building a brand from scratch; jump to a section if you’re fixing a specific piece.

Brand is a system, not a logo

The five elements that carry an independent restaurant’s visual identity, in order of operator-leverage:

• Color palette. Three to five colors maximum: a primary (your “brand color”), a secondary or accent, ink (near-black for body text), cream or paper (for backgrounds), and one alert color if you ship a tool or form. The hard part is the accessible pair — a color combination whose contrast meets WCAG 2.2 AA at body-text size. The free Brand Suite tool generates accessible pairs from any starting hue.
• Typography. Two faces, almost always: a display font for headlines (the personality), a text font for body (the readability). For independent restaurants the proven combinations are a serif display (Fraunces, Cormorant Garamond, EB Garamond) paired with a humanist sans (Inter, Source Sans, Public Sans). Avoid pairing two display faces; avoid pairing two sans faces. The photo spec sheet includes the type pairings used on real restaurant builds.
• Photo treatment. Are your photos warm or cool? High-contrast or muted? Plate-tight or table-wide? Pick a treatment and stay within it across the site, GBP, social, and print. Inconsistency is what reads as “they hired three different vendors” — and that’s the brand.
• Voice. The way the website talks. First-person from the chef? Third-person editorial? Casual playful? Formal restrained? The voice contract on this site (/methods/#voice-contract) is one model: short declaratives, no marketing-speak, no exclamation marks. Pick a register and stay there.
• Iconography. If you use icons (in nav, on tools, on the menu page), they need a single stroke-width, a single corner-radius, and a single visual weight. Mixing line and filled icons reads as inconsistent. Use a single icon set; if your site needs a custom icon, brief a designer and add it to the system.

Codify these five into a tokens file (a JSON or CSS-custom-property block) that the website, the email templates, and the print designer all reference. Once tokens exist, “brand changes” become two-line edits, not redesigns.

Accessibility is brand work too

The launch plan’s accessibility target (/accessibility.html) is WCAG 2.2 AA. Most operators read “accessibility” as a separate compliance bucket; in practice it’s a brand discipline. Three places where the lines blur:

• Color contrast. A primary-on-cream pair that fails 2.2 AA at 16px is not a brand decision — it’s a visibility decision the elderly and the partially-sighted can’t see. Adjust the lightness of one of the colors until it passes; the hue stays. Accessible pair is the term; the Brand Suite shows you which of your palette’s pairs pass and which don’t.
• Type sizes. 16px body floor on phones. Smaller-than-that is a brand decision that fails 5% of your audience. The rare exception is footnote text or aria-hidden ornament; never the menu prices, never the body copy.
• Focus rings. The yellow-ring default the browsers ship is ugly and works. Replace it with a 2px ring in your accent color — no thinner, no transparent, no pure CSS-removed. The keyboard user’s experience is part of the brand.

Three brand failure modes specific to restaurant websites

1. The Wix-template tell. Stock fonts, stock hero photo, stock testimonials block, mid-2010s “parallax” scroll. The visitor’s read is “this restaurant didn’t care enough to do this themselves.” The fix isn’t custom-from-scratch; the fix is removing the tells. Self-host the type, replace the stock photo with one operator-shot image, kill the parallax. Wix vs. custom walks through the six places Wix runs out of room for an independent.
2. The agency-rebrand tell. Excessive whitespace, abstract shapes, “authentic” in the about copy, a font that’s too refined for the food. The visitor’s read is “this restaurant hired the wrong agency.” The food doesn’t need design at this level; the design is competing with the menu. Match the visual register to the operating reality.
3. The mismatch. The room is warm, hand-made, family-owned. The website looks like a tech startup. Or the room is precise, plated, fine-dining. The website looks like a Wordpress blog. The mismatch costs reservations because the visitor’s expectation set on the website doesn’t match what they walk into. The two have to agree.

Photography is the brand-bearing artifact

Photography correlates with consideration but not with conversion (per the 1% margin audit findings). What that means: phenomenal photography doesn’t fix a leaky funnel, but bad photography puts a ceiling on perceived value. Three rules:

• Light is everything. Daylight at the window, mid-morning, with a white reflector to fill shadows. The most expensive iPhone photo with bad light beats the cheapest DSLR photo with good light, every time. The photo spec sheet covers the lighting setup.
• Spec sheets to photographers. Hand a photographer the Photo Brief output before the shoot. Aspect ratios, file sizes, surface targets. Avoid the “four hours of photos that look great but don’t fit anywhere” outcome.
• Don’t use AI-generated food. The /ai/ page commits to this; operators should too. The room can tell. The reviewer can tell. The visitor can tell. Real plates by a real photographer.

Where this topic touches the others

• Conversions & Content — because brand consistency lifts perceived value, and perceived value lifts the price ceiling. The bavette steak that costs $34 in a beautifully-designed menu reads as cheaper than the same steak at $34 in an ugly menu.
• Speed & Mobile — because design choices (large hero photo, web fonts, custom cursors, hover animations) trade against speed. Good designers know the tradeoff explicitly.
• Trust & Reviews — because the trust signals on a website (the about page, the reviews-aggregate, the press mentions) are visual artifacts and earn their visual treatment.

The composite to watch: Brand Suite consistency score. Run the tool quarterly with your current palette. The pass/fail on accessible pairs is the only metric that matters; everything else is taste.