improvement(emails): align the email design tokens with the platform design system

[waleedlatif1]

Summary

The email baseStyles claimed to be "derived from globals.css light mode tokens" but had drifted. I diffed every value against the live platform source (globals.css, tailwind.config.ts, chip-chrome.ts) and corrected it.

Color drift — values that no longer matched their own comment:

• --border is #d8d8d8, emails used #dedede
• --text-muted is #7a7a7a, emails used #707070
• canvas was an off-token #f8f8f8 → --surface-1 #fbfbfb
• added textBody (--text-body #434343) and textInverse (--text-inverse). Body copy was rendering at --text-secondary; the platform's body/value token is --text-body, so paragraph text now matches the app.
• renamed colors.divider → colors.border (the platform retired --divider)

Type scale now mirrors tailwind.config.ts and uses its names (caption/small/sm/base/md), so every size traces to a Tailwind token. Email body stays at md 16px — the one deliberate deviation from the app's 15px base, and still a real token. The single off-scale value (24px OTP/balance figure) is now a named display token with a comment saying why the platform has no equivalent.

Weights: added a fontWeight scale (400/500/600) and removed every fontWeight: 'bold' (=700, off the platform's three-step scale).

Geometry: one RADIUS constant = --radius 8px, which kills the lone borderRadius: '6px' in payment-failed. The CTA now transcribes the platform primary Chip exactly — chipGeometryClass is h-[30px] rounded-lg px-2 text-sm, so button padding went 12px → 8px. Worth an eyeball — the one change where matching the platform makes the email button slightly tighter.

De-duplication:

• extracted ProFeaturesBox — ~55 lines were copy-pasted byte-for-byte between credits-exhausted and free-tier-upgrade, including an uppercase/letter-spaced title and a border (${colors.brandTertiary}20) that existed nowhere else
• new errorBox token — payment-failed was re-typing infoBox's own padding and margin just to swap the fill
• new infoBoxLabel/infoBoxValue — credit-purchase hand-styled four <Text>s inside an otherwise correct infoBox
• new greeting token — 10 files spelled out {...paragraph, marginTop: 0} inline and 8 forgot it entirely; now one token used by all 18
• new footerLink token — the footer hand-rolled its own; deleted the dead baseStyles.footer it never used

Rhythm: limit-threshold, usage-threshold, usage-limit-reached and payment-failed each had a divider fencing off the CTA. Every template is now greeting → body → box → CTA → one divider → footnote.

Type of Change

• Improvement

Testing

Rendered all 16 templates and scanned the emitted HTML for every legacy value — #dedede, #707070, #f8f8f8, border-radius:6px, font-weight:700|bold, text-transform:uppercase, letter-spacing:0.5px: 0 hits across 16 templates. Confirmed the platform values (#d8d8d8, #434343, #7a7a7a, #fbfbfb) are present, and that every template renders exactly one divider and one flush greeting. Source scan shows zero raw hex, zero bold, zero raw radius literals outside base.ts. Tests: 6/6 email + 227/227 mailer & schedule-notification. Type-check clean.

Not visually diffed in a mail client — verification is on rendered HTML, not pixels.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Aug 10, 2026 1:02am

[cursor]

PR Summary

Low Risk
Presentation-only email and preview-route changes with regression tests on token mirroring; no auth, billing logic, or send-path behavior changes.

Overview
Realigns email hardcoded style tokens in base.ts with live platform sources (globals.css, Tailwind, chip chrome) and adds base.tokens.test.ts so future drift fails CI. Colors, typography scale, weights (400/500/600), radius, and CTA geometry now mirror the app—including tighter CTA padding to match the primary Chip.

Introduces shared pieces—EmailButton, EmailStrong, ProFeaturesBox, and tokens like greeting, footnote, footerLink, errorBox, infoBoxLabel/infoBoxValue—and refactors templates to use them instead of repeated Link+Text CTAs, raw strong, and inline style overrides.

The email preview gallery gains more template entries, category grouping with auto-Uncategorized fallback, and an iframe grid styled with email design tokens. Plain personal emails and getBrandConfig() names replace hardcoded “Sim” where appropriate; footer uses footerLink and raw mailto anchors where needed.

^{Reviewed by Cursor Bugbot for commit 9c2043f. Configure here.}

[greptile-apps]

Greptile Summary

The PR aligns email styling with the platform design tokens and consolidates repeated email presentation patterns.

• Updates shared color, typography, weight, radius, spacing, and content-style tokens.
• Introduces reusable button, emphasis, and Pro-features components across email templates.
• Expands the email-preview gallery and adds drift-detection tests against platform token sources.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
apps/sim/components/emails/_styles/base.ts	Centralizes the revised email design tokens and shared presentation styles without an identified blocking failure.
apps/sim/components/emails/_styles/base.tokens.test.ts	Adds repository-source comparisons for email colors, typography, geometry, and font weights.
apps/sim/app/api/emails/preview/route.ts	Expands the preview catalog and replaces the link list with a categorized iframe gallery using fixed identifiers.
apps/sim/components/emails/billing/pro-features-box.tsx	Extracts duplicated email-compatible Pro feature markup while retaining necessary inline table structure.
apps/sim/components/emails/components/email-button.tsx	Centralizes CTA markup and styling for reuse across branded templates.

_{Reviews (3): Last reviewed commit: "fix(emails): restore row spacing in the ..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit 9c2043f. Configure here.}