diff --git a/packages/ckeditor5-ui/theme/components/autocomplete/autocomplete.css b/packages/ckeditor5-ui/theme/components/autocomplete/autocomplete.css
index 87f9909ea7e..0d8c2d30757 100644
--- a/packages/ckeditor5-ui/theme/components/autocomplete/autocomplete.css
+++ b/packages/ckeditor5-ui/theme/components/autocomplete/autocomplete.css
@@ -3,36 +3,51 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	/* Size */
+	--ck-autocomplete-results-max-height: 200px;
+
+	/* Radius */
+	/* Set to a radius value (e.g. var(--ck-radius-base)) to disable attached-corner behavior and use uniform corners. */
+	--ck-autocomplete-results-uniform-border-radius: var(--ck-border-radius-uniform);
+	--ck-autocomplete-results-border-radius: var(--ck-border-radius-surface-attached);
+
+	/* Border */
+	--ck-autocomplete-results-border: var(--ck-border-width-surface) solid var(--ck-dropdown-panel-border-color);
+
+	/* Color */
+	--ck-autocomplete-results-background-color: var(--ck-color-surface-container);
+}
+
 .ck.ck-autocomplete {
 	& > .ck-search__results {
-		border-radius: var(--ck-rounded-corners-radius);
-		box-shadow: var(--ck-drop-shadow), 0 0;
-		max-height: 200px;
+		border-radius: var(--ck-autocomplete-results-border-radius);
+		box-shadow: var(--ck-shadow-surface-floating), 0 0;
+		max-height: var(--ck-autocomplete-results-max-height);
 		overflow-y: auto;
-		background: var(--ck-color-base-background);
-		border: 1px solid var(--ck-color-dropdown-panel-border);
+		background: var(--ck-autocomplete-results-background-color);
+		border: var(--ck-autocomplete-results-border);
 		min-width: auto;
 		position: absolute;
 
 		&.ck-search__results_n {
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
+			border-radius: var(--ck-autocomplete-results-uniform-border-radius, var(--ck-border-radius-surface-attached-bottom));
 
 			/* Prevent duplicated borders between the input and the results pane. */
-			margin-bottom: -1px;
+			margin-bottom: calc(-1 * var(--ck-border-width-surface));
 			bottom: 100%;
 		}
 
 		&.ck-search__results_s {
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
+			border-radius: var(--ck-autocomplete-results-uniform-border-radius, var(--ck-border-radius-surface-attached-top));
 
 			/* Prevent duplicated borders between the input and the results pane. */
-			margin-top: -1px;
+			margin-top: calc(-1 * var(--ck-border-width-surface));
 			top: 100%;
 			bottom: auto;
 		}
-		z-index: var(--ck-z-panel)
+		/* Backward compatibility: falls back to legacy --ck-z-panel if overridden. */
+		z-index: var(--ck-z-panel, var(--ck-z-overlay))
 	}
 	position: relative
 }
diff --git a/packages/ckeditor5-ui/theme/components/button/button.css b/packages/ckeditor5-ui/theme/components/button/button.css
index 4640936cb74..a8aca4d24b6 100644
--- a/packages/ckeditor5-ui/theme/components/button/button.css
+++ b/packages/ckeditor5-ui/theme/components/button/button.css
@@ -3,12 +3,48 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	/* Spacing */
+	--ck-button-padding: var(--ck-spacing-control-padding-block);
+
+	/* Radius */
+	--ck-button-border-radius: var(--ck-border-radius-control);
+
+	/* Border */
+	--ck-button-border: var(--ck-border-width-control) solid transparent;
+
+	/* Color */
+	--ck-button-default-background-color: transparent;
+	--ck-button-default-hover-background-color: var(--ck-color-interactive-hover-surface);
+	--ck-button-default-active-background-color: var(--ck-color-interactive-active-surface);
+	--ck-button-default-disabled-background-color: transparent;
+	--ck-button-on-background-color: var(--ck-color-interactive-selected-surface);
+	--ck-button-on-hover-background-color: var(--ck-color-interactive-selected-surface-hover);
+	--ck-button-on-active-background-color: var(--ck-color-interactive-selected-surface-hover);
+	/* Intentionally hardcoded: no matching semantic disabled surface exists yet. */
+	--ck-button-on-disabled-background-color: hsl(211, 15%, 95%);
+	--ck-button-on-text-color: var(--ck-color-interactive-selected-text);
+	--ck-button-action-background-color: var(--ck-color-interactive-primary-surface);
+	--ck-button-action-hover-background-color: var(--ck-color-interactive-primary-surface-hover);
+	--ck-button-action-active-background-color: var(--ck-color-interactive-primary-surface-hover);
+	/* Intentionally hardcoded: a faded variant of the action color with no semantic equivalent yet. */
+	--ck-button-action-disabled-background-color: hsl(104, 44%, 58%);
+	--ck-button-action-text-color: var(--ck-color-interactive-primary-text);
+	--ck-button-save-color: var(--ck-color-feedback-success);
+	--ck-button-cancel-color: var(--ck-color-feedback-warning);
+
+	/* State / meta */
+	--ck-button-focus-border-color: var(--ck-interactive-focus-border-color);
+	/* Backward compatibility: falls back to legacy --ck-disabled-opacity if overridden. */
+	--ck-button-opacity-disabled: var(--ck-disabled-opacity, var(--ck-opacity-disabled))
+}
+
 .ck.ck-button,
 a.ck.ck-button {
-	--ck-button-background: var(--ck-color-button-default-background);
-	--ck-button-hover-background: var(--ck-color-button-default-hover-background);
-	--ck-button-active-background: var(--ck-color-button-default-active-background);
-	--ck-button-disabled-background: var(--ck-color-button-default-disabled-background);
+	--ck-button-background: var(--ck-button-default-background-color);
+	--ck-button-hover-background: var(--ck-button-default-hover-background-color);
+	--ck-button-active-background: var(--ck-button-default-active-background-color);
+	--ck-button-disabled-background: var(--ck-button-default-disabled-background-color);
 
 	background: var(--ck-button-background);
 
@@ -22,16 +58,16 @@ a.ck.ck-button {
 		}
 	}
 
-	border-radius: var(--ck-rounded-corners-radius);
+	border-radius: var(--ck-button-border-radius);
 	white-space: nowrap;
 	cursor: default;
 	vertical-align: middle;
-	padding: var(--ck-spacing-tiny);
+	padding: var(--ck-button-padding);
 	text-align: center;
 
 	/* A very important piece of styling. Go to variable declaration to learn more. */
-	min-width: var(--ck-ui-component-min-height);
-	min-height: var(--ck-ui-component-min-height);
+	min-width: var(--ck-size-control-min-height);
+	min-height: var(--ck-size-control-min-height);
 
 	/* Normalize the height of the line. Removing this will break consistent height
 	among text and text-less buttons (with icons). */
@@ -41,10 +77,10 @@ a.ck.ck-button {
 	font-size: inherit;
 
 	/* Avoid flickering when the foucs border shows up. */
-	border: 1px solid transparent;
+	border: var(--ck-button-border);
 
 	/* Apply some smooth transition to the box-shadow and border. */
-	transition: box-shadow .2s ease-in-out, border .2s ease-in-out;
+	transition: box-shadow var(--ck-transition-duration-control) var(--ck-transition-timing-function-control), border var(--ck-transition-duration-control) var(--ck-transition-timing-function-control);
 
 	/* https://github.com/ckeditor/ckeditor5/issues/3414 */
 	-webkit-appearance: none;
@@ -56,15 +92,15 @@ a.ck.ck-button {
 	align-items: center;
 
 	@media (prefers-reduced-motion: reduce) {
-		transition: none;
+		transition: var(--ck-transition-none);
 	}
 
 	/* stylelint-disable no-descending-specificity */
 	&:active,
 	&:focus {
 		outline: none;
-		border: var(--ck-focus-ring);
-		box-shadow: var(--ck-focus-outer-shadow), 0 0;
+		border-color: var(--ck-button-focus-border-color);
+		box-shadow: var(--ck-interactive-focus-shadow), 0 0;
 	}
 
 	/* Allow icon coloring using the text "color" property. */
@@ -78,7 +114,7 @@ a.ck.ck-button {
 	& .ck-button__label {
 		/* Enable font size inheritance, which allows fluid UI scaling. */
 		font-size: inherit;
-		font-weight: inherit;
+		font-weight: var(--ck-font-weight-ui-inherit);
 		color: inherit;
 		cursor: inherit;
 
@@ -102,11 +138,11 @@ a.ck.ck-button {
 		opacity: .5;
 
 		[dir="ltr"] & {
-			margin-left: var(--ck-spacing-large);
+			margin-left: var(--ck-spacing-control-meta-gap);
 		}
 
 		[dir="rtl"] & {
-			margin-right: var(--ck-spacing-large);
+			margin-right: var(--ck-spacing-control-meta-gap);
 		}
 	}
 
@@ -117,16 +153,16 @@ a.ck.ck-button {
 		&:active,
 		&:focus {
 			/* The disabled button should have a slightly less visible shadow when focused. */
-			box-shadow: var(--ck-focus-disabled-outer-shadow), 0 0;
+			box-shadow: var(--ck-interactive-focus-disabled-shadow), 0 0;
 		}
 
 		& .ck-button__icon {
-			opacity: var(--ck-disabled-opacity);
+			opacity: var(--ck-button-opacity-disabled);
 		}
 
 		/* https://github.com/ckeditor/ckeditor5/issues/3376 */
 		& .ck-button__label {
-			opacity: var(--ck-disabled-opacity);
+			opacity: var(--ck-button-opacity-disabled);
 		}
 
 		& .ck-button__keystroke {
@@ -135,15 +171,15 @@ a.ck.ck-button {
 	}
 
 	&.ck-button_with-text {
-		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
+		padding: var(--ck-spacing-control-padding-block) var(--ck-spacing-control-padding-inline);
 
 		& .ck-button__icon {
 			[dir="ltr"] & {
-				margin-right: var(--ck-spacing-medium);
+				margin-right: var(--ck-spacing-control-icon-gap);
 			}
 
 			[dir="rtl"] & {
-				margin-left: var(--ck-spacing-medium);
+				margin-left: var(--ck-spacing-control-icon-gap);
 			}
 		}
 		& .ck-button__label {
@@ -160,20 +196,20 @@ a.ck.ck-button {
 
 	/* A style of the button which is currently on, e.g. its feature is active. */
 	&.ck-on {
-		--ck-button-background: var(--ck-color-button-on-background);
-		--ck-button-hover-background: var(--ck-color-button-on-hover-background);
-		--ck-button-active-background: var(--ck-color-button-on-active-background);
-		--ck-button-disabled-background: var(--ck-color-button-on-disabled-background);
+		--ck-button-background: var(--ck-button-on-background-color);
+		--ck-button-hover-background: var(--ck-button-on-hover-background-color);
+		--ck-button-active-background: var(--ck-button-on-active-background-color);
+		--ck-button-disabled-background: var(--ck-button-on-disabled-background-color);
 
-		color: var(--ck-color-button-on-color);
+		color: var(--ck-button-on-text-color);
 	}
 
 	&.ck-button-save {
-		color: var(--ck-color-button-save);
+		color: var(--ck-button-save-color);
 	}
 
 	&.ck-button-cancel {
-		color: var(--ck-color-button-cancel);
+		color: var(--ck-button-cancel-color);
 	}
 
 	/* stylelint-disable no-descending-specificity */
@@ -196,15 +232,15 @@ a.ck.ck-button {
 
 .ck.ck-button-action,
 a.ck.ck-button-action {
-	--ck-button-background: var(--ck-color-button-action-background);
-	--ck-button-hover-background: var(--ck-color-button-action-hover-background);
-	--ck-button-active-background: var(--ck-color-button-action-active-background);
-	--ck-button-disabled-background: var(--ck-color-button-action-disabled-background);
+	--ck-button-background: var(--ck-button-action-background-color);
+	--ck-button-hover-background: var(--ck-button-action-hover-background-color);
+	--ck-button-active-background: var(--ck-button-action-active-background-color);
+	--ck-button-disabled-background: var(--ck-button-action-disabled-background-color);
 
-	color: var(--ck-color-button-action-text);
+	color: var(--ck-button-action-text-color);
 }
 
 .ck.ck-button-bold,
 a.ck.ck-button-bold {
-	font-weight: bold;
+	font-weight: var(--ck-font-weight-ui-emphasis);
 }
diff --git a/packages/ckeditor5-ui/theme/components/button/listitembutton.css b/packages/ckeditor5-ui/theme/components/button/listitembutton.css
index b91d13264c4..0adcf98800a 100644
--- a/packages/ckeditor5-ui/theme/components/button/listitembutton.css
+++ b/packages/ckeditor5-ui/theme/components/button/listitembutton.css
@@ -4,22 +4,30 @@
  */
 
 
+:root {
+	/* Spacing */
+	--ck-list-item-button-padding: var(--ck-spacing-control-padding-block) calc(2 * var(--ck-spacing-control-padding-inline));
+
+	/* Radius */
+	--ck-list-item-button-border-radius: 0;
+}
+
 .ck.ck-button.ck-list-item-button {
-	padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
+	padding: var(--ck-list-item-button-padding);
 
 	&,
 	&.ck-on {
-		background: var(--ck-color-list-background);
+		background: var(--ck-list-background-color);
 		color: var(--ck-color-text);
 	}
 
 	&:has(.ck-list-item-button__check-holder) {
 		[dir="ltr"] & {
-			padding-left: var(--ck-spacing-small);
+			padding-left: var(--ck-spacing-control-padding-inline-compact);
 		}
 
 		[dir="rtl"] & {
-			padding-right: var(--ck-spacing-small);
+			padding-right: var(--ck-spacing-control-padding-inline-compact);
 		}
 	}
 
@@ -32,7 +40,7 @@
 	&.ck-button.ck-on:hover,
 	&.ck-on:not(.ck-list-item-button_toggleable),
 	&.ck-on:hover {
-		background: var(--ck-color-list-button-hover-background);
+		background: var(--ck-list-button-hover-background-color);
 
 		&:not(.ck-disabled) {
 			color: var(--ck-color-text);
@@ -43,7 +51,7 @@
 .ck.ck-list-item-button {
 	min-height: unset;
 	width: 100%;
-	border-radius: 0;
+	border-radius: var(--ck-list-item-button-border-radius);
 
 	[dir="ltr"] & {
 		text-align: left;
@@ -55,11 +63,11 @@
 
 	&.ck-list-item-button_toggleable {
 		[dir="ltr"] & {
-			padding-left: var(--ck-spacing-small);
+			padding-left: var(--ck-spacing-control-padding-inline-compact);
 		}
 
 		[dir="rtl"] & {
-			padding-right: var(--ck-spacing-small);
+			padding-right: var(--ck-spacing-control-padding-inline-compact);
 		}
 	}
 
@@ -69,11 +77,11 @@
 		height: .9em;
 
 		[dir="ltr"] & {
-			margin-right: var(--ck-spacing-small);
+			margin-right: var(--ck-spacing-control-padding-inline-compact);
 		}
 
 		[dir="rtl"] & {
-			margin-left: var(--ck-spacing-small);
+			margin-left: var(--ck-spacing-control-padding-inline-compact);
 		}
 	}
 
diff --git a/packages/ckeditor5-ui/theme/components/button/switchbutton.css b/packages/ckeditor5-ui/theme/components/button/switchbutton.css
index aa4c62567b5..55518be3bfc 100644
--- a/packages/ckeditor5-ui/theme/components/button/switchbutton.css
+++ b/packages/ckeditor5-ui/theme/components/button/switchbutton.css
@@ -4,16 +4,16 @@
  */
 
 :root {
-	/* 34px at 13px font-size */
-	--ck-switch-button-toggle-width: 2.6153846154em;
-	/* 14px at 13px font-size */
-	--ck-switch-button-toggle-inner-size: calc(1.0769230769em + 1px);
-	--ck-switch-button-translation: calc(
-		var(--ck-switch-button-toggle-width) -
-		var(--ck-switch-button-toggle-inner-size) -
-		2px /* Border */
-	);
-	--ck-switch-button-inner-hover-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow);
+	/* Radius */
+	--ck-switch-button-toggle-border-radius: var(--ck-border-radius-control);
+	--ck-switch-button-toggle-inner-border-radius: calc(.5 * var(--ck-switch-button-toggle-border-radius));
+
+	/* Color */
+	--ck-switch-button-off-background-color: hsl(0, 0%, 57.6%);
+	--ck-switch-button-off-hover-background-color: hsl(0, 0%, 49%);
+	--ck-switch-button-on-background-color: var(--ck-button-action-background-color);
+	--ck-switch-button-on-hover-background-color: var(--ck-color-interactive-primary-surface-hover);
+	--ck-switch-button-inner-background-color: var(--ck-color-surface-canvas);
 }
 
 .ck.ck-button.ck-switchbutton {
@@ -29,24 +29,29 @@
 	& .ck-button__label {
 		[dir="ltr"] & {
 			/* Separate the label from the switch */
-			margin-right: calc(2 * var(--ck-spacing-large));
+			margin-right: calc(2 * var(--ck-spacing-control-meta-gap));
 		}
 
 		[dir="rtl"] & {
 			/* Separate the label from the switch */
-			margin-left: calc(2 * var(--ck-spacing-large));
+			margin-left: calc(2 * var(--ck-spacing-control-meta-gap));
 		}
 	}
 
 	& .ck-button__toggle {
-		border-radius: var(--ck-rounded-corners-radius);
+		border-radius: var(--ck-switch-button-toggle-border-radius);
 
 		/* Apply some smooth transition to the box-shadow and border. */
 		/* Gently animate the background color of the toggle switch */
-		transition: background 400ms ease, box-shadow .2s ease-in-out, outline .2s ease-in-out;
-		border: 1px solid transparent;
-		width: var(--ck-switch-button-toggle-width);
-		background: var(--ck-color-switch-button-off-background);
+		transition:
+			background var(--ck-duration-slower) var(--ck-transition-timing-function-surface),
+			box-shadow var(--ck-transition-duration-control) var(--ck-transition-timing-function-control),
+			outline var(--ck-transition-duration-control) var(--ck-transition-timing-function-control);
+		border: var(--ck-border-width-control) solid transparent;
+		/* Backward compatibility: falls back to legacy --ck-switch-button-toggle-width if overridden. */
+		/* 34px at 13px font-size */
+		width: var(--ck-switch-button-toggle-width, 2.6153846154em);
+		background: var(--ck-switch-button-off-background-color);
 
 		[dir="ltr"] & {
 			/* Make sure the toggle is always to the right as far as possible. */
@@ -59,32 +64,36 @@
 		}
 
 		& .ck-button__toggle__inner {
-			border-radius: calc(.5 * var(--ck-rounded-corners-radius));
-			width: var(--ck-switch-button-toggle-inner-size);
-			height: var(--ck-switch-button-toggle-inner-size);
-			background: var(--ck-color-switch-button-inner-background);
+			border-radius: var(--ck-switch-button-toggle-inner-border-radius);
+			/* Backward compatibility: falls back to legacy --ck-switch-button-toggle-inner-size if overridden. */
+			/* 14px at 13px font-size + 1px */
+			width: var(--ck-switch-button-toggle-inner-size, calc(1.0769230769em + 1px));
+			height: var(--ck-switch-button-toggle-inner-size, calc(1.0769230769em + 1px));
+			background: var(--ck-switch-button-inner-background-color);
 
 			/* Gently animate the inner part of the toggle switch */
-			transition: all 300ms ease;
+			transition: all var(--ck-transition-duration-control-emphasized) var(--ck-transition-timing-function-surface);
 
 			@media (prefers-reduced-motion: reduce) {
-				transition: none;
+				transition: var(--ck-transition-none);
 			}
 			display: block
 		}
 
 		&:hover {
-			background: var(--ck-color-switch-button-off-hover-background);
+			background: var(--ck-switch-button-off-hover-background-color);
 
 			& .ck-button__toggle__inner {
-				box-shadow: var(--ck-switch-button-inner-hover-shadow);
+				/* Backward compatibility: falls back to legacy --ck-switch-button-inner-hover-shadow if overridden. */
+				box-shadow: var(--ck-switch-button-inner-hover-shadow, 0 0 0 5px hsla(0, 0%, 0%, 0.1));
 			}
 		}
 		display: block
 	}
 
 	&.ck-disabled .ck-button__toggle {
-		opacity: var(--ck-disabled-opacity);
+		/* Backward compatibility: falls back to legacy --ck-disabled-opacity if overridden. */
+		opacity: var(--ck-disabled-opacity, var(--ck-opacity-disabled));
 	}
 
 	/* Overriding default .ck-button:focus styles + an outline around the toogle */
@@ -94,31 +103,33 @@
 		box-shadow: none;
 
 		& .ck-button__toggle {
-			box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 5px var(--ck-color-focus-outer-shadow);
+			box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 5px var(--ck-color-interactive-focus-shadow);
 			outline-offset: 1px;
-			outline: var(--ck-focus-ring);
+			outline: var(--ck-interactive-focus-ring);
 		}
 	}
 
 	/* stylelint-disable-next-line no-descending-specificity */
 	&.ck-on {
 		& .ck-button__toggle {
-			background: var(--ck-color-switch-button-on-background);
+			background: var(--ck-switch-button-on-background-color);
 
 			&:hover {
-				background: var(--ck-color-switch-button-on-hover-background);
+				background: var(--ck-switch-button-on-hover-background-color);
 			}
 
 			& .ck-button__toggle__inner {
 				/*
 				* Move the toggle switch to the right. It will be animated.
+				* Translation = toggle-width - inner-size - 2 * border-width
+				* = 2.6153846154em - (1.0769230769em + 1px) - 2 * border-width-control
 				*/
 				[dir="ltr"] & {
-					transform: translateX( var( --ck-switch-button-translation ) );
+					transform: translateX(calc(2.6153846154em - (1.0769230769em + 1px) - 2 * var(--ck-border-width-control)));
 				}
 
 				[dir="rtl"] & {
-					transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) );
+					transform: translateX(calc(-1 * (2.6153846154em - (1.0769230769em + 1px) - 2 * var(--ck-border-width-control))));
 				}
 			}
 		}
diff --git a/packages/ckeditor5-ui/theme/components/collapsible/collapsible.css b/packages/ckeditor5-ui/theme/components/collapsible/collapsible.css
index aab8abf2e95..78c5e5aabd8 100644
--- a/packages/ckeditor5-ui/theme/components/collapsible/collapsible.css
+++ b/packages/ckeditor5-ui/theme/components/collapsible/collapsible.css
@@ -4,13 +4,17 @@
  */
 
 :root {
-	--ck-collapsible-arrow-size: calc(0.5 * var(--ck-icon-size));
+	/* Spacing */
+	--ck-collapsible-children-padding: var(--ck-spacing-surface-section-gap-block) var(--ck-spacing-control-meta-gap) var(--ck-spacing-region-edge-margin-block);
+
+	/* Typography */
+	--ck-collapsible-button-font-weight: var(--ck-font-weight-ui-strong);
 }
 
 .ck.ck-collapsible {
 	& > .ck.ck-button {
 		width: 100%;
-		font-weight: bold;
+		font-weight: var(--ck-collapsible-button-font-weight);
 		border-radius: 0;
 		color: inherit;
 
@@ -25,13 +29,14 @@
 		}
 
 		& > .ck-icon {
-			margin-right: var(--ck-spacing-medium);
-			width: var(--ck-collapsible-arrow-size);
+			margin-right: var(--ck-spacing-control-icon-gap);
+			/* Backward compatibility: falls back to legacy --ck-collapsible-arrow-size if overridden. */
+			width: var(--ck-collapsible-arrow-size, calc(0.5 * var(--ck-icon-size)));
 		}
 	}
 
 	& > .ck-collapsible__children {
-		padding: var(--ck-spacing-medium) var(--ck-spacing-large) var(--ck-spacing-large);
+		padding: var(--ck-collapsible-children-padding);
 	}
 
 	&.ck-collapsible_collapsed {
diff --git a/packages/ckeditor5-ui/theme/components/colorgrid/colorgrid.css b/packages/ckeditor5-ui/theme/components/colorgrid/colorgrid.css
index 5931b50ba84..0a24e15147b 100644
--- a/packages/ckeditor5-ui/theme/components/colorgrid/colorgrid.css
+++ b/packages/ckeditor5-ui/theme/components/colorgrid/colorgrid.css
@@ -5,22 +5,34 @@
 
 
 :root {
+	/* Size */
 	--ck-color-grid-tile-size: 24px;
 
-	/* Not using global colors here because these may change but some colors in a pallette
-	 * require special treatment. For instance, this ensures no matter what the UI text color is,
-	 * the check icon will look good on the black color tile. */
-	--ck-color-color-grid-check-icon: hsl(212, 81%, 46%);
+	/* Spacing */
+	--ck-color-grid-gap: 5px;
+	--ck-color-grid-margin: 0;
+	--ck-color-grid-padding: 8px;
+
+	/* Radius */
+	--ck-color-grid-tile-border-radius: 0;
+
+	/* Motion */
+	--ck-color-grid-tile-hover-transform: none;
+
+	/* State / meta */
+	--ck-color-grid-tile-hover-layer: auto;
 }
 
 .ck.ck-color-grid {
-	grid-gap: 5px;
-	padding: 8px;
+	grid-gap: var(--ck-color-grid-gap);
+	margin: var(--ck-color-grid-margin);
+	padding: var(--ck-color-grid-padding);
 	display: grid;
 }
 
 .ck.ck-color-grid__tile {
-	transition: .2s ease box-shadow;
+	border-radius: var(--ck-color-grid-tile-border-radius);
+	transition: box-shadow var(--ck-transition-duration-control) var(--ck-transition-timing-function-surface);
 
 	@media (forced-colors: none) {
 		width: var(--ck-color-grid-tile-size);
@@ -45,9 +57,16 @@
 			box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text);
 		}
 
-		&:focus:not( .ck-disabled ),
 		&:hover:not( .ck-disabled ) {
-			box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
+			z-index: var(--ck-color-grid-tile-hover-layer);
+			box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-interactive-focus-border);
+			transform: var(--ck-color-grid-tile-hover-transform);
+		}
+
+		&:focus:not( .ck-disabled ) {
+			z-index: var(--ck-color-grid-tile-hover-layer);
+			box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-interactive-focus-border);
+			transform: var(--ck-color-grid-tile-hover-transform);
 		}
 	}
 
@@ -60,7 +79,7 @@
 		height: unset;
 		min-width: unset;
 		min-height: unset;
-		padding: 0 var(--ck-spacing-small);
+		padding: 0 var(--ck-spacing-surface-padding-inline);
 
 		& .ck-button__label {
 			display: inline-block;
@@ -68,7 +87,7 @@
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		transition: none;
+		transition: var(--ck-transition-none);
 	}
 
 	&.ck-disabled {
@@ -78,7 +97,8 @@
 
 	& .ck.ck-icon {
 		display: none;
-		color: var(--ck-color-color-grid-check-icon);
+		/* Fallback to `--ck-color-color-grid-check-icon` for backward compatibility. */
+		color: var(--ck-color-color-grid-check-icon, hsl(212, 81%, 46%));
 	}
 
 	&.ck-on {
@@ -89,5 +109,5 @@
 }
 
 .ck.ck-color-grid__label {
-	padding: 0 var(--ck-spacing-standard);
+	padding: 0 var(--ck-spacing-control-padding-inline);
 }
diff --git a/packages/ckeditor5-ui/theme/components/colorpicker/colorpicker.css b/packages/ckeditor5-ui/theme/components/colorpicker/colorpicker.css
index a79eee525f9..0ccb386d1b8 100644
--- a/packages/ckeditor5-ui/theme/components/colorpicker/colorpicker.css
+++ b/packages/ckeditor5-ui/theme/components/colorpicker/colorpicker.css
@@ -16,7 +16,7 @@
 	flex-direction: row;
 	flex-wrap: nowrap;
 	justify-content: space-between;
-	margin: var(--ck-spacing-large) 0 0;
+	margin: var(--ck-spacing-region-edge-margin-block) 0 0;
 	width: unset;
 
 	& .ck.ck-labeled-field-view {
@@ -28,7 +28,7 @@
 	}
 
 	& .ck-color-picker__hash-view {
-		padding-top: var(--ck-spacing-tiny);
-		padding-right: var(--ck-spacing-medium);
+		padding-top: var(--ck-spacing-control-padding-block);
+		padding-right: var(--ck-spacing-control-icon-gap);
 	}
 }
diff --git a/packages/ckeditor5-ui/theme/components/colorselector/colorselector.css b/packages/ckeditor5-ui/theme/components/colorselector/colorselector.css
index c598284bfa2..2b23e34b011 100644
--- a/packages/ckeditor5-ui/theme/components/colorselector/colorselector.css
+++ b/packages/ckeditor5-ui/theme/components/colorselector/colorselector.css
@@ -3,8 +3,18 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	/* Spacing */
+	--ck-color-selector-padding: 0;
+
+	/* Radius */
+	/* Set to a radius value (e.g. var(--ck-radius-base)) to disable attached-corner behavior and use uniform corners. */
+	--ck-color-selector-uniform-border-radius: var(--ck-border-radius-uniform);
+}
 
 .ck.ck-color-selector {
+	padding: var(--ck-color-selector-padding);
+
 	/* View fragment with color grids. */
 	& .ck-color-grids-fragment {
 		& .ck-button.ck-color-selector__remove-color,
@@ -20,27 +30,26 @@
 
 		/* stylelint-disable-next-line no-descending-specificity */
 		& .ck-button.ck-color-selector__color-picker {
-			padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
+			padding: calc(var(--ck-spacing-control-padding-inline) / 2) var(--ck-spacing-control-padding-inline);
+			border-radius: var(--ck-color-selector-uniform-border-radius, var(--ck-border-radius-surface-attached-top));
 
 			&:not(:focus) {
-				border-top: 1px solid var(--ck-color-base-border);
+				border-top: var(--ck-border-width-divider) solid var(--ck-color-base-border);
 			}
 
 			& .ck.ck-icon {
 				[dir="ltr"] & {
-					margin-right: var(--ck-spacing-standard);
+					margin-right: var(--ck-spacing-control-padding-inline);
 				}
 
 				[dir="rtl"] & {
-					margin-left: var(--ck-spacing-standard);
+					margin-left: var(--ck-spacing-control-padding-inline);
 				}
 			}
 		}
 
 		& label.ck.ck-color-grid__label {
-			font-weight: unset;
+			font-weight: var(--ck-font-weight-ui-inherit);
 		}
 	}
 
@@ -54,11 +63,11 @@
 				min-width: 180px;
 
 				&::part(saturation) {
-					border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
+					border-radius: var(--ck-border-radius-surface) var(--ck-border-radius-surface) 0 0;
 				}
 
 				&::part(hue) {
-					border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius);
+					border-radius: 0 0 var(--ck-border-radius-surface) var(--ck-border-radius-surface);
 				}
 
 				&::part(saturation-pointer),
@@ -81,7 +90,4 @@
 			}
 		}
 	}
-	/* View fragment with color grids. */
-
-	/* View fragment with a color picker. */
 }
diff --git a/packages/ckeditor5-ui/theme/components/dialog/dialog.css b/packages/ckeditor5-ui/theme/components/dialog/dialog.css
index 632554df3c0..1330359203e 100644
--- a/packages/ckeditor5-ui/theme/components/dialog/dialog.css
+++ b/packages/ckeditor5-ui/theme/components/dialog/dialog.css
@@ -4,18 +4,26 @@
  */
 
 :root {
-	--ck-dialog-overlay-background-color: hsla( 0, 0%, 0%, .5 );
-	--ck-dialog-drop-shadow: 0px 0px 6px 2px hsl(0deg 0% 0% / 15%);
-	--ck-dialog-max-width: 100vw;
+	/* Size */
 	--ck-dialog-max-height: 90vh;
-	--ck-color-dialog-background: var(--ck-color-base-background);
-	--ck-color-dialog-form-header-border: var(--ck-color-base-border);
+	--ck-dialog-max-width: 100vw;
+
+	/* Radius */
+	--ck-dialog-border-radius: var(--ck-border-radius-surface);
+
+	/* Border */
+	--ck-dialog-border: var(--ck-border-width-surface) solid var(--ck-color-border-container);
+
+	/* Color */
+	--ck-dialog-background-color: var(--ck-custom-background, var(--ck-color-surface-container));
+	--ck-dialog-overlay-background-color: hsla( 0, 0%, 0%, .5 );
 }
 
 .ck.ck-dialog-overlay {
-	animation: ck-dialog-fade-in .3s;
+	animation: ck-dialog-fade-in var(--ck-animation-duration-surface-entrance);
 	background: var(--ck-dialog-overlay-background-color);
-	z-index: var(--ck-z-dialog);
+	/* Backward compatibility: falls back to legacy --ck-z-dialog if overridden. */
+	z-index: var(--ck-z-dialog, var(--ck-z-modal));
 	user-select: none;
 	overscroll-behavior: none;
 
@@ -27,28 +35,28 @@
 
 	&.ck-dialog-overlay__transparent {
 		pointer-events: none;
-		animation: none;
+		animation: var(--ck-animation-none);
 		background: none;
 	}
 }
 
 .ck.ck-dialog {
-	border-radius: var(--ck-rounded-corners-radius);
-	box-shadow: var(--ck-drop-shadow), 0 0;
-
-	--ck-drop-shadow: var(--ck-dialog-drop-shadow);
+	border-radius: var(--ck-dialog-border-radius);
+	/* Backward compatibility: falls back to legacy --ck-dialog-drop-shadow if overridden. */
+	box-shadow: var(--ck-dialog-drop-shadow, 0px 0px 6px 2px hsl(0deg 0% 0% / 15%)), 0 0;
 
-	background: var(--ck-color-dialog-background);
+	background: var(--ck-dialog-background-color);
 	max-height: var(--ck-dialog-max-height);
 	max-width: var(--ck-dialog-max-width);
-	border: 1px solid var(--ck-color-base-border);
+	border: var(--ck-dialog-border);
 	overscroll-behavior: contain;
 	overscroll-behavior: none;
 	width: fit-content;
 	position: absolute;
 
 	& .ck.ck-form__header {
-		border-bottom: 1px solid var(--ck-color-dialog-form-header-border);
+		/* Backward compatibility: falls back to legacy --ck-color-dialog-form-header-border if overridden. */
+		border-bottom: var(--ck-color-dialog-form-header-border, var(--ck-border-width-surface) solid var(--ck-custom-border, var(--ck-color-border-container)));
 		flex-shrink: 0;
 	}
 
diff --git a/packages/ckeditor5-ui/theme/components/dialog/dialogactions.css b/packages/ckeditor5-ui/theme/components/dialog/dialogactions.css
index 0c0bce4ec3d..2236eae281c 100644
--- a/packages/ckeditor5-ui/theme/components/dialog/dialogactions.css
+++ b/packages/ckeditor5-ui/theme/components/dialog/dialogactions.css
@@ -5,11 +5,11 @@
 
 .ck.ck-dialog {
 	& .ck.ck-dialog__actions {
-		padding: var(--ck-spacing-large);
+		padding: var(--ck-spacing-region-edge-margin-block);
 		display: flex;
 
 		& > * + * {
-			margin-left: var(--ck-spacing-large);
+			margin-left: var(--ck-spacing-region-edge-margin-block);
 		}
 		justify-content: flex-end
 	}
diff --git a/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css b/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css
index c348dfc31f1..40e95c3de84 100644
--- a/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css
+++ b/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css
@@ -4,8 +4,24 @@
  */
 
 :root {
+	/* Size */
 	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
-	--ck-dropdown-max-width: 75vw;
+
+	/* Spacing */
+	--ck-dropdown-panel-padding: 0;
+
+	/* Radius */
+	/* Set to a radius value (e.g. var(--ck-radius-base)) to disable attached-corner behavior and use uniform corners. */
+	--ck-dropdown-panel-uniform-border-radius: var(--ck-border-radius-uniform);
+	--ck-dropdown-panel-border-radius: var(--ck-border-radius-surface-attached);
+
+	/* Color */
+	--ck-dropdown-panel-background-color: var(--ck-color-surface-container);
+	--ck-dropdown-panel-border-color: var(--ck-color-border-container);
+	--ck-dropdown-list-background-color: transparent;
+
+	/* Border */
+	--ck-dropdown-panel-border: var(--ck-border-width-surface) solid var(--ck-dropdown-panel-border-color);
 }
 
 .ck.ck-dropdown {
@@ -17,43 +33,44 @@
 	& .ck-dropdown__arrow {
 		width: var(--ck-dropdown-arrow-size);
 		pointer-events: none;
-		z-index: var(--ck-z-default);
+		z-index: var(--ck-layer-base);
 	}
 
 	[dir="ltr"] & {
 		& .ck-dropdown__arrow {
-			right: var(--ck-spacing-standard);
+			right: var(--ck-spacing-control-padding-inline);
 
 			/* A space to accommodate the triangle. */
-			margin-left: var(--ck-spacing-standard);
+			margin-left: var(--ck-spacing-control-padding-inline);
 		}
 	}
 
 	[dir="rtl"] & {
 		& .ck-dropdown__arrow {
-			left: var(--ck-spacing-standard);
+			left: var(--ck-spacing-control-padding-inline);
 
 			/* A space to accommodate the triangle. */
-			margin-right: var(--ck-spacing-small);
+			margin-right: var(--ck-spacing-control-padding-inline-compact);
 		}
 	}
 
 	&.ck-disabled .ck-dropdown__arrow {
-		opacity: var(--ck-disabled-opacity);
+		/* Backward compatibility: falls back to legacy --ck-disabled-opacity if overridden. */
+		opacity: var(--ck-disabled-opacity, var(--ck-opacity-disabled));
 	}
 
 	& .ck-button.ck-dropdown__button {
 		[dir="ltr"] & {
 			&:not(.ck-button_with-text) {
 				/* Make sure dropdowns with just an icon have the right inner spacing */
-				padding-left: var(--ck-spacing-small);
+				padding-left: var(--ck-spacing-control-padding-inline-compact);
 			}
 		}
 
 		[dir="rtl"] & {
 			&:not(.ck-button_with-text) {
 				/* Make sure dropdowns with just an icon have the right inner spacing */
-				padding-right: var(--ck-spacing-small);
+				padding-right: var(--ck-spacing-control-padding-inline-compact);
 			}
 		}
 
@@ -66,13 +83,13 @@
 
 		/* https://github.com/ckeditor/ckeditor5/issues/3362 */
 		&.ck-disabled .ck-button__label {
-			opacity: var(--ck-disabled-opacity);
+			/* Backward compatibility: falls back to legacy --ck-disabled-opacity if overridden. */
+			opacity: var(--ck-disabled-opacity, var(--ck-opacity-disabled));
 		}
 
 		/* https://github.com/ckeditor/ckeditor5/issues/816 */
 		&.ck-on {
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
+			border-radius: var(--ck-dropdown-panel-uniform-border-radius, var(--ck-border-radius-surface-attached-bottom));
 		}
 
 		&.ck-dropdown__button_label-width_auto .ck-button__label {
@@ -85,7 +102,7 @@
 			box-shadow: none;
 
 			&:focus {
-				box-shadow: var(--ck-focus-outer-shadow), 0 0;
+				box-shadow: var(--ck-interactive-focus-shadow), 0 0;
 			}
 		}
 		width: 100%
@@ -95,8 +112,9 @@
 
 	& .ck-dropdown__panel {
 		display: none;
-		z-index: var(--ck-z-panel);
-		max-width: var(--ck-dropdown-max-width);
+		z-index: var(--ck-layer-panel);
+		/* Backward compatibility: falls back to legacy --ck-dropdown-max-width if overridden. */
+		max-width: var(--ck-dropdown-max-width, 75vw);
 
 		position: absolute;
 
@@ -159,11 +177,12 @@
 }
 
 .ck.ck-dropdown__panel {
-	border-radius: var(--ck-rounded-corners-radius);
-	box-shadow: var(--ck-drop-shadow), 0 0;
+	border-radius: var(--ck-dropdown-panel-border-radius);
+	box-shadow: var(--ck-shadow-surface-floating), 0 0;
+	padding: var(--ck-dropdown-panel-padding);
 
-	background: var(--ck-color-dropdown-panel-background);
-	border: 1px solid var(--ck-color-dropdown-panel-border);
+	background: var(--ck-dropdown-panel-background-color);
+	border: var(--ck-dropdown-panel-border);
 	bottom: 0;
 
 	/* Make sure the panel is at least as wide as the drop-down's button. */
@@ -172,19 +191,24 @@
 	/* Disabled corner border radius to be consistent with the .dropdown__button
 	https://github.com/ckeditor/ckeditor5/issues/816 */
 	&.ck-dropdown__panel_se {
-		border-top-left-radius: 0;
+		border-radius: var(--ck-dropdown-panel-uniform-border-radius, var(--ck-border-radius-surface-cut-top-left));
 	}
 
 	&.ck-dropdown__panel_sw {
-		border-top-right-radius: 0;
+		border-radius: var(--ck-dropdown-panel-uniform-border-radius, var(--ck-border-radius-surface-cut-top-right));
 	}
 
 	&.ck-dropdown__panel_ne {
-		border-bottom-left-radius: 0;
+		border-radius: var(--ck-dropdown-panel-uniform-border-radius, var(--ck-border-radius-surface-cut-bottom-left));
 	}
 
 	&.ck-dropdown__panel_nw {
-		border-bottom-right-radius: 0;
+		border-radius: var(--ck-dropdown-panel-uniform-border-radius, var(--ck-border-radius-surface-cut-bottom-right));
+	}
+
+	/* Prevent the list's own background from overlapping the panel's rounded corners. */
+	& > .ck-list {
+		background: var(--ck-dropdown-list-background-color);
 	}
 
 	&:focus {
@@ -198,5 +222,5 @@
  */
 
 .ck.ck-toolbar .ck-dropdown__panel {
-	z-index: calc( var(--ck-z-panel) + 1 );
+	z-index: var(--ck-layer-panel-above);
 }
diff --git a/packages/ckeditor5-ui/theme/components/dropdown/listdropdown.css b/packages/ckeditor5-ui/theme/components/dropdown/listdropdown.css
index f123a47a633..e6eb0eb6875 100644
--- a/packages/ckeditor5-ui/theme/components/dropdown/listdropdown.css
+++ b/packages/ckeditor5-ui/theme/components/dropdown/listdropdown.css
@@ -3,26 +3,26 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	/* Radius */
+	/* Set to a radius value (e.g. var(--ck-radius-base)) to disable attached-corner behavior and use uniform corners. */
+	--ck-list-dropdown-uniform-border-radius: var(--ck-border-radius-uniform);
+}
+
 .ck.ck-dropdown > .ck-dropdown__panel > .ck-list {
 	/* Disabled radius of top-left border to be consistent with .dropdown__button
 	https://github.com/ckeditor/ckeditor5/issues/816 */
-	border-radius: var(--ck-rounded-corners-radius);
-	border-top-left-radius: 0;
+	border-radius: var(--ck-list-dropdown-uniform-border-radius, 0 var(--ck-dropdown-panel-border-radius) var(--ck-dropdown-panel-border-radius) var(--ck-dropdown-panel-border-radius));
 
 	/* Make sure the button belonging to the first/last child of the list goes well with the
 	border radius of the entire panel. */
 	& .ck-list__item {
 		&:first-child > .ck-button {
-			border-radius: var(--ck-rounded-corners-radius);
-			border-top-left-radius: 0;
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
+			border-radius: var(--ck-list-dropdown-uniform-border-radius, 0 var(--ck-dropdown-panel-border-radius) 0 0);
 		}
 
 		&:last-child > .ck-button {
-			border-radius: var(--ck-rounded-corners-radius);
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
+			border-radius: var(--ck-list-dropdown-uniform-border-radius, 0 0 var(--ck-dropdown-panel-border-radius) var(--ck-dropdown-panel-border-radius));
 		}
 	}
 }
diff --git a/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenubutton.css b/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenubutton.css
index 076eacc4809..957b2540d4f 100644
--- a/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenubutton.css
+++ b/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenubutton.css
@@ -6,7 +6,7 @@
 
 .ck.ck-button.ck-dropdown-menu-list__nested-menu__button {
 	width: 100%;
-	padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
+	padding: var(--ck-spacing-control-padding-block) calc(2 * var(--ck-spacing-control-padding-inline));
 	border-radius: 0;
 
 	&:focus {
@@ -14,7 +14,7 @@
 		box-shadow: none;
 
 		&:not(.ck-on) {
-			background: var(--ck-color-button-default-hover-background);
+			background: var(--ck-button-default-hover-background-color);
 		}
 	}
 
@@ -25,55 +25,58 @@
 	}
 
 	&.ck-disabled > .ck-button__label {
-		opacity: var(--ck-disabled-opacity);
+		/* Backward compatibility: falls back to legacy --ck-disabled-opacity if overridden. */
+		opacity: var(--ck-disabled-opacity, var(--ck-opacity-disabled));
 	}
 
 	/* Spacing in buttons that miss the icon. */
 	&.ck-icon-spacing:not(:has(.ck-button__icon)) > .ck-button__label {
-		margin-left: calc(var(--ck-icon-size) - var(--ck-spacing-small));
+		margin-left: calc(var(--ck-icon-size) - var(--ck-spacing-control-padding-inline-compact));
 	}
 
 	& > .ck-dropdown-menu-list__nested-menu__button__arrow {
 		width: var(--ck-dropdown-arrow-size);
 		pointer-events: none;
-		z-index: var(--ck-z-default);
+		/* Backward compatibility: falls back to legacy --ck-z-default if overridden. */
+		z-index: var(--ck-z-default, var(--ck-z-base));
 
 		[dir="ltr"] & {
 			transform: rotate(-90deg);
-			right: var(--ck-spacing-standard);
+			right: var(--ck-spacing-control-padding-inline);
 
 			/* A space to accommodate the triangle. */
-			margin-left: var(--ck-spacing-standard);
+			margin-left: var(--ck-spacing-control-padding-inline);
 
 			/* Nudge the arrow gently to the right because its center of gravity is to the left */
-			margin-right: calc(-1 * var(--ck-spacing-small));
+			margin-right: calc(-1 * var(--ck-spacing-control-padding-inline-compact));
 		}
 
 		[dir="rtl"] & {
 			transform: rotate(90deg);
-			left: var(--ck-spacing-standard);
+			left: var(--ck-spacing-control-padding-inline);
 
 			/* A space to accommodate the triangle. */
-			margin-right: var(--ck-spacing-small);
+			margin-right: var(--ck-spacing-control-padding-inline-compact);
 
 			/* Nudge the arrow gently to the left because its center of gravity is to the right (after rotation). */
-			margin-left: calc(-1 * var(--ck-spacing-small));
+			margin-left: calc(-1 * var(--ck-spacing-control-padding-inline-compact));
 		}
 	}
 
 	&.ck-disabled > .ck-dropdown-menu-list__nested-menu__button__arrow {
-		opacity: var(--ck-disabled-opacity);
+		/* Backward compatibility: falls back to legacy --ck-disabled-opacity if overridden. */
+		opacity: var(--ck-disabled-opacity, var(--ck-opacity-disabled));
 	}
 
 	[dir="ltr"] & {
 		&:not(.ck-button_with-text) {
-			padding-left: var(--ck-spacing-small);
+			padding-left: var(--ck-spacing-control-padding-inline-compact);
 		}
 	}
 
 	[dir="rtl"] & {
 		&:not(.ck-button_with-text) {
-			padding-right: var(--ck-spacing-small);
+			padding-right: var(--ck-spacing-control-padding-inline-compact);
 		}
 	}
 }
diff --git a/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenulistitem.css b/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenulistitem.css
index f754af4da7c..244a872f8e8 100644
--- a/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenulistitem.css
+++ b/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenulistitem.css
@@ -4,6 +4,7 @@
  */
 
 :root {
+	/* Size */
 	--ck-dropdown-menu-menu-item-min-width: 18em;
 }
 
diff --git a/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenulistitembutton.css b/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenulistitembutton.css
index 4f7c067978e..d3232b47085 100644
--- a/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenulistitembutton.css
+++ b/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenulistitembutton.css
@@ -3,19 +3,24 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	/* Size */
+	--ck-dropdown-menu-list-item-spinner-size: 20px;
+}
+
 .ck-button.ck-dropdown-menu-list__nested-menu__item__button {
 	border-radius: 0;
 
 	& > .ck-spinner-container,
 	& > .ck-spinner-container .ck-spinner {
 		/* These styles correspond to .ck-icon so that the spinner seamlessly replaces the icon. */
-		--ck-toolbar-spinner-size: 20px;
+		--ck-toolbar-spinner-size: var(--ck-dropdown-menu-list-item-spinner-size);
 	}
 
 	& > .ck-spinner-container {
 		/* These margins are the same as for .ck-icon. */
-		margin-left: calc(-1 * var(--ck-spacing-small));
-		margin-right: var(--ck-spacing-small);
+		margin-left: calc(-1 * var(--ck-spacing-control-padding-inline-compact));
+		margin-right: var(--ck-spacing-control-padding-inline-compact);
 	}
 
 	/*
@@ -27,7 +32,7 @@
 		box-shadow: none;
 
 		&:not(.ck-on) {
-			background: var(--ck-color-button-default-hover-background);
+			background: var(--ck-button-default-hover-background-color);
 		}
 	}
 }
diff --git a/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenupanel.css b/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenupanel.css
index f4065860e94..5f6aab0d2d2 100644
--- a/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenupanel.css
+++ b/packages/ckeditor5-ui/theme/components/dropdown/menu/dropdownmenupanel.css
@@ -5,19 +5,27 @@
 
 
 :root {
-	--ck-dropdown-menu-menu-panel-max-width: 75vw;
+	/* Size */
+	--ck-dropdown-menu-panel-max-height: 314px;
+
+	/* Radius */
+	/* Set to a radius value (e.g. var(--ck-radius-base)) to disable attached-corner behavior and use uniform corners. */
+	--ck-dropdown-menu-panel-uniform-border-radius: var(--ck-border-radius-uniform);
+	--ck-dropdown-menu-panel-border-radius: var(--ck-border-radius-surface-attached);
 }
 
 .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel {
-	box-shadow: var(--ck-drop-shadow), 0 0;
+	border-radius: var(--ck-dropdown-menu-panel-border-radius);
+	box-shadow: var(--ck-shadow-surface-floating), 0 0;
 
-	background: var(--ck-color-dropdown-panel-background);
-	border: 1px solid var(--ck-color-dropdown-panel-border);
+	background: var(--ck-dropdown-panel-background-color);
+	border: var(--ck-border-width-surface) solid var(--ck-dropdown-panel-border-color);
 	bottom: 0;
 	height: fit-content;
-	max-width: var(--ck-dropdown-menu-menu-panel-max-width);
+	/* Backward compatibility: falls back to legacy --ck-dropdown-menu-menu-panel-max-width if overridden. */
+	max-width: var(--ck-dropdown-menu-menu-panel-max-width, 75vw);
 	position: absolute;
-	max-height: 314px; /* With the default settings, this is equal to 10 menu items. */
+	max-height: var(--ck-dropdown-menu-panel-max-height); /* With the default settings, this is equal to 10 menu items. */
 	overflow-y: auto;
 
 	/* Reset balloon styling */
@@ -29,26 +37,26 @@
 	/* Corner border radius consistent with the button. */
 	&.ck-balloon-panel_es,
 	&.ck-balloon-panel_se {
-		border-top-left-radius: 0;
+		border-radius: var(--ck-dropdown-menu-panel-uniform-border-radius, var(--ck-border-radius-surface-cut-top-left));
 	}
 
 	&.ck-balloon-panel_ws,
 	&.ck-balloon-panel_sw {
-		border-top-right-radius: 0;
+		border-radius: var(--ck-dropdown-menu-panel-uniform-border-radius, var(--ck-border-radius-surface-cut-top-right));
 	}
 
 	&.ck-balloon-panel_en,
 	&.ck-balloon-panel_ne {
-		border-bottom-left-radius: 0;
+		border-radius: var(--ck-dropdown-menu-panel-uniform-border-radius, var(--ck-border-radius-surface-cut-bottom-left));
 	}
 
 	&.ck-balloon-panel_wn,
 	&.ck-balloon-panel_nw {
-		border-bottom-right-radius: 0;
+		border-radius: var(--ck-dropdown-menu-panel-uniform-border-radius, var(--ck-border-radius-surface-cut-bottom-right));
 	}
 
 	&:focus {
 		outline: none;
 	}
-	z-index: calc(var(--ck-z-panel) + 1)
+	z-index: var(--ck-layer-panel-above)
 }
diff --git a/packages/ckeditor5-ui/theme/components/dropdown/splitbutton.css b/packages/ckeditor5-ui/theme/components/dropdown/splitbutton.css
index 068cc2df8b0..45622b66fa8 100644
--- a/packages/ckeditor5-ui/theme/components/dropdown/splitbutton.css
+++ b/packages/ckeditor5-ui/theme/components/dropdown/splitbutton.css
@@ -3,17 +3,12 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
-:root {
-	--ck-color-split-button-hover-background: hsl(0, 0%, 92%);
-	--ck-color-split-button-hover-border: hsl(0, 0%, 70%);
-}
-
 .ck.ck-splitbutton {
 	/*
 	 * Note: ck-rounded and ck-dir mixins don't go together (because they both use @nest).
 	 */
 	& .ck-splitbutton__action:focus {
-		z-index: calc(var(--ck-z-default) + 1);
+		z-index: var(--ck-layer-control-raised);
 	}
 
 	&:hover > .ck-splitbutton__action,
@@ -63,7 +58,7 @@
 	/* Don't round the bottom left and right corners of the buttons when "open"
 	https://github.com/ckeditor/ckeditor5/issues/816 */
 	&.ck-splitbutton_open {
-		border-radius: var(--ck-rounded-corners-radius);
+		border-radius: var(--ck-border-radius-control);
 
 		/* stylelint-disable-next-line no-descending-specificity */
 		& > .ck-splitbutton__action {
@@ -82,7 +77,8 @@
 	&:hover {
 		/* When the split button hovered as a whole, not as individual buttons. */
 		& > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover) {
-			background: var(--ck-color-split-button-hover-background);
+			/* Fallback to `--ck-color-split-button-hover-background` for backward compatibility. */
+			background: var(--ck-color-split-button-hover-background, var(--ck-color-interactive-hover-surface));
 		}
 
 		/* Splitbutton separator needs to be set with the ::after pseudoselector
@@ -92,12 +88,15 @@
 			position: absolute;
 			width: 1px;
 			height: 100%;
-			background-color: var(--ck-color-split-button-hover-border);
+			/* Fallback to `--ck-color-split-button-hover-border` for backward compatibility. */
+			background-color: var(--ck-color-split-button-hover-border, var(--ck-color-border-control));
 		}
 
 		/* Make sure the divider between the buttons looks fine when the button is focused */
 		& > .ck-splitbutton__arrow:focus::after {
-			--ck-color-split-button-hover-border: var(--ck-color-focus-border);
+			/* Fallback to `--ck-color-split-button-hover-border` for backward compatibility. */
+			--ck-color-split-button-hover-border: var(--ck-color-interactive-focus-border);
+			background-color: var(--ck-color-split-button-hover-border, var(--ck-color-interactive-focus-border));
 		}
 
 		[dir="ltr"] & {
diff --git a/packages/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css b/packages/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css
index 55baa79be66..4d471969253 100644
--- a/packages/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css
+++ b/packages/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css
@@ -7,18 +7,15 @@
 	border: 0;
 }
 
-:root {
-	--ck-toolbar-dropdown-max-width: 60vw;
-}
-
 .ck.ck-toolbar-dropdown > .ck-dropdown__panel {
 	/* https://github.com/ckeditor/ckeditor5/issues/5586 */
 	width: max-content;
-	max-width: var(--ck-toolbar-dropdown-max-width);
+	/* Backward compatibility: falls back to legacy --ck-toolbar-dropdown-max-width if overridden. */
+	max-width: var(--ck-toolbar-dropdown-max-width, 60vw);
 
 	& .ck-button {
 		&:focus {
-			z-index: calc(var(--ck-z-default) + 1);
+			z-index: var(--ck-layer-control-raised);
 		}
 	}
 }
diff --git a/packages/ckeditor5-ui/theme/components/editorui/accessibilityhelp.css b/packages/ckeditor5-ui/theme/components/editorui/accessibilityhelp.css
index ae3c9831f04..947636b1dc9 100644
--- a/packages/ckeditor5-ui/theme/components/editorui/accessibilityhelp.css
+++ b/packages/ckeditor5-ui/theme/components/editorui/accessibilityhelp.css
@@ -5,15 +5,13 @@
 
 
 :root {
-	--ck-accessibility-help-dialog-max-width: 600px;
+	/* Size */
 	--ck-accessibility-help-dialog-max-height: 400px;
-	--ck-accessibility-help-dialog-border-color: hsl(220, 6%, 81%);
-	--ck-accessibility-help-dialog-code-background-color: hsl(0deg 0% 92.94%);
-	--ck-accessibility-help-dialog-kbd-shadow-color: hsl(0deg 0% 61%);
+	--ck-accessibility-help-dialog-max-width: 600px;
 }
 
 .ck.ck-accessibility-help-dialog .ck-accessibility-help-dialog__content {
-	padding: var(--ck-spacing-large);
+	padding: var(--ck-spacing-region-edge-margin-block);
 	max-width: var(--ck-accessibility-help-dialog-max-width);
 	max-height: var(--ck-accessibility-help-dialog-max-height);
 	overflow: auto;
@@ -23,8 +21,9 @@
 
 	&:focus {
 		outline: none;
-		border: var(--ck-focus-ring);
-		box-shadow: var(--ck-focus-outer-shadow), 0 0;
+		border-color: var(--ck-focus-border-color);
+		/* Backward compatibility: falls back to legacy --ck-focus-outer-shadow if overridden. */
+		box-shadow: var(--ck-focus-outer-shadow, var(--ck-focus-shadow)), 0 0;
 	}
 
 	* {
@@ -37,12 +36,12 @@
 	}
 
 	& h3 {
-		font-weight: bold;
+		font-weight: var(--ck-font-weight-ui-heading);
 		font-size: 1.2em;
 	}
 
 	& h4 {
-		font-weight: bold;
+		font-weight: var(--ck-font-weight-ui-heading);
 		font-size: 1em;
 	}
 
@@ -56,11 +55,11 @@
 	& dl {
 		display: grid;
 		grid-template-columns: 2fr 1fr;
-		border-top: 1px solid var(--ck-accessibility-help-dialog-border-color);
+		border-top: var(--ck-border-width-divider) solid var(--ck-accessibility-help-dialog-border-color, hsl(220, 6%, 81%));
 		border-bottom: none;
 
 		& dt, & dd {
-			border-bottom: 1px solid var(--ck-accessibility-help-dialog-border-color);
+			border-bottom: var(--ck-border-width-divider) solid var(--ck-accessibility-help-dialog-border-color, hsl(220, 6%, 81%));
 			padding: .4em 0;
 		}
 
@@ -76,7 +75,7 @@
 
 	& kbd, & code {
 		display: inline-block;
-		background: var(--ck-accessibility-help-dialog-code-background-color);
+		background: var(--ck-accessibility-help-dialog-code-background-color, hsl(0deg 0% 92.94%));
 		padding: .4em;
 		vertical-align: middle;
 		line-height: 1;
@@ -91,7 +90,7 @@
 
 	& kbd {
 		min-width: 1.8em;
-		box-shadow: 0px 1px 1px var(--ck-accessibility-help-dialog-kbd-shadow-color);
+		box-shadow: 0px 1px 1px var(--ck-accessibility-help-dialog-kbd-shadow-color, hsl(0deg 0% 61%));
 		margin: 0 1px;
 
 		& + kbd {
diff --git a/packages/ckeditor5-ui/theme/components/editorui/editorui.css b/packages/ckeditor5-ui/theme/components/editorui/editorui.css
index 63f2d901973..6aee5a1d855 100644
--- a/packages/ckeditor5-ui/theme/components/editorui/editorui.css
+++ b/packages/ckeditor5-ui/theme/components/editorui/editorui.css
@@ -4,26 +4,38 @@
  */
 
 :root {
-	--ck-color-editable-blur-selection: hsl(0, 0%, 85%);
+	/* Spacing */
+	--ck-editor-editable-padding: 0 var(--ck-spacing-region-padding-inline);
+
+	/* Radius */
+	--ck-editor-frame-border-radius: var(--ck-border-radius-surface);
+	--ck-editor-sticky-panel-border-radius: var(--ck-editor-frame-border-radius) var(--ck-editor-frame-border-radius) 0 0;
+
+	/* Border */
+	--ck-editor-frame-border: var(--ck-border-width-surface) solid var(--ck-editor-frame-border-color);
+
+	/* Color */
+	--ck-editor-frame-border-color: var(--ck-color-border-container);
+
+	/* State / meta */
+	--ck-editor-editable-focus-border-color: var(--ck-interactive-focus-border-color);
 }
 
 .ck.ck-editor__top {
 	& .ck-sticky-panel {
 		& .ck-sticky-panel__content {
-			border-radius: var(--ck-rounded-corners-radius);
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
+			border-radius: var(--ck-sticky-panel-uniform-border-radius, var(--ck-editor-sticky-panel-border-radius));
 
-			border: 1px solid var(--ck-color-base-border);
+			border: var(--ck-editor-frame-border);
 			border-bottom-width: 0;
 
 			&.ck-sticky-panel__content_sticky {
-				border-bottom-width: 1px;
+				border-bottom-width: var(--ck-border-width-surface);
 			}
 
 			& .ck-menu-bar {
 				border: 0;
-				border-bottom: 1px solid var(--ck-color-base-border);
+				border-bottom: var(--ck-editor-frame-border);
 			}
 
 			& .ck-toolbar {
@@ -34,19 +46,20 @@
 }
 
 .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
-	border-radius: var(--ck-rounded-corners-radius);
+	border-radius: var(--ck-editor-frame-border-radius);
 
 	&.ck-focused {
 		outline: none;
-		border: var(--ck-focus-ring);
-		box-shadow: var(--ck-inner-shadow), 0 0;
+		border-color: var(--ck-editor-editable-focus-border-color);
+		/* Backward compatibility: falls back to legacy --ck-inner-shadow if overridden. */
+		box-shadow: var(--ck-inner-shadow, var(--ck-inset-shadow-sm)), 0 0;
 	}
 }
 
 .ck.ck-editor__editable_inline {
 	overflow: auto;
-	padding: 0 var(--ck-spacing-standard);
-	border: 1px solid transparent;
+	padding: var(--ck-editor-editable-padding);
+	border: var(--ck-border-width-control) solid transparent;
 
 	&[dir="ltr"] {
 		text-align: left;
@@ -58,7 +71,7 @@
 
 	/* https://github.com/ckeditor/ckeditor5/issues/3385 */
 	& > *:first-child {
-		margin-top: var(--ck-spacing-large);
+		margin-top: var(--ck-spacing-region-edge-margin-block);
 	}
 
 	/* https://github.com/ckeditor/ckeditor5/issues/847 */
@@ -67,12 +80,13 @@
 		 * This value should match with the default margins of the block elements (like .media or .image)
 		 * to avoid a content jumping when the fake selection container shows up (See https://github.com/ckeditor/ckeditor5/issues/9825).
 		 */
-		margin-bottom: var(--ck-spacing-large);
+		margin-bottom: var(--ck-spacing-region-edge-margin-block);
 	}
 
 	/* https://github.com/ckeditor/ckeditor5/issues/6517 */
 	&.ck-blurred ::selection {
-		background: var(--ck-color-editable-blur-selection);
+		/* Fallback to `--ck-color-editable-blur-selection` for backward compatibility. */
+		background: var(--ck-color-editable-blur-selection, hsl(0, 0%, 85%));
 	}
 }
 
@@ -80,12 +94,12 @@
 
 .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_n"] {
 	&::after {
-		border-bottom-color: var(--ck-color-panel-background);
+		border-bottom-color: var(--ck-balloon-panel-background-color);
 	}
 }
 
 .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_s"] {
 	&::after {
-		border-top-color: var(--ck-color-panel-background);
+		border-top-color: var(--ck-balloon-panel-background-color);
 	}
 }
diff --git a/packages/ckeditor5-ui/theme/components/form/form.css b/packages/ckeditor5-ui/theme/components/form/form.css
index 917dcd47de4..c8a806f66fe 100644
--- a/packages/ckeditor5-ui/theme/components/form/form.css
+++ b/packages/ckeditor5-ui/theme/components/form/form.css
@@ -5,11 +5,15 @@
 
 
 :root {
+	/* Size */
 	--ck-form-default-width: 340px;
+
+	/* Spacing */
+	--ck-form-padding: 0 0 var(--ck-spacing-region-edge-margin-block);
 }
 
 .ck.ck-form {
-	padding: 0 0 var(--ck-spacing-large);
+	padding: var(--ck-form-padding);
 
 	&.ck-form_default-width {
 		width: var(--ck-form-default-width);
@@ -30,7 +34,7 @@
 
 		& .ck-dropdown__button {
 			&:not(:focus) {
-				border: 1px solid var(--ck-color-base-border);
+				border: var(--ck-border-width-control) solid var(--ck-color-base-border);
 			}
 
 			& .ck-button__label {
@@ -51,7 +55,7 @@
 
 				> .ck {
 					@media screen and (max-width: 600px) {
-						margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
+						margin: var(--ck-spacing-region-edge-margin-block) var(--ck-spacing-region-edge-margin-block) 0;
 					}
 				}
 
@@ -64,7 +68,7 @@
 
 			&.ck-form__row_large-bottom-padding {
 				@media screen and (max-width: 600px) {
-					padding-bottom: var(--ck-spacing-large);
+					padding-bottom: var(--ck-spacing-region-edge-margin-block);
 				}
 			}
 		}
diff --git a/packages/ckeditor5-ui/theme/components/formheader/formheader.css b/packages/ckeditor5-ui/theme/components/formheader/formheader.css
index 4a4a829a55e..ccd702a5daa 100644
--- a/packages/ckeditor5-ui/theme/components/formheader/formheader.css
+++ b/packages/ckeditor5-ui/theme/components/formheader/formheader.css
@@ -4,14 +4,21 @@
  */
 
 :root {
+	/* Size */
 	--ck-form-header-height: 3.384em;
+
+	/* Spacing */
+	--ck-form-header-padding-block: var(--ck-spacing-surface-padding-block);
+
+	/* Typography */
+	--ck-form-header-label-font-size: 1.153em;
 }
 
 .ck.ck-form__header {
-	padding: var(--ck-spacing-small) var(--ck-spacing-large);
+	padding: var(--ck-form-header-padding-block) var(--ck-spacing-control-meta-gap);
 	height: var(--ck-form-header-height);
 	line-height: var(--ck-form-header-height);
-	border-bottom: 1px solid var(--ck-color-base-border);
+	border-bottom: var(--ck-border-width-divider) solid var(--ck-color-base-border);
 	/* To prevent shrinking when placed in flexbox. */
 	flex-shrink: 0;
 	display: flex;
@@ -21,29 +28,28 @@
 	justify-content: space-between;
 
 	& > .ck-icon {
-		margin-inline-end: var(--ck-spacing-medium);
+		margin-inline-end: var(--ck-spacing-control-icon-gap);
 		flex-shrink: 0;
 	}
 
 	& .ck-form__header__label {
 		/* Defaults to 15px. */
-		--ck-font-size-base: 1.153em;
-
-		font-weight: bold;
+		--ck-font-size-base: var(--ck-form-header-label-font-size);
+		font-weight: var(--ck-font-weight-ui-heading);
 	}
 
 	/* Padding when back button is hidden */
 	&:has(.ck-button-back.ck-hidden) {
-		padding-inline: var(--ck-spacing-large) var(--ck-spacing-large);
+		padding-inline: var(--ck-spacing-control-meta-gap) var(--ck-spacing-control-meta-gap);
 	}
 
 	/* Padding when back button is visible */
 	&:has(.ck-button-back:not(.ck-hidden)) {
-		padding-inline: var(--ck-spacing-small) var(--ck-spacing-small);
+		padding-inline: var(--ck-spacing-surface-padding-inline) var(--ck-spacing-surface-padding-inline);
 	}
 
 	& > .ck-button-back {
-		margin-inline-end: var(--ck-spacing-small);
+		margin-inline-end: var(--ck-spacing-surface-item-gap-inline);
 	}
 
 	& > .ck.ck-button {
diff --git a/packages/ckeditor5-ui/theme/components/formrow/formrow.css b/packages/ckeditor5-ui/theme/components/formrow/formrow.css
index db0e51740f0..23bfb8b4445 100644
--- a/packages/ckeditor5-ui/theme/components/formrow/formrow.css
+++ b/packages/ckeditor5-ui/theme/components/formrow/formrow.css
@@ -3,26 +3,31 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	/* Spacing */
+	--ck-form-row-padding: var(--ck-spacing-region-padding-block) var(--ck-spacing-region-padding-inline-wide) 0;
+}
+
 .ck.ck-form__row {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: flex-start;
-	padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;
+	padding: var(--ck-form-row-padding);
 
 	&.ck-form__row_large-top-padding {
-		padding-top: var(--ck-spacing-large);
+		padding-top: var(--ck-spacing-region-edge-margin-block);
 	}
 
 	&.ck-form__row_large-bottom-padding {
-		padding-bottom: var(--ck-spacing-large);
+		padding-bottom: var(--ck-spacing-region-edge-margin-block);
 	}
 
 	&.ck-form__row_with-submit {
 		flex-wrap: nowrap;
 
 		& > *:not(:first-child) {
-			margin-inline-start: var(--ck-spacing-standard);
+			margin-inline-start: var(--ck-spacing-region-padding-inline);
 		}
 	}
 
diff --git a/packages/ckeditor5-ui/theme/components/highlightedtext/highlightedtext.css b/packages/ckeditor5-ui/theme/components/highlightedtext/highlightedtext.css
index 9a9256305ab..061923b2710 100644
--- a/packages/ckeditor5-ui/theme/components/highlightedtext/highlightedtext.css
+++ b/packages/ckeditor5-ui/theme/components/highlightedtext/highlightedtext.css
@@ -6,7 +6,7 @@
 .ck.ck-highlighted-text mark {
 	background: var(--ck-color-highlight-background);
 	vertical-align: initial;
-	font-weight: inherit;
+	font-weight: var(--ck-font-weight-ui-inherit);
 	line-height: inherit;
 	font-size: inherit;
 }
diff --git a/packages/ckeditor5-ui/theme/components/icon/icon.css b/packages/ckeditor5-ui/theme/components/icon/icon.css
index 77848c6a65c..16d4575fae7 100644
--- a/packages/ckeditor5-ui/theme/components/icon/icon.css
+++ b/packages/ckeditor5-ui/theme/components/icon/icon.css
@@ -4,8 +4,9 @@
  */
 
 :root {
-	--ck-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
-	--ck-icon-font-size: .8333350694em;
+	/* Size */
+	/* Backward compatibility: falls back to legacy --ck-font-size-normal if overridden. */
+	--ck-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal, var(--ck-font-size-md)));
 }
 
 .ck.ck-icon {
@@ -13,7 +14,8 @@
 	height: var(--ck-icon-size);
 
 	/* Multiplied by the height of the line in "px" should give SVG "viewport" dimensions */
-	font-size: var(--ck-icon-font-size);
+	/* Backward compatibility: falls back to legacy --ck-icon-font-size if overridden. */
+	font-size: var(--ck-icon-font-size, .8333350694em);
 
 	/* Inherit cursor style (#5). */
 	cursor: inherit;
diff --git a/packages/ckeditor5-ui/theme/components/input/input.css b/packages/ckeditor5-ui/theme/components/input/input.css
index bd80682c66e..297b0d58f12 100644
--- a/packages/ckeditor5-ui/theme/components/input/input.css
+++ b/packages/ckeditor5-ui/theme/components/input/input.css
@@ -4,56 +4,79 @@
  */
 
 :root {
+	/* Size */
 	--ck-input-width: 18em;
 
-	/* Backward compatibility. */
+	/* Spacing */
+	--ck-input-padding: var(--ck-spacing-control-padding-block-compact) var(--ck-spacing-control-padding-inline-compact);
+
+	/* Radius */
+	--ck-input-border-radius: var(--ck-border-radius-control);
+
+	/* Color */
+	--ck-input-background-color: var(--ck-color-surface-control);
+	--ck-input-border-color: var(--ck-color-border-control);
+	--ck-input-error-border-color: var(--ck-color-feedback-error);
+	--ck-input-text-color: var(--ck-color-text-primary);
+	--ck-input-disabled-background-color: hsl(0, 0%, 95%);
+	--ck-input-disabled-border-color: var(--ck-color-border-control);
+	--ck-input-disabled-text-color: var(--ck-color-text-disabled);
+
+	/* Border */
+	--ck-input-border: var(--ck-border-width-control) solid var(--ck-input-border-color);
+
+	/* State / meta */
+	--ck-input-focus-border-color: var(--ck-interactive-focus-border-color);
+
+	/* Compatibility */
 	--ck-input-text-width: var(--ck-input-width);
 }
 
 .ck.ck-input {
-	border-radius: var(--ck-rounded-corners-radius);
-	background: var(--ck-color-input-background);
-	border: 1px solid var(--ck-color-input-border);
-	padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
+	border-radius: var(--ck-input-border-radius);
+	background: var(--ck-input-background-color);
+	border: var(--ck-input-border);
+	padding: var(--ck-input-padding);
 	min-width: var(--ck-input-width);
+	color: var(--ck-input-text-color);
 
 	/* This is important to stay of the same height as surrounding buttons */
-	min-height: var(--ck-ui-component-min-height);
+	min-height: var(--ck-size-control-min-height);
 
 	/* Apply some smooth transition to the box-shadow and border. */
-	transition: box-shadow .1s ease-in-out, border .1s ease-in-out;
+	transition: box-shadow var(--ck-transition-duration-control-fast) var(--ck-transition-timing-function-control), border var(--ck-transition-duration-control-fast) var(--ck-transition-timing-function-control);
 
 	@media (prefers-reduced-motion: reduce) {
-		transition: none;
+		transition: var(--ck-transition-none);
 	}
 
 	&:focus {
 		outline: none;
-		border: var(--ck-focus-ring);
-		box-shadow: var(--ck-focus-outer-shadow), 0 0;
+		border-color: var(--ck-input-focus-border-color);
+		box-shadow: var(--ck-interactive-focus-shadow), 0 0;
 	}
 
 	&[readonly] {
-		border: 1px solid var(--ck-color-input-disabled-border);
-		background: var(--ck-color-input-disabled-background);
-		color: var(--ck-color-input-disabled-text);
+		border: var(--ck-border-width-control) solid var(--ck-input-disabled-border-color);
+		background: var(--ck-input-disabled-background-color);
+		color: var(--ck-input-disabled-text-color);
 
 		&:focus {
 			/* The read-only input should have a slightly less visible shadow when focused. */
-			box-shadow: var(--ck-focus-disabled-outer-shadow), 0 0;
+			box-shadow: var(--ck-interactive-focus-disabled-shadow), 0 0;
 		}
 	}
 
 	&.ck-error {
-		border-color: var(--ck-color-input-error-border);
-		animation: ck-input-shake .3s ease both;
+		border-color: var(--ck-input-error-border-color);
+		animation: ck-input-shake var(--ck-animation-duration-feedback) var(--ck-animation-timing-function-feedback) var(--ck-animation-fill-mode-feedback);
 
 		@media (prefers-reduced-motion: reduce) {
-			animation: none;
+			animation: var(--ck-animation-none);
 		}
 
 		&:focus {
-			box-shadow: var(--ck-focus-error-outer-shadow), 0 0;
+			box-shadow: var(--ck-interactive-focus-error-shadow), 0 0;
 		}
 	}
 }
@@ -74,4 +97,8 @@
 	80% {
 		transform: translateX(1px);
 	}
+
+	100% {
+		transform: translateX(0);
+	}
 }
diff --git a/packages/ckeditor5-ui/theme/components/label/label.css b/packages/ckeditor5-ui/theme/components/label/label.css
index 073d3fdd3e8..5eb21c67c73 100644
--- a/packages/ckeditor5-ui/theme/components/label/label.css
+++ b/packages/ckeditor5-ui/theme/components/label/label.css
@@ -4,7 +4,7 @@
  */
 
 .ck.ck-label {
-	font-weight: bold;
+	font-weight: var(--ck-font-weight-ui-label);
 	display: block;
 }
 
diff --git a/packages/ckeditor5-ui/theme/components/labeledfield/labeledfieldview.css b/packages/ckeditor5-ui/theme/components/labeledfield/labeledfieldview.css
index 0ca082a0682..6f8c8ab34f4 100644
--- a/packages/ckeditor5-ui/theme/components/labeledfield/labeledfieldview.css
+++ b/packages/ckeditor5-ui/theme/components/labeledfield/labeledfieldview.css
@@ -4,15 +4,14 @@
  */
 
 :root {
-	--ck-labeled-field-view-transition: .1s cubic-bezier(0, 0, 0.24, 0.95);
-	--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-spacing-medium);
-	--ck-labeled-field-label-default-position-x: var(--ck-spacing-medium);
-	--ck-labeled-field-label-default-position-y: calc(0.6 * var(--ck-font-size-base));
-	--ck-color-labeled-field-label-background: var(--ck-color-base-background);
+	/* Color */
+	--ck-labeled-field-label-background-color: var(--ck-color-base-background);
+	--ck-labeled-field-label-start-gap: var(--ck-spacing-control-icon-gap);
 }
 
 .ck.ck-labeled-field-view {
-	border-radius: var(--ck-rounded-corners-radius);
+	/* Backward compatibility: falls back to legacy --ck-rounded-corners-radius if overridden. */
+	border-radius: var(--ck-rounded-corners-radius, var(--ck-radius-corners));
 
 	& .ck.ck-label {
 		display: block;
@@ -27,11 +26,12 @@
 			top: 0px;
 
 			pointer-events: none;
-
-			background: var(--ck-color-labeled-field-label-background);
-			padding: 0 calc(.5 * var(--ck-font-size-tiny));
+			/* Fallback to `--ck-color-labeled-field-label-background` for backward compatibility. */
+			background: var(--ck-color-labeled-field-label-background, var(--ck-labeled-field-label-background-color));
+			/* Backward compatibility: falls back to legacy --ck-font-size-tiny if overridden. */
+			padding: 0 calc(.5 * var(--ck-font-size-tiny, var(--ck-font-size-xs)));
 			line-height: initial;
-			font-weight: normal;
+			font-weight: var(--ck-font-weight-ui-muted);
 
 			/* Prevent overflow when the label is longer than the input */
 			text-overflow: ellipsis;
@@ -40,25 +40,25 @@
 			max-width: 100%;
 
 			transition:
-				transform var(--ck-labeled-field-view-transition),
-				padding var(--ck-labeled-field-view-transition),
-				background var(--ck-labeled-field-view-transition);
+				transform var(--ck-transition-duration-control-fast) var(--ck-transition-timing-function-control-emphasized),
+				padding var(--ck-transition-duration-control-fast) var(--ck-transition-timing-function-control-emphasized),
+				background var(--ck-transition-duration-control-fast) var(--ck-transition-timing-function-control-emphasized);
 
 			[dir="ltr"] & {
 				left: 0px;
 				transform-origin: 0 0;
 				/* By default, display the label scaled down above the field. */
-				transform: translate(var(--ck-spacing-medium), -6px) scale(.75);
+				transform: translate(var(--ck-labeled-field-label-start-gap), -6px) scale(.75);
 			}
 
 			[dir="rtl"] & {
 				right: 0px;
 				transform-origin: 100% 0;
-				transform: translate(calc(-1 * var(--ck-spacing-medium)), -6px) scale(.75);
+				transform: translate(calc(-1 * var(--ck-labeled-field-label-start-gap)), -6px) scale(.75);
 			}
 
 			@media (prefers-reduced-motion: reduce) {
-				transition: none;
+				transition: var(--ck-transition-none);
 			}
 		}
 		position: relative
@@ -75,8 +75,9 @@
 	}
 
 	& .ck-labeled-field-view__status {
-		font-size: var(--ck-font-size-small);
-		margin-top: var(--ck-spacing-small);
+		/* Backward compatibility: falls back to legacy --ck-font-size-small if overridden. */
+		font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
+		margin-top: var(--ck-spacing-surface-item-gap-inline);
 
 		/* Let the info wrap to the next line to avoid stretching the layout horizontally.
 		The status could be very long. */
@@ -90,7 +91,7 @@
 	/* Disabled fields and fields that have no focus should fade out. */
 	&.ck-disabled > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
 	&.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
-		color: var(--ck-color-input-disabled-text);
+		color: var(--ck-input-disabled-text-color);
 	}
 
 	/* Fields that are disabled or not focused and without a placeholder should have full-sized labels. */
@@ -98,16 +99,16 @@
 	&.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
 	&.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder):not(.ck-error) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
 		[dir="ltr"] & {
-			transform: translate(var(--ck-labeled-field-label-default-position-x), var(--ck-labeled-field-label-default-position-y)) scale(1);
+			transform: translate(var(--ck-labeled-field-label-default-position-x, var(--ck-labeled-field-label-start-gap)), calc(0.6 * var(--ck-font-size-base))) scale(1);
 		}
 
 		/* stylelint-disable-next-line no-descending-specificity */
 		[dir="rtl"] & {
-			transform: translate(calc(-1 * var(--ck-labeled-field-label-default-position-x)), var(--ck-labeled-field-label-default-position-y)) scale(1);
+			transform: translate(calc(-1 * var(--ck-labeled-field-label-default-position-x, var(--ck-labeled-field-label-start-gap))), calc(0.6 * var(--ck-font-size-base))) scale(1);
 		}
 
 		/* Compensate for the default translate position. */
-		max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width));
+		max-width: var(--ck-labeled-field-empty-unfocused-max-width, calc(100% - 2 * var(--ck-labeled-field-label-start-gap)));
 
 		background: transparent;
 		padding: 0;
@@ -127,7 +128,7 @@
 
 	/* Make sure the label of the empty, unfocused input does not cover the dropdown arrow. */
 	&.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown + .ck-label {
-		max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width) - var(--ck-dropdown-arrow-size) - var(--ck-spacing-standard));
+		max-width: var(--ck-labeled-field-empty-unfocused-max-width, calc(100% - 2 * var(--ck-labeled-field-label-start-gap) - var(--ck-dropdown-arrow-size) - var(--ck-spacing-control-padding-inline)));
 	}
 
 	&.ck-labeled-field-view_full-width {
diff --git a/packages/ckeditor5-ui/theme/components/labeledinput/labeledinput.css b/packages/ckeditor5-ui/theme/components/labeledinput/labeledinput.css
index d2437f7383c..1c1e6fed53a 100644
--- a/packages/ckeditor5-ui/theme/components/labeledinput/labeledinput.css
+++ b/packages/ckeditor5-ui/theme/components/labeledinput/labeledinput.css
@@ -4,8 +4,9 @@
  */
 
 .ck.ck-labeled-input .ck-labeled-input__status {
-	font-size: var(--ck-font-size-small);
-	margin-top: var(--ck-spacing-small);
+	/* Backward compatibility: falls back to legacy --ck-font-size-small if overridden. */
+	font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
+	margin-top: var(--ck-spacing-surface-item-gap-inline);
 
 	/* Let the info wrap to the next line to avoid stretching the layout horizontally.
 	The status could be very long. */
diff --git a/packages/ckeditor5-ui/theme/components/list/list.css b/packages/ckeditor5-ui/theme/components/list/list.css
index 81e8a8696f2..655fa41794e 100644
--- a/packages/ckeditor5-ui/theme/components/list/list.css
+++ b/packages/ckeditor5-ui/theme/components/list/list.css
@@ -3,13 +3,35 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	/* Size */
+	--ck-list-item-min-width: 15em;
+
+	/* Spacing */
+	--ck-list-padding: var(--ck-spacing-surface-padding-block) 0;
+	--ck-list-item-outer-padding: 0;
+
+	/* Radius */
+	--ck-list-border-radius: var(--ck-border-radius-surface);
+
+	/* Color */
+	--ck-list-background-color: var(--ck-color-surface-control);
+	--ck-list-button-hover-background-color: var(--ck-button-default-hover-background-color);
+	--ck-list-button-on-background-color: var(--ck-button-on-text-color);
+	--ck-list-button-on-text-color: var(--ck-color-text-inverse);
+	--ck-list-divider-color: var(--ck-color-divider);
+
+	/* Typography */
+	--ck-list-group-label-font-size: 11px;
+}
+
 .ck.ck-list {
-	border-radius: var(--ck-rounded-corners-radius);
+	border-radius: var(--ck-list-border-radius);
 	list-style-type: none;
-	background: var(--ck-color-list-background);
+	background: var(--ck-list-background-color);
 
 	/* A spacing at the beginning and end of the list */
-	padding: var(--ck-spacing-small) 0;
+	padding: var(--ck-list-padding);
 	-webkit-user-select: none;
 	user-select: none;
 
@@ -26,18 +48,19 @@
 	adjacent list items. */
 	& .ck-list__item > *:focus {
 		position: relative;
-		z-index: var(--ck-z-default);
+		z-index: var(--ck-layer-base);
 	}
 }
 
 .ck.ck-list__item {
 	cursor: default;
+	padding: var(--ck-list-item-outer-padding);
 
 	/* Almost as wide as menu bar items. */
-	min-width: 15em;
+	min-width: var(--ck-list-item-min-width);
 
 	& > .ck-button:not(.ck-list-item-button) {
-		padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
+		padding: var(--ck-spacing-control-padding-block) calc(2 * var(--ck-spacing-control-padding-inline));
 		min-height: unset;
 		width: 100%;
 		border-radius: 0;
@@ -60,24 +83,24 @@
 		}
 
 		&.ck-on {
-			background: var(--ck-color-list-button-on-background);
-			color: var(--ck-color-list-button-on-text);
+			background: var(--ck-list-button-on-background-color);
+			color: var(--ck-list-button-on-text-color);
 
 			&:active {
 				box-shadow: none;
 			}
 
 			&:hover:not(.ck-disabled) {
-				background: var(--ck-color-list-button-on-background-focus);
+				background: var(--ck-list-button-on-background-color);
 			}
 
 			&:focus:not(.ck-disabled) {
-				border-color: var(--ck-color-base-background);
+				border-color: var(--ck-color-surface-control);
 			}
 		}
 
 		&:hover:not(.ck-disabled) {
-			background: var(--ck-color-list-button-hover-background);
+			background: var(--ck-list-button-hover-background-color);
 		}
 	}
 
@@ -85,11 +108,11 @@
 	of conveying its state (like the switcher) */
 	& > .ck-button.ck-switchbutton {
 		&.ck-on {
-			background: var(--ck-color-list-background);
+			background: var(--ck-list-background-color);
 			color: inherit;
 
 			&:hover:not(.ck-disabled) {
-				background: var(--ck-color-list-button-hover-background);
+				background: var(--ck-list-button-hover-background-color);
 				color: inherit;
 			}
 		}
@@ -97,7 +120,7 @@
 }
 
 .ck-list .ck-list__group {
-	padding-top: var(--ck-spacing-medium);
+	padding-top: var(--ck-spacing-surface-section-gap-block);
 
 	/* Lists come with an inner vertical padding. Don't duplicate it. */
 	&:first-child {
@@ -106,21 +129,21 @@
 
 	/* The group should have a border when it's not the first item. */
 	*:not(.ck-hidden) ~ & {
-		border-top: 1px solid var(--ck-color-base-border);
+		border-top: var(--ck-border-width-divider) solid var(--ck-list-divider-color);
 	}
 
 	& > .ck-label {
-		font-size: 11px;
-		font-weight: bold;
-		padding: var(--ck-spacing-medium) var(--ck-spacing-large) 0;
+		font-size: var(--ck-list-group-label-font-size);
+		font-weight: var(--ck-font-weight-ui-label);
+		padding: var(--ck-spacing-surface-section-gap-block) var(--ck-spacing-control-meta-gap) 0;
 	}
 }
 
 .ck.ck-list__separator {
 	height: 1px;
 	width: 100%;
-	background: var(--ck-color-base-border);
+	background: var(--ck-list-divider-color);
 
 	/* Give the separator some air */
-	margin: var(--ck-spacing-small) 0;
+	margin: var(--ck-spacing-surface-item-gap-inline) 0;
 }
diff --git a/packages/ckeditor5-ui/theme/components/menubar/menubar.css b/packages/ckeditor5-ui/theme/components/menubar/menubar.css
index 5f567b7c170..c79b4d74c14 100644
--- a/packages/ckeditor5-ui/theme/components/menubar/menubar.css
+++ b/packages/ckeditor5-ui/theme/components/menubar/menubar.css
@@ -8,8 +8,8 @@
 	flex-wrap: wrap;
 	justify-content: flex-start;
 	background: var(--ck-color-base-background);
-	padding: var(--ck-spacing-small);
-	gap: var(--ck-spacing-small);
-	border: 1px solid var(--ck-color-toolbar-border);
+	padding: var(--ck-spacing-surface-padding-inline);
+	gap: var(--ck-spacing-surface-item-gap-inline);
+	border: var(--ck-border-width-surface) solid var(--ck-toolbar-border-color);
 	width: 100%;
 }
diff --git a/packages/ckeditor5-ui/theme/components/menubar/menubarmenubutton.css b/packages/ckeditor5-ui/theme/components/menubar/menubarmenubutton.css
index f2254a30ca4..df578eef20f 100644
--- a/packages/ckeditor5-ui/theme/components/menubar/menubarmenubutton.css
+++ b/packages/ckeditor5-ui/theme/components/menubar/menubarmenubutton.css
@@ -3,6 +3,10 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	/* Radius */
+	--ck-menu-bar-button-border-radius: 0;
+}
 
 .ck.ck-menu-bar__menu {
 	/*
@@ -18,18 +22,19 @@
 		}
 
 		&.ck-disabled > .ck-button__label {
-			opacity: var(--ck-disabled-opacity);
+			/* Backward compatibility: falls back to legacy --ck-disabled-opacity if overridden. */
+			opacity: var(--ck-disabled-opacity, var(--ck-opacity-disabled));
 		}
 
 		[dir="ltr"] & {
 			&:not(.ck-button_with-text) {
-				padding-left: var(--ck-spacing-small);
+				padding-left: var(--ck-spacing-control-padding-inline-compact);
 			}
 		}
 
 		[dir="rtl"] & {
 			&:not(.ck-button_with-text) {
-				padding-right: var(--ck-spacing-small);
+				padding-right: var(--ck-spacing-control-padding-inline-compact);
 			}
 		}
 	}
@@ -39,7 +44,7 @@
 	 */
 	/* stylelint-disable-next-line no-descending-specificity */
 	&.ck-menu-bar__menu_top-level > .ck-menu-bar__menu__button {
-		padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+		padding: var(--ck-spacing-control-padding-block-regular) var(--ck-spacing-control-icon-gap);
 		min-height: unset;
 
 		& .ck-button__label {
@@ -54,8 +59,7 @@
 		}
 
 		&.ck-on {
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
+			border-radius: var(--ck-menu-bar-panel-uniform-border-radius, var(--ck-border-radius-surface-attached-bottom));
 		}
 
 		& .ck-icon {
@@ -65,7 +69,8 @@
 
 	& > .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow {
 		pointer-events: none;
-		z-index: var(--ck-z-default);
+		/* Backward compatibility: falls back to legacy --ck-z-default if overridden. */
+		z-index: var(--ck-z-default, var(--ck-z-base));
 	}
 
 	/*
@@ -73,7 +78,7 @@
 	 */
 	/* stylelint-disable-next-line no-descending-specificity */
 	&:not(.ck-menu-bar__menu_top-level) .ck-menu-bar__menu__button {
-		border-radius: 0;
+		border-radius: var(--ck-menu-bar-button-border-radius);
 
 		& > .ck-menu-bar__menu__button__arrow {
 			width: var(--ck-dropdown-arrow-size);
@@ -82,27 +87,28 @@
 				transform: rotate(-90deg);
 
 				/* A space to accommodate the triangle. */
-				margin-left: var(--ck-spacing-standard);
+				margin-left: var(--ck-spacing-control-padding-inline);
 
 				/* Nudge the arrow gently to the right because its center of gravity is to the left */
-				margin-right: calc(-1 * var(--ck-spacing-small));
+				margin-right: calc(-1 * var(--ck-spacing-control-padding-inline-compact));
 			}
 
 			[dir="rtl"] & {
 				transform: rotate(90deg);
 
-				left: var(--ck-spacing-standard);
+				left: var(--ck-spacing-control-padding-inline);
 
 				/* A space to accommodate the triangle. */
-				margin-right: var(--ck-spacing-small);
+				margin-right: var(--ck-spacing-control-padding-inline-compact);
 
 				/* Nudge the arrow gently to the left because its center of gravity is to the right (after rotation). */
-				margin-left: calc(-1 * var(--ck-spacing-small));
+				margin-left: calc(-1 * var(--ck-spacing-control-padding-inline-compact));
 			}
 		}
 
 		&.ck-disabled > .ck-menu-bar__menu__button__arrow {
-			opacity: var(--ck-disabled-opacity);
+			/* Backward compatibility: falls back to legacy --ck-disabled-opacity if overridden. */
+			opacity: var(--ck-disabled-opacity, var(--ck-opacity-disabled));
 		}
 	}
 }
diff --git a/packages/ckeditor5-ui/theme/components/menubar/menubarmenulistitem.css b/packages/ckeditor5-ui/theme/components/menubar/menubarmenulistitem.css
index e3b99cd8d8c..cd393402bb4 100644
--- a/packages/ckeditor5-ui/theme/components/menubar/menubarmenulistitem.css
+++ b/packages/ckeditor5-ui/theme/components/menubar/menubarmenulistitem.css
@@ -4,6 +4,7 @@
  */
 
 :root {
+	/* Size */
 	--ck-menu-bar-menu-item-min-width: 18em;
 }
 
diff --git a/packages/ckeditor5-ui/theme/components/menubar/menubarmenulistitembutton.css b/packages/ckeditor5-ui/theme/components/menubar/menubarmenulistitembutton.css
index 258c85d7f43..fc5efab8246 100644
--- a/packages/ckeditor5-ui/theme/components/menubar/menubarmenulistitembutton.css
+++ b/packages/ckeditor5-ui/theme/components/menubar/menubarmenulistitembutton.css
@@ -3,13 +3,17 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	/* Radius */
+	--ck-menu-bar-list-item-button-border-radius: 0;
+}
 
 .ck.ck-menu-bar__menu {
 	/*
 	 * List item buttons.
 	 */
 	& .ck-button.ck-menu-bar__menu__item__button {
-		border-radius: 0;
+		border-radius: var(--ck-menu-bar-list-item-button-border-radius);
 
 		& > .ck-spinner-container,
 		& > .ck-spinner-container .ck-spinner {
@@ -19,14 +23,14 @@
 
 		& > .ck-spinner-container {
 			/* This ensures margins corresponding to the .ck-icon. */
-			font-size: var(--ck-icon-font-size);
+			font-size: .8333350694em;
 
 			[dir="ltr"] & {
-				margin-right: var(--ck-spacing-medium);
+				margin-right: var(--ck-spacing-control-icon-gap);
 			}
 
 			[dir="rtl"] & {
-				margin-left: var(--ck-spacing-medium);
+				margin-left: var(--ck-spacing-control-icon-gap);
 			}
 		}
 	}
diff --git a/packages/ckeditor5-ui/theme/components/menubar/menubarmenupanel.css b/packages/ckeditor5-ui/theme/components/menubar/menubarmenupanel.css
index e65cd5a3d33..08b38dbe61a 100644
--- a/packages/ckeditor5-ui/theme/components/menubar/menubarmenupanel.css
+++ b/packages/ckeditor5-ui/theme/components/menubar/menubarmenupanel.css
@@ -4,42 +4,49 @@
  */
 
 :root {
-	--ck-menu-bar-menu-max-width: 75vw;
-	--ck-menu-bar-nested-menu-horizontal-offset: 5px;
+	/* Radius */
+	/* Set to a radius value (e.g. var(--ck-radius-base)) to disable attached-corner behavior and use uniform corners. */
+	--ck-menu-bar-panel-uniform-border-radius: var(--ck-border-radius-uniform);
+	--ck-menu-bar-panel-border-radius: var(--ck-border-radius-surface-attached);
+
+	/* State / meta */
+	--ck-menu-bar-item-focus-border-color: var(--ck-interactive-focus-border-color);
 }
 
 .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel {
-	border-radius: var(--ck-rounded-corners-radius);
-	box-shadow: var(--ck-drop-shadow), 0 0;
+	border-radius: var(--ck-menu-bar-panel-border-radius);
+	box-shadow: var(--ck-shadow-surface-floating), 0 0;
 
-	background: var(--ck-color-dropdown-panel-background);
-	border: 1px solid var(--ck-color-dropdown-panel-border);
+	background: var(--ck-dropdown-panel-background-color);
+	border: var(--ck-border-width-surface) solid var(--ck-dropdown-panel-border-color);
 	bottom: 0;
 	height: fit-content;
 
-	z-index: var(--ck-z-panel);
-	max-width: var(--ck-menu-bar-menu-max-width);
+	/* Backward compatibility: falls back to legacy --ck-z-panel if overridden. */
+	z-index: var(--ck-z-panel, var(--ck-z-overlay));
+	/* Backward compatibility: falls back to legacy --ck-menu-bar-menu-max-width if overridden. */
+	max-width: var(--ck-menu-bar-menu-max-width, 75vw);
 	position: absolute;
 
 	/* Corner border radius consistent with the button. */
 	&.ck-menu-bar__menu__panel_position_es,
 	&.ck-menu-bar__menu__panel_position_se {
-		border-top-left-radius: 0;
+		border-radius: var(--ck-menu-bar-panel-uniform-border-radius, var(--ck-border-radius-surface-cut-top-left));
 	}
 
 	&.ck-menu-bar__menu__panel_position_ws,
 	&.ck-menu-bar__menu__panel_position_sw {
-		border-top-right-radius: 0;
+		border-radius: var(--ck-menu-bar-panel-uniform-border-radius, var(--ck-border-radius-surface-cut-top-right));
 	}
 
 	&.ck-menu-bar__menu__panel_position_en,
 	&.ck-menu-bar__menu__panel_position_ne {
-		border-bottom-left-radius: 0;
+		border-radius: var(--ck-menu-bar-panel-uniform-border-radius, var(--ck-border-radius-surface-cut-bottom-left));
 	}
 
 	&.ck-menu-bar__menu__panel_position_wn,
 	&.ck-menu-bar__menu__panel_position_nw {
-		border-bottom-right-radius: 0;
+		border-radius: var(--ck-menu-bar-panel-uniform-border-radius, var(--ck-border-radius-surface-cut-bottom-right));
 	}
 
 	&:focus {
@@ -69,7 +76,7 @@
 
 	&.ck-menu-bar__menu__panel_position_es,
 	&.ck-menu-bar__menu__panel_position_en {
-		left: calc( 100% - var(--ck-menu-bar-nested-menu-horizontal-offset) );
+		left: calc( 100% - var(--ck-menu-bar-nested-menu-horizontal-offset, 5px) );
 	}
 
 	&.ck-menu-bar__menu__panel_position_es {
@@ -82,7 +89,7 @@
 
 	&.ck-menu-bar__menu__panel_position_ws,
 	&.ck-menu-bar__menu__panel_position_wn {
-		right: calc( 100% - var(--ck-menu-bar-nested-menu-horizontal-offset) );
+		right: calc( 100% - var(--ck-menu-bar-nested-menu-horizontal-offset, 5px) );
 	}
 
 	&.ck-menu-bar__menu__panel_position_ws {
@@ -108,11 +115,11 @@
 		&:active {
 			/* Fix truncated shadows due to rendering order. */
 			position: relative;
-			z-index: 2;
+			z-index: var(--ck-layer-control-raised);
 
 			outline: none;
-			border: var(--ck-focus-ring);
-			box-shadow: var(--ck-focus-outer-shadow), 0 0;
+			border-color: var(--ck-menu-bar-item-focus-border-color);
+			box-shadow: var(--ck-interactive-focus-shadow), 0 0;
 		}
 	}
 }
diff --git a/packages/ckeditor5-ui/theme/components/panel/balloonpanel.css b/packages/ckeditor5-ui/theme/components/panel/balloonpanel.css
index 9857014f424..7881a498f02 100644
--- a/packages/ckeditor5-ui/theme/components/panel/balloonpanel.css
+++ b/packages/ckeditor5-ui/theme/components/panel/balloonpanel.css
@@ -4,31 +4,42 @@
  */
 
 :root {
-	--ck-balloon-border-width: 1px;
-	--ck-balloon-arrow-offset: 2px;
-	--ck-balloon-arrow-height: 10px;
+	/* Radius */
+	--ck-balloon-panel-border-radius: var(--ck-border-radius-surface);
+
+	/* Border */
+	--ck-balloon-panel-border: var(--ck-border-width-surface) solid var(--ck-balloon-panel-border-color);
+
+	/* Color */
+	--ck-balloon-panel-background-color: var(--ck-color-surface-container);
+	--ck-balloon-panel-border-color: var(--ck-color-border-container);
+
+	/* State / meta */
+	--ck-balloon-panel-arrow-display: block;
+
+	/* Backward compatibility: these tokens were removed but may be overridden by consumers. */
 	--ck-balloon-arrow-half-width: 8px;
-	--ck-balloon-arrow-drop-shadow: 0 2px 2px var(--ck-color-shadow-drop);
-	/* Make sure the balloon arrow does not float over its children. */
-	--ck-balloon-panel-arrow-z-index: calc(var(--ck-z-default) - 3);
+	--ck-balloon-arrow-height: 10px;
+	--ck-balloon-arrow-offset: 2px;
 }
 
 .ck.ck-balloon-panel {
-	border-radius: var(--ck-rounded-corners-radius);
-	box-shadow: var(--ck-drop-shadow), 0 0;
+	border-radius: var(--ck-balloon-panel-border-radius);
+	box-shadow: var(--ck-shadow-surface-floating), 0 0;
 
 	min-height: 15px;
 
-	background: var(--ck-color-panel-background);
-	border: var(--ck-balloon-border-width) solid var(--ck-color-panel-border);
+	background: var(--ck-balloon-panel-background-color);
+	border: var(--ck-balloon-panel-border);
 	display: none;
 	position: absolute;
 
-	z-index: var(--ck-z-panel);
+	z-index: var(--ck-layer-panel);
 
 	&.ck-balloon-panel_with-arrow {
 		&::before,
 		&::after {
+			display: var(--ck-balloon-panel-arrow-display);
 			width: 0;
 			height: 0;
 			border-style: solid;
@@ -37,11 +48,12 @@
 		}
 
 		&::before {
-			z-index: var(--ck-balloon-panel-arrow-z-index);
+			/* Backward compatibility: falls back to legacy --ck-balloon-panel-arrow-z-index if overridden. */
+			z-index: var(--ck-balloon-panel-arrow-z-index, var(--ck-layer-balloon-arrow-back));
 		}
 
 		&::after {
-			z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
+			z-index: var(--ck-layer-balloon-arrow-front);
 		}
 	}
 
@@ -52,15 +64,15 @@
 		}
 
 		&::before {
-			border-color: transparent transparent var(--ck-color-panel-border) transparent;
-			margin-top: calc( -1 * var(--ck-balloon-border-width) );
-			z-index: var(--ck-balloon-panel-arrow-z-index);
+			border-color: transparent transparent var(--ck-balloon-panel-border-color) transparent;
+			margin-top: calc( -1 * var(--ck-border-width-surface) );
+			z-index: var(--ck-layer-balloon-arrow-back);
 		}
 
 		&::after {
-			border-color: transparent transparent var(--ck-color-panel-background) transparent;
-			margin-top: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
-			z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
+			border-color: transparent transparent var(--ck-balloon-panel-background-color) transparent;
+			margin-top: calc( var(--ck-balloon-arrow-offset) - var(--ck-border-width-surface) );
+			z-index: var(--ck-layer-balloon-arrow-front);
 		}
 	}
 
@@ -71,16 +83,17 @@
 		}
 
 		&::before {
-			border-color: var(--ck-color-panel-border) transparent transparent;
-			filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow));
-			margin-bottom: calc( -1 * var(--ck-balloon-border-width) );
-			z-index: var(--ck-balloon-panel-arrow-z-index);
+			border-color: var(--ck-balloon-panel-border-color) transparent transparent;
+			/* Backward compatibility: falls back to legacy --ck-balloon-arrow-drop-shadow if overridden. */
+			filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow, 0 2px 2px var(--ck-color-shadow-drop)));
+			margin-bottom: calc( -1 * var(--ck-border-width-surface) );
+			z-index: var(--ck-layer-balloon-arrow-back);
 		}
 
 		&::after {
-			border-color: var(--ck-color-panel-background) transparent transparent transparent;
-			margin-bottom: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
-			z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
+			border-color: var(--ck-balloon-panel-background-color) transparent transparent transparent;
+			margin-bottom: calc( var(--ck-balloon-arrow-offset) - var(--ck-border-width-surface) );
+			z-index: var(--ck-layer-balloon-arrow-front);
 		}
 	}
 
@@ -91,13 +104,13 @@
 		}
 
 		&::before {
-			border-color: transparent transparent transparent var(--ck-color-panel-border);
-			margin-right: calc( -1 * var(--ck-balloon-border-width) );
+			border-color: transparent transparent transparent var(--ck-balloon-panel-border-color);
+			margin-right: calc( -1 * var(--ck-border-width-surface) );
 		}
 
 		&::after {
-			border-color: transparent transparent transparent var(--ck-color-panel-background);
-			margin-right: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
+			border-color: transparent transparent transparent var(--ck-balloon-panel-background-color);
+			margin-right: calc( var(--ck-balloon-arrow-offset) - var(--ck-border-width-surface) );
 		}
 	}
 
@@ -108,13 +121,13 @@
 		}
 
 		&::before {
-			border-color: transparent var(--ck-color-panel-border) transparent transparent;
-			margin-left: calc( -1 * var(--ck-balloon-border-width) );
+			border-color: transparent var(--ck-balloon-panel-border-color) transparent transparent;
+			margin-left: calc( -1 * var(--ck-border-width-surface) );
 		}
 
 		&::after {
-			border-color: transparent var(--ck-color-panel-background) transparent transparent;
-			margin-left: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
+			border-color: transparent var(--ck-balloon-panel-background-color) transparent transparent;
+			margin-left: calc( var(--ck-balloon-arrow-offset) - var(--ck-border-width-surface) );
 		}
 	}
 
diff --git a/packages/ckeditor5-ui/theme/components/panel/balloonrotator.css b/packages/ckeditor5-ui/theme/components/panel/balloonrotator.css
index c3cc9ebcd0c..afd4ce79a10 100644
--- a/packages/ckeditor5-ui/theme/components/panel/balloonrotator.css
+++ b/packages/ckeditor5-ui/theme/components/panel/balloonrotator.css
@@ -4,25 +4,25 @@
  */
 
 .ck .ck-balloon-rotator__navigation {
-	background: var(--ck-color-toolbar-background);
-	border-bottom: 1px solid var(--ck-color-toolbar-border);
-	padding: 0 var(--ck-spacing-small);
+	background: var(--ck-toolbar-background-color);
+	border-bottom: var(--ck-border-width-divider) solid var(--ck-toolbar-border-color);
+	padding: 0 var(--ck-spacing-surface-padding-inline);
 	display: flex;
 	align-items: center;
 
 	/* Let's keep similar appearance to `ck-toolbar`. */
 	& > * {
-		margin-right: var(--ck-spacing-small);
-		margin-top: var(--ck-spacing-small);
-		margin-bottom: var(--ck-spacing-small);
+		margin-right: var(--ck-spacing-surface-item-gap-inline);
+		margin-top: var(--ck-spacing-surface-item-gap-block);
+		margin-bottom: var(--ck-spacing-surface-item-gap-block);
 	}
 
 	/* Gives counter more breath than buttons. */
 	& .ck-balloon-rotator__counter {
-		margin-right: var(--ck-spacing-standard);
+		margin-right: var(--ck-spacing-control-padding-inline);
 
 		/* We need to use smaller margin because of previous button's right margin. */
-		margin-left: var(--ck-spacing-small);
+		margin-left: var(--ck-spacing-surface-item-gap-inline);
 	}
 	justify-content: center
 }
diff --git a/packages/ckeditor5-ui/theme/components/panel/fakepanel.css b/packages/ckeditor5-ui/theme/components/panel/fakepanel.css
index 8380b24083e..54335b43cc1 100644
--- a/packages/ckeditor5-ui/theme/components/panel/fakepanel.css
+++ b/packages/ckeditor5-ui/theme/components/panel/fakepanel.css
@@ -4,21 +4,16 @@
  */
 
 
-:root {
-	--ck-balloon-fake-panel-offset-horizontal: 6px;
-	--ck-balloon-fake-panel-offset-vertical: 6px;
-}
-
 /* Let's use `.ck-balloon-panel` appearance. See: balloonpanel.css. */
 
 .ck .ck-fake-panel div {
-	box-shadow: var(--ck-drop-shadow), 0 0;
+	box-shadow: var(--ck-shadow-surface-floating), 0 0;
 
 	min-height: 15px;
 
-	background: var(--ck-color-panel-background);
-	border: 1px solid var(--ck-color-panel-border);
-	border-radius: var(--ck-border-radius);
+	background: var(--ck-balloon-panel-background-color);
+	border: var(--ck-border-width-surface) solid var(--ck-balloon-panel-border-color);
+	border-radius: var(--ck-border-radius-surface);
 
 	width: 100%;
 	height: 100%;
@@ -26,33 +21,44 @@
 }
 
 .ck .ck-fake-panel div:nth-child( 1 ) {
-	margin-left: var(--ck-balloon-fake-panel-offset-horizontal);
-	margin-top: var(--ck-balloon-fake-panel-offset-vertical);
+	/* Backward compatibility: falls back to legacy --ck-balloon-fake-panel-offset-* if overridden. */
+	margin-left: var(--ck-balloon-fake-panel-offset-horizontal, 6px);
+	margin-top: var(--ck-balloon-fake-panel-offset-vertical, 6px);
 	z-index: 2;
 }
 
 .ck .ck-fake-panel div:nth-child( 2 ) {
-	margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 2);
-	margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 2);
+	margin-left: calc(2 * var(--ck-balloon-fake-panel-offset-horizontal, 6px));
+	margin-top: calc(2 * var(--ck-balloon-fake-panel-offset-vertical, 6px));
 	z-index: 1;
 }
 
 .ck .ck-fake-panel div:nth-child( 3 ) {
-	margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 3);
-	margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 3);
+	margin-left: calc(3 * var(--ck-balloon-fake-panel-offset-horizontal, 6px));
+	margin-top: calc(3 * var(--ck-balloon-fake-panel-offset-vertical, 6px));
 }
 
 .ck .ck-fake-panel {
 	position: absolute;
 
 	/* Fake panels should be placed under main balloon content. */
-	z-index: calc(var(--ck-z-panel) - 1);
+	z-index: var(--ck-layer-panel-below);
 }
 
 /* If balloon is positioned above element, we need to move fake panel to the top. */
 
-.ck .ck-balloon-panel_arrow_s + .ck-fake-panel,
-.ck .ck-balloon-panel_arrow_se + .ck-fake-panel,
-.ck .ck-balloon-panel_arrow_sw + .ck-fake-panel {
-	--ck-balloon-fake-panel-offset-vertical: -6px;
+.ck .ck-balloon-panel_arrow_s + .ck-fake-panel div,
+.ck .ck-balloon-panel_arrow_se + .ck-fake-panel div,
+.ck .ck-balloon-panel_arrow_sw + .ck-fake-panel div {
+	&:nth-child( 1 ) {
+		margin-top: calc(-1 * var(--ck-balloon-fake-panel-offset-vertical, 6px));
+	}
+
+	&:nth-child( 2 ) {
+		margin-top: calc(-2 * var(--ck-balloon-fake-panel-offset-vertical, 6px));
+	}
+
+	&:nth-child( 3 ) {
+		margin-top: calc(-3 * var(--ck-balloon-fake-panel-offset-vertical, 6px));
+	}
 }
diff --git a/packages/ckeditor5-ui/theme/components/panel/stickypanel.css b/packages/ckeditor5-ui/theme/components/panel/stickypanel.css
index 4178f9d49ac..fde7c880840 100644
--- a/packages/ckeditor5-ui/theme/components/panel/stickypanel.css
+++ b/packages/ckeditor5-ui/theme/components/panel/stickypanel.css
@@ -4,14 +4,18 @@
  */
 
 
+:root {
+	/* Set to a radius value (e.g. var(--ck-radius-base)) to disable attached-corner behavior and use uniform corners. */
+	--ck-sticky-panel-uniform-border-radius: var(--ck-border-radius-uniform);
+}
+
 .ck.ck-sticky-panel {
 	& .ck-sticky-panel__content_sticky {
-		box-shadow: var(--ck-drop-shadow), 0 0;
+		box-shadow: var(--ck-shadow-surface-floating), 0 0;
 
-		border-width: 0 1px 1px;
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-		z-index: var(--ck-z-panel); /* #315 */
+		border-width: 0 var(--ck-border-width-surface) var(--ck-border-width-surface);
+		border-radius: var(--ck-sticky-panel-uniform-border-radius, var(--ck-border-radius-surface-attached-top));
+		z-index: var(--ck-layer-panel); /* #315 */
 		position: fixed;
 		top: 0;
 	}
diff --git a/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css b/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css
index b12b8f81114..ea67d9c18a8 100644
--- a/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css
+++ b/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css
@@ -3,9 +3,16 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	/* Spacing */
+	--ck-responsive-form-padding: var(--ck-spacing-region-edge-margin-block);
+
+	/* Border */
+	--ck-responsive-form-divider-border: var(--ck-border-width-divider) solid var(--ck-color-base-border);
+}
 
 .ck.ck-responsive-form {
-	padding: var(--ck-spacing-large);
+	padding: var(--ck-responsive-form-padding);
 
 	&:focus {
 		/* See: https://github.com/ckeditor/ckeditor5/issues/4773 */
@@ -14,13 +21,13 @@
 
 	[dir="ltr"] & {
 		& > :not(:first-child) {
-			margin-left: var(--ck-spacing-standard);
+			margin-left: var(--ck-spacing-region-padding-inline);
 		}
 	}
 
 	[dir="rtl"] & {
 		& > :not(:last-child) {
-			margin-left: var(--ck-spacing-standard);
+			margin-left: var(--ck-spacing-region-padding-inline);
 		}
 	}
 
@@ -29,7 +36,7 @@
 		width: calc(.8 * var(--ck-input-width));
 
 		& .ck-labeled-field-view {
-			margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
+			margin: var(--ck-spacing-region-edge-margin-block) var(--ck-spacing-region-edge-margin-block) 0;
 
 			& .ck-input-text,
 			& .ck-input-number {
@@ -45,12 +52,12 @@
 
 		& > .ck-button:nth-last-child(1),
 		& > .ck-button:nth-last-child(2) {
-			padding: var(--ck-spacing-standard);
-			margin-top: var(--ck-spacing-large);
+			padding: var(--ck-spacing-control-padding-inline);
+			margin-top: var(--ck-spacing-region-edge-margin-block);
 			border-radius: 0;
 
 			&:not(:focus) {
-				border-top: 1px solid var(--ck-color-base-border);
+				border-top: var(--ck-responsive-form-divider-border);
 			}
 
 			[dir="ltr"] & {
@@ -61,7 +68,7 @@
 				margin-left: 0;
 
 				&:last-of-type {
-					border-right: 1px solid var(--ck-color-base-border);
+					border-right: var(--ck-responsive-form-divider-border);
 				}
 			}
 		}
@@ -70,14 +77,14 @@
 				content: "";
 				width: 0;
 				position: absolute;
-				right: -1px;
-				top: -1px;
-				bottom: -1px;
+				right: calc(-1 * var(--ck-border-width-divider));
+				top: calc(-1 * var(--ck-border-width-divider));
+				bottom: calc(-1 * var(--ck-border-width-divider));
 				z-index: 1;
 			}
 
 			&:nth-last-child(2)::after {
-				border-right: 1px solid var(--ck-color-base-border);
+				border-right: var(--ck-responsive-form-divider-border);
 			}
 
 			&:focus::after {
@@ -88,7 +95,7 @@
 }
 
 .ck-vertical-form > .ck-button:nth-last-child(2)::after {
-	border-right: 1px solid var(--ck-color-base-border);
+	border-right: var(--ck-responsive-form-divider-border);
 }
 
 .ck-vertical-form .ck-button {
@@ -96,9 +103,9 @@
 		content: "";
 		width: 0;
 		position: absolute;
-		right: -1px;
-		top: -1px;
-		bottom: -1px;
+		right: calc(-1 * var(--ck-border-width-divider));
+		top: calc(-1 * var(--ck-border-width-divider));
+		bottom: calc(-1 * var(--ck-border-width-divider));
 		z-index: 1;
 	}
 
diff --git a/packages/ckeditor5-ui/theme/components/search/search.css b/packages/ckeditor5-ui/theme/components/search/search.css
index 5c4367242fd..576189a5419 100644
--- a/packages/ckeditor5-ui/theme/components/search/search.css
+++ b/packages/ckeditor5-ui/theme/components/search/search.css
@@ -5,7 +5,8 @@
 
 
 :root {
-	--ck-search-field-view-horizontal-spacing: calc(var(--ck-icon-size) + var(--ck-spacing-medium));
+	/* Spacing */
+	--ck-search-results-info-padding: var(--ck-spacing-surface-section-gap-block) var(--ck-spacing-control-meta-gap);
 }
 
 .ck.ck-search {
@@ -20,11 +21,11 @@
 			transform: translateY(-50%);
 
 			[dir="ltr"] & {
-				left: var(--ck-spacing-medium);
+				left: var(--ck-spacing-control-icon-gap);
 			}
 
 			[dir="rtl"] & {
-				right: var(--ck-spacing-medium);
+				right: var(--ck-spacing-control-icon-gap);
 			}
 		}
 
@@ -35,7 +36,8 @@
 		}
 
 		&.ck-search__query_with-icon {
-			--ck-labeled-field-label-default-position-x: var(--ck-search-field-view-horizontal-spacing);
+			/* Backward compatibility: falls back to legacy --ck-spacing-medium if overridden. */
+			--ck-labeled-field-label-default-position-x: var(--ck-search-field-view-horizontal-spacing, calc(var(--ck-icon-size) + var(--ck-spacing-medium, var(--ck-spacing-md))));
 
 			& > .ck-labeled-field-view__input-wrapper > .ck-icon {
 				opacity: .5;
@@ -46,22 +48,26 @@
 				width: 100%;
 
 				[dir="ltr"] & {
-					padding-left: var(--ck-search-field-view-horizontal-spacing);
+					/* Backward compatibility: falls back to legacy --ck-spacing-medium if overridden. */
+					padding-left: var(--ck-search-field-view-horizontal-spacing, calc(var(--ck-icon-size) + var(--ck-spacing-medium, var(--ck-spacing-md))));
 				}
 
 				[dir="rtl"] & {
 					&:not(.ck-input-text_empty) {
-						padding-left: var(--ck-search-field-view-horizontal-spacing);
+						/* Backward compatibility: falls back to legacy --ck-spacing-medium if overridden. */
+						padding-left: var(--ck-search-field-view-horizontal-spacing, calc(var(--ck-icon-size) + var(--ck-spacing-medium, var(--ck-spacing-md))));
 					}
 				}
 			}
 		}
 
 		&.ck-search__query_with-reset {
-			--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-search-field-view-horizontal-spacing);
+			/* Backward compatibility: falls back to legacy --ck-spacing-medium if overridden. */
+			--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-search-field-view-horizontal-spacing, calc(var(--ck-icon-size) + var(--ck-spacing-medium, var(--ck-spacing-md))));
 
 			&.ck-labeled-field-view_empty {
-				--ck-labeled-field-empty-unfocused-max-width: 100% - var(--ck-search-field-view-horizontal-spacing) - var(--ck-spacing-medium);
+				/* Backward compatibility: falls back to legacy --ck-spacing-medium if overridden. */
+				--ck-labeled-field-empty-unfocused-max-width: 100% - var(--ck-search-field-view-horizontal-spacing, calc(var(--ck-icon-size) + var(--ck-spacing-medium, var(--ck-spacing-md)))) - var(--ck-spacing-control-icon-gap);
 			}
 
 			& .ck-search__reset {
@@ -73,11 +79,11 @@
 				padding: 0;
 
 				[dir="ltr"] & {
-					right: var(--ck-spacing-medium);
+					right: var(--ck-spacing-control-icon-gap);
 				}
 
 				[dir="rtl"] & {
-					left: var(--ck-spacing-medium);
+					left: var(--ck-spacing-control-icon-gap);
 				}
 
 				&:hover {
@@ -91,13 +97,15 @@
 
 				[dir="ltr"] & {
 					&:not(.ck-input-text_empty) {
-						padding-right: var(--ck-search-field-view-horizontal-spacing);
+						/* Backward compatibility: falls back to legacy --ck-spacing-medium if overridden. */
+						padding-right: var(--ck-search-field-view-horizontal-spacing, calc(var(--ck-icon-size) + var(--ck-spacing-medium, var(--ck-spacing-md))));
 					}
 				}
 
 				/* stylelint-disable-next-line no-descending-specificity */
 				[dir="rtl"] & {
-					padding-right: var(--ck-search-field-view-horizontal-spacing);
+					/* Backward compatibility: falls back to legacy --ck-spacing-medium if overridden. */
+					padding-right: var(--ck-search-field-view-horizontal-spacing, calc(var(--ck-icon-size) + var(--ck-spacing-medium, var(--ck-spacing-md))));
 				}
 			}
 		}
@@ -108,19 +116,19 @@
 
 		& > .ck-search__info {
 			width: 100%;
-			padding: var(--ck-spacing-medium) var(--ck-spacing-large);
+			padding: var(--ck-search-results-info-padding);
 
 			& * {
 				white-space: normal;
 			}
 
 			& > span:first-child {
-				font-weight: bold;
+				font-weight: var(--ck-font-weight-ui-heading);
 				display: block;
 			}
 
 			& > span:last-child {
-				margin-top: var(--ck-spacing-medium);
+				margin-top: var(--ck-spacing-surface-section-gap-block);
 			}
 
 			/* Hide the filtered view when nothing was found */
diff --git a/packages/ckeditor5-ui/theme/components/spinner/spinner.css b/packages/ckeditor5-ui/theme/components/spinner/spinner.css
index 451c4c46c37..427ca4d0c6e 100644
--- a/packages/ckeditor5-ui/theme/components/spinner/spinner.css
+++ b/packages/ckeditor5-ui/theme/components/spinner/spinner.css
@@ -4,13 +4,14 @@
  */
 
 :root {
+	/* Size */
 	--ck-toolbar-spinner-size: 18px;
 }
 
 .ck.ck-spinner-container {
 	width: var(--ck-toolbar-spinner-size);
 	height: var(--ck-toolbar-spinner-size);
-	animation: 1.5s infinite ck-spinner-rotate linear;
+	animation: var(--ck-animation-duration-progress) var(--ck-animation-repeat-infinite) ck-spinner-rotate var(--ck-animation-timing-function-progress);
 	display: block;
 
 	@media (prefers-reduced-motion: reduce) {
@@ -22,8 +23,8 @@
 .ck.ck-spinner {
 	width: var(--ck-toolbar-spinner-size);
 	height: var(--ck-toolbar-spinner-size);
-	border-radius: 50%;
-	border: 2px solid var(--ck-color-text);
+	border-radius: var(--ck-radius-full);
+	border: var(--ck-border-width-emphasis) solid var(--ck-color-text);
 	border-top-color: transparent;
 	position: absolute;
 	top: 50%;
diff --git a/packages/ckeditor5-ui/theme/components/toolbar/blocktoolbar.css b/packages/ckeditor5-ui/theme/components/toolbar/blocktoolbar.css
index 0ee3e9f9153..59bbbbf61c4 100644
--- a/packages/ckeditor5-ui/theme/components/toolbar/blocktoolbar.css
+++ b/packages/ckeditor5-ui/theme/components/toolbar/blocktoolbar.css
@@ -4,13 +4,17 @@
  */
 
 :root {
-	--ck-color-block-toolbar-button: var(--ck-color-text);
-	--ck-block-toolbar-button-size: var(--ck-font-size-normal);
+	/* Size */
+	/* Backward compatibility: falls back to legacy --ck-font-size-normal if overridden. */
+	--ck-block-toolbar-button-size: var(--ck-font-size-normal, var(--ck-font-size-md));
 }
 
 .ck.ck-block-toolbar-button {
-	color: var(--ck-color-block-toolbar-button);
-	font-size: var(--ck-block-toolbar-size);
+	/* Fallback to `--ck-color-block-toolbar-button` for backward compatibility. */
+	color: var(--ck-color-block-toolbar-button, var(--ck-color-text));
+	/* Fallback to `--ck-block-toolbar-size` for backward compatibility. */
+	font-size: var(--ck-block-toolbar-size, var(--ck-block-toolbar-button-size));
 	position: absolute;
-	z-index: var(--ck-z-default);
+	/* Backward compatibility: falls back to legacy --ck-z-default if overridden. */
+	z-index: var(--ck-z-default, var(--ck-z-base));
 }
diff --git a/packages/ckeditor5-ui/theme/components/toolbar/toolbar.css b/packages/ckeditor5-ui/theme/components/toolbar/toolbar.css
index 096e5b8e321..494050b2624 100644
--- a/packages/ckeditor5-ui/theme/components/toolbar/toolbar.css
+++ b/packages/ckeditor5-ui/theme/components/toolbar/toolbar.css
@@ -3,11 +3,30 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	/* Spacing */
+	--ck-toolbar-item-gap-inline: var(--ck-spacing-surface-item-gap-inline);
+	--ck-toolbar-padding: 0 var(--ck-spacing-surface-padding-inline);
+
+	/* Radius */
+	/* Set to a radius value (e.g. var(--ck-radius-base)) to disable attached-corner behavior and use uniform corners. */
+	--ck-toolbar-compact-uniform-border-radius: var(--ck-border-radius-uniform);
+	--ck-toolbar-border-radius: var(--ck-border-radius-surface);
+	--ck-toolbar-vertical-button-border-radius: 0;
+
+	/* Color */
+	--ck-toolbar-background-color: var(--ck-color-surface-container);
+	--ck-toolbar-border-color: var(--ck-color-border-container);
+
+	/* Border */
+	--ck-toolbar-border: var(--ck-border-width-surface) solid var(--ck-toolbar-border-color);
+}
+
 .ck.ck-toolbar {
-	border-radius: var(--ck-rounded-corners-radius);
-	background: var(--ck-color-toolbar-background);
-	padding: 0 var(--ck-spacing-small);
-	border: 1px solid var(--ck-color-toolbar-border);
+	border-radius: var(--ck-toolbar-border-radius);
+	background: var(--ck-toolbar-background-color);
+	padding: var(--ck-toolbar-padding);
+	border: var(--ck-toolbar-border);
 	-webkit-user-select: none;
 	user-select: none;
 
@@ -19,14 +38,14 @@
 		height: var(--ck-icon-size);
 		width: 1px;
 		min-width: 1px;
-		background: var(--ck-color-toolbar-border);
+		background: var(--ck-toolbar-border-color);
 
 		/*
 		 * These margins make the separators look better in balloon toolbars (when aligned with the "tip").
 		 * See https://github.com/ckeditor/ckeditor5/issues/7493.
 		 */
-		margin-top: var(--ck-spacing-small);
-		margin-bottom: var(--ck-spacing-small);
+		margin-top: var(--ck-spacing-surface-item-gap-block);
+		margin-bottom: var(--ck-spacing-surface-item-gap-block);
 		display: inline-block;
 
 		/*
@@ -48,7 +67,7 @@
 	& > .ck-toolbar__items {
 		& > *:not(.ck-toolbar__line-break) {
 			/* (#11) Separate toolbar items. */
-			margin-right: var(--ck-spacing-small);
+			margin-right: var(--ck-toolbar-item-gap-inline);
 		}
 
 		/* Don't display a separator after an empty items container, for instance,
@@ -65,8 +84,8 @@
 	& > .ck-toolbar__items > *:not(.ck-toolbar__line-break),
 	& > .ck.ck-toolbar__grouped-dropdown {
 		/* Make sure items wrapped to the next line have v-spacing */
-		margin-top: var(--ck-spacing-small);
-		margin-bottom: var(--ck-spacing-small);
+		margin-top: var(--ck-spacing-surface-item-gap-block);
+		margin-bottom: var(--ck-spacing-surface-item-gap-block);
 	}
 
 	&.ck-toolbar_vertical {
@@ -82,7 +101,7 @@
 			margin: 0;
 
 			/* Items in a vertical toolbar span the entire width so rounded corners are pointless. */
-			border-radius: 0;
+			border-radius: var(--ck-toolbar-vertical-button-border-radius);
 		}
 	}
 
@@ -107,7 +126,7 @@
 		 * This button has no arrow so let's revert that padding back to normal.
 		 */
 		& > .ck.ck-button.ck-dropdown__button {
-			padding-left: var(--ck-spacing-tiny);
+			padding-left: var(--ck-spacing-control-padding-inline-start-compact);
 		}
 		& > .ck-dropdown__button .ck-dropdown__arrow {
 			display: none;
@@ -165,7 +184,7 @@
 
 	&:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck {
 		/* (#11) Separate toolbar items. */
-		margin-left: var(--ck-spacing-small);
+		margin-left: var(--ck-toolbar-item-gap-inline);
 	}
 
 	& > .ck-toolbar__items > .ck:last-child {
@@ -175,25 +194,23 @@
 	&.ck-toolbar_compact > .ck-toolbar__items > .ck {
 		/* No rounded corners on the right side of the first child. */
 		&:first-child {
-			border-top-left-radius: 0;
-			border-bottom-left-radius: 0;
+			border-radius: var(--ck-toolbar-compact-uniform-border-radius, var(--ck-border-radius-surface-cut-top-right));
 		}
 
 		/* No rounded corners on the left side of the last child. */
 		&:last-child {
-			border-top-right-radius: 0;
-			border-bottom-right-radius: 0;
+			border-radius: var(--ck-toolbar-compact-uniform-border-radius, var(--ck-border-radius-surface-cut-top-left));
 		}
 	}
 
 	/* Separate the the separator form the grouping dropdown when some items are grouped. */
 	& > .ck.ck-toolbar__separator {
-		margin-left: var(--ck-spacing-small);
+		margin-left: var(--ck-spacing-surface-item-gap-inline);
 	}
 
 	/* Some spacing between the items and the separator before the grouped items dropdown. */
 	&.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child) {
-		margin-left: var(--ck-spacing-small);
+		margin-left: var(--ck-spacing-surface-item-gap-inline);
 	}
 }
 
@@ -213,25 +230,23 @@
 	&.ck-toolbar_compact > .ck-toolbar__items > .ck {
 		/* No rounded corners on the right side of the first child. */
 		&:first-child {
-			border-top-right-radius: 0;
-			border-bottom-right-radius: 0;
+			border-radius: var(--ck-toolbar-compact-uniform-border-radius, var(--ck-border-radius-surface-cut-top-left));
 		}
 
 		/* No rounded corners on the left side of the last child. */
 		&:last-child {
-			border-top-left-radius: 0;
-			border-bottom-left-radius: 0;
+			border-radius: var(--ck-toolbar-compact-uniform-border-radius, var(--ck-border-radius-surface-cut-top-right));
 		}
 	}
 
 	/* Separate the the separator form the grouping dropdown when some items are grouped. */
 	& > .ck.ck-toolbar__separator {
-		margin-right: var(--ck-spacing-small);
+		margin-right: var(--ck-toolbar-item-gap-inline);
 	}
 
 	/* Some spacing between the items and the separator before the grouped items dropdown. */
 	&.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child) {
-		margin-right: var(--ck-spacing-small);
+		margin-right: var(--ck-spacing-surface-item-gap-inline);
 	}
 }
 
diff --git a/packages/ckeditor5-ui/theme/components/tooltip/tooltip.css b/packages/ckeditor5-ui/theme/components/tooltip/tooltip.css
index f4014485be9..6ab46f4a732 100644
--- a/packages/ckeditor5-ui/theme/components/tooltip/tooltip.css
+++ b/packages/ckeditor5-ui/theme/components/tooltip/tooltip.css
@@ -4,15 +4,31 @@
  */
 
 
+:root {
+	/* Size */
+	--ck-tooltip-max-width: 200px;
+
+	/* Spacing */
+	--ck-tooltip-padding: 0 var(--ck-spacing-control-icon-gap);
+
+	/* Border */
+	--ck-tooltip-border: 0px solid transparent;
+
+	/* Color */
+	--ck-tooltip-background-color: var(--ck-color-surface-inverse);
+	--ck-tooltip-text-color: var(--ck-color-text-inverse);
+
+	/* Typography */
+	--ck-tooltip-text-font-size: .9em;
+}
+
 .ck.ck-balloon-panel.ck-tooltip {
-	--ck-balloon-border-width: 0px;
-	--ck-balloon-arrow-offset: 0px;
-	--ck-balloon-arrow-half-width: 4px;
-	--ck-balloon-arrow-height: 4px;
-	--ck-tooltip-text-padding: 4px;
-	--ck-color-panel-background: var(--ck-color-tooltip-background);
+	--ck-balloon-panel-border: var(--ck-tooltip-border);
+	--ck-balloon-panel-background-color: var(--ck-tooltip-background-color);
 
-	padding: 0 var(--ck-spacing-medium);
+	padding: var(--ck-tooltip-padding);
+
+	z-index: var(--ck-layer-tooltip);
 
 	/* Reset balloon panel styles */
 	box-shadow: none;
@@ -20,22 +36,20 @@
 	user-select: none;
 
 	& .ck-tooltip__text {
-		font-size: .9em;
+		font-size: var(--ck-tooltip-text-font-size);
 		line-height: 1.5;
-		color: var(--ck-color-tooltip-text);
+		color: var(--ck-tooltip-text-color);
 	}
 
 	&.ck-tooltip_multi-line .ck-tooltip__text {
 		white-space: break-spaces;
 		display: inline-block;
-		padding: var(--ck-tooltip-text-padding) 0;
-		max-width: 200px;
+		padding: 4px 0;
+		max-width: var(--ck-tooltip-max-width);
 	}
 
 	/* Hide the default shadow of the .ck-balloon-panel tip */
 	&::before {
 		display: none;
 	}
-
-	z-index: calc( var(--ck-z-dialog) + 100 )
 }
diff --git a/packages/ckeditor5-ui/theme/globals/_border.css b/packages/ckeditor5-ui/theme/globals/_border.css
new file mode 100644
index 00000000000..44b83d9ccd1
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/_border.css
@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	--ck-border-width-thin: 1px;
+	--ck-border-width-thick: 2px;
+}
diff --git a/packages/ckeditor5-ui/theme/globals/_colors.css b/packages/ckeditor5-ui/theme/globals/_colors.css
index e8d3feddecc..597793c1cd9 100644
--- a/packages/ckeditor5-ui/theme/globals/_colors.css
+++ b/packages/ckeditor5-ui/theme/globals/_colors.css
@@ -3,121 +3,10 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
-:root {
-	--ck-color-base-foreground: 								hsl(0, 0%, 98%);
-	--ck-color-base-background: 								hsl(0, 0%, 100%);
-	--ck-color-base-border: 									hsl(220, 6%, 81%);
-	--ck-color-base-action: 									hsl(104, 50.2%, 42.5%);
-	--ck-color-base-focus: 										hsl(209, 92%, 70%);
-	--ck-color-base-text: 										hsl(0, 0%, 20%);
-	--ck-color-base-active: 									hsl(218.1, 100%, 58%);
-	--ck-color-base-active-focus:								hsl(218.2, 100%, 52.5%);
-	--ck-color-base-error:										hsl(15, 100%, 43%);
-
-	/* -- Generic colors ------------------------------------------------------------------------ */
-
-	--ck-color-focus-border-coordinates: 						218, 81.8%, 56.9%;
-	--ck-color-focus-border: 									hsl(var(--ck-color-focus-border-coordinates));
-	--ck-color-focus-outer-shadow:								hsl(212.4, 89.3%, 89%);
-	--ck-color-focus-disabled-shadow:							hsla(209, 90%, 72%,.3);
-	--ck-color-focus-error-shadow:								hsla(9,100%,56%,.3);
-	--ck-color-text: 											var(--ck-color-base-text);
-	--ck-color-shadow-drop: 									hsla(0, 0%, 0%, 0.15);
-	--ck-color-shadow-drop-active:								hsla(0, 0%, 0%, 0.2);
-	--ck-color-shadow-inner: 									hsla(0, 0%, 0%, 0.1);
-
-	/* -- Buttons ------------------------------------------------------------------------------- */
-
-	--ck-color-button-default-background: 						transparent;
-	--ck-color-button-default-hover-background: 				hsl(0, 0%, 94.1%);
-	--ck-color-button-default-active-background: 				hsl(0, 0%, 94.1%);
-	--ck-color-button-default-disabled-background: 				transparent;
-
-	--ck-color-button-on-background: 							hsl(212, 100%, 97.1%);
-	--ck-color-button-on-hover-background: 						hsl(211.7, 100%, 92.9%);
-	--ck-color-button-on-active-background: 					hsl(211.7, 100%, 92.9%);
-	--ck-color-button-on-disabled-background: 					hsl(211, 15%, 95%);
-	--ck-color-button-on-color:									hsl(218.1, 100%, 58%);
-
-
-	--ck-color-button-action-background: 						var(--ck-color-base-action);
-	--ck-color-button-action-hover-background: 					hsl(104, 53.2%, 40.2%);
-	--ck-color-button-action-active-background: 				hsl(104, 53.2%, 40.2%);
-	--ck-color-button-action-disabled-background: 				hsl(104, 44%, 58%);
-	--ck-color-button-action-text: 								var(--ck-color-base-background);
-
-	--ck-color-button-save: 									hsl(120, 100%, 27%);
-	--ck-color-button-cancel: 									hsl(15, 100%, 43%);
-
-	--ck-color-switch-button-off-background:					hsl(0, 0%, 57.6%);
-	--ck-color-switch-button-off-hover-background:				hsl(0, 0%, 49%);
-	--ck-color-switch-button-on-background:						var(--ck-color-button-action-background);
-	--ck-color-switch-button-on-hover-background:				hsl(104, 53.2%, 40.2%);
-	--ck-color-switch-button-inner-background:					var(--ck-color-base-background);
-	--ck-color-switch-button-inner-shadow:						hsla(0, 0%, 0%, 0.1);
-
-	/* -- Dropdown ------------------------------------------------------------------------------ */
-
-	--ck-color-dropdown-panel-background: 						var(--ck-color-base-background);
-	--ck-color-dropdown-panel-border: 							var(--ck-color-base-border);
-
-	/* -- Dialog -------------------------------------------------------------------------------- */
-
-	--ck-color-dialog-background: 								var(--ck-custom-background);
-	--ck-color-dialog-form-header-border: 						var(--ck-custom-border);
-
-	/* -- Input --------------------------------------------------------------------------------- */
-
-	--ck-color-input-background: 								var(--ck-color-base-background);
-	--ck-color-input-border: 									var(--ck-color-base-border);
-	--ck-color-input-error-border:								var(--ck-color-base-error);
-	--ck-color-input-text: 										var(--ck-color-base-text);
-	--ck-color-input-disabled-background: 						hsl(0, 0%, 95%);
-	--ck-color-input-disabled-border: 							var(--ck-color-base-border);
-	--ck-color-input-disabled-text: 							hsl(0, 0%, 46%);
-
-	/* -- List ---------------------------------------------------------------------------------- */
-
-	--ck-color-list-background: 								var(--ck-color-base-background);
-	--ck-color-list-button-hover-background: 					var(--ck-color-button-default-hover-background);
-	--ck-color-list-button-on-background: 						var(--ck-color-button-on-color);
-	--ck-color-list-button-on-background-focus: 				var(--ck-color-button-on-color);
-	--ck-color-list-button-on-text:								var(--ck-color-base-background);
-
-	/* -- Panel --------------------------------------------------------------------------------- */
-
-	--ck-color-panel-background: 								var(--ck-color-base-background);
-	--ck-color-panel-border: 									var(--ck-color-base-border);
-
-	/* -- Toolbar ------------------------------------------------------------------------------- */
-
-	--ck-color-toolbar-background: 								var(--ck-color-base-background);
-	--ck-color-toolbar-border: 									var(--ck-color-base-border);
-
-	/* -- Tooltip ------------------------------------------------------------------------------- */
-
-	--ck-color-tooltip-background: 								var(--ck-color-base-text);
-	--ck-color-tooltip-text: 									var(--ck-color-base-background);
-
-	/* -- Engine -------------------------------------------------------------------------------- */
-
-	--ck-color-engine-placeholder-text: 						hsl(0, 0%, 44%);
-
-	/* -- Upload -------------------------------------------------------------------------------- */
-
-	--ck-color-upload-bar-background:		 					hsl(209, 92%, 70%);
-
-	/* -- Link -------------------------------------------------------------------------------- */
-
-	--ck-color-link-default:									hsl(240, 100%, 47%);
-	--ck-color-link-selected-background:						hsla(201, 100%, 56%, 0.1);
-	--ck-color-link-fake-selection:								hsla(201, 100%, 56%, 0.3);
-
-	/* -- Search result highlight ---------------------------------------------------------------- */
-
-	--ck-color-highlight-background:							hsl(60, 100%, 50%);
-
-	/* -- Generic colors ------------------------------------------------------------------------- */
-
-	--ck-color-light-red:										hsl(0, 100%, 90%);
-}
+@import "./colors/_foundation.css";
+@import "./colors/_semantic-surface.css";
+@import "./colors/_semantic-feedback.css";
+@import "./colors/_semantic-text.css";
+@import "./colors/_semantic-interactive.css";
+@import "./colors/_legacy-component-aliases.css";
+@import "./colors/_legacy-misc.css";
diff --git a/packages/ckeditor5-ui/theme/globals/_disabled.css b/packages/ckeditor5-ui/theme/globals/_disabled.css
index 9815cb0dffd..3333aa23ec2 100644
--- a/packages/ckeditor5-ui/theme/globals/_disabled.css
+++ b/packages/ckeditor5-ui/theme/globals/_disabled.css
@@ -7,5 +7,5 @@
 	/**
 	 * An opacity value of disabled UI item.
 	 */
-	--ck-disabled-opacity: .5;
+	--ck-opacity-disabled: .5;
 }
diff --git a/packages/ckeditor5-ui/theme/globals/_evaluationbadge.css b/packages/ckeditor5-ui/theme/globals/_evaluationbadge.css
index 678bffe9746..d2e081f8098 100644
--- a/packages/ckeditor5-ui/theme/globals/_evaluationbadge.css
+++ b/packages/ckeditor5-ui/theme/globals/_evaluationbadge.css
@@ -12,19 +12,24 @@
 	--ck-evaluation-badge-letter-spacing: calc(var(--ck-font-size-base) * -0.2 / 13);
 	--ck-evaluation-badge-padding-vertical: 2px;
 	--ck-evaluation-badge-padding-horizontal: 4px;
+	--ck-evaluation-badge-label-padding-inline: 2px;
+	--ck-evaluation-badge-label-padding: 0 var(--ck-evaluation-badge-label-padding-inline);
+	--ck-evaluation-badge-label-font-weight: var(--ck-font-weight-bold);
 	--ck-evaluation-badge-text-color: hsl(0, 0%, 31%);
-	--ck-evaluation-badge-border-radius: var(--ck-border-radius);
+	/* Backward compatibility: falls back to legacy --ck-border-radius if overridden. */
+	--ck-evaluation-badge-border-radius: var(--ck-border-radius, var(--ck-radius-base));
 	--ck-evaluation-badge-background: hsl(0, 0%, 100%);
 	--ck-evaluation-badge-border-color: var(--ck-color-focus-border);
 }
 
 .ck.ck-balloon-panel.ck-evaluation-badge-balloon {
-	--ck-border-radius: var(--ck-evaluation-badge-border-radius);
+	border-radius: var(--ck-evaluation-badge-border-radius);
 
 	box-shadow: none;
 	background: var(--ck-evaluation-badge-background);
 	min-height: unset;
-	z-index: calc( var(--ck-z-panel) - 1 );
+	/* Backward compatibility: falls back to legacy --ck-z-panel if overridden. */
+	z-index: calc( var(--ck-z-panel, var(--ck-z-overlay)) - 1 );
 
 	& .ck.ck-evaluation-badge {
 		line-height: var(--ck-evaluation-badge-line-height);
@@ -32,10 +37,10 @@
 
 		& .ck-evaluation-badge__label {
 			display: block;
-			padding: 0 2px;
+			padding: var(--ck-evaluation-badge-label-padding);
 			font-size: var(--ck-evaluation-badge-font-size);
 			letter-spacing: var(--ck-evaluation-badge-letter-spacing);
-			font-weight: bold;
+			font-weight: var(--ck-evaluation-badge-label-font-weight);
 			line-height: normal;
 			text-transform: uppercase;
 			color: var(--ck-evaluation-badge-text-color);
@@ -51,4 +56,3 @@
 		border-color: var(--ck-evaluation-badge-border-color);
 	}
 }
-
diff --git a/packages/ckeditor5-ui/theme/globals/_focus.css b/packages/ckeditor5-ui/theme/globals/_focus.css
index cba44eb59d6..3c9c490925a 100644
--- a/packages/ckeditor5-ui/theme/globals/_focus.css
+++ b/packages/ckeditor5-ui/theme/globals/_focus.css
@@ -5,27 +5,37 @@
 
 :root {
 	/**
-	 * The geometry of the of focused element's outer shadow.
+	 * The geometry of the focus shadow.
 	 */
-	--ck-focus-outer-shadow-geometry: 0 0 0 3px;
+	--ck-focus-shadow-geometry: 0 0 0 3px;
 
 	/**
-	 * A visual style of focused element's outer shadow.
+	 * A visual style of focused element's shadow.
 	 */
-	--ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow);
+	/* Backward compatibility: falls back to legacy --ck-focus-outer-shadow-geometry if overridden. */
+	--ck-focus-shadow: var(--ck-focus-outer-shadow-geometry, var(--ck-focus-shadow-geometry)) var(--ck-color-focus-outer-shadow);
 
 	/**
-	 * A visual style of focused element's outer shadow (when disabled).
+	 * A visual style of focused element's shadow (when disabled).
 	 */
-	--ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow);
+	/* Backward compatibility: falls back to legacy --ck-focus-outer-shadow-geometry if overridden. */
+	--ck-focus-shadow-disabled: var(--ck-focus-outer-shadow-geometry, var(--ck-focus-shadow-geometry)) var(--ck-color-focus-disabled-shadow);
 
 	/**
-	 * A visual style of focused element's outer shadow (when has errors).
+	 * A visual style of focused element's shadow (when has errors).
 	 */
-	--ck-focus-error-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow);
+	/* Backward compatibility: falls back to legacy --ck-focus-outer-shadow-geometry if overridden. */
+	--ck-focus-shadow-error: var(--ck-focus-outer-shadow-geometry, var(--ck-focus-shadow-geometry)) var(--ck-color-focus-error-shadow);
 
 	/**
 	 * A visual style of focused element's border or outline.
 	 */
 	--ck-focus-ring: 1px solid var(--ck-color-focus-border);
+
+	/**
+	 * The border color applied to focused elements.
+	 * Use this instead of --ck-focus-ring when the component has a customizable border-width,
+	 * to avoid overriding the width on focus.
+	 */
+	--ck-focus-border-color: var(--ck-color-focus-border);
 }
diff --git a/packages/ckeditor5-ui/theme/globals/_fonts.css b/packages/ckeditor5-ui/theme/globals/_fonts.css
index b59583f4bde..90fd99f1992 100644
--- a/packages/ckeditor5-ui/theme/globals/_fonts.css
+++ b/packages/ckeditor5-ui/theme/globals/_fonts.css
@@ -6,11 +6,16 @@
 :root {
 	--ck-font-size-base: 13px;
 	--ck-line-height-base: 1.84615;
-	--ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
+	--ck-font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
 
-	--ck-font-size-tiny: 0.7em;
-	--ck-font-size-small: 0.75em;
-	--ck-font-size-normal: 1em;
-	--ck-font-size-big: 1.4em;
-	--ck-font-size-large: 1.8em;
+	--ck-font-size-xs: 0.7em;
+	--ck-font-size-sm: 0.75em;
+	--ck-font-size-md: 1em;
+	--ck-font-size-lg: 1.4em;
+	--ck-font-size-xl: 1.8em;
+
+	--ck-font-weight-normal: 400;
+	--ck-font-weight-medium: 500;
+	--ck-font-weight-semibold: 600;
+	--ck-font-weight-bold: 700;
 }
diff --git a/packages/ckeditor5-ui/theme/globals/_legacy-foundation-aliases.css b/packages/ckeditor5-ui/theme/globals/_legacy-foundation-aliases.css
new file mode 100644
index 00000000000..01ffb808be9
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/_legacy-foundation-aliases.css
@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/*
+ * Backward-compatible aliases for legacy foundation token names.
+ * These map old names to new names so that external themes and integrations
+ * continue to work without changes.
+ */
+:root {
+	/* Spacing */
+	--ck-spacing-extra-tiny: var(--ck-spacing-2xs);
+	--ck-spacing-tiny: var(--ck-spacing-xs);
+	--ck-spacing-small: var(--ck-spacing-sm);
+	--ck-spacing-medium-small: var(--ck-spacing-ms);
+	--ck-spacing-medium: var(--ck-spacing-md);
+	--ck-spacing-standard: var(--ck-spacing-base);
+	--ck-spacing-large: var(--ck-spacing-lg);
+	--ck-spacing-extra-large: var(--ck-spacing-xl);
+
+	/* Font size */
+	--ck-font-size-tiny: var(--ck-font-size-xs);
+	--ck-font-size-small: var(--ck-font-size-sm);
+	--ck-font-size-normal: var(--ck-font-size-md);
+	--ck-font-size-big: var(--ck-font-size-lg);
+	--ck-font-size-large: var(--ck-font-size-xl);
+
+	/* Font */
+	--ck-font-face: var(--ck-font-family);
+
+	/* Radius */
+	--ck-border-radius: var(--ck-radius-base);
+	--ck-rounded-corners-radius: var(--ck-radius-corners);
+
+	/* Shadow */
+	--ck-drop-shadow: var(--ck-shadow-md);
+	--ck-drop-shadow-active: var(--ck-shadow-lg);
+	--ck-inner-shadow: var(--ck-inset-shadow-sm);
+
+	/* Z-index */
+	--ck-z-default: var(--ck-z-base);
+	--ck-z-panel: var(--ck-z-overlay);
+	--ck-z-dialog: var(--ck-z-modal);
+
+	/* Focus */
+	--ck-focus-outer-shadow-geometry: var(--ck-focus-shadow-geometry);
+	--ck-focus-outer-shadow: var(--ck-focus-shadow);
+	--ck-focus-disabled-outer-shadow: var(--ck-focus-shadow-disabled);
+	--ck-focus-error-outer-shadow: var(--ck-focus-shadow-error);
+
+	/* Disabled */
+	--ck-disabled-opacity: var(--ck-opacity-disabled);
+
+	/* UI Size */
+	--ck-ui-component-min-height: var(--ck-size-min-height);
+}
diff --git a/packages/ckeditor5-ui/theme/globals/_poweredby.css b/packages/ckeditor5-ui/theme/globals/_poweredby.css
index a0565db9b44..d41d5c979ad 100644
--- a/packages/ckeditor5-ui/theme/globals/_poweredby.css
+++ b/packages/ckeditor5-ui/theme/globals/_poweredby.css
@@ -12,8 +12,12 @@
 	--ck-powered-by-letter-spacing: calc(var(--ck-font-size-base) * -0.2 / 13);
 	--ck-powered-by-padding-vertical: 2px;
 	--ck-powered-by-padding-horizontal: 4px;
+	--ck-powered-by-label-padding-inline-start: 2px;
+	--ck-powered-by-label-margin-inline-end: 4px;
+	--ck-powered-by-label-font-weight: var(--ck-font-weight-bold);
 	--ck-powered-by-text-color: hsl(0, 0%, 31%);
-	--ck-powered-by-border-radius: var(--ck-border-radius);
+	/* Backward compatibility: falls back to legacy --ck-border-radius if overridden. */
+	--ck-powered-by-border-radius: var(--ck-border-radius, var(--ck-radius-base));
 	--ck-powered-by-background: hsl(0, 0%, 100%);
 	--ck-powered-by-border-color: var(--ck-color-focus-border);
 
@@ -24,12 +28,13 @@
 }
 
 .ck.ck-balloon-panel.ck-powered-by-balloon {
-	--ck-border-radius: var(--ck-powered-by-border-radius);
+	border-radius: var(--ck-powered-by-border-radius);
 
 	box-shadow: none;
 	background: var(--ck-powered-by-background);
 	min-height: unset;
-	z-index: calc( var(--ck-z-panel) - 1 );
+	/* Backward compatibility: falls back to legacy --ck-z-panel if overridden. */
+	z-index: calc( var(--ck-z-panel, var(--ck-z-overlay)) - 1 );
 
 	& .ck.ck-powered-by {
 		line-height: var(--ck-powered-by-line-height);
@@ -47,10 +52,10 @@
 		& .ck-powered-by__label {
 			font-size: var(--ck-powered-by-font-size);
 			letter-spacing: var(--ck-powered-by-letter-spacing);
-			padding-left: 2px;
+			padding-left: var(--ck-powered-by-label-padding-inline-start);
 			text-transform: uppercase;
-			font-weight: bold;
-			margin-right: 4px;
+			font-weight: var(--ck-powered-by-label-font-weight);
+			margin-right: var(--ck-powered-by-label-margin-inline-end);
 			cursor: pointer;
 			line-height: normal;
 			color: var(--ck-powered-by-text-color);
@@ -81,4 +86,3 @@
 		border-color: var(--ck-powered-by-border-color);
 	}
 }
-
diff --git a/packages/ckeditor5-ui/theme/globals/_reset.css b/packages/ckeditor5-ui/theme/globals/_reset.css
index 98e5ca12e5b..b637f6f0b27 100644
--- a/packages/ckeditor5-ui/theme/globals/_reset.css
+++ b/packages/ckeditor5-ui/theme/globals/_reset.css
@@ -8,7 +8,7 @@
 	is never smaller than a button with icon, additionally making sure that text-less buttons
 	are perfect squares. The value is also shared by other components which should stay "in-line"
 	with buttons. */
-	--ck-ui-component-min-height: 2.3em;
+	--ck-size-min-height: 2.3em;
 }
 
 /**
@@ -42,7 +42,8 @@
 .ck-reset_all *:not(.ck-reset_all-excluded *) {
 	/* These are rule inherited by all children elements. */
 	border-collapse: collapse;
-	font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face);
+	/* Backward compatibility: falls back to legacy --ck-font-face if overridden. */
+	font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face, var(--ck-font-family));
 	color: var(--ck-color-text);
 	text-align: left;
 	white-space: nowrap;
diff --git a/packages/ckeditor5-ui/theme/globals/_rounded.css b/packages/ckeditor5-ui/theme/globals/_rounded.css
index 81cd4cb6492..da8c08d870c 100644
--- a/packages/ckeditor5-ui/theme/globals/_rounded.css
+++ b/packages/ckeditor5-ui/theme/globals/_rounded.css
@@ -8,24 +8,26 @@
 	/**
 	* Default border-radius value.
 	*/
-	--ck-border-radius: 2px;
+	--ck-radius-base: 2px;
+	--ck-radius-full: 50%;
 
 	/**
 	* `.ck-rounded-corners` is an opt-in switch class used on the UI root.
-	* By default, `--ck-rounded-corners-radius` is `0` (square corners).
-	* When the switch class is present, it maps to `--ck-border-radius`.
+	* By default, `--ck-radius-corners` is `0` (square corners).
+	* When the switch class is present, it maps to `--ck-radius-base`.
 	*
 	* Component usage:
-	* - Use `border-radius: var(--ck-rounded-corners-radius);` on elements that
+	* - Use `border-radius: var(--ck-radius-corners);` on elements that
 	*   should respect the global rounded-corners setting.
-	* - If a component needs a custom radius, override `--ck-border-radius` locally
-	*   and keep using `--ck-rounded-corners-radius`.
+	* - If a component needs a custom radius, override `--ck-radius-base` locally
+	*   and keep using `--ck-radius-corners`.
 	* - For per-corner shapes, use the variable-based radius first and then override
 	*   specific corners with `0` (or another value).
 	*/
-	--ck-rounded-corners-radius: 0;
+	--ck-radius-corners: 0;
 }
 
 .ck-rounded-corners {
-	--ck-rounded-corners-radius: var(--ck-border-radius);
+	/* Backward compatibility: falls back to legacy --ck-border-radius if overridden. */
+	--ck-radius-corners: var(--ck-border-radius, var(--ck-radius-base));
 }
diff --git a/packages/ckeditor5-ui/theme/globals/_semantic-interactive.css b/packages/ckeditor5-ui/theme/globals/_semantic-interactive.css
new file mode 100644
index 00000000000..cacadd3f506
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/_semantic-interactive.css
@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	/* Generic focus visuals for interactive controls and actions. */
+	--ck-interactive-focus-ring: var(--ck-focus-ring);
+	--ck-interactive-focus-border-color: var(--ck-focus-border-color);
+	/* Backward compatibility: falls back to legacy --ck-focus-outer-shadow if overridden. */
+	--ck-interactive-focus-shadow: var(--ck-focus-outer-shadow, var(--ck-focus-shadow));
+	/* Backward compatibility: falls back to legacy --ck-focus-disabled-outer-shadow if overridden. */
+	--ck-interactive-focus-disabled-shadow: var(--ck-focus-disabled-outer-shadow, var(--ck-focus-shadow-disabled));
+	/* Backward compatibility: falls back to legacy --ck-focus-error-outer-shadow if overridden. */
+	--ck-interactive-focus-error-shadow: var(--ck-focus-error-outer-shadow, var(--ck-focus-shadow-error));
+}
diff --git a/packages/ckeditor5-ui/theme/globals/_semantic-layer.css b/packages/ckeditor5-ui/theme/globals/_semantic-layer.css
new file mode 100644
index 00000000000..f79830fd4ae
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/_semantic-layer.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	/* Backward compatibility: falls back to legacy --ck-z-default if overridden. */
+	--ck-layer-base: var(--ck-z-default, var(--ck-z-base));
+	--ck-layer-control-raised: calc(var(--ck-layer-base) + 1);
+
+	/* Backward compatibility: falls back to legacy --ck-z-panel if overridden. */
+	--ck-layer-panel: var(--ck-z-panel, var(--ck-z-overlay));
+	--ck-layer-panel-above: calc(var(--ck-layer-panel) + 1);
+	--ck-layer-panel-below: calc(var(--ck-layer-panel) - 1);
+
+	/* Backward compatibility: falls back to legacy --ck-z-dialog if overridden. */
+	--ck-layer-dialog: var(--ck-z-dialog, var(--ck-z-modal));
+	--ck-layer-tooltip: calc(var(--ck-layer-dialog) + 100);
+
+	--ck-layer-balloon-arrow-back: calc(var(--ck-layer-base) - 3);
+	--ck-layer-balloon-arrow-front: calc(var(--ck-layer-balloon-arrow-back) + 1);
+}
diff --git a/packages/ckeditor5-ui/theme/globals/_semantic-layout.css b/packages/ckeditor5-ui/theme/globals/_semantic-layout.css
new file mode 100644
index 00000000000..1753f354507
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/_semantic-layout.css
@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	/* Semantic sizing for shared cross-component layout constraints.
+	 * This layer will expand as more components adopt the token system. */
+	/* Backward compatibility: falls back to legacy --ck-ui-component-min-height if overridden. */
+	--ck-size-control-min-height: var(--ck-ui-component-min-height, var(--ck-size-min-height));
+}
diff --git a/packages/ckeditor5-ui/theme/globals/_semantic-motion.css b/packages/ckeditor5-ui/theme/globals/_semantic-motion.css
new file mode 100644
index 00000000000..42d383d62c0
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/_semantic-motion.css
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	--ck-transition-duration-control-fast: var(--ck-duration-fast);
+	--ck-transition-duration-control: var(--ck-duration-base);
+	--ck-transition-duration-control-emphasized: var(--ck-duration-slow);
+	--ck-transition-duration-surface: var(--ck-duration-slower);
+
+	--ck-transition-timing-function-control: var(--ck-ease-interactive);
+	--ck-transition-timing-function-control-emphasized: var(--ck-ease-emphasized);
+	--ck-transition-timing-function-surface: var(--ck-ease-standard);
+
+	--ck-animation-duration-feedback: var(--ck-animation-duration-slow);
+	--ck-animation-duration-surface-entrance: var(--ck-animation-duration-slow);
+	--ck-animation-duration-progress: var(--ck-animation-duration-emphasis);
+	--ck-animation-duration-progress-reduced: var(--ck-animation-duration-reduced);
+
+	--ck-animation-timing-function-feedback: var(--ck-animation-ease-standard);
+	--ck-animation-timing-function-progress: var(--ck-animation-ease-linear);
+	--ck-animation-fill-mode-feedback: var(--ck-animation-fill-both);
+}
diff --git a/packages/ckeditor5-ui/theme/globals/_semantic-shape.css b/packages/ckeditor5-ui/theme/globals/_semantic-shape.css
new file mode 100644
index 00000000000..7e79273aeb4
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/_semantic-shape.css
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	--ck-border-width-control: var(--ck-border-width-thin);
+	--ck-border-width-surface: var(--ck-border-width-thin);
+	--ck-border-width-divider: var(--ck-border-width-thin);
+	--ck-border-width-emphasis: var(--ck-border-width-thick);
+
+	/* Semantic radii for interactive controls (buttons, inputs, toggles). */
+	/* Backward compatibility: falls back to legacy --ck-border-radius if overridden. */
+	--ck-border-radius-control: var(--ck-border-radius, var(--ck-radius-base));
+
+	/* Semantic radii for elevated surfaces (dropdowns, panels, dialogs, toolbars). */
+	/* Backward compatibility: falls back to legacy --ck-border-radius if overridden. */
+	--ck-border-radius-surface: var(--ck-border-radius, var(--ck-radius-base));
+
+	/* Uniform radius opt-out for attached surfaces. Set to a radius value
+	 * (e.g. var(--ck-radius-base)) to disable cut-corner / attached-edge behavior
+	 * on all panels, dropdowns, menus, and toolbars at once. Defaults to `initial`
+	 * (no override — each surface keeps its positional corners). */
+	--ck-border-radius-uniform: initial;
+
+	/* Radius for attached surfaces where one edge touches trigger/control. */
+	--ck-border-radius-surface-attached: var(--ck-border-radius-surface);
+	--ck-border-radius-surface-attached-top: 0 0 var(--ck-border-radius-surface-attached) var(--ck-border-radius-surface-attached);
+	--ck-border-radius-surface-attached-bottom: var(--ck-border-radius-surface-attached) var(--ck-border-radius-surface-attached) 0 0;
+
+	/* Radius with one corner cut for positioned attached surfaces. */
+	--ck-border-radius-surface-cut-top-left: 0 var(--ck-border-radius-surface-attached) var(--ck-border-radius-surface-attached) var(--ck-border-radius-surface-attached);
+	--ck-border-radius-surface-cut-top-right: var(--ck-border-radius-surface-attached) 0 var(--ck-border-radius-surface-attached) var(--ck-border-radius-surface-attached);
+	--ck-border-radius-surface-cut-bottom-right: var(--ck-border-radius-surface-attached) var(--ck-border-radius-surface-attached) 0 var(--ck-border-radius-surface-attached);
+	--ck-border-radius-surface-cut-bottom-left: var(--ck-border-radius-surface-attached) var(--ck-border-radius-surface-attached) var(--ck-border-radius-surface-attached) 0;
+}
diff --git a/packages/ckeditor5-ui/theme/globals/_semantic-spacing.css b/packages/ckeditor5-ui/theme/globals/_semantic-spacing.css
new file mode 100644
index 00000000000..04fbb6e2ac2
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/_semantic-spacing.css
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	/* Spacing used by controls like buttons and inputs. */
+	/* Backward compatibility: falls back to legacy --ck-spacing-tiny if overridden. */
+	--ck-spacing-control-padding-block: var(--ck-spacing-tiny, var(--ck-spacing-xs));
+	/* Backward compatibility: falls back to legacy --ck-spacing-standard if overridden. */
+	--ck-spacing-control-padding-inline: var(--ck-spacing-standard, var(--ck-spacing-base));
+	/* Backward compatibility: falls back to legacy --ck-spacing-small if overridden. */
+	--ck-spacing-control-padding-inline-compact: var(--ck-spacing-small, var(--ck-spacing-sm));
+	/* Backward compatibility: falls back to legacy --ck-spacing-tiny if overridden. */
+	--ck-spacing-control-padding-inline-start-compact: var(--ck-spacing-tiny, var(--ck-spacing-xs));
+	/* Backward compatibility: falls back to legacy --ck-spacing-small if overridden. */
+	--ck-spacing-control-padding-block-regular: var(--ck-spacing-small, var(--ck-spacing-sm));
+	/* Backward compatibility: falls back to legacy --ck-spacing-extra-tiny if overridden. */
+	--ck-spacing-control-padding-block-compact: var(--ck-spacing-extra-tiny, var(--ck-spacing-2xs));
+	/* Backward compatibility: falls back to legacy --ck-spacing-medium if overridden. */
+	--ck-spacing-control-icon-gap: var(--ck-spacing-medium, var(--ck-spacing-md));
+	/* Backward compatibility: falls back to legacy --ck-spacing-large if overridden. */
+	--ck-spacing-control-meta-gap: var(--ck-spacing-large, var(--ck-spacing-lg));
+
+	/* Spacing used by grouped surfaces like toolbars and lists. */
+	/* Backward compatibility: falls back to legacy --ck-spacing-small if overridden. */
+	--ck-spacing-surface-padding-inline: var(--ck-spacing-small, var(--ck-spacing-sm));
+	/* Backward compatibility: falls back to legacy --ck-spacing-small if overridden. */
+	--ck-spacing-surface-padding-block: var(--ck-spacing-small, var(--ck-spacing-sm));
+	/* Backward compatibility: falls back to legacy --ck-spacing-small if overridden. */
+	--ck-spacing-surface-item-gap-inline: var(--ck-spacing-small, var(--ck-spacing-sm));
+	/* Backward compatibility: falls back to legacy --ck-spacing-small if overridden. */
+	--ck-spacing-surface-item-gap-block: var(--ck-spacing-small, var(--ck-spacing-sm));
+	/* Backward compatibility: falls back to legacy --ck-spacing-medium if overridden. */
+	--ck-spacing-surface-section-gap-block: var(--ck-spacing-medium, var(--ck-spacing-md));
+
+	/*
+	 * Naming note: `region` is a provisional term for UI container spacing.
+	 * The namespace may be refined in a future iteration.
+	 * TODO(#19910): Revisit `region` naming.
+	 */
+	/* Backward compatibility: falls back to legacy --ck-spacing-standard if overridden. */
+	--ck-spacing-region-padding-inline: var(--ck-spacing-standard, var(--ck-spacing-base));
+	/* Backward compatibility: falls back to legacy --ck-spacing-large if overridden. */
+	--ck-spacing-region-padding-inline-wide: var(--ck-spacing-large, var(--ck-spacing-lg));
+	/* Backward compatibility: falls back to legacy --ck-spacing-standard if overridden. */
+	--ck-spacing-region-padding-block: var(--ck-spacing-standard, var(--ck-spacing-base));
+	/* Backward compatibility: falls back to legacy --ck-spacing-large if overridden. */
+	--ck-spacing-region-edge-margin-block: var(--ck-spacing-large, var(--ck-spacing-lg));
+}
diff --git a/packages/ckeditor5-ui/theme/globals/_semantic-surface.css b/packages/ckeditor5-ui/theme/globals/_semantic-surface.css
new file mode 100644
index 00000000000..55ec8a8a124
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/_semantic-surface.css
@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	/* Color surface roles are defined in ./colors/_semantic-surface.css. */
+
+	/* Generic floating surface shadows. */
+	/* Backward compatibility: falls back to legacy --ck-drop-shadow if overridden. */
+	--ck-shadow-surface-floating: var(--ck-drop-shadow, var(--ck-shadow-md));
+}
diff --git a/packages/ckeditor5-ui/theme/globals/_semantic-typography.css b/packages/ckeditor5-ui/theme/globals/_semantic-typography.css
new file mode 100644
index 00000000000..5a2638bd920
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/_semantic-typography.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	--ck-font-weight-ui-default: var(--ck-font-weight-normal);
+	--ck-font-weight-ui-strong: var(--ck-font-weight-semibold);
+	--ck-font-weight-ui-heading: var(--ck-font-weight-bold);
+	--ck-font-weight-ui-label: var(--ck-font-weight-bold);
+	--ck-font-weight-ui-emphasis: var(--ck-font-weight-bold);
+	--ck-font-weight-ui-muted: var(--ck-font-weight-normal);
+	--ck-font-weight-ui-inherit: inherit;
+}
diff --git a/packages/ckeditor5-ui/theme/globals/_shadow.css b/packages/ckeditor5-ui/theme/globals/_shadow.css
index da0949accb3..5ff48cb5c57 100644
--- a/packages/ckeditor5-ui/theme/globals/_shadow.css
+++ b/packages/ckeditor5-ui/theme/globals/_shadow.css
@@ -5,17 +5,17 @@
 
 :root {
 	/**
-	 * A visual style of element's inner shadow (i.e. input).
+	 * A visual style of element's inset shadow (e.g. input).
 	 */
-	--ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset;
+	--ck-inset-shadow-sm: 2px 2px 3px var(--ck-color-shadow-inner) inset;
 
 	/**
-	 * A visual style of element's drop shadow (i.e. panel).
+	 * A visual style of element's drop shadow (e.g. panel).
 	 */
-	--ck-drop-shadow: 0 1px 2px 1px var(--ck-color-shadow-drop);
+	--ck-shadow-md: 0 1px 2px 1px var(--ck-color-shadow-drop);
 
 	/**
-	 * A visual style of element's active shadow (i.e. comment or suggestion).
+	 * A visual style of element's active shadow (e.g. comment or suggestion).
 	 */
-	--ck-drop-shadow-active: 0 3px 6px 1px var(--ck-color-shadow-drop-active);
+	--ck-shadow-lg: 0 3px 6px 1px var(--ck-color-shadow-drop-active);
 }
diff --git a/packages/ckeditor5-ui/theme/globals/_spacing.css b/packages/ckeditor5-ui/theme/globals/_spacing.css
index 4c5aebc106b..403eef23e99 100644
--- a/packages/ckeditor5-ui/theme/globals/_spacing.css
+++ b/packages/ckeditor5-ui/theme/globals/_spacing.css
@@ -5,12 +5,12 @@
 
 :root {
 	--ck-spacing-unit: 						0.6em;
-	--ck-spacing-extra-large:				calc(var(--ck-spacing-unit) * 2);
-	--ck-spacing-large: 					calc(var(--ck-spacing-unit) * 1.5);
-	--ck-spacing-standard: 					var(--ck-spacing-unit);
-	--ck-spacing-medium: 					calc(var(--ck-spacing-unit) * 0.8);
-	--ck-spacing-medium-small:				calc(var(--ck-spacing-unit) * 0.667);
-	--ck-spacing-small: 					calc(var(--ck-spacing-unit) * 0.5);
-	--ck-spacing-tiny: 						calc(var(--ck-spacing-unit) * 0.3);
-	--ck-spacing-extra-tiny: 				calc(var(--ck-spacing-unit) * 0.16);
+	--ck-spacing-xl:						calc(var(--ck-spacing-unit) * 2);
+	--ck-spacing-lg: 						calc(var(--ck-spacing-unit) * 1.5);
+	--ck-spacing-base: 						var(--ck-spacing-unit);
+	--ck-spacing-md: 						calc(var(--ck-spacing-unit) * 0.8);
+	--ck-spacing-ms:						calc(var(--ck-spacing-unit) * 0.667);
+	--ck-spacing-sm: 						calc(var(--ck-spacing-unit) * 0.5);
+	--ck-spacing-xs: 						calc(var(--ck-spacing-unit) * 0.3);
+	--ck-spacing-2xs: 						calc(var(--ck-spacing-unit) * 0.16);
 }
diff --git a/packages/ckeditor5-ui/theme/globals/_transition.css b/packages/ckeditor5-ui/theme/globals/_transition.css
index f75ea9de7eb..4d647cfedac 100644
--- a/packages/ckeditor5-ui/theme/globals/_transition.css
+++ b/packages/ckeditor5-ui/theme/globals/_transition.css
@@ -3,6 +3,32 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	--ck-duration-fast: .1s;
+	--ck-duration-base: .2s;
+	--ck-duration-slow: .3s;
+	--ck-duration-slower: .4s;
+
+	--ck-animation-duration-fast: var(--ck-duration-fast);
+	--ck-animation-duration-base: var(--ck-duration-base);
+	--ck-animation-duration-slow: var(--ck-duration-slow);
+	--ck-animation-duration-emphasis: 1.5s;
+	--ck-animation-duration-reduced: 0s;
+
+	--ck-transition-none: none;
+
+	--ck-ease-standard: ease;
+	--ck-ease-interactive: ease-in-out;
+	--ck-ease-emphasized: cubic-bezier(0, 0, 0.24, 0.95);
+	--ck-animation-ease-standard: var(--ck-ease-standard);
+	--ck-animation-ease-interactive: var(--ck-ease-interactive);
+	--ck-animation-ease-linear: linear;
+
+	--ck-animation-fill-both: both;
+	--ck-animation-repeat-infinite: infinite;
+	--ck-animation-none: var(--ck-transition-none);
+}
+
 /**
  * A class that disables all transitions of the element and its children.
  */
diff --git a/packages/ckeditor5-ui/theme/globals/_zindex.css b/packages/ckeditor5-ui/theme/globals/_zindex.css
index fc3cf59d276..4adcaa75911 100644
--- a/packages/ckeditor5-ui/theme/globals/_zindex.css
+++ b/packages/ckeditor5-ui/theme/globals/_zindex.css
@@ -4,7 +4,7 @@
  */
 
 :root {
-	--ck-z-default: 1;
-	--ck-z-panel: calc( var(--ck-z-default) + 999 );
-	--ck-z-dialog: 9999;
+	--ck-z-base: 1;
+	--ck-z-overlay: calc( var(--ck-z-base) + 999 );
+	--ck-z-modal: 9999;
 }
diff --git a/packages/ckeditor5-ui/theme/globals/colors/_foundation.css b/packages/ckeditor5-ui/theme/globals/colors/_foundation.css
new file mode 100644
index 00000000000..8a1b907d04f
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/colors/_foundation.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	--ck-color-base-foreground: hsl(0, 0%, 98%);
+	--ck-color-base-background: hsl(0, 0%, 100%);
+	--ck-color-base-border: hsl(220, 6%, 81%);
+	--ck-color-base-action: hsl(104, 50.2%, 42.5%);
+	--ck-color-base-action-hover: hsl(104, 53.2%, 40.2%);
+	--ck-color-base-focus: hsl(209, 92%, 70%);
+	--ck-color-base-text: hsl(0, 0%, 20%);
+	--ck-color-base-text-light: hsl(0, 0%, 46%);
+	--ck-color-base-active: hsl(218.1, 100%, 58%);
+	--ck-color-base-active-focus: hsl(218.2, 100%, 52.5%);
+	--ck-color-base-hover: hsl(0, 0%, 94.1%);
+	--ck-color-base-selected: hsl(212, 100%, 97.1%);
+	--ck-color-base-selected-hover: hsl(211.7, 100%, 92.9%);
+	--ck-color-base-error: hsl(15, 100%, 43%);
+	--ck-color-base-warning: hsl(15, 100%, 43%);
+	--ck-color-base-success: hsl(120, 100%, 27%);
+	--ck-color-base-highlight: hsl(60, 100%, 50%);
+
+	--ck-color-base-focus-shadow: hsl(212.4, 89.3%, 89%);
+	--ck-color-base-focus-shadow-faded: hsla(209, 90%, 72%, .3);
+	--ck-color-base-error-shadow: hsla(9, 100%, 56%, .3);
+
+	--ck-color-shadow-drop: hsla(0, 0%, 0%, 0.15);
+	--ck-color-shadow-drop-active: hsla(0, 0%, 0%, 0.2);
+	--ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
+}
diff --git a/packages/ckeditor5-ui/theme/globals/colors/_legacy-component-aliases.css b/packages/ckeditor5-ui/theme/globals/colors/_legacy-component-aliases.css
new file mode 100644
index 00000000000..49b7070dbd5
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/colors/_legacy-component-aliases.css
@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/*
+ * Backward-compatible aliases for legacy component color token names.
+ * These map old domain-first names (--ck-color-component-*) to new
+ * component-first names (--ck-component-*-color) defined in each component file.
+ */
+:root {
+	/* -- Buttons ------------------------------------------------------------------------------- */
+
+	--ck-color-button-default-background: var(--ck-button-default-background-color);
+	--ck-color-button-default-hover-background: var(--ck-button-default-hover-background-color);
+	--ck-color-button-default-active-background: var(--ck-button-default-active-background-color);
+	--ck-color-button-default-disabled-background: var(--ck-button-default-disabled-background-color);
+
+	--ck-color-button-on-background: var(--ck-button-on-background-color);
+	--ck-color-button-on-hover-background: var(--ck-button-on-hover-background-color);
+	--ck-color-button-on-active-background: var(--ck-button-on-active-background-color);
+	--ck-color-button-on-disabled-background: var(--ck-button-on-disabled-background-color);
+	--ck-color-button-on-color: var(--ck-button-on-text-color);
+
+	--ck-color-button-action-background: var(--ck-button-action-background-color);
+	--ck-color-button-action-hover-background: var(--ck-button-action-hover-background-color);
+	--ck-color-button-action-active-background: var(--ck-button-action-active-background-color);
+	--ck-color-button-action-disabled-background: var(--ck-button-action-disabled-background-color);
+	--ck-color-button-action-text: var(--ck-button-action-text-color);
+
+	--ck-color-button-save: var(--ck-button-save-color);
+	--ck-color-button-cancel: var(--ck-button-cancel-color);
+
+	--ck-color-switch-button-off-background: var(--ck-switch-button-off-background-color);
+	--ck-color-switch-button-off-hover-background: var(--ck-switch-button-off-hover-background-color);
+	--ck-color-switch-button-on-background: var(--ck-switch-button-on-background-color);
+	--ck-color-switch-button-on-hover-background: var(--ck-switch-button-on-hover-background-color);
+	--ck-color-switch-button-inner-background: var(--ck-switch-button-inner-background-color);
+
+	/* -- Dropdown ------------------------------------------------------------------------------ */
+
+	--ck-color-dropdown-panel-background: var(--ck-dropdown-panel-background-color);
+	--ck-color-dropdown-panel-border: var(--ck-dropdown-panel-border-color);
+
+	/* -- Dialog -------------------------------------------------------------------------------- */
+
+	--ck-color-dialog-background: var(--ck-dialog-background-color);
+
+	/* -- Input --------------------------------------------------------------------------------- */
+
+	--ck-color-input-background: var(--ck-input-background-color);
+	--ck-color-input-border: var(--ck-input-border-color);
+	--ck-color-input-error-border: var(--ck-input-error-border-color);
+	--ck-color-input-text: var(--ck-input-text-color);
+	--ck-color-input-disabled-background: var(--ck-input-disabled-background-color);
+	--ck-color-input-disabled-border: var(--ck-input-disabled-border-color);
+	--ck-color-input-disabled-text: var(--ck-input-disabled-text-color);
+
+	/* -- List ---------------------------------------------------------------------------------- */
+
+	--ck-color-list-background: var(--ck-list-background-color);
+	--ck-color-list-button-hover-background: var(--ck-list-button-hover-background-color);
+	--ck-color-list-button-on-background: var(--ck-list-button-on-background-color);
+	--ck-color-list-button-on-text: var(--ck-list-button-on-text-color);
+
+	/* -- Panel --------------------------------------------------------------------------------- */
+
+	--ck-color-panel-background: var(--ck-balloon-panel-background-color);
+	--ck-color-panel-border: var(--ck-balloon-panel-border-color);
+
+	/* -- Toolbar ------------------------------------------------------------------------------- */
+
+	--ck-color-toolbar-background: var(--ck-toolbar-background-color);
+	--ck-color-toolbar-border: var(--ck-toolbar-border-color);
+
+	/* -- Tooltip ------------------------------------------------------------------------------- */
+
+	--ck-color-tooltip-background: var(--ck-tooltip-background-color);
+	--ck-color-tooltip-text: var(--ck-tooltip-text-color);
+}
diff --git a/packages/ckeditor5-ui/theme/globals/colors/_legacy-misc.css b/packages/ckeditor5-ui/theme/globals/colors/_legacy-misc.css
new file mode 100644
index 00000000000..fefc4c62878
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/colors/_legacy-misc.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	/* -- Engine -------------------------------------------------------------------------------- */
+
+	--ck-color-engine-placeholder-text: hsl(0, 0%, 44%);
+
+	/* -- Upload -------------------------------------------------------------------------------- */
+
+	--ck-color-upload-bar-background: var(--ck-color-base-focus);
+
+	/* -- Link ---------------------------------------------------------------------------------- */
+
+	--ck-color-link-default: hsl(240, 100%, 47%);
+	--ck-color-link-selected-background: hsla(201, 100%, 56%, 0.1);
+	--ck-color-link-fake-selection: hsla(201, 100%, 56%, 0.3);
+
+	/* -- Search result highlight --------------------------------------------------------------- */
+
+	--ck-color-highlight-background: var(--ck-color-feedback-highlight);
+
+	/* -- Generic colors ----------------------------------------------------------------------- */
+
+	--ck-color-light-red: hsl(0, 100%, 90%);
+}
diff --git a/packages/ckeditor5-ui/theme/globals/colors/_semantic-feedback.css b/packages/ckeditor5-ui/theme/globals/colors/_semantic-feedback.css
new file mode 100644
index 00000000000..afd597e42dc
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/colors/_semantic-feedback.css
@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	--ck-color-feedback-error: var(--ck-color-base-error);
+	--ck-color-feedback-success: var(--ck-color-base-success);
+	--ck-color-feedback-warning: var(--ck-color-base-warning);
+	--ck-color-feedback-highlight: var(--ck-color-base-highlight);
+}
diff --git a/packages/ckeditor5-ui/theme/globals/colors/_semantic-interactive.css b/packages/ckeditor5-ui/theme/globals/colors/_semantic-interactive.css
new file mode 100644
index 00000000000..4ee0a66b1b4
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/colors/_semantic-interactive.css
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	--ck-color-interactive-focus-border-coordinates: 218, 81.8%, 56.9%;
+	/* Fallback to `--ck-color-focus-border-coordinates` for backward compatibility. */
+	--ck-color-interactive-focus-border: hsl(var(--ck-color-focus-border-coordinates, var(--ck-color-interactive-focus-border-coordinates)));
+	--ck-color-interactive-focus-shadow: var(--ck-color-base-focus-shadow);
+	--ck-color-interactive-focus-disabled-shadow: var(--ck-color-base-focus-shadow-faded);
+	--ck-color-interactive-focus-error-shadow: var(--ck-color-base-error-shadow);
+
+	--ck-color-interactive-hover-surface: var(--ck-color-base-hover);
+	--ck-color-interactive-active-surface: var(--ck-color-base-hover);
+	--ck-color-interactive-selected-surface: var(--ck-color-base-selected);
+	--ck-color-interactive-selected-surface-hover: var(--ck-color-base-selected-hover);
+	--ck-color-interactive-selected-text: var(--ck-color-base-active);
+
+	--ck-color-interactive-primary-surface: var(--ck-color-base-action);
+	--ck-color-interactive-primary-surface-hover: var(--ck-color-base-action-hover);
+	--ck-color-interactive-primary-text: var(--ck-color-text-inverse);
+
+	/* Backward compatibility aliases. */
+	--ck-color-focus-border-coordinates: var(--ck-color-interactive-focus-border-coordinates);
+	--ck-color-focus-border: var(--ck-color-interactive-focus-border);
+	--ck-color-focus-outer-shadow: var(--ck-color-interactive-focus-shadow);
+	--ck-color-focus-disabled-shadow: var(--ck-color-interactive-focus-disabled-shadow);
+	--ck-color-focus-error-shadow: var(--ck-color-interactive-focus-error-shadow);
+}
diff --git a/packages/ckeditor5-ui/theme/globals/colors/_semantic-surface.css b/packages/ckeditor5-ui/theme/globals/colors/_semantic-surface.css
new file mode 100644
index 00000000000..bed01b7873e
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/colors/_semantic-surface.css
@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/* Surface color tokens. Shadow-related surface tokens are in ../_semantic-surface.css. */
+:root {
+	--ck-color-surface-canvas: var(--ck-color-base-background);
+	--ck-color-surface-control: var(--ck-color-surface-canvas);
+	--ck-color-surface-container: var(--ck-color-surface-canvas);
+	--ck-color-surface-inverse: var(--ck-color-base-text);
+
+	--ck-color-border-control: var(--ck-color-base-border);
+	--ck-color-border-container: var(--ck-color-base-border);
+	--ck-color-divider: var(--ck-color-base-border);
+}
diff --git a/packages/ckeditor5-ui/theme/globals/colors/_semantic-text.css b/packages/ckeditor5-ui/theme/globals/colors/_semantic-text.css
new file mode 100644
index 00000000000..95a6e144df2
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/globals/colors/_semantic-text.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	--ck-color-text-primary: var(--ck-color-base-text);
+	--ck-color-text-secondary: var(--ck-color-base-text-light);
+	--ck-color-text-disabled: var(--ck-color-text-secondary);
+	--ck-color-text-inverse: var(--ck-color-base-background);
+	--ck-color-text-error: var(--ck-color-feedback-error);
+
+	--ck-color-text: var(--ck-color-text-primary);
+}
diff --git a/packages/ckeditor5-ui/theme/index.css b/packages/ckeditor5-ui/theme/index.css
index 697cad18cd1..9c7d5da63cb 100644
--- a/packages/ckeditor5-ui/theme/index.css
+++ b/packages/ckeditor5-ui/theme/index.css
@@ -7,15 +7,25 @@
 @import "./globals/_disabled.css";
 @import "./globals/_focus.css";
 @import "./globals/_fonts.css";
+@import "./globals/_border.css";
 @import "./globals/_reset.css";
 @import "./globals/_rounded.css";
 @import "./globals/_shadow.css";
 @import "./globals/_spacing.css";
+@import "./globals/_semantic-typography.css";
+@import "./globals/_semantic-spacing.css";
+@import "./globals/_semantic-shape.css";
+@import "./globals/_semantic-surface.css";
+@import "./globals/_semantic-interactive.css";
+@import "./globals/_semantic-layout.css";
 @import "./globals/_hidden.css";
 @import "./globals/_zindex.css";
+@import "./globals/_semantic-layer.css";
 @import "./globals/_transition.css";
+@import "./globals/_semantic-motion.css";
 @import "./globals/_poweredby.css";
 @import "./globals/_evaluationbadge.css";
+@import "./globals/_legacy-foundation-aliases.css";
 
 @import "./components/responsive-form/responsiveform.css";
 @import "./components/form/form.css";