From 0bf58ca66e842f9c7e93c78b04664c15180e8f77 Mon Sep 17 00:00:00 2001
From: Lucas Smith <me@lucasjamessmith.me>
Date: Mon, 22 Jun 2026 14:33:34 +1000
Subject: [PATCH] feat: add custom brand colours to emails (#3005)

---
 packages/email/package.json                   |   5 +-
 packages/email/preview/.gitignore             |   2 +
 packages/email/preview/app/app.css            |   9 +
 .../preview/app/components/playground.tsx     | 337 +++++++++++++++
 .../preview/app/components/prop-fields.tsx    | 113 +++++
 packages/email/preview/app/entry.client.tsx   |  12 +
 packages/email/preview/app/entry.server.tsx   |  56 +++
 packages/email/preview/app/lib/templates.tsx  | 407 ++++++++++++++++++
 packages/email/preview/app/lib/viewports.ts   |  10 +
 packages/email/preview/app/root.tsx           |  30 ++
 packages/email/preview/app/routes.ts          |   7 +
 packages/email/preview/app/routes/$slug.tsx   |  35 ++
 packages/email/preview/app/routes/_index.tsx  |  13 +
 .../email/preview/app/routes/api.render.tsx   |  61 +++
 packages/email/preview/postcss.config.cjs     |   6 +
 packages/email/preview/react-router.config.ts |   6 +
 packages/email/preview/tailwind.config.cjs    |  24 ++
 packages/email/preview/tsconfig.json          |  30 ++
 packages/email/preview/vite.config.ts         |  72 ++++
 packages/email/providers/branding.tsx         |   2 +
 packages/email/render.tsx                     |  57 ++-
 .../template-access-auth-2fa.tsx              |  14 +-
 .../template-admin-user-created.tsx           |  14 +-
 .../template-confirmation-email.tsx           |   8 +-
 .../template-custom-message-body.tsx          |   2 +-
 .../template-document-cancel.tsx              |   6 +-
 .../template-document-completed.tsx           |   8 +-
 .../template-document-invite.tsx              |   6 +-
 .../template-document-pending.tsx             |   6 +-
 .../template-document-recipient-signed.tsx    |   6 +-
 .../template-document-rejected.tsx            |   6 +-
 .../template-document-rejection-confirmed.tsx |   4 +-
 .../template-document-reminder.tsx            |   8 +-
 .../template-document-self-signed.tsx         |  16 +-
 .../template-document-super-delete.tsx        |  10 +-
 .../template-components/template-footer.tsx   |  14 +-
 .../template-forgot-password.tsx              |   6 +-
 .../template-recipient-expired.tsx            |   6 +-
 .../template-reset-password.tsx               |   6 +-
 packages/email/templates/access-auth-2fa.tsx  |   4 +-
 .../email/templates/admin-user-created.tsx    |   4 +-
 .../email/templates/bulk-send-complete.tsx    |   8 +-
 packages/email/templates/confirm-email.tsx    |   4 +-
 .../email/templates/confirm-team-email.tsx    |  14 +-
 packages/email/templates/document-cancel.tsx  |   4 +-
 .../email/templates/document-completed.tsx    |   4 +-
 .../document-created-from-direct-template.tsx |  10 +-
 packages/email/templates/document-invite.tsx  |   8 +-
 packages/email/templates/document-pending.tsx |   4 +-
 .../templates/document-recipient-signed.tsx   |   4 +-
 .../email/templates/document-rejected.tsx     |   4 +-
 .../document-rejection-confirmed.tsx          |   4 +-
 .../email/templates/document-reminder.tsx     |   6 +-
 .../email/templates/document-self-signed.tsx  |   4 +-
 .../email/templates/document-super-delete.tsx |   4 +-
 packages/email/templates/forgot-password.tsx  |   4 +-
 ...organisation-account-link-confirmation.tsx |  12 +-
 .../email/templates/organisation-delete.tsx   |  10 +-
 .../email/templates/organisation-invite.tsx   |  16 +-
 .../email/templates/organisation-join.tsx     |  10 +-
 .../email/templates/organisation-leave.tsx    |  10 +-
 .../templates/organisation-limit-alert.tsx    |  10 +-
 .../email/templates/recipient-expired.tsx     |   4 +-
 .../recipient-removed-from-document.tsx       |   6 +-
 packages/email/templates/reset-password.tsx   |  12 +-
 packages/email/templates/team-delete.tsx      |  10 +-
 .../email/templates/team-email-removed.tsx    |  10 +-
 packages/email/tsconfig.json                  |   2 +-
 .../server-only/email/get-email-context.ts    |  30 +-
 packages/lib/utils/email-branding-colors.ts   | 105 +++++
 .../utils/team-global-settings-to-branding.ts |  10 +
 71 files changed, 1599 insertions(+), 192 deletions(-)
 create mode 100644 packages/email/preview/.gitignore
 create mode 100644 packages/email/preview/app/app.css
 create mode 100644 packages/email/preview/app/components/playground.tsx
 create mode 100644 packages/email/preview/app/components/prop-fields.tsx
 create mode 100644 packages/email/preview/app/entry.client.tsx
 create mode 100644 packages/email/preview/app/entry.server.tsx
 create mode 100644 packages/email/preview/app/lib/templates.tsx
 create mode 100644 packages/email/preview/app/lib/viewports.ts
 create mode 100644 packages/email/preview/app/root.tsx
 create mode 100644 packages/email/preview/app/routes.ts
 create mode 100644 packages/email/preview/app/routes/$slug.tsx
 create mode 100644 packages/email/preview/app/routes/_index.tsx
 create mode 100644 packages/email/preview/app/routes/api.render.tsx
 create mode 100644 packages/email/preview/postcss.config.cjs
 create mode 100644 packages/email/preview/react-router.config.ts
 create mode 100644 packages/email/preview/tailwind.config.cjs
 create mode 100644 packages/email/preview/tsconfig.json
 create mode 100644 packages/email/preview/vite.config.ts
 create mode 100644 packages/lib/utils/email-branding-colors.ts

diff --git a/packages/email/package.json b/packages/email/package.json
index f7791ef5b..bb549f70b 100644
--- a/packages/email/package.json
+++ b/packages/email/package.json
@@ -12,12 +12,13 @@
     "index.ts"
   ],
   "scripts": {
-    "dev": "email dev --port 3002 --dir templates",
+    "dev": "react-router dev --config preview/vite.config.ts",
+    "preview:build": "react-router build --config preview/vite.config.ts",
     "clean": "rimraf node_modules"
   },
   "dependencies": {
-    "@documenso/tailwind-config": "*",
     "@documenso/nodemailer-resend": "4.0.0",
+    "@documenso/tailwind-config": "*",
     "@react-email/body": "0.2.0",
     "@react-email/button": "0.2.0",
     "@react-email/code-block": "0.2.0",
diff --git a/packages/email/preview/.gitignore b/packages/email/preview/.gitignore
new file mode 100644
index 000000000..d41162243
--- /dev/null
+++ b/packages/email/preview/.gitignore
@@ -0,0 +1,2 @@
+/.react-router/
+/build/
diff --git a/packages/email/preview/app/app.css b/packages/email/preview/app/app.css
new file mode 100644
index 000000000..32dbdf8f8
--- /dev/null
+++ b/packages/email/preview/app/app.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
diff --git a/packages/email/preview/app/components/playground.tsx b/packages/email/preview/app/components/playground.tsx
new file mode 100644
index 000000000..6cdbd53e2
--- /dev/null
+++ b/packages/email/preview/app/components/playground.tsx
@@ -0,0 +1,337 @@
+import { SUPPORTED_LANGUAGE_CODES } from '@documenso/lib/constants/locales';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate } from 'react-router';
+
+import type { FieldConfig } from '../lib/templates';
+import { templates } from '../lib/templates';
+import { viewports } from '../lib/viewports';
+import { PropFields } from './prop-fields';
+
+type Theme = 'light' | 'dark';
+
+const GROUP_ORDER = ['Documents', 'Recipients', 'Organisations', 'Teams', 'Account', 'Admin'] as const;
+
+const LANGUAGE_LABELS: Record<string, string> = {
+  en: 'English',
+  de: 'German',
+  fr: 'French',
+  es: 'Spanish',
+  it: 'Italian',
+  nl: 'Dutch',
+  pl: 'Polish',
+  'pt-BR': 'Portuguese (Brazil)',
+  ja: 'Japanese',
+  ko: 'Korean',
+  zh: 'Chinese',
+};
+
+const DEFAULT_COLORS = {
+  primary: '#a2e771',
+  primaryForeground: '#162c07',
+  background: '#ffffff',
+  foreground: '#0f172a',
+};
+
+type PlaygroundProps = {
+  slug: string;
+  fields: Record<string, FieldConfig>;
+  defaultProps: Record<string, unknown>;
+};
+
+export const EmailPlayground = ({ slug, fields, defaultProps }: PlaygroundProps) => {
+  const navigate = useNavigate();
+
+  const [props, setProps] = useState(defaultProps);
+  const [html, setHtml] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const [theme, setTheme] = useState<Theme>('light');
+  const [viewportIndex, setViewportIndex] = useState(2);
+  const [lang, setLang] = useState('en');
+
+  const [brandingEnabled, setBrandingEnabled] = useState(false);
+  const [colors, setColors] = useState(DEFAULT_COLORS);
+
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const groupedTemplates = useMemo(() => {
+    const entries = Object.entries(templates);
+
+    return GROUP_ORDER.map((group) => ({
+      group,
+      entries: entries.filter(([, def]) => def.group === group),
+    })).filter((section) => section.entries.length > 0);
+  }, []);
+
+  const fetchHtml = useCallback(
+    async (currentProps: Record<string, unknown>, currentLang: string, brandColors: typeof colors | null) => {
+      setLoading(true);
+
+      try {
+        const response = await fetch('/api/render', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            slug,
+            props: currentProps,
+            lang: currentLang,
+            colors: brandColors,
+            assetBaseUrl: window.location.origin,
+          }),
+        });
+
+        if (response.ok) {
+          setHtml(await response.text());
+        }
+      } finally {
+        setLoading(false);
+      }
+    },
+    [slug],
+  );
+
+  // Reset props when navigating to a different template.
+  useEffect(() => {
+    setProps(defaultProps);
+  }, [defaultProps]);
+
+  // Re-render on any input change (debounced).
+  useEffect(() => {
+    clearTimeout(debounceRef.current);
+
+    debounceRef.current = setTimeout(() => {
+      void fetchHtml(props, lang, brandingEnabled ? colors : null);
+    }, 250);
+
+    return () => clearTimeout(debounceRef.current);
+  }, [props, lang, brandingEnabled, colors, fetchHtml]);
+
+  const handlePropChange = (key: string, value: unknown) => {
+    setProps((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleColorChange = (key: keyof typeof colors, value: string) => {
+    setColors((prev) => ({ ...prev, [key]: value }));
+  };
+
+  // Force dark mode inside the iframe by neutralising the prefers-color-scheme
+  // media query (color-scheme alone doesn't trigger it inside an iframe).
+  const displayHtml = theme === 'dark' && html ? html.replaceAll(/prefers-color-scheme:\s*dark/g, 'min-width:0') : html;
+
+  const viewport = viewports[viewportIndex];
+
+  return (
+    <div className="flex h-screen w-screen overflow-hidden bg-neutral-100 font-sans text-neutral-900">
+      {/* Sidebar */}
+      <aside className="flex h-full w-60 flex-shrink-0 flex-col overflow-y-auto border-neutral-200 border-r bg-white">
+        <div className="border-neutral-200 border-b px-4 py-3">
+          <h1 className="font-semibold text-sm">Email Preview</h1>
+          <p className="text-neutral-500 text-xs">{Object.keys(templates).length} templates</p>
+        </div>
+
+        <nav className="flex-1 px-2 py-2">
+          {groupedTemplates.map((section) => (
+            <div key={section.group} className="mb-3">
+              <div className="px-2 py-1 font-medium text-neutral-400 text-xs uppercase tracking-wide">
+                {section.group}
+              </div>
+
+              {section.entries.map(([id, def]) => (
+                <button
+                  key={id}
+                  type="button"
+                  onClick={() => navigate(`/${id}`)}
+                  className={`block w-full rounded-md px-2 py-1.5 text-left text-sm transition-colors ${
+                    slug === id ? 'bg-neutral-900 text-white' : 'text-neutral-700 hover:bg-neutral-100'
+                  }`}
+                >
+                  {def.name}
+                </button>
+              ))}
+            </div>
+          ))}
+        </nav>
+      </aside>
+
+      {/* Props panel */}
+      <section className="flex h-full w-72 flex-shrink-0 flex-col overflow-y-auto border-neutral-200 border-r bg-white px-4 py-3">
+        <h2 className="mb-3 font-medium text-neutral-500 text-xs uppercase tracking-wide">Props</h2>
+        <PropFields fields={fields} values={props} onChange={handlePropChange} />
+      </section>
+
+      {/* Main */}
+      <main className="flex h-full flex-1 flex-col overflow-hidden">
+        <Toolbar
+          theme={theme}
+          setTheme={setTheme}
+          viewportIndex={viewportIndex}
+          setViewportIndex={setViewportIndex}
+          lang={lang}
+          setLang={setLang}
+          brandingEnabled={brandingEnabled}
+          setBrandingEnabled={setBrandingEnabled}
+          colors={colors}
+          onColorChange={handleColorChange}
+          loading={loading}
+        />
+
+        <div
+          className={`flex flex-1 items-start justify-center overflow-auto p-6 ${
+            theme === 'dark' ? 'bg-neutral-800' : 'bg-neutral-200'
+          }`}
+        >
+          <div
+            className="flex-shrink-0 overflow-hidden rounded-lg bg-white shadow-lg"
+            style={{ width: viewport.width }}
+          >
+            <iframe
+              title={`${viewport.name} ${theme}`}
+              srcDoc={displayHtml}
+              className="h-[calc(100vh-8rem)] w-full border-0"
+              style={{ colorScheme: theme }}
+            />
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+type ToolbarProps = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  viewportIndex: number;
+  setViewportIndex: (index: number) => void;
+  lang: string;
+  setLang: (lang: string) => void;
+  brandingEnabled: boolean;
+  setBrandingEnabled: (enabled: boolean) => void;
+  colors: typeof DEFAULT_COLORS;
+  onColorChange: (key: keyof typeof DEFAULT_COLORS, value: string) => void;
+  loading: boolean;
+};
+
+const Toolbar = (props: ToolbarProps) => {
+  return (
+    <div className="flex flex-wrap items-center gap-4 border-neutral-200 border-b bg-white px-4 py-2">
+      <SegmentedControl
+        label="Theme"
+        value={props.theme}
+        options={[
+          { value: 'light', label: 'Light' },
+          { value: 'dark', label: 'Dark' },
+        ]}
+        onChange={(value) => props.setTheme(value as Theme)}
+      />
+
+      <SegmentedControl
+        label="Viewport"
+        value={String(props.viewportIndex)}
+        options={viewports.map((viewport, index) => ({ value: String(index), label: viewport.name }))}
+        onChange={(value) => props.setViewportIndex(Number(value))}
+      />
+
+      <label className="flex items-center gap-1.5 text-neutral-600 text-xs">
+        <span className="font-medium">Language</span>
+        <select
+          value={props.lang}
+          onChange={(event) => props.setLang(event.target.value)}
+          className="rounded-md border border-neutral-300 bg-white px-2 py-1 text-neutral-900 text-xs"
+        >
+          {SUPPORTED_LANGUAGE_CODES.map((code) => (
+            <option key={code} value={code}>
+              {LANGUAGE_LABELS[code] ?? code}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <label className="flex items-center gap-1.5 text-neutral-600 text-xs">
+        <input
+          type="checkbox"
+          checked={props.brandingEnabled}
+          onChange={(event) => props.setBrandingEnabled(event.target.checked)}
+        />
+        <span className="font-medium">Brand colours</span>
+      </label>
+
+      {props.brandingEnabled && (
+        <div className="flex items-center gap-3">
+          <ColorInput
+            label="Primary"
+            value={props.colors.primary}
+            onChange={(value) => props.onColorChange('primary', value)}
+          />
+          <ColorInput
+            label="On primary"
+            value={props.colors.primaryForeground}
+            onChange={(value) => props.onColorChange('primaryForeground', value)}
+          />
+          <ColorInput
+            label="Background"
+            value={props.colors.background}
+            onChange={(value) => props.onColorChange('background', value)}
+          />
+          <ColorInput
+            label="Text"
+            value={props.colors.foreground}
+            onChange={(value) => props.onColorChange('foreground', value)}
+          />
+        </div>
+      )}
+
+      <span className="ml-auto text-neutral-400 text-xs">{props.loading ? 'Rendering…' : ''}</span>
+    </div>
+  );
+};
+
+type SegmentedControlProps = {
+  label: string;
+  value: string;
+  options: { value: string; label: string }[];
+  onChange: (value: string) => void;
+};
+
+const SegmentedControl = (props: SegmentedControlProps) => {
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className="font-medium text-neutral-600 text-xs">{props.label}</span>
+      <div className="flex overflow-hidden rounded-md border border-neutral-300">
+        {props.options.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => props.onChange(option.value)}
+            className={`px-2.5 py-1 text-xs transition-colors ${
+              props.value === option.value
+                ? 'bg-neutral-900 text-white'
+                : 'bg-white text-neutral-700 hover:bg-neutral-100'
+            }`}
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+type ColorInputProps = {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+};
+
+const ColorInput = (props: ColorInputProps) => {
+  return (
+    <label className="flex items-center gap-1 text-neutral-600 text-xs">
+      <span>{props.label}</span>
+      <input
+        type="color"
+        value={props.value}
+        onChange={(event) => props.onChange(event.target.value)}
+        className="h-6 w-6 cursor-pointer rounded border border-neutral-300 bg-white p-0"
+      />
+    </label>
+  );
+};
diff --git a/packages/email/preview/app/components/prop-fields.tsx b/packages/email/preview/app/components/prop-fields.tsx
new file mode 100644
index 000000000..c7f7b2565
--- /dev/null
+++ b/packages/email/preview/app/components/prop-fields.tsx
@@ -0,0 +1,113 @@
+import type { FieldConfig } from '../lib/templates';
+
+type PropFieldsProps = {
+  fields: Record<string, FieldConfig>;
+  values: Record<string, unknown>;
+  onChange: (key: string, value: unknown) => void;
+};
+
+export const PropFields = ({ fields, values, onChange }: PropFieldsProps) => {
+  const entries = Object.entries(fields);
+
+  if (entries.length === 0) {
+    return <p className="text-neutral-400 text-xs">No editable props.</p>;
+  }
+
+  return (
+    <div className="grid gap-3">
+      {entries.map(([key, field]) => (
+        <PropField key={key} name={key} field={field} value={values[key]} onChange={(value) => onChange(key, value)} />
+      ))}
+    </div>
+  );
+};
+
+type PropFieldProps = {
+  name: string;
+  field: FieldConfig;
+  value: unknown;
+  onChange: (value: unknown) => void;
+};
+
+const inputClass =
+  'w-full rounded-md border border-neutral-300 bg-white px-2 py-1 text-neutral-900 text-xs focus:border-neutral-500 focus:outline-none';
+
+const PropField = ({ name, field, value, onChange }: PropFieldProps) => {
+  const id = `prop-${name}`;
+
+  return (
+    <div className="grid gap-1">
+      <label htmlFor={id} className="font-medium text-neutral-600 text-xs">
+        {field.label}
+      </label>
+
+      {field.type === 'text' && (
+        <input
+          id={id}
+          className={inputClass}
+          value={String(value ?? '')}
+          placeholder={field.placeholder}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      )}
+
+      {field.type === 'textarea' && (
+        <textarea
+          id={id}
+          className={`${inputClass} min-h-16 resize-y font-mono`}
+          value={String(value ?? '')}
+          placeholder={field.placeholder}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      )}
+
+      {field.type === 'number' && (
+        <input
+          id={id}
+          type="number"
+          className={inputClass}
+          value={value === undefined || value === null ? '' : String(value)}
+          placeholder={field.placeholder}
+          onChange={(event) => onChange(event.target.value === '' ? undefined : Number(event.target.value))}
+        />
+      )}
+
+      {field.type === 'boolean' && (
+        <input
+          id={id}
+          type="checkbox"
+          className="h-4 w-4"
+          checked={Boolean(value)}
+          onChange={(event) => onChange(event.target.checked)}
+        />
+      )}
+
+      {field.type === 'list' && (
+        <textarea
+          id={id}
+          className={`${inputClass} min-h-16 resize-y font-mono`}
+          value={Array.isArray(value) ? value.join('\n') : ''}
+          placeholder={field.placeholder}
+          onChange={(event) => onChange(event.target.value === '' ? [] : event.target.value.split('\n'))}
+        />
+      )}
+
+      {field.type === 'select' && field.options && (
+        <select
+          id={id}
+          className={inputClass}
+          value={String(value ?? '')}
+          onChange={(event) => onChange(event.target.value)}
+        >
+          {field.options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      )}
+
+      {field.description && <p className="text-neutral-400 text-xs">{field.description}</p>}
+    </div>
+  );
+};
diff --git a/packages/email/preview/app/entry.client.tsx b/packages/email/preview/app/entry.client.tsx
new file mode 100644
index 000000000..33cb007f5
--- /dev/null
+++ b/packages/email/preview/app/entry.client.tsx
@@ -0,0 +1,12 @@
+import { StrictMode, startTransition } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <HydratedRouter />
+    </StrictMode>,
+  );
+});
diff --git a/packages/email/preview/app/entry.server.tsx b/packages/email/preview/app/entry.server.tsx
new file mode 100644
index 000000000..f40d6e0e9
--- /dev/null
+++ b/packages/email/preview/app/entry.server.tsx
@@ -0,0 +1,56 @@
+import { PassThrough } from 'node:stream';
+import { createReadableStreamFromReadable } from '@react-router/node';
+import { isbot } from 'isbot';
+import type { RenderToPipeableStreamOptions } from 'react-dom/server';
+import { renderToPipeableStream } from 'react-dom/server';
+import type { AppLoadContext, EntryContext } from 'react-router';
+import { ServerRouter } from 'react-router';
+
+export const streamTimeout = 5_000;
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+  _loadContext: AppLoadContext,
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    const userAgent = request.headers.get('user-agent');
+
+    const readyOption: keyof RenderToPipeableStreamOptions =
+      (userAgent && isbot(userAgent)) || routerContext.isSpaMode ? 'onAllReady' : 'onShellReady';
+
+    const { pipe, abort } = renderToPipeableStream(<ServerRouter context={routerContext} url={request.url} />, {
+      [readyOption]() {
+        shellRendered = true;
+        const body = new PassThrough();
+        const stream = createReadableStreamFromReadable(body);
+
+        responseHeaders.set('Content-Type', 'text/html');
+
+        resolve(
+          new Response(stream, {
+            headers: responseHeaders,
+            status: responseStatusCode,
+          }),
+        );
+
+        pipe(body);
+      },
+      onShellError(error: unknown) {
+        reject(error);
+      },
+      onError(error: unknown) {
+        responseStatusCode = 500;
+
+        if (shellRendered) {
+          console.error(error);
+        }
+      },
+    });
+
+    setTimeout(abort, streamTimeout + 1000);
+  });
+}
diff --git a/packages/email/preview/app/lib/templates.tsx b/packages/email/preview/app/lib/templates.tsx
new file mode 100644
index 000000000..ebf32dda1
--- /dev/null
+++ b/packages/email/preview/app/lib/templates.tsx
@@ -0,0 +1,407 @@
+import type { ComponentType } from 'react';
+
+import { AccessAuth2FAEmailTemplate } from '../../../templates/access-auth-2fa';
+import { AdminUserCreatedTemplate } from '../../../templates/admin-user-created';
+import { BulkSendCompleteEmail } from '../../../templates/bulk-send-complete';
+import { ConfirmEmailTemplate } from '../../../templates/confirm-email';
+import { ConfirmTeamEmailTemplate } from '../../../templates/confirm-team-email';
+import { DocumentCancelTemplate } from '../../../templates/document-cancel';
+import { DocumentCompletedEmailTemplate } from '../../../templates/document-completed';
+import { DocumentCreatedFromDirectTemplateEmailTemplate } from '../../../templates/document-created-from-direct-template';
+import { DocumentInviteEmailTemplate } from '../../../templates/document-invite';
+import { DocumentPendingEmailTemplate } from '../../../templates/document-pending';
+import { DocumentRecipientSignedEmailTemplate } from '../../../templates/document-recipient-signed';
+import { DocumentRejectedEmail } from '../../../templates/document-rejected';
+import { DocumentRejectionConfirmedEmail } from '../../../templates/document-rejection-confirmed';
+import { DocumentReminderEmailTemplate } from '../../../templates/document-reminder';
+import { DocumentSelfSignedEmailTemplate } from '../../../templates/document-self-signed';
+import { DocumentSuperDeleteEmailTemplate } from '../../../templates/document-super-delete';
+import { ForgotPasswordTemplate } from '../../../templates/forgot-password';
+import { OrganisationAccountLinkConfirmationTemplate } from '../../../templates/organisation-account-link-confirmation';
+import { OrganisationDeleteEmailTemplate } from '../../../templates/organisation-delete';
+import { OrganisationInviteEmailTemplate } from '../../../templates/organisation-invite';
+import { OrganisationJoinEmailTemplate } from '../../../templates/organisation-join';
+import { OrganisationLeaveEmailTemplate } from '../../../templates/organisation-leave';
+import { OrganisationLimitAlertEmailTemplate } from '../../../templates/organisation-limit-alert';
+import { RecipientExpiredTemplate } from '../../../templates/recipient-expired';
+import { RecipientRemovedFromDocumentTemplate } from '../../../templates/recipient-removed-from-document';
+import { ResetPasswordTemplate } from '../../../templates/reset-password';
+import { TeamDeleteEmailTemplate } from '../../../templates/team-delete';
+import { TeamEmailRemovedTemplate } from '../../../templates/team-email-removed';
+
+export type FieldType = 'text' | 'textarea' | 'number' | 'boolean' | 'select' | 'list';
+
+export type FieldConfig = {
+  type: FieldType;
+  label: string;
+  description?: string;
+  placeholder?: string;
+  default: unknown;
+  options?: { label: string; value: string }[];
+};
+
+export type TemplateDefinition = {
+  /** Human label for the sidebar. */
+  name: string;
+  /** Loose grouping for the sidebar. */
+  group: 'Documents' | 'Recipients' | 'Organisations' | 'Teams' | 'Account' | 'Admin';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  component: ComponentType<any>;
+  /** Editable props surfaced in the preview UI. */
+  fields: Record<string, FieldConfig>;
+};
+
+// --- Reusable field presets ---
+
+const documentNameField: FieldConfig = {
+  type: 'text',
+  label: 'Document name',
+  default: 'Open Source Pledge.pdf',
+};
+
+const recipientNameField: FieldConfig = {
+  type: 'text',
+  label: 'Recipient name',
+  default: 'Lucas Smith',
+};
+
+const roleField: FieldConfig = {
+  type: 'select',
+  label: 'Recipient role',
+  default: 'SIGNER',
+  options: [
+    { label: 'Signer', value: 'SIGNER' },
+    { label: 'Viewer', value: 'VIEWER' },
+    { label: 'Approver', value: 'APPROVER' },
+    { label: 'CC', value: 'CC' },
+    { label: 'Assistant', value: 'ASSISTANT' },
+  ],
+};
+
+/**
+ * Explicit template registry. Each entry maps a slug → component + editable
+ * `fields`. The slug is the route param (`/:slug`) and matches the source
+ * filename (sans extension).
+ *
+ * `fields` drives both the default preview values AND the editable inputs in
+ * the UI, so production templates stay free of preview-only defaults.
+ */
+export const templates: Record<string, TemplateDefinition> = {
+  // ---- Documents ----
+  'document-invite': {
+    name: 'Document invite',
+    group: 'Documents',
+    component: DocumentInviteEmailTemplate,
+    fields: {
+      inviterName: { type: 'text', label: 'Inviter name', default: 'Lucas Smith' },
+      inviterEmail: { type: 'text', label: 'Inviter email', default: 'lucas@documenso.com' },
+      documentName: documentNameField,
+      role: roleField,
+      customBody: {
+        type: 'textarea',
+        label: 'Custom message',
+        default: '',
+        description: 'Leave blank to use the default invite copy.',
+      },
+    },
+  },
+  'document-completed': {
+    name: 'Document completed',
+    group: 'Documents',
+    component: DocumentCompletedEmailTemplate,
+    fields: {
+      documentName: documentNameField,
+      customBody: { type: 'textarea', label: 'Custom message', default: '' },
+    },
+  },
+  'document-self-signed': {
+    name: 'Document self-signed',
+    group: 'Documents',
+    component: DocumentSelfSignedEmailTemplate,
+    fields: {
+      documentName: documentNameField,
+    },
+  },
+  'document-pending': {
+    name: 'Document pending',
+    group: 'Documents',
+    component: DocumentPendingEmailTemplate,
+    fields: {
+      documentName: documentNameField,
+    },
+  },
+  'document-reminder': {
+    name: 'Document reminder',
+    group: 'Documents',
+    component: DocumentReminderEmailTemplate,
+    fields: {
+      recipientName: recipientNameField,
+      documentName: documentNameField,
+      role: roleField,
+      customBody: { type: 'textarea', label: 'Custom message', default: '' },
+    },
+  },
+  'document-cancel': {
+    name: 'Document cancelled',
+    group: 'Documents',
+    component: DocumentCancelTemplate,
+    fields: {
+      inviterName: { type: 'text', label: 'Inviter name', default: 'Lucas Smith' },
+      documentName: documentNameField,
+      cancellationReason: {
+        type: 'textarea',
+        label: 'Cancellation reason',
+        default: '',
+        description: 'Optional. Blank renders no reason block.',
+      },
+    },
+  },
+  'document-rejected': {
+    name: 'Document rejected',
+    group: 'Documents',
+    component: DocumentRejectedEmail,
+    fields: {
+      recipientName: recipientNameField,
+      documentName: documentNameField,
+      documentUrl: { type: 'text', label: 'Document URL', default: 'https://documenso.com' },
+      rejectionReason: {
+        type: 'textarea',
+        label: 'Rejection reason',
+        default: 'The pledge amount is incorrect.',
+        description: 'Optional in production; blank renders no reason block.',
+      },
+    },
+  },
+  'document-rejection-confirmed': {
+    name: 'Document rejection confirmed',
+    group: 'Documents',
+    component: DocumentRejectionConfirmedEmail,
+    fields: {
+      recipientName: recipientNameField,
+      documentName: documentNameField,
+      documentOwnerName: { type: 'text', label: 'Document owner', default: 'Timur Ercan' },
+      reason: {
+        type: 'textarea',
+        label: 'Rejection reason',
+        default: 'The pledge amount is incorrect.',
+        description: 'Optional in production; blank renders no reason block.',
+      },
+    },
+  },
+  'document-created-from-direct-template': {
+    name: 'Document created (direct template)',
+    group: 'Documents',
+    component: DocumentCreatedFromDirectTemplateEmailTemplate,
+    fields: {
+      documentName: documentNameField,
+    },
+  },
+  'document-super-delete': {
+    name: 'Document deleted (admin)',
+    group: 'Documents',
+    component: DocumentSuperDeleteEmailTemplate,
+    fields: {
+      documentName: documentNameField,
+    },
+  },
+  'bulk-send-complete': {
+    name: 'Bulk send complete',
+    group: 'Documents',
+    component: BulkSendCompleteEmail,
+    fields: {
+      userName: { type: 'text', label: 'User name', default: 'Lucas Smith' },
+      templateName: { type: 'text', label: 'Template name', default: 'NDA Template' },
+      totalProcessed: { type: 'number', label: 'Total processed', default: 50 },
+      successCount: { type: 'number', label: 'Success count', default: 48 },
+      failedCount: { type: 'number', label: 'Failed count', default: 2 },
+      errors: {
+        type: 'list',
+        label: 'Errors',
+        default: ['Row 12: invalid email', 'Row 30: missing name'],
+        description: 'One error per line. Rendered when failed count > 0.',
+      },
+    },
+  },
+
+  // ---- Recipients ----
+  'document-recipient-signed': {
+    name: 'Recipient signed',
+    group: 'Recipients',
+    component: DocumentRecipientSignedEmailTemplate,
+    fields: {
+      documentName: documentNameField,
+      recipientName: recipientNameField,
+    },
+  },
+  'recipient-expired': {
+    name: 'Recipient expired',
+    group: 'Recipients',
+    component: RecipientExpiredTemplate,
+    fields: {
+      documentName: documentNameField,
+      recipientName: recipientNameField,
+    },
+  },
+  'recipient-removed-from-document': {
+    name: 'Recipient removed',
+    group: 'Recipients',
+    component: RecipientRemovedFromDocumentTemplate,
+    fields: {
+      documentName: documentNameField,
+    },
+  },
+
+  // ---- Organisations ----
+  'organisation-invite': {
+    name: 'Organisation invite',
+    group: 'Organisations',
+    component: OrganisationInviteEmailTemplate,
+    fields: {
+      senderName: { type: 'text', label: 'Sender name', default: 'Lucas Smith' },
+      organisationName: { type: 'text', label: 'Organisation name', default: 'Documenso' },
+    },
+  },
+  'organisation-join': {
+    name: 'Organisation join',
+    group: 'Organisations',
+    component: OrganisationJoinEmailTemplate,
+    fields: {
+      memberName: { type: 'text', label: 'Member name', default: 'Lucas Smith' },
+      organisationName: { type: 'text', label: 'Organisation name', default: 'Documenso' },
+    },
+  },
+  'organisation-leave': {
+    name: 'Organisation leave',
+    group: 'Organisations',
+    component: OrganisationLeaveEmailTemplate,
+    fields: {
+      memberName: { type: 'text', label: 'Member name', default: 'Lucas Smith' },
+      organisationName: { type: 'text', label: 'Organisation name', default: 'Documenso' },
+    },
+  },
+  'organisation-delete': {
+    name: 'Organisation delete',
+    group: 'Organisations',
+    component: OrganisationDeleteEmailTemplate,
+    fields: {
+      organisationName: { type: 'text', label: 'Organisation name', default: 'Documenso' },
+    },
+  },
+  'organisation-limit-alert': {
+    name: 'Organisation limit alert',
+    group: 'Organisations',
+    component: OrganisationLimitAlertEmailTemplate,
+    fields: {
+      organisationName: { type: 'text', label: 'Organisation name', default: 'Documenso' },
+    },
+  },
+  'organisation-account-link-confirmation': {
+    name: 'Account link confirmation',
+    group: 'Organisations',
+    component: OrganisationAccountLinkConfirmationTemplate,
+    fields: {
+      organisationName: { type: 'text', label: 'Organisation name', default: 'Documenso' },
+    },
+  },
+
+  // ---- Teams ----
+  'confirm-team-email': {
+    name: 'Confirm team email',
+    group: 'Teams',
+    component: ConfirmTeamEmailTemplate,
+    fields: {
+      teamName: { type: 'text', label: 'Team name', default: 'Documenso' },
+    },
+  },
+  'team-delete': {
+    name: 'Team delete',
+    group: 'Teams',
+    component: TeamDeleteEmailTemplate,
+    fields: {},
+  },
+  'team-email-removed': {
+    name: 'Team email removed',
+    group: 'Teams',
+    component: TeamEmailRemovedTemplate,
+    fields: {
+      teamName: { type: 'text', label: 'Team name', default: 'Documenso' },
+      teamEmail: { type: 'text', label: 'Team email', default: 'team@documenso.com' },
+    },
+  },
+
+  // ---- Account ----
+  'confirm-email': {
+    name: 'Confirm email',
+    group: 'Account',
+    component: ConfirmEmailTemplate,
+    fields: {
+      confirmationLink: {
+        type: 'text',
+        label: 'Confirmation link',
+        default: 'https://documenso.com/confirm',
+      },
+    },
+  },
+  'forgot-password': {
+    name: 'Forgot password',
+    group: 'Account',
+    component: ForgotPasswordTemplate,
+    fields: {
+      resetPasswordLink: {
+        type: 'text',
+        label: 'Reset link',
+        default: 'https://documenso.com/reset',
+      },
+    },
+  },
+  'reset-password': {
+    name: 'Reset password',
+    group: 'Account',
+    component: ResetPasswordTemplate,
+    fields: {
+      userName: { type: 'text', label: 'User name', default: 'Lucas Smith' },
+      userEmail: { type: 'text', label: 'User email', default: 'lucas@documenso.com' },
+    },
+  },
+  'access-auth-2fa': {
+    name: 'Access auth 2FA',
+    group: 'Account',
+    component: AccessAuth2FAEmailTemplate,
+    fields: {
+      documentTitle: { type: 'text', label: 'Document title', default: 'Open Source Pledge.pdf' },
+      code: { type: 'text', label: 'Code', default: '123456' },
+      userEmail: { type: 'text', label: 'User email', default: 'lucas@documenso.com' },
+      userName: { type: 'text', label: 'User name', default: 'Lucas Smith' },
+      expiresInMinutes: { type: 'number', label: 'Expires in (min)', default: 10 },
+    },
+  },
+
+  // ---- Admin ----
+  'admin-user-created': {
+    name: 'Admin user created',
+    group: 'Admin',
+    component: AdminUserCreatedTemplate,
+    fields: {
+      resetPasswordLink: {
+        type: 'text',
+        label: 'Reset link',
+        default: 'https://documenso.com/reset',
+      },
+    },
+  },
+};
+
+export type TemplateId = keyof typeof templates;
+
+/** Extract the default prop values from a template's field config. */
+export const getDefaultProps = (fields: Record<string, FieldConfig>): Record<string, unknown> => {
+  const props: Record<string, unknown> = {};
+
+  for (const [key, field] of Object.entries(fields)) {
+    props[key] = field.default;
+  }
+
+  return props;
+};
+
+export const getTemplate = (slug: string): TemplateDefinition | undefined => templates[slug];
diff --git a/packages/email/preview/app/lib/viewports.ts b/packages/email/preview/app/lib/viewports.ts
new file mode 100644
index 000000000..05fcd1f27
--- /dev/null
+++ b/packages/email/preview/app/lib/viewports.ts
@@ -0,0 +1,10 @@
+export type Viewport = {
+  name: string;
+  width: number;
+};
+
+export const viewports: Viewport[] = [
+  { name: 'Mobile', width: 390 },
+  { name: 'Tablet', width: 768 },
+  { name: 'Desktop', width: 1024 },
+];
diff --git a/packages/email/preview/app/root.tsx b/packages/email/preview/app/root.tsx
new file mode 100644
index 000000000..f4f15ca48
--- /dev/null
+++ b/packages/email/preview/app/root.tsx
@@ -0,0 +1,30 @@
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
+
+import type { Route } from './+types/root';
+import stylesheet from './app.css?url';
+
+export const links: Route.LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }];
+
+export const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+};
+
+const App = () => {
+  return <Outlet />;
+};
+
+export default App;
diff --git a/packages/email/preview/app/routes.ts b/packages/email/preview/app/routes.ts
new file mode 100644
index 000000000..82c2193d1
--- /dev/null
+++ b/packages/email/preview/app/routes.ts
@@ -0,0 +1,7 @@
+import { index, type RouteConfig, route } from '@react-router/dev/routes';
+
+export default [
+  index('routes/_index.tsx'),
+  route('api/render', 'routes/api.render.tsx'),
+  route(':slug', 'routes/$slug.tsx'),
+] satisfies RouteConfig;
diff --git a/packages/email/preview/app/routes/$slug.tsx b/packages/email/preview/app/routes/$slug.tsx
new file mode 100644
index 000000000..ecd81f16d
--- /dev/null
+++ b/packages/email/preview/app/routes/$slug.tsx
@@ -0,0 +1,35 @@
+import { data } from 'react-router';
+
+import { EmailPlayground } from '../components/playground';
+import { getDefaultProps, getTemplate } from '../lib/templates';
+import type { Route } from './+types/$slug';
+
+export const loader = ({ params }: Route.LoaderArgs) => {
+  const { slug } = params;
+  const template = getTemplate(slug);
+
+  if (!template) {
+    throw data(`Unknown template: ${slug}`, { status: 404 });
+  }
+
+  return {
+    slug,
+    templateName: template.name,
+    fields: template.fields,
+    defaultProps: getDefaultProps(template.fields),
+  };
+};
+
+export const meta = ({ data: loaderData }: Route.MetaArgs) => {
+  if (!loaderData) {
+    return [{ title: 'Not found — Email Preview' }];
+  }
+
+  return [{ title: `${loaderData.templateName} — Email Preview` }];
+};
+
+const TemplatePage = ({ loaderData }: Route.ComponentProps) => {
+  return <EmailPlayground slug={loaderData.slug} fields={loaderData.fields} defaultProps={loaderData.defaultProps} />;
+};
+
+export default TemplatePage;
diff --git a/packages/email/preview/app/routes/_index.tsx b/packages/email/preview/app/routes/_index.tsx
new file mode 100644
index 000000000..74eeb3a38
--- /dev/null
+++ b/packages/email/preview/app/routes/_index.tsx
@@ -0,0 +1,13 @@
+import { redirect } from 'react-router';
+
+import { templates } from '../lib/templates';
+
+/**
+ * The index has no UI of its own — redirect to the first template so the
+ * preview always opens on something.
+ */
+export const loader = () => {
+  const firstSlug = Object.keys(templates)[0];
+
+  return redirect(`/${firstSlug}`);
+};
diff --git a/packages/email/preview/app/routes/api.render.tsx b/packages/email/preview/app/routes/api.render.tsx
new file mode 100644
index 000000000..867121d38
--- /dev/null
+++ b/packages/email/preview/app/routes/api.render.tsx
@@ -0,0 +1,61 @@
+import { resolveEmailBrandingColors } from '@documenso/lib/utils/email-branding-colors';
+import { renderEmailWithI18N } from '@documenso/lib/utils/render-email-with-i18n';
+
+import { getTemplate } from '../lib/templates';
+import type { Route } from './+types/api.render';
+
+type RenderRequestBody = {
+  slug: string;
+  props: Record<string, unknown>;
+  lang?: string;
+  colors?: Record<string, string> | null;
+  assetBaseUrl: string;
+};
+
+/**
+ * POST /api/render — render an email template to HTML via the REAL production
+ * pipeline (`renderEmailWithI18N`), so i18n and brand-colour injection match a
+ * live send. Returns `text/html` for the client to drop into an iframe srcDoc.
+ */
+export const action = async ({ request }: Route.ActionArgs) => {
+  const body = (await request.json()) as RenderRequestBody;
+
+  const template = getTemplate(body.slug);
+
+  if (!template) {
+    return new Response(JSON.stringify({ error: `Unknown template: ${body.slug}` }), {
+      status: 404,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  // Resolve brand colours through the same resolver production uses, so the
+  // preview applies the same per-token fallbacks as a live send.
+  const brandingColors =
+    body.colors && Object.keys(body.colors).length > 0 ? resolveEmailBrandingColors(body.colors) : null;
+
+  const Component = template.component;
+  const element = <Component {...body.props} assetBaseUrl={body.assetBaseUrl} />;
+
+  const html = await renderEmailWithI18N(element, {
+    lang: body.lang ?? 'en',
+    branding: brandingColors
+      ? {
+          brandingEnabled: true,
+          brandingUrl: '',
+          brandingLogo: '',
+          brandingCompanyDetails: '',
+          brandingHidePoweredBy: false,
+          brandingColors,
+        }
+      : undefined,
+  });
+
+  return new Response(html, {
+    status: 200,
+    headers: {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Cache-Control': 'no-store',
+    },
+  });
+};
diff --git a/packages/email/preview/postcss.config.cjs b/packages/email/preview/postcss.config.cjs
new file mode 100644
index 000000000..56af677c1
--- /dev/null
+++ b/packages/email/preview/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: { config: './tailwind.config.cjs' },
+    autoprefixer: {},
+  },
+};
diff --git a/packages/email/preview/react-router.config.ts b/packages/email/preview/react-router.config.ts
new file mode 100644
index 000000000..b8878e3c5
--- /dev/null
+++ b/packages/email/preview/react-router.config.ts
@@ -0,0 +1,6 @@
+import type { Config } from '@react-router/dev/config';
+
+export default {
+  appDirectory: 'app',
+  ssr: true,
+} satisfies Config;
diff --git a/packages/email/preview/tailwind.config.cjs b/packages/email/preview/tailwind.config.cjs
new file mode 100644
index 000000000..10598d0d2
--- /dev/null
+++ b/packages/email/preview/tailwind.config.cjs
@@ -0,0 +1,24 @@
+const path = require('node:path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [path.join(__dirname, 'app/**/*.{ts,tsx}')],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: [
+          'Inter',
+          'ui-sans-serif',
+          'system-ui',
+          '-apple-system',
+          'Segoe UI',
+          'Roboto',
+          'Helvetica Neue',
+          'Arial',
+          'sans-serif',
+        ],
+      },
+    },
+  },
+  plugins: [],
+};
diff --git a/packages/email/preview/tsconfig.json b/packages/email/preview/tsconfig.json
new file mode 100644
index 000000000..4206c21ec
--- /dev/null
+++ b/packages/email/preview/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "include": ["**/*", ".react-router/types/**/*"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "baseUrl": ".",
+    "paths": {
+      "@documenso/email/*": ["../*"],
+      "@documenso/lib": ["../../lib"],
+      "@documenso/lib/*": ["../../lib/*"],
+      "@documenso/prisma": ["../../prisma"],
+      "@documenso/tailwind-config": ["../../tailwind-config"],
+      "@documenso/ui": ["../../ui"]
+    },
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "moduleDetection": "force",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "useUnknownInCatchVariables": false
+  }
+}
diff --git a/packages/email/preview/vite.config.ts b/packages/email/preview/vite.config.ts
new file mode 100644
index 000000000..cbcd3b596
--- /dev/null
+++ b/packages/email/preview/vite.config.ts
@@ -0,0 +1,72 @@
+import path from 'node:path';
+import { lingui } from '@lingui/vite-plugin';
+import { reactRouter } from '@react-router/dev/vite';
+import autoprefixer from 'autoprefixer';
+import tailwindcss from 'tailwindcss';
+import { defineConfig } from 'vite';
+import macrosPlugin from 'vite-plugin-babel-macros';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+/**
+ * Standalone Vite app for previewing Documenso emails.
+ *
+ * Emails render server-side through the real `renderEmailWithI18N` pipeline
+ * (see `app/routes/preview.tsx`), so the SSR config mirrors the main Remix app:
+ * Prisma, the tailwind config, and native modules stay external.
+ */
+export default defineConfig({
+  root: __dirname,
+  css: {
+    postcss: {
+      plugins: [tailwindcss(path.join(__dirname, 'tailwind.config.cjs')), autoprefixer],
+    },
+  },
+  server: {
+    port: parseInt(process.env.PORT || '3002', 10),
+    strictPort: true,
+  },
+  plugins: [
+    // Serve the email static assets (logo, icons) under `/static` so templates'
+    // `assetBaseUrl="/static"` resolves to the same images production uses.
+    viteStaticCopy({
+      targets: [
+        {
+          src: path.join(__dirname, '../static') + '/*',
+          dest: 'static',
+        },
+      ],
+    }),
+    reactRouter(),
+    macrosPlugin(),
+    lingui(),
+    tsconfigPaths(),
+  ],
+  ssr: {
+    noExternal: ['@documenso/email'],
+    external: [
+      '@napi-rs/canvas',
+      '@node-rs/bcrypt',
+      '@prisma/client',
+      '@documenso/tailwind-config',
+      'playwright',
+      'playwright-core',
+      '@playwright/browser-chromium',
+      'pdfjs-dist',
+      '@google-cloud/kms',
+      '@google-cloud/secret-manager',
+    ],
+  },
+  optimizeDeps: {
+    exclude: [
+      '@napi-rs/canvas',
+      '@node-rs/bcrypt',
+      'sharp',
+      'playwright',
+      'playwright-core',
+      '@playwright/browser-chromium',
+      'lightningcss',
+      'fsevents',
+    ],
+  },
+});
diff --git a/packages/email/providers/branding.tsx b/packages/email/providers/branding.tsx
index a40d7708d..c9c23c17f 100644
--- a/packages/email/providers/branding.tsx
+++ b/packages/email/providers/branding.tsx
@@ -1,3 +1,4 @@
+import type { EmailBrandingColors } from '@documenso/lib/utils/email-branding-colors';
 import { createContext, useContext } from 'react';
 
 type BrandingContextValue = {
@@ -6,6 +7,7 @@ type BrandingContextValue = {
   brandingLogo: string;
   brandingCompanyDetails: string;
   brandingHidePoweredBy: boolean;
+  brandingColors?: EmailBrandingColors;
 };
 
 const BrandingContext = createContext<BrandingContextValue | undefined>(undefined);
diff --git a/packages/email/render.tsx b/packages/email/render.tsx
index 223789a29..3b3ad948b 100644
--- a/packages/email/render.tsx
+++ b/packages/email/render.tsx
@@ -1,4 +1,6 @@
-import config from '@documenso/tailwind-config';
+import { DEFAULT_BRAND_COLORS } from '@documenso/lib/constants/theme';
+import type { EmailBrandingColors } from '@documenso/lib/utils/email-branding-colors';
+import { resolveEmailBrandingColors } from '@documenso/lib/utils/email-branding-colors';
 import type { I18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
 import * as ReactEmail from '@react-email/render';
@@ -11,19 +13,62 @@ export type RenderOptions = ReactEmail.Options & {
   i18n?: I18n;
 };
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-const colors = (config.theme?.extend?.colors || {}) as Record<string, string>;
+/**
+ * The default email token set: the shadcn theme tokens, sourced as hex from
+ * `DEFAULT_BRAND_COLORS` (which mirrors `theme.css`). Emails can't use CSS
+ * variables, so these are concrete hex values baked into the Tailwind config.
+ *
+ * Resolved through the same `resolveEmailBrandingColors` pipeline as tenant
+ * colours so the default values live in exactly one place (`DEFAULT_BRAND_COLORS`)
+ * and the default + tenant paths can't drift. Used when a tenant has no
+ * (entitled) brand colours.
+ */
+const DEFAULT_EMAIL_BRANDING_COLORS: EmailBrandingColors =
+  resolveEmailBrandingColors(DEFAULT_BRAND_COLORS) ?? DEFAULT_BRAND_COLORS;
+
+/**
+ * Map the resolved colour set to flat semantic Tailwind tokens. Templates use
+ * these directly (`bg-primary`, `text-muted-foreground`, `border-border`, …),
+ * mirroring the app's shadcn tokens, instead of bespoke `slate-*`/`documenso-*`
+ * scale classes.
+ *
+ * Always defined: falls back to `DEFAULT_EMAIL_BRANDING_COLORS` when no tenant
+ * colours are supplied, so the tokens resolve whether or not custom branding is
+ * in play.
+ */
+const buildEmailColors = (brandingColors?: EmailBrandingColors): Record<string, string> => {
+  const c = brandingColors ?? DEFAULT_EMAIL_BRANDING_COLORS;
+
+  return {
+    background: c.background,
+    foreground: c.foreground,
+    muted: c.muted,
+    'muted-foreground': c.mutedForeground,
+    primary: c.primary,
+    'primary-foreground': c.primaryForeground,
+    secondary: c.secondary,
+    'secondary-foreground': c.secondaryForeground,
+    accent: c.accent,
+    'accent-foreground': c.accentForeground,
+    destructive: c.destructive,
+    'destructive-foreground': c.destructiveForeground,
+    warning: c.warning,
+    border: c.border,
+  };
+};
 
 export const render = async (element: React.ReactNode, options?: RenderOptions) => {
   const { branding, ...otherOptions } = options ?? {};
 
+  const tailwindColors = buildEmailColors(branding?.brandingColors);
+
   return ReactEmail.render(
     <BrandingProvider branding={branding}>
       <Tailwind
         config={{
           theme: {
             extend: {
-              colors,
+              colors: tailwindColors,
             },
           },
         }}
@@ -42,6 +87,8 @@ export const renderWithI18N = async (element: React.ReactNode, options?: RenderO
     throw new Error('i18n is required');
   }
 
+  const tailwindColors = buildEmailColors(branding?.brandingColors);
+
   return ReactEmail.render(
     <I18nProvider i18n={i18n}>
       <BrandingProvider branding={branding}>
@@ -49,7 +96,7 @@ export const renderWithI18N = async (element: React.ReactNode, options?: RenderO
           config={{
             theme: {
               extend: {
-                colors,
+                colors: tailwindColors,
               },
             },
           }}
diff --git a/packages/email/template-components/template-access-auth-2fa.tsx b/packages/email/template-components/template-access-auth-2fa.tsx
index 40e61143a..7873a1735 100644
--- a/packages/email/template-components/template-access-auth-2fa.tsx
+++ b/packages/email/template-components/template-access-auth-2fa.tsx
@@ -27,24 +27,24 @@ export const TemplateAccessAuth2FA = ({
       <Img src={getAssetUrl('/static/document.png')} alt="Document" className="mx-auto h-12 w-12" />
 
       <Section className="mt-8">
-        <Heading className="text-center font-semibold text-lg text-slate-900">
+        <Heading className="text-center font-semibold text-foreground text-lg">
           <Trans>Verification Code Required</Trans>
         </Heading>
 
-        <Text className="mt-2 text-center text-slate-700">
+        <Text className="mt-2 text-center text-foreground">
           <Trans>
             Hi {userName}, you need to enter a verification code to complete the document "{documentTitle}".
           </Trans>
         </Text>
 
-        <Section className="mt-6 rounded-lg bg-slate-50 p-6 text-center">
-          <Text className="mb-2 font-medium text-slate-600 text-sm">
+        <Section className="mt-6 rounded-lg bg-muted p-6 text-center">
+          <Text className="mb-2 font-medium text-muted-foreground text-sm">
             <Trans>Your verification code:</Trans>
           </Text>
-          <Text className="font-bold text-2xl text-slate-900 tracking-wider">{code}</Text>
+          <Text className="font-bold text-2xl text-foreground tracking-wider">{code}</Text>
         </Section>
 
-        <Text className="mt-4 text-center text-slate-600 text-sm">
+        <Text className="mt-4 text-center text-muted-foreground text-sm">
           <Plural
             value={expiresInMinutes}
             one="This code will expire in # minute."
@@ -52,7 +52,7 @@ export const TemplateAccessAuth2FA = ({
           />
         </Text>
 
-        <Text className="mt-4 text-center text-slate-500 text-sm">
+        <Text className="mt-4 text-center text-muted-foreground text-sm">
           <Trans>If you didn't request this verification code, you can safely ignore this email.</Trans>
         </Text>
       </Section>
diff --git a/packages/email/template-components/template-admin-user-created.tsx b/packages/email/template-components/template-admin-user-created.tsx
index 810d27974..4f0adf100 100644
--- a/packages/email/template-components/template-admin-user-created.tsx
+++ b/packages/email/template-components/template-admin-user-created.tsx
@@ -14,26 +14,26 @@ export const TemplateAdminUserCreated = ({ resetPasswordLink, assetBaseUrl }: Te
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section className="flex-row items-center justify-center">
-        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-foreground text-lg">
           <Trans>Welcome to Documenso!</Trans>
         </Text>
 
-        <Text className="my-1 text-center text-base text-slate-400">
+        <Text className="my-1 text-center text-base text-muted-foreground">
           <Trans>An administrator has created a Documenso account for you.</Trans>
         </Text>
 
-        <Text className="my-1 text-center text-base text-slate-400">
+        <Text className="my-1 text-center text-base text-muted-foreground">
           <Trans>To get started, please set your password by clicking the button below:</Trans>
         </Text>
 
         <Section className="mt-8 mb-6 text-center">
           <Button
-            className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
+            className="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-center font-medium text-primary-foreground text-sm no-underline"
             href={resetPasswordLink}
           >
             <Trans>Set Password</Trans>
           </Button>
-          <Text className="mt-8 text-center text-slate-400 text-sm italic">
+          <Text className="mt-8 text-center text-muted-foreground text-sm italic">
             <Trans>
               You can also copy and paste this link into your browser: {resetPasswordLink} (link expires in 24 hours)
             </Trans>
@@ -41,10 +41,10 @@ export const TemplateAdminUserCreated = ({ resetPasswordLink, assetBaseUrl }: Te
         </Section>
 
         <Section className="mt-8">
-          <Text className="text-center text-slate-400 text-sm">
+          <Text className="text-center text-muted-foreground text-sm">
             <Trans>
               If you didn't expect this account or have any questions, please{' '}
-              <Link href="mailto:support@documenso.com" className="text-documenso-500">
+              <Link href="mailto:support@documenso.com" className="text-primary">
                 contact support
               </Link>
               .
diff --git a/packages/email/template-components/template-confirmation-email.tsx b/packages/email/template-components/template-confirmation-email.tsx
index b3e7e2d29..d0170967f 100644
--- a/packages/email/template-components/template-confirmation-email.tsx
+++ b/packages/email/template-components/template-confirmation-email.tsx
@@ -14,22 +14,22 @@ export const TemplateConfirmationEmail = ({ confirmationLink, assetBaseUrl }: Te
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section className="flex-row items-center justify-center">
-        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-foreground text-lg">
           <Trans>Welcome to Documenso!</Trans>
         </Text>
 
-        <Text className="my-1 text-center text-base text-slate-400">
+        <Text className="my-1 text-center text-base text-muted-foreground">
           <Trans>Before you get started, please confirm your email address by clicking the button below:</Trans>
         </Text>
 
         <Section className="mt-8 mb-6 text-center">
           <Button
-            className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
+            className="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-center font-medium text-primary-foreground text-sm no-underline"
             href={confirmationLink}
           >
             <Trans>Confirm email</Trans>
           </Button>
-          <Text className="mt-8 text-center text-slate-400 text-sm italic">
+          <Text className="mt-8 text-center text-muted-foreground text-sm italic">
             <Trans>
               You can also copy and paste this link into your browser: {confirmationLink} (link expires in 1 hour)
             </Trans>
diff --git a/packages/email/template-components/template-custom-message-body.tsx b/packages/email/template-components/template-custom-message-body.tsx
index 723153550..adcf4dc01 100644
--- a/packages/email/template-components/template-custom-message-body.tsx
+++ b/packages/email/template-components/template-custom-message-body.tsx
@@ -18,7 +18,7 @@ export const TemplateCustomMessageBody = ({ text }: TemplateCustomMessageBodyPro
   const paragraphs = normalized.split('\n\n');
 
   return paragraphs.map((paragraph, i) => (
-    <p key={`p-${i}`} className="whitespace-pre-line break-words font-sans text-base text-slate-400">
+    <p key={`p-${i}`} className="whitespace-pre-line break-words font-sans text-base text-muted-foreground">
       {paragraph.split('\n').map((line, j) => (
         <React.Fragment key={`line-${i}-${j}`}>
           {j > 0 && <br />}
diff --git a/packages/email/template-components/template-document-cancel.tsx b/packages/email/template-components/template-document-cancel.tsx
index bff4a2566..de2a7c73d 100644
--- a/packages/email/template-components/template-document-cancel.tsx
+++ b/packages/email/template-components/template-document-cancel.tsx
@@ -22,18 +22,18 @@ export const TemplateDocumentCancel = ({
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section>
-        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-foreground text-lg">
           <Trans>
             {inviterName} has cancelled the document
             <br />"{documentName}"
           </Trans>
         </Text>
 
-        <Text className="my-1 text-center text-base text-slate-400">
+        <Text className="my-1 text-center text-base text-muted-foreground">
           <Trans>All signatures have been voided.</Trans>
         </Text>
 
-        <Text className="my-1 text-center text-base text-slate-400">
+        <Text className="my-1 text-center text-base text-muted-foreground">
           <Trans>You don't need to sign it anymore.</Trans>
         </Text>
 
diff --git a/packages/email/template-components/template-document-completed.tsx b/packages/email/template-components/template-document-completed.tsx
index cb79358a4..7742c90fa 100644
--- a/packages/email/template-components/template-document-completed.tsx
+++ b/packages/email/template-components/template-document-completed.tsx
@@ -27,24 +27,24 @@ export const TemplateDocumentCompleted = ({
       <Section>
         <Section className="mb-4">
           <Column align="center">
-            <Text className="font-semibold text-[#7AC455] text-base">
+            <Text className="font-semibold text-base text-foreground">
               <Img src={getAssetUrl('/static/completed.png')} className="-mt-0.5 mr-2 inline h-7 w-7 align-middle" />
               <Trans>Completed</Trans>
             </Text>
           </Column>
         </Section>
 
-        <Text className="mb-0 text-center font-semibold text-lg text-primary">
+        <Text className="mb-0 text-center font-semibold text-foreground text-lg">
           {customBody || <Trans>“{documentName}” was signed by all signers</Trans>}
         </Text>
 
-        <Text className="my-1 text-center text-base text-slate-400">
+        <Text className="my-1 text-center text-base text-muted-foreground">
           <Trans>Continue by downloading the document.</Trans>
         </Text>
 
         <Section className="mt-8 mb-6 text-center">
           <Button
-            className="rounded-lg border border-slate-200 border-solid px-4 py-2 text-center font-medium text-black text-sm no-underline"
+            className="rounded-lg border border-border border-solid px-4 py-2 text-center font-medium text-foreground text-sm no-underline"
             href={downloadLink}
           >
             <Img src={getAssetUrl('/static/download.png')} className="mr-2 mb-0.5 inline h-5 w-5 align-middle" />
diff --git a/packages/email/template-components/template-document-invite.tsx b/packages/email/template-components/template-document-invite.tsx
index 9013cac32..0606d6658 100644
--- a/packages/email/template-components/template-document-invite.tsx
+++ b/packages/email/template-components/template-document-invite.tsx
@@ -40,7 +40,7 @@ export const TemplateDocumentInvite = ({
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section>
-        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-foreground text-lg">
           {match({ selfSigner, organisationType, includeSenderDetails, teamName })
             .with({ selfSigner: true }, () => (
               <Trans>
@@ -75,7 +75,7 @@ export const TemplateDocumentInvite = ({
             ))}
         </Text>
 
-        <Text className="my-1 text-center text-base text-slate-400">
+        <Text className="my-1 text-center text-base text-muted-foreground">
           {match(role)
             .with(RecipientRole.SIGNER, () => <Trans>Continue by signing the document.</Trans>)
             .with(RecipientRole.VIEWER, () => <Trans>Continue by viewing the document.</Trans>)
@@ -87,7 +87,7 @@ export const TemplateDocumentInvite = ({
 
         <Section className="mt-8 mb-6 text-center">
           <Button
-            className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sbase no-underline"
+            className="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-center font-medium text-primary-foreground text-sbase no-underline"
             href={signDocumentLink}
           >
             {match(role)
diff --git a/packages/email/template-components/template-document-pending.tsx b/packages/email/template-components/template-document-pending.tsx
index 71dc30e40..5022b8b87 100644
--- a/packages/email/template-components/template-document-pending.tsx
+++ b/packages/email/template-components/template-document-pending.tsx
@@ -20,18 +20,18 @@ export const TemplateDocumentPending = ({ documentName, assetBaseUrl }: Template
       <Section>
         <Section className="mb-4">
           <Column align="center">
-            <Text className="font-semibold text-base text-blue-500">
+            <Text className="font-semibold text-base text-foreground">
               <Img src={getAssetUrl('/static/clock.png')} className="-mt-0.5 mr-2 inline h-7 w-7 align-middle" />
               <Trans>Waiting for others</Trans>
             </Text>
           </Column>
         </Section>
 
-        <Text className="mb-0 text-center font-semibold text-lg text-primary">
+        <Text className="mb-0 text-center font-semibold text-foreground text-lg">
           <Trans>“{documentName}” has been signed</Trans>
         </Text>
 
-        <Text className="mx-auto mt-1 mb-6 max-w-[80%] text-center text-base text-slate-400">
+        <Text className="mx-auto mt-1 mb-6 max-w-[80%] text-center text-base text-muted-foreground">
           <Trans>
             We're still waiting for other signers to sign this document.
             <br />
diff --git a/packages/email/template-components/template-document-recipient-signed.tsx b/packages/email/template-components/template-document-recipient-signed.tsx
index 6ce969234..c35a0f316 100644
--- a/packages/email/template-components/template-document-recipient-signed.tsx
+++ b/packages/email/template-components/template-document-recipient-signed.tsx
@@ -29,20 +29,20 @@ export const TemplateDocumentRecipientSigned = ({
       <Section>
         <Section className="mb-4">
           <Column align="center">
-            <Text className="font-semibold text-[#7AC455] text-base">
+            <Text className="font-semibold text-base text-foreground">
               <Img src={getAssetUrl('/static/completed.png')} className="-mt-0.5 mr-2 inline h-7 w-7 align-middle" />
               <Trans>Completed</Trans>
             </Text>
           </Column>
         </Section>
 
-        <Text className="mb-0 text-center font-semibold text-lg text-primary">
+        <Text className="mb-0 text-center font-semibold text-foreground text-lg">
           <Trans>
             {recipientReference} has signed "{documentName}"
           </Trans>
         </Text>
 
-        <Text className="mx-auto mt-1 mb-6 max-w-[80%] text-center text-base text-slate-400">
+        <Text className="mx-auto mt-1 mb-6 max-w-[80%] text-center text-base text-muted-foreground">
           <Trans>{recipientReference} has completed signing the document.</Trans>
         </Text>
       </Section>
diff --git a/packages/email/template-components/template-document-rejected.tsx b/packages/email/template-components/template-document-rejected.tsx
index 199caaca8..b181d9a02 100644
--- a/packages/email/template-components/template-document-rejected.tsx
+++ b/packages/email/template-components/template-document-rejected.tsx
@@ -17,7 +17,7 @@ export function TemplateDocumentRejected({
 }: TemplateDocumentRejectedProps) {
   return (
     <div className="mt-4">
-      <Heading className="mb-4 text-center font-semibold text-2xl text-slate-800">
+      <Heading className="mb-4 text-center font-semibold text-2xl text-foreground">
         <Trans>Document Rejected</Trans>
       </Heading>
 
@@ -28,7 +28,7 @@ export function TemplateDocumentRejected({
       </Text>
 
       {rejectionReason && (
-        <Text className="mb-4 text-base text-slate-400">
+        <Text className="mb-4 text-base text-muted-foreground">
           <Trans>Reason for rejection: {rejectionReason}</Trans>
         </Text>
       )}
@@ -39,7 +39,7 @@ export function TemplateDocumentRejected({
 
       <Button
         href={documentUrl}
-        className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
+        className="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-center font-medium text-primary-foreground text-sm no-underline"
       >
         <Trans>View Document</Trans>
       </Button>
diff --git a/packages/email/template-components/template-document-rejection-confirmed.tsx b/packages/email/template-components/template-document-rejection-confirmed.tsx
index 24a27c747..0b71f78cb 100644
--- a/packages/email/template-components/template-document-rejection-confirmed.tsx
+++ b/packages/email/template-components/template-document-rejection-confirmed.tsx
@@ -22,7 +22,7 @@ export function TemplateDocumentRejectionConfirmed({
           <Trans>Rejection Confirmed</Trans>
         </Heading>
 
-        <Text className="text-base text-primary">
+        <Text className="text-base text-foreground">
           <Trans>
             This email confirms that you have rejected the document{' '}
             <strong className="font-bold">"{documentName}"</strong> sent by {documentOwnerName}.
@@ -30,7 +30,7 @@ export function TemplateDocumentRejectionConfirmed({
         </Text>
 
         {reason && (
-          <Text className="font-medium text-base text-slate-400">
+          <Text className="font-medium text-base text-muted-foreground">
             <Trans>Rejection reason: {reason}</Trans>
           </Text>
         )}
diff --git a/packages/email/template-components/template-document-reminder.tsx b/packages/email/template-components/template-document-reminder.tsx
index 741101543..92d07e643 100644
--- a/packages/email/template-components/template-document-reminder.tsx
+++ b/packages/email/template-components/template-document-reminder.tsx
@@ -31,18 +31,18 @@ export const TemplateDocumentReminder = ({
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section>
-        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-foreground text-lg">
           <Trans>
             Reminder: Please {_(actionVerb).toLowerCase()} your document
             <br />"{documentName}"
           </Trans>
         </Text>
 
-        <Text className="my-1 text-center text-base text-slate-400">
+        <Text className="my-1 text-center text-base text-muted-foreground">
           <Trans>Hi {recipientName},</Trans>
         </Text>
 
-        <Text className="my-1 text-center text-base text-slate-400">
+        <Text className="my-1 text-center text-base text-muted-foreground">
           {match(role)
             .with(RecipientRole.SIGNER, () => <Trans>Continue by signing the document.</Trans>)
             .with(RecipientRole.VIEWER, () => <Trans>Continue by viewing the document.</Trans>)
@@ -54,7 +54,7 @@ export const TemplateDocumentReminder = ({
 
         <Section className="mt-8 mb-6 text-center">
           <Button
-            className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
+            className="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-center font-medium text-primary-foreground text-sm no-underline"
             href={signDocumentLink}
           >
             {match(role)
diff --git a/packages/email/template-components/template-document-self-signed.tsx b/packages/email/template-components/template-document-self-signed.tsx
index 7b9f50071..4759ea06f 100644
--- a/packages/email/template-components/template-document-self-signed.tsx
+++ b/packages/email/template-components/template-document-self-signed.tsx
@@ -25,25 +25,21 @@ export const TemplateDocumentSelfSigned = ({ documentName, assetBaseUrl }: Templ
       <Section className="flex-row items-center justify-center">
         <Section>
           <Column align="center">
-            <Text className="font-semibold text-[#7AC455] text-base">
+            <Text className="font-semibold text-base text-foreground">
               <Img src={getAssetUrl('/static/completed.png')} className="-mt-0.5 mr-2 inline h-7 w-7 align-middle" />
               <Trans>Completed</Trans>
             </Text>
           </Column>
         </Section>
 
-        <Text className="mt-6 mb-0 text-center font-semibold text-lg text-primary">
+        <Text className="mt-6 mb-0 text-center font-semibold text-foreground text-lg">
           <Trans>You have signed “{documentName}”</Trans>
         </Text>
 
-        <Text className="mx-auto mt-1 mb-6 max-w-[80%] text-center text-base text-slate-400">
+        <Text className="mx-auto mt-1 mb-6 max-w-[80%] text-center text-base text-muted-foreground">
           <Trans>
             Create a{' '}
-            <Link
-              href={signUpUrl}
-              target="_blank"
-              className="whitespace-nowrap text-documenso-700 hover:text-documenso-600"
-            >
+            <Link href={signUpUrl} target="_blank" className="whitespace-nowrap text-primary hover:text-primary">
               free account
             </Link>{' '}
             to access your signed documents at any time.
@@ -53,14 +49,14 @@ export const TemplateDocumentSelfSigned = ({ documentName, assetBaseUrl }: Templ
         <Section className="mt-8 mb-6 text-center">
           <Button
             href={signUpUrl}
-            className="mr-4 rounded-lg border border-slate-200 border-solid px-4 py-2 text-center font-medium text-black text-sm no-underline"
+            className="mr-4 rounded-lg border border-border border-solid px-4 py-2 text-center font-medium text-foreground text-sm no-underline"
           >
             <Img src={getAssetUrl('/static/user-plus.png')} className="mr-2 mb-0.5 inline h-5 w-5 align-middle" />
             <Trans>Create account</Trans>
           </Button>
 
           <Button
-            className="rounded-lg border border-slate-200 border-solid px-4 py-2 text-center font-medium text-black text-sm no-underline"
+            className="rounded-lg border border-border border-solid px-4 py-2 text-center font-medium text-foreground text-sm no-underline"
             href="https://documenso.com/pricing"
           >
             <Img src={getAssetUrl('/static/review.png')} className="mr-2 mb-0.5 inline h-5 w-5 align-middle" />
diff --git a/packages/email/template-components/template-document-super-delete.tsx b/packages/email/template-components/template-document-super-delete.tsx
index 11eb3f853..d5c6b38fa 100644
--- a/packages/email/template-components/template-document-super-delete.tsx
+++ b/packages/email/template-components/template-document-super-delete.tsx
@@ -15,26 +15,26 @@ export const TemplateDocumentDelete = ({ reason, documentName, assetBaseUrl }: T
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section>
-        <Text className="mt-6 mb-0 text-left font-semibold text-lg text-primary">
+        <Text className="mt-6 mb-0 text-left font-semibold text-foreground text-lg">
           <Trans>Your document has been deleted by an admin!</Trans>
         </Text>
 
-        <Text className="mx-auto mt-1 mb-6 text-left text-base text-slate-400">
+        <Text className="mx-auto mt-1 mb-6 text-left text-base text-muted-foreground">
           <Trans>"{documentName}" has been deleted by an admin.</Trans>
         </Text>
 
-        <Text className="mx-auto mt-1 mb-6 text-left text-base text-slate-400">
+        <Text className="mx-auto mt-1 mb-6 text-left text-base text-muted-foreground">
           <Trans>
             This document can not be recovered, if you would like to dispute the reason for future documents please
             contact support.
           </Trans>
         </Text>
 
-        <Text className="mx-auto mt-1 text-left text-base text-slate-400">
+        <Text className="mx-auto mt-1 text-left text-base text-muted-foreground">
           <Trans>The reason provided for deletion is the following:</Trans>
         </Text>
 
-        <Text className="mx-auto mt-1 mb-6 text-left text-base text-slate-400 italic">{reason}</Text>
+        <Text className="mx-auto mt-1 mb-6 text-left text-base text-muted-foreground italic">{reason}</Text>
       </Section>
     </>
   );
diff --git a/packages/email/template-components/template-footer.tsx b/packages/email/template-components/template-footer.tsx
index 5311aaf4c..ed82efb78 100644
--- a/packages/email/template-components/template-footer.tsx
+++ b/packages/email/template-components/template-footer.tsx
@@ -18,10 +18,10 @@ export const TemplateFooter = ({ isDocument = true, reportUrl }: TemplateFooterP
   return (
     <Section>
       {reportUrl && (
-        <Text className="my-4 text-base text-slate-400">
+        <Text className="my-4 text-base text-muted-foreground">
           <Trans>
             Did not expect this email?{' '}
-            <Link className="text-[#7AC455]" href={reportUrl}>
+            <Link className="text-primary" href={reportUrl}>
               Click here to report the sender
             </Link>
             . Never sign a document you don't recognize or weren't expecting.
@@ -30,10 +30,10 @@ export const TemplateFooter = ({ isDocument = true, reportUrl }: TemplateFooterP
       )}
 
       {isDocument && !branding.brandingHidePoweredBy && (
-        <Text className="my-4 text-base text-slate-400">
+        <Text className="my-4 text-base text-muted-foreground">
           <Trans>
             This document was sent using{' '}
-            <Link className="text-[#7AC455]" href="https://documen.so/mail-footer">
+            <Link className="text-primary" href="https://documen.so/mail-footer">
               Documenso
             </Link>
             .
@@ -42,7 +42,7 @@ export const TemplateFooter = ({ isDocument = true, reportUrl }: TemplateFooterP
       )}
 
       {branding.brandingEnabled && branding.brandingCompanyDetails && (
-        <Text className="my-8 text-slate-400 text-sm">
+        <Text className="my-8 text-muted-foreground text-sm">
           {branding.brandingCompanyDetails.split('\n').map((line, idx) => {
             return (
               <Fragment key={idx}>
@@ -55,7 +55,7 @@ export const TemplateFooter = ({ isDocument = true, reportUrl }: TemplateFooterP
       )}
 
       {branding.brandingEnabled && safeBrandingUrl && (
-        <Text className="my-8 text-slate-400 text-sm">
+        <Text className="my-8 text-muted-foreground text-sm">
           <Link href={safeBrandingUrl} target="_blank">
             {safeBrandingUrl}
           </Link>
@@ -63,7 +63,7 @@ export const TemplateFooter = ({ isDocument = true, reportUrl }: TemplateFooterP
       )}
 
       {!branding.brandingEnabled && (
-        <Text className="my-8 text-slate-400 text-sm">
+        <Text className="my-8 text-muted-foreground text-sm">
           Documenso, Inc.
           <br />
           2261 Market Street, #5211, San Francisco, CA 94114, USA
diff --git a/packages/email/template-components/template-forgot-password.tsx b/packages/email/template-components/template-forgot-password.tsx
index 8aaff13c4..950c757d6 100644
--- a/packages/email/template-components/template-forgot-password.tsx
+++ b/packages/email/template-components/template-forgot-password.tsx
@@ -14,17 +14,17 @@ export const TemplateForgotPassword = ({ resetPasswordLink, assetBaseUrl }: Temp
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section className="flex-row items-center justify-center">
-        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-foreground text-lg">
           <Trans>Forgot your password?</Trans>
         </Text>
 
-        <Text className="my-1 text-center text-base text-slate-400">
+        <Text className="my-1 text-center text-base text-muted-foreground">
           <Trans>That's okay, it happens! Click the button below to reset your password.</Trans>
         </Text>
 
         <Section className="mt-8 mb-6 text-center">
           <Button
-            className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
+            className="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-center font-medium text-primary-foreground text-sm no-underline"
             href={resetPasswordLink}
           >
             <Trans>Reset Password</Trans>
diff --git a/packages/email/template-components/template-recipient-expired.tsx b/packages/email/template-components/template-recipient-expired.tsx
index 2a40a1e08..8029071e5 100644
--- a/packages/email/template-components/template-recipient-expired.tsx
+++ b/packages/email/template-components/template-recipient-expired.tsx
@@ -25,13 +25,13 @@ export const TemplateRecipientExpired = ({
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section>
-        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-foreground text-lg">
           <Trans>
             Signing window expired for "{displayName}" on "{documentName}"
           </Trans>
         </Text>
 
-        <Text className="my-1 text-center text-base text-slate-400">
+        <Text className="my-1 text-center text-base text-muted-foreground">
           <Trans>
             The signing window for {displayName} on document "{documentName}" has expired. You can resend the document
             to extend their deadline or cancel the document.
@@ -40,7 +40,7 @@ export const TemplateRecipientExpired = ({
 
         <Section className="my-4 text-center">
           <Button
-            className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-sm text-white no-underline"
+            className="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-center font-medium text-primary-foreground text-sm no-underline"
             href={documentLink}
           >
             <Trans>View Document</Trans>
diff --git a/packages/email/template-components/template-reset-password.tsx b/packages/email/template-components/template-reset-password.tsx
index 9f4a5459c..0de3ba0ea 100644
--- a/packages/email/template-components/template-reset-password.tsx
+++ b/packages/email/template-components/template-reset-password.tsx
@@ -18,17 +18,17 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro
       <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
       <Section className="flex-row items-center justify-center">
-        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
+        <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-foreground text-lg">
           <Trans>Password updated!</Trans>
         </Text>
 
-        <Text className="my-1 text-center text-base text-slate-400">
+        <Text className="my-1 text-center text-base text-muted-foreground">
           <Trans>Your password has been updated.</Trans>
         </Text>
 
         <Section className="mt-8 mb-6 text-center">
           <Button
-            className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
+            className="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-center font-medium text-primary-foreground text-sm no-underline"
             href={`${NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000'}/signin`}
           >
             <Trans>Sign In</Trans>
diff --git a/packages/email/templates/access-auth-2fa.tsx b/packages/email/templates/access-auth-2fa.tsx
index 0de629603..ecff50224 100644
--- a/packages/email/templates/access-auth-2fa.tsx
+++ b/packages/email/templates/access-auth-2fa.tsx
@@ -32,9 +32,9 @@ export const AccessAuth2FAEmailTemplate = ({
       <Head />
       <Preview>{_(previewText)}</Preview>
 
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Body className="mx-auto my-auto bg-background font-sans">
         <Section>
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
diff --git a/packages/email/templates/admin-user-created.tsx b/packages/email/templates/admin-user-created.tsx
index f9caaf799..f82ce4605 100644
--- a/packages/email/templates/admin-user-created.tsx
+++ b/packages/email/templates/admin-user-created.tsx
@@ -22,9 +22,9 @@ export const AdminUserCreatedTemplate = ({
     <Html>
       <Head />
       <Preview>{_(previewText)}</Preview>
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Body className="mx-auto my-auto bg-background font-sans">
         <Section>
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <Img src={getAssetUrl('/static/logo.png')} alt="Documenso Logo" className="mb-4 h-6" />
 
diff --git a/packages/email/templates/bulk-send-complete.tsx b/packages/email/templates/bulk-send-complete.tsx
index cfba28641..8b0bf3b45 100644
--- a/packages/email/templates/bulk-send-complete.tsx
+++ b/packages/email/templates/bulk-send-complete.tsx
@@ -28,9 +28,9 @@ export const BulkSendCompleteEmail = ({
     <Html>
       <Head />
       <Preview>{_(msg`Bulk send operation complete for template "${templateName}"`)}</Preview>
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Body className="mx-auto my-auto bg-background font-sans">
         <Section>
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <Text className="text-sm">
                 <Trans>Hi {userName},</Trans>
@@ -56,7 +56,7 @@ export const BulkSendCompleteEmail = ({
                 </li>
               </ul>
 
-              {failedCount > 0 && (
+              {errors && errors.length > 0 && (
                 <Section className="mt-4">
                   <Text className="font-semibold text-lg">
                     <Trans>The following errors occurred:</Trans>
@@ -64,7 +64,7 @@ export const BulkSendCompleteEmail = ({
 
                   <ul className="my-2 ml-4 list-inside list-disc">
                     {errors.map((error, index) => (
-                      <li key={index} className="mt-1 text-destructive text-slate-400 text-sm">
+                      <li key={index} className="mt-1 text-destructive text-sm">
                         {error}
                       </li>
                     ))}
diff --git a/packages/email/templates/confirm-email.tsx b/packages/email/templates/confirm-email.tsx
index 9ff902959..5024b28b0 100644
--- a/packages/email/templates/confirm-email.tsx
+++ b/packages/email/templates/confirm-email.tsx
@@ -19,9 +19,9 @@ export const ConfirmEmailTemplate = ({
     <Html>
       <Head />
       <Preview>{_(previewText)}</Preview>
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Body className="mx-auto my-auto bg-background font-sans">
         <Section>
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
diff --git a/packages/email/templates/confirm-team-email.tsx b/packages/email/templates/confirm-team-email.tsx
index 355281e13..dfb760d35 100644
--- a/packages/email/templates/confirm-team-email.tsx
+++ b/packages/email/templates/confirm-team-email.tsx
@@ -33,16 +33,16 @@ export const ConfirmTeamEmailTemplate = ({
       <Preview>{_(previewText)}</Preview>
 
       <Body className="mx-auto my-auto font-sans">
-        <Section className="bg-white">
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid px-2 pt-2 backdrop-blur-sm">
+        <Section className="bg-background">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-sm">
             <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
 
             <Section>
               <TemplateImage className="mx-auto" assetBaseUrl={assetBaseUrl} staticAsset="mail-open.png" />
             </Section>
 
-            <Section className="p-2 text-slate-500">
-              <Text className="text-center font-medium text-black text-lg">
+            <Section className="p-2 text-muted-foreground">
+              <Text className="text-center font-medium text-foreground text-lg">
                 <Trans>Verify your team email address</Trans>
               </Text>
 
@@ -53,7 +53,7 @@ export const ConfirmTeamEmailTemplate = ({
                 </Trans>
               </Text>
 
-              <div className="mx-auto mt-6 w-fit rounded-lg bg-gray-50 px-4 py-2 font-medium text-base text-slate-600">
+              <div className="mx-auto mt-6 w-fit rounded-lg bg-muted px-4 py-2 font-medium text-base text-muted-foreground">
                 {formatTeamUrl(teamUrl, baseUrl)}
               </div>
 
@@ -86,7 +86,7 @@ export const ConfirmTeamEmailTemplate = ({
 
               <Section className="mt-8 mb-6 text-center">
                 <Button
-                  className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
+                  className="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-center font-medium text-primary-foreground text-sm no-underline"
                   href={`${baseUrl}/team/verify/email/${token}`}
                 >
                   <Trans>Accept</Trans>
@@ -94,7 +94,7 @@ export const ConfirmTeamEmailTemplate = ({
               </Section>
             </Section>
 
-            <Text className="text-center text-slate-500 text-xs">
+            <Text className="text-center text-muted-foreground text-xs">
               <Trans>Link expires in 1 hour.</Trans>
             </Text>
           </Container>
diff --git a/packages/email/templates/document-cancel.tsx b/packages/email/templates/document-cancel.tsx
index 70a910eee..f2eb84c6e 100644
--- a/packages/email/templates/document-cancel.tsx
+++ b/packages/email/templates/document-cancel.tsx
@@ -25,9 +25,9 @@ export const DocumentCancelTemplate = ({
       <Head />
       <Preview>{_(previewText)}</Preview>
 
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Body className="mx-auto my-auto bg-background font-sans">
         <Section>
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
diff --git a/packages/email/templates/document-completed.tsx b/packages/email/templates/document-completed.tsx
index 1c8d3e563..bc54748aa 100644
--- a/packages/email/templates/document-completed.tsx
+++ b/packages/email/templates/document-completed.tsx
@@ -29,8 +29,8 @@ export const DocumentCompletedEmailTemplate = ({
       <Preview>{_(previewText)}</Preview>
 
       <Body className="mx-auto my-auto font-sans">
-        <Section className="bg-white">
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-2 backdrop-blur-sm">
+        <Section className="bg-background">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
             <Section className="p-2">
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
diff --git a/packages/email/templates/document-created-from-direct-template.tsx b/packages/email/templates/document-created-from-direct-template.tsx
index eb950dc68..4ae9aad98 100644
--- a/packages/email/templates/document-created-from-direct-template.tsx
+++ b/packages/email/templates/document-created-from-direct-template.tsx
@@ -36,27 +36,27 @@ export const DocumentCreatedFromDirectTemplateEmailTemplate = ({
       <Preview>{_(previewText)}</Preview>
 
       <Body className="mx-auto my-auto font-sans">
-        <Section className="bg-white">
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-2 backdrop-blur-sm">
+        <Section className="bg-background">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
             <Section className="p-2">
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
               <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
               <Section>
-                <Text className="mb-0 text-center font-semibold text-lg text-primary">
+                <Text className="mb-0 text-center font-semibold text-foreground text-lg">
                   <Trans>
                     {recipientName} {action} a document by using one of your direct links
                   </Trans>
                 </Text>
 
-                <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 text-slate-600 text-sm">
+                <div className="mx-auto my-2 w-fit rounded-lg bg-muted px-4 py-2 text-muted-foreground text-sm">
                   {documentName}
                 </div>
 
                 <Section className="my-6 text-center">
                   <Button
-                    className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
+                    className="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-center font-medium text-primary-foreground text-sm no-underline"
                     href={documentLink}
                   >
                     <Trans>View document</Trans>
diff --git a/packages/email/templates/document-invite.tsx b/packages/email/templates/document-invite.tsx
index e28a7d63f..5e8d3a6d4 100644
--- a/packages/email/templates/document-invite.tsx
+++ b/packages/email/templates/document-invite.tsx
@@ -58,9 +58,9 @@ export const DocumentInviteEmailTemplate = ({
       <Head />
       <Preview>{_(previewText)}</Preview>
 
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Body className="mx-auto my-auto bg-background font-sans">
         <Section>
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
@@ -85,14 +85,14 @@ export const DocumentInviteEmailTemplate = ({
                 <Text className="my-4 font-semibold text-base">
                   <Trans>
                     {inviterName}{' '}
-                    <Link className="font-normal text-slate-400" href="mailto:{inviterEmail}">
+                    <Link className="font-normal text-muted-foreground" href="mailto:{inviterEmail}">
                       ({inviterEmail})
                     </Link>
                   </Trans>
                 </Text>
               )}
 
-              <Text className="mt-2 text-base text-slate-400">
+              <Text className="mt-2 text-base text-muted-foreground">
                 {customBody ? (
                   <TemplateCustomMessageBody text={customBody} />
                 ) : (
diff --git a/packages/email/templates/document-pending.tsx b/packages/email/templates/document-pending.tsx
index 1c79931f7..a6f91b60a 100644
--- a/packages/email/templates/document-pending.tsx
+++ b/packages/email/templates/document-pending.tsx
@@ -23,8 +23,8 @@ export const DocumentPendingEmailTemplate = ({
       <Preview>{_(previewText)}</Preview>
 
       <Body className="mx-auto my-auto font-sans">
-        <Section className="bg-white">
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+        <Section className="bg-background">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
diff --git a/packages/email/templates/document-recipient-signed.tsx b/packages/email/templates/document-recipient-signed.tsx
index d43dca752..df7fed7b8 100644
--- a/packages/email/templates/document-recipient-signed.tsx
+++ b/packages/email/templates/document-recipient-signed.tsx
@@ -31,8 +31,8 @@ export const DocumentRecipientSignedEmailTemplate = ({
       <Preview>{_(previewText)}</Preview>
 
       <Body className="mx-auto my-auto font-sans">
-        <Section className="bg-white">
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-2 backdrop-blur-sm">
+        <Section className="bg-background">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
             <Section className="p-2">
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
diff --git a/packages/email/templates/document-rejected.tsx b/packages/email/templates/document-rejected.tsx
index 5b81b3132..c17348eba 100644
--- a/packages/email/templates/document-rejected.tsx
+++ b/packages/email/templates/document-rejected.tsx
@@ -30,9 +30,9 @@ export function DocumentRejectedEmail({
       <Head />
       <Preview>{previewText}</Preview>
 
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Body className="mx-auto my-auto bg-background font-sans">
         <Section>
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
diff --git a/packages/email/templates/document-rejection-confirmed.tsx b/packages/email/templates/document-rejection-confirmed.tsx
index 2cd4d3c2b..383417e20 100644
--- a/packages/email/templates/document-rejection-confirmed.tsx
+++ b/packages/email/templates/document-rejection-confirmed.tsx
@@ -30,9 +30,9 @@ export function DocumentRejectionConfirmedEmail({
       <Head />
       <Preview>{previewText}</Preview>
 
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Body className="mx-auto my-auto bg-background font-sans">
         <Section>
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
diff --git a/packages/email/templates/document-reminder.tsx b/packages/email/templates/document-reminder.tsx
index d8e0ddbec..5633b4959 100644
--- a/packages/email/templates/document-reminder.tsx
+++ b/packages/email/templates/document-reminder.tsx
@@ -39,9 +39,9 @@ export const DocumentReminderEmailTemplate = ({
       <Head />
       <Preview>{_(previewText)}</Preview>
 
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Body className="mx-auto my-auto bg-background font-sans">
         <Section>
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
@@ -58,7 +58,7 @@ export const DocumentReminderEmailTemplate = ({
           {customBody && (
             <Container className="mx-auto mt-12 max-w-xl">
               <Section>
-                <Text className="mt-2 text-base text-slate-400">
+                <Text className="mt-2 text-base text-muted-foreground">
                   <TemplateCustomMessageBody text={customBody} />
                 </Text>
               </Section>
diff --git a/packages/email/templates/document-self-signed.tsx b/packages/email/templates/document-self-signed.tsx
index 287b437c7..3d8657f2d 100644
--- a/packages/email/templates/document-self-signed.tsx
+++ b/packages/email/templates/document-self-signed.tsx
@@ -23,8 +23,8 @@ export const DocumentSelfSignedEmailTemplate = ({
       <Preview>{_(previewText)}</Preview>
 
       <Body className="mx-auto my-auto font-sans">
-        <Section className="bg-white">
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-2 backdrop-blur-sm">
+        <Section className="bg-background">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
             <Section className="p-2">
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
diff --git a/packages/email/templates/document-super-delete.tsx b/packages/email/templates/document-super-delete.tsx
index f6dd12f7a..d0098bf7d 100644
--- a/packages/email/templates/document-super-delete.tsx
+++ b/packages/email/templates/document-super-delete.tsx
@@ -25,9 +25,9 @@ export const DocumentSuperDeleteEmailTemplate = ({
       <Head />
       <Preview>{_(previewText)}</Preview>
 
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Body className="mx-auto my-auto bg-background font-sans">
         <Section>
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
diff --git a/packages/email/templates/forgot-password.tsx b/packages/email/templates/forgot-password.tsx
index 0e8443bac..16652b99e 100644
--- a/packages/email/templates/forgot-password.tsx
+++ b/packages/email/templates/forgot-password.tsx
@@ -22,9 +22,9 @@ export const ForgotPasswordTemplate = ({
       <Head />
       <Preview>{_(previewText)}</Preview>
 
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Body className="mx-auto my-auto bg-background font-sans">
         <Section>
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
diff --git a/packages/email/templates/organisation-account-link-confirmation.tsx b/packages/email/templates/organisation-account-link-confirmation.tsx
index 25c8206e6..2c66b86fa 100644
--- a/packages/email/templates/organisation-account-link-confirmation.tsx
+++ b/packages/email/templates/organisation-account-link-confirmation.tsx
@@ -32,16 +32,16 @@ export const OrganisationAccountLinkConfirmationTemplate = ({
       <Head />
       <Preview>{_(previewText)}</Preview>
       <Body className="mx-auto my-auto font-sans">
-        <Section className="bg-white">
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid px-2 pt-2 backdrop-blur-sm">
+        <Section className="bg-background">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-sm">
             <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
 
             <Section>
               <TemplateImage className="mx-auto h-12 w-12" assetBaseUrl={assetBaseUrl} staticAsset="building-2.png" />
             </Section>
 
-            <Section className="p-2 text-slate-500">
-              <Text className="text-center font-medium text-black text-lg">
+            <Section className="p-2 text-muted-foreground">
+              <Text className="text-center font-medium text-foreground text-lg">
                 {type === 'create' ? (
                   <Trans>Account creation request</Trans>
                 ) : (
@@ -94,7 +94,7 @@ export const OrganisationAccountLinkConfirmationTemplate = ({
 
               <Section className="mt-8 mb-6 text-center">
                 <Button
-                  className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
+                  className="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-center font-medium text-primary-foreground text-sm no-underline"
                   href={confirmationLink}
                 >
                   <Trans>Review request</Trans>
@@ -102,7 +102,7 @@ export const OrganisationAccountLinkConfirmationTemplate = ({
               </Section>
             </Section>
 
-            <Text className="text-center text-slate-500 text-xs">
+            <Text className="text-center text-muted-foreground text-xs">
               <Trans>Link expires in 30 minutes.</Trans>
             </Text>
           </Container>
diff --git a/packages/email/templates/organisation-delete.tsx b/packages/email/templates/organisation-delete.tsx
index 290305480..d78a6a211 100644
--- a/packages/email/templates/organisation-delete.tsx
+++ b/packages/email/templates/organisation-delete.tsx
@@ -37,20 +37,20 @@ export const OrganisationDeleteEmailTemplate = ({
       <Preview>{_(previewText)}</Preview>
 
       <Body className="mx-auto my-auto font-sans">
-        <Section className="bg-white text-slate-500">
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-2 backdrop-blur-sm">
+        <Section className="bg-background text-muted-foreground">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
             <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
 
             <Section>
               <TemplateImage className="mx-auto" assetBaseUrl={assetBaseUrl} staticAsset="delete-team.png" />
             </Section>
 
-            <Section className="p-2 text-slate-500">
-              <Text className="text-center font-medium text-black text-lg">{_(title)}</Text>
+            <Section className="p-2 text-muted-foreground">
+              <Text className="text-center font-medium text-foreground text-lg">{_(title)}</Text>
 
               <Text className="my-1 text-center text-base">{_(description)}</Text>
 
-              <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 font-medium text-base text-slate-600">
+              <div className="mx-auto my-2 w-fit rounded-lg bg-muted px-4 py-2 font-medium text-base text-muted-foreground">
                 {organisationName}
               </div>
             </Section>
diff --git a/packages/email/templates/organisation-invite.tsx b/packages/email/templates/organisation-invite.tsx
index 09a1c777f..14322662b 100644
--- a/packages/email/templates/organisation-invite.tsx
+++ b/packages/email/templates/organisation-invite.tsx
@@ -32,16 +32,16 @@ export const OrganisationInviteEmailTemplate = ({
       <Preview>{_(previewText)}</Preview>
 
       <Body className="mx-auto my-auto font-sans">
-        <Section className="bg-white text-slate-500">
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-2 backdrop-blur-sm">
+        <Section className="bg-background text-muted-foreground">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
             <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
 
             <Section>
               <TemplateImage className="mx-auto" assetBaseUrl={assetBaseUrl} staticAsset="add-user.png" />
             </Section>
 
-            <Section className="p-2 text-slate-500">
-              <Text className="text-center font-medium text-black text-lg">
+            <Section className="p-2 text-muted-foreground">
+              <Text className="text-center font-medium text-foreground text-lg">
                 <Trans>Join {organisationName} on Documenso</Trans>
               </Text>
 
@@ -49,25 +49,25 @@ export const OrganisationInviteEmailTemplate = ({
                 <Trans>You have been invited to join the following organisation</Trans>
               </Text>
 
-              <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 font-medium text-base text-slate-600">
+              <div className="mx-auto my-2 w-fit rounded-lg bg-muted px-4 py-2 font-medium text-base text-muted-foreground">
                 {organisationName}
               </div>
 
               <Text className="my-1 text-center text-base">
                 <Trans>
-                  by <span className="text-slate-900">{senderName}</span>
+                  by <span className="text-foreground">{senderName}</span>
                 </Trans>
               </Text>
 
               <Section className="mt-6 mb-6 text-center">
                 <Button
-                  className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center font-medium text-black text-sm no-underline"
+                  className="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-center font-medium text-primary-foreground text-sm no-underline"
                   href={`${baseUrl}/organisation/invite/${token}`}
                 >
                   <Trans>Accept</Trans>
                 </Button>
                 <Button
-                  className="ml-4 inline-flex items-center justify-center rounded-lg bg-gray-50 px-6 py-3 text-center font-medium text-slate-600 text-sm no-underline"
+                  className="ml-4 inline-flex items-center justify-center rounded-lg bg-muted px-6 py-3 text-center font-medium text-muted-foreground text-sm no-underline"
                   href={`${baseUrl}/organisation/decline/${token}`}
                 >
                   <Trans>Decline</Trans>
diff --git a/packages/email/templates/organisation-join.tsx b/packages/email/templates/organisation-join.tsx
index 24e3efa66..6356aa090 100644
--- a/packages/email/templates/organisation-join.tsx
+++ b/packages/email/templates/organisation-join.tsx
@@ -34,20 +34,20 @@ export const OrganisationJoinEmailTemplate = ({
       <Preview>{_(previewText)}</Preview>
 
       <Body className="mx-auto my-auto font-sans">
-        <Section className="bg-white text-slate-500">
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-2 backdrop-blur-sm">
+        <Section className="bg-background text-muted-foreground">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
             <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
 
             <Section>
               <TemplateImage className="mx-auto" assetBaseUrl={assetBaseUrl} staticAsset="add-user.png" />
             </Section>
 
-            <Section className="p-2 text-slate-500">
-              <Text className="text-center font-medium text-black text-lg">
+            <Section className="p-2 text-muted-foreground">
+              <Text className="text-center font-medium text-foreground text-lg">
                 <Trans>A new member has joined your organisation {organisationName}</Trans>
               </Text>
 
-              <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 font-medium text-base text-slate-600">
+              <div className="mx-auto my-2 w-fit rounded-lg bg-muted px-4 py-2 font-medium text-base text-muted-foreground">
                 {memberName || memberEmail}
               </div>
             </Section>
diff --git a/packages/email/templates/organisation-leave.tsx b/packages/email/templates/organisation-leave.tsx
index 19870c354..f2d1b6313 100644
--- a/packages/email/templates/organisation-leave.tsx
+++ b/packages/email/templates/organisation-leave.tsx
@@ -34,20 +34,20 @@ export const OrganisationLeaveEmailTemplate = ({
       <Preview>{_(previewText)}</Preview>
 
       <Body className="mx-auto my-auto font-sans">
-        <Section className="bg-white text-slate-500">
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-2 backdrop-blur-sm">
+        <Section className="bg-background text-muted-foreground">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
             <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
 
             <Section>
               <TemplateImage className="mx-auto" assetBaseUrl={assetBaseUrl} staticAsset="delete-user.png" />
             </Section>
 
-            <Section className="p-2 text-slate-500">
-              <Text className="text-center font-medium text-black text-lg">
+            <Section className="p-2 text-muted-foreground">
+              <Text className="text-center font-medium text-foreground text-lg">
                 <Trans>A member has left your organisation {organisationName}</Trans>
               </Text>
 
-              <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 font-medium text-base text-slate-600">
+              <div className="mx-auto my-2 w-fit rounded-lg bg-muted px-4 py-2 font-medium text-base text-muted-foreground">
                 {memberName || memberEmail}
               </div>
             </Section>
diff --git a/packages/email/templates/organisation-limit-alert.tsx b/packages/email/templates/organisation-limit-alert.tsx
index 087155b45..536710d29 100644
--- a/packages/email/templates/organisation-limit-alert.tsx
+++ b/packages/email/templates/organisation-limit-alert.tsx
@@ -32,12 +32,12 @@ export const OrganisationLimitAlertEmailTemplate = ({
       <Preview>{_(previewText)}</Preview>
 
       <Body className="mx-auto my-auto font-sans">
-        <Section className="bg-white text-slate-500">
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-2 backdrop-blur-sm">
+        <Section className="bg-background text-muted-foreground">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
             <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
 
-            <Section className="p-2 text-slate-500">
-              <Text className="text-center font-medium text-black text-lg">
+            <Section className="p-2 text-muted-foreground">
+              <Text className="text-center font-medium text-foreground text-lg">
                 {kind === 'quotaNearing' ? (
                   <Trans>Approaching Your Plan Limits</Trans>
                 ) : (
@@ -45,7 +45,7 @@ export const OrganisationLimitAlertEmailTemplate = ({
                 )}
               </Text>
 
-              <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 font-medium text-base text-slate-600">
+              <div className="mx-auto my-2 w-fit rounded-lg bg-muted px-4 py-2 font-medium text-base text-muted-foreground">
                 {organisationName}
               </div>
 
diff --git a/packages/email/templates/recipient-expired.tsx b/packages/email/templates/recipient-expired.tsx
index e07d01279..0592089cc 100644
--- a/packages/email/templates/recipient-expired.tsx
+++ b/packages/email/templates/recipient-expired.tsx
@@ -25,9 +25,9 @@ export const RecipientExpiredTemplate = ({
       <Head />
       <Preview>{_(previewText)}</Preview>
 
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Body className="mx-auto my-auto bg-background font-sans">
         <Section>
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
diff --git a/packages/email/templates/recipient-removed-from-document.tsx b/packages/email/templates/recipient-removed-from-document.tsx
index 436587859..a495edbb8 100644
--- a/packages/email/templates/recipient-removed-from-document.tsx
+++ b/packages/email/templates/recipient-removed-from-document.tsx
@@ -24,16 +24,16 @@ export const RecipientRemovedFromDocumentTemplate = ({
       <Head />
       <Preview>{_(previewText)}</Preview>
 
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Body className="mx-auto my-auto bg-background font-sans">
         <Section>
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
               <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
 
               <Section>
-                <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-lg text-primary">
+                <Text className="mx-auto mb-0 max-w-[80%] text-center font-semibold text-foreground text-lg">
                   <Trans>
                     {inviterName} has removed you from the document
                     <br />"{documentName}"
diff --git a/packages/email/templates/reset-password.tsx b/packages/email/templates/reset-password.tsx
index 314ac2e46..3c4a67c8f 100644
--- a/packages/email/templates/reset-password.tsx
+++ b/packages/email/templates/reset-password.tsx
@@ -24,9 +24,9 @@ export const ResetPasswordTemplate = ({
       <Head />
       <Preview>{_(previewText)}</Preview>
 
-      <Body className="mx-auto my-auto bg-white font-sans">
+      <Body className="mx-auto my-auto bg-background font-sans">
         <Section>
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-4 backdrop-blur-sm">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
             <Section>
               <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
 
@@ -39,19 +39,19 @@ export const ResetPasswordTemplate = ({
               <Text className="my-4 font-semibold text-base">
                 <Trans>
                   Hi, {userName}{' '}
-                  <Link className="font-normal text-slate-400" href={`mailto:${userEmail}`}>
+                  <Link className="font-normal text-muted-foreground" href={`mailto:${userEmail}`}>
                     ({userEmail})
                   </Link>
                 </Trans>
               </Text>
 
-              <Text className="mt-2 text-base text-slate-400">
+              <Text className="mt-2 text-base text-muted-foreground">
                 <Trans>We've changed your password as you asked. You can now sign in with your new password.</Trans>
               </Text>
-              <Text className="mt-2 text-base text-slate-400">
+              <Text className="mt-2 text-base text-muted-foreground">
                 <Trans>
                   Didn't request a password change? We are here to help you secure your account, just{' '}
-                  <Link className="font-normal text-documenso-700" href="mailto:hi@documenso.com">
+                  <Link className="font-normal text-primary" href="mailto:hi@documenso.com">
                     contact us
                   </Link>
                   .
diff --git a/packages/email/templates/team-delete.tsx b/packages/email/templates/team-delete.tsx
index 95f1f41f1..336b46d62 100644
--- a/packages/email/templates/team-delete.tsx
+++ b/packages/email/templates/team-delete.tsx
@@ -32,20 +32,20 @@ export const TeamDeleteEmailTemplate = ({
       <Preview>{_(previewText)}</Preview>
 
       <Body className="mx-auto my-auto font-sans">
-        <Section className="bg-white text-slate-500">
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid p-2 backdrop-blur-sm">
+        <Section className="bg-background text-muted-foreground">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
             <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
 
             <Section>
               <TemplateImage className="mx-auto" assetBaseUrl={assetBaseUrl} staticAsset="delete-team.png" />
             </Section>
 
-            <Section className="p-2 text-slate-500">
-              <Text className="text-center font-medium text-black text-lg">{_(title)}</Text>
+            <Section className="p-2 text-muted-foreground">
+              <Text className="text-center font-medium text-foreground text-lg">{_(title)}</Text>
 
               <Text className="my-1 text-center text-base">{_(description)}</Text>
 
-              <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 font-medium text-base text-slate-600">
+              <div className="mx-auto my-2 w-fit rounded-lg bg-muted px-4 py-2 font-medium text-base text-muted-foreground">
                 {formatTeamUrl(teamUrl, baseUrl)}
               </div>
             </Section>
diff --git a/packages/email/templates/team-email-removed.tsx b/packages/email/templates/team-email-removed.tsx
index dc76b20b9..0da2b3554 100644
--- a/packages/email/templates/team-email-removed.tsx
+++ b/packages/email/templates/team-email-removed.tsx
@@ -33,16 +33,16 @@ export const TeamEmailRemovedTemplate = ({
       <Preview>{_(previewText)}</Preview>
 
       <Body className="mx-auto my-auto font-sans">
-        <Section className="bg-white text-slate-500">
-          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-slate-200 border-solid px-2 pt-2 backdrop-blur-sm">
+        <Section className="bg-background text-muted-foreground">
+          <Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-sm">
             <TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
 
             <Section>
               <TemplateImage className="mx-auto" assetBaseUrl={assetBaseUrl} staticAsset="mail-open-alert.png" />
             </Section>
 
-            <Section className="p-2 text-slate-500">
-              <Text className="text-center font-medium text-black text-lg">
+            <Section className="p-2 text-muted-foreground">
+              <Text className="text-center font-medium text-foreground text-lg">
                 <Trans>Team email removed</Trans>
               </Text>
 
@@ -52,7 +52,7 @@ export const TeamEmailRemovedTemplate = ({
                 </Trans>
               </Text>
 
-              <div className="mx-auto mt-2 mb-6 w-fit rounded-lg bg-gray-50 px-4 py-2 font-medium text-base text-slate-600">
+              <div className="mx-auto mt-2 mb-6 w-fit rounded-lg bg-muted px-4 py-2 font-medium text-base text-muted-foreground">
                 {formatTeamUrl(teamUrl, baseUrl)}
               </div>
             </Section>
diff --git a/packages/email/tsconfig.json b/packages/email/tsconfig.json
index a33c11bb7..48be20dea 100644
--- a/packages/email/tsconfig.json
+++ b/packages/email/tsconfig.json
@@ -4,5 +4,5 @@
     "types": ["@documenso/tsconfig/process-env.d.ts"]
   },
   "include": ["**/*.ts", "**/*.tsx", "**/*.d.ts", "**/*.json"],
-  "exclude": ["dist", "build", "node_modules"]
+  "exclude": ["dist", "build", "node_modules", "preview"]
 }
diff --git a/packages/lib/server-only/email/get-email-context.ts b/packages/lib/server-only/email/get-email-context.ts
index 348ab9baa..c9242834c 100644
--- a/packages/lib/server-only/email/get-email-context.ts
+++ b/packages/lib/server-only/email/get-email-context.ts
@@ -12,6 +12,7 @@ import { EmailDomainStatus, type OrganisationClaim, type OrganisationGlobalSetti
 import type { Transporter } from 'nodemailer';
 import { match, P } from 'ts-pattern';
 
+import { IS_BILLING_ENABLED } from '../../constants/app';
 import { DOCUMENSO_INTERNAL_EMAIL } from '../../constants/email';
 import { AppError, AppErrorCode } from '../../errors/app-error';
 import { logger } from '../../utils/logger';
@@ -108,7 +109,6 @@ export const getEmailContext = async (options: GetEmailContextOptions): Promise<
   // "no transport". Surface it (alertable) before silently falling back to the
   // system mailer + Documenso sender, so the degraded organisation is findable.
   if (emailContext.claims.emailTransportId && !transportResolution) {
-    // Todo: Logging
     logger.error({
       msg: 'Configured email transport could not be resolved; falling back to the system mailer',
       emailTransportId: emailContext.claims.emailTransportId,
@@ -217,13 +217,21 @@ const handleOrganisationEmailContext = async (organisationId: string) => {
 
   const allowedEmails = getAllowedEmails(organisation);
 
+  const branding = organisationGlobalSettingsToBranding(
+    organisation.organisationGlobalSettings,
+    organisation.id,
+    claims.flags.hidePoweredBy ?? false,
+  );
+
+  const allowBrandedEmailColors = !IS_BILLING_ENABLED() || claims.flags.embedSigningWhiteLabel === true;
+
+  if (!allowBrandedEmailColors) {
+    branding.brandingColors = undefined;
+  }
+
   return {
     allowedEmails,
-    branding: organisationGlobalSettingsToBranding(
-      organisation.organisationGlobalSettings,
-      organisation.id,
-      claims.flags.hidePoweredBy ?? false,
-    ),
+    branding,
     settings: organisation.organisationGlobalSettings,
     claims,
     emailsDisabled: organisation.owner.disabled || claims.flags.disableEmails === true,
@@ -273,9 +281,17 @@ const handleTeamEmailContext = async (teamId: number) => {
 
   const teamSettings = extractDerivedTeamSettings(organisation.organisationGlobalSettings, team.teamGlobalSettings);
 
+  const branding = teamGlobalSettingsToBranding(teamSettings, teamId, claims.flags.hidePoweredBy ?? false);
+
+  const allowBrandedEmailColors = !IS_BILLING_ENABLED() || claims.flags.embedSigningWhiteLabel === true;
+
+  if (!allowBrandedEmailColors) {
+    branding.brandingColors = undefined;
+  }
+
   return {
     allowedEmails,
-    branding: teamGlobalSettingsToBranding(teamSettings, teamId, claims.flags.hidePoweredBy ?? false),
+    branding,
     settings: teamSettings,
     claims,
     emailsDisabled: organisation.owner.disabled || claims.flags.disableEmails === true,
diff --git a/packages/lib/utils/email-branding-colors.ts b/packages/lib/utils/email-branding-colors.ts
new file mode 100644
index 000000000..c9c8c91c8
--- /dev/null
+++ b/packages/lib/utils/email-branding-colors.ts
@@ -0,0 +1,105 @@
+import { colord } from 'colord';
+
+import { DEFAULT_BRAND_COLORS } from '../constants/theme';
+import type { TCssVarsSchema } from '../types/css-vars';
+
+/**
+ * The `brandingColors` tokens that emails actually render — the canonical
+ * subset of `TCssVarsSchema`. `TCssVarsSchema` is the single source of truth
+ * for token names; this tuple just selects the ones email templates use, and
+ * both the `EmailBrandingColors` type and the resolver below derive from it.
+ */
+export const EMAIL_BRANDING_COLOR_KEYS = [
+  'background',
+  'foreground',
+  'muted',
+  'mutedForeground',
+  'primary',
+  'primaryForeground',
+  'secondary',
+  'secondaryForeground',
+  'accent',
+  'accentForeground',
+  'destructive',
+  'destructiveForeground',
+  'warning',
+  'border',
+] as const satisfies readonly (keyof TCssVarsSchema)[];
+
+export type EmailBrandingColorKey = (typeof EMAIL_BRANDING_COLOR_KEYS)[number];
+
+/**
+ * Resolved, email-ready brand colour set.
+ *
+ * Emails cannot use CSS variables, so every value here is a concrete hex
+ * string. This is the shape carried through the email branding context and
+ * injected into the per-render Tailwind config.
+ *
+ * Derived from `TCssVarsSchema` (the persisted shape) by narrowing to the
+ * email token subset and making every field required: the resolver fills every
+ * token (tenant value or Documenso default), so consumers never see `undefined`.
+ *
+ * Produced by `resolveEmailBrandingColors`, or `null` when the tenant has no
+ * usable/safe colour set (callers fall back to the default Documenso palette).
+ */
+export type EmailBrandingColors = Required<Pick<TCssVarsSchema, EmailBrandingColorKey>>;
+
+/**
+ * Normalise an arbitrary stored colour value (hex or any colord-parseable
+ * string) to a hex string. Returns `null` for missing/invalid input.
+ *
+ * `brandingColors` is validated loosely (`z.string()`) so values are not
+ * guaranteed to be valid colours — parse defensively.
+ */
+export const normalizeColorToHex = (value: string | null | undefined): string | null => {
+  if (!value) {
+    return null;
+  }
+
+  const parsed = colord(value);
+
+  if (!parsed.isValid()) {
+    return null;
+  }
+
+  return parsed.toHex();
+};
+
+/**
+ * Resolve a tenant's stored `brandingColors` into an email-ready colour set.
+ *
+ * Each token is taken from the tenant value when it parses to a valid colour,
+ * otherwise the Documenso default. We do NOT enforce contrast or readability —
+ * if a tenant picks a low-contrast combination that is their choice; the
+ * preview UI can hint at it, but the renderer just applies what was set.
+ *
+ * Returns `null` (⇒ caller uses the default Documenso palette) only when there
+ * is no `brandingColors` object at all.
+ */
+export const resolveEmailBrandingColors = (
+  brandingColors: TCssVarsSchema | null | undefined,
+): EmailBrandingColors | null => {
+  if (!brandingColors) {
+    return null;
+  }
+
+  const resolve = (value: string | null | undefined, fallback: string): string =>
+    normalizeColorToHex(value) ?? fallback;
+
+  return {
+    background: resolve(brandingColors.background, DEFAULT_BRAND_COLORS.background),
+    foreground: resolve(brandingColors.foreground, DEFAULT_BRAND_COLORS.foreground),
+    muted: resolve(brandingColors.muted, DEFAULT_BRAND_COLORS.muted),
+    mutedForeground: resolve(brandingColors.mutedForeground, DEFAULT_BRAND_COLORS.mutedForeground),
+    primary: resolve(brandingColors.primary, DEFAULT_BRAND_COLORS.primary),
+    primaryForeground: resolve(brandingColors.primaryForeground, DEFAULT_BRAND_COLORS.primaryForeground),
+    secondary: resolve(brandingColors.secondary, DEFAULT_BRAND_COLORS.secondary),
+    secondaryForeground: resolve(brandingColors.secondaryForeground, DEFAULT_BRAND_COLORS.secondaryForeground),
+    accent: resolve(brandingColors.accent, DEFAULT_BRAND_COLORS.accent),
+    accentForeground: resolve(brandingColors.accentForeground, DEFAULT_BRAND_COLORS.accentForeground),
+    destructive: resolve(brandingColors.destructive, DEFAULT_BRAND_COLORS.destructive),
+    destructiveForeground: resolve(brandingColors.destructiveForeground, DEFAULT_BRAND_COLORS.destructiveForeground),
+    warning: resolve(brandingColors.warning, DEFAULT_BRAND_COLORS.warning),
+    border: resolve(brandingColors.border, DEFAULT_BRAND_COLORS.border),
+  };
+};
diff --git a/packages/lib/utils/team-global-settings-to-branding.ts b/packages/lib/utils/team-global-settings-to-branding.ts
index e6ba853bf..71570a4f4 100644
--- a/packages/lib/utils/team-global-settings-to-branding.ts
+++ b/packages/lib/utils/team-global-settings-to-branding.ts
@@ -1,12 +1,17 @@
 import type { OrganisationGlobalSettings } from '@prisma/client';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '../constants/app';
+import { ZCssVarsSchema } from '../types/css-vars';
+import { resolveEmailBrandingColors } from './email-branding-colors';
 
 export const teamGlobalSettingsToBranding = (
   settings: Omit<OrganisationGlobalSettings, 'id'>,
   teamId: number,
   hidePoweredBy: boolean,
 ) => {
+  const parsedColors = settings.brandingColors ? ZCssVarsSchema.safeParse(settings.brandingColors) : null;
+  const resolvedBrandingColors = resolveEmailBrandingColors(parsedColors?.success ? parsedColors.data : null);
+
   return {
     ...settings,
     brandingLogo:
@@ -14,6 +19,7 @@ export const teamGlobalSettingsToBranding = (
         ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/team/${teamId}`
         : '',
     brandingHidePoweredBy: hidePoweredBy,
+    brandingColors: resolvedBrandingColors ?? undefined,
   };
 };
 
@@ -22,6 +28,9 @@ export const organisationGlobalSettingsToBranding = (
   organisationId: string,
   hidePoweredBy: boolean,
 ) => {
+  const parsedColors = settings.brandingColors ? ZCssVarsSchema.safeParse(settings.brandingColors) : null;
+  const resolvedBrandingColors = resolveEmailBrandingColors(parsedColors?.success ? parsedColors.data : null);
+
   return {
     ...settings,
     brandingLogo:
@@ -29,5 +38,6 @@ export const organisationGlobalSettingsToBranding = (
         ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/organisation/${organisationId}`
         : '',
     brandingHidePoweredBy: hidePoweredBy,
+    brandingColors: resolvedBrandingColors ?? undefined,
   };
 };