Loyalty Program
Minimalist loyalty program email featuring clean typography, monochromatic color scheme, and thoughtful whitespace. Perfect for premium brands focusing on experiential rewards.
Preview
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="x-apple-disable-message-reformatting" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;600&display=swap');
</style>
</head>
<body style="background-color:#f8f8f8;margin:0;font-family:'Space Grotesk',sans-serif">
<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:600px;margin:0 auto">
<!-- Minimal Header -->
<tr>
<td style="padding:60px 40px">
<h1 style="font-size:32px;font-weight:300;color:#262626;margin:0;text-align:center;letter-spacing:2px">NORD</h1>
<p style="color:#787878;font-size:14px;margin:8px 0 0 0;text-align:center;letter-spacing:1px">REWARDS COLLECTIVE</p>
</td>
</tr>
<!-- Welcome Banner -->
<tr>
<td style="padding:0 40px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background:#ffffff">
<tr>
<td style="padding:60px 40px;text-align:center">
<h2 style="font-size:38px;font-weight:300;color:#262626;margin:0 0 24px 0;line-height:1.2">Welcome to a world of thoughtful rewards</h2>
<p style="font-size:16px;line-height:1.6;color:#787878;margin:0;max-width:400px;margin:0 auto">Where every interaction is an opportunity to experience something extraordinary</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Status Overview -->
<tr>
<td style="padding:40px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background:#262626">
<tr>
<td style="padding:60px 40px;text-align:center">
<p style="font-size:14px;color:#d4d4d4;margin:0 0 16px 0;letter-spacing:2px">YOUR STATUS</p>
<h2 style="font-size:42px;font-weight:300;color:#ffffff;margin:0 0 32px 0;letter-spacing:1px">CURATED</h2>
<div style="width:100%;max-width:300px;height:2px;background:linear-gradient(to right, #d4d4d4 70%, #787878 30%);margin:0 auto 24px"></div>
<p style="font-size:14px;color:#d4d4d4;margin:0">700 / 1000 POINTS TO NEXT TIER</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Benefits Grid -->
<tr>
<td style="padding:0 40px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="width:50%;padding:10px">
<div style="background:#ffffff;padding:40px">
<h3 style="font-size:20px;font-weight:300;color:#262626;margin:0 0 16px 0">Early Access</h3>
<p style="font-size:14px;line-height:1.6;color:#787878;margin:0">First glance at new collections</p>
</div>
</td>
<td style="width:50%;padding:10px">
<div style="background:#ffffff;padding:40px">
<h3 style="font-size:20px;font-weight:300;color:#262626;margin:0 0 16px 0">Private Events</h3>
<p style="font-size:14px;line-height:1.6;color:#787878;margin:0">Exclusive member gatherings</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- Featured Reward -->
<tr>
<td style="padding:40px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background:#ffffff">
<tr>
<td style="width:50%;padding:40px">
<h3 style="font-size:24px;font-weight:300;color:#262626;margin:0 0 16px 0">This Month's Curated Experience</h3>
<p style="font-size:14px;line-height:1.6;color:#787878;margin:0 0 24px 0">A private pottery workshop with renowned artist Maria Berg. Limited spots available.</p>
<a href="#" style="display:inline-block;padding:16px 32px;background:#262626;color:#ffffff;text-decoration:none;font-size:14px;letter-spacing:1px">Reserve Your Spot</a>
</td>
<td style="width:50%">
<img src="https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261" alt="Pottery Workshop" style="width:100%;height:300px;object-fit:cover" />
</td>
</tr>
</table>
</td>
</tr>
<!-- Points Update -->
<tr>
<td style="padding:0 40px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background:#f0f0f0">
<tr>
<td style="padding:40px;text-align:center">
<h3 style="font-size:24px;font-weight:300;color:#262626;margin:0 0 24px 0">Your Points Overview</h3>
<table width="100%" max-width="400px" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin:0 auto">
<tr>
<td style="padding-bottom:16px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="text-align:left">
<p style="font-size:14px;color:#262626;margin:0">Available Points</p>
</td>
<td style="text-align:right">
<p style="font-size:14px;color:#262626;margin:0">2,450</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top:16px;border-top:1px solid #d4d4d4">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="text-align:left">
<p style="font-size:14px;color:#262626;margin:0">Points Earned This Month</p>
</td>
<td style="text-align:right">
<p style="font-size:14px;color:#262626;margin:0">350</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:60px 40px;text-align:center">
<p style="font-size:14px;color:#787878;margin:0 0 24px 0;letter-spacing:1px">Stay connected</p>
<table width="100%" max-width="200px" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin:0 auto">
<tr>
<td style="padding:0 12px">
<a href="#" style="font-size:14px;color:#262626;text-decoration:none">Instagram</a>
</td>
<td style="padding:0 12px">
<a href="#" style="font-size:14px;color:#262626;text-decoration:none">Twitter</a>
</td>
<td style="padding:0 12px">
<a href="#" style="font-size:14px;color:#262626;text-decoration:none">LinkedIn</a>
</td>
</tr>
</table>
<p style="font-size:12px;color:#787878;margin:24px 0 0 0">NORD Rewards Collective © 2024</p>
</td>
</tr>
</table>
</body>
</html>