Pub Website Prompt: Bottle Green and Brass Country Pub Design for Bolt, v0 & Lovable

# The Fox and Lantern: Pub Website Prompt ## 1. Goal Build a warm, welcoming website for **The Fox and Lantern**, a two hundred year old country pub with rooms in the Cotswolds, known for its Sunday roast and real ales. Deep bottle green background, cream text, brass accents and a characterful serif. It should feel like walking in from the cold to a fire, polished wood and a pint. Photography of food and the bar carries the page. ## 2. Tech Stack ``` React + Vite + TypeScript + Tailwind CSS + Framer Motion (motion/react) + lucide-react ``` Single page. No component libraries, no booking widget, no map library. Table bookings link out. ## 3. Design system ```css :root { --paper: #13291F; /* bottle green, main background */ --ink: #F3EBDD; /* cream */ --accent: #C9A15B; /* brass */ --on-accent: #13291F; --surface: #1B3829; --muted: #B9B09F; --line: rgba(201,161,91,0.35); } ``` One cream section in the middle (the menu) uses green text on cream for contrast and rhythm. Every text colour must reach at least 4.5 to 1 against its background. No text under 14px. ## 4. Typography ```html <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet" /> ``` - **Headings:** DM Serif Display 400, clamp(40px, 5.4vw, 84px), line-height 1.05. Italic for one word per heading. - **Body:** Work Sans 400, 17px, line-height 1.65 - **Small labels:** Work Sans 600, 14px, uppercase, letter-spacing 0.14em, in brass - **Prices:** Work Sans 500, tabular numbers ## 5. Buttons Classic and solid: - **Primary:** brass fill, green text, 6px radius, Work Sans 600 16px, padding 14px 24px. Hover: background lightens slightly and moves up 1px. - **Secondary:** cream text link with a brass underline 2px, no box. - No pills, no outline boxes, no arrow circles. ## 6. Sections 1. **Navbar:** green, 80px. Pub name in DM Serif left with a small brass fox outline icon (simple SVG), links centred, `Book a table` primary button right. Turns slightly darker with a brass bottom line after scrolling. 2. **Hero, split:** left half text on green: label `FREE HOUSE SINCE 1824`, the heading, a short paragraph, the primary button and a secondary link. Right half a tall photograph with 12px radius. Under the text a small box with today's opening hours. *Photograph: a cosy pub interior with a lit open fire, dark wooden beams, brass lamps, a pint of amber ale on an oak table in the foreground.* 3. **Three things we do well:** surface coloured. Three columns, each with a photograph on top (4:3, 10px radius), a short heading and two sentences. *Photographs: a Sunday roast with Yorkshire puddings and gravy; four hand pulled ale pumps on a polished bar; a sunny beer garden with wooden tables and hanging lanterns.* 4. **The menu:** cream background, green text. Two columns with menu sections (Starters, Mains, Puddings) and a dotted leader between dish and price. A note about allergens and the Sunday roast under the columns, and a link to the full menu PDF. 5. **On the bar:** green. A list of six cask ales and ciders in two columns, each line with name, brewery, strength and a short tasting note. A brass rule separates the list from the heading. 6. **Rooms upstairs:** a wide photograph on the left, text on the right with three short facts (number of rooms, breakfast, dogs) and a secondary link `See the rooms`. *Photograph: a bright cottage bedroom with exposed beams, a white bed, a wool throw and a window over green fields.* 7. **What's on:** surface. A simple weekly list: day, event, time. Five rows with brass dividers. 8. **Find us:** two columns. Left: address, phone, email and opening hours as a small table. Right: a stylised illustration of the village lane in green and brass lines (SVG), not a real map. 9. **Footer:** dark green. Pub name in DM Serif, a one line welcome, social links and the licensee line. ## 7. Motion - Hero text fades in from 16px below, 0.6s. Photograph fades and scales from 1.02. - Menu items appear with a 0.03s stagger when the menu enters view. - Images inside cards scale to 1.03 on hover over 0.5s. - Respect `prefers-reduced-motion`. ## 8. Responsive - **Mobile under 768px:** hero stacks, photo first at 4:3. Three things become one column. Menu becomes one column. Ale list one column. Find us stacks. The navbar shows the name and a `Menu` button opening a full screen green panel. A brass `Book a table` bar is fixed at the bottom of the screen with safe area padding. - **Desktop:** max-width 1200px, section padding 100px. ## 9. Full copy **Name:** The Fox and Lantern **Nav:** Food, Drink, Rooms, What's On, Find Us. Button: `Book a table` **Hero** - Label: `FREE HOUSE SINCE 1824` - Heading: `A proper pub, a roaring fire and a roast worth the drive.` (set the word "roaring" in italic) - Text: `Real ale, seasonal food from farms within twelve miles and six rooms upstairs if you would rather not drive home. Dogs and muddy boots welcome in the bar.` - Button: `Book a table` · Link: `See the menu` - Hours box: `OPEN TODAY 12:00 to 23:00 Kitchen 12:00 to 21:00` **Three things we do well** - `The Sunday roast` `Rare beef, crisp potatoes and Yorkshire puddings the size of your head. Book ahead, it sells out by one.` - `Cask ale, kept properly` `Four hand pulls, cellared at eleven degrees and changed every week. Ask behind the bar for a taster.` - `The garden` `Forty seats under the apple trees, heaters in spring and autumn, and lanterns after dark.` **Menu** - Starters: `Ham hock terrine, piccalilli, toast £8.50` · `Soup of the day, warm bread £6.95` · `Potted shrimps, brown butter, sourdough £9.50` - Mains: `Beer battered haddock, chips, minted peas £17.50` · `Steak and ale pie, mash, greens £18.00` · `Wild mushroom risotto, aged Parmesan £15.50` · `Sunday roast, beef or pork, all the trimmings £21.00` - Puddings: `Sticky toffee pudding, clotted cream £7.50` · `Apple and blackberry crumble, custard £7.00` · `Local cheeses, oatcakes, chutney £10.50` - Note: `Please tell us about allergies when you order. The Sunday roast is served from 12:00 until it runs out.` · Link: `Full menu (PDF)` **On the bar** - `Lantern Bitter` Stroud Brewery, 3.8%, `Our house ale. Biscuity and easy.` - `Cotswold Gold` Cotswold Brew Co, 4.2%, `Golden, citrus, dangerously drinkable.` - `Old Fox Porter` Wye Valley, 5.0%, `Dark chocolate and coffee. Winter in a glass.` - `Hook Norton Old Hooky` Hook Norton, 4.6%, `Fruity, full and a local favourite.` - `Orchard Dry` Westons, 5.5%, `Crisp, still cider from Herefordshire.` - `Guest ale` changes weekly, `Ask what is on today.` **Rooms upstairs** - Heading: `Stay the night` - Text: `Six rooms above the pub, each with its own bathroom and a view of the fields. Quiet after 11, we promise.` - Facts: `6 rooms from £120 a night` · `Full breakfast included` · `Dogs welcome in two rooms` - Link: `See the rooms` **What's on** - Tuesday, `Quiz night`, 20:00 - Wednesday, `Pie and a pint £16`, all day - Thursday, `Folk session, bring an instrument`, 20:30 - Friday, `Fish supper night`, from 17:00 - Sunday, `Roast and live acoustic music`, 13:00 **Find us** - `The Fox and Lantern, Church Lane, Lower Slaughter, Gloucestershire GL54 2HP` - `01451 555 0192` · `hello@foxandlantern.co.uk` - Hours: `Mon to Thu 12:00 to 23:00` · `Fri and Sat 12:00 to 00:00` · `Sun 12:00 to 22:30` **Footer** `The Fox and Lantern` · `Come for one, stay for the fire.` · `Instagram`, `Facebook` · `Licensee: James and Polly Arden` ## 10. Never Gradients, glow, glassmorphism, neon, emoji, icon grids, pill buttons, stock phrases like "culinary journey", dashes of any kind in the copy, lorem ipsum, `100vh` heroes, a real embedded map. ## 11. Dependencies ```json { "motion": "^12.0.0", "lucide-react": "^0.460.0", "clsx": "^2.1.0" } ```