diff --git a/backend/app/email-templates/new_account.html b/backend/app/email-templates/new_account.html
index 1368a12874..bbff20e786 100644
--- a/backend/app/email-templates/new_account.html
+++ b/backend/app/email-templates/new_account.html
@@ -1 +1 @@
-{{ project_name }} - New account Your {{ project_name }} account is ready
Welcome to {{ project_name }}! Hi,
Your account has been successfully created and is ready to use. These are your credentials:
Username {{ username }}
Password {{ password }}
Get started by signing in to your dashboard:
Go to Dashboard Or copy and paste this link into your browser:{{ link }}
For security reasons, change your password after your first sign in.
© 2026 {{ project_name }}. All rights reserved.
\ No newline at end of file
+{{ project_name }} - New account Your {{ project_name }} account is ready
Welcome to {{ project_name }}! Hi,
Your account has been successfully created and is ready to use. These are your credentials:
Username {{ username }}
Password {{ password }}
Get started by signing in to your dashboard:
Go to Dashboard Or copy and paste this link into your browser:{{ link }}
For security reasons, change your password after your first sign in.
© 2026 {{ project_name }}. All rights reserved.
\ No newline at end of file
diff --git a/backend/app/email-templates/reset_password.html b/backend/app/email-templates/reset_password.html
index 5b4d76bca0..134ddd3483 100644
--- a/backend/app/email-templates/reset_password.html
+++ b/backend/app/email-templates/reset_password.html
@@ -1 +1 @@
-{{ project_name }} - Password recovery Reset your {{ project_name }} password
Reset your password Hi {{ username }},
We've received a request to reset the password for your {{ project_name }} account. Choose a new one by clicking the button below:
Reset password Or copy and paste this link into your browser:{{ link }}
This link will expire in {{ valid_hours }} hours.
If you didn't request a password recovery, you can safely ignore this email.
© 2026 {{ project_name }}. All rights reserved.
\ No newline at end of file
+{{ project_name }} - Password recovery Reset your {{ project_name }} password
Reset your password Hi {{ username }},
We've received a request to reset the password for your {{ project_name }} account. Choose a new one by clicking the button below:
Reset password Or copy and paste this link into your browser:{{ link }}
This link will expire in {{ valid_hours }} hours.
If you didn't request a password recovery, you can safely ignore this email.
© 2026 {{ project_name }}. All rights reserved.
\ No newline at end of file
diff --git a/backend/app/email-templates/test_email.html b/backend/app/email-templates/test_email.html
index d0fe62fec7..b2792c2249 100644
--- a/backend/app/email-templates/test_email.html
+++ b/backend/app/email-templates/test_email.html
@@ -1 +1 @@
-{{ project_name }} - Test email {{ project_name }} email delivery is working
Test email Hi,
This is a test email from {{ project_name }}. If you're reading it, email delivery is configured correctly.
If you weren't expecting this email, you can safely ignore it.
© 2026 {{ project_name }}. All rights reserved.
\ No newline at end of file
+{{ project_name }} - Test email {{ project_name }} email delivery is working
Test email Hi,
This is a test email from {{ project_name }}. If you're reading it, email delivery is configured correctly.
If you weren't expecting this email, you can safely ignore it.
© 2026 {{ project_name }}. All rights reserved.
\ No newline at end of file
diff --git a/packages/react-email/emails/new_account.tsx b/packages/react-email/emails/new_account.tsx
index aae6f24046..127d395e13 100644
--- a/packages/react-email/emails/new_account.tsx
+++ b/packages/react-email/emails/new_account.tsx
@@ -25,8 +25,8 @@ export default function NewAccount({
project_name={project_name}
>
Welcome to {project_name}!
- Hi,
-
+ Hi,
+
Your account has been successfully created and is ready to use. These
are your credentials:
@@ -34,18 +34,32 @@ export default function NewAccount({
+
Get started by signing in to your dashboard:
Go to Dashboard
-
+
Or copy and paste this link into your browser:
-
+
For security reasons, change your password after your first sign in.
)
}
+
+const bodyTextStyle = {
+ color: "#334155",
+ fontSize: "15px",
+ lineHeight: "26px",
+ margin: "0 0 18px",
+}
+
+const supportingTextStyle = {
+ color: "#64748b",
+ fontSize: "14px",
+ lineHeight: "23px",
+ margin: "0 0 16px",
+}
diff --git a/packages/react-email/emails/reset_password.tsx b/packages/react-email/emails/reset_password.tsx
index 2dba207c5a..184901e068 100644
--- a/packages/react-email/emails/reset_password.tsx
+++ b/packages/react-email/emails/reset_password.tsx
@@ -24,24 +24,38 @@ export default function ResetPassword({
project_name={project_name}
>
Reset your password
- Hi {username},
-
+ Hi {username},
+
We've received a request to reset the password for your {project_name}{" "}
account. Choose a new one by clicking the button below:
Reset password
-
+
Or copy and paste this link into your browser:
-
+
This link will expire in {valid_hours} hours.
-
+
If you didn't request a password recovery, you can safely ignore this
email.
)
}
+
+const bodyTextStyle = {
+ color: "#334155",
+ fontSize: "15px",
+ lineHeight: "26px",
+ margin: "0 0 18px",
+}
+
+const supportingTextStyle = {
+ color: "#64748b",
+ fontSize: "14px",
+ lineHeight: "23px",
+ margin: "0 0 16px",
+}
diff --git a/packages/react-email/emails/test_email.tsx b/packages/react-email/emails/test_email.tsx
index b39142870b..3c4403d9fb 100644
--- a/packages/react-email/emails/test_email.tsx
+++ b/packages/react-email/emails/test_email.tsx
@@ -19,17 +19,31 @@ export default function TestEmail({
project_name={project_name}
>
Test email
- Hi,
-
+ Hi,
+
This is a test email from {project_name}. If you're reading it, email
delivery is configured correctly.
-
+
If you weren't expecting this email, you can safely ignore it.
)
}
+
+const bodyTextStyle = {
+ color: "#334155",
+ fontSize: "15px",
+ lineHeight: "26px",
+ margin: "0 0 18px",
+}
+
+const supportingTextStyle = {
+ color: "#64748b",
+ fontSize: "14px",
+ lineHeight: "23px",
+ margin: "0 0 16px",
+}
diff --git a/packages/react-email/ui/Button.tsx b/packages/react-email/ui/Button.tsx
index fff4a68db0..0f55a5bc60 100644
--- a/packages/react-email/ui/Button.tsx
+++ b/packages/react-email/ui/Button.tsx
@@ -3,10 +3,21 @@ import { Button } from "@react-email/components"
type ButtonProps = React.PropsWithChildren & { href: string }
export const LinkButton = ({ children, href }: ButtonProps) => (
-
+
{children}
)
+
+const buttonStyle = {
+ backgroundColor: "#00796b",
+ borderRadius: "6px",
+ color: "#ffffff",
+ display: "inline-block",
+ fontSize: "14px",
+ fontWeight: "700",
+ lineHeight: "20px",
+ margin: "8px 0 28px",
+ padding: "13px 28px",
+ textAlign: "center" as const,
+ textDecoration: "none",
+}
diff --git a/packages/react-email/ui/Callout.tsx b/packages/react-email/ui/Callout.tsx
index 60a96d7dce..8dd03d82a8 100644
--- a/packages/react-email/ui/Callout.tsx
+++ b/packages/react-email/ui/Callout.tsx
@@ -3,20 +3,44 @@ import { Section, Text } from "@react-email/components"
type CalloutProps = React.PropsWithChildren
export const Callout = ({ children }: CalloutProps) => (
-
+
)
type DetailProps = { label: string; value: string }
export const Detail = ({ label, value }: DetailProps) => (
-
-
- {label}
-
-
- {value}
-
+
+ {label}
+ {value}
)
+
+const calloutStyle = {
+ backgroundColor: "#f2f8f7",
+ borderLeft: "3px solid #00897b",
+ margin: "24px 0 28px",
+ padding: "6px 18px",
+}
+
+const detailStyle = {
+ margin: "12px 0",
+}
+
+const labelStyle = {
+ color: "#64748b",
+ fontSize: "11px",
+ fontWeight: "700",
+ letterSpacing: "1px",
+ lineHeight: "16px",
+ textTransform: "uppercase" as const,
+}
+
+const valueStyle = {
+ color: "#1e293b",
+ fontFamily: 'Consolas, "Courier New", monospace',
+ fontSize: "14px",
+ fontWeight: "700",
+ lineHeight: "22px",
+ wordBreak: "break-all" as const,
+}
diff --git a/packages/react-email/ui/Heading.tsx b/packages/react-email/ui/Heading.tsx
index 6f8565c470..8ccb3ebe49 100644
--- a/packages/react-email/ui/Heading.tsx
+++ b/packages/react-email/ui/Heading.tsx
@@ -3,10 +3,16 @@ import { Heading as BaseHeading } from "@react-email/components"
type HeadingProps = React.PropsWithChildren
export const Heading = ({ children }: HeadingProps) => (
-
+
{children}
)
+
+const headingStyle = {
+ color: "#17212b",
+ fontSize: "26px",
+ fontWeight: "700",
+ letterSpacing: "-0.3px",
+ lineHeight: "34px",
+ margin: "0 0 20px",
+}
diff --git a/packages/react-email/ui/Layout.tsx b/packages/react-email/ui/Layout.tsx
index a4cc1fe92d..655450bd43 100644
--- a/packages/react-email/ui/Layout.tsx
+++ b/packages/react-email/ui/Layout.tsx
@@ -1,11 +1,13 @@
import {
Body,
+ Column,
+ Container,
Head,
Hr,
Html,
Preview,
+ Row,
Section,
- Tailwind,
Text,
} from "@react-email/components"
@@ -22,64 +24,88 @@ export const Layout = ({
children,
}: LayoutProps) => {
return (
-
-
-
- {title}
- {preview} : null}
-
-
-
-
-
- © {new Date().getFullYear()} {project_name}. All rights reserved.
-
-
-
-
-
+
+
+ {title}
+ {preview} : null}
+
+
+
+
+
+
+
+
+ © {new Date().getFullYear()} {project_name}. All rights
+ reserved.
+
+
+
+
+
+
+
)
}
+
+const fontFamily =
+ '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
+
+const bodyStyle = {
+ backgroundColor: "#f4f7f6",
+ color: "#1e293b",
+ fontFamily,
+ margin: "0",
+ padding: "32px 12px",
+}
+
+const containerStyle = {
+ backgroundColor: "#ffffff",
+ border: "1px solid #dce7e5",
+ borderRadius: "8px",
+ boxSizing: "border-box" as const,
+ margin: "0 auto",
+ maxWidth: "560px",
+ width: "100%",
+}
+
+const contentStyle = {
+ padding: "40px 36px 32px",
+}
+
+const brandRuleStyle = {
+ border: "0",
+ borderTop: "3px solid #00897b",
+ margin: "0 0 16px",
+ width: "32px",
+}
+
+const brandStyle = {
+ color: "#334155",
+ fontSize: "13px",
+ fontWeight: "700",
+ letterSpacing: "1px",
+ lineHeight: "20px",
+ margin: "0 0 32px",
+ textTransform: "uppercase" as const,
+}
+
+const footerRuleStyle = {
+ border: "0",
+ borderTop: "1px solid #dce7e5",
+ margin: "36px 0 18px",
+ width: "100%",
+}
+
+const footerStyle = {
+ color: "#64748b",
+ fontSize: "12px",
+ lineHeight: "20px",
+ margin: "0",
+}
diff --git a/packages/react-email/ui/Link.tsx b/packages/react-email/ui/Link.tsx
index b2011df886..dcb28c79ff 100644
--- a/packages/react-email/ui/Link.tsx
+++ b/packages/react-email/ui/Link.tsx
@@ -1,7 +1,15 @@
+import { Link as EmailLink } from "@react-email/components"
+
type LinkProps = React.PropsWithChildren & { href: string }
export const Link = ({ children, href }: LinkProps) => (
-
+
{children}
-
+
)
+
+const linkStyle = {
+ color: "#00695c",
+ textDecoration: "underline",
+ wordBreak: "break-all" as const,
+}