Locals Diner, the Dracut table

Status and scope

This is a concept specification for a new landing page identity for localsdiner.com. Build the landing page from this document without requesting clarification. Preserve truthful restaurant information, real photography, working menu links, hours, address, phone number, rewards rules, community stories, and accessibility. Do not copy the current roadside-sign visual system. Do not build fake menu items, fake reviews, fake events, or online ordering before it is actually available.

Concept name

The Dracut Table

Identity story

The new Locals Diner feels like Dracut made a table big enough for the whole town. The identity leaves behind the black roadside sign, condensed novelty lettering, teal glow, and stacked restaurant cards. In their place is a contemporary New England community broadsheet: warm paper, civic green, brick red, hand-drawn rules, generous documentary photography, and type that feels equally at home on a town notice, a Sunday newspaper, and a well-used menu. It is not retro diner theater. It is a living neighborhood record where breakfast, local families, youth groups, homemade pies, and everyday conversation all belong to the same story.

The mood in plain words

• Neighborly
• Lived-in
• Proud of Dracut
• Warm without being cute
• Contemporary without being polished into a chain
• Useful before promotional
• Documentary rather than staged
• A community table, not a themed restaurant

What this direction leaves behind

Do not reuse the current identity's dominant black header, dark hero overlay, teal glow, Anton display type, centered badge stack, repeated white cards, uniform three-column grids, or generic restaurant button pills. Do not use checkerboards, chrome, jukeboxes, neon, red vinyl, fake newspaper aging, or 1950s motifs. The word “diner” belongs to the name, not to a costume.

Brand principles

1. The town is the hero. Food brings people together, but the deeper story is who gathers here.
2. Practical information stays visible. Hours, phone, address, menu, and ordering status are never buried.
3. Real evidence wins. Use real meals, staff, guests, community groups, reward cards, and events.
4. Warmth comes from composition. Use scale, paper color, photography, and honest copy rather than decorative nostalgia.
5. Every section has a job. No filler slogans, stock icons, empty cards, or redundant calls to action.

Typography

Load fonts from Google Fonts when network fonts are allowed. Self-host WOFF2 files in production when possible. Use font-display: swap.

Display serif

Newsreader Variable

Fallback stack:

"Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif

Use for the hero statement, section headlines, large numerals, pull quotes, and menu category names. Use optical sizing if available. Do not set it in all caps.

• Hero: 700 weight, clamp(3.5rem, 9vw, 8.75rem), line-height 0.88, letter-spacing -0.055em
• Major section heading: 650 weight, clamp(2.5rem, 5vw, 5rem), line-height 0.95, letter-spacing -0.035em
• Card or story heading: 650 weight, clamp(1.5rem, 2.5vw, 2.25rem), line-height 1.05
• Pull quote: 500 weight, italic, clamp(1.75rem, 3vw, 3rem), line-height 1.15

Utility sans

IBM Plex Sans Condensed

Fallback stack:

"IBM Plex Sans Condensed", "Arial Narrow", "Roboto Condensed", Arial, sans-serif

Use for navigation, buttons, labels, hours, addresses, metadata, menu descriptions, and form controls.

• Body: 400 weight, 1.0625rem, line-height 1.62
• Navigation: 600 weight, 0.9375rem, line-height 1, letter-spacing 0.02em
• Eyebrow label: 600 weight, 0.75rem, line-height 1.2, letter-spacing 0.14em, uppercase
• Button: 600 weight, 1rem, line-height 1
• Small metadata: 500 weight, 0.8125rem, line-height 1.4

Handwritten accent

Do not use a script font. Use one real scanned handwritten phrase from the owner only if a verified asset exists. Otherwise omit handwriting completely.

Color tokens

All values are sRGB hex. Implement semantic tokens rather than placing raw values throughout components.

Core brand colors

Light theme semantic tokens

Dark theme semantic tokens

Color use rules

• Paper and spruce must carry most of the page.
• Brick is the action color. Do not use it as a large background behind long text.
• Butter is a small signal. Limit it to status, rules, numerals, and one-line highlights.
• Lake blue appears only where geography, directions, or Dracut context is present.
• Use no gradients.
• Never communicate open, closed, error, success, or selected state by color alone.
• All normal text must meet WCAG AA at 4.5:1. Large text and interface boundaries must meet 3:1.

Layout and composition

Overall frame

• Maximum page width: 1440px.
• Primary content grid: 12 columns, 24px gutters, clamp(20px, 4vw, 72px) side padding.
• Reading measure: 62ch maximum.
• Desktop breakpoint: 1024px.
• Tablet breakpoint: 768px.
• Mobile layout starts below 768px.
• Major section spacing: clamp(72px, 9vw, 144px).
• Use full-width ruled bands and asymmetric editorial compositions instead of repeated cards.

Signature composition

The signature device is the long community table: a horizontal rule with small numbered place markers that connects stories, menu categories, hours, rewards, and events. It must read like seating places, not a timeline component. Use it once as a recurring visual logic, then vary the composition around it.

Geometry

• Most content containers remain square.
• Photographs may use a restrained 2px corner radius that is nearly invisible.
• Buttons use 4px radius, not pills.
• Use 1px and 2px rules as structural elements.
• A hand-drawn rule texture is allowed only as an SVG created from a real imperfect line, never a stock brush asset.

Photography direction

• Use only real Locals Diner photography or newly commissioned documentary photography.
• Show people at table height, shared plates, servers in motion, the actual room, youth groups, events, pies, and recognizable Dracut details.
• Avoid overhead flat lays, isolated food on black backgrounds, fake steam, heavy filters, stock people, and AI-generated imagery.
• Color grade toward warm neutrals with true food color. Keep skin tones natural.
• Use captions with names or event context only when permission and facts are confirmed.

Navigation

Create a compact two-level masthead.

Top utility strip:

• Left: Dracut, Massachusetts
• Center: today's open or closed status in text
• Right: phone number

Main navigation:

• Wordmark on the left as live text or approved logo asset
• Links: Menu, Our Table, Rewards, Community, Visit
• One primary action: View the menu
• If online ordering is not active, do not show an order button
• Desktop header is not sticky until the user scrolls past the hero
• Mobile header contains the wordmark, open status, and a clearly labeled Menu button
• Escape closes the menu and restores focus to the trigger

Landing page walk

1. Hero: Pull up a chair

Purpose: establish a new identity and answer what this place means.

Composition:

• Full viewport-width paper field, not a photo background
• Left two-thirds: oversized Newsreader headline, Pull up a chair. Dracut is already here.
• The phrase may wrap across three to five lines and should dominate the first view
• Right third: one tall documentary photograph of a real table or counter moment, cropped vertically
• A small brick-red place number 01 sits at the top edge of the photograph
• Supporting copy under the headline: one short sentence about breakfast, lunch, pies, and neighbors
• Actions: View the menu and a text link Plan your visit
• Hours summary appears directly under the actions, with closed days stated clearly
• No logo floating over the photograph
• No carousel, video, or decorative badges

2. The morning board

Purpose: surface practical information before storytelling.

Composition:

• Spruce band with paper text
• Four unequal columns: Today, Kitchen hours, Address, Call
• Today is largest and includes explicit open or closed text
• Address links to directions
• Phone uses a tel: link
• Holiday note appears below in smaller text
• On mobile, stack in the order Today, Hours, Call, Address

3. What is on the table

Purpose: introduce menu categories without generic photo cards.

Composition:

• Oversized heading: What are you hungry for?
• Three horizontal rows for Breakfast, Lunch, and Homemade Pies
• Each row contains a place number, category name, one sentence, one real image, and a direct link
• Alternate image alignment across rows
• Do not invent dishes or prices
• If a menu category has no valid destination, omit its link rather than creating a dead route

4. Where locals become family

Purpose: preserve the strongest existing promise but give it documentary proof.

Composition:

• Asymmetric two-column spread
• Left: one wide candid room or guest photograph
• Right: the verified family legacy copy, set in a narrow reading column
• Include one pull quote only if it comes from verified owner language
• Link: Read our story
• Do not sentimentalize the father's legacy or turn it into a decorative marketing device

5. The Dracut table

Purpose: show community through evidence.

Composition:

• Long horizontal table rule with three to five numbered places
• Each place represents a verified community story, local youth group, event, gathering, or recurring relationship
• Each story includes a real photo, date or context when available, title, and two-sentence caption
• Desktop uses one wide horizontal sequence
• Mobile becomes a vertical list with the same order
• No auto-scrolling carousel

6. Loyalty, printed plainly

Purpose: explain the reward program with no hidden terms.

Composition:

• Butter paper insert visually layered over the main paper canvas
• Real punch card image on one side
• Large numeral treatment for the verified threshold and reward
• State purchase requirement, punch count, reward value, exclusions, and redemption method in plain text
• Action: How rewards work
• Do not simulate a digital account if the program remains physical

7. Goodies and gatherings

Purpose: group secondary reasons to visit without turning them into equal generic cards.

Composition:

• One dominant story for parties and gatherings with a real room photograph
• Two narrow text modules for lottery availability and shelves of local or seasonal goods
• Lottery content must be factual and age-appropriate
• Seasonal goods must not imply current availability without current data

8. Visit the table

Purpose: close with one useful planning block.

Composition:

• Split canvas with lake blue on the map or geographic side and paper on the details side
• Show address, phone, current hours, parking, and directions before any embedded map
• Map is optional and lazy-loaded
• Provide a direct directions link whether or not a map loads
• Add one exterior photograph so first-time visitors recognize the building

9. Footer

Composition:

• Deep spruce background
• Large Newsreader line: See you at the table.
• Menu, Our Story, Rewards, Community, Visit, Hiring, Facebook
• Address, phone, hours summary, and copyright
• Include the approved logo once at a restrained size
• Do not repeat a large call-to-action button

Interaction and motion rules

• Default transition duration: 160ms.
• Large menu transition maximum: 220ms.
• Easing: cubic-bezier(0.22, 1, 0.36, 1) for entrances, ease-in-out for state changes.
• Use opacity plus no more than 8px vertical movement for content entrances.
• Do not animate every section on scroll. Limit entrances to hero type, morning board, and community place markers.
• Image hover may shift crop position subtly but may not zoom beyond 1.015.
• Buttons darken and translate no more than 1px.
• The community table rule may draw once when first visible. Disable the drawing under reduced motion.
• No parallax, autoplay video, marquees, bouncing arrows, cursor effects, or infinite motion.
• Under prefers-reduced-motion: reduce, remove transforms, line drawing, and smooth scrolling.

Responsive rules

• Hero changes from a two-thirds and one-third split to headline, actions, hours, then photograph.
• No word in the hero may be smaller than 3.25rem on a 375px viewport unless required to prevent overflow.
• Menu rows become stacked but preserve place number, title, copy, image, and link order.
• Community sequence becomes vertical with visible connecting rules.
• Utility strip may wrap to two lines but may not hide phone or open status.
• Keep all touch targets at least 44px by 44px.
• Do not use horizontal scrolling for core content.

Accessibility and content requirements

• Meet WCAG 2.2 AA.
• Provide a visible skip link.
• Use one h1 and sequential headings.
• Use semantic header, nav, main, section, article, and footer landmarks.
• Every meaningful image requires specific alt text. Decorative rules use empty alt text or CSS.
• Focus indication is always visible and uses the theme focus token with a 2px outline and 3px offset.
• Link text names its destination. Avoid repeated Learn more labels.
• Current open status must be server-derived or manually maintained from one canonical hours source.
• Address, phone, menu links, hours, rewards terms, and ordering availability must be verified before release.
• Never label online ordering as active while it is unavailable.

What done looks like

The builder must verify every item below before presenting the landing page.

• [ ] The page clearly embodies The Dracut Table concept rather than the current roadside-sign identity.
• [ ] Anton, Georgia, black-dominant navigation, teal glow, floating badge hero, and generic white card grids are absent.
• [ ] Newsreader and IBM Plex Sans Condensed load correctly with the specified fallbacks.
• [ ] All light theme tokens and dark theme tokens are implemented as semantic variables.
• [ ] Light and dark themes preserve hierarchy, contrast, and photography quality.
• [ ] The first viewport shows the new headline, a real image, menu action, visit action, and current hours summary.
• [ ] Hours, address, phone, menu, and directions remain reachable without opening a menu or map.
• [ ] Breakfast, Lunch, and Homemade Pies use real destinations and do not invent dishes or prices.
• [ ] Community content uses real Locals Diner photography and verified context.
• [ ] Rewards rules are complete, legible, and consistent with the current physical program.
• [ ] No stock people, AI-generated food, AI-generated people, or fake testimonials appear.
• [ ] Desktop at 1440px, tablet at 768px, and mobile at 375px have been visually checked.
• [ ] There is no horizontal overflow at 320px through 1920px.
• [ ] Keyboard navigation reaches every action in logical order.
• [ ] Mobile navigation closes with Escape and restores focus.
• [ ] All touch targets meet the 44px minimum.
• [ ] All normal text meets 4.5:1 contrast and large text or boundaries meet 3:1.
• [ ] Reduced-motion mode removes line drawing and transform-based movement.
• [ ] The map is optional, lazy-loaded, titled, and never the only source of directions.
• [ ] Online ordering is omitted or visibly unavailable until it is truly active.
• [ ] The page feels like Dracut's neighborhood table in a contemporary New England broadsheet, not a generic restaurant template and not a retro diner costume.