From 8781e4860197a9f46f728dd8dcf6eea49004892f Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Mon, 1 Sep 2025 15:27:57 +0100
Subject: [PATCH] email: change font, template common parts

Using the newer Jellyfin logo font for the header and hanken grotesk for the body.
Tried to redo emails with maizzle because using tailwind sounded nice, but getting it
to look like a17t would be more trouble than it's worth, since you can't
use CSS vars in emails and a17t uses them heavily. Instead, cleaned up
the mj-header a little and stored it in a separate file, and also the
header & footer, and changed the template vars with {{ .header }}  and
{{ .footer }} for all emails. Values are determined by
CustomContentInfo.Header/FooterText funcs. nil values are replaced at
program start by _runtimeValidator.

also, i beg of you don't try to do light/dark mode with mjml, you'll
want to die.
---
 .woodpecker/git-binary.yaml            |   1 +
 css/colors.js                          |  18 +++++
 customcontent.go                       |  33 +++++++-
 email.go                               |  37 ++++-----
 mail/confirmation.mjml                 |  91 ++++-----------------
 mail/created.mjml                      | 107 ++++++-------------------
 mail/deleted.mjml                      |  91 ++++-----------------
 mail/email.mjml                        |  84 -------------------
 mail/expired.mjml                      |  87 +++-----------------
 mail/expiry-adjusted.mjml              |  97 ++++------------------
 mail/expiry-reminder.mjml              |  88 +++-----------------
 mail/invite-email.mjml                 |  93 ++++-----------------
 mail/layout/body-end.mjml              |   5 ++
 mail/layout/body-start.mjml            |   5 ++
 mail/layout/header.mjml                |  64 +++++++++++++++
 mail/password-reset.mjml               |  23 ++++++
 mail/{email.txt => password-reset.txt} |   0
 mail/template.mjml                     |  85 +++-----------------
 mail/user-expired.mjml                 |  87 +++-----------------
 mail/welcome.mjml                      |  93 ++++-----------------
 storage.go                             |   3 +-
 tailwind.config.js                     |  19 +----
 22 files changed, 318 insertions(+), 893 deletions(-)
 create mode 100644 css/colors.js
 delete mode 100644 mail/email.mjml
 create mode 100644 mail/layout/body-end.mjml
 create mode 100644 mail/layout/body-start.mjml
 create mode 100644 mail/layout/header.mjml
 create mode 100644 mail/password-reset.mjml
 rename mail/{email.txt => password-reset.txt} (100%)

diff --git a/.woodpecker/git-binary.yaml b/.woodpecker/git-binary.yaml
index c74179e..6559ce5 100644
--- a/.woodpecker/git-binary.yaml
+++ b/.woodpecker/git-binary.yaml
@@ -21,6 +21,7 @@ steps:
     commands:
       - npm i
       - make precompile
+      - go mod download
   - name: test
     image: docker.io/hrfee/jfa-go-build-docker:latest
     environment:
diff --git a/css/colors.js b/css/colors.js
new file mode 100644
index 0000000..f631140
--- /dev/null
+++ b/css/colors.js
@@ -0,0 +1,18 @@
+const colors = require("tailwindcss/colors");
+const dark = require("../css/dark");
+
+export const colorSet = {
+      neutral: colors.slate,
+      positive: colors.green,
+      urge: colors.violet,
+      warning: colors.yellow,
+      info: colors.blue,
+      critical: colors.red,
+      d_neutral: dark.d_neutral,
+      d_positive: dark.d_positive,
+      d_urge: dark.d_urge,
+      d_warning: dark.d_warning,
+      d_info: dark.d_info,
+      d_critical: dark.d_critical,
+      discord: "#5865F2"
+};
diff --git a/customcontent.go b/customcontent.go
index 76c936e..0b199e3 100644
--- a/customcontent.go
+++ b/customcontent.go
@@ -19,6 +19,18 @@ func defaultVals(vals map[string]any) map[string]any {
 	return vals
 }
 
+func vendorHeader(config *Config, lang *emailLang) string { return "jfa-go" }
+func serverHeader(config *Config, lang *emailLang) string {
+	if substituteStrings == "" {
+		return "Jellyfin"
+	} else {
+		return substituteStrings
+	}
+}
+func messageFooter(config *Config, lang *emailLang) string {
+	return config.Section("messages").Key("message").String()
+}
+
 var customContent = map[string]CustomContentInfo{
 	"EmailConfirmation": {
 		Name:        "EmailConfirmation",
@@ -94,6 +106,10 @@ var customContent = map[string]CustomContentInfo{
 		Subject: func(config *Config, lang *emailLang) string {
 			return lang.InviteExpiry.get("title")
 		},
+		HeaderText: vendorHeader,
+		FooterText: func(config *Config, lang *emailLang) string {
+			return lang.InviteExpiry.get("notificationNotice")
+		},
 		Variables: []string{
 			"code",
 			"time",
@@ -131,7 +147,7 @@ var customContent = map[string]CustomContentInfo{
 			Section:       "password_resets",
 			SettingPrefix: "email_",
 			// This was the first email type added, hence the undescriptive filename.
-			DefaultValue: "email",
+			DefaultValue: "password-reset",
 		},
 	},
 	"UserCreated": {
@@ -141,6 +157,10 @@ var customContent = map[string]CustomContentInfo{
 		Subject: func(config *Config, lang *emailLang) string {
 			return lang.UserCreated.get("title")
 		},
+		HeaderText: vendorHeader,
+		FooterText: func(config *Config, lang *emailLang) string {
+			return lang.UserCreated.get("notificationNotice")
+		},
 		Variables: []string{
 			"code",
 			"name",
@@ -346,6 +366,8 @@ var EmptyCustomContent = CustomContentInfo{
 	Subject: func(config *Config, lang *emailLang) string {
 		return "EmptyCustomContent"
 	},
+	HeaderText:   serverHeader,
+	FooterText:   messageFooter,
 	Description:  nil,
 	Variables:    []string{},
 	Placeholders: map[string]any{},
@@ -359,6 +381,7 @@ var AnnouncementCustomContent = func(subject string) CustomContentInfo {
 	return cci
 }
 
+// Validates customContent and sets default fields if needed.
 var _runtimeValidation = func() bool {
 	for name, cc := range customContent {
 		if name != cc.Name {
@@ -367,6 +390,14 @@ var _runtimeValidation = func() bool {
 		if cc.DisplayName == nil {
 			panic(fmt.Errorf("no customContent[%s] DisplayName set", name))
 		}
+		if cc.HeaderText == nil {
+			cc.HeaderText = serverHeader
+			customContent[name] = cc
+		}
+		if cc.FooterText == nil {
+			cc.FooterText = messageFooter
+			customContent[name] = cc
+		}
 	}
 	return true
 }()
diff --git a/email.go b/email.go
index 1660dc6..10aaf46 100644
--- a/email.go
+++ b/email.go
@@ -269,9 +269,6 @@ func (emailer *Emailer) construct(contentInfo CustomContentInfo, cc CustomConten
 			"plaintext": text,
 			"md":        content,
 		}
-		if message, ok := data["message"]; ok {
-			templateData["message"] = message
-		}
 		data = templateData
 	}
 	var err error = nil
@@ -280,11 +277,8 @@ func (emailer *Emailer) construct(contentInfo CustomContentInfo, cc CustomConten
 	msg.Text = ""
 	msg.Markdown = ""
 	msg.HTML = ""
-	if substituteStrings == "" {
-		data["jellyfin"] = "Jellyfin"
-	} else {
-		data["jellyfin"] = substituteStrings
-	}
+	data["header"] = contentInfo.HeaderText(emailer.config, &emailer.lang)
+	data["footer"] = contentInfo.FooterText(emailer.config, &emailer.lang)
 	var keys []string
 	plaintext := emailer.config.Section("email").Key("plaintext").MustBool(false)
 	if plaintext {
@@ -349,7 +343,6 @@ func (emailer *Emailer) baseValues(name string, username string, placeholders bo
 	contentInfo := customContent[name]
 	template := map[string]any{
 		"username": username,
-		"message":  emailer.config.Section("messages").Key("message").String(),
 	}
 	maps.Copy(template, values)
 	// When generating a version for the user to customise, we'll replace "variable" with "{variable}", so the templater used for custom content understands them.
@@ -409,11 +402,10 @@ func (emailer *Emailer) constructInvite(invite Invite, placeholders bool) (*Mess
 func (emailer *Emailer) constructExpiry(invite Invite, placeholders bool) (*Message, error) {
 	expiry := formatDatetime(invite.ValidTill)
 	contentInfo, template := emailer.baseValues("InviteExpiry", "", placeholders, map[string]any{
-		"inviteExpired":      emailer.lang.InviteExpiry.get("inviteExpired"),
-		"notificationNotice": emailer.lang.InviteExpiry.get("notificationNotice"),
-		"expiredAt":          emailer.lang.InviteExpiry.get("expiredAt"),
-		"code":               "\"" + invite.Code + "\"",
-		"time":               expiry,
+		"inviteExpired": emailer.lang.InviteExpiry.get("inviteExpired"),
+		"expiredAt":     emailer.lang.InviteExpiry.get("expiredAt"),
+		"code":          "\"" + invite.Code + "\"",
+		"time":          expiry,
 	})
 	if !placeholders {
 		template["expiredAt"] = emailer.lang.InviteExpiry.template("expiredAt", template)
@@ -426,15 +418,14 @@ func (emailer *Emailer) constructCreated(username, address string, when time.Tim
 	// NOTE: This was previously invite.Created, not sure why.
 	created := formatDatetime(when)
 	contentInfo, template := emailer.baseValues("UserCreated", username, placeholders, map[string]any{
-		"aUserWasCreated":    emailer.lang.UserCreated.get("aUserWasCreated"),
-		"nameString":         emailer.lang.Strings.get("name"),
-		"addressString":      emailer.lang.Strings.get("emailAddress"),
-		"timeString":         emailer.lang.UserCreated.get("time"),
-		"notificationNotice": emailer.lang.UserCreated.get("notificationNotice"),
-		"code":               "\"" + invite.Code + "\"",
-		"name":               username,
-		"time":               created,
-		"address":            address,
+		"aUserWasCreated": emailer.lang.UserCreated.get("aUserWasCreated"),
+		"nameString":      emailer.lang.Strings.get("name"),
+		"addressString":   emailer.lang.Strings.get("emailAddress"),
+		"timeString":      emailer.lang.UserCreated.get("time"),
+		"code":            "\"" + invite.Code + "\"",
+		"name":            username,
+		"time":            created,
+		"address":         address,
 	})
 	if !placeholders {
 		template["aUserWasCreated"] = emailer.lang.UserCreated.template("aUserWasCreated", template)
diff --git a/mail/confirmation.mjml b/mail/confirmation.mjml
index a3f0023..0584101 100644
--- a/mail/confirmation.mjml
+++ b/mail/confirmation.mjml
@@ -1,78 +1,17 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <p>{{ .helloUser }}</p>
-            <p>{{ .clickBelow }}</p>
-            <p>{{ .ifItWasNotYou }}</p>
-        </mj-text>
-        <mj-button mj-class="blue bold" href="{{ .confirmationURL }}">{{ .confirmEmail }}</mj-button>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <p>{{ .helloUser }}</p>
+                    <p>{{ .clickBelow }}</p>
+                    <p>{{ .ifItWasNotYou }}</p>
+                </mj-text>
+                <mj-button mj-class="blue text-white" href="{{ .confirmationURL }}">{{ .confirmEmail }}</mj-button>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/created.mjml b/mail/created.mjml
index 40a1417..824cada 100644
--- a/mail/created.mjml
+++ b/mail/created.mjml
@@ -1,86 +1,25 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> jellyfin-accounts </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <p>{{ .aUserWasCreated }}</p>
-        </mj-text>
-        <mj-table mj-class="text" container-background-color="#242424">
-          <tr style="text-align: left;">
-              <th>{{ .nameString }}</th>
-              <th>{{ .addressString }}</th>
-              <th>{{ .timeString }}</th>
-          </tr>
-          <tr style="font-style: italic; text-align: left; color: rgb(153,153,153);">
-            <th>{{ .name }}</th>
-            <th>{{ .address }}</th>
-            <th>{{ .time }}</th>
-        </mj-table>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-            {{ .notificationNotice }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <p>{{ .aUserWasCreated }}</p>
+                </mj-text>
+                <mj-table css-class="bg-gray" mj-class="bg-gray">
+                  <tr style="text-align: left;">
+                      <th>{{ .nameString }}</th>
+                      <th>{{ .addressString }}</th>
+                      <th>{{ .timeString }}</th>
+                  </tr>
+                  <tr class="text-gray" style="font-style: italic; text-align: left;">
+                    <th>{{ .name }}</th>
+                    <th>{{ .address }}</th>
+                    <th>{{ .time }}</th>
+                </mj-table>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/deleted.mjml b/mail/deleted.mjml
index 066f59b..5cd0793 100644
--- a/mail/deleted.mjml
+++ b/mail/deleted.mjml
@@ -1,78 +1,17 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <p>{{ .helloUser }}</p>
-            
-            <h3>{{ .yourAccountWas }}</h3>
-            <p>{{ .reasonString }}: <i>{{ .reason }}</i></p>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <p>{{ .helloUser }}</p>
+                    
+                    <h3>{{ .yourAccountWas }}</h3>
+                    <p>{{ .reasonString }}: <i>{{ .reason }}</i></p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/email.mjml b/mail/email.mjml
deleted file mode 100644
index b919bf8..0000000
--- a/mail/email.mjml
+++ /dev/null
@@ -1,84 +0,0 @@
-<mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <p>{{ .helloUser }}</p>
-            <p>{{ .someoneHasRequestedReset }}</p>
-            <p>{{ .ifItWasYou }}</p>
-            <p>{{ .codeExpiry }}</p>
-            <p>{{ .ifItWasNotYou }}</p>
-        </mj-text>
-        <mj-raw>{{ if .link_reset }}</mj-raw>
-        <mj-button mj-class="blue bold" href="{{ .pin }}"><mj-raw>{{ .pin_code }}</mj-raw></mj-button>
-        <mj-raw>{{ else }}</mj-raw>
-        <mj-button mj-class="blue bold"><mj-raw>{{ .pin }}</mj-raw></mj-button>
-        <mj-raw>{{ end }}</mj-raw>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
-</mjml>
diff --git a/mail/expired.mjml b/mail/expired.mjml
index 633ac72..ecede82 100644
--- a/mail/expired.mjml
+++ b/mail/expired.mjml
@@ -1,76 +1,15 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> jellyfin-accounts </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <h3>{{ .inviteExpired }}</h3>
-            <p>{{ .expiredAt }}</p>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-            {{ .notificationNotice }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <h3>{{ .inviteExpired }}</h3>
+                    <p>{{ .expiredAt }}</p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/expiry-adjusted.mjml b/mail/expiry-adjusted.mjml
index 55ddf7f..a20a1d0 100644
--- a/mail/expiry-adjusted.mjml
+++ b/mail/expiry-adjusted.mjml
@@ -1,83 +1,18 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <p>{{ .helloUser }}</p>
-
-            <h3>{{ .yourExpiryWasAdjusted }}</h3>
-
-            <p>{{ .ifPreviouslyDisabled }}</p>
-
-            <h4>{{ .newExpiry }}</h4>
-
-            <p>{{ .reasonString }}: <i>{{ .reason }}</i></p>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <p>{{ .helloUser }}</p>
+                    <h3>{{ .yourExpiryWasAdjusted }}</h3>
+                    <p>{{ .ifPreviouslyDisabled }}</p>
+                    <h4>{{ .newExpiry }}</h4>
+                    <p>{{ .reasonString }}: <i>{{ .reason }}</i></p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/expiry-reminder.mjml b/mail/expiry-reminder.mjml
index 3c69ecb..a30ae63 100644
--- a/mail/expiry-reminder.mjml
+++ b/mail/expiry-reminder.mjml
@@ -1,77 +1,15 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <p>{{ .helloUser }}</p>
-
-            <p>{{ .yourAccountIsDueToExpire }}</p>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <p>{{ .helloUser }}</p>
+                    <p>{{ .yourAccountIsDueToExpire }}</p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/invite-email.mjml b/mail/invite-email.mjml
index cd8f298..7221a63 100644
--- a/mail/invite-email.mjml
+++ b/mail/invite-email.mjml
@@ -1,79 +1,18 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <p>{{ .hello }},</p>
-            <h3>{{ .youHaveBeenInvited }}</h3>
-            <p>{{ .toJoin }}</p>
-            <p>{{ .inviteExpiry }}</p>
-        </mj-text>
-        <mj-button mj-class="blue bold" href="{{ .inviteURL }}">{{ .linkButton }}</mj-button>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <p>{{ .hello }},</p>
+                    <h3>{{ .youHaveBeenInvited }}</h3>
+                    <p>{{ .toJoin }}</p>
+                    <p>{{ .inviteExpiry }}</p>
+                </mj-text>
+                <mj-button mj-class="blue text-white" href="{{ .inviteURL }}">{{ .linkButton }}</mj-button>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/layout/body-end.mjml b/mail/layout/body-end.mjml
new file mode 100644
index 0000000..d18a334
--- /dev/null
+++ b/mail/layout/body-end.mjml
@@ -0,0 +1,5 @@
+<mj-section mj-class="bg-gray">
+    <mj-column>
+        <mj-text mj-class="secondary text-gray">{{ .footer }}</mj-text>
+    </mj-column>
+</mj-section>
diff --git a/mail/layout/body-start.mjml b/mail/layout/body-start.mjml
new file mode 100644
index 0000000..a5165dc
--- /dev/null
+++ b/mail/layout/body-start.mjml
@@ -0,0 +1,5 @@
+<mj-section mj-class="bg-gray">
+    <mj-column>
+        <mj-text mj-class="text-white" font-size="25px" font-family="Plus Jakarta Sans, Noto Sans, Helvetica, Arial, sans-serif"> {{ .header }} </mj-text>
+    </mj-column>
+</mj-section>
diff --git a/mail/layout/header.mjml b/mail/layout/header.mjml
new file mode 100644
index 0000000..4ce6737
--- /dev/null
+++ b/mail/layout/header.mjml
@@ -0,0 +1,64 @@
+<mj-head>
+    <mj-raw>
+        <meta name="color-scheme" content="light dark">
+        <meta name="supported-color-schemes" content="light dark">
+    </mj-raw>
+    <mj-style>
+        :root {
+            Color-scheme: light dark;
+            supported-color-schemes: light dark;
+        }
+        body, .body {
+            background: #101010 !important;
+            background-color: #101010 !important;
+        }
+        .text-gray {
+            color: rgb(153,153,153) !important;
+        }
+        .bg-gray {
+            background: #292929 !important;
+            background-color: #292929 !important;
+        }
+        @media (prefers-color-scheme: light) {
+            Color-scheme: dark;
+            body, .body {
+                background: #101010 !important;
+                background-color: #101010 !important;
+            }
+            [data-ogsc] .body {
+                background: #101010 !important;
+                background-color: #101010 !important;
+            }
+            [data-ogsb] .body {
+                background: #101010 !important;
+                background-color: #101010 !important;
+            }
+        }
+        @media (prefers-color-scheme: dark) {
+            Color-scheme: dark;
+            body, .body {
+                background: #101010 !important;
+                background-color: #101010 !important;
+            }
+            [data-ogsc] .body {
+                background: #101010 !important;
+                background-color: #101010 !important;
+            }
+            [data-ogsb] .body {
+                background: #101010 !important;
+                background-color: #101010 !important;
+            }
+        }
+    </mj-style>
+    <mj-attributes>
+        <mj-class name="body" background-color="#101010" />
+        <mj-class name="bg-gray" background-color="#292929" />
+        <mj-class name="text-white" color="rgb(255,255,255)" />
+        <mj-class name="blue" background-color="rgb(0,164,220)" />
+        <mj-class name="secondary" font-style="italic" font-size="14px" />
+        <mj-class name="text-gray" color="rgb(153,153,153)" />
+        <mj-all font-family="Hanken Grotesk, Noto Sans, Helvetica, Arial, sans-serif" font-size="16px" color="rgba(255,255,255,0.8)">
+    </mj-attributes>
+    <mj-font name="Plus Jakarta Sans" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,700;1,700&display=swap" />
+    <mj-font name="Hanken Grotesk" href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital@0;1&display=swap" />
+</mj-head>
diff --git a/mail/password-reset.mjml b/mail/password-reset.mjml
new file mode 100644
index 0000000..a95f183
--- /dev/null
+++ b/mail/password-reset.mjml
@@ -0,0 +1,23 @@
+<mjml>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <p>{{ .helloUser }}</p>
+                    <p>{{ .someoneHasRequestedReset }}</p>
+                    <p>{{ .ifItWasYou }}</p>
+                    <p>{{ .codeExpiry }}</p>
+                    <p>{{ .ifItWasNotYou }}</p>
+                </mj-text>
+                <mj-raw>{{ if .link_reset }}</mj-raw>
+                <mj-button mj-class="blue text-white" href="{{ .pin }}"><mj-raw>{{ .pin_code }}</mj-raw></mj-button>
+                <mj-raw>{{ else }}</mj-raw>
+                <mj-button mj-class="blue text-white"><mj-raw>{{ .pin }}</mj-raw></mj-button>
+                <mj-raw>{{ end }}</mj-raw>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
+</mjml>
diff --git a/mail/email.txt b/mail/password-reset.txt
similarity index 100%
rename from mail/email.txt
rename to mail/password-reset.txt
diff --git a/mail/template.mjml b/mail/template.mjml
index 8e6b9d4..9283beb 100644
--- a/mail/template.mjml
+++ b/mail/template.mjml
@@ -1,75 +1,14 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <mj-raw>{{ .text }}</mj-raw>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    {{ .text }}
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/user-expired.mjml b/mail/user-expired.mjml
index 0296423..13bd053 100644
--- a/mail/user-expired.mjml
+++ b/mail/user-expired.mjml
@@ -1,76 +1,15 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <h3>{{ .yourAccountHasExpired }}</h3>
-            <p>{{ .contactTheAdmin }}</p>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <h3>{{ .yourAccountHasExpired }}</h3>
+                    <p>{{ .contactTheAdmin }}</p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/mail/welcome.mjml b/mail/welcome.mjml
index 45f8d28..a14900b 100644
--- a/mail/welcome.mjml
+++ b/mail/welcome.mjml
@@ -1,79 +1,18 @@
 <mjml>
-  <mj-head>
-    <mj-raw>
-      <meta name="color-scheme" content="light dark">
-      <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>
-    <mj-style>
-        :root {
-            Color-scheme: light dark;
-            supported-color-schemes: light dark;
-        }
-        @media (prefers-color-scheme: light) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-        @media (prefers-color-scheme: dark) {
-            Color-scheme: dark;
-            .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsc] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-            [data-ogsb] .body {
-                background: #242424 !important;
-                background-color: #242424 !important;
-            }
-        }
-    </mj-style>
-    <mj-attributes>
-      <mj-class name="bg" background-color="#101010" />
-      <mj-class name="bg2" background-color="#242424" />
-      <mj-class name="text" color="#cacaca" />
-      <mj-class name="bold" color="rgba(255,255,255,0.87)" />
-      <mj-class name="secondary" color="rgb(153,153,153)" />
-      <mj-class name="blue" background-color="rgb(0,164,220)" />
-    </mj-attributes>
-    <mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
-    <mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
-  </mj-head>
-  <mj-body>
-    <mj-section mj-class="bg2">
-      <mj-column>
-          <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> {{ .jellyfin }} </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg">
-      <mj-column>
-        <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
-            <h3>{{ .welcome }}</h3>
-            <p>{{ .youCanLoginWith }}:</p>
-            {{ .jellyfinURLString }}: <a href="{{ .jellyfinURL }}">{{ .jellyfinURL }}</a>
-            <p>{{ .usernameString }}: <i>{{ .username }}</i></p>
-          	<p>{{ .yourAccountWillExpire }}</p>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    <mj-section mj-class="bg2">
-      <mj-column>
-        <mj-text mj-class="secondary" font-style="italic" font-size="14px">
-          {{ .message }}
-        </mj-text>
-      </mj-column>
-    </mj-section>
-    </body>
+    <mj-include path="./layout/header.mjml" />
+    <mj-body>
+        <mj-include path="./layout/body-start.mjml" />
+        <mj-section mj-class="body">
+            <mj-column>
+                <mj-text>
+                    <h3>{{ .welcome }}</h3>
+                    <p>{{ .youCanLoginWith }}:</p>
+                    {{ .jellyfinURLString }}: <a href="{{ .jellyfinURL }}">{{ .jellyfinURL }}</a>
+                    <p>{{ .usernameString }}: <i>{{ .username }}</i></p>
+                    <p>{{ .yourAccountWillExpire }}</p>
+                </mj-text>
+            </mj-column>
+        </mj-section>
+        <mj-include path="./layout/body-end.mjml" />
+    </mj-body>
 </mjml>
diff --git a/storage.go b/storage.go
index 119ca89..5bc46f2 100644
--- a/storage.go
+++ b/storage.go
@@ -719,7 +719,8 @@ type ContentSourceFileInfo struct{ Section, SettingPrefix, DefaultValue string }
 type CustomContentInfo struct {
 	Name                     string `json:"name" badgerhold:"key"`
 	DisplayName, Description func(dict *Lang, lang string) string
-	Subject                  func(config *Config, lang *emailLang) string
+	// Subject returns the subject of the email. Header/FooterText returns what should show in the header, a nil-value implies "Jellyfin" (or user-supplied text).
+	Subject, HeaderText, FooterText func(config *Config, lang *emailLang) string
 	// Config section, the main part of the setting name (without "html" or "text"), and the default filename (without ".html" or ".txt").
 	SourceFile   ContentSourceFileInfo
 	ContentType  CustomContentContext `json:"type"`
diff --git a/tailwind.config.js b/tailwind.config.js
index c51ba96..73d8ffe 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,4 @@
-let colors = require("tailwindcss/colors")
-let dark = require("./css/dark");
+import { colorSet } from "./css/colors";
 
 module.exports = {
   content: ["./data/html/*.html", "./build/data/html/*.html", "./ts/*.ts", "./ts/modules/*.ts"],
@@ -62,21 +61,7 @@ module.exports = {
               'slide-out': 'slide-out 0.2s cubic-bezier(.08,.52,.01,.98)',
               'pulse': 'pulse 0.2s cubic-bezier(0.25, 0.45, 0.45, 0.94)'
           },
-          colors: {
-              neutral: colors.slate,
-              positive: colors.green,
-              urge: colors.violet,
-              warning: colors.yellow,
-              info: colors.blue,
-              critical: colors.red,
-              d_neutral: dark.d_neutral,
-              d_positive: dark.d_positive,
-              d_urge: dark.d_urge,
-              d_warning: dark.d_warning,
-              d_info: dark.d_info,
-              d_critical: dark.d_critical,
-              discord: "#5865F2"
-          }
+          colors: colorSet,
       }
   },
   plugins: [require("a17t")],