From 4fd9b2ecf535cdf32162c172efd77aa100045950 Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Sun, 26 Apr 2026 01:21:47 -0400
Subject: [PATCH] feat(client): add eyebrow typography variant and lighter page
 titles

- Introduce a reusable eyebrow Typography variant in the theme (13px, 500 weight, uppercase, 0.08em tracking) for section headings
- Apply it to ConfigBox titles in /settings and to "Job queue" / "Failed jobs" in /logs
- Drop the page header weight from 600 to 400 with tighter tracking so titles read lighter and more refined
---
 .../Components/design-elements/PageHeader.tsx |  8 +++---
 .../Components/design-elements/SplitBox.tsx   |  4 +--
 client/src/Pages/Logs/TabQueue.tsx            |  8 +++---
 client/src/Utils/Theme/Theme.ts               | 28 +++++++++++++++++++
 4 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/client/src/Components/design-elements/PageHeader.tsx b/client/src/Components/design-elements/PageHeader.tsx
index 767d289b4..84b0f61c6 100644
--- a/client/src/Components/design-elements/PageHeader.tsx
+++ b/client/src/Components/design-elements/PageHeader.tsx
@@ -94,11 +94,11 @@ export const PageHeader = ({
 				)}
 				<Typography
 					sx={{
-						fontSize: 24,
-						fontWeight: 600,
+						fontSize: 26,
+						fontWeight: 400,
 						color: theme.palette.text.primary,
-						lineHeight: 1.2,
-						letterSpacing: "-0.01em",
+						lineHeight: 1.15,
+						letterSpacing: "-0.02em",
 					}}
 				>
 					{title}
diff --git a/client/src/Components/design-elements/SplitBox.tsx b/client/src/Components/design-elements/SplitBox.tsx
index 08f245178..4154ed010 100644
--- a/client/src/Components/design-elements/SplitBox.tsx
+++ b/client/src/Components/design-elements/SplitBox.tsx
@@ -63,9 +63,9 @@ export const ConfigBox = ({
 			left={
 				<Stack spacing={theme.spacing(LAYOUT.XS)}>
 					<Typography
-						textTransform={"capitalize"}
 						component="h2"
-						variant="h2"
+						variant="eyebrow"
+						color="text.secondary"
 					>
 						{title}
 					</Typography>
diff --git a/client/src/Pages/Logs/TabQueue.tsx b/client/src/Pages/Logs/TabQueue.tsx
index 10ea29260..34830c9d6 100644
--- a/client/src/Pages/Logs/TabQueue.tsx
+++ b/client/src/Pages/Logs/TabQueue.tsx
@@ -47,8 +47,8 @@ export const TabQueue = () => {
 			<Metrics metrics={metrics} />
 			<Stack gap={theme.spacing(1)}>
 				<Typography
-					variant="h6"
-					sx={{ textTransform: "uppercase" }}
+					variant="eyebrow"
+					color="text.secondary"
 				>
 					{t("pages.logs.jobQueue")}
 				</Typography>
@@ -83,8 +83,8 @@ export const TabQueue = () => {
 			<TableJobs jobs={jobs} />
 			<Stack gap={theme.spacing(1)}>
 				<Typography
-					variant="h6"
-					sx={{ textTransform: "uppercase" }}
+					variant="eyebrow"
+					color="text.secondary"
 				>
 					{t("pages.logs.failedJobs")}
 				</Typography>
diff --git a/client/src/Utils/Theme/Theme.ts b/client/src/Utils/Theme/Theme.ts
index 806cfd4f9..f48ab1686 100644
--- a/client/src/Utils/Theme/Theme.ts
+++ b/client/src/Utils/Theme/Theme.ts
@@ -2,12 +2,32 @@ import { createTheme } from "@mui/material";
 import { lightPalette, darkPalette, typographyLevels } from "@/Utils/Theme/Palette";
 
 import type { Theme } from "@mui/material/styles";
+import type {} from "@mui/material/styles";
+
+declare module "@mui/material/styles" {
+	interface TypographyVariants {
+		eyebrow: React.CSSProperties;
+		fontFamilyMonospace: string;
+	}
+	interface TypographyVariantsOptions {
+		eyebrow?: React.CSSProperties;
+		fontFamilyMonospace?: string;
+	}
+}
+
+declare module "@mui/material/Typography" {
+	interface TypographyPropsVariantOverrides {
+		eyebrow: true;
+	}
+}
 
 export type PaletteKey = {
 	[K in keyof Theme["palette"]]: Theme["palette"][K] extends { main: any } ? K : never;
 }[keyof Theme["palette"]];
 
 const fontFamilyPrimary = "system-ui, sans-serif";
+const fontFamilyMonospace =
+	'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace';
 const shadow =
 	"0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
 
@@ -29,6 +49,7 @@ export const theme = (mode: string, palette: any) =>
 		},
 		typography: {
 			fontFamily: fontFamilyPrimary,
+			fontFamilyMonospace,
 			fontSize: typographyLevels.base,
 			h1: {
 				fontSize: typographyLevels.xl,
@@ -46,6 +67,13 @@ export const theme = (mode: string, palette: any) =>
 				fontSize: typographyLevels.s,
 				fontWeight: 400,
 			},
+			eyebrow: {
+				fontSize: 13,
+				fontWeight: 500,
+				textTransform: "uppercase",
+				letterSpacing: "0.08em",
+				lineHeight: 1.4,
+			},
 		},
 
 		components: {