Email — Alchemy Design System

The email system

Every transactional and lifecycle email we send, on one brand-designed shell. The look is taken from the startpage — dark ink header, violet accent, Tiempos italic lines, generous white space on a soft grey inbox (no beige). Each one is shown in a mail-client window below — switch Desktop / Mobile to see how it reflows.

Transactional

The account & security mails — triggered by an action, expected in seconds, all business.

Welcome · account created

S

Willkommen bei Sparklin Sparklin · an mich

Verify email

S

Bestätige Deine E-Mail Sparklin · an mich

Password reset

S

Passwort zurücksetzen Sparklin · an mich

Magic link · login

S

Dein Anmelde-Link Sparklin · an mich

Lifecycle & product

The mails that move the business forward — the weekly programme nudge, the go-live moment, a receipt, and a real inquiry landing from the user’s own website.

Course nudge · weekly

S

Woche 3 ist bereit Sparklin · an mich

Website is live · milestone

S

Deine Website ist live 🎉 Sparklin · an mich

Payment receipt

S

Deine Quittung Sparklin · an mich

New lead · website inquiry

S

Neue Anfrage über Deine Website Sparklin · an mich

The shell

Header band — ink for most, violet for celebratory moments, minimal for the most sober.
Hero band — an optional image with a Tiempos-italic line, for milestones and the weekly nudge.
Body — composed from EmailHeading, EmailText, EmailButton, EmailCode, EmailReceipt.
Footer — identity, address, settings & unsubscribe.

EmailShell props

Prop	Type	Default	Notes
`header`	'ink' \| 'violet' \| 'minimal'	`'ink'`	Header band style — dark ink (default), violet for celebration, or minimal.
`brand`	string	`'Alchemy Zürich'`	The wordmark in the header (e.g. “Sparklin”).
`heroImage`	string	`—`	Optional image band under the header.
`heroOverlay`	string	`—`	A big Tiempos-italic line over the hero image (inline <em>).
`preheader`	string	`—`	Hidden inbox-preview line.
`footerName / footerAddr`	string	`—`	Footer identity + address.

Rules

Do

One clear action per email — a single primary button.

Keep the ink/violet palette; use the hero band only for real moments.

Don't

Use beige backgrounds — the inbox stays soft grey.

Stack multiple competing CTAs.