Xadia is a library of email development components. The components are built for near-perfect rendering across a range of major email clients.
This is still a work in progress. Check back here or on Github. for updates.
Download the base files for Xadia here on Github.
On line 15, you'll find a comment: Branding - Edit these
As you may have expected, this is the area you'll want to update. Swap out your brand font(s) here.
/* Branding - Edit these */
@import url('https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap');
h1, h2, h3, h4, h5, h6, p, a{font-family: 'DM Sans', Helvetica, Arial, sans-serif; color: #000000;}
<!-- START COMPONENT: PREHEADER -->
<!--[if gte mso 9]><table align="center" cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr><td align="center" valign="top" width="600"><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width: 600px; width: 100%;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 90%;" width="90%">
<!-- CONTENT START -->
<tr>
<td align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 500px;" width="500">
<p class="preheader_text">Meet Xadia, the new email development library by Jesse Allen Cooke</p>
</td>
</tr>
<!-- CONTENT END -->
</table>
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></td></tr></table><![endif]-->
<!-- END COMPONENT: PREHEADER -->
<!-- START COMPONENT: HEADER -->
<!--[if gte mso 9]><table align="center" cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr><td align="center" valign="top" width="600"><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width: 600px; width: 100%;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 90%;" width="90%">
<!-- CONTENT START -->
<tr>
<td align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 600px;" width="100%">
<a href="#" style="text-decoration: none;">
<h1 style="font-size: 80px; letter-spacing: -5px; line-height: 80px;">xadia</h1>
<p class="header_tagline" style="color: #2a2c31;">Email Development Library</p>
<hr>
</a>
</td>
</tr>
<!-- CONTENT END -->
</table>
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></td></tr></table><![endif]-->
<!-- END COMPONENT: HEADER -->
<!-- START COMPONENT: Text -->
<!--[if gte mso 9]><table align="center" cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr><td align="center" valign="top" width="600"><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width: 600px; width: 100%;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 90%;" width="90%">
<!-- CONTENT START -->
<tr>
<td align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 600px;" width="100%">
<a href="#" style="text-decoration: none;">
<h1>Welcome!</h1>
<h2 style="width: 90%;">Ready to build emails quickly and with full control?</h2>
<p>Xadia focuses on keeping things simple. Start by grabbing a component from the library and replacing this code.</p>
</a>
</td>
</tr>
<!-- CONTENT END -->
</table>
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></td></tr></table><![endif]-->
<!-- END COMPONENT: Text -->
X:
Y: