diff --git a/packages/shared/src/components/fields/Checkbox.module.css b/packages/shared/src/components/fields/Checkbox.module.css
index 8676d8c232b..0ff2d8ce19c 100644
--- a/packages/shared/src/components/fields/Checkbox.module.css
+++ b/packages/shared/src/components/fields/Checkbox.module.css
@@ -1,4 +1,25 @@
+/*
+ * Checkbox — daily.dev design system.
+ * Aligned with the redesigned Toggle/Switch and Button system so fields,
+ * buttons, toggles, checkboxes and radios read as one family:
+ *  - a single semantic brand fill when selected (accent-cabbage-default) with a
+ *    solid white glyph, identical in light & dark (no per-theme overrides);
+ *  - a soft surface-hover halo behind the box on hover;
+ *  - a surface-focus (blueCheese) keyboard ring on :focus-visible;
+ *  - a subtle press squeeze for tactile feedback (à la the Switch knob);
+ *  - a tri-state "indeterminate" dash (aria-checked="mixed").
+ * Motion is disabled under prefers-reduced-motion (see bottom).
+ */
+
 .checkmark {
+  background: transparent;
+  /* Resting outline matches the label tone (text-secondary); hover/focus lift
+   * it to text-primary, mirroring the field's resting→focus border. */
+  border-color: var(--theme-text-secondary);
+  transition: background-color 0.12s linear, border-color 0.12s linear,
+    box-shadow 0.12s linear, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Soft surface halo behind the box; the offset trick centers a 2rem square. */
   &:before {
     content: '';
     position: absolute;
@@ -10,94 +31,113 @@
     height: 2rem;
     margin: auto;
     border-radius: 0.625rem;
+    background: var(--theme-surface-hover);
     opacity: 0;
-    transition: background-color 0.1s linear, opacity 0.1s linear;
+    transition: background-color 0.12s linear, opacity 0.12s linear;
     pointer-events: none;
     z-index: -1;
   }
 }
 
+/* The check glyph stays solid white in every theme/state for contrast. */
+.checkmark :global(.icon) {
+  color: theme('colors.raw.salt.0');
+  transition: opacity 0.12s linear;
+}
+
+/* Indeterminate dash — a centered white bar, shown for the "mixed" state. */
+.dash {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 0.625rem;
+  height: 0.125rem;
+  border-radius: 9999px;
+  background: theme('colors.raw.salt.0');
+  opacity: 0;
+  transition: opacity 0.12s linear;
+  pointer-events: none;
+}
+
 .label {
-  &:global(.disabled), &:global(.checked.disabled) {
+  &:global(.disabled),
+  &:global(.checked.disabled),
+  &:global(.indeterminate.disabled) {
     color: var(--theme-text-disabled);
   }
 
-  &:global(.checked) {
+  /* Selected (checked or indeterminate) lifts the label to primary. */
+  &:global(.checked),
+  &:global(.indeterminate) {
     color: var(--theme-text-primary);
-
-    & .checkmark {
-      & :global(.icon) {
-        opacity: 1;
-      }
-    }
   }
 
-  /* &:hover, */
-  &:hover:not(:global(.disabled)),
-  &:focus-within:not(:global(.disabled)) {
-    & .checkmark {
-      border-color: var(--theme-text-primary);
-
-      &:before {
-        background: var(--theme-surface-hover);
-        opacity: 1;
-      }
-    }
+  /* Show the check only when checked and NOT indeterminate. */
+  &:global(.checked):not(:global(.indeterminate)) .checkmark :global(.icon) {
+    opacity: 1;
   }
 
-  &:active {
-    & .checkmark:before {
-      background: var(--theme-active);
-    }
+  /* Show the dash for the indeterminate state. */
+  &:global(.indeterminate) .checkmark .dash {
+    opacity: 1;
   }
 
-  &:global(.checked) {
-    & .checkmark {
-      background: theme('colors.raw.cabbage.40');
-      border-color: transparent;
-    }
+  /* Hover / keyboard focus lift the border and reveal the halo. */
+  &:hover:not(:global(.disabled)) .checkmark,
+  & input:focus-visible ~ .checkmark {
+    border-color: var(--theme-text-primary);
 
-    &:global(.disabled) {
-      & .checkmark {
-        background: var(--theme-text-disabled);
-      }
+    &:before {
+      opacity: 1;
     }
+  }
 
-    &:hover:not(:global(.disabled)),
-    &:focus-within:not(:global(.disabled)) {
-      & .checkmark {
-        background: theme('colors.raw.cabbage.20');
+  /* Keyboard focus — an even blue ring (matches Switch / fields v2). */
+  & input:focus-visible ~ .checkmark {
+    box-shadow: 0 0 0 2px var(--theme-surface-focus);
+  }
 
-        &:before {
-          background: theme('colors.overlay.quaternary.cabbage');
-        }
-      }
-    }
+  /* Press — a subtle squeeze for tactile feedback. */
+  &:active:not(:global(.disabled)) .checkmark {
+    transform: scale(0.9);
+  }
 
-    &:active {
-      & .checkmark:before {
-        background: theme('colors.overlay.tertiary.cabbage');
-      }
-    }
+  /* Selected — solid brand fill, identical in light & dark. */
+  &:global(.checked) .checkmark,
+  &:global(.indeterminate) .checkmark {
+    background: var(--theme-accent-cabbage-default);
+    border-color: transparent;
   }
-}
 
-:global(.light) .label:global(.checked) .checkmark {
-  background: theme('colors.raw.cabbage.60');
-}
+  &:global(.checked):hover:not(:global(.disabled)) .checkmark:before,
+  &:global(.indeterminate):hover:not(:global(.disabled)) .checkmark:before,
+  &:global(.checked) input:focus-visible ~ .checkmark:before,
+  &:global(.indeterminate) input:focus-visible ~ .checkmark:before {
+    background: theme('colors.overlay.quaternary.cabbage');
+  }
 
-:global(.light) .label:global(.checked):hover .checkmark,
-:global(.light) .label:global(.checked):focus-within .checkmark {
-  background: theme('colors.raw.cabbage.80');
+  /* Disabled — muted surface, no brand. */
+  &:global(.disabled) .checkmark {
+    border-color: var(--theme-surface-disabled);
+  }
+
+  &:global(.checked.disabled) .checkmark,
+  &:global(.indeterminate.disabled) .checkmark {
+    background: var(--theme-surface-disabled);
+  }
 }
 
-@media (prefers-color-scheme: light) {
-  :global(.auto) .label:global(.checked) .checkmark {
-    background: theme('colors.raw.cabbage.60');
+/* Respect users who prefer reduced motion: keep the state changes, drop the
+ * movement (press squeeze) and instant-swap the glyph/halo transitions. */
+@media (prefers-reduced-motion: reduce) {
+  .checkmark,
+  .checkmark:before,
+  .dash,
+  .checkmark :global(.icon) {
+    transition: none;
   }
 
-  :global(.auto) .label:global(.checked):hover .checkmark,
-  :global(.auto) .label:global(.checked):focus-within .checkmark {
-    background: theme('colors.raw.cabbage.80');
+  .label:active:not(:global(.disabled)) .checkmark {
+    transform: none;
   }
 }
diff --git a/packages/shared/src/components/fields/Checkbox.spec.tsx b/packages/shared/src/components/fields/Checkbox.spec.tsx
index 0dce1a08d13..6fcf1f4579a 100644
--- a/packages/shared/src/components/fields/Checkbox.spec.tsx
+++ b/packages/shared/src/components/fields/Checkbox.spec.tsx
@@ -35,3 +35,15 @@ it('should add checked class', async () => {
   // eslint-disable-next-line testing-library/no-node-access
   await waitFor(() => expect(el.parentElement).toHaveClass('checked'));
 });
+
+it('should drive the native indeterminate property and aria-checked="mixed"', async () => {
+  renderComponent({ indeterminate: true });
+  const el = (await screen.findByTestId('checkbox-input')) as HTMLInputElement;
+  await waitFor(() => expect(el.indeterminate).toBe(true));
+  // eslint-disable-next-line testing-library/no-node-access
+  expect(el.parentElement).toHaveClass('indeterminate');
+  // The decorative checkmark box mirrors the mixed state for assistive tech.
+  // eslint-disable-next-line testing-library/no-node-access
+  const box = el.parentElement?.querySelector('[role="checkbox"]');
+  expect(box).toHaveAttribute('aria-checked', 'mixed');
+});
diff --git a/packages/shared/src/components/fields/Checkbox.tsx b/packages/shared/src/components/fields/Checkbox.tsx
index 947cae7f16a..93bebc910a1 100644
--- a/packages/shared/src/components/fields/Checkbox.tsx
+++ b/packages/shared/src/components/fields/Checkbox.tsx
@@ -1,11 +1,18 @@
 import type {
   ChangeEvent,
-  LegacyRef,
+  ForwardedRef,
   ReactElement,
   ReactNode,
   InputHTMLAttributes,
 } from 'react';
-import React, { forwardRef, useEffect, useState, useId } from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useId,
+} from 'react';
 import classNames from 'classnames';
 import { VIcon } from '../icons';
 import styles from './Checkbox.module.css';
@@ -13,6 +20,11 @@ import styles from './Checkbox.module.css';
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
   name: string;
   checked?: boolean;
+  /**
+   * Tri-state "mixed" checkbox (e.g. a parent of partially-selected children).
+   * Renders a dash instead of the check and exposes `aria-checked="mixed"`.
+   */
+  indeterminate?: boolean;
   id?: string;
   children?: ReactNode;
   className?: string;
@@ -24,6 +36,7 @@ export const Checkbox = forwardRef(function Checkbox(
   {
     name,
     checked,
+    indeterminate = false,
     children,
     className,
     checkmarkClassName,
@@ -33,16 +46,46 @@ export const Checkbox = forwardRef(function Checkbox(
     defaultChecked,
     ...props
   }: CheckboxProps,
-  ref: LegacyRef<HTMLInputElement>,
+  ref: ForwardedRef<HTMLInputElement>,
 ): ReactElement {
   const [actualChecked, setActualChecked] = useState(checked ?? defaultChecked);
   const checkId = useId();
   const inputId = id.concat(checkId);
+  const innerRef = useRef<HTMLInputElement | null>(null);
+
+  // Merge the forwarded ref with our own and drive the native `indeterminate`
+  // property here (it has no HTML attribute, and setting it from the ref
+  // callback applies it at commit time whenever the node attaches or
+  // `indeterminate` changes — more reliable than a post-paint effect).
+  const setRefs = useCallback(
+    (node: HTMLInputElement | null) => {
+      innerRef.current = node;
+      if (node) {
+        // eslint-disable-next-line no-param-reassign
+        node.indeterminate = indeterminate;
+      }
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        // eslint-disable-next-line no-param-reassign
+        ref.current = node;
+      }
+    },
+    [ref, indeterminate],
+  );
 
   useEffect(() => {
     setActualChecked(checked ?? defaultChecked);
   }, [checked, defaultChecked]);
 
+  // Keep the native property in sync across re-renders that don't re-attach the
+  // ref (e.g. when the checked state changes via user interaction).
+  useEffect(() => {
+    if (innerRef.current) {
+      innerRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate, actualChecked]);
+
   const onChange = (event: ChangeEvent<HTMLInputElement>): void => {
     setActualChecked(event.target.checked);
     onToggleCallback?.(event.target.checked);
@@ -51,11 +94,11 @@ export const Checkbox = forwardRef(function Checkbox(
   return (
     <label
       className={classNames(
-        'relative z-1 inline-flex select-none items-center p-1 pr-3 text-text-tertiary typo-footnote',
+        'relative z-1 inline-flex select-none items-center p-1 pr-3 font-medium text-text-secondary antialiased typo-footnote',
         !disabled && 'cursor-pointer',
         styles.label,
         className,
-        { checked: actualChecked, disabled },
+        { checked: actualChecked, indeterminate, disabled },
       )}
       style={{ transition: 'color 0.1s linear' }}
       htmlFor={inputId}
@@ -70,15 +113,15 @@ export const Checkbox = forwardRef(function Checkbox(
         id={inputId}
         name={name}
         onChange={onChange}
-        ref={ref}
         type="checkbox"
         {...props}
+        ref={setRefs}
       />
       <div
-        aria-checked={checked}
+        aria-checked={indeterminate ? 'mixed' : actualChecked}
         aria-labelledby={`label-${checkId}`}
         className={classNames(
-          'relative z-1 mr-3 flex h-5 w-5 items-center justify-center rounded-6 border-2 border-border-subtlest-primary',
+          'relative z-1 mr-3 flex h-5 w-5 items-center justify-center rounded-6 border-2',
           styles.checkmark,
           checkmarkClassName,
         )}
@@ -86,10 +129,11 @@ export const Checkbox = forwardRef(function Checkbox(
       >
         <VIcon
           aria-hidden
-          className="icon h-full w-full text-text-primary opacity-0"
+          secondary
+          className={classNames('icon h-full w-full scale-110 opacity-0')}
           role="presentation"
-          style={{ transition: 'opacity 0.1s linear' }}
         />
+        <span aria-hidden className={styles.dash} />
       </div>
       <span className="min-w-0 flex-1" id={`label-span-${checkId}`}>
         {children}
diff --git a/packages/shared/src/components/fields/RadioItem.module.css b/packages/shared/src/components/fields/RadioItem.module.css
index d9eae1c7c2a..5f9371ebf29 100644
--- a/packages/shared/src/components/fields/RadioItem.module.css
+++ b/packages/shared/src/components/fields/RadioItem.module.css
@@ -1,14 +1,57 @@
-.item {
-  &.checked {
-    @apply text-text-primary;
+/*
+ * Radio — daily.dev design system.
+ * Same family as the redesigned Toggle/Switch, Checkbox and Button system:
+ *  - resting outline = label tone (text-secondary); lifts to text-primary on
+ *    hover/focus (mirrors the field border behaviour);
+ *  - selected = a solid brand disc (accent-cabbage-default) with a white center
+ *    dot, identical in light & dark (no per-theme overrides);
+ *  - hover/focus halo: surface-hover when unselected, brand cabbage tint when
+ *    selected (matching the checkbox), never grey-on-brand;
+ *  - a surface-focus (blueCheese) keyboard ring on :focus-visible;
+ *  - the legacy "fattening" ring (2px → 4px) plus a subtle press squeeze.
+ * Motion is disabled under prefers-reduced-motion (see bottom).
+ */
 
-    & .innerRing {
-      @apply border-4 border-raw-cabbage-40 bg-raw-cabbage-80;
-    }
+.checkmark {
+  transition: background-color 0.12s linear;
+}
+
+.innerRing {
+  position: relative;
+  border-color: var(--theme-text-secondary);
+  transition: background-color 0.12s linear, border-color 0.12s linear,
+    border-width 0.12s linear, box-shadow 0.12s linear,
+    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* White center dot — scales in when selected. */
+  &:after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background: theme('colors.raw.salt.0');
+    transform: scale(0);
+    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}
+
+.item.checked .innerRing {
+  @apply border-accent-cabbage-default bg-accent-cabbage-default;
+
+  &:after {
+    transform: scale(1);
   }
 }
 
-.item:hover .checkmark, input:focus-visible ~ .checkmark {
+/*
+ * Hover / keyboard focus reveal the halo and thicken the ring to text-primary
+ * (the well-liked legacy "fattening" hover affordance).
+ */
+.item:hover .checkmark,
+.item input:focus-visible ~ .checkmark {
   @apply bg-surface-hover;
 
   & .innerRing {
@@ -16,40 +59,40 @@
   }
 }
 
-.item.checked:hover .checkmark, .checked input:focus-visible ~ .checkmark {
-  background: theme('colors.raw.cabbage.50')3D;
+/*
+ * Selected hover/focus stays on-brand: cabbage-tinted halo (matching the
+ * checkbox) instead of grey, and the ring keeps its brand colour.
+ */
+.item.checked:hover .checkmark,
+.item.checked input:focus-visible ~ .checkmark {
+  background-color: theme('colors.overlay.quaternary.cabbage');
+}
 
-  & .innerRing {
-    @apply border-raw-cabbage-20;
-  }
+.item.checked:hover .checkmark .innerRing,
+.item.checked input:focus-visible ~ .checkmark .innerRing {
+  @apply border-accent-cabbage-default;
 }
 
-:global(.light) {
-  & .item.checked {
-    & .innerRing {
-      @apply border-raw-cabbage-60 bg-raw-cabbage-20;
-    }
-  }
+/* Keyboard focus — an even blue ring (matches Switch / fields / buttons). */
+.item input:focus-visible ~ .checkmark .innerRing {
+  box-shadow: 0 0 0 2px var(--theme-surface-focus);
+}
 
-  & .item.checked:hover .checkmark, & .checked input:focus-visible ~ .checkmark {
-    & .innerRing {
-      @apply border-raw-cabbage-80;
-    }
-  }
+/* Press — a subtle squeeze for tactile feedback. */
+.item:active .innerRing {
+  transform: scale(0.9);
 }
 
-@media (prefers-color-scheme: light) {
-  :global(.auto) {
-    & .item.checked {
-      & .innerRing {
-        @apply border-raw-cabbage-60 bg-raw-cabbage-20;
-      }
-    }
+/* Respect users who prefer reduced motion: keep the state changes, drop the
+ * movement (press squeeze, dot scale-in, ring fatten) and instant-swap. */
+@media (prefers-reduced-motion: reduce) {
+  .checkmark,
+  .innerRing,
+  .innerRing:after {
+    transition: none;
+  }
 
-    & .item.checked:hover .checkmark, & .checked input:focus-visible ~ .checkmark {
-      & .innerRing {
-        @apply border-raw-cabbage-80;
-      }
-    }
+  .item:active .innerRing {
+    transform: none;
   }
 }
diff --git a/packages/shared/src/components/fields/RadioItem.tsx b/packages/shared/src/components/fields/RadioItem.tsx
index 1502677dbf0..4ca71bdffa9 100644
--- a/packages/shared/src/components/fields/RadioItem.tsx
+++ b/packages/shared/src/components/fields/RadioItem.tsx
@@ -46,8 +46,8 @@ export function RadioItem<T extends string>({
           { [styles.checked]: checked },
           disabled
             ? '!text-text-disabled'
-            : 'pointer cursor-pointer text-text-tertiary focus-within:text-text-primary hover:text-text-primary',
-          'relative flex select-none items-center pr-3 font-bold typo-footnote',
+            : 'pointer cursor-pointer text-text-secondary focus-within:text-text-primary hover:text-text-primary',
+          'relative flex select-none items-center pr-3 font-medium antialiased typo-footnote',
           reverse ? 'flex-row-reverse' : 'flex-row',
           className?.content,
         )}
@@ -69,7 +69,7 @@ export function RadioItem<T extends string>({
         >
           <span
             className={classNames(
-              'flex h-full w-full rounded-full border-2 ',
+              'flex h-full w-full rounded-full border-2',
               disabled && '!border-surface-disabled !bg-surface-disabled',
               styles.innerRing,
             )}
diff --git a/packages/webapp/components/devCheckboxRadio/LegacyCheckbox.module.css b/packages/webapp/components/devCheckboxRadio/LegacyCheckbox.module.css
new file mode 100644
index 00000000000..b2ce4a3db5d
--- /dev/null
+++ b/packages/webapp/components/devCheckboxRadio/LegacyCheckbox.module.css
@@ -0,0 +1,106 @@
+/* Frozen snapshot of the PREVIOUS Checkbox design, used only by the
+ * /dev/checkbox-radio review page for the before/after comparison.
+ * Do not use in production code. */
+
+.checkmark {
+  &:before {
+    content: '';
+    position: absolute;
+    left: -9999px;
+    top: -9999px;
+    right: -9999px;
+    bottom: -9999px;
+    width: 2rem;
+    height: 2rem;
+    margin: auto;
+    border-radius: 0.625rem;
+    opacity: 0;
+    transition: background-color 0.1s linear, opacity 0.1s linear;
+    pointer-events: none;
+    z-index: -1;
+  }
+}
+
+.label {
+  &:global(.disabled), &:global(.checked.disabled) {
+    color: var(--theme-text-disabled);
+  }
+
+  &:global(.checked) {
+    color: var(--theme-text-primary);
+
+    & .checkmark {
+      & :global(.icon) {
+        opacity: 1;
+      }
+    }
+  }
+
+  &:hover:not(:global(.disabled)),
+  &:focus-within:not(:global(.disabled)) {
+    & .checkmark {
+      border-color: var(--theme-text-primary);
+
+      &:before {
+        background: var(--theme-surface-hover);
+        opacity: 1;
+      }
+    }
+  }
+
+  &:active {
+    & .checkmark:before {
+      background: var(--theme-active);
+    }
+  }
+
+  &:global(.checked) {
+    & .checkmark {
+      background: theme('colors.raw.cabbage.40');
+      border-color: transparent;
+    }
+
+    &:global(.disabled) {
+      & .checkmark {
+        background: var(--theme-text-disabled);
+      }
+    }
+
+    &:hover:not(:global(.disabled)),
+    &:focus-within:not(:global(.disabled)) {
+      & .checkmark {
+        background: theme('colors.raw.cabbage.20');
+
+        &:before {
+          background: theme('colors.overlay.quaternary.cabbage');
+        }
+      }
+    }
+
+    &:active {
+      & .checkmark:before {
+        background: theme('colors.overlay.tertiary.cabbage');
+      }
+    }
+  }
+}
+
+:global(.light) .label:global(.checked) .checkmark {
+  background: theme('colors.raw.cabbage.60');
+}
+
+:global(.light) .label:global(.checked):hover .checkmark,
+:global(.light) .label:global(.checked):focus-within .checkmark {
+  background: theme('colors.raw.cabbage.80');
+}
+
+@media (prefers-color-scheme: light) {
+  :global(.auto) .label:global(.checked) .checkmark {
+    background: theme('colors.raw.cabbage.60');
+  }
+
+  :global(.auto) .label:global(.checked):hover .checkmark,
+  :global(.auto) .label:global(.checked):focus-within .checkmark {
+    background: theme('colors.raw.cabbage.80');
+  }
+}
diff --git a/packages/webapp/components/devCheckboxRadio/LegacyCheckbox.tsx b/packages/webapp/components/devCheckboxRadio/LegacyCheckbox.tsx
new file mode 100644
index 00000000000..03da66d15f9
--- /dev/null
+++ b/packages/webapp/components/devCheckboxRadio/LegacyCheckbox.tsx
@@ -0,0 +1,102 @@
+import type {
+  ChangeEvent,
+  LegacyRef,
+  ReactElement,
+  ReactNode,
+  InputHTMLAttributes,
+} from 'react';
+import React, { forwardRef, useEffect, useState, useId } from 'react';
+import classNames from 'classnames';
+import { VIcon } from '@dailydotdev/shared/src/components/icons';
+import styles from './LegacyCheckbox.module.css';
+
+// Frozen snapshot of the previous Checkbox design, used only by the
+// /dev/checkbox-radio review page. Do not use in production code.
+export interface LegacyCheckboxProps
+  extends InputHTMLAttributes<HTMLInputElement> {
+  name: string;
+  checked?: boolean;
+  id?: string;
+  children?: ReactNode;
+  className?: string;
+  checkmarkClassName?: string;
+  onToggleCallback?: (checked: boolean) => unknown;
+}
+
+export const LegacyCheckbox = forwardRef(function LegacyCheckbox(
+  {
+    name,
+    checked,
+    children,
+    className,
+    checkmarkClassName,
+    onToggleCallback,
+    id = '',
+    disabled,
+    defaultChecked,
+    ...props
+  }: LegacyCheckboxProps,
+  ref: LegacyRef<HTMLInputElement>,
+): ReactElement {
+  const [actualChecked, setActualChecked] = useState(checked ?? defaultChecked);
+  const checkId = useId();
+  const inputId = id.concat(checkId);
+
+  useEffect(() => {
+    setActualChecked(checked ?? defaultChecked);
+  }, [checked, defaultChecked]);
+
+  const onChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    setActualChecked(event.target.checked);
+    onToggleCallback?.(event.target.checked);
+  };
+
+  return (
+    <label
+      className={classNames(
+        'relative z-1 inline-flex select-none items-center p-1 pr-3 text-text-tertiary typo-footnote',
+        !disabled && 'cursor-pointer',
+        styles.label,
+        className,
+        { checked: actualChecked, disabled },
+      )}
+      style={{ transition: 'color 0.1s linear' }}
+      htmlFor={inputId}
+    >
+      <input
+        aria-labelledby={`label-span-${checkId}`}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        className="absolute h-0 w-0 opacity-0"
+        data-testid="checkbox-input"
+        disabled={disabled}
+        id={inputId}
+        name={name}
+        onChange={onChange}
+        ref={ref}
+        type="checkbox"
+        {...props}
+      />
+      <div
+        aria-checked={checked}
+        aria-labelledby={`label-${checkId}`}
+        className={classNames(
+          'relative z-1 mr-3 flex h-5 w-5 items-center justify-center rounded-6 border-2 border-border-subtlest-primary',
+          styles.checkmark,
+          checkmarkClassName,
+        )}
+        role="checkbox"
+      >
+        <VIcon
+          aria-hidden
+          className="icon h-full w-full text-text-primary opacity-0"
+          role="presentation"
+          style={{ transition: 'opacity 0.1s linear' }}
+        />
+      </div>
+      <span className="min-w-0 flex-1" id={`label-span-${checkId}`}>
+        {children}
+      </span>
+    </label>
+  );
+});
diff --git a/packages/webapp/components/devCheckboxRadio/LegacyRadio.tsx b/packages/webapp/components/devCheckboxRadio/LegacyRadio.tsx
new file mode 100644
index 00000000000..226d01e2478
--- /dev/null
+++ b/packages/webapp/components/devCheckboxRadio/LegacyRadio.tsx
@@ -0,0 +1,152 @@
+import type { InputHTMLAttributes, ReactElement, ReactNode } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import ConditionalWrapper from '@dailydotdev/shared/src/components/ConditionalWrapper';
+import styles from './LegacyRadioItem.module.css';
+
+// Frozen snapshot of the previous Radio design, used only by the
+// /dev/checkbox-radio review page. Do not use in production code.
+
+interface ItemClassName {
+  wrapper?: string;
+  content?: string;
+}
+
+export interface LegacyRadioItemProps<T extends string = string>
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className'> {
+  value?: T;
+  label?: ReactNode;
+  className?: ItemClassName;
+  afterElement?: ReactNode;
+  reverse?: boolean;
+}
+
+function LegacyRadioItem<T extends string>({
+  children,
+  className = {},
+  checked,
+  disabled,
+  afterElement,
+  reverse,
+  ...props
+}: LegacyRadioItemProps<T>): ReactElement {
+  const { id } = props;
+  return (
+    <ConditionalWrapper
+      condition={!!className?.wrapper}
+      wrapper={(component) => (
+        <div className={classNames('flex flex-col', className?.wrapper)}>
+          {component}
+        </div>
+      )}
+    >
+      <label
+        className={classNames(
+          styles.item,
+          { [styles.checked]: checked },
+          disabled
+            ? '!text-text-disabled'
+            : 'pointer cursor-pointer text-text-tertiary focus-within:text-text-primary hover:text-text-primary',
+          'relative flex select-none items-center pr-3 font-bold typo-footnote',
+          reverse ? 'flex-row-reverse' : 'flex-row',
+          className?.content,
+        )}
+        htmlFor={id}
+      >
+        <input
+          type="radio"
+          className="absolute h-0 w-0 opacity-0"
+          checked={checked}
+          disabled={disabled}
+          {...props}
+        />
+        <span
+          className={classNames(
+            'h-8 w-8 rounded-10 p-1.5',
+            reverse ? 'ml-1.5' : 'mr-1.5',
+            !disabled && styles.checkmark,
+          )}
+        >
+          <span
+            className={classNames(
+              'flex h-full w-full rounded-full border-2 ',
+              disabled && '!border-surface-disabled !bg-surface-disabled',
+              styles.innerRing,
+            )}
+          />
+        </span>
+        {children}
+      </label>
+      {afterElement}
+    </ConditionalWrapper>
+  );
+}
+
+export interface LegacyClassName {
+  container?: string;
+  content?: string;
+  label?: string;
+}
+
+export interface LegacyRadioProps<T extends string = string> {
+  name: string;
+  options: LegacyRadioItemProps<T>[];
+  value?: T;
+  onChange: (value: T) => unknown;
+  className?: LegacyClassName;
+  disabled?: boolean;
+  reverse?: boolean;
+  valid?: boolean;
+}
+
+export function LegacyRadio<T extends string = string>({
+  name,
+  options,
+  value,
+  onChange,
+  className = {},
+  disabled,
+  reverse,
+  valid,
+}: LegacyRadioProps<T>): ReactElement {
+  return (
+    <div
+      className={classNames(
+        'flex flex-col items-start gap-1',
+        className.container,
+      )}
+    >
+      {options.map((option) => (
+        <LegacyRadioItem
+          {...option}
+          key={option.value}
+          name={name}
+          id={`${name}-${option.id || option.value}`}
+          value={option.value}
+          disabled={option.disabled || disabled}
+          checked={value === option.value}
+          onChange={() => option.value !== undefined && onChange(option.value)}
+          className={{
+            content: classNames(
+              'truncate',
+              className.content,
+              option?.className?.content,
+            ),
+            wrapper: option.className?.wrapper,
+          }}
+          afterElement={option.afterElement}
+          reverse={reverse}
+        >
+          <span
+            className={classNames(
+              className.label,
+              valid === false && 'text-status-error',
+            )}
+          >
+            {option.label}
+          </span>
+        </LegacyRadioItem>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/webapp/components/devCheckboxRadio/LegacyRadioItem.module.css b/packages/webapp/components/devCheckboxRadio/LegacyRadioItem.module.css
new file mode 100644
index 00000000000..14e15a245d2
--- /dev/null
+++ b/packages/webapp/components/devCheckboxRadio/LegacyRadioItem.module.css
@@ -0,0 +1,59 @@
+/* Frozen snapshot of the PREVIOUS Radio design, used only by the
+ * /dev/checkbox-radio review page for the before/after comparison.
+ * Do not use in production code. */
+
+.item {
+  &.checked {
+    @apply text-text-primary;
+
+    & .innerRing {
+      @apply border-4 border-raw-cabbage-40 bg-raw-cabbage-80;
+    }
+  }
+}
+
+.item:hover .checkmark, input:focus-visible ~ .checkmark {
+  @apply bg-surface-hover;
+
+  & .innerRing {
+    @apply border-4 border-text-primary;
+  }
+}
+
+.item.checked:hover .checkmark, .checked input:focus-visible ~ .checkmark {
+  background: theme('colors.raw.cabbage.50')3D;
+
+  & .innerRing {
+    @apply border-raw-cabbage-20;
+  }
+}
+
+:global(.light) {
+  & .item.checked {
+    & .innerRing {
+      @apply border-raw-cabbage-60 bg-raw-cabbage-20;
+    }
+  }
+
+  & .item.checked:hover .checkmark, & .checked input:focus-visible ~ .checkmark {
+    & .innerRing {
+      @apply border-raw-cabbage-80;
+    }
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :global(.auto) {
+    & .item.checked {
+      & .innerRing {
+        @apply border-raw-cabbage-60 bg-raw-cabbage-20;
+      }
+    }
+
+    & .item.checked:hover .checkmark, & .checked input:focus-visible ~ .checkmark {
+      & .innerRing {
+        @apply border-raw-cabbage-80;
+      }
+    }
+  }
+}
diff --git a/packages/webapp/pages/dev/checkbox-radio.tsx b/packages/webapp/pages/dev/checkbox-radio.tsx
new file mode 100644
index 00000000000..5b415149f4e
--- /dev/null
+++ b/packages/webapp/pages/dev/checkbox-radio.tsx
@@ -0,0 +1,533 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useEffect, useId, useState } from 'react';
+import { NextSeo } from 'next-seo';
+import { Checkbox } from '@dailydotdev/shared/src/components/fields/Checkbox';
+import { Radio } from '@dailydotdev/shared/src/components/fields/Radio';
+import { LegacyCheckbox } from '../../components/devCheckboxRadio/LegacyCheckbox';
+import { LegacyRadio } from '../../components/devCheckboxRadio/LegacyRadio';
+
+/**
+ * /dev/checkbox-radio — internal review surface for the Checkbox + Radio
+ * redesign that aligns them with the Toggle/Switch and Button system.
+ *
+ * Side-by-side PREVIOUS vs NEW across every state and variant, in light and
+ * dark. Hover / focus / press are live — interact with any control to see
+ * those states. Carries `noindex`/`nofollow`; reachable on preview + local
+ * but blocked on the canonical production host.
+ */
+
+// --- Theme + gating --------------------------------------------------------
+
+const useTheme = (initial: 'dark' | 'light') => {
+  const [theme, setTheme] = useState<'dark' | 'light'>(initial);
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    const root = document.documentElement;
+    if (theme === 'light') {
+      root.classList.add('light');
+    } else {
+      root.classList.remove('light');
+    }
+  }, [theme]);
+  return [theme, setTheme] as const;
+};
+
+const useReviewAllowed = (): boolean => {
+  const [allowed, setAllowed] = useState(true);
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const { hostname } = window.location;
+    // Block the canonical production hosts only; allow localhost and the
+    // *.preview.app.daily.dev preview deployments so reviewers can open it.
+    setAllowed(hostname !== 'app.daily.dev' && hostname !== 'www.daily.dev');
+  }, []);
+  return allowed;
+};
+
+// --- Interactive wrappers (own their state so states are live) -------------
+
+const InteractiveCheckbox = ({
+  variant,
+  checked: initial,
+  indeterminate,
+  ...props
+}: {
+  variant: 'previous' | 'new';
+  checked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  children?: ReactNode;
+  className?: string;
+  checkmarkClassName?: string;
+  'aria-label'?: string;
+}) => {
+  const id = useId();
+  const [checked, setChecked] = useState(Boolean(initial));
+
+  // `indeterminate` only exists on the new checkbox, so branch rather than
+  // forwarding it into the legacy snapshot.
+  if (variant === 'previous') {
+    return (
+      <LegacyCheckbox
+        {...props}
+        name={id}
+        checked={checked}
+        onToggleCallback={(next) => setChecked(next)}
+      />
+    );
+  }
+
+  return (
+    <Checkbox
+      {...props}
+      name={id}
+      checked={checked}
+      indeterminate={indeterminate}
+      onToggleCallback={(next) => setChecked(next)}
+    />
+  );
+};
+
+const RADIO_OPTIONS = [
+  { label: 'Daily digest', value: 'digest' },
+  { label: 'Weekly summary', value: 'weekly' },
+  { label: 'Off', value: 'off' },
+];
+
+const InteractiveRadio = ({
+  variant,
+  initial = 'digest',
+  disabled,
+  reverse,
+  valid,
+  options = RADIO_OPTIONS,
+  container,
+}: {
+  variant: 'previous' | 'new';
+  initial?: string;
+  disabled?: boolean;
+  reverse?: boolean;
+  valid?: boolean;
+  options?: { label: string; value: string; afterElement?: ReactNode }[];
+  container?: string;
+}) => {
+  const name = useId();
+  const [value, setValue] = useState(initial);
+  const Component = variant === 'previous' ? LegacyRadio : Radio;
+  return (
+    <Component
+      name={name}
+      options={options}
+      value={value}
+      onChange={setValue}
+      disabled={disabled}
+      reverse={reverse}
+      valid={valid}
+      className={{ container }}
+    />
+  );
+};
+
+// --- Layout primitives -----------------------------------------------------
+
+const Section = ({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}) => (
+  <section className="mb-12">
+    <header className="mb-4 border-b border-border-subtlest-tertiary pb-2">
+      <h2 className="font-bold text-text-primary typo-title2">{title}</h2>
+      {description ? (
+        <p className="mt-1 max-w-3xl text-text-secondary typo-callout">
+          {description}
+        </p>
+      ) : null}
+    </header>
+    {children}
+  </section>
+);
+
+const tableGrid = { gridTemplateColumns: '240px 1fr 1fr' } as const;
+
+const TableHeader = () => (
+  <div className="grid items-center gap-4 px-4 pb-2" style={tableGrid}>
+    <span className="uppercase tracking-wide text-text-tertiary typo-caption1">
+      State / variant
+    </span>
+    <span className="font-bold uppercase tracking-wide text-text-tertiary typo-footnote">
+      Previous
+    </span>
+    <span className="font-bold uppercase tracking-wide text-accent-cabbage-default typo-footnote">
+      New design
+    </span>
+  </div>
+);
+
+const TableRow = ({
+  title,
+  caption,
+  previous,
+  next,
+  align = 'center',
+}: {
+  title: string;
+  caption?: string;
+  previous: ReactNode;
+  next: ReactNode;
+  align?: 'center' | 'start';
+}) => (
+  <div
+    className="grid gap-4 rounded-12 border border-border-subtlest-tertiary p-4 odd:bg-surface-float"
+    style={{
+      ...tableGrid,
+      alignItems: align === 'center' ? 'center' : 'start',
+    }}
+  >
+    <div className="flex flex-col gap-0.5">
+      <span className="font-bold text-text-primary typo-callout">{title}</span>
+      {caption ? (
+        <span className="text-text-tertiary typo-caption1">{caption}</span>
+      ) : null}
+    </div>
+    <div className="flex border-r border-border-subtlest-tertiary pr-4">
+      {previous}
+    </div>
+    <div className="flex">{next}</div>
+  </div>
+);
+
+const Table = ({ children }: { children: ReactNode }) => (
+  <div className="flex flex-col gap-2">
+    <TableHeader />
+    {children}
+  </div>
+);
+
+// --- Page ------------------------------------------------------------------
+
+const CheckboxRadioDevPage = (): ReactElement => {
+  const [theme, setTheme] = useTheme('dark');
+  const allowed = useReviewAllowed();
+
+  if (!allowed) {
+    return (
+      <>
+        <NextSeo nofollow noindex title="Checkbox & Radio review · daily.dev" />
+        <div className="flex min-h-screen items-center justify-center bg-background-default p-12">
+          <p className="text-text-secondary typo-callout">
+            This review page is only available on preview and local builds.
+          </p>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <NextSeo nofollow noindex title="Checkbox & Radio review · daily.dev" />
+      <div className="min-h-screen bg-background-default text-text-primary">
+        {/* Sticky controls bar */}
+        <div className="bg-background-default/95 sticky top-0 z-header border-b border-border-subtlest-tertiary px-6 py-3 backdrop-blur">
+          <div className="flex flex-wrap items-center gap-4">
+            <h1 className="font-bold typo-callout">
+              Checkbox &amp; Radio · PREVIOUS vs NEW
+            </h1>
+            <div className="flex items-center gap-2">
+              <span className="text-text-tertiary typo-caption1">Theme</span>
+              <select
+                className="rounded-6 border border-border-subtlest-tertiary bg-surface-float px-2 py-1 text-text-primary typo-callout"
+                value={theme}
+                onChange={(event) =>
+                  setTheme(event.target.value as 'dark' | 'light')
+                }
+              >
+                <option value="dark">Dark</option>
+                <option value="light">Light</option>
+              </select>
+            </div>
+            <span className="text-text-quaternary typo-caption1">
+              Hover, click &amp; hold (press), and Tab (focus ring) are live on
+              every control.
+            </span>
+          </div>
+        </div>
+
+        <main className="max-w-screen-xl mx-auto w-full px-6 py-8">
+          <header className="mb-10 flex flex-col gap-2">
+            <span className="uppercase tracking-wide text-text-quaternary typo-footnote">
+              Design system · Review
+            </span>
+            <h1 className="font-bold typo-title1">
+              Checkbox &amp; Radio — before &amp; after
+            </h1>
+            <p className="max-w-3xl text-text-tertiary typo-body">
+              The checkbox and radio were realigned with the redesigned
+              Toggle/Switch and the Button system so fields, buttons, toggles,
+              checkboxes and radios read as one family. The new design uses a
+              single semantic brand fill when selected (
+              <code>accent-cabbage-default</code>) with a solid white glyph, a{' '}
+              <code>surface-hover</code> halo, a <code>surface-focus</code> blue
+              keyboard ring, and a subtle press squeeze — all theme-aware with
+              no per-theme overrides. Toggle the theme above and interact with
+              each control to review hover, focus and press.
+            </p>
+          </header>
+
+          {/* ---------------- Checkbox ---------------- */}
+          <Section
+            title="Checkbox · states"
+            description="Each row renders the same props on the previous and the new checkbox. Click to toggle; hover, focus (Tab) and press are live."
+          >
+            <Table>
+              <TableRow
+                title="Unchecked"
+                caption="resting"
+                previous={
+                  <InteractiveCheckbox variant="previous">
+                    Checkbox label
+                  </InteractiveCheckbox>
+                }
+                next={
+                  <InteractiveCheckbox variant="new">
+                    Checkbox label
+                  </InteractiveCheckbox>
+                }
+              />
+              <TableRow
+                title="Checked"
+                caption="brand fill + white glyph"
+                previous={
+                  <InteractiveCheckbox variant="previous" checked>
+                    Checkbox label
+                  </InteractiveCheckbox>
+                }
+                next={
+                  <InteractiveCheckbox variant="new" checked>
+                    Checkbox label
+                  </InteractiveCheckbox>
+                }
+              />
+              <TableRow
+                title="Disabled · unchecked"
+                previous={
+                  <InteractiveCheckbox variant="previous" disabled>
+                    Checkbox label
+                  </InteractiveCheckbox>
+                }
+                next={
+                  <InteractiveCheckbox variant="new" disabled>
+                    Checkbox label
+                  </InteractiveCheckbox>
+                }
+              />
+              <TableRow
+                title="Disabled · checked"
+                previous={
+                  <InteractiveCheckbox variant="previous" checked disabled>
+                    Checkbox label
+                  </InteractiveCheckbox>
+                }
+                next={
+                  <InteractiveCheckbox variant="new" checked disabled>
+                    Checkbox label
+                  </InteractiveCheckbox>
+                }
+              />
+              <TableRow
+                title="Indeterminate"
+                caption='mixed — aria-checked="mixed" (new only)'
+                previous={
+                  <span className="text-text-quaternary typo-footnote">
+                    — not supported
+                  </span>
+                }
+                next={
+                  <InteractiveCheckbox variant="new" indeterminate>
+                    Checkbox label
+                  </InteractiveCheckbox>
+                }
+              />
+            </Table>
+          </Section>
+
+          <Section
+            title="Checkbox · variants"
+            description="Layout/label variants used across the product."
+          >
+            <Table>
+              <TableRow
+                title="No label"
+                caption="aria-label only"
+                previous={
+                  <InteractiveCheckbox
+                    variant="previous"
+                    checked
+                    aria-label="Checkbox"
+                  />
+                }
+                next={
+                  <InteractiveCheckbox
+                    variant="new"
+                    checked
+                    aria-label="Checkbox"
+                  />
+                }
+              />
+              <TableRow
+                title="Long label"
+                caption="wraps with the box pinned top"
+                align="start"
+                previous={
+                  <div className="max-w-xs">
+                    <InteractiveCheckbox variant="previous" checked>
+                      A longer checkbox label that wraps onto multiple lines to
+                      verify alignment.
+                    </InteractiveCheckbox>
+                  </div>
+                }
+                next={
+                  <div className="max-w-xs">
+                    <InteractiveCheckbox variant="new" checked>
+                      A longer checkbox label that wraps onto multiple lines to
+                      verify alignment.
+                    </InteractiveCheckbox>
+                  </div>
+                }
+              />
+              <TableRow
+                title="Custom spacing"
+                caption='checkmarkClassName="!mr-0"'
+                previous={
+                  <InteractiveCheckbox
+                    variant="previous"
+                    checked
+                    checkmarkClassName="!mr-0"
+                    aria-label="Checkbox"
+                  />
+                }
+                next={
+                  <InteractiveCheckbox
+                    variant="new"
+                    checked
+                    checkmarkClassName="!mr-0"
+                    aria-label="Checkbox"
+                  />
+                }
+              />
+            </Table>
+          </Section>
+
+          {/* ---------------- Radio ---------------- */}
+          <Section
+            title="Radio · states"
+            description="Selected becomes a solid brand disc with a white center dot. Click an option to select it; hover, focus (Tab) and press are live."
+          >
+            <Table>
+              <TableRow
+                title="With selection"
+                caption="first option selected"
+                align="start"
+                previous={
+                  <InteractiveRadio variant="previous" initial="digest" />
+                }
+                next={<InteractiveRadio variant="new" initial="digest" />}
+              />
+              <TableRow
+                title="No selection"
+                caption="nothing selected yet"
+                align="start"
+                previous={<InteractiveRadio variant="previous" initial="" />}
+                next={<InteractiveRadio variant="new" initial="" />}
+              />
+              <TableRow
+                title="Disabled"
+                caption="whole group disabled"
+                align="start"
+                previous={
+                  <InteractiveRadio
+                    variant="previous"
+                    initial="digest"
+                    disabled
+                  />
+                }
+                next={
+                  <InteractiveRadio variant="new" initial="digest" disabled />
+                }
+              />
+            </Table>
+          </Section>
+
+          <Section
+            title="Radio · variants"
+            description="Direction, validation and inline layouts."
+          >
+            <Table>
+              <TableRow
+                title="Reverse"
+                caption="control after the label"
+                align="start"
+                previous={
+                  <InteractiveRadio
+                    variant="previous"
+                    initial="weekly"
+                    reverse
+                  />
+                }
+                next={
+                  <InteractiveRadio variant="new" initial="weekly" reverse />
+                }
+              />
+              <TableRow
+                title="Invalid"
+                caption="valid={false} — error labels"
+                align="start"
+                previous={
+                  <InteractiveRadio
+                    variant="previous"
+                    initial=""
+                    valid={false}
+                  />
+                }
+                next={
+                  <InteractiveRadio variant="new" initial="" valid={false} />
+                }
+              />
+              <TableRow
+                title="Inline"
+                caption="horizontal group"
+                align="start"
+                previous={
+                  <InteractiveRadio
+                    variant="previous"
+                    initial="digest"
+                    container="!flex-row gap-4"
+                  />
+                }
+                next={
+                  <InteractiveRadio
+                    variant="new"
+                    initial="digest"
+                    container="!flex-row gap-4"
+                  />
+                }
+              />
+            </Table>
+          </Section>
+        </main>
+      </div>
+    </>
+  );
+};
+
+CheckboxRadioDevPage.getLayout = (page: ReactNode): ReactNode => page;
+
+export default CheckboxRadioDevPage;