soconnor/manyangles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify brand palette across site emails previews and sign defaults

Browse Source
This commit is contained in:
soconnor
2026-09-10 13:18:56 -04:00
parent a2acd1d08b
commit 9d50aeaeab
11 changed files with 107 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/email/src/index.ts
+13 -12
View File
@@ -4,7 +4,8 @@ import { Resend } from "resend";
import { EMAIL_LOGO_CID, emailLogoAttachment } from "./logo";
export { emailBrowserPreview } from "./logo";
const PRIMARY = "#8b5a4a";
import { brandPalette as palette } from "@album/contracts";
const PRIMARY = palette.primary;
function escapeHtml(value: string) {
return value
@@ -27,22 +28,22 @@ export function chrome(bodyHtml: string) {
<link href="https://fonts.googleapis.com/css2?family=Funnel+Display:wght@500;600;700&amp;family=Geologica:wght@400;600;700&amp;display=swap" rel="stylesheet">
<style>h1,h2 {font-family:'Funnel Display',Arial,Helvetica,sans-serif;line-height:1.15;letter-spacing:-.035em} @media(max-width:480px){body{padding:12px 6px!important}}</style>
</head>
<body style="margin:0;padding:24px 12px;background:#f6f1ea">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:640px;margin:0 auto;color:#292524;background:#fff;font-family:'Geologica',Arial,Helvetica,sans-serif"><tr><td>
<div style="padding:20px 24px;border:1px solid #e8dfd2;border-top:6px solid ${PRIMARY}">
<body style="margin:0;padding:24px 12px;background:${palette.background}">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:640px;margin:0 auto;color:${palette.ink};background:${palette.surface};font-family:'Geologica',Arial,Helvetica,sans-serif"><tr><td>
<div style="padding:20px 24px;border:1px solid ${palette.border};border-top:6px solid ${PRIMARY}">
<table role="presentation" cellspacing="0" cellpadding="0"><tr>
<td style="vertical-align:middle;padding-right:8px"><img src="cid:${EMAIL_LOGO_CID}" width="32" height="32" alt="" style="display:block;border:0;width:32px;height:32px"></td>
<td style="vertical-align:middle"><strong style="font-size:26px;line-height:32px;letter-spacing:-.04em;color:${PRIMARY}">Manyangles</strong></td>
<td style="vertical-align:middle"><strong style="font-size:26px;line-height:32px;letter-spacing:-.04em;color:${palette.ink}">Manyangles</strong></td>
</tr></table>
<p style="margin:8px 0 0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#78716c">Every angle. One shared album.</p>
<p style="margin:8px 0 0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:${palette.muted}">Every angle. One shared album.</p>
</div>
<div style="padding:32px;border:1px solid #e8dfd2;border-top:0;font-size:16px;line-height:1.65">
<div style="padding:32px;border:1px solid ${palette.border};border-top:0;font-size:16px;line-height:1.65">
${bodyHtml}
</div>
<div style="padding:18px 24px;text-align:center;background:#faf7f2;border:1px solid #e8dfd2;border-top:0">
<strong style="font-size:18px;color:${PRIMARY}">Manyangles</strong>
<p style="margin:8px 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7a6e5e">Keep the moment.</p>
<p style="margin:0;font-size:11px;color:#7a6e5e">Hadlock Technologies LLC</p>
<div style="padding:18px 24px;text-align:center;background:${palette.background};border:1px solid ${palette.border};border-top:0">
<strong style="font-size:18px;color:${palette.ink}">Manyangles</strong>
<p style="margin:8px 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:${palette.muted}">Keep the moment.</p>
<p style="margin:0;font-size:11px;color:${palette.muted}">Hadlock Technologies LLC</p>
</div>
</td></tr></table>
</body>
@@ -179,7 +180,7 @@ export async function sendPasswordResetEmail(message: {
Reset password
</a>
</p>
<p style="font-size:12px;color:#7a6e5e">
<p style="font-size:12px;color:${palette.muted}">
If you did not request this, you can ignore this message.
</p>
`),