← Design System

HTML E-Mail Design

Transaktionale CRAiD-Mails — Approval-Flows, Status-Updates, Bestätigungen. Tabellen-basiert, inline-gestylt, ohne externe Assets, DSGVO-clean. Genau die Constraints, die Email-Clients seit 2007 fordern, und genau die Brand-Sprache der Website.

Task-Done · Single · Doro-Voice

Internal · 1 Task · DE + EN

Task-Done · Deutsch

templates/task-done-1button.de.html

Plain-Text-Twin: task-done-1button.de.txt Vollbild ↗

Task-Done · English

templates/task-done-1button.en.html

Plain-text twin: task-done-1button.en.txt Open ↗

Task-Done · Digest

Mehrere Tasks · 1 Mail · Loop-Block

Digest · Deutsch (5 Tasks Sample)

preview/digest-de-sample.html

Template: task-done-digest.de.html (+ .txt) Vollbild ↗

Digest · English (5 Tasks Sample)

preview/digest-en-sample.html

Template: task-done-digest.en.html (+ .txt) Open ↗

System-Mail · Shell + Components

Crons · Briefing · Audit · Digest · DE + EN

System-Mail · Abend-Summary (DE)

preview/system-mail-de-sample.html

Shell: system-mail.de.html · Components: components.js Vollbild ↗

System-Mail · Morning Briefing (EN)

preview/system-mail-en-sample.html

Same shell, EN voice. Composed via the same components. Open ↗

Approval · Formal

External · 2-Button (Approve / Decline) · DE + EN

Approval · Deutsch

templates/approval-de.html

Externe Recipients · Security-Code · Expires-At. Vollbild ↗

Approval · English

templates/approval-en.html

External recipients · Security code · Expires-at. Open ↗

Variablen-Übersicht

Token	Beispiel	Notiz
`{{SUBJECT}}`	Freigabe benötigt: Q3 Roadmap	`<title>` + Inbox
`{{PREHEADER}}`	Daniel hat dir die Q3 Roadmap …	Hidden preview, 80–150 chars
`{{RECIPIENT_NAME}}`	Daniel	Vorname
`{{RECIPIENT_EMAIL}}`	daniel@craid.de	Footer-Disclosure
`{{REQUESTER_NAME}}`	Maja	Wer um Freigabe bittet
`{{ITEM_TITLE}}`	Q3 Roadmap — Final v3	Headline
`{{ITEM_DESCRIPTION}}`	Roadmap mit fünf Initiativen …	Context box, 1–3 Sätze
`{{APPROVE_URL}}`	https://forms.craid.de/api/approve?t=…	Single-use token URL
`{{REJECT_URL}}`	https://forms.craid.de/api/reject?t=…	Single-use token URL
`{{DETAILS_URL}}`	https://www.craid.de/approvals/<id>	Optional deep link
`{{EXPIRES_AT}}`	15. Mai 2026, 18:00 CET	Human-readable
`{{SECURITY_CODE}}`	XKLP-9F2A	Letztes Segment des permanenten Codes

Email-Safety-Regeln

Table-Layout mit role="presentation" — Flex/Grid bricht in Outlook und älteren Gmail-Web-Views.
Inline-Styles only für Visuals. <style>-Block bleibt für Media-Query, wird aber von Gmail-Web teilweise gestrippt.
Kein @font-face, kein @import, keine externen CSS. DM Sans nur fallback-mäßig adressiert.
MSO/VML-Fallback für Outlook 2007–2019 Desktop — ohne den werden Pill-Buttons in Outlook eckig und linksbündig.
600px max-width, mobile breakpoint bei 480px stackt die Button-Reihe.
Kein Tracking-Pixel, keine Open-Tracker, keine Click-Tracker außerhalb der eigenen Domain. Die ganze Site ist Cookie-frei — Mails folgen dem.
Plain-Text-Fallback mit jeder Mail mitschicken. Spam-Filter strafen HTML-only ab.

Approval-Workflow-Architektur

Trigger — interner Prozess oder Sanity-Webhook legt einen Approval-Record an.
Token — Backend generiert single-use, time-boxed Token (HMAC-signed, scoped auf Approval-ID + Action).
Send — Backend füllt Template, schickt via _mailer.mjs.
Click — Recipient klickt → forms.craid.de/api/approve?t=<token>.
Verify — Backend validiert Token, markiert Record, feuert Slack-Notification.
Land — Recipient landet auf CRAiD-Branded Confirmation-Page (/approval/done).

Backend-Details (Token-Format, Expiry, Retry-Semantik) liegen bei VPS-Claude. Siehe vps/ im Hauptrepo.