From 4b9d8324f60db0af473bdd74b4c8a6b46c5ad054 Mon Sep 17 00:00:00 2001
From: Hugh Parry <hughglynparry@gmail.com>
Date: Mon, 15 Jun 2026 15:42:04 +0100
Subject: [PATCH 1/5] feat(widget): Material 3 purple tonal theme for captcha
 UI

Restyle the widget, image, frictionless (placeholder/PoW checkbox) and
puzzle captchas into a unified Material 3 "tonal" key off the Prosopo
brand purple, with a matching dark-mode scheme.

- theme.ts: repurpose palette to the purple ramp + add M3 tokens
  (primaryContainer, surface/onSurface, muted, titleAccent, checkbox,
  overlay, tile, shape radii, elevation) for both light and dark
- widget: M3 surface + elevation + 16px radius, purple two-tone spinner,
  custom-painted purple checkbox with tick (themes correctly in dark)
- image: M3 card + tonal header, rounded tiles with purple selection
  overlay + check badge + scale-in, pill buttons, tonal reload
- puzzle: theme-driven purple surface, piece, target ring and header

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/reactComponents/Checkbox.tsx          |  32 +++--
 .../src/reactComponents/Reload.tsx            |  29 ++--
 .../src/components/ProcaptchaWidget.tsx       |   1 +
 .../src/components/PuzzleCanvas.tsx           |  55 +++++---
 .../src/components/Button.tsx                 |  42 +++---
 .../src/components/CaptchaComponent.tsx       |  25 ++--
 .../src/components/CaptchaWidget.tsx          |  26 +++-
 .../procaptcha-react/src/components/Modal.tsx |   2 +-
 packages/widget-skeleton/src/constants.ts     |   2 +-
 .../widget-skeleton/src/elements/checkbox.ts  |   4 +-
 .../widget-skeleton/src/elements/skeleton.ts  |  10 +-
 packages/widget-skeleton/src/theme.ts         | 127 +++++++++++++++---
 12 files changed, 250 insertions(+), 105 deletions(-)

diff --git a/packages/procaptcha-common/src/reactComponents/Checkbox.tsx b/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
index 7e894c7c75..f2706d38b9 100644
--- a/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
+++ b/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
@@ -86,10 +86,6 @@ export const Checkbox: FC<CheckboxProps> = ({
 	error,
 	loading,
 }: CheckboxProps) => {
-	const checkboxStyleBase: CSSProperties = {
-		...baseStyle,
-		border: `1px solid ${theme.palette.background.contrastText}`,
-	};
 	const [hover, setHover] = useState(false);
 
 	const ResponsiveLabel = styled.label<ResponsiveLabelProps>`
@@ -119,16 +115,34 @@ export const Checkbox: FC<CheckboxProps> = ({
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO fix
 	const checkboxStyle: CSSProperties = useMemo(() => {
+		// White (token) tick painted directly onto the box so the checked state is
+		// identical in light and dark mode — the native control can't be themed.
+		const tickColor = theme.palette.checkbox.tick.replace("#", "%23");
+		const checkImage = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='${tickColor}' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E")`;
 		return {
-			...checkboxStyleBase,
-			borderColor: hover
-				? theme.palette.background.contrastText
-				: theme.palette.border,
-			appearance: checked ? "auto" : "none",
+			...baseStyle,
+			appearance: "none",
 			flex: 1,
 			margin: "15px",
 			minWidth: "28px",
 			minHeight: "28px",
+			borderRadius: "8px",
+			borderStyle: "solid",
+			borderWidth: "2px",
+			borderColor: checked
+				? theme.palette.checkbox.fill
+				: hover
+					? theme.palette.primary.main
+					: theme.palette.checkbox.border,
+			backgroundColor: checked
+				? theme.palette.checkbox.fill
+				: theme.palette.surface,
+			backgroundImage: checked ? checkImage : "none",
+			backgroundRepeat: "no-repeat",
+			backgroundPosition: "center",
+			backgroundSize: "20px 20px",
+			transition:
+				"background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease",
 		};
 	}, [hover, theme, checked]);
 	const id = generateRandomId();
diff --git a/packages/procaptcha-common/src/reactComponents/Reload.tsx b/packages/procaptcha-common/src/reactComponents/Reload.tsx
index 8aa1e190cb..7c9d50d45c 100644
--- a/packages/procaptcha-common/src/reactComponents/Reload.tsx
+++ b/packages/procaptcha-common/src/reactComponents/Reload.tsx
@@ -25,8 +25,8 @@ const buttonStyleBase = {
 	paddingTop: "6px",
 	paddingBottom: "6px",
 	cursor: "pointer",
-	height: "39px",
-	width: "39px",
+	height: "42px",
+	width: "42px",
 	borderRadius: "50%",
 	display: "flex",
 };
@@ -41,26 +41,19 @@ export const ReloadButton: FC<ReloadButtonProps> = ({
 	);
 	const [hover, setHover] = useState(false);
 	const buttonStyle = useMemo(() => {
-		const baseStyle = {
+		return {
 			...buttonStyleBase,
-			backgroundColor: theme.palette.background.default,
-			color: hover
-				? theme.palette.primary.contrastText
-				: theme.palette.background.contrastText,
-			border: `1px solid ${theme.palette.grey[500]}`,
+			// Material 3 tonal icon button.
+			backgroundColor: theme.palette.primaryContainer.main,
+			color: theme.palette.primaryContainer.contrastText,
+			border: "none",
 			borderRadius: "50%",
-			transition: "background-color 0.3s",
-			boxShadow: `0px 1px 3px 0px ${theme.palette.grey[500]}`,
+			transition: "filter 0.25s, background-color 0.25s",
+			filter: hover ? "brightness(0.95)" : "none",
 			justifyContent: "center",
 			alignItems: "center",
 			margin: "0 auto",
 		};
-		return {
-			...baseStyle,
-			backgroundColor: hover
-				? theme.palette.grey[700]
-				: theme.palette.background.default,
-		};
 	}, [hover, theme]);
 	return (
 		<button
@@ -87,9 +80,7 @@ export const ReloadButton: FC<ReloadButtonProps> = ({
 				<title>reload</title>
 				<path
 					shapeRendering="optimizeQuality"
-					fill={
-						hover ? theme.palette.primary.contrastText : theme.palette.grey[700]
-					}
+					fill={theme.palette.primaryContainer.contrastText}
 					transform={"scale(0.0416)"}
 					d="M234.666667,149.333333 L234.666667,106.666667 L314.564847,106.664112 C287.579138,67.9778918 242.745446,42.6666667 192,42.6666667 C109.525477,42.6666667 42.6666667,109.525477 42.6666667,192 C42.6666667,274.474523 109.525477,341.333333 192,341.333333 C268.201293,341.333333 331.072074,284.258623 340.195444,210.526102 L382.537159,215.817985 C370.807686,310.617565 289.973536,384 192,384 C85.961328,384 1.42108547e-14,298.038672 1.42108547e-14,192 C1.42108547e-14,85.961328 85.961328,1.42108547e-14 192,1.42108547e-14 C252.316171,1.42108547e-14 306.136355,27.8126321 341.335366,71.3127128 L341.333333,1.42108547e-14 L384,1.42108547e-14 L384,149.333333 L234.666667,149.333333 Z"
 				/>
diff --git a/packages/procaptcha-puzzle/src/components/ProcaptchaWidget.tsx b/packages/procaptcha-puzzle/src/components/ProcaptchaWidget.tsx
index 51e2140d5b..0b6404be68 100644
--- a/packages/procaptcha-puzzle/src/components/ProcaptchaWidget.tsx
+++ b/packages/procaptcha-puzzle/src/components/ProcaptchaWidget.tsx
@@ -201,6 +201,7 @@ const Procaptcha = (props: ProcaptchaProps) => {
 					onComplete={handlePuzzleComplete}
 					showRetry={showRetry}
 					submitting={puzzlePhase === "submitting"}
+						theme={theme}
 				/>
 			)}
 
diff --git a/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx b/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx
index 0cc78f7cf5..3148831d59 100644
--- a/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx
+++ b/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx
@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import type { PuzzleEvent } from "@prosopo/types";
+import type { Theme } from "@prosopo/widget-skeleton";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 interface PuzzleCanvasProps {
@@ -27,6 +28,7 @@ interface PuzzleCanvasProps {
 	) => void;
 	showRetry: boolean;
 	submitting: boolean;
+	theme: Theme;
 }
 
 const CONTAINER_WIDTH = 300;
@@ -50,6 +52,7 @@ export const PuzzleCanvas = ({
 	onComplete,
 	showRetry,
 	submitting,
+	theme,
 }: PuzzleCanvasProps) => {
 	const [posX, setPosX] = useState<number>(originX);
 	const [posY, setPosY] = useState<number>(originY);
@@ -212,11 +215,31 @@ export const PuzzleCanvas = ({
 		? "Not quite \u2014 try again"
 		: "Drag the piece to the target";
 
-	const headerBorderColor = showRetry
-		? "rgba(220, 53, 69, 0.4)"
-		: "transparent";
-
-	const headerTextColor = showRetry ? "#dc3545" : "#333";
+	const isDark = theme.palette.mode === "dark";
+
+	const headerBorderColor = showRetry ? theme.palette.error.main : "transparent";
+
+	const headerTextColor = showRetry
+		? theme.palette.error.main
+		: theme.palette.onSurface;
+
+	// Material 3 purple tonal puzzle surface + affordances.
+	const puzzleAreaBg = `linear-gradient(135deg, ${theme.palette.surface} 0%, ${theme.palette.primaryContainer.main} 50%, ${theme.palette.surface} 100%)`;
+	const targetBorderColor = isDark
+		? "rgba(184, 180, 217, 0.6)"
+		: "rgba(78, 67, 159, 0.55)";
+	const targetFillColor = isDark
+		? "rgba(184, 180, 217, 0.12)"
+		: "rgba(78, 67, 159, 0.1)";
+	const pieceGradient = isDark
+		? "radial-gradient(circle at 40% 40%, #b8b4d9, #695fad)"
+		: "radial-gradient(circle at 40% 40%, #8c85c1, #4e439f)";
+	const pieceShadowBase = isDark
+		? "0 2px 6px rgba(0, 0, 0, 0.5)"
+		: "0 2px 6px rgba(78, 67, 159, 0.35)";
+	const pieceShadowDrag = isDark
+		? "0 4px 12px rgba(0, 0, 0, 0.6)"
+		: "0 4px 12px rgba(78, 67, 159, 0.55)";
 
 	return (
 		<div
@@ -250,14 +273,14 @@ export const PuzzleCanvas = ({
 				{/* Instruction text */}
 				<div
 					style={{
-						backgroundColor: "#fff",
-						borderRadius: "8px 8px 0 0",
+						backgroundColor: theme.palette.surface,
+						borderRadius: "20px 20px 0 0",
 						padding: "12px 20px",
 						width: `${CONTAINER_WIDTH}px`,
 						boxSizing: "border-box",
 						textAlign: "center",
 						fontFamily:
-							'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+							theme.font.fontFamily,
 						fontSize: "14px",
 						fontWeight: 500,
 						color: headerTextColor,
@@ -277,9 +300,8 @@ export const PuzzleCanvas = ({
 						position: "relative",
 						width: `${CONTAINER_WIDTH}px`,
 						height: `${CONTAINER_HEIGHT}px`,
-						background:
-							"linear-gradient(135deg, #e8eaf6 0%, #c5cae9 50%, #e8eaf6 100%)",
-						borderRadius: "0 0 8px 8px",
+						background: puzzleAreaBg,
+						borderRadius: "0 0 20px 20px",
 						overflow: "hidden",
 						userSelect: "none",
 						boxShadow:
@@ -298,8 +320,8 @@ export const PuzzleCanvas = ({
 							width: `${TARGET_SIZE}px`,
 							height: `${TARGET_SIZE}px`,
 							borderRadius: "50%",
-							border: "2px dashed rgba(74, 144, 217, 0.6)",
-							backgroundColor: "rgba(74, 144, 217, 0.08)",
+							border: `2px dashed ${targetBorderColor}`,
+							backgroundColor: targetFillColor,
 							boxSizing: "border-box",
 						}}
 					/>
@@ -314,16 +336,15 @@ export const PuzzleCanvas = ({
 							width: `${PIECE_SIZE}px`,
 							height: `${PIECE_SIZE}px`,
 							borderRadius: "50%",
-							background:
-								"radial-gradient(circle at 40% 40%, #6ab0ff, #4a90d9)",
+							background: pieceGradient,
 							cursor: submitting
 								? "default"
 								: isDragging.current
 									? "grabbing"
 									: "grab",
 							boxShadow: isDragging.current
-								? "0 4px 12px rgba(74, 144, 217, 0.5)"
-								: "0 2px 6px rgba(74, 144, 217, 0.3)",
+								? pieceShadowDrag
+								: pieceShadowBase,
 							transition: isDragging.current
 								? "none"
 								: "box-shadow 0.2s ease, left 0.3s ease, top 0.3s ease",
diff --git a/packages/procaptcha-react/src/components/Button.tsx b/packages/procaptcha-react/src/components/Button.tsx
index 5a6c24362e..b07374b240 100644
--- a/packages/procaptcha-react/src/components/Button.tsx
+++ b/packages/procaptcha-react/src/components/Button.tsx
@@ -41,17 +41,21 @@ const buttonStyleBase: CSSProperties = {
 	verticalAlign: "middle",
 	appearance: undefined,
 	textDecoration: "none",
-	fontWeight: "500",
+	fontWeight: 600,
 	fontSize: "0.875rem",
 	lineHeight: "1.75",
-	letterSpacing: "0.02857em",
-	textTransform: "uppercase",
+	letterSpacing: "0.02em",
+	// Material 3 buttons use sentence case, not all-caps.
+	textTransform: "none",
 	minWidth: "64px",
-	padding: "6px 16px",
-	borderRadius: "4px",
+	padding: "8px 16px",
+	height: "42px",
+	// Full pill — the Material 3 shape for the action row.
+	borderRadius: "100px",
+	border: "none",
 	transition:
-		"background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-	backgroundColor: "#ffffff",
+		"background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, filter 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+	backgroundColor: "transparent",
 };
 
 const Button: React.FC<ButtonProps> = ({
@@ -65,28 +69,30 @@ const Button: React.FC<ButtonProps> = ({
 		[themeColor],
 	);
 	const [hover, setHover] = useState(false);
-	const buttonStyle = useMemo(() => {
-		const baseStyle = {
+	const buttonStyle: CSSProperties = useMemo(() => {
+		const baseStyle: CSSProperties = {
 			...buttonStyleBase,
-			border: `1px solid ${theme.palette.grey[500]}`,
-			boxShadow: `0px 1px 3px 0px ${theme.palette.grey[500]}`,
+			borderRadius: theme.shape.button,
 			fontFamily: theme.font.fontFamily,
 			width: "100%",
-			color: hover
-				? theme.palette.primary.contrastText
-				: theme.palette.background.contrastText,
 		};
 		if (buttonType === "cancel") {
+			// Material 3 "text" button — no fill at rest, tonal wash on hover.
 			return {
 				...baseStyle,
-				backgroundColor: hover ? theme.palette.grey[600] : "transparent",
+				backgroundColor: hover
+					? theme.palette.primaryContainer.main
+					: "transparent",
+				color: theme.palette.titleAccent,
 			};
 		}
+		// Material 3 "filled" button — the primary action.
 		return {
 			...baseStyle,
-			backgroundColor: hover
-				? theme.palette.primary.main
-				: theme.palette.background.default,
+			backgroundColor: theme.palette.primary.main,
+			color: theme.palette.primary.contrastText,
+			boxShadow: theme.elevation.buttonPrimary,
+			filter: hover ? "brightness(1.06)" : "none",
 		};
 	}, [buttonType, hover, theme]);
 
diff --git a/packages/procaptcha-react/src/components/CaptchaComponent.tsx b/packages/procaptcha-react/src/components/CaptchaComponent.tsx
index f37a7ae387..1680b0b519 100644
--- a/packages/procaptcha-react/src/components/CaptchaComponent.tsx
+++ b/packages/procaptcha-react/src/components/CaptchaComponent.tsx
@@ -66,9 +66,9 @@ const CaptchaComponent = ({
 					maxHeight: "100%",
 					display: "flex",
 					flexDirection: "column",
-					border: "1px solid #dddddd",
-					boxShadow: "rgba(255, 255, 255, 0.2) 0px 0px 4px",
-					borderRadius: "4px",
+					border: `1px solid ${theme.palette.border}`,
+					boxShadow: theme.elevation.card,
+					borderRadius: theme.shape.card,
 					backgroundColor: theme.palette.background.default,
 					userSelect: "none",
 					touchAction: "none",
@@ -95,20 +95,21 @@ const CaptchaComponent = ({
 					>
 						<div
 							style={{
-								backgroundColor: theme.palette.primary.main,
+								backgroundColor: theme.palette.primaryContainer.main,
+									borderRadius: theme.shape.header,
 								width: "100%",
 								marginTop: fullSpacing,
 							}}
 						>
 							<div
 								style={{
-									padding: `${theme.spacing.half}px`,
+									padding: "12px 14px",
 									fontFamily: theme.font.fontFamily,
 								}}
 							>
 								<p
 									style={{
-										color: "#ffffff",
+										color: theme.palette.primaryContainer.contrastText,
 										fontWeight: 700,
 										lineHeight: 1.5,
 									}}
@@ -116,14 +117,20 @@ const CaptchaComponent = ({
 									{t("WIDGET.SELECT_ALL")}
 									{":"}
 									&nbsp;
-									<span>{`${at(challenge.captchas, index).target} `}</span>
+									<span
+											style={{
+												color: theme.palette.titleAccent,
+												fontWeight: 800,
+											}}
+										>{`${at(challenge.captchas, index).target} `}</span>
 								</p>
 								<p
 									style={{
-										color: "#ffffff",
+										color: theme.palette.primaryContainer.contrastText,
 										fontWeight: 500,
-										lineHeight: 0.8,
+										lineHeight: 1.4,
 										fontSize: "0.8rem",
+											opacity: 0.8,
 									}}
 								>
 									{t("WIDGET.IF_NONE_CLICK_NEXT")}
diff --git a/packages/procaptcha-react/src/components/CaptchaWidget.tsx b/packages/procaptcha-react/src/components/CaptchaWidget.tsx
index 40a99ed530..64bb348048 100644
--- a/packages/procaptcha-react/src/components/CaptchaWidget.tsx
+++ b/packages/procaptcha-react/src/components/CaptchaWidget.tsx
@@ -68,6 +68,7 @@ export const CaptchaWidget = ({
 		>
 			{items.map((item, index) => {
 				const hash = getHash(item);
+					const selected = solution.some((s) => s[0] === hash);
 				const imageStyle: Properties<string | number, string> = {
 					// enable the items in the grid to grow in width to use up excess space
 					flexGrow: 1,
@@ -113,7 +114,13 @@ export const CaptchaWidget = ({
 									overflow: "hidden",
 									borderStyle: "solid",
 									borderWidth: "1px",
-									borderColor: theme.palette.grey[300],
+									borderColor: theme.palette.tile.border,
+									borderRadius: selected
+										? theme.shape.tileSelected
+										: theme.shape.tile,
+									transform: selected ? "scale(0.9)" : "none",
+									transition:
+										"transform 200ms cubic-bezier(0.2, 0, 0, 1), border-radius 200ms",
 								}}
 								src={item.data}
 								// biome-ignore lint/a11y/noRedundantAlt: has to contain image
@@ -142,7 +149,8 @@ export const CaptchaWidget = ({
 									alignItems: "center",
 									justifyContent: "center",
 									// make bg half opacity, i.e. shadowing the item's img
-									backgroundColor: "rgba(0,0,0,0.5)",
+									backgroundColor: theme.palette.overlay,
+									borderRadius: theme.shape.tileSelected,
 									visibility: solution.some((s) => s[0] === hash)
 										? "visible"
 										: "hidden",
@@ -150,15 +158,19 @@ export const CaptchaWidget = ({
 							>
 								<svg
 									style={{
-										backgroundColor: "transparent",
+										// rounded "secondary container" badge holding the tick
+										backgroundColor: theme.palette.checkbox.fill,
 										// img must be displayed as block otherwise gets a bottom whitespace border
 										display: "block",
-										// how big the overlay icon is
-										width: "35%",
-										height: "35%",
+										// how big the overlay badge is
+										width: "34px",
+										height: "34px",
+										padding: "7px",
+										borderRadius: "50%",
+										boxSizing: "border-box",
 										transition: "fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
 										userSelect: "none",
-										fill: "currentcolor",
+										fill: theme.palette.checkbox.tick,
 									}}
 									focusable="false"
 									color="#fff"
diff --git a/packages/procaptcha-react/src/components/Modal.tsx b/packages/procaptcha-react/src/components/Modal.tsx
index c41868c615..95e95571fe 100644
--- a/packages/procaptcha-react/src/components/Modal.tsx
+++ b/packages/procaptcha-react/src/components/Modal.tsx
@@ -28,7 +28,7 @@ const ModalInnerDivCSS = css`
 	max-width: 500px;
 	background-color: transparent;
 	border: none;
-	border-radius: 4px;
+	border-radius: 28px;
 	z-index: 2147483647;
 	align-self: center;
 	box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px,
diff --git a/packages/widget-skeleton/src/constants.ts b/packages/widget-skeleton/src/constants.ts
index 08cc14090a..3486b12a7c 100644
--- a/packages/widget-skeleton/src/constants.ts
+++ b/packages/widget-skeleton/src/constants.ts
@@ -22,7 +22,7 @@ export const WIDGET_DIMENSIONS = {
 	maxWidth: WIDGET_MAX_WIDTH,
 	minHeight: `${WIDGET_OUTER_HEIGHT}px`,
 };
-export const WIDGET_BORDER_RADIUS = "8px";
+export const WIDGET_BORDER_RADIUS = "16px";
 export const WIDGET_PADDING = "2px";
 export const WIDGET_BORDER = "1px solid";
 export const WIDGET_CHECKBOX_SPINNER_CSS_CLASS =
diff --git a/packages/widget-skeleton/src/elements/checkbox.ts b/packages/widget-skeleton/src/elements/checkbox.ts
index 74e5b3ab73..277b338010 100644
--- a/packages/widget-skeleton/src/elements/checkbox.ts
+++ b/packages/widget-skeleton/src/elements/checkbox.ts
@@ -101,8 +101,8 @@ const getCheckboxStyles = (theme: Theme): string => `
     margin-right: 15px !important;
     width: 28px !important;
     height: 28px !important;
-    border: 4px solid ${theme.palette.background.contrastText};
-    border-bottom-color: transparent;
+    border: 4px solid ${theme.palette.border};
+    border-bottom-color: ${theme.palette.primary.main};
     border-radius: 50%;
     display: inherit;
     box-sizing: border-box;
diff --git a/packages/widget-skeleton/src/elements/skeleton.ts b/packages/widget-skeleton/src/elements/skeleton.ts
index b41e5ccb7e..8292fe7458 100644
--- a/packages/widget-skeleton/src/elements/skeleton.ts
+++ b/packages/widget-skeleton/src/elements/skeleton.ts
@@ -139,9 +139,11 @@ function getWidgetStyles(theme: Theme): string {
 .prosopo-widget__content {
     padding: ${WIDGET_PADDING};
     border: ${WIDGET_BORDER};
-    background-color: ${theme.palette.background.default};
-    border-color: ${theme.palette.grey[300]};
+    background-color: ${theme.palette.surface};
+    border-color: ${theme.palette.border};
     border-radius: ${WIDGET_BORDER_RADIUS};
+    box-shadow: ${theme.elevation.widget};
+    transition: box-shadow 0.15s ease;
     display: flex !important;
     flex-direction: row !important;
     flex-wrap: nowrap !important;
@@ -153,6 +155,10 @@ function getWidgetStyles(theme: Theme): string {
     height: 100%;
     direction: ltr !important;
 }
+
+.prosopo-widget__content:hover {
+    box-shadow: ${theme.elevation.widgetHover};
+}
 </style>
 `;
 }
diff --git a/packages/widget-skeleton/src/theme.ts b/packages/widget-skeleton/src/theme.ts
index 862a1dd845..78003408b3 100644
--- a/packages/widget-skeleton/src/theme.ts
+++ b/packages/widget-skeleton/src/theme.ts
@@ -25,36 +25,96 @@ const grey = {
 	900: "#212121",
 };
 
+// Prosopo brand purple ramp (packages/portal/tailwind.config.js). The widgets
+// are styled in a Material 3 "tonal" key off this single hue — tonal container
+// surfaces + a saturated primary, mirrored into a dark plum scheme for dark mode.
+const purple = {
+	50: "#EDECF5",
+	100: "#DCD9EC",
+	200: "#B8B4D9",
+	300: "#8C85C1",
+	400: "#695FAD",
+	500: "#4E439F",
+	600: "#423987",
+	700: "#332C67",
+	800: "#1F1B40",
+	900: "#100D20",
+};
+
 const DEFAULT_SPACING = 10; // size in pixels
 
+const FONT_FAMILY =
+	'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
+
+// Material 3 shape scale, shared across both themes.
+const shape = {
+	widget: "16px", // the on-page "I am human" surface
+	card: "28px", // the challenge dialog container
+	header: "18px", // the tonal header "secondary container"
+	button: "100px", // full pill buttons
+	tile: "14px", // image grid cells
+	tileSelected: "16px", // image grid cells when selected
+};
+
 export type Theme = typeof lightTheme | typeof darkTheme;
 
 export const lightTheme = {
 	palette: {
 		mode: "light",
 		primary: {
-			main: "#487DFA",
-			contrastText: "#fff",
+			main: purple[500],
+			contrastText: "#ffffff",
+		},
+		// M3 tonal "secondary container" — a soft tint of the primary used for the
+		// challenge header and the reload affordance.
+		primaryContainer: {
+			main: purple[100],
+			contrastText: purple[800],
 		},
 		background: {
-			default: "#fff",
-			contrastText: "#000",
+			// Doubles as the M3 surface for the widget + challenge card.
+			default: "#f8f6fd",
+			contrastText: "#1c182b",
+		},
+		surface: "#f8f6fd",
+		onSurface: "#1c182b",
+		muted: "#6f6890",
+		// Bold "target word" in the challenge header.
+		titleAccent: purple[600],
+		// The checkbox is fully custom-painted (works identically in dark mode).
+		checkbox: {
+			border: purple[400],
+			fill: purple[500],
+			tick: "#ffffff",
 		},
-		border: grey[400],
+		// Image grid tiles.
+		tile: {
+			border: "#e7e2f3",
+		},
+		// Semi-transparent wash over a selected image tile.
+		overlay: "rgba(78, 67, 159, 0.32)",
+		border: purple[100],
 		error: {
-			main: "#f44336",
+			main: "#b3261e",
 		},
-		logoFill: "#1d1d1b",
+		logoFill: purple[700],
 		grey,
+		purple,
+	},
+	shape,
+	elevation: {
+		widget: "0 1px 2px rgba(20,8,24,.06), 0 4px 12px rgba(20,8,24,.06)",
+		widgetHover: "0 2px 4px rgba(20,8,24,.10), 0 8px 22px rgba(20,8,24,.12)",
+		card: "0 4px 8px rgba(20,8,24,.08), 0 10px 28px rgba(20,8,24,.12)",
+		buttonPrimary: "0 1px 3px rgba(78,67,159,.5)",
 	},
 	spacing: {
 		unit: DEFAULT_SPACING,
 		half: Math.floor(DEFAULT_SPACING / 2),
 	},
 	font: {
-		fontFamily:
-			'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-		color: "#000",
+		fontFamily: FONT_FAMILY,
+		color: "#1c182b",
 	},
 };
 
@@ -62,27 +122,54 @@ export const darkTheme = {
 	palette: {
 		mode: "dark",
 		primary: {
-			main: "#487DFA",
-			contrastText: "#fff",
+			// M3 dark uses a lighter tone of the source hue as the accent.
+			main: purple[300],
+			contrastText: purple[900],
+		},
+		primaryContainer: {
+			main: "#2a2550",
+			contrastText: purple[100],
 		},
 		background: {
-			default: "#303030",
-			contrastText: "#fff",
+			// Dark plum M3 surface rather than neutral grey.
+			default: "#1a1623",
+			contrastText: "#ece6f5",
 		},
-		border: grey[300],
+		surface: "#1a1623",
+		onSurface: "#ece6f5",
+		muted: "#a79fc4",
+		titleAccent: purple[200],
+		checkbox: {
+			// Brightened a touch so the filled state reads on a dark surface.
+			border: purple[300],
+			fill: "#7a6fd0",
+			tick: "#ffffff",
+		},
+		tile: {
+			border: "#2c2742",
+		},
+		overlay: "rgba(124, 111, 208, 0.5)",
+		border: "#332c50",
 		error: {
-			main: "#f44336",
+			main: "#f2b8b5",
 		},
-		logoFill: "#fff",
+		logoFill: "#cfc9e6",
 		grey,
+		purple,
+	},
+	shape,
+	elevation: {
+		widget: "0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.45)",
+		widgetHover: "0 2px 6px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.55)",
+		card: "0 8px 24px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.6)",
+		buttonPrimary: "0 1px 3px rgba(0,0,0,.5)",
 	},
 	spacing: {
 		unit: DEFAULT_SPACING,
 		half: Math.floor(DEFAULT_SPACING / 2),
 	},
 	font: {
-		fontFamily:
-			'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-		color: "#fff",
+		fontFamily: FONT_FAMILY,
+		color: "#ece6f5",
 	},
 };

From fa6e1706ef792dfa4b06ae4bf6d0a1d008bcad22 Mon Sep 17 00:00:00 2001
From: Hugh Parry <hughglynparry@gmail.com>
Date: Tue, 16 Jun 2026 13:42:49 +0100
Subject: [PATCH 2/5] style(widget): rein in roundedness and drop decorative
 shadows

Follow-up to the Material 3 purple tonal redesign. Per design feedback the
widgets were too rounded ("everything is round") and drop shadows read as
dated, so:

- shape scale dialled back: card 28->12px, full-pill buttons 100->8px,
  widget 16->8px, header 18->8px, tiles 14->6px / 16->8px
- WIDGET_BORDER_RADIUS 16->8px, Modal 28->12px, puzzle surface 20->12px,
  custom checkbox 8->6px
- elevation tokens flattened to none in both themes (widget, widgetHover,
  card, buttonPrimary) so borders, not shadows, separate the surfaces

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/reactComponents/Checkbox.tsx          |  2 +-
 .../src/components/PuzzleCanvas.tsx           |  4 +--
 .../src/components/Button.tsx                 |  4 +--
 .../procaptcha-react/src/components/Modal.tsx |  2 +-
 packages/widget-skeleton/src/constants.ts     |  2 +-
 packages/widget-skeleton/src/theme.ts         | 32 ++++++++++---------
 6 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/packages/procaptcha-common/src/reactComponents/Checkbox.tsx b/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
index f2706d38b9..26278bd65a 100644
--- a/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
+++ b/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
@@ -126,7 +126,7 @@ export const Checkbox: FC<CheckboxProps> = ({
 			margin: "15px",
 			minWidth: "28px",
 			minHeight: "28px",
-			borderRadius: "8px",
+			borderRadius: "6px",
 			borderStyle: "solid",
 			borderWidth: "2px",
 			borderColor: checked
diff --git a/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx b/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx
index 3148831d59..cad36fe73e 100644
--- a/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx
+++ b/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx
@@ -274,7 +274,7 @@ export const PuzzleCanvas = ({
 				<div
 					style={{
 						backgroundColor: theme.palette.surface,
-						borderRadius: "20px 20px 0 0",
+						borderRadius: "12px 12px 0 0",
 						padding: "12px 20px",
 						width: `${CONTAINER_WIDTH}px`,
 						boxSizing: "border-box",
@@ -301,7 +301,7 @@ export const PuzzleCanvas = ({
 						width: `${CONTAINER_WIDTH}px`,
 						height: `${CONTAINER_HEIGHT}px`,
 						background: puzzleAreaBg,
-						borderRadius: "0 0 20px 20px",
+						borderRadius: "0 0 12px 12px",
 						overflow: "hidden",
 						userSelect: "none",
 						boxShadow:
diff --git a/packages/procaptcha-react/src/components/Button.tsx b/packages/procaptcha-react/src/components/Button.tsx
index b07374b240..f8f1d59acb 100644
--- a/packages/procaptcha-react/src/components/Button.tsx
+++ b/packages/procaptcha-react/src/components/Button.tsx
@@ -50,8 +50,8 @@ const buttonStyleBase: CSSProperties = {
 	minWidth: "64px",
 	padding: "8px 16px",
 	height: "42px",
-	// Full pill — the Material 3 shape for the action row.
-	borderRadius: "100px",
+	// Softly rounded action buttons (overridden per-theme by shape.button).
+	borderRadius: "8px",
 	border: "none",
 	transition:
 		"background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, filter 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
diff --git a/packages/procaptcha-react/src/components/Modal.tsx b/packages/procaptcha-react/src/components/Modal.tsx
index 95e95571fe..23927d0de2 100644
--- a/packages/procaptcha-react/src/components/Modal.tsx
+++ b/packages/procaptcha-react/src/components/Modal.tsx
@@ -28,7 +28,7 @@ const ModalInnerDivCSS = css`
 	max-width: 500px;
 	background-color: transparent;
 	border: none;
-	border-radius: 28px;
+	border-radius: 12px;
 	z-index: 2147483647;
 	align-self: center;
 	box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px,
diff --git a/packages/widget-skeleton/src/constants.ts b/packages/widget-skeleton/src/constants.ts
index 3486b12a7c..08cc14090a 100644
--- a/packages/widget-skeleton/src/constants.ts
+++ b/packages/widget-skeleton/src/constants.ts
@@ -22,7 +22,7 @@ export const WIDGET_DIMENSIONS = {
 	maxWidth: WIDGET_MAX_WIDTH,
 	minHeight: `${WIDGET_OUTER_HEIGHT}px`,
 };
-export const WIDGET_BORDER_RADIUS = "16px";
+export const WIDGET_BORDER_RADIUS = "8px";
 export const WIDGET_PADDING = "2px";
 export const WIDGET_BORDER = "1px solid";
 export const WIDGET_CHECKBOX_SPINNER_CSS_CLASS =
diff --git a/packages/widget-skeleton/src/theme.ts b/packages/widget-skeleton/src/theme.ts
index 78003408b3..2c9855ebe9 100644
--- a/packages/widget-skeleton/src/theme.ts
+++ b/packages/widget-skeleton/src/theme.ts
@@ -46,14 +46,14 @@ const DEFAULT_SPACING = 10; // size in pixels
 const FONT_FAMILY =
 	'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
 
-// Material 3 shape scale, shared across both themes.
+// Material 3 shape scale, reined in — gently rounded rather than fully round.
 const shape = {
-	widget: "16px", // the on-page "I am human" surface
-	card: "28px", // the challenge dialog container
-	header: "18px", // the tonal header "secondary container"
-	button: "100px", // full pill buttons
-	tile: "14px", // image grid cells
-	tileSelected: "16px", // image grid cells when selected
+	widget: "8px", // the on-page "I am human" surface
+	card: "12px", // the challenge dialog container
+	header: "8px", // the tonal header "secondary container"
+	button: "8px", // softly rounded action buttons (no longer full pills)
+	tile: "6px", // image grid cells
+	tileSelected: "8px", // image grid cells when selected
 };
 
 export type Theme = typeof lightTheme | typeof darkTheme;
@@ -102,11 +102,12 @@ export const lightTheme = {
 		purple,
 	},
 	shape,
+	// Flat by design — borders, not drop shadows, separate the surfaces.
 	elevation: {
-		widget: "0 1px 2px rgba(20,8,24,.06), 0 4px 12px rgba(20,8,24,.06)",
-		widgetHover: "0 2px 4px rgba(20,8,24,.10), 0 8px 22px rgba(20,8,24,.12)",
-		card: "0 4px 8px rgba(20,8,24,.08), 0 10px 28px rgba(20,8,24,.12)",
-		buttonPrimary: "0 1px 3px rgba(78,67,159,.5)",
+		widget: "none",
+		widgetHover: "none",
+		card: "none",
+		buttonPrimary: "none",
 	},
 	spacing: {
 		unit: DEFAULT_SPACING,
@@ -158,11 +159,12 @@ export const darkTheme = {
 		purple,
 	},
 	shape,
+	// Flat by design — borders, not drop shadows, separate the surfaces.
 	elevation: {
-		widget: "0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.45)",
-		widgetHover: "0 2px 6px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.55)",
-		card: "0 8px 24px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.6)",
-		buttonPrimary: "0 1px 3px rgba(0,0,0,.5)",
+		widget: "none",
+		widgetHover: "none",
+		card: "none",
+		buttonPrimary: "none",
 	},
 	spacing: {
 		unit: DEFAULT_SPACING,

From 0b087ff4156adca36bd869d97c7f3f3bc40dc6ef Mon Sep 17 00:00:00 2001
From: Hugh Parry <hughglynparry@gmail.com>
Date: Mon, 6 Jul 2026 13:34:30 +0100
Subject: [PATCH 3/5] fix(widget): address review findings on the M3 theme

- buttons use minHeight so wrapped localized labels aren't clipped
- reload button hover uses a primaryContainer.hover state-layer token
  (visible in dark mode, unlike the brightness filter)
- checkbox falls back to the native control in forced-colors mode
- puzzle target/piece colors move into theme.palette.puzzle tokens,
  removing the hard-coded purples and isDark ternaries
- drop the dead all-none elevation tokens and the CSS wired to them,
  plus unused grey/purple/muted palette entries
- surface/onSurface/background/font colors derive from single constants
- reuse the selected predicate for the tile overlay; format all files

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/reactComponents/Checkbox.tsx          |  15 ++-
 .../src/reactComponents/Reload.tsx            |  12 +-
 .../src/components/ProcaptchaWidget.tsx       |   2 +-
 .../src/components/PuzzleCanvas.tsx           |  38 ++-----
 .../src/components/Button.tsx                 |   5 +-
 .../src/components/CaptchaComponent.tsx       |  15 ++-
 .../src/components/CaptchaWidget.tsx          |   6 +-
 .../widget-skeleton/src/elements/skeleton.ts  |   6 -
 packages/widget-skeleton/src/theme.ts         | 105 +++++++++---------
 9 files changed, 96 insertions(+), 108 deletions(-)

diff --git a/packages/procaptcha-common/src/reactComponents/Checkbox.tsx b/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
index 26278bd65a..398279fef8 100644
--- a/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
+++ b/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
@@ -45,6 +45,16 @@ const checkboxBefore = css`{
     }
 }`;
 
+// In forced-colors mode (Windows High Contrast) backgrounds are overridden, so
+// the custom-painted tick can disappear — fall back to the native control,
+// which the OS draws in system colors. !important beats the inline styles.
+const checkboxForcedColors = css`
+	@media (forced-colors: active) {
+		appearance: auto !important;
+		background-image: none !important;
+	}
+`;
+
 const baseStyle: CSSProperties = {
 	width: "28px",
 	height: "28px",
@@ -113,7 +123,6 @@ export const Checkbox: FC<CheckboxProps> = ({
 		}
 	`;
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO fix
 	const checkboxStyle: CSSProperties = useMemo(() => {
 		// White (token) tick painted directly onto the box so the checked state is
 		// identical in light and dark mode — the native control can't be themed.
@@ -121,13 +130,11 @@ export const Checkbox: FC<CheckboxProps> = ({
 		const checkImage = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='${tickColor}' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E")`;
 		return {
 			...baseStyle,
-			appearance: "none",
 			flex: 1,
 			margin: "15px",
 			minWidth: "28px",
 			minHeight: "28px",
 			borderRadius: "6px",
-			borderStyle: "solid",
 			borderWidth: "2px",
 			borderColor: checked
 				? theme.palette.checkbox.fill
@@ -166,7 +173,7 @@ export const Checkbox: FC<CheckboxProps> = ({
 					id={id}
 					onMouseEnter={() => setHover(true)}
 					onMouseLeave={() => setHover(false)}
-					css={checkboxBefore}
+					css={[checkboxBefore, checkboxForcedColors]}
 					type={"checkbox"}
 					aria-live={"assertive"}
 					aria-label={labelText}
diff --git a/packages/procaptcha-common/src/reactComponents/Reload.tsx b/packages/procaptcha-common/src/reactComponents/Reload.tsx
index 7c9d50d45c..7a22f6f156 100644
--- a/packages/procaptcha-common/src/reactComponents/Reload.tsx
+++ b/packages/procaptcha-common/src/reactComponents/Reload.tsx
@@ -43,13 +43,13 @@ export const ReloadButton: FC<ReloadButtonProps> = ({
 	const buttonStyle = useMemo(() => {
 		return {
 			...buttonStyleBase,
-			// Material 3 tonal icon button.
-			backgroundColor: theme.palette.primaryContainer.main,
+			// Material 3 tonal icon button; hover swaps to the state-layer fill so
+			// the feedback is visible in dark mode too (a brightness filter is not).
+			backgroundColor: hover
+				? theme.palette.primaryContainer.hover
+				: theme.palette.primaryContainer.main,
 			color: theme.palette.primaryContainer.contrastText,
-			border: "none",
-			borderRadius: "50%",
-			transition: "filter 0.25s, background-color 0.25s",
-			filter: hover ? "brightness(0.95)" : "none",
+			transition: "background-color 0.25s",
 			justifyContent: "center",
 			alignItems: "center",
 			margin: "0 auto",
diff --git a/packages/procaptcha-puzzle/src/components/ProcaptchaWidget.tsx b/packages/procaptcha-puzzle/src/components/ProcaptchaWidget.tsx
index 7d1101730d..2e020552c1 100644
--- a/packages/procaptcha-puzzle/src/components/ProcaptchaWidget.tsx
+++ b/packages/procaptcha-puzzle/src/components/ProcaptchaWidget.tsx
@@ -230,7 +230,7 @@ const Procaptcha = (props: ProcaptchaProps) => {
 					onComplete={handlePuzzleComplete}
 					showRetry={showRetry}
 					submitting={puzzlePhase === "submitting"}
-						theme={theme}
+					theme={theme}
 				/>
 			)}
 
diff --git a/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx b/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx
index cad36fe73e..8e1fa9bbcc 100644
--- a/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx
+++ b/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx
@@ -215,31 +215,18 @@ export const PuzzleCanvas = ({
 		? "Not quite \u2014 try again"
 		: "Drag the piece to the target";
 
-	const isDark = theme.palette.mode === "dark";
-
-	const headerBorderColor = showRetry ? theme.palette.error.main : "transparent";
+	const headerBorderColor = showRetry
+		? theme.palette.error.main
+		: "transparent";
 
 	const headerTextColor = showRetry
 		? theme.palette.error.main
 		: theme.palette.onSurface;
 
-	// Material 3 purple tonal puzzle surface + affordances.
+	// Material 3 purple tonal puzzle surface + affordances (mode-specific values
+	// come from the theme's puzzle tokens).
 	const puzzleAreaBg = `linear-gradient(135deg, ${theme.palette.surface} 0%, ${theme.palette.primaryContainer.main} 50%, ${theme.palette.surface} 100%)`;
-	const targetBorderColor = isDark
-		? "rgba(184, 180, 217, 0.6)"
-		: "rgba(78, 67, 159, 0.55)";
-	const targetFillColor = isDark
-		? "rgba(184, 180, 217, 0.12)"
-		: "rgba(78, 67, 159, 0.1)";
-	const pieceGradient = isDark
-		? "radial-gradient(circle at 40% 40%, #b8b4d9, #695fad)"
-		: "radial-gradient(circle at 40% 40%, #8c85c1, #4e439f)";
-	const pieceShadowBase = isDark
-		? "0 2px 6px rgba(0, 0, 0, 0.5)"
-		: "0 2px 6px rgba(78, 67, 159, 0.35)";
-	const pieceShadowDrag = isDark
-		? "0 4px 12px rgba(0, 0, 0, 0.6)"
-		: "0 4px 12px rgba(78, 67, 159, 0.55)";
+	const puzzle = theme.palette.puzzle;
 
 	return (
 		<div
@@ -279,8 +266,7 @@ export const PuzzleCanvas = ({
 						width: `${CONTAINER_WIDTH}px`,
 						boxSizing: "border-box",
 						textAlign: "center",
-						fontFamily:
-							theme.font.fontFamily,
+						fontFamily: theme.font.fontFamily,
 						fontSize: "14px",
 						fontWeight: 500,
 						color: headerTextColor,
@@ -320,8 +306,8 @@ export const PuzzleCanvas = ({
 							width: `${TARGET_SIZE}px`,
 							height: `${TARGET_SIZE}px`,
 							borderRadius: "50%",
-							border: `2px dashed ${targetBorderColor}`,
-							backgroundColor: targetFillColor,
+							border: `2px dashed ${puzzle.targetBorder}`,
+							backgroundColor: puzzle.targetFill,
 							boxSizing: "border-box",
 						}}
 					/>
@@ -336,15 +322,15 @@ export const PuzzleCanvas = ({
 							width: `${PIECE_SIZE}px`,
 							height: `${PIECE_SIZE}px`,
 							borderRadius: "50%",
-							background: pieceGradient,
+							background: puzzle.pieceGradient,
 							cursor: submitting
 								? "default"
 								: isDragging.current
 									? "grabbing"
 									: "grab",
 							boxShadow: isDragging.current
-								? pieceShadowDrag
-								: pieceShadowBase,
+								? puzzle.pieceShadowDrag
+								: puzzle.pieceShadow,
 							transition: isDragging.current
 								? "none"
 								: "box-shadow 0.2s ease, left 0.3s ease, top 0.3s ease",
diff --git a/packages/procaptcha-react/src/components/Button.tsx b/packages/procaptcha-react/src/components/Button.tsx
index f8f1d59acb..e645514d2d 100644
--- a/packages/procaptcha-react/src/components/Button.tsx
+++ b/packages/procaptcha-react/src/components/Button.tsx
@@ -49,7 +49,9 @@ const buttonStyleBase: CSSProperties = {
 	textTransform: "none",
 	minWidth: "64px",
 	padding: "8px 16px",
-	height: "42px",
+	// min, not fixed: long localized labels wrap to two lines in narrow widgets
+	// and the button must grow to keep the text inside its rounded fill.
+	minHeight: "42px",
 	// Softly rounded action buttons (overridden per-theme by shape.button).
 	borderRadius: "8px",
 	border: "none",
@@ -91,7 +93,6 @@ const Button: React.FC<ButtonProps> = ({
 			...baseStyle,
 			backgroundColor: theme.palette.primary.main,
 			color: theme.palette.primary.contrastText,
-			boxShadow: theme.elevation.buttonPrimary,
 			filter: hover ? "brightness(1.06)" : "none",
 		};
 	}, [buttonType, hover, theme]);
diff --git a/packages/procaptcha-react/src/components/CaptchaComponent.tsx b/packages/procaptcha-react/src/components/CaptchaComponent.tsx
index 1680b0b519..5fc840f10c 100644
--- a/packages/procaptcha-react/src/components/CaptchaComponent.tsx
+++ b/packages/procaptcha-react/src/components/CaptchaComponent.tsx
@@ -67,7 +67,6 @@ const CaptchaComponent = ({
 					display: "flex",
 					flexDirection: "column",
 					border: `1px solid ${theme.palette.border}`,
-					boxShadow: theme.elevation.card,
 					borderRadius: theme.shape.card,
 					backgroundColor: theme.palette.background.default,
 					userSelect: "none",
@@ -96,7 +95,7 @@ const CaptchaComponent = ({
 						<div
 							style={{
 								backgroundColor: theme.palette.primaryContainer.main,
-									borderRadius: theme.shape.header,
+								borderRadius: theme.shape.header,
 								width: "100%",
 								marginTop: fullSpacing,
 							}}
@@ -118,11 +117,11 @@ const CaptchaComponent = ({
 									{":"}
 									&nbsp;
 									<span
-											style={{
-												color: theme.palette.titleAccent,
-												fontWeight: 800,
-											}}
-										>{`${at(challenge.captchas, index).target} `}</span>
+										style={{
+											color: theme.palette.titleAccent,
+											fontWeight: 800,
+										}}
+									>{`${at(challenge.captchas, index).target} `}</span>
 								</p>
 								<p
 									style={{
@@ -130,7 +129,7 @@ const CaptchaComponent = ({
 										fontWeight: 500,
 										lineHeight: 1.4,
 										fontSize: "0.8rem",
-											opacity: 0.8,
+										opacity: 0.8,
 									}}
 								>
 									{t("WIDGET.IF_NONE_CLICK_NEXT")}
diff --git a/packages/procaptcha-react/src/components/CaptchaWidget.tsx b/packages/procaptcha-react/src/components/CaptchaWidget.tsx
index 64bb348048..6b8b0cd1fe 100644
--- a/packages/procaptcha-react/src/components/CaptchaWidget.tsx
+++ b/packages/procaptcha-react/src/components/CaptchaWidget.tsx
@@ -68,7 +68,7 @@ export const CaptchaWidget = ({
 		>
 			{items.map((item, index) => {
 				const hash = getHash(item);
-					const selected = solution.some((s) => s[0] === hash);
+				const selected = solution.some((s) => s[0] === hash);
 				const imageStyle: Properties<string | number, string> = {
 					// enable the items in the grid to grow in width to use up excess space
 					flexGrow: 1,
@@ -151,9 +151,7 @@ export const CaptchaWidget = ({
 									// make bg half opacity, i.e. shadowing the item's img
 									backgroundColor: theme.palette.overlay,
 									borderRadius: theme.shape.tileSelected,
-									visibility: solution.some((s) => s[0] === hash)
-										? "visible"
-										: "hidden",
+									visibility: selected ? "visible" : "hidden",
 								}}
 							>
 								<svg
diff --git a/packages/widget-skeleton/src/elements/skeleton.ts b/packages/widget-skeleton/src/elements/skeleton.ts
index 8292fe7458..b7c68539fb 100644
--- a/packages/widget-skeleton/src/elements/skeleton.ts
+++ b/packages/widget-skeleton/src/elements/skeleton.ts
@@ -142,8 +142,6 @@ function getWidgetStyles(theme: Theme): string {
     background-color: ${theme.palette.surface};
     border-color: ${theme.palette.border};
     border-radius: ${WIDGET_BORDER_RADIUS};
-    box-shadow: ${theme.elevation.widget};
-    transition: box-shadow 0.15s ease;
     display: flex !important;
     flex-direction: row !important;
     flex-wrap: nowrap !important;
@@ -155,10 +153,6 @@ function getWidgetStyles(theme: Theme): string {
     height: 100%;
     direction: ltr !important;
 }
-
-.prosopo-widget__content:hover {
-    box-shadow: ${theme.elevation.widgetHover};
-}
 </style>
 `;
 }
diff --git a/packages/widget-skeleton/src/theme.ts b/packages/widget-skeleton/src/theme.ts
index 2c9855ebe9..4789e27715 100644
--- a/packages/widget-skeleton/src/theme.ts
+++ b/packages/widget-skeleton/src/theme.ts
@@ -12,22 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-const grey = {
-	0: "#fff",
-	100: "#f5f5f5",
-	200: "#eeeeee",
-	300: "#e0e0e0",
-	400: "#bdbdbd",
-	500: "#9e9e9e",
-	600: "#757575",
-	700: "#616161",
-	800: "#424242",
-	900: "#212121",
-};
-
-// Prosopo brand purple ramp (packages/portal/tailwind.config.js). The widgets
-// are styled in a Material 3 "tonal" key off this single hue — tonal container
-// surfaces + a saturated primary, mirrored into a dark plum scheme for dark mode.
+// Prosopo brand purple ramp. The widgets are styled in a Material 3 "tonal"
+// key off this single hue — tonal container surfaces + a saturated primary,
+// mirrored into a dark plum scheme for dark mode.
 const purple = {
 	50: "#EDECF5",
 	100: "#DCD9EC",
@@ -46,6 +33,25 @@ const DEFAULT_SPACING = 10; // size in pixels
 const FONT_FAMILY =
 	'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
 
+// Alpha washes derive from ramp hexes via this helper so they can't drift
+// from the solid colors they are tints of.
+const alpha = (hex: string, opacity: number): string => {
+	const r = Number.parseInt(hex.slice(1, 3), 16);
+	const g = Number.parseInt(hex.slice(3, 5), 16);
+	const b = Number.parseInt(hex.slice(5, 7), 16);
+	return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+
+// M3 surface pair per mode. background.default and font.color reference these
+// so the on-page widget, the challenge card and body text can never desync.
+const lightSurface = "#f8f6fd";
+const lightOnSurface = "#1c182b";
+const darkSurface = "#1a1623";
+const darkOnSurface = "#ece6f5";
+// Dark-mode accent shared by the checkbox fill and the selected-tile wash
+// (brightened from the ramp so the filled state reads on a dark surface).
+const darkCheckboxFill = "#7a6fd0";
+
 // Material 3 shape scale, reined in — gently rounded rather than fully round.
 const shape = {
 	widget: "8px", // the on-page "I am human" surface
@@ -70,15 +76,15 @@ export const lightTheme = {
 		primaryContainer: {
 			main: purple[100],
 			contrastText: purple[800],
+			// ~8% on-color state layer over main: the hover fill for tonal controls.
+			hover: "#cdcade",
 		},
 		background: {
-			// Doubles as the M3 surface for the widget + challenge card.
-			default: "#f8f6fd",
-			contrastText: "#1c182b",
+			default: lightSurface,
+			contrastText: lightOnSurface,
 		},
-		surface: "#f8f6fd",
-		onSurface: "#1c182b",
-		muted: "#6f6890",
+		surface: lightSurface,
+		onSurface: lightOnSurface,
 		// Bold "target word" in the challenge header.
 		titleAccent: purple[600],
 		// The checkbox is fully custom-painted (works identically in dark mode).
@@ -92,30 +98,29 @@ export const lightTheme = {
 			border: "#e7e2f3",
 		},
 		// Semi-transparent wash over a selected image tile.
-		overlay: "rgba(78, 67, 159, 0.32)",
+		overlay: alpha(purple[500], 0.32),
+		// Drag-puzzle captcha affordances: target ring, piece and its shadows.
+		puzzle: {
+			targetBorder: alpha(purple[500], 0.55),
+			targetFill: alpha(purple[500], 0.1),
+			pieceGradient: `radial-gradient(circle at 40% 40%, ${purple[300]}, ${purple[500]})`,
+			pieceShadow: `0 2px 6px ${alpha(purple[500], 0.35)}`,
+			pieceShadowDrag: `0 4px 12px ${alpha(purple[500], 0.55)}`,
+		},
 		border: purple[100],
 		error: {
 			main: "#b3261e",
 		},
 		logoFill: purple[700],
-		grey,
-		purple,
 	},
 	shape,
-	// Flat by design — borders, not drop shadows, separate the surfaces.
-	elevation: {
-		widget: "none",
-		widgetHover: "none",
-		card: "none",
-		buttonPrimary: "none",
-	},
 	spacing: {
 		unit: DEFAULT_SPACING,
 		half: Math.floor(DEFAULT_SPACING / 2),
 	},
 	font: {
 		fontFamily: FONT_FAMILY,
-		color: "#1c182b",
+		color: lightOnSurface,
 	},
 };
 
@@ -130,48 +135,46 @@ export const darkTheme = {
 		primaryContainer: {
 			main: "#2a2550",
 			contrastText: purple[100],
+			// ~8% on-color state layer over main: the hover fill for tonal controls.
+			hover: "#38335d",
 		},
 		background: {
 			// Dark plum M3 surface rather than neutral grey.
-			default: "#1a1623",
-			contrastText: "#ece6f5",
+			default: darkSurface,
+			contrastText: darkOnSurface,
 		},
-		surface: "#1a1623",
-		onSurface: "#ece6f5",
-		muted: "#a79fc4",
+		surface: darkSurface,
+		onSurface: darkOnSurface,
 		titleAccent: purple[200],
 		checkbox: {
-			// Brightened a touch so the filled state reads on a dark surface.
 			border: purple[300],
-			fill: "#7a6fd0",
+			fill: darkCheckboxFill,
 			tick: "#ffffff",
 		},
 		tile: {
 			border: "#2c2742",
 		},
-		overlay: "rgba(124, 111, 208, 0.5)",
+		overlay: alpha(darkCheckboxFill, 0.5),
+		puzzle: {
+			targetBorder: alpha(purple[200], 0.6),
+			targetFill: alpha(purple[200], 0.12),
+			pieceGradient: `radial-gradient(circle at 40% 40%, ${purple[200]}, ${purple[400]})`,
+			pieceShadow: "0 2px 6px rgba(0, 0, 0, 0.5)",
+			pieceShadowDrag: "0 4px 12px rgba(0, 0, 0, 0.6)",
+		},
 		border: "#332c50",
 		error: {
 			main: "#f2b8b5",
 		},
 		logoFill: "#cfc9e6",
-		grey,
-		purple,
 	},
 	shape,
-	// Flat by design — borders, not drop shadows, separate the surfaces.
-	elevation: {
-		widget: "none",
-		widgetHover: "none",
-		card: "none",
-		buttonPrimary: "none",
-	},
 	spacing: {
 		unit: DEFAULT_SPACING,
 		half: Math.floor(DEFAULT_SPACING / 2),
 	},
 	font: {
 		fontFamily: FONT_FAMILY,
-		color: "#ece6f5",
+		color: darkOnSurface,
 	},
 };

From 05b5dc052d9e9c6db471e2ceaa55158c5f5435e0 Mon Sep 17 00:00:00 2001
From: Hugh Parry <hughglynparry@gmail.com>
Date: Mon, 6 Jul 2026 15:58:14 +0100
Subject: [PATCH 4/5] revert(widget): restore roundedness and elevation shadows

Reverts the styling changes from fa6e1706e (style(widget): rein in
roundedness and drop decorative shadows): shape scale back to the round
M3 values (card 28px, pill buttons, widget 16px, header 18px, tiles
14/16px), WIDGET_BORDER_RADIUS 16px, Modal 28px, puzzle surface 20px,
checkbox 8px, and the elevation tokens back to real shadows with their
widget/card/button wiring (re-added where the earlier cleanup had
removed the then-all-none tokens).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/reactComponents/Checkbox.tsx          |  2 +-
 .../src/components/PuzzleCanvas.tsx           |  4 +--
 .../src/components/Button.tsx                 |  5 ++--
 .../src/components/CaptchaComponent.tsx       |  1 +
 .../procaptcha-react/src/components/Modal.tsx |  2 +-
 packages/widget-skeleton/src/constants.ts     |  2 +-
 .../widget-skeleton/src/elements/skeleton.ts  |  6 +++++
 packages/widget-skeleton/src/theme.ts         | 26 ++++++++++++++-----
 8 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/packages/procaptcha-common/src/reactComponents/Checkbox.tsx b/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
index 398279fef8..1ffd54f6d1 100644
--- a/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
+++ b/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
@@ -134,7 +134,7 @@ export const Checkbox: FC<CheckboxProps> = ({
 			margin: "15px",
 			minWidth: "28px",
 			minHeight: "28px",
-			borderRadius: "6px",
+			borderRadius: "8px",
 			borderWidth: "2px",
 			borderColor: checked
 				? theme.palette.checkbox.fill
diff --git a/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx b/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx
index 8e1fa9bbcc..a8508ce019 100644
--- a/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx
+++ b/packages/procaptcha-puzzle/src/components/PuzzleCanvas.tsx
@@ -261,7 +261,7 @@ export const PuzzleCanvas = ({
 				<div
 					style={{
 						backgroundColor: theme.palette.surface,
-						borderRadius: "12px 12px 0 0",
+						borderRadius: "20px 20px 0 0",
 						padding: "12px 20px",
 						width: `${CONTAINER_WIDTH}px`,
 						boxSizing: "border-box",
@@ -287,7 +287,7 @@ export const PuzzleCanvas = ({
 						width: `${CONTAINER_WIDTH}px`,
 						height: `${CONTAINER_HEIGHT}px`,
 						background: puzzleAreaBg,
-						borderRadius: "0 0 12px 12px",
+						borderRadius: "0 0 20px 20px",
 						overflow: "hidden",
 						userSelect: "none",
 						boxShadow:
diff --git a/packages/procaptcha-react/src/components/Button.tsx b/packages/procaptcha-react/src/components/Button.tsx
index e645514d2d..155715ba97 100644
--- a/packages/procaptcha-react/src/components/Button.tsx
+++ b/packages/procaptcha-react/src/components/Button.tsx
@@ -52,8 +52,8 @@ const buttonStyleBase: CSSProperties = {
 	// min, not fixed: long localized labels wrap to two lines in narrow widgets
 	// and the button must grow to keep the text inside its rounded fill.
 	minHeight: "42px",
-	// Softly rounded action buttons (overridden per-theme by shape.button).
-	borderRadius: "8px",
+	// Full pill — the Material 3 shape for the action row.
+	borderRadius: "100px",
 	border: "none",
 	transition:
 		"background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, filter 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
@@ -93,6 +93,7 @@ const Button: React.FC<ButtonProps> = ({
 			...baseStyle,
 			backgroundColor: theme.palette.primary.main,
 			color: theme.palette.primary.contrastText,
+			boxShadow: theme.elevation.buttonPrimary,
 			filter: hover ? "brightness(1.06)" : "none",
 		};
 	}, [buttonType, hover, theme]);
diff --git a/packages/procaptcha-react/src/components/CaptchaComponent.tsx b/packages/procaptcha-react/src/components/CaptchaComponent.tsx
index 5fc840f10c..38b2565193 100644
--- a/packages/procaptcha-react/src/components/CaptchaComponent.tsx
+++ b/packages/procaptcha-react/src/components/CaptchaComponent.tsx
@@ -67,6 +67,7 @@ const CaptchaComponent = ({
 					display: "flex",
 					flexDirection: "column",
 					border: `1px solid ${theme.palette.border}`,
+					boxShadow: theme.elevation.card,
 					borderRadius: theme.shape.card,
 					backgroundColor: theme.palette.background.default,
 					userSelect: "none",
diff --git a/packages/procaptcha-react/src/components/Modal.tsx b/packages/procaptcha-react/src/components/Modal.tsx
index 23927d0de2..95e95571fe 100644
--- a/packages/procaptcha-react/src/components/Modal.tsx
+++ b/packages/procaptcha-react/src/components/Modal.tsx
@@ -28,7 +28,7 @@ const ModalInnerDivCSS = css`
 	max-width: 500px;
 	background-color: transparent;
 	border: none;
-	border-radius: 12px;
+	border-radius: 28px;
 	z-index: 2147483647;
 	align-self: center;
 	box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px,
diff --git a/packages/widget-skeleton/src/constants.ts b/packages/widget-skeleton/src/constants.ts
index 08cc14090a..3486b12a7c 100644
--- a/packages/widget-skeleton/src/constants.ts
+++ b/packages/widget-skeleton/src/constants.ts
@@ -22,7 +22,7 @@ export const WIDGET_DIMENSIONS = {
 	maxWidth: WIDGET_MAX_WIDTH,
 	minHeight: `${WIDGET_OUTER_HEIGHT}px`,
 };
-export const WIDGET_BORDER_RADIUS = "8px";
+export const WIDGET_BORDER_RADIUS = "16px";
 export const WIDGET_PADDING = "2px";
 export const WIDGET_BORDER = "1px solid";
 export const WIDGET_CHECKBOX_SPINNER_CSS_CLASS =
diff --git a/packages/widget-skeleton/src/elements/skeleton.ts b/packages/widget-skeleton/src/elements/skeleton.ts
index b7c68539fb..8292fe7458 100644
--- a/packages/widget-skeleton/src/elements/skeleton.ts
+++ b/packages/widget-skeleton/src/elements/skeleton.ts
@@ -142,6 +142,8 @@ function getWidgetStyles(theme: Theme): string {
     background-color: ${theme.palette.surface};
     border-color: ${theme.palette.border};
     border-radius: ${WIDGET_BORDER_RADIUS};
+    box-shadow: ${theme.elevation.widget};
+    transition: box-shadow 0.15s ease;
     display: flex !important;
     flex-direction: row !important;
     flex-wrap: nowrap !important;
@@ -153,6 +155,10 @@ function getWidgetStyles(theme: Theme): string {
     height: 100%;
     direction: ltr !important;
 }
+
+.prosopo-widget__content:hover {
+    box-shadow: ${theme.elevation.widgetHover};
+}
 </style>
 `;
 }
diff --git a/packages/widget-skeleton/src/theme.ts b/packages/widget-skeleton/src/theme.ts
index 4789e27715..cc1612f13f 100644
--- a/packages/widget-skeleton/src/theme.ts
+++ b/packages/widget-skeleton/src/theme.ts
@@ -52,14 +52,14 @@ const darkOnSurface = "#ece6f5";
 // (brightened from the ramp so the filled state reads on a dark surface).
 const darkCheckboxFill = "#7a6fd0";
 
-// Material 3 shape scale, reined in — gently rounded rather than fully round.
+// Material 3 shape scale, shared across both themes.
 const shape = {
-	widget: "8px", // the on-page "I am human" surface
-	card: "12px", // the challenge dialog container
-	header: "8px", // the tonal header "secondary container"
-	button: "8px", // softly rounded action buttons (no longer full pills)
-	tile: "6px", // image grid cells
-	tileSelected: "8px", // image grid cells when selected
+	widget: "16px", // the on-page "I am human" surface
+	card: "28px", // the challenge dialog container
+	header: "18px", // the tonal header "secondary container"
+	button: "100px", // full pill buttons
+	tile: "14px", // image grid cells
+	tileSelected: "16px", // image grid cells when selected
 };
 
 export type Theme = typeof lightTheme | typeof darkTheme;
@@ -114,6 +114,12 @@ export const lightTheme = {
 		logoFill: purple[700],
 	},
 	shape,
+	elevation: {
+		widget: "0 1px 2px rgba(20,8,24,.06), 0 4px 12px rgba(20,8,24,.06)",
+		widgetHover: "0 2px 4px rgba(20,8,24,.10), 0 8px 22px rgba(20,8,24,.12)",
+		card: "0 4px 8px rgba(20,8,24,.08), 0 10px 28px rgba(20,8,24,.12)",
+		buttonPrimary: "0 1px 3px rgba(78,67,159,.5)",
+	},
 	spacing: {
 		unit: DEFAULT_SPACING,
 		half: Math.floor(DEFAULT_SPACING / 2),
@@ -169,6 +175,12 @@ export const darkTheme = {
 		logoFill: "#cfc9e6",
 	},
 	shape,
+	elevation: {
+		widget: "0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.45)",
+		widgetHover: "0 2px 6px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.55)",
+		card: "0 8px 24px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.6)",
+		buttonPrimary: "0 1px 3px rgba(0,0,0,.5)",
+	},
 	spacing: {
 		unit: DEFAULT_SPACING,
 		half: Math.floor(DEFAULT_SPACING / 2),

From eac8a39c2eac88e064cde4326cf277d640495675 Mon Sep 17 00:00:00 2001
From: Hugh Parry <hughglynparry@gmail.com>
Date: Thu, 9 Jul 2026 12:58:07 +0100
Subject: [PATCH 5/5] fix(procaptcha-common): complete URI-encoding of checkbox
 tick color + changeset

Use encodeURIComponent for the SVG data-URI tick color instead of a
single-occurrence String.replace (CodeQL js/incomplete-sanitization).
Add changeset for the improved captcha look across the widget packages.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .changeset/improved-captcha-look.md                       | 8 ++++++++
 .../procaptcha-common/src/reactComponents/Checkbox.tsx    | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/improved-captcha-look.md

diff --git a/.changeset/improved-captcha-look.md b/.changeset/improved-captcha-look.md
new file mode 100644
index 0000000000..3406021169
--- /dev/null
+++ b/.changeset/improved-captcha-look.md
@@ -0,0 +1,8 @@
+---
+"@prosopo/procaptcha-common": patch
+"@prosopo/procaptcha-puzzle": patch
+"@prosopo/procaptcha-react": patch
+"@prosopo/widget-skeleton": patch
+---
+
+Refresh the captcha widget appearance with a Material 3-inspired theme — updated surfaces, elevation, and restyled checkbox, button and puzzle canvas — across the widget-skeleton, procaptcha-common, procaptcha-react and procaptcha-puzzle packages.
diff --git a/packages/procaptcha-common/src/reactComponents/Checkbox.tsx b/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
index 1ffd54f6d1..ae5da736dd 100644
--- a/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
+++ b/packages/procaptcha-common/src/reactComponents/Checkbox.tsx
@@ -126,7 +126,7 @@ export const Checkbox: FC<CheckboxProps> = ({
 	const checkboxStyle: CSSProperties = useMemo(() => {
 		// White (token) tick painted directly onto the box so the checked state is
 		// identical in light and dark mode — the native control can't be themed.
-		const tickColor = theme.palette.checkbox.tick.replace("#", "%23");
+		const tickColor = encodeURIComponent(theme.palette.checkbox.tick);
 		const checkImage = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='${tickColor}' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E")`;
 		return {
 			...baseStyle,