diff --git a/css/systems/nldesign/theme.css b/css/systems/nldesign/theme.css
index 82f5f51f..029680f1 100644
--- a/css/systems/nldesign/theme.css
+++ b/css/systems/nldesign/theme.css
@@ -379,7 +379,7 @@ div[class*='login-box__wrapper'] > div {
 	color: var(--nldesign-component-button-primary-action-color) !important;
 	border-radius: var(--nldesign-component-button-border-radius) !important;
 	box-shadow: none !important;
-	transition: background-color var(--nldesign-animation-quick) ease !important;
+	transition: background-color var(--animation-quick) ease !important;
 }
 
 #body-login .button-vue--vue-primary:hover,
@@ -462,9 +462,9 @@ button:not(.action-button),
 	border-radius: var(--nldesign-component-button-border-radius) !important;
 	border-width: var(--nldesign-component-button-border-width) !important;
 	transition:
-		background-color var(--nldesign-animation-quick) ease,
-		border-color var(--nldesign-animation-quick) ease,
-		color var(--nldesign-animation-quick) ease !important;
+		background-color var(--animation-quick) ease,
+		border-color var(--animation-quick) ease,
+		color var(--animation-quick) ease !important;
 }
 
 /* Primary buttons */
@@ -608,7 +608,7 @@ button.secondary:hover {
 a {
 	color: var(--nldesign-component-link-color) !important;
 	text-decoration: var(--nldesign-component-link-text-decoration) !important;
-	transition: color var(--nldesign-animation-quick) ease !important;
+	transition: color var(--animation-quick) ease !important;
 }
 
 a:hover {
@@ -660,8 +660,8 @@ textarea {
 	font-family: var(--nldesign-component-textbox-font-family) !important;
 	font-size: var(--nldesign-component-textbox-font-size) !important;
 	transition:
-		border-color var(--nldesign-animation-quick) ease,
-		box-shadow var(--nldesign-animation-quick) ease !important;
+		border-color var(--animation-quick) ease,
+		box-shadow var(--animation-quick) ease !important;
 }
 
 input[type='text']:hover,
@@ -705,7 +705,7 @@ textarea:disabled {
 select {
 	border-color: var(--nldesign-component-form-select-border-color) !important;
 	border-radius: var(--nldesign-component-form-select-border-radius) !important;
-	transition: border-color var(--nldesign-animation-quick) ease !important;
+	transition: border-color var(--animation-quick) ease !important;
 }
 
 select:focus {
diff --git a/tests/Unit/MotionTokensReachTransitionsTest.php b/tests/Unit/MotionTokensReachTransitionsTest.php
new file mode 100644
index 00000000..21f7f841
--- /dev/null
+++ b/tests/Unit/MotionTokensReachTransitionsTest.php
@@ -0,0 +1,76 @@
+<?php
+
+/**
+ * The motion speeds the token editor offers reach the theme's own transitions.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ *
+ * @spec openspec/changes/authoring-token-value-types/tasks.md#task-2.4
+ */
+
+declare(strict_types=1);
+
+namespace OCA\Thematiq\Tests\Unit;
+
+use OCA\Thematiq\Service\TokenRegistry;
+use PHPUnit\Framework\TestCase;
+
+/**
+ * Thematiq#697: the editor writes `--animation-quick` / `--animation-slow`,
+ * while `css/systems/nldesign/theme.css` timed its transitions with
+ * `--nldesign-animation-*`, which the editor never sets. `overrides.css` only
+ * maps the nldesign names onto the Nextcloud names, so an admin's speed never
+ * reached the theme's buttons and links.
+ *
+ * Read from the shipped stylesheets and the real TokenRegistry, so it fails if
+ * either side drifts.
+ */
+class MotionTokensReachTransitionsTest extends TestCase {
+
+	/**
+	 * Every custom property a `transition` or `animation` in theme.css times itself with.
+	 *
+	 * @return array<int, string> The property names, e.g. `--animation-quick`.
+	 */
+	private function motionVarsInTheme(): array {
+		$css = (string)file_get_contents(\dirname(__DIR__, 2) . '/css/systems/nldesign/theme.css');
+		$this->assertNotSame('', $css, 'theme.css must be readable.');
+
+		preg_match_all('/(?:transition|animation)[a-z-]*\s*:([^;]*);/i', $css, $declarations);
+		$names = [];
+		foreach ($declarations[1] as $value) {
+			preg_match_all('/var\(\s*(--[A-Za-z0-9_-]+)/', $value, $vars);
+			foreach ($vars[1] as $name) {
+				$names[$name] = true;
+			}
+		}
+
+		return array_keys($names);
+	}//end motionVarsInTheme()
+
+	/**
+	 * Every duration theme.css reads is one the token editor can set.
+	 */
+	public function testEveryThemeTransitionReadsAnEditableMotionToken(): void {
+		$names = $this->motionVarsInTheme();
+		$this->assertNotEmpty($names, 'theme.css is expected to time its transitions with a token.');
+
+		foreach ($names as $name) {
+			$this->assertTrue(
+				TokenRegistry::isEditable(tokenName: $name),
+				$name . ' times a transition in theme.css, but the token editor cannot set it.'
+			);
+		}
+	}//end testEveryThemeTransitionReadsAnEditableMotionToken()
+
+	/**
+	 * The set's own speed still reaches the Nextcloud names the theme now reads.
+	 */
+	public function testTheSetSpeedStillFeedsTheNextcloudNames(): void {
+		$overrides = (string)file_get_contents(\dirname(__DIR__, 2) . '/css/systems/nldesign/overrides.css');
+
+		$this->assertMatchesRegularExpression('/--animation-quick:\s*var\(--nldesign-animation-quick\)/', $overrides);
+		$this->assertMatchesRegularExpression('/--animation-slow:\s*var\(--nldesign-animation-slow\)/', $overrides);
+	}//end testTheSetSpeedStillFeedsTheNextcloudNames()
+}//end class