Back to transactional templates
Restaurant Reservation Confirmation
Designed for restaurants that take pride in the guest experience, this template presents reservation details in a calm, professional format that matches the tone of a quality dining room. The dark green and warm gold palette is flexible enough to match a range of restaurant identities.
Responsive Dark Mode Gmail Outlook Apple Mail
Preview
Production-Ready HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title>Your Reservation is Confirmed — The Grove</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
@media only screen and (max-width: 600px) {
.email-container { width: 100% !important; max-width: 100% !important; }
.fluid { max-width: 100% !important; height: auto !important; }
.stack-column, .stack-column-center { display: block !important; width: 100% !important; max-width: 100% !important; }
.stack-column-center { text-align: center !important; }
.center-on-narrow { text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; }
.detail-cell { padding: 12px 20px !important; }
.hero-text { font-size: 32px !important; }
}
@media (prefers-color-scheme: dark) {
.dark-bg { background-color: #1a1a1a !important; }
.dark-card { background-color: #242424 !important; }
.dark-text { color: #f0ede6 !important; }
.dark-muted { color: #a09990 !important; }
.dark-border { border-color: #3a3530 !important; }
}
</style>
</head>
<body width="100%" style="margin:0; padding:0; background-color:#F3F0E8; font-family:Georgia, 'Times New Roman', serif;">
<center style="width:100%; background-color:#F3F0E8;" class="dark-bg">
<!-- Preview text -->
<div style="display:none; max-height:0; overflow:hidden; mso-hide:all;">Your reservation at The Grove is confirmed. We look forward to welcoming you.͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏</div>
<!-- Email container -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" class="email-container" style="max-width:600px; margin:auto;">
<!-- Header -->
<tr>
<td style="padding: 40px 40px 0; text-align: center; background-color: #26352D;" class="dark-card">
<p style="margin:0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #C48A4A; font-weight: 500;">The Grove</p>
<p style="margin: 4px 0 0; font-family: Georgia, serif; font-size: 13px; color: #8fa896; letter-spacing: 0.5px;">Neighbourhood Kitchen & Bar</p>
</td>
</tr>
<!-- Hero -->
<tr>
<td style="padding: 40px 40px 36px; background-color: #26352D; text-align: center; border-bottom: 1px solid #3a4d42;" class="dark-card">
<h1 class="hero-text" style="margin: 0 0 12px; font-family: Georgia, 'Times New Roman', serif; font-size: 38px; font-weight: 400; color: #f0ede6; line-height: 1.2; letter-spacing: -0.5px;">Your reservation<br>is confirmed.</h1>
<p style="margin: 0; font-size: 15px; color: #8fa896; font-family: 'Helvetica Neue', Arial, sans-serif; line-height: 1.6;">We've reserved your table and can't wait to welcome you.</p>
</td>
</tr>
<!-- Reservation details card -->
<tr>
<td style="padding: 0 40px; background-color: #26352D;" class="dark-card">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #F3F0E8; border-radius: 4px; margin: -1px 0 0;">
<tr>
<td style="padding: 32px 32px 0; border-top: 3px solid #C48A4A;" class="dark-bg">
<p style="margin: 0 0 20px; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: #6B5C45; font-weight: 600;">Reservation Details</p>
</td>
</tr>
<!-- Detail rows -->
<tr>
<td class="detail-cell dark-bg" style="padding: 0 32px 16px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="50%" style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #8B7355; text-transform: uppercase; letter-spacing: 1.5px; padding-bottom: 4px; font-weight: 500;">Guest</td>
<td width="50%" style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #8B7355; text-transform: uppercase; letter-spacing: 1.5px; padding-bottom: 4px; font-weight: 500; text-align: right;">Confirmation</td>
</tr>
<tr>
<td style="font-family: Georgia, serif; font-size: 17px; color: #26352D; font-weight: 400; padding-bottom: 0;" class="dark-text">Sarah Mitchell</td>
<td style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 14px; color: #C48A4A; font-weight: 600; letter-spacing: 1px; text-align: right;">#GRV-4821</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 32px 16px;" class="dark-bg">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-top: 1px solid #E0DDD5;">
<tr><td style="height: 16px;"></td></tr>
<tr>
<td width="33%" style="font-family: 'Helvetica Neue', Arial, sans-serif;">
<p style="margin: 0 0 3px; font-size: 10px; color: #8B7355; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500;">Date</p>
<p style="margin: 0; font-size: 16px; color: #26352D; font-family: Georgia, serif;" class="dark-text">Saturday</p>
<p style="margin: 0; font-size: 13px; color: #26352D; font-family: 'Helvetica Neue', Arial, sans-serif;" class="dark-text">March 15, 2026</p>
</td>
<td width="33%" style="font-family: 'Helvetica Neue', Arial, sans-serif; text-align: center;">
<p style="margin: 0 0 3px; font-size: 10px; color: #8B7355; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500;">Time</p>
<p style="margin: 0; font-size: 16px; color: #26352D; font-family: Georgia, serif;" class="dark-text">7:30 pm</p>
<p style="margin: 0; font-size: 13px; color: #26352D; font-family: 'Helvetica Neue', Arial, sans-serif;" class="dark-text">Evening</p>
</td>
<td width="33%" style="font-family: 'Helvetica Neue', Arial, sans-serif; text-align: right;">
<p style="margin: 0 0 3px; font-size: 10px; color: #8B7355; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500;">Guests</p>
<p style="margin: 0; font-size: 16px; color: #26352D; font-family: Georgia, serif;" class="dark-text">4 people</p>
<p style="margin: 0; font-size: 13px; color: #26352D; font-family: 'Helvetica Neue', Arial, sans-serif;" class="dark-text">Indoor seating</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Location -->
<tr>
<td style="padding: 0 32px 32px;" class="dark-bg">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-top: 1px solid #E0DDD5;">
<tr><td style="height: 16px;"></td></tr>
<tr>
<td style="font-family: 'Helvetica Neue', Arial, sans-serif;">
<p style="margin: 0 0 3px; font-size: 10px; color: #8B7355; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500;">Location</p>
<p style="margin: 0; font-size: 15px; color: #26352D; font-family: Georgia, serif;" class="dark-text">The Grove Kitchen & Bar</p>
<p style="margin: 0; font-size: 13px; color: #6B5C45; font-family: 'Helvetica Neue', Arial, sans-serif; line-height: 1.5;">147 Elmwood Avenue, Suite 1<br>Brooklyn, NY 11201</p>
</td>
<td style="text-align: right; vertical-align: bottom;">
<a href="#" style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; color: #C48A4A; text-decoration: none; letter-spacing: 0.5px; border-bottom: 1px solid #C48A4A; padding-bottom: 1px;">Get directions →</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Actions -->
<tr>
<td style="padding: 0 40px 0; background-color: #26352D;" class="dark-card">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #F3F0E8; padding: 0 32px 32px;" class="dark-bg">
<tr>
<td style="text-align: center; padding-top: 0;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td style="border-radius: 2px; background-color: #26352D; text-align: center; margin-right: 12px;">
<a href="#" target="_blank" style="display: inline-block; background-color: #26352D; color: #F3F0E8; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; padding: 14px 28px; border-radius: 2px;">Modify Reservation</a>
</td>
<td width="12"></td>
<td style="border-radius: 2px; background-color: transparent; border: 1px solid #C48A4A; text-align: center;">
<a href="#" target="_blank" style="display: inline-block; color: #C48A4A; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; padding: 14px 28px; border-radius: 2px;">Cancel</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Note -->
<tr>
<td style="padding: 0 40px 40px; background-color: #26352D;" class="dark-card">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #F3F0E8; padding: 0 32px 32px; border-top: 1px solid #E0DDD5;" class="dark-bg">
<tr><td style="height: 24px;"></td></tr>
<tr>
<td style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #6B5C45; line-height: 1.7;" class="dark-muted">
<strong style="color: #26352D;" class="dark-text">Good to know:</strong> We hold reservations for 15 minutes past your booking time. If you have dietary restrictions or special requests, please <a href="#" style="color: #C48A4A; text-decoration: none;">contact us directly</a> so we can accommodate you properly.
</td>
</tr>
</table>
</td>
</tr>
<!-- Separator -->
<tr>
<td style="height: 1px; background-color: #3a4d42;" class="dark-border"></td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 32px 40px; background-color: #26352D; text-align: center;" class="dark-card">
<p style="margin: 0 0 8px; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; color: #5a7060; line-height: 1.6;">
The Grove · 147 Elmwood Avenue · Brooklyn, NY 11201
</p>
<p style="margin: 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #4a5e50;">
<a href="#" style="color: #5a7060; text-decoration: none;">Privacy Policy</a> · <a href="#" style="color: #5a7060; text-decoration: none;">Unsubscribe</a> · <a href="#" style="color: #5a7060; text-decoration: none;">Contact Us</a>
</p>
</td>
</tr>
</table>
</center>
</body>
</html>