diff --git a/src/features/settings/components/sections/SettingsComposerSection.tsx b/src/features/settings/components/sections/SettingsComposerSection.tsx
index ae3014bbc..1b5bef63f 100644
--- a/src/features/settings/components/sections/SettingsComposerSection.tsx
+++ b/src/features/settings/components/sections/SettingsComposerSection.tsx
@@ -32,7 +32,7 @@ export function SettingsComposerSection({
     >
       <div className="settings-field">
         <div className="settings-field-label">Follow-up behavior</div>
-        <div className="settings-segmented" aria-label="Follow-up behavior">
+        <div className={`settings-segmented${appSettings.followUpMessageBehavior === "steer" ? " is-second-active" : ""}`} aria-label="Follow-up behavior">
           <label
             className={`settings-segmented-option${
               appSettings.followUpMessageBehavior === "queue" ? " is-active" : ""
diff --git a/src/styles/base.css b/src/styles/base.css
index e3d73c340..893406938 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -229,3 +229,30 @@ button.window-caption-control:focus-visible,
     display: none;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  /* Restore functional spinners — these communicate loading state */
+  .working-spinner,
+  .git-panel-spinner,
+  .commit-message-loader,
+  .commit-button-spinner,
+  .sidebar-refresh-icon.spinning,
+  .worktree-deleting-spinner,
+  .sidebar-account-spinner,
+  .settings-agents-generate-loader,
+  .composer-action-spinner,
+  .compact-codex-refresh-icon.spinning,
+  .home-usage-refresh-icon.spinning {
+    animation-duration: var(--ds-spinner-dur) !important;
+    animation-iteration-count: infinite !important;
+  }
+}
diff --git a/src/styles/buttons.css b/src/styles/buttons.css
index ad99bc6f5..24bc4cec7 100644
--- a/src/styles/buttons.css
+++ b/src/styles/buttons.css
@@ -10,7 +10,7 @@ button {
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
   -webkit-app-region: no-drag;
 }
 
@@ -52,3 +52,21 @@ button:hover:not(:disabled) {
   transform: translateY(-1px);
   box-shadow: 0 12px 18px rgba(0, 0, 0, 0.2);
 }
+
+button:active:not(:disabled) {
+  transform: scale(var(--ds-active-scale));
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transition-duration: 50ms;
+}
+
+.icon-button:active:not(:disabled) {
+  transform: scale(var(--ds-active-scale-sm));
+}
+
+.primary:active:not(:disabled) {
+  filter: brightness(0.92);
+}
+
+.ghost:active:not(:disabled) {
+  background: rgba(255, 255, 255, 0.06);
+}
diff --git a/src/styles/compact-tablet.css b/src/styles/compact-tablet.css
index 1d9b95d01..6bff16f3e 100644
--- a/src/styles/compact-tablet.css
+++ b/src/styles/compact-tablet.css
@@ -38,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   gap: 6px;
-  transition: all 0.15s ease;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
 }
 
 .tablet-nav-item:hover {
diff --git a/src/styles/composer.css b/src/styles/composer.css
index e076d920a..338a2a3b4 100644
--- a/src/styles/composer.css
+++ b/src/styles/composer.css
@@ -486,7 +486,7 @@
   border-radius: 999px;
   border: 2px solid rgba(255, 120, 120, 0.35);
   border-top-color: rgba(255, 120, 120, 0.9);
-  animation: composer-action-spin 0.8s linear infinite;
+  animation: composer-action-spin var(--ds-spinner-dur) linear infinite;
 }
 
 
diff --git a/src/styles/diff.css b/src/styles/diff.css
index 19f8bee3a..a9627b1d2 100644
--- a/src/styles/diff.css
+++ b/src/styles/diff.css
@@ -997,7 +997,7 @@
   border-radius: 50%;
   border: 2px solid var(--border-subtle);
   border-top-color: var(--text-strong);
-  animation: spin 0.9s linear infinite;
+  animation: spin var(--ds-spinner-dur) linear infinite;
 }
 
 @keyframes spin {
@@ -1102,7 +1102,7 @@
 .commit-message-loader {
   width: 14px;
   height: 14px;
-  animation: spin 1s linear infinite;
+  animation: spin var(--ds-spinner-dur) linear infinite;
 }
 
 .commit-message-error {
@@ -1150,7 +1150,7 @@
   border-radius: 50%;
   border: 2px solid var(--border-subtle);
   border-top-color: var(--text-emphasis);
-  animation: spin 0.9s linear infinite;
+  animation: spin var(--ds-spinner-dur) linear infinite;
 }
 
 /* Push section */
diff --git a/src/styles/ds-modal.css b/src/styles/ds-modal.css
index 98ef07dfd..11e230516 100644
--- a/src/styles/ds-modal.css
+++ b/src/styles/ds-modal.css
@@ -10,6 +10,7 @@
   background: var(--ds-modal-backdrop);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
+  animation: ds-modal-backdrop-in var(--ds-dur-entrance) var(--ds-ease-out) both;
 }
 
 .app.reduced-transparency .ds-modal-backdrop {
@@ -30,6 +31,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  animation: ds-modal-card-in var(--ds-dur-slow) var(--ds-ease-out) both;
 }
 
 .ds-modal :where(input, textarea, select):focus-visible {
@@ -62,6 +64,8 @@
   padding: 10px 12px;
   font-size: 13px;
   width: 100%;
+  transition: border-color var(--ds-dur-normal) var(--ds-ease-out-soft),
+              box-shadow var(--ds-dur-normal) var(--ds-ease-out-soft);
 }
 
 .ds-modal-textarea {
@@ -97,3 +101,19 @@
   padding: 6px 12px;
   border-radius: 10px;
 }
+
+@keyframes ds-modal-backdrop-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes ds-modal-card-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
diff --git a/src/styles/ds-popover.css b/src/styles/ds-popover.css
index a16d888b8..0182ed0d9 100644
--- a/src/styles/ds-popover.css
+++ b/src/styles/ds-popover.css
@@ -3,6 +3,7 @@
   border: 1px solid var(--ds-popover-border, var(--border-muted));
   box-shadow: var(--ds-popover-shadow, 0 14px 34px rgba(0, 0, 0, 0.3));
   border-radius: 10px;
+  animation: ds-popover-in var(--ds-dur-fast) var(--ds-ease-out) both;
 }
 
 .ds-popover-item {
@@ -19,6 +20,8 @@
   font-size: 12px;
   text-align: left;
   cursor: pointer;
+  transition: background-color var(--ds-dur-fast) var(--ds-ease-out-soft),
+              color var(--ds-dur-fast) var(--ds-ease-out-soft);
 }
 
 .ds-popover-item:disabled {
@@ -55,3 +58,16 @@
   min-width: 0;
   flex: 1;
 }
+
+@keyframes ds-popover-in {
+  from {
+    opacity: 0;
+    translate: 0 -4px;
+    scale: 0.98;
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+  }
+}
diff --git a/src/styles/ds-tokens.css b/src/styles/ds-tokens.css
index b7965aa6f..bb982b6fa 100644
--- a/src/styles/ds-tokens.css
+++ b/src/styles/ds-tokens.css
@@ -41,4 +41,18 @@
   /* Global layer scale (keep numeric so it works with z-index + calc()). */
   --ds-layer-modal: 10000;
   --ds-layer-toast: 11000;
+
+  /* ── Motion ── */
+  --ds-dur-fast: 120ms;
+  --ds-dur-normal: 160ms;
+  --ds-dur-slow: 220ms;
+  --ds-dur-entrance: 200ms;
+
+  --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ds-ease-out-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  --ds-spinner-dur: 0.7s;
+  --ds-active-scale: 0.97;
+  --ds-active-scale-sm: 0.92;
 }
diff --git a/src/styles/home.css b/src/styles/home.css
index 531752887..c26768fe1 100644
--- a/src/styles/home.css
+++ b/src/styles/home.css
@@ -213,7 +213,7 @@
 }
 
 .home-usage-refresh-icon.spinning {
-  animation: home-spin 0.8s linear infinite;
+  animation: home-spin var(--ds-spinner-dur) linear infinite;
 }
 
 .home-usage-grid {
diff --git a/src/styles/main.css b/src/styles/main.css
index e2695faf1..e859e59d8 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -883,7 +883,7 @@
 }
 
 .compact-codex-refresh-icon.spinning {
-  animation: compact-codex-refresh-spin 0.8s linear infinite;
+  animation: compact-codex-refresh-spin var(--ds-spinner-dur) linear infinite;
 }
 
 @keyframes compact-codex-refresh-spin {
diff --git a/src/styles/messages.css b/src/styles/messages.css
index 29f5614bd..2149f5581 100644
--- a/src/styles/messages.css
+++ b/src/styles/messages.css
@@ -58,7 +58,7 @@
   border-radius: 50%;
   border: 2px solid rgba(255, 255, 255, 0.2);
   border-top-color: var(--text-stronger);
-  animation: working-spin 1s linear infinite;
+  animation: working-spin var(--ds-spinner-dur) linear infinite;
 }
 
 .working-timer {
diff --git a/src/styles/settings.css b/src/styles/settings.css
index cefef11b4..be2fb9671 100644
--- a/src/styles/settings.css
+++ b/src/styles/settings.css
@@ -451,7 +451,7 @@
 .settings-agents-generate-loader {
   width: 14px;
   height: 14px;
-  animation: settings-spin 1s linear infinite;
+  animation: settings-spin var(--ds-spinner-dur) linear infinite;
 }
 
 .settings-agents-textarea {
@@ -641,6 +641,8 @@
   background: var(--surface-control);
   color: var(--text-strong);
   font-size: 12px;
+  transition: border-color var(--ds-dur-normal) var(--ds-ease-out-soft),
+              box-shadow var(--ds-dur-normal) var(--ds-ease-out-soft);
 }
 
 .settings-input--compact {
@@ -685,6 +687,8 @@
   background: var(--surface-control);
   color: var(--text-strong);
   font-size: 12px;
+  transition: border-color var(--ds-dur-normal) var(--ds-ease-out-soft),
+              box-shadow var(--ds-dur-normal) var(--ds-ease-out-soft);
 }
 
 .settings-select option {
@@ -698,8 +702,10 @@
 }
 
 .settings-segmented {
+  position: relative;
   display: inline-flex;
   align-items: center;
+  align-self: flex-start;
   gap: 4px;
   padding: 4px;
   border-radius: 999px;
@@ -707,8 +713,27 @@
   background: var(--surface-control);
 }
 
+.settings-segmented::before {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: calc(50% - 6px);
+  height: calc(100% - 8px);
+  border-radius: 999px;
+  background: var(--surface-card);
+  box-shadow: inset 0 0 0 1px var(--border-strong);
+  transition: transform 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
+  z-index: 0;
+}
+
+.settings-segmented.is-second-active::before {
+  transform: translateX(calc(100% + 4px));
+}
+
 .settings-segmented-option {
   position: relative;
+  z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -720,6 +745,7 @@
   padding: 0;
   min-width: 72px;
   overflow: hidden;
+  transition: color var(--ds-dur-slow) var(--ds-ease-out-soft);
 }
 
 .settings-segmented-input {
@@ -744,8 +770,6 @@
 
 .settings-segmented-option.is-active {
   color: var(--text-strong);
-  background: var(--surface-card);
-  box-shadow: inset 0 0 0 1px var(--border-strong);
 }
 
 .settings-segmented-option.is-disabled {
@@ -1198,13 +1222,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
-  transition: all 0.2s ease;
+  transition: background var(--ds-dur-normal) var(--ds-ease-out-soft),
+              border-color var(--ds-dur-normal) var(--ds-ease-out-soft);
 }
 
 .settings-toggle.on {
   background: linear-gradient(135deg, rgba(100, 200, 255, 0.6), rgba(120, 235, 190, 0.6));
   border-color: var(--border-accent);
-  justify-content: flex-end;
 }
 
 .app.reduced-transparency .settings-toggle:not(.on) {
@@ -1218,6 +1242,11 @@
   border-radius: 999px;
   background: var(--surface-card-strong);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  transition: transform var(--ds-dur-normal) var(--ds-ease-spring);
+}
+
+.settings-toggle.on .settings-toggle-knob {
+  transform: translateX(20px);
 }
 
 @media (max-width: 720px) {
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
index 007b971e0..c9df0b492 100644
--- a/src/styles/sidebar.css
+++ b/src/styles/sidebar.css
@@ -291,7 +291,7 @@
 }
 
 .sidebar-refresh-icon.spinning {
-  animation: sidebar-refresh-spin 0.8s linear infinite;
+  animation: sidebar-refresh-spin var(--ds-spinner-dur) linear infinite;
 }
 
 .sidebar-refresh-toggle:hover,
@@ -705,7 +705,7 @@
   color: inherit;
   text-align: left;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background-color 0.2s ease;
   -webkit-app-region: no-drag;
   overflow-x: hidden;
   position: relative;
@@ -980,13 +980,13 @@
 .thread-status.processing {
   background: #ff9f43;
   box-shadow: 0 0 8px rgba(255, 159, 67, 0.8);
-  animation: pulse 1.2s ease-in-out infinite;
+  animation: pulse 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 .thread-status.reviewing {
   background: #2fd1c4;
   box-shadow: 0 0 8px rgba(47, 209, 196, 0.75);
-  animation: pulse 1.4s ease-in-out infinite;
+  animation: pulse 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 .thread-status.unread {
@@ -1253,7 +1253,7 @@
   color: inherit;
   text-align: left;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background-color 0.2s ease;
   -webkit-app-region: no-drag;
   overflow-x: hidden;
 }
@@ -1308,7 +1308,7 @@
   border-radius: 50%;
   border: 2px solid var(--border-subtle);
   border-top-color: var(--text-strong);
-  animation: spin 0.9s linear infinite;
+  animation: spin var(--ds-spinner-dur) linear infinite;
 }
 
 .worktree-deleting-label {
@@ -1483,7 +1483,7 @@
   border-radius: 999px;
   border: 2px solid rgba(11, 15, 26, 0.22);
   border-top-color: rgba(11, 15, 26, 0.8);
-  animation: sidebar-account-spin 0.8s linear infinite;
+  animation: sidebar-account-spin var(--ds-spinner-dur) linear infinite;
 }
 
 @keyframes sidebar-account-spin {
@@ -1525,15 +1525,15 @@
 
 @keyframes pulse {
   0% {
-    transform: scale(0.9);
+    transform: scale(0.92);
     opacity: 0.6;
   }
   50% {
-    transform: scale(1.2);
+    transform: scale(1.1);
     opacity: 1;
   }
   100% {
-    transform: scale(0.9);
+    transform: scale(0.92);
     opacity: 0.6;
   }
 }
diff --git a/src/styles/tabbar.css b/src/styles/tabbar.css
index 472d13dbd..2a41a5039 100644
--- a/src/styles/tabbar.css
+++ b/src/styles/tabbar.css
@@ -47,7 +47,7 @@ html[data-mobile-composer-focus="true"] .app.layout-phone .tabbar {
   justify-content: center;
   gap: 4px;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
 .tabbar-item:hover {