diff --git a/client/src/Components/design-elements/StatBox.tsx b/client/src/Components/design-elements/StatBox.tsx
index 1543766fc..addbc7ee9 100644
--- a/client/src/Components/design-elements/StatBox.tsx
+++ b/client/src/Components/design-elements/StatBox.tsx
@@ -2,7 +2,7 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
-import { lighten } from "@mui/material/styles";
+import { darken, lighten } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import type { PaletteKey } from "@/Utils/Theme/Theme";
 import { BaseBox, TooltipWithInfo } from "@/Components/design-elements";
@@ -19,7 +19,9 @@ export const GradientBox = ({ children, palette, sx, interactive }: GradientBox)
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isLight = theme.palette.mode === "light";
 	const paper = theme.palette.background.paper;
-	const paperStart = lighten(paper, isLight ? 0.06 : 0.08);
+	// In light mode `paper` is white, and lightening white is a no-op - the
+	// gradient collapses flat. Darken slightly towards the page ground instead.
+	const paperStart = isLight ? darken(paper, 0.02) : lighten(paper, 0.08);
 	const paperEnd = paper;
 	const bg = palette
 		? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)`
diff --git a/client/src/Components/design-elements/StatusBox.tsx b/client/src/Components/design-elements/StatusBox.tsx
index 017873eb9..191ed21d6 100644
--- a/client/src/Components/design-elements/StatusBox.tsx
+++ b/client/src/Components/design-elements/StatusBox.tsx
@@ -5,7 +5,7 @@ import { BaseBox } from "@/Components/design-elements";
 import { useTranslation } from "react-i18next";
 import type { SxProps } from "@mui/material";
 
-import { useTheme } from "@mui/material/styles";
+import { alpha, useTheme } from "@mui/material/styles";
 
 type StatusBoxProps = React.PropsWithChildren<{
 	children: React.ReactNode;
@@ -33,9 +33,12 @@ export const BGBox = ({ children, sx }: StatusBoxProps) => {
 				bottom={0}
 				sx={{
 					pointerEvents: "none",
+					// Deliberately far fainter than `divider` - this is texture
+					// behind the number, not a rule, and it must never compete
+					// with the box's own border.
 					backgroundImage: `
-						linear-gradient(${theme.palette.divider} 1px, transparent 1px),
-						linear-gradient(90deg, ${theme.palette.divider} 1px, transparent 1px)
+						linear-gradient(${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px),
+						linear-gradient(90deg, ${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px)
 					`,
 					backgroundSize: "24px 24px",
 					maskImage:
diff --git a/client/src/Utils/Theme/Palette.ts b/client/src/Utils/Theme/Palette.ts
index bfb9dda5d..a7f4b9a27 100644
--- a/client/src/Utils/Theme/Palette.ts
+++ b/client/src/Utils/Theme/Palette.ts
@@ -24,14 +24,14 @@ export const colors = {
 	ink600: "#55635C",
 	ink400: "#7C8983",
 	surface50: "#F6F8F7",
-	rule200: "#D9E1DD",
+	rule200: "#C7D2CC",
 	// Semantic colours derived from the brand rather than Material's defaults
 	successMain: "#0D6049",
 	errorMain: "#A02B24",
 	warningMain: "#8C5806",
 	inkDark900: "#ECEFED",
 	inkDark600: "#A3ADA8",
-	ruleDark: "#2C3532",
+	ruleDark: "#3A4642",
 	successDark: "#4BC49E",
 	errorDark: "#E8837A",
 	warningDark: "#E0A458",