Email

System-triggered email uses Raft's reading surfaces and action hierarchy in table-based HTML. Email clients cannot run raft-ui components; render the same visual roles with inline styles and a usable system-font fallback.

When it applies

Use this pattern for account verification, password recovery, invitations, security notices, app review notifications, onboarding letters, and lifecycle email. It does not define recipients, schedules, consent, or delivery policy.

Structure

Use the roles from Color, Typography, Shape, and Button. The brand lockup identifies the sender; it is not a large promotional hero.

Rules

• Resolve semantic tokens into inline sRGB colors and pixel dimensions for clients that strip custom properties or stylesheets. Keep the mapping documented beside the email renderer.
• Use attention-400 for underlined body links, matching the primary action fill in both light and supported dark mode (cindyz, 2026-10-29). In-app links keep foreground-link.
• Use attention-400 with sticker-ink for the primary action, with a 6px radius (radius-chip) and an ink border. Keep the action readable when images and web fonts are disabled.
• Keep body content directly on the page surface, without a reading card, border, radius, or shadow. The logo is centered on a yellow brand area, with no body card (cindyz, 2026-10-29). The brand area is 88px tall, with a centered 114 × 28px logo and a 28px gap before the body (cindyz, 2026-11-03). Give the brand area and the action a 6px radius (radius-chip), not the in-app control-radius; follow Elevation for actions without hard shadows.
• The email action uses a 15px semibold label, 22px line height, 10px vertical and 18px horizontal padding, and a 1px ink border: 44px tall for a single line. Let localized labels wrap and grow instead of reducing the touch target. These email-specific dimensions do not change in-app button tokens.
• Use a 16px body with 24px line height and a footer of at least 12px. Email readers frequently view the same message on a phone, so do not shrink the reading size for desktop.
• Keep Space Grotesk first in the human-text font stack, followed by system fonts. Do not depend on a remote font loading for the layout to work.
• Preserve the message's existing action destination, sender, reply address, expiry explanation, and required unsubscribe or legal footer. A visual revision does not change delivery policy.
• Provide dark styles where supported, using Dark mode. Keep light-mode inline fallbacks; mail clients may strip styles or transform colors independently.

Wide and narrow

• Limit the reading column to 520px, with a fluid width below that.
• Leave at least 16px beside the message on a phone, and allow long names, identifiers, and URLs to wrap without widening the viewport.
• Verify light and dark browser rendering, narrow screens, disabled images, and long or localized content. Browser screenshots do not establish Gmail, Outlook, or Apple Mail acceptance; record actual mailbox checks separately.

Accessibility

• Give layout tables role="presentation", use headings for message structure, and provide the brand name as the image's alternative text.
• Render actions as named links that work without JavaScript. Underline body links so color is not the only cue.
• The light-pink body links (attention-400) on white fall below normal-text contrast requirements; the rest of the body text is not pink. Record that limitation; it is not an accessibility pass. Required unsubscribe links keep independent neutral colors and must pass their contrast check.
• Keep security instructions and expiry information as text, not images.

Related

• Writing
• Brand