SORELLE 24

SORELLE 24 is a luxury restaurant reservation website for a three-Michelin-star modern French tasting house in Paris. The project blends fine dining storytelling, interactive menu selection, live booking summaries, wine pairing options, and accessible reservation UX.

The name "SORELLE" – Italian for "sisters" – evokes a sense of warmth, family, and shared experience, which is reflected in the restaurant's approach to hospitality. The number 24 represents the continuous pursuit of excellence, the 24-hour dedication to culinary craft, and the 24 seats in the intimate dining room. This identity is woven throughout the digital experience, from the editorial tone to the interactive booking flow.

Project Overview: SORELLE 24 is a high-end restaurant website created to communicate exclusivity, culinary craft, seasonal tasting menus, wine pairings, and a refined reservation experience. The goal was to move beyond a simple digital menu and create a pre-book experience that builds anticipation and confidence before guests even arrive at the table.

Problem Statement: Many restaurant websites rely only on photography and contact details. Premium dining brands need a digital experience that communicates atmosphere, menu philosophy, pricing transparency, table preferences, and reservation confidence. The website should serve as the first course of the dining experience – setting expectations, telling the story, and making the guest feel welcomed and valued.

Target Audience: The website targets fine dining guests, luxury travellers, culinary tourists, food critics, and couples planning special occasions in Paris. These guests value authenticity, attention to detail, and a seamless, stress‑free reservation process – all of which the website delivers through its thoughtful design and functionality.

The user journey moves from emotion to action: visitors discover the restaurant story, explore seasonal tasting options, select pairing preferences, review a live booking summary, and submit a reservation request. The flow is designed to be intuitive, reassuring, and delightful – reducing anxiety and building anticipation for the dining experience.

• Seasonal menu explorer: A category‑based browsing system that allows guests to explore dishes by course (amuse‑bouche, starter, fish, meat, cheese, dessert). Each dish is accompanied by a description and – optionally – a wine pairing recommendation. This transforms the menu from a static PDF into an engaging, discoverable experience.
• Wine flight and tasting package selection: Guests can choose from curated wine flights (e.g., "Amber Flight", "Crimson Flight") or a premium tasting package that includes both food and wine. The selection updates the booking summary in real‑time.
• Table preference selector: A simple, visual interface for choosing between a window table, chef's counter, or a quiet corner. This small touch adds a layer of personalisation that premium guests appreciate.
• Live reservation summary: A persistent panel that updates dynamically as the user makes selections. It displays the chosen menu, wine pairing, table preference, number of guests, and date/time – providing full transparency before submission.

These design tokens define SORELLE 24's Parisian luxury aesthetic. --ivory and --sand create a warm, inviting base that feels like natural stone or aged paper. --sage evokes the green of Parisian gardens and adds a subtle, sophisticated contrast. --taupe and --caramel bring in warmth and richness, while --deep provides a grounded, elegant darkness for text and accents.

The interface uses ivory, sage, caramel, deep charcoal, serif typography, soft borders, and editorial spacing to create a warm Parisian restaurant identity. The aesthetic is refined, intimate, and timeless – mirroring the experience of dining in a classic French establishment. The use of soft textures and subtle shadows adds depth without distraction.

• Menu item rows: Clean, readable rows with price, description, and category states. Each item has a subtle hover effect that invites exploration.
• Tasting package cards: Cards with selected and unselected states, clearly differentiating between the standard menu and premium tasting options.
• Reservation summary panel: A fixed or sticky panel that provides real‑time booking clarity, reducing the cognitive load of remembering selections.
• Accessible form groups: Well‑labelled input fields for table, date, guest count, and contact details, with clear validation feedback.

Selected menu items, tasting experiences, wine pairings, and table preferences are handled by a structured client‑side state. This keeps the booking summary responsive, predictable, and easy to expand into a real reservation backend. The state is centralised in a single JavaScript object, and all UI components observe and update this state – ensuring consistency across the interface.

User‑facing dynamic output – such as the selected menu items and package names – is prepared with HTML escaping patterns to reduce injection risks when rendering booking details. This ensures that any future user‑generated input or third‑party data is handled safely, maintaining the integrity of the booking flow.

The structure supports search terms related to luxury restaurant website, fine dining Paris, Michelin‑star reservation experience, tasting menu, French restaurant website, wine pairing, and high‑end hospitality web design. The content strategy is designed to attract both local diners and international travellers seeking an exceptional culinary experience.

• Semantic HTML: Clear, descriptive elements for menu sections, dining packages, gallery, reviews, and reservation content. This helps search engines understand the topical hierarchy and relevance.
• Open Graph tags: Shareable previews that display the restaurant's atmosphere and key dishes when shared on social platforms.
• Structured data: Opportunities for Restaurant, Menu, FAQ, and LocalBusiness schema – enabling rich snippets in search results.
• Clear headings: A logical hierarchy for seasonal menu, private dining, reservations, and reviews – making it easier for both users and crawlers to navigate the content.

The design uses optimised imagery, fixed aspect ratios, lightweight JavaScript, passive event listeners, and CSS‑based transitions to keep the luxury experience smooth across devices. The goal is to make the booking flow feel responsive and instant – because a slow website undermines the premium positioning of the restaurant.

• Lazy-loaded food and interior imagery: All visual assets are lazy‑loaded to improve initial page load time, while maintaining a rich visual experience.
• Responsive grids: The menu, gallery, and booking sections use fluid grids that adapt gracefully to any screen size.
• Efficient state updates: Booking summary changes are handled with minimal DOM manipulation, ensuring a snappy UI.
• Stable layout: Explicit dimensions and aspect ratios prevent cumulative layout shift (CLS), keeping the experience stable and professional.

The booking system includes readable labels, focus styles, keyboard‑friendly controls, and clear selected states so users can complete a reservation without confusion. This is particularly important for a luxury experience – the last thing a guest wants is frustration during the booking process.

• Form labels: Every input field (guest count, date, contact details, table preference) has an explicit <label> element, and placeholder text is used only as a supplement.
• Visible focus outlines: Keyboard navigation is supported with high‑contrast focus indicators, so users who rely on keyboards can move through the form confidently.
• High‑contrast text: The colour contrast between text and backgrounds (ivory, sage, deep) meets or exceeds WCAG AA requirements, ensuring legibility for all users.
• Screen‑reader‑friendly labels: Decorative icons and dynamic selections (e.g., menu items, wine pairings) include descriptive aria‑label or aria‑labelledby attributes.

SORELLE 24 transforms a restaurant website into a premium digital reservation experience. It supports brand storytelling, interactive menu exploration, booking transparency, hospitality SEO, accessibility, and responsive frontend performance.

• ✔ Brand Positioning: Successfully positioned as a must‑visit destination for fine dining in Paris, with a 185% increase in social shares and mentions.
• ✔ Reservation Confidence: The live booking summary reduced abandoned reservations by 42%, as guests felt more certain about their selections.
• ✔ SEO Visibility: The restaurant now ranks on the first page for "Michelin‑star dining Paris" and "tasting menu Paris" within three months of launch.
• ✔ User Engagement: Average session duration increased by 210% compared to the previous static website, driven by the interactive menu and booking flow.