Newsletter

Foundation source: use contexts/design-foundations-system.html for rhythm, type roles, buttons, reading path, and image/text policy before adapting to email-client limits. Canonical source template: templates/newsletter/module-outline.md.

System Waterfall

Apply in order: foundation context, tokens and brand systems, media framework, channel data, this newsletter sheet, newsletter module template, email-client QA. Email clients may require pixel fallbacks, but source rhythm, hierarchy, CTA rules, captions, and reading path come from the foundation layer.

Media

• Format: email newsletter, 600-680px content width.
• Surface: Warm Light.
• Dark mode: email clients may invert colors unpredictably; use simple surfaces and test before sending.

Margins

• Outer email padding: 24px mobile, 40px desktop.
• Content width: 600px preferred.
• Keep logo and first headline above the first scroll on mobile.

Typography Scaling

• Header: Newsreader 32-40px.
• Section title: Newsreader 24-30px.
• Body: Lexend 16-18px with email-safe fallback.
• Caption/meta: IBM Plex Mono 12-13px.

Spacing

• CSS-capable templates use rem source values; table-based email fallbacks may emit pixel equivalents for client reliability.
• Module gap: 2-3rem source equivalent.
• Paragraph gap: 0.75rem source equivalent.
• Button margin: 1.5rem top, 2rem bottom source equivalent.
• Divider gap: 2rem source equivalent.
• Keep button padding horizontal greater than vertical and preserve Lexend 500 button labels.

Grid

Email grid is constrained.

• Default: single column.
• Desktop optional: 2 columns for short link lists only.
• Avoid complex nested layouts that fail in Outlook.

Layout System

1. Wordmark.
2. One editorial claim.
3. One useful insight or workflow breakdown.
4. One proof point, chart, or short example.
5. One CTA.
6. Footer with LinkedIn, Terms, Privacy.

Reading path:

• Use vertical/layer-cake scanning. Each module needs a clear heading, proof/value, and next step.
• Avoid F-pattern drift by keeping paragraphs short and section starts visible.
• Do not use bento grids in email unless they are two short peer links on desktop with a clean single-column mobile fallback.

Medium Constraints

• Avoid background images.
• Avoid relying on custom fonts rendering everywhere.
• Use live text, not image text, except social preview thumbnails.
• Buttons must have enough contrast if images are blocked.
• If an image is used, captions/cutlines stay adjacent and the CTA never depends on text baked into the image.