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 7e894c7c75..ae5da736dd 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",
@@ -86,10 +96,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>`
@@ -117,18 +123,33 @@ 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 = 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 {
-			...checkboxStyleBase,
-			borderColor: hover
-				? theme.palette.background.contrastText
-				: theme.palette.border,
-			appearance: checked ? "auto" : "none",
+			...baseStyle,
 			flex: 1,
 			margin: "15px",
 			minWidth: "28px",
 			minHeight: "28px",
+			borderRadius: "8px",
+			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();
@@ -152,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 8aa1e190cb..7a22f6f156 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]}`,
-			borderRadius: "50%",
-			transition: "background-color 0.3s",
-			boxShadow: `0px 1px 3px 0px ${theme.palette.grey[500]}`,
+			// 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,
+			transition: "background-color 0.25s",
 			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 dc0c2397aa..2e020552c1 100644
--- a/packages/procaptcha-puzzle/src/components/ProcaptchaWidget.tsx
+++ b/packages/procaptcha-puzzle/src/components/ProcaptchaWidget.tsx
@@ -230,6 +230,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..a8508ce019 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);
@@ -213,10 +216,17 @@ export const PuzzleCanvas = ({
 		: "Drag the piece to the target";
 
 	const headerBorderColor = showRetry
-		? "rgba(220, 53, 69, 0.4)"
+		? theme.palette.error.main
 		: "transparent";
 
-	const headerTextColor = showRetry ? "#dc3545" : "#333";
+	const headerTextColor = showRetry
+		? theme.palette.error.main
+		: theme.palette.onSurface;
+
+	// 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 puzzle = theme.palette.puzzle;
 
 	return (
 		<div
@@ -250,14 +260,13 @@ 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',
+						fontFamily: theme.font.fontFamily,
 						fontSize: "14px",
 						fontWeight: 500,
 						color: headerTextColor,
@@ -277,9 +286,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 +306,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 ${puzzle.targetBorder}`,
+							backgroundColor: puzzle.targetFill,
 							boxSizing: "border-box",
 						}}
 					/>
@@ -314,16 +322,15 @@ export const PuzzleCanvas = ({
 							width: `${PIECE_SIZE}px`,
 							height: `${PIECE_SIZE}px`,
 							borderRadius: "50%",
-							background:
-								"radial-gradient(circle at 40% 40%, #6ab0ff, #4a90d9)",
+							background: puzzle.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)",
+								? 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 5a6c24362e..155715ba97 100644
--- a/packages/procaptcha-react/src/components/Button.tsx
+++ b/packages/procaptcha-react/src/components/Button.tsx
@@ -41,17 +41,23 @@ 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",
+	// 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",
+	// 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 +71,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..38b2565193 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..6b8b0cd1fe 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,23 +149,26 @@ 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)",
-									visibility: solution.some((s) => s[0] === hash)
-										? "visible"
-										: "hidden",
+									backgroundColor: theme.palette.overlay,
+									borderRadius: theme.shape.tileSelected,
+									visibility: selected ? "visible" : "hidden",
 								}}
 							>
 								<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..cc1612f13f 100644
--- a/packages/widget-skeleton/src/theme.ts
+++ b/packages/widget-skeleton/src/theme.ts
@@ -12,49 +12,121 @@
 // 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. 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"';
+
+// 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, 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],
+			// ~8% on-color state layer over main: the hover fill for tonal controls.
+			hover: "#cdcade",
 		},
 		background: {
-			default: "#fff",
-			contrastText: "#000",
+			default: lightSurface,
+			contrastText: lightOnSurface,
+		},
+		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).
+		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: 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: "#f44336",
+			main: "#b3261e",
 		},
-		logoFill: "#1d1d1b",
-		grey,
+		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),
 	},
 	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: lightOnSurface,
 	},
 };
 
@@ -62,27 +134,59 @@ 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],
+			// ~8% on-color state layer over main: the hover fill for tonal controls.
+			hover: "#38335d",
 		},
 		background: {
-			default: "#303030",
-			contrastText: "#fff",
+			// Dark plum M3 surface rather than neutral grey.
+			default: darkSurface,
+			contrastText: darkOnSurface,
 		},
-		border: grey[300],
+		surface: darkSurface,
+		onSurface: darkOnSurface,
+		titleAccent: purple[200],
+		checkbox: {
+			border: purple[300],
+			fill: darkCheckboxFill,
+			tick: "#ffffff",
+		},
+		tile: {
+			border: "#2c2742",
+		},
+		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: "#f44336",
+			main: "#f2b8b5",
 		},
-		logoFill: "#fff",
-		grey,
+		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),
 	},
 	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: darkOnSurface,
 	},
 };