Essie Wine Illustration-Led Landing Page

Overview

Essie Wine is a high-end, minimalist hospitality landing page that leverages custom SVG illustrations to create a distinct brand identity. It serves as an excellent reference for builders wanting to combine artistic visual storytelling with a high-conversion booking and reservation flow.

Design System

• Color Palette & Visual Hierarchy: The primary palette uses a sophisticated 'Dusty Rose' (#C6A9AF) background paired with deep 'Charcoal Navy' (#102120) for line art and text. High-contrast blocks of white and 'Avocado Green' segment the vertical scroll, creating a clear visual rhythm between storytelling and utility.
• Typography: The site utilizes a clean sans-serif for functional UI (navigation, buttons) and a larger-scale serif (or high-weight sans-serif with generous leading) for body copy to maintain a "neighborhood bar" feel. Text is often centered in spacious modules to emphasize readability.
• Page Structure: The layout follows a modular vertical stack:
  1. Full-width SVG Illustration Hero.
  2. 'About' text block.
  3. Bento-style image grid for visual social proof.
  4. Tabbed button group for menu PDF downloads.
  5. Dual-purpose Booking section (Direct SevenRooms link + Custom Request Form).
  6. Gift Voucher CTA.
• Reusable Components:
  • Button Group: A flexible horizontal list of outline and primary buttons used for menu switching and external links.
  • Bento Grid: A responsive <ul> grid (grid__list) that mixes landscape, square, and portrait aspect ratios for food and interior photography.
  • Custom Form: A clean, stacked input layout with inline labels used for private dining inquiries.
• Implementation Clues: The HTML reveals a Nuxt.js/Vue framework using a component-driven structure (module--media, module--text, module--grid). Images are served via Sanity.io CDN, suggesting a headless CMS approach for easy content updates.

Use Cases

• Who should clone this: Independent restaurants, boutique hotels, or local service-based businesses that want a "premium-yet-approachable" digital presence without heavy text.
• Effective Remixes: A lifestyle brand could replace the wine illustrations with product line art; a creative agency could use the bento grid for a portfolio and the SevenRooms link for consultation bookings.
• Practical Directions: Reuse the Illustration-Led Hero pattern specifically if you have a strong brand mascot or architectural drawing. The Tabbed Menu Section is perfect for businesses with multiple service offerings (e.g., Lunch vs. Dinner vs. Brunch).
• Clone Scope: For a fast win, clone the Bento Image Grid and the Minimalist Reservation Form. For a full brand overhaul, clone the entire vertical module stack to ensure a consistent atmospheric experience.