elements man style/email Read as markdownA mail-safe baseline for HTML emails. This is email.css, imported separately
from the main stylesheet:
@import "@elements/style/email";
In a scaffolded app it's already wired into app/shared/styles/email.css, which
every email's style.css imports.
Why it's different
Mail clients (Gmail, Apple Mail, Outlook, web clients) are far stricter than
browsers. They can't reliably resolve CSS custom properties, they support
@media unevenly, and they often demand inline styles. So email.css breaks
from the rest of the package on purpose:
- No CSS variables. Every value is a raw px or hex so the CSS renders the same everywhere without a token resolver in the loop.
- No layers, no
@media, no@container. Just plain rules. - Light-only. There's no dark-mode flip. Mail clients handle dark mode themselves, and variable-based theming wouldn't survive anyway.
Keep any additions to this file in the same shape: raw values, no vars, no media queries, no layers.
Scope
Every rule is scoped under .email, so the baseline never leaks onto your
website. The email generator tags each email template with
<body class="email <slug>">, so the baseline applies inside emails only.
Classes
| Class | Role |
|---|---|
.email |
The body baseline: system font, 16px/1.55 text, dark ink on white, comfortable page padding |
.email-wrap |
A centered single-column wrapper capped at 560px, so the email reads well on desktop and scales down on mobile without media queries |
.email-footer |
The small-print footer treatment: a top rule, smaller muted text for the sender address, unsubscribe link, and legal |
Bare .email a, .email h1/h2/h3, and .email p are styled too, so basic
email content looks right with no extra classes.
<body class="email welcome">
<div class="email-wrap">
<h1>Welcome aboard</h1>
<p>Thanks for signing up. Here's how to get started…</p>
<div class="email-footer">
<p>Sent by Your Company · <a href="#">Unsubscribe</a></p>
</div>
</div>
</body>