# HTML Email Patterns
Use this reference when the email needs custom HTML instead of simple Gmail rich text.
## Rules That Matter
- Write email-safe HTML, not webpage HTML.
- Do not use JavaScript.
- Do not rely on external CSS files.
- Prefer inline CSS for anything important.
- Keep layouts simple. One main column is the default safe choice.
- Assume some clients will strip advanced CSS.
- Always prepare a plain-text fallback summary.
## Safe Building Blocks
Prefer these:
- outer wrapper table for centering and background
- one content card up to about 600px wide
- inline styles on `td`, `p`, `a`, `img`, and heading tags
- buttons built as styled links
- spacing via padding, not complex margin tricks
- system fonts or common web-safe fonts
Use cautiously:
- border-radius
- box-shadow
- dark backgrounds
- multiple cards in the same email
Avoid unless there is a specific reason and client support was considered:
- JavaScript
- forms
- video embeds
- CSS grid
- complex flex layouts
- position absolute/fixed
- background video or heavy animation
## Default Visual Direction
Aim for:
- warm neutral background
- one centered content card
- strong headline
- short body copy
- one clear CTA if needed
- soft corners and restrained accent color
Suggested palette direction:
- background: `#f7f2ea` or similar warm off-white
- card: `#ffffff`
- primary text: `#2f241f`
- secondary text: `#6b5b52`
- accent / CTA: `#c77743` or a nearby warm terracotta
Adjust freely when the email intent needs something softer, more celebratory, or more serious.
## Recommended Structure
1. Preheader text, short and useful.
2. Outer wrapper.
3. Main card.
4. Small eyebrow or context line, optional.
5. Main headline.
6. Body paragraphs.
7. CTA button, optional.
8. Closing line.
## Copy Guidance
- Keep paragraphs short.
- Use one main point per block.
- Make the CTA literal and obvious.
- Do not sound like a mass-marketing blast unless the user asked for that style.
## Minimal Template
```html
```
## Approval Checklist
Before asking Isaí to approve, verify:
- recipient is correct
- subject matches intent
- CTA exists only if useful
- all links are real
- tone fits the recipient
- HTML still reads well if styling is partially stripped
- there is a plain-text fallback summary ready