diff --git a/.changeset/chatty-kiwis-travel.md b/.changeset/chatty-kiwis-travel.md
new file mode 100644
index 0000000000..e844f85ca9
--- /dev/null
+++ b/.changeset/chatty-kiwis-travel.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Simplified the markup structure for checkboxes by removing the need to use the classes `.form-check-input` and `.form-check-label` on the input field and the label respectively. You can safely remove these classes from your markup, they no longer have any effect.
diff --git a/.changeset/dirty-squids-hunt.md b/.changeset/dirty-squids-hunt.md
new file mode 100644
index 0000000000..3594e1717b
--- /dev/null
+++ b/.changeset/dirty-squids-hunt.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Updated radio-button styles with Design Tokens.
diff --git a/.changeset/slow-fishes-reply.md b/.changeset/slow-fishes-reply.md
new file mode 100644
index 0000000000..177763d205
--- /dev/null
+++ b/.changeset/slow-fishes-reply.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Updated checkbox styles with Design Tokens.
diff --git a/.changeset/stupid-walls-tie.md b/.changeset/stupid-walls-tie.md
new file mode 100644
index 0000000000..6d424b3588
--- /dev/null
+++ b/.changeset/stupid-walls-tie.md
@@ -0,0 +1,5 @@
+---
+"@swisspost/design-system-styles": minor
+---
+
+Updated switch styles with Design Tokens.
diff --git a/packages/components/cypress/fixtures/post-card-control.form-association.test.html b/packages/components/cypress/fixtures/post-card-control.form-association.test.html
index 6cf8703d6f..b8f6997ec7 100644
--- a/packages/components/cypress/fixtures/post-card-control.form-association.test.html
+++ b/packages/components/cypress/fixtures/post-card-control.form-association.test.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <link
+      href="../../node_modules/@swisspost/design-system-styles/post-external.css"
+      rel="stylesheet"
+    />
     <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
     <script>
       function formHandler(e) {
diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss
index 9633f47f09..ba070ab501 100644
--- a/packages/components/src/components/post-card-control/post-card-control.scss
+++ b/packages/components/src/components/post-card-control/post-card-control.scss
@@ -2,6 +2,8 @@
 @use 'sass:math';
 @use '@swisspost/design-system-styles/core' as post;
 @use '@swisspost/design-system-styles/components/form-check';
+@use '@swisspost/design-system-styles/components/checkbox';
+@use '@swisspost/design-system-styles/components/radio-button';
 
 /*
 * There are a whole bunch of !important statements in this file.
@@ -9,7 +11,6 @@
 */
 
 :host {
-
   // remove as soon as all browser support :host-context()
   // https://caniuse.com/?search=%3Ahost-context()
   --post-card-control-bg-context: #{post.$backgrounds};
@@ -36,6 +37,7 @@
   flex-basis: 100%;
   display: grid;
   grid-template: 'input label icon' 'input content content' / min-content auto min-content;
+  align-items: center;
   gap: 0 post.$size-mini;
   margin: 0;
   padding: post.$size-regular;
@@ -54,6 +56,14 @@
     cursor: inherit;
     transition: none;
 
+    @include post.focus-style-none();
+
+    &:hover:not([disabled]),
+    &:hover:not([disabled]) ~ label.form-check-label {
+      color: var(--post-contrast-color);
+      background-color: transparent;
+    }
+
     &:focus,
     &:focus-visible {
       box-shadow: none;
@@ -70,7 +80,7 @@
   .card-control--label {
     grid-area: label;
     margin: post.$size-micro 0;
-    padding: 0;
+    padding: 0 !important;
     color: inherit !important;
     pointer-events: none;
     transition: none;
@@ -170,17 +180,11 @@
     --post-card-control-input-bg: transparent;
 
     border-style: dashed;
-    text-decoration: line-through;
     cursor: default;
 
     .card-control--input {
-      border: 0 none;
       padding: post.$form-check-input-border-width;
-      background-image: url('#{post.$form-check-input-disabled-background-url-light-lg}');
-
-      &[type='radio'] {
-        background-image: url('#{post.$form-check-input-radio-disabled-background-url-light}');
-      }
+      border-style: dashed;
     }
   }
 
diff --git a/packages/components/src/components/post-card-control/post-card-control.tsx b/packages/components/src/components/post-card-control/post-card-control.tsx
index 6818ae7a61..d5e0e840f0 100644
--- a/packages/components/src/components/post-card-control/post-card-control.tsx
+++ b/packages/components/src/components/post-card-control/post-card-control.tsx
@@ -362,7 +362,7 @@ export class PostCardControl {
           <input
             ref={el => (this.control = el)}
             id={this.controlId}
-            class="card-control--input form-check-input"
+            class="card-control--input"
             type={this.type}
             name={this.name}
             value={this.value}
@@ -381,7 +381,7 @@ export class PostCardControl {
           <label
             id={`${this.controlId}_label`}
             htmlFor={this.controlId}
-            class="card-control--label form-check-label"
+            class="card-control--label"
           >
             {this.label}
             {this.description ? (
diff --git a/packages/components/src/components/post-list/post-list.tsx b/packages/components/src/components/post-list/post-list.tsx
index 31867eafce..bdccc14ab8 100644
--- a/packages/components/src/components/post-list/post-list.tsx
+++ b/packages/components/src/components/post-list/post-list.tsx
@@ -29,7 +29,7 @@ export class PostList {
    */
   @Prop() readonly horizontal: boolean = false;
 
-  titleEl: HTMLElement;
+  private titleEl: HTMLElement;
 
   componentWillLoad() {
     /**
diff --git a/packages/documentation/src/stories/components/app-store-badge/app-store-badge.stories.ts b/packages/documentation/src/stories/components/app-store-badge/app-store-badge.stories.ts
index a36e0a7055..c0056b5037 100644
--- a/packages/documentation/src/stories/components/app-store-badge/app-store-badge.stories.ts
+++ b/packages/documentation/src/stories/components/app-store-badge/app-store-badge.stories.ts
@@ -66,5 +66,5 @@ export const renderBadge = (store: StoreType) => {
 type Story = StoryObj<{ store: StoreType }>;
 
 export const Default: Story = {
-  render: (args) => renderBadge(args.store),
+  render: args => renderBadge(args.store),
 };
diff --git a/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts b/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts
index f9374fa1b3..d3010a5ded 100644
--- a/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts
@@ -2,6 +2,7 @@ import type { Args, StoryContext, StoryFn } from '@storybook/web-components';
 import { useArgs, useState } from '@storybook/preview-api';
 import { nothing } from 'lit';
 import { html } from 'lit/static-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { mapClasses } from '@/utils';
 import { MetaComponent } from '@root/types';
 import { parse } from '@/utils/sass-export';
@@ -152,10 +153,7 @@ export const Default = {
       'checkbox-button-card': args.type === 'checkbox',
       'radio-button-card': args.type === 'radio',
     });
-    const inputClasses = mapClasses({
-      'form-check-input': true,
-      'is-invalid': args.validation === 'is-invalid',
-    });
+    const validationClass = args.validation !== 'null' ? `is-${args.validation}` : undefined;
 
     // Child components
     const controlId = `CardControl_${id}`;
@@ -168,14 +166,14 @@ export const Default = {
         <input
           id="${controlId}"
           name="${args.type}-button-card-${args.inputName ?? `control_${id}`}"
-          class="${inputClasses}"
+          class="${ifDefined(validationClass)}"
           type="${args.type}"
           ?disabled="${args.disabled}"
           .checked="${args.checked}"
           checked="${args.checked || nothing}"
           @input="${(e: InputEvent) => inputHandler(e, updateArgs)}"
         />
-        <label class="form-check-label" for="${controlId}">
+        <label for="${controlId}">
           <span>${args.label}</span>
           ${args.description ? description : nothing}
         </label>
diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.docs.mdx b/packages/documentation/src/stories/components/forms/checkbox/checkbox.docs.mdx
index 74ceab617f..b41fd25faa 100644
--- a/packages/documentation/src/stories/components/forms/checkbox/checkbox.docs.mdx
+++ b/packages/documentation/src/stories/components/forms/checkbox/checkbox.docs.mdx
@@ -49,14 +49,18 @@ The indeterminate state can only be set via JavaScript and is styled using the `
   language="javascript"
 />
 
-### Sizing
+### Grouped
 
-The size can be changed by simply adding a class:
+To show a checkbox group, just wrap your checkboxes in a `fieldset`.
 
-- Small: `.form-check-sm`
-- Large: default
+<div className="alert alert-info alert-md">
+  Don't forget to add also a `<legend>` element.
+  You can visually hide the legend using the `.visually-hidden` class if necessary.
 
-<Canvas of={checkboxStories.Size} />
+  Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
+</div>
+
+<Canvas of={checkboxStories.Grouped} />
 
 ### Inline
 
diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts
index 62cd7c691e..7560deda08 100644
--- a/packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts
@@ -25,7 +25,10 @@ export const Checkbox: Story = {
       <div class="d-flex flex-wrap gap-4 align-items-start">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-wrap align-items-start gap-16 p-16">
+            <div
+              class="${bg} d-flex flex-wrap align-items-start gap-16 p-16"
+              data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'}
+            >
               ${[
                 ...bombArgs({
                   checked: ['indeterminate'],
diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
index dd55a71fc1..eac6a6c416 100644
--- a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
+++ b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
@@ -24,7 +24,6 @@ const meta: MetaComponent = {
     hiddenLabel: false,
     checked: 'unchecked',
     disabled: false,
-    size: 'null',
     validation: 'null',
   },
   argTypes: {
@@ -90,21 +89,6 @@ const meta: MetaComponent = {
         category: 'States',
       },
     },
-    size: {
-      name: 'Size',
-      description: "Sets the size of the component's appearance.",
-      control: {
-        type: 'select',
-        labels: {
-          'form-check-sm': 'Small',
-          'null': 'Large',
-        },
-      },
-      options: ['form-check-sm', 'null'],
-      table: {
-        category: 'General',
-      },
-    },
     disabled: {
       name: 'Disabled',
       description:
@@ -165,7 +149,7 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
 };
 
 function getLabel({ label }: Args, { id }: StoryContext) {
-  return html` <label for="${id}" class="form-check-label">${label}</label> `;
+  return html` <label for="${id}">${label}</label> `;
 }
 
 function getValidationFeedback({ validation }: Args) {
@@ -185,10 +169,7 @@ function renderCheckbox(args: Args, context: StoryContext) {
     'form-check-inline': args.inline,
   });
 
-  const checkboxClasses = mapClasses({
-    'form-check-input': true,
-    ['is-' + args.validation]: args.validation !== 'null',
-  });
+  const validationClass = args.validation !== 'null' ? `is-${args.validation}` : undefined;
 
   const handleChange = () => {
     updateArgs({ checked: CHECKED_STATE_TOGGLE_MAP[args.checked] });
@@ -203,7 +184,7 @@ function renderCheckbox(args: Args, context: StoryContext) {
     <div class="${containerClasses}">
       <input
         id="${context.id}"
-        class="${checkboxClasses}"
+        class="${ifDefined(validationClass)}"
         type="checkbox"
         aria-invalid="${ifDefined(VALIDATION_STATE_MAP[args.validation])}"
         aria-label="${ifDefined(args.hiddenLabel ? args.label : undefined)}"
@@ -239,13 +220,23 @@ export const Validation: Story = {
   },
 };
 
-export const Size: Story = {
-  args: {
-    size: 'form-check-sm',
-  },
+export const Grouped: Story = {
+  render: (args: Args, context: StoryContext) => html`
+    <fieldset>
+      <legend class="${ifDefined(args.hiddenLegend ? 'visually-hidden' : undefined)}">
+        Legend
+      </legend>
+      ${['Unua Etikedo', 'Dua Etikedo', 'Tria Etikedo', 'Kvara  Etikedo'].map((label, index) =>
+        renderCheckbox(
+          { ...args, label, checked: false },
+          { ...context, id: `${context.id}-${index}` },
+        ),
+      )}
+    </fieldset>
+  `,
   parameters: {
     controls: {
-      exclude: ['Hidden Legend', 'Inline Layout'],
+      include: ['Hidden Legend'],
     },
   },
 };
@@ -254,7 +245,7 @@ export const Inline: Story = {
   render: (args: Args, context: StoryContext) => html`
     <fieldset>
       <legend class="${ifDefined(args.hiddenLegend ? 'visually-hidden' : undefined)}">
-        Legendo
+        Legend
       </legend>
       ${['Unua Etikedo', 'Dua Etikedo', 'Tria Etikedo', 'Kvara  Etikedo'].map((label, index) =>
         renderCheckbox(
diff --git a/packages/documentation/src/stories/components/forms/radio/radio.docs.mdx b/packages/documentation/src/stories/components/forms/radio/radio.docs.mdx
index 5426cc8b09..44744435bb 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.docs.mdx
+++ b/packages/documentation/src/stories/components/forms/radio/radio.docs.mdx
@@ -31,14 +31,18 @@ Our radios use custom icons to indicate checked states.
 
 The following examples show the different characteristics of the component. These can differ in the type of visualization, the HTML structure, as well as when, how and why they are displayed.
 
-### Sizing
+### Grouped
 
-The size can be changed by simply adding a class:
+To show radio button group, just wrap your radios in a `fieldset`.
 
-- Small: `.form-check-sm`
-- Large: default
+<div className="alert alert-info alert-md">
+  Don't forget to add also a `<legend>` element.
+  You can visually hide the legend using the `.visually-hidden` class if necessary.
 
-<Canvas of={RadioStories.Size} />
+  Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
+</div>
+
+<Canvas of={RadioStories.Grouped} />
 
 ### Inline
 
diff --git a/packages/documentation/src/stories/components/forms/radio/radio.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.snapshot.stories.ts
index bc85351312..a0c13b59ea 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/radio/radio.snapshot.stories.ts
@@ -18,7 +18,10 @@ export const Radio: Story = {
       <div class="d-flex flex-wrap gap-4 align-items-start">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex gap-16 flex-column p-16">
+            <div
+              class="${bg} d-flex gap-16 flex-column p-16"
+              data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'}
+            >
               ${[
                 ...bombArgs({
                   label: [
diff --git a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
index c84ea85b8f..ed8477ed8b 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
+++ b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
@@ -2,6 +2,7 @@ import { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { useArgs } from '@storybook/preview-api';
 import { html, nothing, TemplateResult } from 'lit';
 import { MetaComponent } from '@root/types';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'null': undefined,
@@ -29,7 +30,6 @@ const meta: MetaComponent = {
     hiddenLabel: false,
     checked: false,
     disabled: false,
-    size: 'null',
     validation: 'null',
   },
   argTypes: {
@@ -74,21 +74,6 @@ const meta: MetaComponent = {
         category: 'States',
       },
     },
-    size: {
-      name: 'Size',
-      description: "Sets the size of the component's appearance.",
-      control: {
-        type: 'select',
-        labels: {
-          'form-check-sm': 'Small',
-          'null': 'Large',
-        },
-      },
-      options: ['form-check-sm', 'null'],
-      table: {
-        category: 'General',
-      },
-    },
     disabled: {
       name: 'Disabled',
       description:
@@ -124,12 +109,15 @@ function render(args: Args, context: StoryContext) {
   const [_, updateArgs] = useArgs();
 
   const id = context.id ?? `${context.viewMode}_${context.name.replace(/\s/g, '-')}_ExampleRadio`;
-  const classes = ['form-check-input', args.validation].filter(c => c && c !== 'null').join(' ');
+
+  const radioClass = args.validation !== 'null' ? args.validation : undefined;
+
   const groupClasses = ['form-check', args.size].filter(c => c && c !== 'null').join(' ');
 
   const useAriaLabel = args.hiddenLabel;
+
   const label: TemplateResult | null = !useAriaLabel
-    ? html` <label for="${id}" class="form-check-label">${args.label}</label> `
+    ? html` <label for="${id}">${args.label}</label> `
     : null;
 
   const contextual: (TemplateResult | null)[] = [
@@ -140,7 +128,7 @@ function render(args: Args, context: StoryContext) {
   const control = html`
     <input
       id="${id}"
-      class="${classes}"
+      class="${ifDefined(radioClass)}"
       type="radio"
       ?checked="${args.checked}"
       .checked="${args.checked}"
@@ -162,7 +150,7 @@ type Story = StoryObj;
 
 export const Default: Story = {};
 
-export function renderInline(args: Args, context: Partial<StoryContext>) {
+export function renderGroup(args: Args, context: Partial<StoryContext>) {
   const [_, updateArgs] = useArgs();
   const baseId = `${context.viewMode}_${context.name?.replace(/\s/g, '-')}_ExampleRadio`;
   const id1 = baseId + '1';
@@ -185,7 +173,7 @@ export function renderInline(args: Args, context: Partial<StoryContext>) {
   return html`
     <fieldset>
       <legend class="${args.hiddenLegend ? 'visually-hidden' : undefined}">Legend</legend>
-      <div class="form-check form-check-inline">
+      <div class="form-check ${args.inline ? 'form-check-inline' : ''}">
         <input
           id="${id1}"
           name="Inline_ExampleRadio_Group"
@@ -196,7 +184,7 @@ export function renderInline(args: Args, context: Partial<StoryContext>) {
         />
         <label for="${id1}" class="form-check-label">${args.label}</label>
       </div>
-      <div class="form-check form-check-inline">
+      <div class="form-check ${args.inline ? 'form-check-inline' : ''}">
         <input
           id="${id2}"
           name="Inline_ExampleRadio_Group"
@@ -207,7 +195,7 @@ export function renderInline(args: Args, context: Partial<StoryContext>) {
         />
         <label for="${id2}" class="form-check-label">${args.label}</label>
       </div>
-      <div class="form-check form-check-inline">
+      <div class="form-check ${args.inline ? 'form-check-inline' : ''}">
         <input
           id="${id3}"
           name="Inline_ExampleRadio_Group"
@@ -218,7 +206,7 @@ export function renderInline(args: Args, context: Partial<StoryContext>) {
         />
         <label for="${id3}" class="form-check-label">${args.label}</label>
       </div>
-      <div class="form-check form-check-inline">
+      <div class="form-check ${args.inline ? 'form-check-inline' : ''}">
         <input
           id="${id4}"
           name="Inline_ExampleRadio_Group"
@@ -233,16 +221,27 @@ export function renderInline(args: Args, context: Partial<StoryContext>) {
   `;
 }
 
-export const Size: Story = {
-  render,
+export const Grouped: Story = {
+  render: renderGroup,
+  parameters: {
+    controls: {
+      exclude: ['Hidden Label', 'Checked', 'Disabled', 'Validation'],
+    },
+  },
   args: {
-    size: 'form-check-sm',
     checkedRadio: null,
   },
+  argTypes: {
+    checkedRadio: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 export const Inline: Story = {
-  render: renderInline,
+  render: renderGroup,
   parameters: {
     controls: {
       exclude: ['Hidden Label', 'Checked', 'Disabled', 'Validation'],
@@ -250,6 +249,7 @@ export const Inline: Story = {
   },
   args: {
     checkedRadio: null,
+    inline: true,
   },
   argTypes: {
     checkedRadio: {
diff --git a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
index a4dba1bb06..56795a7e9a 100644
--- a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
+++ b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
@@ -18,7 +18,7 @@ const meta: MetaComponent = {
     },
   },
   args: {
-    labelPosition: 'before',
+    labelPosition: 'after',
     label: 'Notifications',
     hiddenLabel: false,
     checked: false,
diff --git a/packages/styles/src/components/_form-check.scss b/packages/styles/src/components/_form-check.scss
new file mode 100644
index 0000000000..908bba35d6
--- /dev/null
+++ b/packages/styles/src/components/_form-check.scss
@@ -0,0 +1,169 @@
+@forward './../variables/options';
+
+@use '../variables/color';
+@use '../variables/commons';
+@use '../variables/type';
+@use '../variables/spacing';
+@use '../variables/animation';
+@use '../variables/components/form-check';
+@use '../mixins/color' as color-mx;
+@use '../mixins/icons' as icons-mx;
+@use '../mixins/utilities' as utility-mx;
+@use '../tokens/components';
+@use '../tokens/helpers';
+@use '../functions/tokens';
+
+.form-check {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  width: fit-content;
+  border-radius: tokens.get('focus-border-radius', helpers.$post-focus);
+
+  &-inline {
+    display: inline-flex;
+    vertical-align: top;
+
+    fieldset > & {
+      &:not(:last-of-type) {
+        margin-right: form-check.$form-check-inline-margin-right;
+      }
+    }
+  }
+
+  &:has(> input:not(:only-child)) {
+    @include utility-mx.focus-style();
+
+    > input {
+      @include utility-mx.focus-style-none();
+    }
+  }
+
+  &:has(input[type='checkbox']):not(.form-switch) {
+    padding-block: tokens.get('checkbox-padding-block-single', components.$post-checkbox);
+
+    fieldset > & {
+      &:not(:last-of-type) {
+        margin-bottom: tokens.get('checkbox-gap-block-group', components.$post-checkbox);
+      }
+    }
+
+    > input[type='checkbox'] {
+      ~ label {
+        padding-block: tokens.get('checkbox-label-padding-block', components.$post-checkbox);
+        padding-inline-start: tokens.get(
+          'checkbox-gap-inline-text-start',
+          components.$post-checkbox
+        );
+        color: tokens.get('checkbox-enabled-fg', components.$post-checkbox);
+      }
+
+      &:not([disabled]) {
+        ~ label {
+          cursor: pointer;
+        }
+
+        &:hover ~ label {
+          color: tokens.get('checkbox-hover-fg', components.$post-checkbox);
+
+          @include utility-mx.high-contrast-mode() {
+            color: Highlight;
+          }
+        }
+      }
+
+      &[disabled] ~ label {
+        color: tokens.get('checkbox-disabled-fg', components.$post-checkbox);
+
+        @include utility-mx.high-contrast-mode() {
+          color: GrayText;
+        }
+      }
+    }
+  }
+
+  &.form-switch {
+    > input[type='checkbox'] {
+      ~ label {
+        color: tokens.get('switch-text-enabled-fg', components.$post-switch);
+      }
+
+      &:not([disabled]) {
+        ~ label {
+          cursor: pointer;
+        }
+
+        &:hover ~ label {
+          color: tokens.get('switch-element-hover-bg', components.$post-switch);
+
+          @include utility-mx.high-contrast-mode() {
+            color: Highlight;
+          }
+        }
+      }
+
+      &[disabled] ~ label {
+        color: tokens.get('switch-element-disabled-bg', components.$post-switch);
+
+        @include utility-mx.high-contrast-mode() {
+          color: GrayText;
+        }
+      }
+    }
+  }
+
+  &:has(input[type='radio']) {
+    padding-block: tokens.get('radio-button-padding-block-single', components.$post-radio-button);
+
+    fieldset > & {
+      &:not(:last-of-type) {
+        margin-bottom: tokens.get('radio-button-gap-block-group', components.$post-radio-button);
+      }
+    }
+
+    > input[type='radio'] {
+      ~ label {
+        padding-block: tokens.get(
+          'radio-button-label-padding-block',
+          components.$post-radio-button
+        );
+        padding-inline-start: tokens.get(
+          'radio-button-gap-inline-text-start',
+          components.$post-radio-button
+        );
+        color: tokens.get('radio-button-enabled-fg', components.$post-radio-button);
+      }
+
+      &:not([disabled]) {
+        ~ label {
+          cursor: pointer;
+        }
+
+        &:hover ~ label {
+          color: tokens.get('radio-button-hover-fg', components.$post-radio-button);
+
+          @include utility-mx.high-contrast-mode() {
+            color: Highlight;
+          }
+        }
+      }
+
+      &[disabled] ~ label {
+        color: tokens.get('radio-button-disabled-fg', components.$post-radio-button);
+
+        @include utility-mx.high-contrast-mode() {
+          color: GrayText;
+        }
+      }
+    }
+  }
+
+  > label {
+    transition: color #{animation.$transition-base-timing};
+    flex: 1;
+
+    @include utility-mx.high-contrast-mode {
+      transition: none;
+    }
+  }
+}
diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss
index 0adb4f20ae..26829372c9 100644
--- a/packages/styles/src/components/_index.scss
+++ b/packages/styles/src/components/_index.scss
@@ -23,6 +23,9 @@
 @use 'datatable';
 @use 'dialog';
 @use 'form-check';
+@use 'radio-button';
+@use 'checkbox';
+@use 'switch';
 @use 'form-hint';
 @use 'forms';
 @use 'grid';
diff --git a/packages/styles/src/components/card-control.scss b/packages/styles/src/components/card-control.scss
index 9ab6ae8af5..049fad2671 100644
--- a/packages/styles/src/components/card-control.scss
+++ b/packages/styles/src/components/card-control.scss
@@ -9,7 +9,6 @@
 * There are a whole bunch of !important statments in this file.
 * They are necessary and should not be removed, because we need to override the .form-check styles here.
 */
-
 fieldset {
   .radio-button-card,
   .checkbox-button-card {
@@ -29,6 +28,7 @@ fieldset {
 
   display: grid;
   grid-template: 'input label icon' 'input content content' / min-content auto min-content;
+  align-items: center;
   gap: 0 spacing.$size-mini;
   position: relative;
   padding: spacing.$size-regular;
@@ -39,7 +39,7 @@ fieldset {
   color: var(--post-card-control-color);
   cursor: pointer;
 
-  input.form-check-input[type] {
+  > input {
     grid-area: input;
     position: relative;
     z-index: 2;
@@ -50,17 +50,24 @@ fieldset {
     cursor: inherit;
     transition: none;
 
+    @include utilities.focus-style-none();
+
+    &:hover:not([disabled]) ~ label {
+      color: var(--post-contrast-color);
+      background-color: transparent !important;
+    }
+
     &:focus,
     &:focus-visible {
       box-shadow: none;
     }
 
-    ~ label.form-check-label {
+    ~ label {
       color: inherit !important;
     }
   }
 
-  label.form-check-label {
+  label {
     grid-area: label;
     margin: spacing.$size-micro 0;
     padding: 0;
@@ -131,12 +138,10 @@ fieldset {
     --post-card-control-input-bg: transparent;
 
     border-style: dashed;
-    text-decoration: line-through;
     cursor: default;
 
     input.form-check-input[type] {
-      border: 0 none;
-      padding: form-check.$form-check-input-border-width;
+      padding: forms.$input-border-width;
     }
   }
 
diff --git a/packages/styles/src/components/checkbox.scss b/packages/styles/src/components/checkbox.scss
new file mode 100644
index 0000000000..e4b43c308f
--- /dev/null
+++ b/packages/styles/src/components/checkbox.scss
@@ -0,0 +1,122 @@
+@use 'form-check';
+@use '../variables/color';
+@use '../variables/animation';
+@use '../mixins/color' as color-mx;
+@use '../mixins/icons' as icons-mx;
+@use '../mixins/utilities' as utility-mx;
+@use '../tokens/components';
+@use '../functions/tokens';
+
+tokens.$default-map: components.$post-checkbox;
+
+$checkbox-icon-checked: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M7.51712 12.1332L4.30712 8.69325C4.02712 8.39325 4.03712 7.91325 4.34712 7.63325C4.64712 7.35325 5.12712 7.36325 5.40712 7.67325L7.31712 9.72325L10.7171 4.57325C10.9471 4.22325 11.4071 4.13325 11.7571 4.36325C12.1071 4.59325 12.1971 5.05325 11.9671 5.40325L7.51712 12.1332Z'/></svg>");
+$checkbox-icon-indeterminate: url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M11.21 8.5H4.75C4.34 8.5 4 8.16 4 7.75C4 7.34 4.34 7 4.75 7H11.21C11.62 7 11.96 7.34 11.96 7.75C11.96 8.16 11.62 8.5 11.21 8.5Z'/></svg>");
+
+:where(.form-check > input[type='checkbox']) {
+  @include utility-mx.focus-style();
+}
+
+.form-check:not(.form-switch):has(input[type='checkbox']) {
+  > input {
+    appearance: none;
+    flex: none;
+    display: inline-flex;
+    margin: tokens.get('checkbox-icon-padding-inner');
+    margin-block: calc(
+      tokens.get('checkbox-icon-padding-inner') + tokens.get('checkbox-icon-padding-container')
+    );
+    width: tokens.get('checkbox-icon-size');
+    height: tokens.get('checkbox-icon-size');
+    background-color: tokens.get('checkbox-enabled-bg');
+    border: tokens.get('checkbox-icon-border-width') tokens.get('checkbox-border-style-default')
+      tokens.get('checkbox-enabled-stroke');
+    border-radius: tokens.get('checkbox-border-radius');
+    color: tokens.get('checkbox-enabled-fg');
+    vertical-align: top;
+    transition:
+      background-color #{animation.$transition-base-timing},
+      border-color #{animation.$transition-base-timing},
+      color #{animation.$transition-base-timing},
+      box-shadow #{animation.$transition-base-timing};
+
+    @include utility-mx.high-contrast-mode() {
+      background-color: Field;
+      border-color: FieldText;
+      color: FieldText;
+    }
+
+    &:not([disabled]) {
+      cursor: pointer;
+    }
+
+    &::after {
+      display: block;
+      content: '';
+      width: 100%;
+      height: 100%;
+      mask-size: tokens.get('checkbox-icon-size');
+      mask-repeat: no-repeat;
+      mask-position: center;
+    }
+
+    &:checked,
+    &:indeterminate {
+      &::after {
+        background-color: currentColor;
+
+        @include utility-mx.high-contrast-mode() {
+          background-color: FieldText;
+        }
+      }
+    }
+
+    &:not([disabled]):hover {
+      background-color: tokens.get('checkbox-hover-bg');
+      border-color: tokens.get('checkbox-hover-stroke');
+      color: tokens.get('checkbox-hover-fg');
+
+      @include utility-mx.high-contrast-mode() {
+        background-color: Field;
+        border-color: Highlight;
+
+        &:checked,
+        &:indeterminate {
+          &::after {
+            background-color: Highlight;
+          }
+        }
+      }
+    }
+
+    &:checked {
+      &::after {
+        mask-image: $checkbox-icon-checked;
+      }
+    }
+
+    &:indeterminate {
+      &::after {
+        mask-image: $checkbox-icon-indeterminate;
+      }
+    }
+
+    &[disabled] {
+      background-color: tokens.get('checkbox-disabled-bg');
+      border: tokens.get('checkbox-icon-border-width') tokens.get('checkbox-border-style-disabled')
+        tokens.get('checkbox-disabled-stroke');
+      color: tokens.get('checkbox-disabled-fg');
+
+      @include utility-mx.high-contrast-mode() {
+        background-color: Field;
+        border-color: GrayText;
+
+        &:checked,
+        &:indeterminate {
+          &::after {
+            background-color: GrayText;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/styles/src/components/form-check.scss b/packages/styles/src/components/form-check.scss
deleted file mode 100644
index 065e52bc55..0000000000
--- a/packages/styles/src/components/form-check.scss
+++ /dev/null
@@ -1,297 +0,0 @@
-@forward './../variables/options';
-
-@use '../variables/color';
-@use '../variables/commons';
-@use '../variables/type';
-@use '../variables/spacing';
-@use '../variables/animation';
-@use '../variables/components/form-check';
-@use '../mixins/color' as color-mx;
-@use '../mixins/icons' as icons-mx;
-@use '../mixins/utilities' as utility-mx;
-
-.form-check {
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: form-check.$form-check-row-gap;
-  margin-bottom: form-check.$form-check-margin-bottom;
-
-  @include utility-mx.focus-style {
-    border-radius: commons.$border-radius;
-  }
-
-  &-inline {
-    display: inline-flex;
-  }
-
-  &-inline:not(:last-of-type) {
-    margin-right: form-check.$form-check-inline-margin-right;
-  }
-
-  &-input,
-  &-label {
-    color: rgba(var(--post-contrast-color-rgb), 0.8);
-    transition: color animation.$transition-base-timing;
-
-    @include utility-mx.high-contrast-mode {
-      transition: none;
-    }
-
-    &:hover:not([disabled]),
-    &:hover:not([disabled]) ~ &-label {
-      color: var(--post-contrast-color);
-
-      @include utility-mx.high-contrast-mode() {
-        border-color: Highlight;
-      }
-    }
-  }
-
-  &-input {
-    display: inline-flex;
-    flex: 0 auto;
-    appearance: none;
-    background: transparent;
-    height: form-check.$form-check-input-size;
-    width: form-check.$form-check-input-size;
-    border: form-check.$form-check-input-border-width solid currentColor;
-    margin-top: 1px;
-    @include utility-mx.focus-style-none();
-
-    &:not([disabled]),
-    &:not([disabled]) ~ .form-check-label {
-      cursor: pointer;
-    }
-
-    @include utility-mx.high-contrast-mode {
-      border-color: FieldText; // For blink-browser as otherwise the default color (which is not a full color) will be converted to Highlight
-    }
-
-    &::after {
-      content: '';
-      display: block;
-      flex: 1;
-    }
-
-    &[type='checkbox'] {
-      &:checked::after {
-        @include icons-mx.icon(3035);
-      }
-
-      &:indeterminate::after {
-        @include icons-mx.icon(2039);
-      }
-
-      &:checked,
-      &:indeterminate {
-        @include utility-mx.high-contrast-mode {
-          background-color: SelectedItem !important;
-          color: SelectedItemText !important; // Important is needed for card-control
-        }
-      }
-    }
-
-    &[type='radio'] {
-      border-radius: 50%;
-
-      &:checked::after {
-        border: spacing.$size-micro solid transparent;
-        background-color: currentColor;
-        border-radius: inherit;
-        background-clip: padding-box;
-
-        @include utility-mx.high-contrast-mode {
-          background-color: SelectedItem;
-          border-color: Canvas;
-        }
-      }
-
-      &[disabled] {
-        padding: spacing.$size-line; // Used to mimic border width because it is used in combination with background-clip: padding-box; to size the selected shape
-        background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-light}');
-
-        @include color-mx.on-dark-background {
-          background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-dark}');
-        }
-
-        @include utility-mx.high-contrast-mode {
-          background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-hcm}') !important;
-        }
-      }
-    }
-
-    &[disabled] {
-      border: 0;
-      background-image: url('#{form-check.$form-check-input-disabled-background-url-light-lg}');
-
-      &[type='checkbox'],
-      &[type='radio'] {
-        @include utility-mx.high-contrast-mode {
-          border-color: GrayText !important;
-        }
-      }
-
-      &[type='checkbox'] {
-        &:checked,
-        &:indeterminate {
-          @include utility-mx.high-contrast-mode {
-            background-color: Field !important;
-            color: GrayText !important;
-          }
-        }
-      }
-
-      &[type='radio'] {
-        &:checked::after {
-          @include utility-mx.high-contrast-mode {
-            background-color: GrayText;
-          }
-        }
-      }
-
-      @include color-mx.on-dark-background {
-        background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-lg}');
-      }
-
-      @include utility-mx.high-contrast-mode {
-        background-image: url('#{form-check.$form-check-input-disabled-background-url-hcm-lg}') !important;
-      }
-
-      .form-check-sm &[type='checkbox'] {
-        background-image: url('#{form-check.$form-check-input-disabled-background-url-light-sm}');
-
-        @include color-mx.on-dark-background {
-          background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-sm}');
-        }
-
-        @include utility-mx.high-contrast-mode {
-          background-image: url('#{form-check.$form-check-input-disabled-background-url-hcm-sm}') !important;
-        }
-      }
-    }
-
-    &[disabled],
-    &[disabled] ~ .form-check-label {
-      text-decoration: line-through;
-      color: color.$black-alpha-60;
-
-      @include color-mx.on-dark-background() {
-        color: color.$white-alpha-80;
-      }
-    }
-
-    .form-check-sm & {
-      height: form-check.$form-check-input-size-sm;
-      width: form-check.$form-check-input-size-sm;
-
-      &[type='radio'] {
-        &:checked::after {
-          border-width: spacing.$size-line;
-        }
-      }
-    }
-  }
-
-  &-label {
-    flex: 1;
-
-    :not(.form-switch, .radio-button-card, .checkbox-button-card) > & {
-      padding-inline-start: form-check.$form-check-column-gap;
-    }
-
-    .form-check-sm & {
-      font-size: type.$font-size-12;
-    }
-  }
-}
-
-.form-switch {
-  .form-check-input {
-    height: form-check.$form-switch-height;
-    width: form-check.$form-switch-width;
-    border: 0;
-    border-radius: form-check.$form-switch-width;
-    background-image: form-check.$form-switch-background-image;
-    background-size: 2 * form-check.$form-switch-width;
-    background-position-x: 0;
-    transition:
-      background-color animation.$transition-base-timing,
-      background-position animation.$transition-base-timing;
-
-    &::after {
-      max-width: form-check.$form-switch-height;
-      background-color: form-check.$form-switch-color;
-      border: form-check.$form-check-input-border-width solid form-check.$form-switch-border-color;
-      border-radius: 50%;
-      transition: transform animation.$transition-base-timing;
-    }
-
-    &:checked {
-      background-position-x: form-check.$form-switch-width;
-
-      &::after {
-        @include icons-mx.remove-icon;
-        background-color: form-check.$form-switch-color;
-        border-color: form-check.$form-switch-checked-border-color;
-        transform: translateX(2rem);
-      }
-    }
-
-    @include utility-mx.high-contrast-mode {
-      transition: none;
-      border: form-check.$form-check-input-border-width solid CanvasText;
-
-      &:checked {
-        background-color: SelectedItem !important;
-      }
-
-      &::after,
-      &:checked::after {
-        max-width: calc(
-          form-check.$form-switch-height - (form-check.$form-check-input-border-width * 2)
-        );
-        border-color: Canvas;
-        background-color: CanvasText;
-      }
-    }
-
-    &[disabled] {
-      background: form-check.$form-switch-disabled-bg;
-
-      &::after {
-        border-color: form-check.$form-switch-disabled-border-color;
-      }
-
-      @include utility-mx.high-contrast-mode {
-        &::after {
-          border-color: Field;
-        }
-
-        &:checked {
-          background-color: GrayText !important;
-        }
-      }
-    }
-  }
-
-  &:hover > .form-check-input:not([disabled]) {
-    background-color: rgba(var(--post-contrast-color-rgb), 0.1);
-
-    @include utility-mx.high-contrast-mode {
-      border-color: Highlight;
-    }
-  }
-
-  .form-check-label {
-    padding-top: form-check.$form-switch-label-padding-top;
-
-    &.order-first {
-      flex: 0 auto;
-      padding-inline-end: form-check.$form-switch-column-gap;
-    }
-
-    &:not(.order-first) {
-      padding-inline-start: form-check.$form-switch-column-gap;
-    }
-  }
-}
diff --git a/packages/styles/src/components/radio-button.scss b/packages/styles/src/components/radio-button.scss
new file mode 100644
index 0000000000..a4ba90479b
--- /dev/null
+++ b/packages/styles/src/components/radio-button.scss
@@ -0,0 +1,117 @@
+@use 'form-check';
+@use '../variables/color';
+@use '../variables/animation';
+@use '../mixins/color' as color-mx;
+@use '../mixins/icons' as icons-mx;
+@use '../mixins/utilities' as utility-mx;
+@use '../tokens/components';
+@use '../functions/tokens';
+
+tokens.$default-map: components.$post-radio-button;
+
+:where(.form-check > input[type='radio']) {
+  @include utility-mx.focus-style();
+}
+
+.form-check > input[type='radio'] {
+  appearance: none;
+  flex: none;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-block: calc(
+    tokens.get('radio-button-icon-padding-block-inner') +
+      tokens.get('radio-button-icon-padding-block-container')
+  );
+  margin-inline: tokens.get('radio-button-icon-padding-inline-inner');
+  width: tokens.get('radio-button-icon-ring');
+  height: tokens.get('radio-button-icon-ring');
+  background-color: tokens.get('radio-button-enabled-bg');
+  border: tokens.get('radio-button-icon-border-width')
+    tokens.get('radio-button-icon-border-style-default') tokens.get('radio-button-enabled-stroke');
+  border-radius: tokens.get('radio-button-icon-border-radius-round');
+  color: tokens.get('radio-button-enabled-fg');
+  vertical-align: top;
+  transition:
+    background-color #{animation.$transition-base-timing},
+    border-color #{animation.$transition-base-timing},
+    color #{animation.$transition-base-timing},
+    box-shadow #{animation.$transition-base-timing};
+
+  @include utility-mx.high-contrast-mode() {
+    background-color: Field;
+    border-color: FieldText;
+    color: FieldText;
+    transition: none;
+  }
+
+  &:not([disabled]) {
+    cursor: pointer;
+  }
+
+  &::after {
+    display: block;
+    content: '';
+    width: tokens.get('radio-button-icon-dot');
+    height: tokens.get('radio-button-icon-dot');
+    border-radius: inherit;
+  }
+
+  &:checked {
+    &::after {
+      background-color: tokens.get('radio-button-enabled-fg');
+
+      @include utility-mx.high-contrast-mode() {
+        background-color: FieldText;
+      }
+    }
+  }
+
+  &:not([disabled]):hover {
+    background-color: tokens.get('radio-button-hover-bg');
+    border-color: tokens.get('radio-button-hover-stroke');
+    color: tokens.get('radio-button-hover-fg');
+
+    &:checked {
+      &::after {
+        background-color: tokens.get('radio-button-hover-fg');
+      }
+    }
+
+    @include utility-mx.high-contrast-mode() {
+      background-color: Field;
+      border-color: Highlight;
+
+      &:checked {
+        &::after {
+          background-color: Highlight;
+        }
+      }
+    }
+  }
+
+  &[disabled] {
+    background-color: tokens.get('radio-button-disabled-bg');
+    border: tokens.get('radio-button-icon-border-width')
+      tokens.get('radio-button-icon-border-style-disabled')
+      tokens.get('radio-button-disabled-stroke');
+    color: tokens.get('radio-button-disabled-fg');
+
+    &:checked {
+      &::after {
+        background-color: tokens.get('radio-button-disabled-fg');
+      }
+    }
+
+    @include utility-mx.high-contrast-mode() {
+      background-color: Field;
+      border-color: GrayText;
+
+      &:checked {
+        &::after {
+          background-color: GrayText;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/styles/src/components/switch.scss b/packages/styles/src/components/switch.scss
new file mode 100644
index 0000000000..0508dedfae
--- /dev/null
+++ b/packages/styles/src/components/switch.scss
@@ -0,0 +1,216 @@
+@use 'form-check';
+@use '../variables/color';
+@use '../variables/commons';
+@use '../variables/type';
+@use '../variables/spacing';
+@use '../variables/animation';
+@use '../mixins/color' as color-mx;
+@use '../mixins/icons' as icons-mx;
+@use '../mixins/utilities' as utility-mx;
+@use '../tokens/components' as components;
+@use '../functions/tokens' as tokens;
+
+tokens.$default-map: components.$post-switch;
+
+$switch-handle-icon: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M7.51712 12.1332L4.30712 8.69325C4.02712 8.39325 4.03712 7.91325 4.34712 7.63325C4.64712 7.35325 5.12712 7.36325 5.40712 7.67325L7.31712 9.72325L10.7171 4.57325C10.9471 4.22325 11.4071 4.13325 11.7571 4.36325C12.1071 4.59325 12.1971 5.05325 11.9671 5.40325L7.51712 12.1332Z'/></svg>");
+
+.form-switch {
+  display: flex;
+
+  @include utility-mx.focus-style() {
+    &:has(> input:only-child) {
+      border-radius: tokens.get('switch-border-radius-round');
+    }
+  }
+
+  .form-check-input {
+    appearance: none;
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: tokens.get('switch-element-height');
+    width: tokens.get('switch-element-width');
+    border: tokens.get('switch-border-width') tokens.get('switch-border-style-default')
+      tokens.get('switch-element-enabled-stroke');
+    border-radius: tokens.get('switch-border-radius-round');
+    background-color: tokens.get('switch-element-enabled-bg');
+    padding: tokens.get('switch-padding-block-text') 0 tokens.get('switch-padding-block-text')
+      tokens.get('switch-padding-inline-handle');
+    transition:
+      background-color animation.$transition-base-timing,
+      border-color animation.$transition-base-timing;
+
+    &::before,
+    &::after {
+      position: absolute;
+      display: block;
+      cursor: pointer;
+      content: '';
+      width: tokens.get('switch-element-handle');
+      height: tokens.get('switch-element-handle');
+      background-color: tokens.get('switch-handle-enabled');
+      border-radius: tokens.get('switch-border-radius-round');
+      transition:
+        transform animation.$transition-base-timing,
+        background-color animation.$transition-base-timing;
+    }
+
+    &::before {
+      mask-image: $switch-handle-icon;
+      background-color: transparent;
+      z-index: 1;
+      mask-size: tokens.get('switch-element-handle');
+      mask-repeat: no-repeat;
+      mask-position: center;
+    }
+
+    &::after {
+      border: tokens.get('switch-border-width') tokens.get('switch-border-style-default')
+        tokens.get('switch-handle-enabled-stroke');
+    }
+
+    &:checked {
+      background-color: tokens.get('switch-element-selected-bg');
+      border-color: tokens.get('switch-element-selected-stroke');
+
+      &::before,
+      &::after {
+        transform: translateX(
+          calc(tokens.get('switch-element-width') - tokens.get('switch-element-handle') * 1.5)
+        );
+      }
+
+      &::before {
+        background-color: tokens.get('switch-icon-success');
+      }
+
+      &::after {
+        @include icons-mx.remove-icon;
+        background-color: tokens.get('switch-handle-selected');
+        border-color: tokens.get('switch-handle-selected-stroke');
+      }
+
+      + .form-check-label {
+        color: tokens.get('switch-text-selected-fg');
+      }
+    }
+
+    @include utility-mx.high-contrast-mode {
+      transition: none;
+      border: tokens.get('switch-border-width') tokens.get('switch-border-style-default') CanvasText;
+
+      &:checked {
+        background-color: SelectedItem !important;
+      }
+
+      &::after {
+        max-width: tokens.get('switch-element-handle');
+        border-color: Canvas;
+        background-color: CanvasText;
+      }
+
+      &:checked::after,
+      &:checked::before {
+        transform: translateX(
+          calc(
+            tokens.get('switch-element-width') - tokens.get('switch-element-handle') - tokens.get(
+                'switch-padding-inline-handle'
+              ) * 2 - tokens.get('switch-border-width') * 2
+          )
+        );
+      }
+    }
+
+    &[disabled] {
+      background-color: tokens.get('switch-element-disabled-bg');
+      border: tokens.get('switch-border-width') tokens.get('switch-border-style-disabled')
+        tokens.get('switch-element-disabled-stroke');
+
+      @include utility-mx.high-contrast-mode {
+        border: tokens.get('switch-border-width') tokens.get('switch-border-style-disabled')
+          GrayText;
+      }
+
+      + .form-check-label {
+        color: tokens.get('switch-text-disabled-fg');
+      }
+
+      &::after {
+        background-color: tokens.get('switch-handle-disabled');
+        border: tokens.get('switch-border-width') tokens.get('switch-border-style-disabled')
+          tokens.get('switch-handle-disabled-stroke');
+
+        @include color-mx.on-dark-background {
+          border: tokens.get('switch-border-width') tokens.get('switch-border-style-disabled')
+            color.$white-alpha-80;
+        }
+
+        @include utility-mx.high-contrast-mode {
+          border: tokens.get('switch-border-width') tokens.get('switch-border-style-disabled')
+            GrayText;
+        }
+      }
+
+      &:checked::before {
+        background-color: tokens.get('switch-icon-disabled');
+        mask-image: $switch-handle-icon;
+        mask-repeat: no-repeat;
+        mask-position: center;
+      }
+
+      @include utility-mx.high-contrast-mode {
+        &::after {
+          border-color: Field;
+        }
+
+        &:checked {
+          background-color: GrayText !important;
+        }
+      }
+    }
+
+    &.is-invalid {
+      border-color: transparent;
+
+      + label {
+        color: tokens.get('switch-text-enabled-fg');
+      }
+    }
+  }
+
+  &:hover > .form-check-input:not([disabled]) {
+    background-color: tokens.get('switch-element-hover-bg');
+    border-color: tokens.get('switch-element-hover-stroke');
+
+    &::after {
+      background-color: tokens.get('switch-handle-hover');
+      border-color: tokens.get('switch-handle-hover-stroke');
+    }
+
+    &:checked::before {
+      background-color: tokens.get('switch-element-hover-bg');
+    }
+
+    @include utility-mx.high-contrast-mode {
+      border-color: Highlight;
+
+      &::after {
+        background-color: CanvasText;
+      }
+    }
+  }
+
+  .form-check-label {
+    color: tokens.get('switch-text-enabled-fg');
+
+    &.order-first {
+      flex: 0 auto;
+      padding-inline-end: tokens.get('switch-gap-inline-text');
+    }
+
+    &:not(.order-first) {
+      padding-inline-start: tokens.get('switch-gap-inline-text');
+    }
+  }
+}
diff --git a/packages/styles/src/elements/reset.scss b/packages/styles/src/elements/reset.scss
index 0e2961bc26..ed0b4577ae 100644
--- a/packages/styles/src/elements/reset.scss
+++ b/packages/styles/src/elements/reset.scss
@@ -145,3 +145,9 @@ legend {
 fieldset {
   border: 0;
 }
+
+input,
+select,
+textarea {
+  margin: 0;
+}
diff --git a/packages/styles/src/functions/_forms.scss b/packages/styles/src/functions/_forms.scss
index a12ddd3d8b..183f1d7d2f 100644
--- a/packages/styles/src/functions/_forms.scss
+++ b/packages/styles/src/functions/_forms.scss
@@ -1,4 +1,7 @@
 // Source: https://kovart.github.io/dashed-border-generator/ + added stroke-vector-effect
+@use './color';
+@use '../functions/tokens';
+
 @function get-background-svg-stroke(
   $type,
   $color,
@@ -12,11 +15,13 @@
   @if ($type == 'circle') {
     $svg-additional-attributes: "rx='100' ry='100'";
   }
+  @if ($type == 'switch') {
+    $svg-additional-attributes: "rx='12' ry='12'";
+  }
   @if ($stroke-pathlength != 'initial') {
     $stroke-pathlength-attribute: " pathLength='" + $stroke-pathlength + "'";
   }
   @return "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' " +
-    $svg-additional-attributes + " fill='none' stroke='" + $color + "' stroke-width='" +
-    $stroke-width "' stroke-dasharray='" + $stroke-dasharray + "'" + $stroke-pathlength-attribute +
-    ' /%3e%3c/svg%3e';
+    $svg-additional-attributes + " fill='none' stroke='" + #{color.encode-uri-color($color)} + "' stroke-width='" +
+    $stroke-width "' stroke-dasharray='" + $stroke-dasharray + "'" + $stroke-pathlength-attribute + ' /%3e%3c/svg%3e';
 }
diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
index 9c2c9d21c5..4eb10fd3a0 100644
--- a/packages/styles/src/mixins/_utilities.scss
+++ b/packages/styles/src/mixins/_utilities.scss
@@ -98,7 +98,7 @@
 }
 
 @mixin focus-style-none {
-  outline: none;
+  outline: none !important;
 }
 
 @mixin focus-style($additional-selector: '') {
diff --git a/packages/styles/src/variables/components/_form-check.scss b/packages/styles/src/variables/components/_form-check.scss
index bd9edd9d08..3623b8676a 100644
--- a/packages/styles/src/variables/components/_form-check.scss
+++ b/packages/styles/src/variables/components/_form-check.scss
@@ -88,44 +88,3 @@ $form-check-input-radio-disabled-background-url-hcm: forms-fn.get-background-svg
   initial,
   $form-check-input-disabled-svg-border-width
 );
-
-$form-switch-column-gap: spacing.$size-regular !default;
-$form-switch-height: spacing.$size-big !default;
-$form-switch-width: 2 * spacing.$size-big !default;
-$form-switch-bg: rgba(var(--post-contrast-color-rgb), 0.3) !default;
-$form-switch-checked-bg: var(--post-success) !default;
-$form-switch-disabled-bg: color.$gray-20 !default;
-$form-switch-background-image: linear-gradient(
-  to right,
-  #{$form-switch-bg} 50%,
-  #{$form-switch-checked-bg} 50%
-) !default;
-$form-switch-color: color.$white !default;
-$form-switch-border-color: color.$gray-60 !default;
-$form-switch-checked-border-color: color.$black !default;
-$form-switch-disabled-border-color: color.$gray-40 !default;
-$form-switch-label-padding-top: ($form-switch-height - type.$line-height-copy) * 0.5 !default;
-
-// DEPRECATED
-
-$form-switch-padding-start: 0 !default;
-$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'><circle r='15' stroke='#{$form-switch-border-color}' stroke-width='2' fill='#{$form-switch-color}'/></svg>") !default;
-$form-switch-border-radius: $form-switch-width !default;
-$form-switch-transition:
-  background-position animation.$transition-base-timing,
-  background-color animation.$transition-time-default !default;
-$form-switch-checked-color: color.$white !default;
-$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'><circle r='15' stroke='#{$form-switch-checked-border-color}' stroke-width='2' fill='#{$form-switch-checked-color}'/></svg>") !default;
-$form-switch-focus-bg-image: $form-switch-checked-bg-image;
-$form-switch-checked-bg-image-size: $form-switch-height;
-$form-switch-hover-bg: rgba(var(--post-contrast-color-rgb), 0.1) !default;
-$form-switch-linear-gradient: linear-gradient(
-  to right,
-  #{$form-switch-bg} 50%,
-  #{$form-switch-checked-bg} 50%
-);
-$form-switch-linear-gradient-size: (2 * $form-switch-width - $form-switch-height)
-  $form-switch-height;
-$form-switch-label-padding-x: spacing.$size-regular !default;
-$form-switch-label-padding-start: $form-switch-label-padding-top 0 0 $form-switch-label-padding-x !default;
-$form-switch-label-padding-end: $form-switch-label-padding-top $form-switch-label-padding-x 0 0 !default;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 105e2e4650..b23ccff33b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1429,12 +1429,6 @@ packages:
     resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-transforms@7.24.9':
-    resolution: {integrity: sha512-oYbh+rtFKj/HwBQkFlUzvcybzklmVdVV3UU+mN7n2t/q3yGHbuVdNxyFvSBO1tfvjyArpHNcWMAzsSPdyI46hw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
   '@babel/helper-module-transforms@7.25.2':
     resolution: {integrity: sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==}
     engines: {node: '>=6.9.0'}
@@ -4423,9 +4417,6 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
-
   aria-query@5.3.2:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
@@ -11870,17 +11861,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.24.9(@babel/core@7.25.2)':
-    dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-module-imports': 7.25.9
-      '@babel/helper-simple-access': 7.25.9
-      '@babel/helper-split-export-declaration': 7.24.7
-      '@babel/helper-validator-identifier': 7.25.9
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-module-transforms@7.25.2(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -12339,7 +12319,7 @@ snapshots:
   '@babel/plugin-transform-modules-commonjs@7.24.7(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-module-transforms': 7.24.9(@babel/core@7.25.2)
+      '@babel/helper-module-transforms': 7.25.9(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.25.9
       '@babel/helper-simple-access': 7.24.7
     transitivePeerDependencies:
@@ -15296,10 +15276,6 @@ snapshots:
 
   argparse@2.0.1: {}
 
-  aria-query@5.3.0:
-    dependencies:
-      dequal: 2.0.3
-
   aria-query@5.3.2: {}
 
   arr-diff@1.1.0:
@@ -17148,7 +17124,7 @@ snapshots:
   eslint-plugin-jsx-a11y@6.8.0(eslint@8.57.0):
     dependencies:
       '@babel/runtime': 7.25.0
-      aria-query: 5.3.0
+      aria-query: 5.3.2
       array-includes: 3.1.8
       array.prototype.flatmap: 1.3.2
       ast-types-flow: 0.0.8