KingDezigns Email Template Style Guide

Last Updated: 2026-05-26

Overview

All automated HTML emails in the KingDezigns infrastructure follow a consistent visual style. Reference this document when building new notification emails for any service.

Design Principles

Dark header (#0f172a) with white text — always includes hostname and timestamp
Color-coded status banner below header (green / amber / red)
White card body with border-radius:10px, box-shadow, border:1px solid #e5e7eb
Stat/metric values displayed as large bold figures in #f9fafb pill cards
Monospace pre blocks for raw output — dark background #1e293b, light text #e2e8f0
Dark footer (#0f172a) with "KingDezigns Infrastructure" branding
Max width: 720px, centered, outer background #f1f5f9
Font stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

Severity Colors

Severity	Background	Text	Use When
HEALTHY / OK	`#1a7f4b`	white	All clear
WARNING	`#b45309`	white	Attention needed
CRITICAL	`#b91c1c`	white	Immediate action required

Row background tints:

OK: #f0fdf4
WARNING: #fffbeb
CRITICAL: #fff1f2

Header Block

<tr><td style="background:#0f172a;border-radius:10px 10px 0 0;padding:28px 32px;">
  <table width="100%" cellspacing="0" cellpadding="0"><tr>
    <td>
      <div style="font-size:11px;color:#94a3b8;letter-spacing:1px;text-transform:uppercase;">SERVICE NAME</div>
      <div style="font-size:26px;font-weight:800;color:white;margin-top:4px;">ICON HOSTNAME</div>
      <div style="font-size:13px;color:#94a3b8;margin-top:4px;">TIMESTAMP | CONTEXT INFO</div>
    </td>
    <td align="right">
      <div style="background:STATUS_COLOR;color:white;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:700;">STATUS BADGE</div>
    </td>
  </tr></table>
</td></tr>

Status Banner Block

<tr><td style="background:STATUS_COLOR;padding:12px 32px;">
  <span style="color:white;font-size:14px;font-weight:600;">ICON &nbsp;STATUS MESSAGE</span>
</td></tr>

Stat Card Row

<td style="width:16%;padding:8px 12px;background:#f9fafb;border-radius:6px;text-align:center;">
  <div style="font-size:11px;color:#9ca3af;text-transform:uppercase;letter-spacing:.5px;">LABEL</div>
  <div style="font-size:20px;font-weight:700;color:#111827;margin-top:2px;">VALUE</div>
</td>

Info/Detail Block

<div style="margin-top:16px;padding:12px 14px;background:#f8fafc;border-radius:6px;border:1px solid #e5e7eb;">
  <span style="font-size:12px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.5px;">LABEL</span>
  <span style="margin-left:10px;font-size:13px;color:#374151;">VALUE</span>
</div>

Error/Warning Block

<div style="margin-top:10px;padding:10px 14px;background:#fff1f2;border-left:4px solid #b91c1c;border-radius:4px;">
  <div style="font-size:11px;font-weight:700;color:#b91c1c;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;">⚠ TITLE</div>
  <pre style="margin:0;font-family:monospace;font-size:12px;color:#7f1d1d;white-space:pre-wrap;">CONTENT</pre>
</div>

Monospace Raw Output Block

<pre style="margin-top:8px;background:#1e293b;color:#e2e8f0;padding:14px;border-radius:6px;font-size:12px;line-height:1.6;overflow-x:auto;white-space:pre;">RAW OUTPUT</pre>

Summary Table Block

<div style="background:white;border-radius:10px;border:1px solid #e5e7eb;padding:18px 22px;">
  <div style="font-size:13px;font-weight:700;color:#374151;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;">📋 Report Summary</div>
  <table width="100%" cellspacing="0" cellpadding="0">
    <tr>
      <td style="font-size:13px;color:#6b7280;padding-bottom:6px;">LABEL</td>
      <td style="font-size:13px;color:#111827;font-weight:600;padding-bottom:6px;">VALUE</td>
    </tr>
  </table>
</div>

Footer Block

<tr><td style="background:#0f172a;border-radius:0 0 10px 10px;padding:16px 32px;text-align:center;">
  <span style="font-size:11px;color:#64748b;">SERVICE NAME &nbsp;|&nbsp; HOSTNAME &nbsp;|&nbsp; KingDezigns Infrastructure</span>
</td></tr>

SMTP Configuration (Zoho)

Server: smtppro.zoho.com
Port: 465
Encryption: tls / ssltls
Auth: login
Sender: rufus.king@kingdezigns.com
Sender Name: Home Assistant
Recipient: rufus.king@kingdezigns.com
Credentials: stored in HA secrets.yaml as kd_username / kd_password

Reference Implementation

See nas08_zfs_report.sh for the full reference implementation of this style. All future email notifications should match this visual language.

4.7 KiB Raw Blame History