Locals Diner, as shipped

Overview

Locals Diner should feel like the familiar neighborhood place whose sign has been on the road for years, even though the business is young. The identity combines bold roadside lettering with warm, readable restaurant copy. It is proud, generous, local, and unpretentious.

The system is built around four recognizable ingredients:

1. Anton display type recalls painted diner signs and menu boards.
2. Georgia body type gives stories, hours, and menu descriptions a familiar printed warmth.
3. Cream, navy, steel blue, and teal connect the dining room, badge logo, and digital interface.
4. Real food and community photography provides the proof. The restaurant must look inhabited, not staged.

The central promise is “Where locals become family.” Every page should help a guest do one of four things quickly: understand what is served, confirm hours, find the restaurant, or feel welcome enough to visit.

Brand principles

• Neighborly, not nostalgic theater. Use diner cues without fake 1950s chrome, checkerboard overload, or costume graphics.
• Generous, not cluttered. Content should communicate large portions and warmth while preserving clear hierarchy.
• Local proof over claims. Real guests, local groups, staff, events, and food beat generic hospitality language.
• Practical information first. Hours, phone, address, menu, parking, and order status must never be buried.
• Family legacy with restraint. Tell the family story plainly. Do not turn grief or heritage into sales decoration.

Colors

Core palette

• **Teal (#008EB3)** is the action and recognition color. Use it for primary buttons, links, active navigation, slim card accents, and short emphasized phrases.
• **Midnight Navy (#0D1321)** anchors high-contrast sections and represents the dark face of the badge identity.
• **Blue Gray (#1D2D44)** is the preferred dark card and secondary section surface.
• **Steel Blue (#3E5C76)** supports large section bands and secondary information.
• **Powder Blue (#748CAB)** is a limited supporting surface, particularly loyalty and community sections.
• **Cream (#F0EBD8)** is the primary warm canvas and preferred text on dark surfaces.
• **Charcoal (#231F20)** belongs primarily to navigation and footer structures.

Usage ratio

Aim for roughly 55 percent cream or white, 30 percent navy and blue surfaces, 10 percent photographic content, and 5 percent teal. Teal loses meaning when it fills large backgrounds repeatedly.

Theme behavior

Light and dark themes must preserve the same hierarchy:

Dark mode is not an inversion. Keep cream typography, blue-black surfaces, natural photography, and teal action states. Avoid pure black except for controlled image overlays.

Contrast

• Midnight navy on teal is the default button pair and passes AA at normal text sizes. White button text is reserved for the darker hover and active teal states.
• Cream on navy and navy on cream are the default high-contrast pairs.
• Powder blue must not carry small text without testing.
• Teal text on cream is suitable for bold links; never use thin teal body copy.
• Error and success colors require explicit labels or icons. Color alone never communicates status.

Typography

Display voice

Anton is the restaurant sign voice. Use it for page titles, section headings, card titles, and short promotional statements. It is always uppercase, but the source text should remain normal text rather than hard-coded capitals for screen-reader clarity.

• Limit Anton headings to short phrases.
• Do not use Anton for paragraphs, navigation lists, form fields, prices, or legal copy.
• Reduce spacing rather than shrinking below 1.25rem when a label runs long.
• Avoid fake bold weights. Anton has one useful visual weight.

Reading voice

Georgia is the hospitality voice. Use it for body text, navigation, buttons, menu descriptions, addresses, hours, and links. It feels familiar and prints reliably.

• Keep body copy between 16px and 18px with at least 1.55 line height.
• Keep prose to 60 to 72 characters per line.
• Use bold sparingly for prices, hours, and details guests scan.
• Italics are reserved for short service notes and genuine quotations.

Hierarchy

• One display-xl heading per page.
• Major homepage sections use display-lg.
• Card titles use display-md or heading-sm according to density.
• Buttons use bold Georgia rather than Anton. Actions should be instantly readable.
• Menu item names may use Anton, while descriptions and prices use Georgia.

Layout

Grid

• Maximum content width: 1160px.
• Desktop: 12 columns with 32px gutters.
• Tablet: 8 columns with 24px gutters.
• Mobile: 4 columns with 20px page gutters.
• Two-column story blocks split evenly unless one side contains a dominant photograph.
• Three-card collections use equal widths and shared baselines.
• Hours, address, phone, and parking should stay grouped as one practical-information unit.

Rhythm

• Standard section padding: 80px desktop, 64px tablet, 48px mobile.
• Card padding: 32px desktop and 24px mobile.
• Use cream and blue section bands to create cadence. Do not alternate colors mechanically when the content belongs together.
• Center headings for broad section introductions. Left-align paragraphs, menu content, and practical information.
• Keep the primary call to action within the first viewport, directly after the brand promise.

Responsive behavior

• Collapse navigation below 960px into a labeled menu button.
• Keep the logo visible but reduce its size so it does not dominate mobile navigation.
• Stack three-column cards at 760px or when text becomes cramped.
• Place hours and location information before long story content on mobile.
• Never render horizontal page scrolling.
• Interactive targets are at least 44px square with 8px minimum separation.

Elevation & Depth

The interface should feel tangible, like printed menus and painted signs, without becoming glossy.

• Standard cards use a subtle warm shadow and one teal left edge, not a heavy border on every side.
• Navigation may use one low shadow to separate it from hero imagery.
• Buttons may use a restrained teal-tinted shadow. Remove or tighten it on press.
• Image overlays use navy at 55 to 70 percent opacity to protect typography.
• Avoid glass blur, neon glow, bevels, metallic gradients, and stacked shadow effects.
• Dark theme cards are separated primarily by surface value and border, not stronger shadows.

Shapes

• Content cards use 10px corners.
• Image cards use 10px to 14px corners and clip the photograph cleanly.
• Primary actions use pill geometry, echoing the rounded badge logo.
• Form controls use 6px corners.
• Full-width section bands and navigation remain square.
• Do not apply pill shapes to every label or navigation item.

The circular badge logo and framed banner logo are the signature marks. Give each clear space equal to at least one quarter of its height. Never stretch, recolor, crop, redraw, or add effects to either logo.

Components

Navigation

Desktop navigation centers the banner logo between two balanced link groups. Facebook and online ordering sit at the edges. The layout should feel symmetrical but must yield gracefully on smaller screens.

• Use cream links on charcoal.
• Active and hover states use teal plus an underline or bottom rule.
• “Online Ordering” must reflect truthful status. If unavailable, use a disabled informational treatment and never style it as an actionable control.
• The mobile menu must trap no focus, close with Escape, and restore focus to its trigger.

Hero

Use one documentary restaurant image with a dark navy overlay. Place the circular badge, brand promise, short supporting phrase, and one primary menu action above or immediately below it.

• The image must show the real room, team, guests, or food.
• Text remains legible when the focal point shifts at mobile crop sizes.
• Avoid carousels and autoplay video.
• The hero should not delay access to hours.

Hours panel

Hours are mission-critical content, not decoration.

• Pair closed days and open days in two clear cells on desktop and one stacked list on mobile.
• Use full day names and include AM/PM.
• Include holiday variability only as a secondary note.
• Keep hours consistent across header, homepage, footer, structured data, and business listings.
• When currently closed, do not imply the restaurant is permanently unavailable.

Buttons and links

• Primary buttons are teal pills with midnight navy bold Georgia text. Hover and active states use darker teal with white text.
• Hover uses primary-hover; pressed uses primary-active.
• Focus uses a 3px cream or navy outer ring selected for the surrounding surface, plus a 2px teal outline.
• Inline links are teal, bold, and underlined on hover and focus.
• Use direct labels: “View Menu,” “Call Us,” “Get Directions,” “Join Rewards,” and “Order Online.”

Information cards

Cards may present stories, amenities, or community proof. Each card contains one Anton title, concise Georgia copy, and at most one action. Use a slim teal edge as the family resemblance. Equal-height cards are acceptable only when they do not create large empty areas.

Menu cards

Menu category cards prioritize food photography. Use a 4:3 image, category title, one short description, and clear destination. Do not use blank image regions, stock food, or heavy overlays that hide the food.

Individual menu items use:

• Item name and price on one shared row.
• Plain description below.
• Dietary or availability labels in text.
• No period leaders on narrow screens.
• Prices never rely on color or alignment alone.

Community cards

Use candid, consented photography of real events and local groups. Captions identify the event without overstating sponsorship. Do not use generic stock photos or treat children as decorative brand assets.

Loyalty block

Show the real punch card, the earning rule, reward threshold, exclusions, and redemption method together. Numerals and conditions must be immediately scannable. Never hide material terms in faint text.

Location block

Address, linked phone number, hours, parking, and directions appear before the map. The map is supplemental and must not be the only way to find the restaurant. Lazy-load third-party maps and provide a direct directions link.

Forms

• Persistent labels sit above controls.
• Required status appears in text.
• Error messages explain the correction next to the affected field.
• Use browser-appropriate autocomplete values.
• Success states confirm what happened and what the guest should expect next.

Photography

• Prefer daylight or accurate warm indoor color. Food should look edible, not over-saturated.
• Show generous portions at table height or a natural three-quarter angle.
• Preserve the real character of the room.
• Community photos should feel candid but composed enough to identify the moment.
• Supply meaningful alt text for informative images. Decorative textures use empty alt text.

Motion

• State transitions: 150ms to 180ms ease-out.
• Menus and dialogs: up to 220ms.
• Button hover may shift upward no more than 1px.
• Images may scale no more than 1.02 on hover.
• Respect prefers-reduced-motion and remove transforms.
• Never animate hours, prices, directions, or other practical information.

Accessibility

• Meet WCAG 2.2 AA.
• Provide a visible skip link and semantic landmarks.
• Maintain one h1 and a logical heading order.
• Focus remains visible on every control in cream, white, teal, and navy contexts.
• Touch targets are at least 44px.
• Do not place important text inside images or logos.
• All food, loyalty, and community images require useful alt text when informative.
• Embedded maps need a title and a direct non-map alternative.
• Telephone numbers use tel: links and addresses provide a directions link.
• Avoid icon fonts for essential actions. Use labeled SVG icons instead.

Do's and Don'ts

Do

• Make hours, menu, phone, and directions effortless to find.
• Use real food and real community photography.
• Preserve the Anton, Georgia, cream, navy, and teal combination.
• Let the badge logo carry the classic diner character.
• Write like a welcoming local owner, not a restaurant chain.
• Verify every availability claim, special, price, and service status.
• Build and test both light and dark themes.

Don't

• Do not call Locals Diner a chain, cafe, bistro, or upscale concept.
• Do not manufacture retro style with checkerboard floors, jukebox icons, chrome gradients, script fonts, or red vinyl clichés.
• Do not replace real photographs with AI-generated food or people.
• Do not use Anton for paragraphs or critical instructions.
• Do not let decorative cards outrank hours and location.
• Do not present unavailable online ordering as active.
• Do not use generic restaurant templates, excessive rounded cards, gradients, glass effects, or oversized shadows.
• Do not invent family history, community partnerships, reviews, menu items, prices, or awards.
• Do not ship changes that work in only one theme or at one screen width.