Status and scope
This replaces the previous Bobola's redesign concept. It is a concept specification for a new landing page identity for bobolasnashua.com. Build from this document without requesting clarification.
Bobola's is a family restaurant and neighborhood gathering place. Never call it a diner in site-authored copy. The design should combine three useful behaviors without copying three brands:
- Take the cheerful family welcome and treat-like sense of occasion associated with Friendly's.
- Take the shared energy, game visibility, and social seating of a good neighborhood sports bar and grill.
- Take the menu clarity, broad day-part usefulness, and easy practical information associated with Denny's.
Do not imitate any competitor's logo, trade dress, menu names, characters, colors, layouts, slogans, or photography. This must become Bobola's own neighborhood identity.
Preserve truthful restaurant information, real photography, working menu and ordering links, verified hours, address, phone number, reviews, hiring, and accessibility. Do not invent dishes, prices, family history, awards, staff quotes, customer quotes, sports programming, bar service, dessert programs, or service availability.
Concept name
The Home Team
Identity story
The new Bobola's is Nashua's neighborhood clubhouse, but the club is simply everyone who walks through the door. Families settle into booths, regulars know the staff, breakfast starts the day, lunch keeps it moving, dinner brings people back together, and a game can be on without turning the room into a loud bar. The identity combines the confidence of a local team program with the comfort of a family grill: warm cream, bottle green, scoreboard red, golden accents, bold condensed type, real food, real people, and a visual system built around tables, booths, score lines, and shared plates. It is energetic but never aggressive, nostalgic but never themed, and practical enough that a guest can find hours, menus, directions, or ordering in seconds.
The mood in plain words
- Neighborhood-owned
- Friendly to families
- Energetic without being loud
- Familiar without looking dated
- Sports-aware without being sports-bar cliché
- Broadly appealing
- Generous
- Easy to understand
- A place for breakfast, lunch, dinner, and the people around them
- Warm first, bold second
Brand promise
Your table. Your team. Your neighborhood place.
Use this as the primary positioning line only after Derek approves the exact wording. Until then, treat it as design direction rather than final published copy.
Translating the three references
What to borrow from a friendly family restaurant
- A welcome that works for children, parents, grandparents, solo guests, and regulars
- Booth comfort and an easy sense of occasion
- Moments of delight in food, dessert, celebrations, and service when those offers are verified
- Brightness and approachability
What to borrow from a neighborhood sports bar and grill
- Shared energy and a sense that people gather for something together
- Clear sightlines between dining, bar, and television areas when the physical room supports them
- Confident menu categories and hearty food photography
- Game-day utility when actual programming is confirmed
What to borrow from an all-day family chain
- Immediate clarity about what is served and when
- Menus organized by breakfast, lunch, and dinner
- Hours, order, call, and directions always easy to find
- Familiar interaction patterns that do not require explanation
What never comes across
- Competitor colors, logos, mascots, slogans, menu names, or layouts
- Generic chain polish
- Alcohol-first messaging
- Fake local nostalgia
- Team trademarks, league logos, jerseys, or unlicensed sports photography
- Claims that breakfast is served all day unless that is operationally true
- Claims that every game is shown unless that is operationally true
What this direction leaves behind
Do not reuse the current dark navy shell, split dark hero, Times-style typography, bright red pill buttons, floating Google rating badge, floating hours badge, generic icon cards, rounded review cards, white dashboard-like hours panel, or tilted social feed treatment. Do not build a conventional sports-bar page with black backgrounds, neon beer signs, metallic textures, team-logo walls, smoky food photography, or an alcohol-led hero. Do not use retro diner devices, red vinyl, checkerboard, chrome, jukeboxes, or roadside-sign clichés.
Brand principles
- Neighborhood before category. Bobola's is the place first. Breakfast, grill food, family meals, bar seating, and games support that role.
- Family-first means everyone can belong. Sports energy must never make the page feel adult-only, alcohol-first, or hostile to children.
- Useful information is hospitality. Menus, today's hours, call, directions, and ordering are visible before promotional content.
- Real people create the identity. Use staff, regulars, family groups with permission, and the actual room. Never simulate community with stock photography.
- Food is generous, not theatrical. Show real portions and real menu items without fake steam, impossible stacks, or dark commercial styling.
- The game is optional. A guest who does not care about sports should still see a warm family restaurant built for them.
- Private history stays private. Publish only approved family history. Never dramatize grief, debt, or personal hardship.
- Every promise must be operable. Sports schedules, ordering, meal periods, drinks, desserts, and celebrations appear only when verified.
Typography
Load fonts from Google Fonts when network fonts are allowed. Self-host WOFF2 files in production when possible. Use font-display: swap.
Display and scoreboard voice
Barlow Condensed Variable
Fallback stack:
"Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif
Use for the hero, major section headings, menu day parts, large hours, scores or fixture times when applicable, and compact navigation labels. It creates confident neighborhood-club energy without copying varsity lettering.
- Hero: 800 weight,
clamp(4rem, 10vw, 10rem), line-height0.82, letter-spacing-0.045em - Major section heading: 750 weight,
clamp(2.75rem, 5.5vw, 5.75rem), line-height0.9, letter-spacing-0.03em - Day-part title: 700 weight,
clamp(2rem, 3.5vw, 3.5rem), line-height0.95 - Large hours or status: 700 weight,
clamp(1.75rem, 3vw, 3rem), line-height1 - Eyebrow: 650 weight,
0.8125rem, line-height1, letter-spacing0.13em, uppercase
Do not distort, outline, or add fake jersey shadows to this type.
Friendly reading voice
Nunito Sans Variable
Fallback stack:
"Nunito Sans", "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif
Use for body text, buttons, menu descriptions, navigation, forms, captions, practical information, and reviews. Its open shapes keep the bold display system friendly.
- Body: 450 weight,
1.0625rem, line-height1.62 - Large body: 460 weight,
clamp(1.125rem, 1.5vw, 1.375rem), line-height1.55 - Navigation: 700 weight,
0.9375rem, line-height1, letter-spacing0.01em - Button: 750 weight,
1rem, line-height1 - Caption: 600 weight,
0.8125rem, line-height1.45 - Small utility: 650 weight,
0.75rem, line-height1.3, letter-spacing0.05em
Numeric and utility voice
Use Barlow Condensed tabular numerals for hours, game times, phone fragments, and meal-period labels. Enable font-variant-numeric: tabular-nums. Do not introduce a third font.
Color tokens
All values are sRGB hex. Implement semantic tokens rather than scattering raw values through components.
Core brand colors
| Token | Value | Use |
|---|---|---|
brand-cream | #F5EBDD | Main warm canvas |
brand-cream-bright | #FFF9F0 | Raised and reading surface |
brand-bottle-green | #1F4938 | Primary identity and dark field |
brand-green-deep | #102B21 | Deep dark canvas and pressed states |
brand-scoreboard-red | #A93628 | Primary light-theme action and active signal |
brand-red-deep | #7C251D | Hover and pressed action |
brand-gold | #D8A934 | Open status, small highlights, section markers |
brand-sky | #4E7892 | Supporting family and daytime field |
brand-ink | #17201B | Primary light-theme text |
brand-stone | #8C8A7C | Secondary neutral and rules |
brand-rule | #BEB29F | Light-theme boundaries |
Light theme semantic tokens
| Token | Value |
|---|---|
light-canvas | #F5EBDD |
light-surface | #FFF9F0 |
light-surface-alt | #E6E5D2 |
light-text-primary | #17201B |
light-text-secondary | #4D554F |
light-text-inverse | #FFF9F0 |
light-border | #AA9E8B |
light-action | #8D2C21 |
light-action-hover | #6F2119 |
light-action-text | #FFFFFF |
light-focus | #1F4938 |
light-success | #21613E |
light-warning | #815600 |
light-danger | #A32121 |
Dark theme semantic tokens
| Token | Value |
|---|---|
dark-canvas | #102B21 |
dark-surface | #19382C |
dark-surface-alt | #244536 |
dark-text-primary | #FFF4E5 |
dark-text-secondary | #CCD4CA |
dark-text-inverse | #142019 |
dark-border | #65786D |
dark-action | #F08A70 |
dark-action-hover | #FFA087 |
dark-action-text | #1A1714 |
dark-focus | #F1C557 |
dark-success | #7BC899 |
dark-warning | #F1C557 |
dark-danger | #FF9188 |
Color use rules
- Cream and bottle green carry most of the page.
- Scoreboard red is the main light-theme action. It is not a full-section background except for one short game or specials band.
- Gold is a small signal for open status, current selection, stars, and section numbering.
- Sky blue is reserved for daytime, family, and calm information. Do not pair it with sports clichés.
- Do not use gradients, metallic effects, neon, pure black, or cold navy.
- Keep light and dark modes warm.
- All normal text must meet WCAG AA at 4.5:1. Large text and interface boundaries must meet 3:1.
- Open, closed, live, selected, error, and success states require text or shape in addition to color.
Layout and composition
Overall frame
- Maximum page width:
1500px. - Primary grid: 12 columns,
24pxgutters,clamp(20px, 4vw, 72px)side padding. - Reading measure:
64chmaximum. - Wide desktop breakpoint:
1200px. - Desktop breakpoint:
1024px. - Tablet breakpoint:
760px. - Mobile layout starts below
760px. - Major section spacing:
clamp(72px, 8vw, 136px). - Use strong horizontal bands, booth-like frames, and asymmetrical feature areas. Do not build every section from equal cards.
Signature composition: the neighborhood scoreboard
The primary structural device is a wide top or side rail divided into useful fields such as today's status, current meal period, phone, directions, next verified game, and special. It should feel like a neighborhood scoreboard because it is organized, bold, and glanceable. It must never mimic a television broadcast graphic or betting interface.
Use the scoreboard rail in the header and once inside the page. Do not repeat it around every section.
Signature composition: the booth
Important family stories, reviews, and seating choices sit inside rectangular booth frames. A booth frame uses a cream or green surface, 2px rule, padded corner blocks, and a low horizontal backrest shape. It must remain abstract. Do not draw literal furniture.
Geometry
- Primary panels use
8pxradius. - Booth frames use
16pxouter radius and8pxinner image radius. - Buttons use
8pxradius, never full pills. - Status chips may use
999pxradius only when they include concise status text. - Use
2pxrules and occasional4pxgold markers. - Avoid glass blur, metallic bevels, giant shadows, floating circles, and dashboard card clutter.
Photography direction
- Use only real Bobola's food, restaurant, staff, family-approved, and guest photography.
- Prioritize full booths, tables with multiple meals, staff serving, the bar and television area when appropriate, breakfast plates, burgers, pasta, haddock, soup, and the exterior.
- Show food at table height and people in natural service moments.
- Keep televisions secondary in photographs. The room and people matter more than the screen.
- Use warm accurate color. Whites stay cream, greens stay natural, and food must not be over-saturated.
- Avoid stock fans, cheering crowds, isolated beer taps, fake families, unlicensed sports imagery, fake steam, black-background food, and AI-generated imagery.
Navigation
Create a practical two-part masthead.
Neighborhood rail
- Left:
Nashua's neighborhood place - Center: today's open or closed status plus current hours
- Right: phone number and directions
- If one verified game or event is genuinely relevant, it may replace the center message for that day only. Never manufacture a permanent
Game Daystate.
Main navigation
- Bobola's wordmark on the left. Develop a clean typographic wordmark for this concept using Barlow Condensed. Preserve the approved current logo in the footer and brand archive, but do not lead with the mascot.
- Links: Menus, Breakfast, Lunch, Dinner, Our Place, Visit
- Primary action:
Order online - Secondary link:
Call Bobola's - Sports or game information appears only as
What's onwhen an accurate source and operational process exist - Header becomes sticky after the hero begins to leave the viewport
- Mobile header keeps wordmark, open status, and a clearly labeled
Menubutton - Escape closes the mobile menu and restores focus to its trigger
Landing page walk
1. Hero: Meet you at Bobola's
Purpose: establish Bobola's as the easy neighborhood answer for families, regulars, meals, and shared moments.
Composition:
- Warm cream background, no dark image overlay
- Left seven columns: oversized Barlow Condensed headline,
Meet you at Bobola's. - Supporting line:
Breakfast, lunch, dinner, and a seat that feels like yours.Use only after Derek approves the exact wording. - Actions:
Order onlineandSee all menus - Current open or closed state and today's hours sit directly under the actions
- Right five columns: one real, lively table or booth photograph with food and people when release-approved
- A small gold
HOME TEAM 01marker identifies the first section - The hero may include one small review proof line with verified rating and source, but no floating rating card
- Do not use a carousel, autoplay video, sports montage, or alcohol image
2. Quick decision rail
Purpose: help guests act within seconds.
Composition:
- Bottle-green band with four large fields:
Open today,Order pickup,Call us,Get directions - Each field includes a direct action and plain language
- If closed, the first field states the next opening time
- On mobile, order fields by immediate value: Open status, Order, Call, Directions
- Do not bury weekly hours behind this rail. Link directly to full hours
3. Pick your time
Purpose: show Bobola's broad usefulness without claiming all-day service that does not exist.
Composition:
- Three large horizontal meal lanes: Breakfast, Lunch, Dinner
- Each lane includes verified serving days or times, one real image, a plain description, and a menu link
- Breakfast uses cream and sky accents
- Lunch uses cream and green
- Dinner uses green and red
- Dinner lane visibly states its actual limited days if service is limited
- Use no food emoji, generic icons, invented dishes, or invented prices
- If a menu opens as PDF, label it as PDF and include file size when known
4. Choose your seat
Purpose: express the friendly restaurant and sports grill mix without splitting the brand.
Composition:
- Heading:
Same kitchen. Pick your kind of night. - Two unequal booth frames
- Larger frame:
Around the table, with family dining, booths, celebrations, comfort, and full meals - Smaller frame:
At the bar, with bar seating, conversation, a game when available, and the same full kitchen - Do not label either side adults-only unless legally and operationally required
- Do not imply reservations, private rooms, party packages, or guaranteed game access unless verified
- Use real photographs of each actual area
5. The starting lineup
Purpose: feature verified Bobola's favorites in a sports-aware but food-first composition.
Composition:
- A five-position lineup of real menu items selected by the owner
- Each position includes the verified dish name, real photograph, correct meal period, and short factual note
- At least one breakfast item, one lunch item, and one dinner item when available
- Do not use athlete silhouettes, jersey numbers, podiums, or ranking language
Starting lineupdescribes a useful selection, not a claim of best-selling status unless the data supports it- One action:
Explore all menus
6. Good food, familiar faces
Purpose: prove neighborhood belonging.
Composition:
- Full-width real staff or room image on the left seven columns
- Story copy in a cream booth frame across the right five columns
- Use approved language about serving Nashua, generous portions, familiar food, and people who care
- Include one verified owner or staff quote only when sourced and approved
- Link:
Our story - Never dramatize private family history or use grief as sales copy
7. What is on
Purpose: support the sports-bar side without hijacking the family restaurant.
This section is conditional. Include it only when Bobola's can keep the information accurate.
Composition:
- Scoreboard-red band with cream text
- Up to three verified upcoming games or local sporting events that the restaurant plans to show
- Each item includes date, time, sport or teams in plain text, and a qualifier such as
Ask us about screen availability - No league logos, team marks, player photos, betting lines, odds, fantasy data, or unauthorized broadcast claims
- If accurate scheduling cannot be maintained, replace the section with
Game on? Call us at (603) 577-1086. - Do not show an empty schedule
8. Regulars' section
Purpose: turn reviews into neighborhood proof rather than generic rating cards.
Composition:
- Three staggered booth quotes with different widths
- Use only verified review excerpts
- Include reviewer first name and last initial, source, star rating, and date when available
- Favor quotes about service, portions, family comfort, bar atmosphere, breakfast, and returning visits
- Preserve original meaning and identify excerpts
- Link:
Read more reviews - No auto-rotation, initials in circles, or inflated aggregate claims
9. Something worth coming back for
Purpose: capture the Friendly's-like sense of treat and family occasion without inventing an ice cream identity.
Composition:
- Gold and cream feature band
- Use one verified Bobola's offering that feels like a treat, such as dessert, a special, a family celebration, or a beloved comfort-food finish
- If no reliable offer exists, use the broader theme
Come back for your favoritewith real repeat-visit photography - Do not invent sundaes, kids' promotions, birthday programs, loyalty rewards, or desserts
- Link to current daily specials on Facebook only when that remains the source of truth
10. Your neighborhood table
Purpose: show actual community through people and place.
Composition:
- Contact sheet of four to six real images with varied sizes
- Include staff, regular service, families with permission, the room, bar seating, an exterior detail, or a community moment
- Captions are short and factual
- Avoid staged cheering, stock fans, children used as decoration, or artificial group scenes
- Mobile becomes a deliberate vertical sequence with captions
11. Plan your visit
Purpose: close with everything needed to arrive.
Composition:
- Split section with exterior photograph on the left and bottle-green practical panel on the right
- Show full address, linked phone, weekly hours, holiday and weather note, parking guidance, order link, and directions link
- Exterior photograph is required so first-time guests recognize the building
- Map is optional and lazy-loaded below direct details
- Add a short text line describing family dining and bar seating only when accurate
- Do not require the map or social media embed for critical information
12. Footer
Composition:
- Deep green background with cream text and a gold top rule
- Large closing line:
Your table is ready when you are.Use only after approval - Menus, Order Online, Our Story, Reviews, Visit, Hiring, Facebook
- Current approved logo appears once at a modest size
- Address, phone, weekly hours summary, copyright, and employee portal when appropriate
- One direct order action, not multiple competing buttons
- No embedded social feed
Component rules
Buttons
- Primary light theme:
light-actionbackground, white text,8pxradius, minimum48pxheight,18px 24pxpadding - Primary dark theme:
dark-actionbackground,dark-action-text, same geometry - Secondary: transparent background,
2pxcurrent-text border, no fill - Text action: underlined on hover and focus, with no card container
- Button icons are optional SVGs placed after the label. Never use emoji
- Hover darkens or lightens according to tokens and translates no more than
1px - Focus uses a visible
3pxouter ring with2pxoffset
Status fields
- Always include plain text: Open today, Closed today, Kitchen closes at, or Opens next
- Pair status with time in tabular numerals
- Never rely on green or red alone
- Source all status fields from one canonical hours record
Booth frames
- Maximum
16pxradius 2pxborder- No blur
- Shadow in light theme:
0 10px 30px rgba(23, 32, 27, 0.10) - In dark theme, separate with surface and border rather than stronger shadow
- Do not place every content block inside a booth frame
Menu lanes
- Entire image must not become the only link target
- Use a visible text link for each menu
- Label unavailable meal periods honestly
- Include serving days or time ranges when verified
- Never say all-day breakfast without verified operations
Sports information
- Plain text only, with optional generic SVG ball shape when useful
- No copyrighted team, league, network, or player assets without written rights
- No odds, betting calls to action, or gambling integration
- Never promise audio, screen selection, or a specific broadcast unless staff can deliver it
Interaction and motion rules
- Default transition duration:
160ms. - Large navigation transition maximum:
220ms. - Easing:
cubic-bezier(0.22, 1, 0.36, 1)for entrances andease-in-outfor state changes. - Hero headline may enter in two blocks using opacity plus no more than
10pxmovement. - The neighborhood rail may update content without sliding or flashing.
- Meal lanes may shift image crop position on hover but may not zoom beyond
1.015. - Booth frames may lift by
2pxon hover only when the whole frame is interactive. - Scoreboard fields do not flip, blink, pulse, or imitate a live broadcast.
- Do not animate hours, prices, review text, order status, sports times, or directions.
- No parallax, autoplay video, marquees, bouncing arrows, rotating reviews, cursor effects, or infinite motion.
- Under
prefers-reduced-motion: reduce, remove transforms, entrance motion, and smooth scrolling.
Responsive rules
- Hero stacks headline, copy, actions, status, then photograph below
760px. - Hero type remains at least
3.5remon a375pxviewport unless overflow requires a small reduction. - Neighborhood rail becomes a two-column grid at tablet and one-column task list on mobile.
- Meal lanes stack image, title, hours, description, and link in that order.
- Choose Your Seat frames stack family dining first and bar second.
- Starting Lineup becomes a vertical list rather than a horizontal carousel.
- Sports schedule becomes a simple list with no horizontal scrolling.
- Reviews and community images stack in a deliberate reading order.
- Navigation never hides today's status, phone access, or order action.
- Touch targets are at least
44pxby44px. - No core content requires horizontal scrolling.
Accessibility and content requirements
- Meet WCAG 2.2 AA.
- Provide a visible skip link.
- Use one
h1and sequential heading levels. - Use semantic
header,nav,main,section,article,aside, andfooterlandmarks where appropriate. - All food and people images require specific alt text. Decorative rules and field markings use empty alt text or CSS.
- Focus uses a
3pxring with2pxoffset and the active theme focus token. - Link text names its destination. Avoid repeated
Learn morelabels. - Order buttons use the current verified ordering URL and indicate external navigation when appropriate.
- Hours come from one canonical source and stay consistent in the rail, visit section, footer, structured data, and business listings.
- Reviews retain source attribution and original meaning.
- Sports schedule content requires an owner-maintained source, timestamp, and fallback message.
- Family photography requires appropriate permission, especially when children appear.
- Facebook embeds are unnecessary. Prefer a direct link for current specials.
- No emoji in labels, buttons, menu categories, or interface decoration. Use SVG icons only when they add meaning.
Content voice
Write like a good host who recognizes regulars and welcomes first-time guests.
Use
- Short direct sentences
- Familiar words
Meet you at Bobola'sSee today's hoursChoose your menuCall about the gameBring the familyOrder for pickup
Avoid
Elevated dining experienceCulinary journeyFoodiesEpic eatsThe ultimate fan destinationWhere everybody knows your nameFun for the whole familywithout specific proof- Any slogan strongly associated with another restaurant or television property
What done looks like
The builder must verify every item below before presenting the landing page.
- [ ] The page clearly embodies The Home Team concept and positions Bobola's as Nashua's neighborhood place.
- [ ] The identity combines family welcome, shared sports energy, and clear day-part utility without copying Friendly's, Denny's, or any sports bar chain.
- [ ] Bobola's is called a family restaurant or neighborhood place and is never called a diner in site-authored copy.
- [ ] The design remains welcoming to children, parents, grandparents, solo guests, bar guests, and people who do not care about sports.
- [ ] The current navy template, Times-style typography, red pill buttons, floating rating badge, floating hours badge, generic icon cards, rounded review cards, and social-feed mockup are absent.
- [ ] Barlow Condensed and Nunito Sans load correctly with the specified fallbacks.
- [ ] All light and dark semantic color tokens are implemented and used consistently.
- [ ] Light and dark themes preserve warmth, hierarchy, contrast, and natural photography.
- [ ] The first viewport contains the new headline, order action, menu action, today's status, and one real Bobola's image.
- [ ] Hours, phone, address, ordering, menus, and directions are reachable without opening a map, social feed, or menu overlay.
- [ ] Breakfast, Lunch, and Dinner show only verified days, times, menu links, dishes, and prices.
- [ ] The site never claims all-day breakfast unless Bobola's actually serves it all day.
- [ ] Choose Your Seat accurately represents the physical family dining and bar areas.
- [ ] The sports section is accurate, owner-maintained, timestamped, and replaced by a call prompt when schedules cannot be maintained.
- [ ] No unlicensed team logos, league marks, player images, broadcast logos, or betting content appears.
- [ ] Reviews preserve verified wording, source, and attribution.
- [ ] Real Bobola's photography is used. There are no stock people, AI-generated food, AI-generated people, or fake fan scenes.
- [ ] Family history uses only approved public facts and does not exploit private hardship.
- [ ] The treat or return-visit section uses a real offer and does not invent ice cream, desserts, kids' programs, birthdays, or loyalty rewards.
- [ ] Desktop at
1440px, tablet at768px, and mobile at375pxhave been visually checked. - [ ] There is no horizontal overflow from
320pxthrough1920px. - [ ] Keyboard navigation reaches every action in logical order.
- [ ] Mobile navigation closes with Escape and restores focus.
- [ ] Touch targets meet the
44pxminimum. - [ ] Normal text meets
4.5:1contrast and large text or interface boundaries meet3:1. - [ ] Open, closed, selected, and sports states are written in text and not communicated by color alone.
- [ ] Reduced-motion mode removes entrance transforms and all nonessential movement.
- [ ] Maps and Facebook are optional enhancements and never the only source of critical information.
- [ ] The final page feels like a warm neighborhood clubhouse with a full kitchen, not a generic chain, adult-only sports bar, themed diner, or competitor imitation.