diff --git a/client/src/Components/design-elements/StatBox.tsx b/client/src/Components/design-elements/StatBox.tsx
index addbc7ee9..9cdb9c024 100644
--- a/client/src/Components/design-elements/StatBox.tsx
+++ b/client/src/Components/design-elements/StatBox.tsx
@@ -23,8 +23,11 @@ export const GradientBox = ({ children, palette, sx, interactive }: GradientBox)
 	// gradient collapses flat. Darken slightly towards the page ground instead.
 	const paperStart = isLight ? darken(paper, 0.02) : lighten(paper, 0.08);
 	const paperEnd = paper;
+	// The gradient carries white `contrastText`, so it runs between two shades
+	// dark enough to keep that legible. `light` is a mid-tone used for status
+	// dots and chart marks - too pale here - so lift from `main` instead.
 	const bg = palette
-		? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)`
+		? `linear-gradient(135deg, ${lighten(theme.palette[palette].main, 0.12)} 0%, ${theme.palette[palette].main} 100%)`
 		: `linear-gradient(135deg, ${paperStart} 0%, ${paperEnd} 100%)`;
 
 	return (