§12.8 · Email-Beispiele

So sieht eine Email von Spherity aus.

Spherity verschickt zwei Arten von Emails: Transaktional (Trigger-basiert, ein Empfänger, eine Aktion) und Newsletter (monatlich, alle Produkte in einem Versand). Beide teilen sich Header-Logik, Sub-Brand-Coding und Compliance-Footer — sie unterscheiden sich nur in Tonalität, Dichte und Layout. Wechsle unten zwischen den Varianten.

§12.8.0 · Email-Typen

Transactional Email · VERA Battery DPP

Sub-Brand · Arctic Blue #2C6F7B
Mail · Posteingang
S
Spherity Notifications
noreply@spherity.com · Mi., 06.05.2026, 09:42
Battery-Pass für „NorthCell Lithium-Modul L48" wurde veröffentlicht
Ihr Digital Product Passport ist jetzt EU-konform unter trust.northcell.eu/dpp/L48-2026 abrufbar — Verifikation bestätigt.
An: julia.celiker@northcell.eu · Antwort an: dpp@spherity.com

Sub-Brand-Varianten

Header-Stripe + Eyebrow + DPP-Card-Border

Die Email-Struktur bleibt für alle vier Produkte identisch. Nur der 4px-Stripe im Header, die Eyebrow-Farbe und der DPP-Card-Border wechseln in die jeweilige Sub-Brand-Farbe.

CARO · #1F6F8B
DSCSA Compliance Alert

US-Pharma-Trace, Verification-Status, FDA-Audit-Trail.

VERA · #2C6F7B
DPP Lifecycle Update

Battery-/Textile-/Product-Pass — Veröffentlichung, Update, Recycling.

EIDA · #4961A8
Identity Wallet Notification

Credential ausgestellt, widerrufen, oder Identity-Onboarding fertig.

KYLE · #4D5B6A
Machine-ID Heartbeat

Geräte-Identität attestiert, Schlüssel-Rotation, Anomalie-Hinweis.

Verbindliche Maße & Token

Diese Werte werden in HubSpot als Email-Variables hart hinterlegt. Abweichungen brauchen Brand-Approval (§19 Approver-Matrix).

ElementSpec
Container-Breite600px · max-width, zentriert
Innen-Padding40px horizontal · 28-32px vertikal
Header-Stripe4px solid · Sub-Brand-Hex (CARO/VERA/EIDA/KYLE)
Wordmark-Höhe19px · #023852 · Archivo 800
H1Archivo 700 · 26px · lh 1.2 · #023852
Body-TextArchivo 400 · 15px · lh 1.6 · #253746
Eyebrow / Mono-CodeIBM Plex Mono · 11px · Sub-Brand-Farbe
Primary-ButtonBG #023852 · Text #FFFFFF · 14px Padding · 4px Radius · table-based
DPP-CardBG #F8F6F0 · 4px Left-Border Sub-Brand · 18-20px Padding
FooterBG #023852 · Text rgba(238,238,238,0.78) · Footer-Wordmark mit Accent-Dot #2BFEBB
Mobile Breakpoint<600px → Padding 24px · Buttons full-width-block
Versand-ZielHubSpot · Versand nur über offizielle Spherity-Konten · niemals aus Canva

Häufige Fehler · Transaktional

No-Gos · §12.8.8
Image-Only-Email (alles als ein PNG) — bricht Accessibility, Spam-Score, Dark-Mode.
Absender „noreply@" ohne Antwort-Adresse im Header — verletzt Trust-First-Prinzip.
Sub-Brand-Farbe als Vollflächen-Background — Sub-Brand erscheint nur als Stripe + Akzent.
Marketing-Sprech in Transactional („Hooray, your pass is here!") — Tonality §5 verletzt.
Buttons als <a> mit nur CSS-Background — Outlook rendert nicht. Immer table-based.
Footer ohne Pflichtangaben (HRB, USt-IdNr., GF) — rechtswidrig in DE/EU.
Versand aus Canva oder einer Personal-Mailbox — Reputation & Compliance-Risiko.
Inline-Tracking-Pixel von Drittanbietern ohne DSGVO-Einwilligung — Audit-Risiko.

Monthly Newsletter · Mai 2026

Multi-Produkt · §12.8.9

Aktuell ein gemeinsamer Monats-Versand für die gesamte Spherity-Reichweite — jedes Produkt bekommt einen eigenen Sub-Brand-codierten Abschnitt. Roadmap: sobald ein einzelnes Produkt eine eigenständige Audience & Cadence rechtfertigt, spalten wir den Newsletter in produkt-spezifische Streams (siehe Callout unten).

Mail · Posteingang
S
Spherity
communication@spherity.com · Do., 30.04.2026, 10:00
From Berlin to Amsterdam — wo wir euch im Mai treffen
DPP, European Business Wallet & Events: was im Mai 2026 wichtig wird — plus zwei offene Stellen.
An: julia.celiker@northcell.eu · Antwort an: communication@spherity.com

Newsletter · Verbindliche Maße & Token

Diese Werte ergänzen die Transactional-Specs (§12.8 oben). Wo nichts spezifisch genannt wird, gelten die Transactional-Token weiter.

ElementSpec
Container-Breite600px · max-width, zentriert (gleich wie Transactional)
Innen-Padding Sektion28px vertikal · 40px horizontal · alternierend BG #FFFFFE / #F8F6F0
Hero-Banner-Höhe~180-220px · Petrol-Gradient + 4px Cyan-Bottom-Border
Hero-H1Archivo 700 · 26px · lh 1.2 · #FFFFFE
Sektion-LogoSub-Brand-SVG · 26px Höhe · native Farben · NIE getintet · linksbündig
Sub-Brand-Tag (neben Logo)IBM Plex Mono · 10.5px · ls 0.14em · Sub-Brand-Hex (Untertitel des Logos)
Sektion-CounterIBM Plex Mono · 9.5px · #6F7E8A · rechtsbündig · „Sektion N / Total"
Inline-TOCPflicht ab 3+ Sektionen · Pills auf #F8F6F0 · Anker-Links zu jeder Sektion
Sektion-H2Archivo 700 · 22px · lh 1.25 · #023852 · NIE in Sub-Brand-Farbe
Article-TitleArchivo 600 · 15.5px · #023852
Article-Trenner1px solid rgba(2,56,82,0.08) · oben & unten
Article-LinkIBM Plex Mono · 11px · Sub-Brand-Hex · ohne Underline
Events-Border-Left3px solid · Sub-Brand-Hex der Sektion
Bigrule1px solid rgba(2,56,82,0.16) · zwischen Produkt-Sektionen
Feedback-CTA-BG#023852 · Cyan-Button #2BFEBB auf Petrol-Text
Footer-BG#0F1F2A · einen Tick dunkler als Transactional-Footer (Differenzierung)
Footer-Social-LinksIBM Plex Mono · 10.5px · rgba(43,254,187,0.75) · NIE als Icon-Bilder (siehe §12.8.9.9)
Versand-CadenceMonatlich · letzter Donnerstag · 10:00 CET
Versand-ToolHubSpot · Sender: communication@spherity.com · Reply-to identisch
Subject-Line-FormSentence-Case · max 60 Zeichen · kein Emoji im Subject (nur im Pre-Header zulässig)

Sektion-Struktur · pro Produkt

Konsistenter Rhythmus · §12.8.9.7

Jede Produkt-Sektion folgt demselben Rhythmus, damit Leser*innen die Struktur monatlich wiedererkennen. Min. 3, max. 5 Bausteine pro Sektion.

① Logo-Row
Sub-Brand-Logo + Tag

Echter Wordmark (26px, native Farben) + Tagline + Sektion-Counter. Scan-Anchor für direktes Springen.

② H2 + Intro
Headline + 1 Absatz

Verb-First-H2 in Petrol, 1-2 Sätze als Aufsetzer für die Sektion.

③ Articles / Webcasts
2–3 Featured Items

Inline-Liste mit Trennern, je Title + Lede + Author + Mono-Link.

④ Optional: Sub-List
Podcasts · Talks · Reads

Kompakte Liste mit Mono-Icons für Schnell-Scan, max 4 Einträge.

⑤ Events
Events-Strip am Ende

2-Spalten, Datum + Name + Ort, Sub-Brand-Border-Left. Nur wenn relevant.

Skalierungs-Roadmap · §12.8.9.8

Stand Mai 2026: ein gemeinsamer Newsletter für alle vier Produkte. Begründet, weil keine einzelne Audience aktuell groß genug ist, um einen eigenen monatlichen Stream zu rechtfertigen.

Trigger zum Split: sobald ein Produkt ≥ 1.000 aktive Newsletter-Abos und ≥ 4 monatliche Inhalts-Bausteine (Articles, Webcasts, Events, Releases) erreicht, bekommt es seinen eigenen Stream — bestehende Sub-Brand-Logik wird wiederverwendet, der Hero-Banner wechselt von Petrol auf Petrol+Sub-Brand-Akzent.

Reihenfolge wahrscheinlich: ① VERA / DPP (höchste Frequenz an Cases) → ② EIDA / EBW (mit eIDAS-2.0-Welle 2027) → ③ CARO (US-spezifischer Stream, separater Sender) → ④ KYLE (Late, sobald Machine-ID-Audience kritische Masse erreicht).

Footer-Social-Links · Text, nicht Icons

Begründung · §12.8.9.9

Social-Links im Newsletter-Footer (Website · LinkedIn · YouTube) werden als IBM-Plex-Mono-Text umgesetzt — nicht als Icon-Bilder. Drei technische Gründe, warum das die robustere Wahl ist.

① Image-Blocking
Outlook · Gmail Promotions · Yahoo

Diese Clients blockieren externe Bilder per Default. Icon-only-Footer wird zu leerer Zeile bis der*die Empfänger*in „Bilder anzeigen" klickt. Trust-First verträgt sich schlecht mit kaputtem Footer.

② Dark-Mode
Inversion bricht Icon-Kontraste

Schwarze Icons auf Petrol-Footer kippen unter Dark-Mode-Inversion in hell-auf-schwarz und werden schwer lesbar. Mono-Text mit rgba(43,254,187,0.75) rendert in allen Themes identisch.

③ Accessibility
Screenreader · Alt-Text-Verlust

Icons brauchen Alt-Text, der bei HubSpot-Re-Saves regelmäßig verloren geht. „LinkedIn" als Text ist immer korrekt vorgelesen — keine Pflege-Last, keine Audit-Findings.

Ausnahme · wo Icons doch sinnvoll sind

Im transaktionalen Header, wenn das Icon bedeutungs-tragend ist (Kalender-Icon neben Datum, Lock-Icon neben signiertem Pass, QR-Icon neben Pass-ID). Dort kompensiert die Funktion das Risiko des Image-Blockings.

Footer-Social-Links sind dekorativ, nicht funktional — daher Text. Mittlerer Weg falls visuelles Gewicht gewollt: Unicode-Glyph + Text (z.B. ↗ LinkedIn oder ▶ YouTube), ganz ohne <img>-Tag. Image-Blocking-fest, Dark-Mode-fest, A11y-fest.

Häufige Fehler · Newsletter

No-Gos · §12.8.9.10
Sub-Brand-Logo im Hero-Banner — der Banner gehört Spherity. Sub-Brand-Logos erscheinen nur als Sektion-Anchor weiter unten.
Sub-Brand-Logo getintet, eingefärbt oder mit Effekt — die SVG-Wordmarks bleiben in nativen Farben (siehe §11.1.5 Logo-Hard-Rule).
Mehr als 5 Bausteine pro Produkt-Sektion — Newsletter wird zur Linkfarm, niemand scrollt.
Sub-Brand-Farbe als Sektion-Vollfläche — Sub-Brand bleibt Akzent (Logo-Row, Tag, Border-Left, Link).
Ein Produkt hat keinen Inhalt → Sektion weglassen, nicht mit Filler füllen, und TOC-Pill ebenso entfernen.
Inline-TOC weglassen ab 3+ Produkt-Sektionen — Scan-First-Prinzip wird verletzt.
Marketing-Subject-Line („🚀 Don't miss this!") — Sentence-Case, sachlich, max 60 Zeichen.
CTA-Button-Marathon — pro Sektion max ein primärer Link-Style; nur Feedback-CTA ist Button.
Stockphotos in Article-Cards — entweder Spherity-Asset (siehe §11.8) oder kein Bild.
Versand außerhalb des Cadence-Rhythmus ohne Brand-Approval — Vorhersagbarkeit ist Trust-Signal.
Social-Links im Footer als Icon-Bilder (<img>) — Image-Blocking, Dark-Mode & A11y verletzt (siehe §12.8.9.9).
SPHERITY · DESIGN.MD · v1.1 · §12.8 EMAIL · Transactional + Newsletter STATUS · v1.1 · 2026-05-11 Changelog →