infrastructure/email_template_style.md

# 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
```html
<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
```html
<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
```html
<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
```html
<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
```html
<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
```html
<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
```html
<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
```html
<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.

---

# ✔️ End of File