Give occasion diners a clear view of the evening before they ask for a seat. Countercourse is an HTML website template for chef-led tasting restaurants, independent dining rooms and designers building their websites. Its content and interactions revolve around the menu, the people preparing it and the intimacy of dining at the counter.

Expressive typography and warm restaurant photography establish the atmosphere, while a 6-course menu gives every dish its own image and ingredient story. The counter narrative explains the preparation, pace and shared setting. Arrival, access, dietary and reservation information answer the practical questions guests bring to an important evening.

The seating-release experience gives the journey a clear destination: a preferred date, time and party size, followed by a complete request form with review and recoverable submission states. A separate contact form supports questions about the menu, access and existing reservations. The restaurant remains responsible for confirming each seating directly.

With 3 coordinated color schemes, Light, Dark and Auto appearance modes, ready-made production files and complete editable source, Countercourse gives you a finished restaurant design to adapt to your own kitchen and service.

What is included

Countercourse includes 6 responsive pages: 5 substantive restaurant pages and a designed 404 page, with coherent fictional business copy throughout.

• Home: An atmospheric introduction, seasonal menu story and clear paths to the counter and seating releases.
• Menu: 6 illustrated courses, ingredient descriptions, drinks context and dietary guidance.
• At the Counter: The chef's approach, preparation, seating arrangement and pacing of the evening.
• Seatings: Editorial release states, date and time preferences, guest selection and a seating-request form.
• Visit: Editable address and map link, arrival and access information, dining policies and a contact form.
• 404: An included missing-page design with clear recovery links.

Production files, source and design assets

• Ready-made HTML website with local styles, scripts, images, fonts and icons
• Complete editable page templates, shared header and footer, and structured configuration
• Readable and minified CSS and JavaScript generated from the same source
• 8 coordinated fictional restaurant photographs supplied in 16 responsive WebP files
• Local Instrument Serif regular and italic fonts, plus DM Sans variable, in WOFF2 format
• Original counter-inspired SVG mark, editable live-text wordmark and matching favicon
• Build scripts, dependency lockfile, validation tools and included tests
• HTML documentation guide covering setup, content, appearance, imagery and form configuration, with third-party notices

Features

• A complete tasting-menu presentation: Course photography, ingredients, seasonal context and drinks guidance help guests picture the progression.
• Purpose-built seating requests: Announced, open, closed and past release windows lead into date, time and party preferences.
• Complete form states: Entry, inline validation, review, edit, sending, acknowledgement, recoverable failure, retry and reset are designed and implemented.
• 3 restaurant color schemes: First Pour, Garden Course and Last Seating each support Light, Dark and Auto.
• Practical dining information: Dedicated space for directions, access, dietary arrangements, prices and reservation policies.
• Responsive editorial layouts: Course imagery and text, navigation and request controls reorganize for narrow screens.
• Adaptable presentation: CSS custom properties organize color, typography and spacing, while the live-text identity stays straightforward to edit.

A considered path from the menu to the counter

Countercourse connects the details that make a tasting restaurant distinctive: the changing courses, the work at the kitchen pass, the proximity of chef and guest, and the time set aside for the evening. Each page develops a different part of the dining experience.

The seating-request flow helps visitors organize their plans before the restaurant responds:

1. Choose an evening: Explore the release windows and select a preferred date, time and party size.
2. Add the details: Provide contact information and a message for the restaurant.
3. Review and continue: Check the request, return to edit, and move through clear submission and acknowledgement states. If submission fails, the details remain available for retry or editing.

Both forms demonstrate submission locally without sending messages. Accepting real enquiries requires 1 compatible endpoint, connected through the documented configuration; a backend or form-service account is not included. Requests require direct restaurant confirmation. No live seat inventory, seat holds or payment processing is included.

3 color schemes, one restaurant identity

Choose the atmosphere that suits the restaurant:

• First Pour: Deep wine, warm ivory and terracotta accents
• Garden Course: Herbal greens, linen tones and muted olive
• Last Seating: Ink, porcelain and brass accents

Each scheme includes complete Light and Dark appearances. The business interface gives visitors Light, Dark and Auto controls, with Auto following the operating-system preference. Set the restaurant's default scheme in the supplied configuration; scheme browsing belongs to the separate Options panel in the preview.

Instrument Serif brings character to the course titles and editorial headlines, while DM Sans keeps navigation, dining details and forms clear. Both font families are packaged locally, so typography does not rely on a remote font service. The included photographs were generated with AI and depict a fictional restaurant.

Accessibility features built into the experience

Countercourse includes practical implementation features informed by WCAG guidance:

• Semantic structure: Page landmarks, headings, lists, figures and a skip link give the content a clear reading order.
• Keyboard operation: Navigation, appearance controls, native questions and the request and contact forms support keyboard use.
• Visible focus: Focus treatments identify controls across the included schemes and appearances; form errors and review states move attention to the relevant field or heading.
• Clear form feedback: Associated labels, fieldsets, legends, linked inline errors and structured review summaries help visitors check and correct their details.
• Meaning beyond color: Release availability, selections and submission feedback use text and structure alongside color.
• Reduced motion: Optional movement respects the visitor's reduced-motion preference.
• Useful fallbacks: Essential navigation, restaurant content and native question disclosures remain available without JavaScript.
• Responsive reading: Layouts preserve content order, informative images have descriptive alternatives, and text and controls can wrap as space changes.

Complete source for your restaurant website

The package separates the ready-made site in template/ from the editable project in source/, with an HTML guide in documentation/. You can inspect the supplied production site through its documented local viewer, then use the source and build tools for customization.

Restaurant identity, party limits, time zone, address and seating schedule have a central configuration. Course titles, ingredients, chef narrative and practical information remain editable page content. The fictional showcase schedule keeps the release experience demonstrable over time. For real service, replace the showcase schedule with your restaurant's actual service dates.

Semantic HTML, modern CSS and focused vanilla JavaScript keep the website independent of a runtime framework or CMS. Readable production files sit beside their minified versions, and the complete source lets you adapt the typography, color, content and behavior for the restaurant you are presenting. The finished site is suited to ordinary static HTTPS hosting, with the form connection handled through your chosen endpoint.