diff --git a/apps/sim/components/emails/_styles/base.ts b/apps/sim/components/emails/_styles/base.ts index 4c0607b4eee..2ff9fcc74ac 100644 --- a/apps/sim/components/emails/_styles/base.ts +++ b/apps/sim/components/emails/_styles/base.ts @@ -10,30 +10,36 @@ function buildColors() { const brand = getBrandConfig() const isWhitelabeled = brand.isWhitelabeled const accentColor = - isWhitelabeled && brand.theme?.primaryColor ? brand.theme.primaryColor : '#33C482' + isWhitelabeled && brand.theme?.primaryColor ? brand.theme.primaryColor : '#1a1a1a' return { - /** Main canvas background */ - bgOuter: '#F7F9FC', - /** Card/container background - pure white */ + /** Main canvas background — a hair off-white so the white card reads via contrast, not the border alone */ + bgOuter: '#f8f8f8', + /** Card/container background — platform `--surface-2` */ bgCard: '#ffffff', - /** Primary text color */ - textPrimary: '#2d2d2d', - /** Secondary text color */ - textSecondary: '#404040', - /** Tertiary text color */ + /** Primary text — platform `--text-primary` */ + textPrimary: '#1a1a1a', + /** Secondary text — platform `--text-secondary` */ + textSecondary: '#525252', + /** Tertiary text — platform `--text-tertiary` */ textTertiary: '#5c5c5c', - /** Muted text (footer) */ - textMuted: '#737373', - /** Brand primary color */ + /** Muted text (footer) — platform `--text-muted` */ + textMuted: '#707070', + /** Brand primary — neutral by default, brand color when whitelabeled */ brandPrimary: - isWhitelabeled && brand.theme?.primaryColor ? brand.theme.primaryColor : '#33C482', - /** Brand accent - used for buttons and links */ + isWhitelabeled && brand.theme?.primaryColor ? brand.theme.primaryColor : '#1a1a1a', + /** Accent for buttons and links — neutral by default, brand color when whitelabeled */ brandTertiary: accentColor, - /** Border/divider color */ - divider: '#ededed', - /** Footer background */ - footerBg: '#F7F9FC', + /** Border/divider — platform `--border` */ + divider: '#dedede', + /** Subtle fill for info/code boxes on the white card */ + surfaceSubtle: '#f7f7f7', + /** Error surface fill — platform `--terminal-status-error-bg` */ + errorBg: '#fef2f2', + /** Error surface border — platform `--error-muted` */ + errorBorder: '#fecaca', + /** Footer background — matches the canvas */ + footerBg: '#f8f8f8', } } @@ -41,7 +47,8 @@ export const colors = buildColors() /** Typography settings */ export const typography = { - fontFamily: "-apple-system, 'SF Pro Display', 'SF Pro Text', 'Helvetica', sans-serif", + fontFamily: + "'Season Sans', -apple-system, 'SF Pro Display', 'SF Pro Text', 'Helvetica', sans-serif", fontSize: { body: '16px', small: '14px', @@ -79,12 +86,13 @@ export const baseStyles = { margin: '0 auto', }, - /** Main card container with rounded corners */ + /** Main card container — white surface, chip-radius, hairline border on the near-white canvas */ container: { maxWidth: `${spacing.containerWidth}px`, margin: '0 auto', backgroundColor: colors.bgCard, - borderRadius: '16px', + border: `1px solid ${colors.divider}`, + borderRadius: '8px', overflow: 'hidden', }, @@ -120,26 +128,27 @@ export const baseStyles = { display: 'inline', }, - /** Primary CTA button - matches app tertiary button style */ + /** Primary CTA button - matches the platform's primary Chip (inverse fill, rounded-lg, h-30, text-sm) */ button: { display: 'inline-block', backgroundColor: colors.brandTertiary, color: '#ffffff', - fontWeight: 500, + fontWeight: 400, fontSize: '14px', - padding: '6px 12px', - borderRadius: '5px', + lineHeight: '30px', + padding: '0 12px', + borderRadius: '8px', textDecoration: 'none', textAlign: 'center' as const, margin: '4px 0', fontFamily: typography.fontFamily, }, - /** Link text style */ + /** Link text style - neutral color, so it carries an underline to read as a link */ link: { color: colors.brandTertiary, - fontWeight: 'bold' as const, - textDecoration: 'none', + fontWeight: 400, + textDecoration: 'underline', }, /** Horizontal divider */ @@ -169,8 +178,8 @@ export const baseStyles = { codeContainer: { margin: '12px 0', padding: '12px 16px', - backgroundColor: '#f8f9fa', - borderRadius: '6px', + backgroundColor: colors.surfaceSubtle, + borderRadius: '8px', border: `1px solid ${colors.divider}`, textAlign: 'center' as const, }, @@ -198,9 +207,9 @@ export const baseStyles = { /** Highlighted info box (e.g., "What you get with Pro") */ infoBox: { - backgroundColor: colors.bgOuter, + backgroundColor: colors.surfaceSubtle, padding: '16px 18px', - borderRadius: '6px', + borderRadius: '8px', margin: '16px 0', }, diff --git a/apps/sim/components/emails/billing/credits-exhausted-email.tsx b/apps/sim/components/emails/billing/credits-exhausted-email.tsx index 4108a912624..d505e9e0726 100644 --- a/apps/sim/components/emails/billing/credits-exhausted-email.tsx +++ b/apps/sim/components/emails/billing/credits-exhausted-email.tsx @@ -34,7 +34,7 @@ export function CreditsExhaustedEmail({
- + Discord diff --git a/apps/sim/components/emails/components/email-layout.tsx b/apps/sim/components/emails/components/email-layout.tsx index a60b76c7682..f28e9a81008 100644 --- a/apps/sim/components/emails/components/email-layout.tsx +++ b/apps/sim/components/emails/components/email-layout.tsx @@ -1,4 +1,4 @@ -import { Body, Container, Head, Html, Img, Preview, Section } from '@react-email/components' +import { Body, Container, Font, Head, Html, Img, Preview, Section } from '@react-email/components' import { baseStyles } from '@/components/emails/_styles' import { EmailFooter } from '@/components/emails/components/email-footer' import { getBaseUrl } from '@/lib/core/utils/urls' @@ -30,10 +30,22 @@ export function EmailLayout({ }: EmailLayoutProps) { const brand = getBrandConfig() const baseUrl = getBaseUrl() + const hasCustomLogo = Boolean(brand.logoUrl) return ( - + + + {preview} {/* Main card container */} @@ -42,10 +54,10 @@ export function EmailLayout({
{brand.name}
diff --git a/apps/sim/public/brand/color/email/wordmark.png b/apps/sim/public/brand/color/email/wordmark.png index 639a2ea80fc..977814b5655 100644 Binary files a/apps/sim/public/brand/color/email/wordmark.png and b/apps/sim/public/brand/color/email/wordmark.png differ