diff --git a/@xen-orchestra/lite/src/components/AccountButton.vue b/@xen-orchestra/lite/src/components/AccountButton.vue
index 09328ad1362..40af204bed2 100644
--- a/@xen-orchestra/lite/src/components/AccountButton.vue
+++ b/@xen-orchestra/lite/src/components/AccountButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <MenuList placement="bottom-end" shadow>
+  <MenuList placement="bottom-end" border>
     <template #trigger="{ open, isOpen }">
       <button type="button" :class="{ active: isOpen }" class="account-button" @click="open">
         <UiIcon :icon="faCircleUser" class="user-icon" />
diff --git a/@xen-orchestra/lite/src/components/AppLogin.vue b/@xen-orchestra/lite/src/components/AppLogin.vue
index 4a1fc5fbd37..b574e79b6a9 100644
--- a/@xen-orchestra/lite/src/components/AppLogin.vue
+++ b/@xen-orchestra/lite/src/components/AppLogin.vue
@@ -27,7 +27,7 @@
           <FormCheckbox v-model="rememberMe" />
           {{ $t('keep-me-logged') }}
         </label>
-        <UiButton type="submit" :busy="isConnecting">
+        <UiButton size="medium" color="normal" level="primary" type="submit" :busy="isConnecting">
           {{ $t('login') }}
         </UiButton>
       </template>
@@ -107,6 +107,7 @@ async function handleSubmit() {
   display: flex;
   margin: 1rem;
   width: fit-content;
+
   & .form-checkbox {
     margin: auto 1rem auto auto;
   }
diff --git a/@xen-orchestra/lite/src/components/FormWidget.vue b/@xen-orchestra/lite/src/components/FormWidget.vue
index 9e3fd3f71ac..ee12338eda8 100644
--- a/@xen-orchestra/lite/src/components/FormWidget.vue
+++ b/@xen-orchestra/lite/src/components/FormWidget.vue
@@ -56,7 +56,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon
   padding: 0 0.7rem;
   border: 1px solid var(--color-neutral-border);
   border-radius: 0.8rem;
-  background-color: var(--color-normal-txt-item);
+  background-color: var(--color-neutral-background-primary);
   box-shadow: var(--shadow-100);
   gap: 0.1rem;
 
@@ -71,7 +71,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon
 }
 
 .form-widget:hover .widget {
-  border-color: var(--color-normal-item-disabled);
+  border-color: var(--color-normal-item-hover);
 }
 
 .element {
@@ -94,7 +94,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon
   border: none;
   outline: none;
   color: var(--color-neutral-txt-primary);
-  background-color: var(--color-normal-txt-item);
+  background-color: var(--color-neutral-background-primary);
   flex: 1;
 
   &:disabled {
diff --git a/@xen-orchestra/lite/src/components/HostPatchesTable.vue b/@xen-orchestra/lite/src/components/HostPatchesTable.vue
index b4199438a16..0354bf7c70b 100644
--- a/@xen-orchestra/lite/src/components/HostPatchesTable.vue
+++ b/@xen-orchestra/lite/src/components/HostPatchesTable.vue
@@ -19,7 +19,7 @@
           }"
           :value="patch.$hostRefs.size"
           class="counter"
-          color="error"
+          color="danger"
         />
       </td>
     </tr>
diff --git a/@xen-orchestra/lite/src/components/PowerStateIcon.vue b/@xen-orchestra/lite/src/components/PowerStateIcon.vue
index 31ee16bc1cd..1b1643f84aa 100644
--- a/@xen-orchestra/lite/src/components/PowerStateIcon.vue
+++ b/@xen-orchestra/lite/src/components/PowerStateIcon.vue
@@ -29,7 +29,7 @@ const className = computed(() => `state-${props.state.toLocaleLowerCase()}`)
   color: var(--color-normal-txt-item);
 
   &.state-running {
-    color: var(--color-success-txt-base);
+    color: var(--color-success-item-base);
   }
 
   &.state-paused {
@@ -39,5 +39,9 @@ const className = computed(() => `state-${props.state.toLocaleLowerCase()}`)
   &.state-suspended {
     color: var(--color-normal-txt-hover);
   }
+
+  &.state-halted {
+    color: var(--color-danger-item-base);
+  }
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/ProgressCircle.vue b/@xen-orchestra/lite/src/components/ProgressCircle.vue
index 903633fdc97..960ce3b3abe 100644
--- a/@xen-orchestra/lite/src/components/ProgressCircle.vue
+++ b/@xen-orchestra/lite/src/components/ProgressCircle.vue
@@ -39,7 +39,7 @@ const progress = computed(() => {
 .progress-circle-fill {
   animation: progress 1s ease-out forwards;
   fill: none;
-  stroke: var(--color-success-txt-base);
+  stroke: var(--color-success-item-base);
   stroke-width: 1.2;
   stroke-linecap: round;
   stroke-dasharray: v-bind(progress), 100;
@@ -48,13 +48,13 @@ const progress = computed(() => {
 .progress-circle-background {
   fill: none;
   stroke-width: 1.2;
-  stroke: var(--color-neutral-border);
+  stroke: var(--color-neutral-background-disabled);
 }
 
 .progress-circle-text {
   font-size: 0.7rem;
   font-weight: bold;
-  fill: var(--color-success-txt-base);
+  fill: var(--color-success-item-base);
   text-anchor: middle;
   alignment-baseline: middle;
 }
diff --git a/@xen-orchestra/lite/src/components/UsageBar.vue b/@xen-orchestra/lite/src/components/UsageBar.vue
index 9def76c93f4..6b997c3aea7 100644
--- a/@xen-orchestra/lite/src/components/UsageBar.vue
+++ b/@xen-orchestra/lite/src/components/UsageBar.vue
@@ -74,14 +74,14 @@ const computedData = computed(() => {
 .progress-item {
   --progress-bar-height: 1.2rem;
   --progress-bar-color: var(--color-normal-item-hover);
-  --progress-bar-background-color: var(--color-neutral-border);
+  --progress-bar-background-color: var(--color-neutral-background-disabled);
 
   &.warning {
-    --progress-bar-color: var(--color-warning-txt-base);
+    --progress-bar-color: var(--color-warning-item-base);
   }
 
   &.error {
-    --progress-bar-color: var(--color-danger-txt-base);
+    --progress-bar-color: var(--color-danger-item-base);
   }
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/XoaButton.vue b/@xen-orchestra/lite/src/components/XoaButton.vue
index 0e592542a5d..37d36bebdbe 100644
--- a/@xen-orchestra/lite/src/components/XoaButton.vue
+++ b/@xen-orchestra/lite/src/components/XoaButton.vue
@@ -1,8 +1,24 @@
 <template>
-  <UiButton v-if="xoaFound" :left-icon="faArrowUpRightFromSquare" class="xoa-button" @click="openXoa()">
+  <UiButton
+    v-if="xoaFound"
+    size="medium"
+    color="normal"
+    level="primary"
+    :left-icon="faArrowUpRightFromSquare"
+    class="xoa-button"
+    @click="openXoa()"
+  >
     {{ $t('access-xoa') }}
   </UiButton>
-  <UiButton v-else :left-icon="faDownload" class="xoa-button" @click="openXoaDeploy()">
+  <UiButton
+    v-else
+    size="medium"
+    color="normal"
+    level="primary"
+    :left-icon="faDownload"
+    class="xoa-button"
+    @click="openXoaDeploy()"
+  >
     {{ $t('deploy-xoa') }}
   </UiButton>
 </template>
diff --git a/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue b/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
index 51304e0b881..3a16d3fb9c8 100644
--- a/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
+++ b/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
@@ -7,7 +7,7 @@
     </TabItem>
     <TabItem v-bind="tab(TAB.SLOTS, slotParams)">Slots</TabItem>
     <TabItem v-bind="tab(TAB.SETTINGS, settingParams)">Settings</TabItem>
-    <MenuList placement="bottom" shadow>
+    <MenuList placement="bottom" border>
       <template #trigger="{ open, isOpen }">
         <TabItem :active="isOpen" :disabled="presets === undefined" class="preset-tab" @click="open">
           <UiIcon :icon="faSliders" />
@@ -35,7 +35,9 @@
         <UiCardTitle>
           Logs
           <template #right>
-            <UiButton v-if="eventsLog.length > 0" level="tertiary" @click="eventsLog = []"> Clear </UiButton>
+            <UiButton v-if="eventsLog.length > 0" size="medium" color="normal" level="tertiary" @click="eventsLog = []">
+              Clear
+            </UiButton>
           </template>
         </UiCardTitle>
         <div class="events-log">
diff --git a/@xen-orchestra/lite/src/components/form/FormCheckbox.vue b/@xen-orchestra/lite/src/components/form/FormCheckbox.vue
index 3f9be3c38e4..ed7a0b3c090 100644
--- a/@xen-orchestra/lite/src/components/form/FormCheckbox.vue
+++ b/@xen-orchestra/lite/src/components/form/FormCheckbox.vue
@@ -81,7 +81,7 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle'
 
   .input.indeterminate + .fake-checkbox > .icon {
     opacity: 1;
-    color: var(--color-neutral-txt-secondary);
+    color: var(--color-normal-txt-item);
   }
 }
 
@@ -162,14 +162,13 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle'
   background-color: var(--background-color);
   box-shadow: var(--shadow-100);
 
-  --border-color: var(--color-neutral-border);
+  --border-color: var(--color-normal-item-base);
 }
 
 .input:disabled {
   & + .fake-checkbox {
     cursor: not-allowed;
-    --background-color: var(--color-neutral-background-secondary);
-    --border-color: var(--color-neutral-border);
+    --border-color: var(--color-neutral-txt-secondary);
   }
 
   &:checked + .fake-checkbox {
@@ -181,25 +180,25 @@ const isIndeterminate = computed(() => (type === 'checkbox' || type === 'toggle'
 .input:not(:disabled) {
   &:hover + .fake-checkbox,
   &:focus + .fake-checkbox {
-    --border-color: var(--color-normal-item-active);
+    --border-color: var(--color-normal-item-hover);
   }
 
   &:active + .fake-checkbox {
-    --border-color: var(--color-normal-item-hover);
+    --border-color: var(--color-normal-item-active);
   }
 
   &:checked + .fake-checkbox {
     --border-color: transparent;
-    --background-color: var(--color-normal-txt-base);
+    --background-color: var(--color-normal-item-base);
   }
 
   &:checked:hover + .fake-checkbox,
   &:checked:focus + .fake-checkbox {
-    --background-color: var(--color-normal-txt-hover);
+    --background-color: var(--color-normal-item-hover);
   }
 
   &:checked:active + .fake-checkbox {
-    --background-color: var(--color-normal-txt-active);
+    --background-color: var(--color-normal-item-active);
   }
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/form/FormInput.vue b/@xen-orchestra/lite/src/components/form/FormInput.vue
index dbbf3bff5c7..827ad88be9c 100644
--- a/@xen-orchestra/lite/src/components/form/FormInput.vue
+++ b/@xen-orchestra/lite/src/components/form/FormInput.vue
@@ -193,13 +193,13 @@ defineExpose({
 
   &:disabled {
     cursor: not-allowed;
-    --background-color: var(--color-neutral-background-secondary);
+    --background-color: var(--color-neutral-background-disabled);
   }
 
   &:not(:disabled) {
     &.info {
       &:hover {
-        --border-color: var(--color-normal-item-disabled);
+        --border-color: var(--color-normal-item-hover);
       }
 
       &:active {
@@ -207,15 +207,15 @@ defineExpose({
       }
 
       &:focus {
-        --border-color: var(--color-normal-txt-base);
+        --border-color: var(--color-normal-item-base);
       }
     }
 
     &.success {
-      --border-color: var(--color-normal-txt-base);
+      --border-color: var(--color-success-item-base);
 
       &:hover {
-        --border-color: var(--color-success-item-disabled);
+        --border-color: var(--color-success-item-hover);
       }
 
       &:active {
@@ -223,15 +223,15 @@ defineExpose({
       }
 
       &:focus {
-        --border-color: var(--color-normal-txt-base);
+        --border-color: var(--color-success-item-base);
       }
     }
 
     &.warning {
-      --border-color: var(--color-warning-txt-base);
+      --border-color: var(--color-warning-item-base);
 
       &:hover {
-        --border-color: var(--color-warning-item-disabled);
+        --border-color: var(--color-warning-item-hover);
       }
 
       &:active {
@@ -239,15 +239,15 @@ defineExpose({
       }
 
       &:focus {
-        --border-color: var(--color-warning-txt-base);
+        --border-color: var(--color-warning-item-base);
       }
     }
 
     &.error {
-      --border-color: var(--color-danger-txt-base);
+      --border-color: var(--color-danger-item-base);
 
       &:hover {
-        --border-color: var(--color-danger-item-disabled);
+        --border-color: var(--color-danger-item-hover);
       }
 
       &:active {
@@ -255,7 +255,7 @@ defineExpose({
       }
 
       &:focus-within {
-        --border-color: var(--color-danger-txt-base);
+        --border-color: var(--color-danger-item-base);
       }
     }
   }
diff --git a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
index c07cb569086..43064c5dbe7 100644
--- a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
+++ b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
@@ -4,7 +4,7 @@
       {{ host.name_label || '(Host)' }}
       <template #addons>
         <UiIcon v-if="isPoolMaster" v-tooltip="$t('master')" :icon="faStar" color="warning" />
-        <UiCounter v-if="isReady" v-tooltip="$t('running-vm', { count: vmCount })" :value="vmCount" color="info" />
+        <UiCounter v-if="isReady" v-tooltip="$t('running-vm', { count: vmCount })" :value="vmCount" color="primary" />
       </template>
     </TreeItemLabel>
     <template #sublist>
diff --git a/@xen-orchestra/lite/src/components/modals/CollectionFilterModal.vue b/@xen-orchestra/lite/src/components/modals/CollectionFilterModal.vue
index 23fa598fee1..4ccdd70de1c 100644
--- a/@xen-orchestra/lite/src/components/modals/CollectionFilterModal.vue
+++ b/@xen-orchestra/lite/src/components/modals/CollectionFilterModal.vue
@@ -23,7 +23,7 @@
       </template>
 
       <template #buttons>
-        <UiButton level="tertiary" @click="addNewFilter()">
+        <UiButton size="medium" color="normal" level="tertiary" @click="addNewFilter()">
           {{ $t('add-or') }}
         </UiButton>
         <ModalDeclineButton />
diff --git a/@xen-orchestra/lite/src/components/modals/JsonEditorModal.vue b/@xen-orchestra/lite/src/components/modals/JsonEditorModal.vue
index 0023509058d..cba308e2abd 100644
--- a/@xen-orchestra/lite/src/components/modals/JsonEditorModal.vue
+++ b/@xen-orchestra/lite/src/components/modals/JsonEditorModal.vue
@@ -6,7 +6,7 @@
       </template>
 
       <template #buttons>
-        <UiButton level="tertiary" @click="formatJson()">
+        <UiButton size="medium" color="normal" level="tertiary" @click="formatJson()">
           {{ $t('reformat') }}
         </UiButton>
         <ModalDeclineButton />
diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue
index fd094e8341b..2ea46b6642c 100644
--- a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue
+++ b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue
@@ -3,7 +3,7 @@
     <UiCardTitle>
       {{ $t('alarms') }}
       <template v-if="isReady && alarms.length > 0" #right>
-        <UiCounter :value="alarms.length" color="error" />
+        <UiCounter :value="alarms.length" color="danger" />
       </template>
     </UiCardTitle>
     <div v-if="!isStarted" class="pre-start">
@@ -11,7 +11,7 @@
         <p class="text typo h4-medium">
           {{ $t('click-to-display-alarms') }}
         </p>
-        <UiButton @click="start">{{ $t('load-now') }}</UiButton>
+        <UiButton size="medium" color="normal" level="primary" @click="start">{{ $t('load-now') }}</UiButton>
       </div>
       <div>
         <img alt="" src="@/assets/server-status.svg" />
diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuProvisioning.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuProvisioning.vue
index 7c210a18b4a..e1da443fd66 100644
--- a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuProvisioning.vue
+++ b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuProvisioning.vue
@@ -85,12 +85,12 @@ const hasError = computed(() => hostStoreHasError.value || vmStoreHasError.value
 .progress-item {
   margin-top: 2.6rem;
   --progress-bar-height: 1.2rem;
-  --progress-bar-color: var(--color-normal-txt-base);
-  --progress-bar-background-color: var(--color-neutral-border);
+  --progress-bar-color: var(--color-normal-item-base);
+  --progress-bar-background-color: var(--color-neutral-background-disabled);
 
   &.warning {
-    --progress-bar-color: var(--color-warning-txt-base);
-    --footer-value-color: var(--color-warning-txt-base);
+    --progress-bar-color: var(--color-warning-item-base);
+    --footer-value-color: var(--color-warning-item-base);
   }
 
   & .footer-value {
diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardStatusItem.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardStatusItem.vue
index e35e253156f..561ec109929 100644
--- a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardStatusItem.vue
+++ b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardStatusItem.vue
@@ -53,10 +53,10 @@ const inactive = computed(() => props.total - props.active)
   width: 1.3rem;
   height: 1.3rem;
   border-radius: 0.65rem;
-  background-color: var(--color-success-txt-base);
+  background-color: var(--color-success-item-base);
 
   &.inactive {
-    background-color: var(--color-neutral-border);
+    background-color: var(--color-neutral-background-disabled);
   }
 }
 
diff --git a/@xen-orchestra/lite/src/components/ui/UiBadge.vue b/@xen-orchestra/lite/src/components/ui/UiBadge.vue
index 1a6d8e0b829..afc3b6a81d0 100644
--- a/@xen-orchestra/lite/src/components/ui/UiBadge.vue
+++ b/@xen-orchestra/lite/src/components/ui/UiBadge.vue
@@ -22,8 +22,8 @@ defineProps<{
   gap: 0.4rem;
   padding: 0 0.8rem;
   height: 1.8em;
-  color: var(--color-normal-txt-item);
+  color: var(--color-neutral-txt-primary);
   border-radius: 9.6rem;
-  background-color: var(--color-neutral-txt-secondary);
+  background-color: var(--color-neutral-background-disabled);
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue b/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue
index 69c73594770..26ae1cc9c06 100644
--- a/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue
+++ b/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue
@@ -2,7 +2,7 @@
   <div class="ui-section-title" :class="tags.left">
     <component :is="tags.left" v-if="$slots.default || left" class="left">
       <slot>{{ left }}</slot>
-      <UiCounter v-if="count > 0" class="count" :value="count" color="info" />
+      <UiCounter v-if="count > 0" class="count" :value="count" color="primary" />
     </component>
     <component :is="tags.right" v-if="$slots.right || right" class="right">
       <slot name="right">{{ right }}</slot>
diff --git a/@xen-orchestra/lite/src/components/ui/icon/UiStatusIcon.vue b/@xen-orchestra/lite/src/components/ui/icon/UiStatusIcon.vue
index f934943ddcb..67fa918a48e 100644
--- a/@xen-orchestra/lite/src/components/ui/icon/UiStatusIcon.vue
+++ b/@xen-orchestra/lite/src/components/ui/icon/UiStatusIcon.vue
@@ -30,16 +30,19 @@ const icon = computed(() => {
   color: var(--icon-color);
 
   &.error {
-    --icon-color: var(--color-danger-txt-base);
+    --icon-color: var(--color-danger-item-base);
   }
+
   &.warning {
-    --icon-color: var(--color-warning-txt-base);
+    --icon-color: var(--color-warning-item-base);
   }
+
   &.info {
-    --icon-color: var(--color-normal-txt-base);
+    --icon-color: var(--color-normal-item-base);
   }
+
   &.success {
-    --icon-color: var(--color-success-txt-base);
+    --icon-color: var(--color-success-item-base);
   }
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/ui/modals/ModalApproveButton.vue b/@xen-orchestra/lite/src/components/ui/modals/ModalApproveButton.vue
index e47fead9eea..962a9266b7e 100644
--- a/@xen-orchestra/lite/src/components/ui/modals/ModalApproveButton.vue
+++ b/@xen-orchestra/lite/src/components/ui/modals/ModalApproveButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <UiButton :busy="modal.isBusy" type="submit">
+  <UiButton size="medium" color="normal" level="primary" :busy="modal.isBusy" type="submit">
     <slot />
   </UiButton>
 </template>
diff --git a/@xen-orchestra/lite/src/components/ui/modals/ModalDeclineButton.vue b/@xen-orchestra/lite/src/components/ui/modals/ModalDeclineButton.vue
index a7eed38b702..357842ef642 100644
--- a/@xen-orchestra/lite/src/components/ui/modals/ModalDeclineButton.vue
+++ b/@xen-orchestra/lite/src/components/ui/modals/ModalDeclineButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <UiButton level="secondary" :busy="modal.isBusy" @click="modal.decline()">
+  <UiButton size="medium" color="normal" level="secondary" :busy="modal.isBusy" @click="modal.decline()">
     <slot>{{ $t('cancel') }}</slot>
   </UiButton>
 </template>
diff --git a/@xen-orchestra/lite/src/components/ui/progress/UiProgressBar.vue b/@xen-orchestra/lite/src/components/ui/progress/UiProgressBar.vue
index f12d061bff9..9666e96a09e 100644
--- a/@xen-orchestra/lite/src/components/ui/progress/UiProgressBar.vue
+++ b/@xen-orchestra/lite/src/components/ui/progress/UiProgressBar.vue
@@ -32,19 +32,19 @@ const cssFillWidth = computed(() => {
   background-color: var(--progress-bar-background-color, var(--color-normal-background-selected));
 
   &.color-info {
-    --progress-bar-color: var(--color-normal-txt-base);
+    --progress-bar-color: var(--color-normal-item-base);
   }
 
   &.color-success {
-    --progress-bar-color: var(--color-success-txt-base);
+    --progress-bar-color: var(--color-success-item-base);
   }
 
   &.color-warning {
-    --progress-bar-color: var(--color-warning-txt-base);
+    --progress-bar-color: var(--color-warning-item-base);
   }
 
   &.color-error {
-    --progress-bar-color: var(--color-danger-txt-base);
+    --progress-bar-color: var(--color-danger-item-base);
   }
 }
 
diff --git a/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionPowerStateItems.vue b/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionPowerStateItems.vue
index a2814d97f43..387be707df5 100644
--- a/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionPowerStateItems.vue
+++ b/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionPowerStateItems.vue
@@ -134,6 +134,6 @@ const getHostState = (host: XenApiHost) => (isHostRunning(host) ? VM_POWER_STATE
 
 .star {
   margin: 0 1rem;
-  color: var(--color-warning-txt-base);
+  color: var(--color-warning-item-base);
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/vm/VmHeader.vue b/@xen-orchestra/lite/src/components/vm/VmHeader.vue
index 20b17644eb1..c77123809f2 100644
--- a/@xen-orchestra/lite/src/components/vm/VmHeader.vue
+++ b/@xen-orchestra/lite/src/components/vm/VmHeader.vue
@@ -2,16 +2,23 @@
   <TitleBar :icon="faDisplay">
     {{ name }}
     <template #actions>
-      <MenuList v-if="vm !== undefined" placement="bottom-end" shadow>
+      <MenuList v-if="vm !== undefined" placement="bottom-end" border>
         <template #trigger="{ open, isOpen }">
-          <UiButton :class="{ pressed: isOpen }" :left-icon="faPowerOff" @click="open">
+          <UiButton
+            size="medium"
+            color="normal"
+            level="primary"
+            :class="{ pressed: isOpen }"
+            :left-icon="faPowerOff"
+            @click="open"
+          >
             {{ $t('change-state') }}
             <UiIcon :icon="faAngleDown" />
           </UiButton>
         </template>
         <VmActionPowerStateItems :vm-refs="[vm.$ref]" />
       </MenuList>
-      <MenuList v-if="vm !== undefined" placement="bottom-end" shadow>
+      <MenuList v-if="vm !== undefined" placement="bottom-end" border>
         <template #trigger="{ open, isOpen }">
           <ButtonIcon
             v-tooltip="{
diff --git a/@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue b/@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue
index c3cfcaa1ec9..dcd4430739b 100644
--- a/@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue
+++ b/@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue
@@ -2,7 +2,7 @@
   <MenuList
     :disabled="selectedRefs.length === 0"
     :horizontal="!isMobile"
-    :shadow="isMobile"
+    :border="isMobile"
     class="vms-actions-bar"
     placement="bottom-end"
   >
diff --git a/@xen-orchestra/lite/src/libs/story/story-param.ts b/@xen-orchestra/lite/src/libs/story/story-param.ts
index 2cfc82ff725..cb2b0facfa7 100644
--- a/@xen-orchestra/lite/src/libs/story/story-param.ts
+++ b/@xen-orchestra/lite/src/libs/story/story-param.ts
@@ -418,7 +418,7 @@ export const isSlotParam = (param: any): param is SlotParam => param instanceof
 export const isModelParam = (param: any): param is ModelParam => param instanceof ModelParam
 
 export const colorProp = (name = 'color') =>
-  prop(name).type('Color').enum('info', 'success', 'warning', 'error').default('info').widget()
+  prop(name).type('Color').enum('normal', 'success', 'warning', 'danger').default('normal').widget()
 
 export const iconProp = (name = 'icon') =>
   prop(name)
diff --git a/@xen-orchestra/lite/src/stories/web-core/button/ui-button.story.vue b/@xen-orchestra/lite/src/stories/web-core/button/ui-button.story.vue
index f83a21f35ec..bdb0d4865b1 100644
--- a/@xen-orchestra/lite/src/stories/web-core/button/ui-button.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/button/ui-button.story.vue
@@ -2,15 +2,19 @@
   <ComponentStory
     v-slot="{ properties, settings }"
     :params="[
-      colorProp().ctx(),
+      prop('color')
+        .type('ButtonColor')
+        .enum('normal', 'success', 'warning', 'danger')
+        .preset('normal')
+        .required()
+        .widget(),
       prop('level')
         .type('ButtonVariant')
-        .default('primary')
-        .widget(choice('primary', 'secondary', 'tertiary')),
-      prop('size')
-        .type('ButtonSize')
-        .default('small')
-        .widget(choice('extra-small', 'small', 'medium')),
+        .enum('primary', 'secondary', 'tertiary')
+        .preset('primary')
+        .required()
+        .widget(),
+      prop('size').type('ButtonSize').enum('small', 'medium', 'large').preset('medium').required().widget(),
       prop('busy').bool().widget(),
       prop('disabled').bool().widget().ctx(),
       prop('leftIcon')
@@ -50,7 +54,7 @@
         props: {
           leftIcon: undefined,
           rightIcon: faTrash,
-          color: 'error',
+          color: 'danger',
         },
         settings: {
           label: 'Delete',
@@ -64,7 +68,7 @@
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
-import { colorProp, prop, setting } from '@/libs/story/story-param'
+import { prop, setting } from '@/libs/story/story-param'
 import { choice } from '@/libs/story/story-widget'
 import UiButton from '@core/components/button/UiButton.vue'
 import { faFloppyDisk, faRocket, faShip, faTrash } from '@fortawesome/free-solid-svg-icons'
diff --git a/@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue b/@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue
index 0a0823a2863..ca5d018b953 100644
--- a/@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue
@@ -11,10 +11,11 @@
     ]"
   >
     <CardTitle v-bind="properties">
-      {{ settings.defaultSlotContent }}<UiCounter :value="3" color="danger" size="medium" />
+      {{ settings.defaultSlotContent }}
+      <UiCounter :value="3" color="danger" size="medium" />
       <template #info>
-        {{ settings.infoSlotContent
-        }}<UiButton level="tertiary" size="extra-small" :right-icon="faAngleRight">See all</UiButton>
+        {{ settings.infoSlotContent }}
+        <UiButton level="tertiary" size="small" :right-icon="faAngleRight">See all</UiButton>
       </template>
       <template #description>{{ settings.descriptionSlotContent }}</template>
     </CardTitle>
diff --git a/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.md b/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.md
index 8b28abea912..68f83934e12 100644
--- a/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.md
+++ b/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.md
@@ -7,8 +7,8 @@
     <ObjectIcon type="host" state="running" size="medium" />
   </template>
   <template #actions>
-    <UiButton size="small" :left-icon="faPlus">New VM</UiButton>
-    <UiButton size="small" :left-icon="faPowerOff">Change state</UiButton>
+    <UiButton size="medium" :left-icon="faPlus">New VM</UiButton>
+    <UiButton size="medium" :left-icon="faPowerOff">Change state</UiButton>
   </template>
 </HeadBar>
 ```
diff --git a/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.vue b/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.vue
index d7adbb1a915..3a0290b8e64 100644
--- a/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.vue
@@ -19,8 +19,8 @@
         migrating... (34%)
       </template>
       <template v-if="settings.showDemoButtons" #actions>
-        <UiButton size="small" :left-icon="faPlus">New VM</UiButton>
-        <UiButton size="small" :left-icon="faPowerOff">Change state</UiButton>
+        <UiButton size="medium" :left-icon="faPlus">New VM</UiButton>
+        <UiButton size="medium" :left-icon="faPowerOff">Change state</UiButton>
       </template>
     </HeadBar>
   </ComponentStory>
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui-counter.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui-counter.story.vue
index 7d223d71a1b..be11650c59e 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui-counter.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui-counter.story.vue
@@ -3,7 +3,12 @@
     v-slot="{ properties }"
     :params="[
       prop('value').type(`'number' | 'string'`).str().required().preset(2).widget(),
-      prop('color').type('CounterColor').enum('info', 'success', 'warning', 'error', 'danger', 'black').widget(),
+      prop('color')
+        .type('CounterColor')
+        .required()
+        .enum('primary', 'secondary', 'success', 'warning', 'danger', 'disabled')
+        .preset('primary')
+        .widget(),
       prop('size').type('CounterSize').enum('small', 'medium').widget(),
     ]"
   >
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui-tag.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui-tag.story.vue
index 1a91a320093..59f1777d877 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui-tag.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui-tag.story.vue
@@ -3,7 +3,12 @@
     v-slot="{ properties, settings }"
     :params="[
       iconProp(),
-      prop('color').type('TagColor').enum('info', 'success', 'warning', 'error', 'danger', 'grey').widget(),
+      prop('color')
+        .type('TagColor')
+        .required()
+        .preset('primary')
+        .enum('primary', 'secondary', 'success', 'warning', 'danger', 'disabled')
+        .widget(),
       prop('light').bool().widget(),
       slot(),
       setting('slot').preset('Label').widget(),
diff --git a/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue b/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue
index 53f29db122a..69187951ff1 100644
--- a/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue
+++ b/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue
@@ -2,7 +2,9 @@
   <div>
     <img alt="" src="../assets/object-not-found.svg" />
     <p class="text">{{ $t('object-not-found', { id }) }}</p>
-    <UiButton @click="router.push({ name: 'home' })">{{ $t('back-pool-dashboard') }}</UiButton>
+    <UiButton size="medium" color="normal" level="primary" @click="router.push({ name: 'home' })">
+      {{ $t('back-pool-dashboard') }}
+    </UiButton>
   </div>
 </template>
 
diff --git a/@xen-orchestra/lite/src/views/PageNotFoundView.vue b/@xen-orchestra/lite/src/views/PageNotFoundView.vue
index ed9d564d57a..cd6576e725f 100644
--- a/@xen-orchestra/lite/src/views/PageNotFoundView.vue
+++ b/@xen-orchestra/lite/src/views/PageNotFoundView.vue
@@ -3,7 +3,9 @@
     <img alt="" src="../assets/page-not-found.svg" />
     <p class="numeric">404</p>
     <p class="text">{{ $t('page-not-found') }}</p>
-    <UiButton @click="router.push({ name: 'home' })">{{ $t('back-pool-dashboard') }}</UiButton>
+    <UiButton size="medium" color="normal" level="primary" @click="router.push({ name: 'home' })">
+      {{ $t('back-pool-dashboard') }}
+    </UiButton>
   </div>
 </template>
 
@@ -26,9 +28,11 @@ div {
   align-items: center;
   justify-content: center;
 }
+
 img {
   width: 30%;
 }
+
 .numeric {
   color: var(--color-normal-txt-base);
   font-size: 96px;
diff --git a/@xen-orchestra/lite/src/views/pool/PoolTasksView.vue b/@xen-orchestra/lite/src/views/pool/PoolTasksView.vue
index e67689d2fab..fab0e833cbd 100644
--- a/@xen-orchestra/lite/src/views/pool/PoolTasksView.vue
+++ b/@xen-orchestra/lite/src/views/pool/PoolTasksView.vue
@@ -2,7 +2,7 @@
   <UiCard :color="hasError ? 'error' : undefined">
     <UiTitle class="title-with-counter" type="h4">
       {{ $t('tasks') }}
-      <UiCounter :value="pendingTasks.length" color="info" size="medium" />
+      <UiCounter :value="pendingTasks.length" color="primary" size="medium" />
     </UiTitle>
     <TasksTable :finished-tasks="finishedTasks" :pending-tasks="pendingTasks" />
     <UiCardSpinner v-if="!isReady" />
diff --git a/@xen-orchestra/lite/src/views/story/HomeView.vue b/@xen-orchestra/lite/src/views/story/HomeView.vue
index f0310c1bea5..55c0b0807a3 100644
--- a/@xen-orchestra/lite/src/views/story/HomeView.vue
+++ b/@xen-orchestra/lite/src/views/story/HomeView.vue
@@ -16,8 +16,8 @@
       Slot names, separated by comma
       <span class="slots">
         <FormInput v-model="slots" />
-        <UiButton @click="slots = 'default'">Default</UiButton>
-        <UiButton level="secondary" @click="slots = ''">Clear</UiButton>
+        <UiButton size="medium" color="normal" level="primary" @click="slots = 'default'">Default</UiButton>
+        <UiButton size="medium" color="normal" level="secondary" @click="slots = ''">Clear</UiButton>
       </span>
     </div>
 
diff --git a/@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue b/@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue
index 7c0822a6184..5ab8ca4b503 100644
--- a/@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue
+++ b/@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue
@@ -13,7 +13,7 @@
         <strong>{{ $t('check-errors') }}</strong>
         <UiRaw>{{ error }}</UiRaw>
       </div>
-      <UiButton :left-icon="faDownload" @click="resetValues()">
+      <UiButton size="medium" color="normal" level="primary" :left-icon="faDownload" @click="resetValues()">
         {{ $t('xoa-deploy-retry') }}
       </UiButton>
     </template>
@@ -24,7 +24,7 @@
         <h2>{{ $t('xoa-deploy-successful') }}</h2>
         <UiIcon :icon="faCircleCheck" class="success" />
       </div>
-      <UiButton :left-icon="faArrowUpRightFromSquare" @click="openXoa">
+      <UiButton size="medium" color="normal" level="primary" :left-icon="faArrowUpRightFromSquare" @click="openXoa">
         {{ $t('access-xoa') }}
       </UiButton>
     </template>
@@ -40,7 +40,7 @@
         <UiIcon :icon="faExclamationCircle" />
         {{ $t('keep-page-open') }}
       </p>
-      <UiButton :disabled="vmRef === undefined" color="error" level="secondary" @click="cancel()">
+      <UiButton size="medium" :disabled="vmRef === undefined" color="danger" level="secondary" @click="cancel()">
         {{ $t('cancel') }}
       </UiButton>
     </template>
@@ -92,8 +92,14 @@
           <div class="row">
             <FormInputWrapper>
               <div class="radio-group">
-                <label><FormRadio v-model="ipStrategy" value="static" />{{ $t('static-ip') }}</label>
-                <label><FormRadio v-model="ipStrategy" value="dhcp" />{{ $t('dhcp') }}</label>
+                <label>
+                  <FormRadio v-model="ipStrategy" value="static" />
+                  {{ $t('static-ip') }}</label
+                >
+                <label>
+                  <FormRadio v-model="ipStrategy" value="dhcp" />
+                  {{ $t('dhcp') }}</label
+                >
               </div>
             </FormInputWrapper>
           </div>
@@ -156,8 +162,9 @@
           <div class="row">
             <FormInputWrapper :label="$t('ssh-account')">
               <label
-                ><span>{{ $t('disabled') }}</span
-                ><FormToggle v-model="enableSshAccount" /><span>{{ $t('enabled') }}</span></label
+                ><span>{{ $t('disabled') }}</span>
+                <FormToggle v-model="enableSshAccount" />
+                <span>{{ $t('enabled') }}</span></label
               >
             </FormInputWrapper>
           </div>
@@ -189,10 +196,10 @@
         </FormSection>
 
         <ButtonGroup>
-          <UiButton level="secondary" @click="router.back()">
+          <UiButton size="medium" color="normal" level="secondary" @click="router.back()">
             {{ $t('cancel') }}
           </UiButton>
-          <UiButton type="submit">
+          <UiButton size="medium" color="normal" level="primary" type="submit">
             {{ $t('deploy') }}
           </UiButton>
         </ButtonGroup>
@@ -503,6 +510,7 @@ async function cancel() {
   display: flex;
   flex-direction: row;
   margin: 1.67rem 0;
+
   & > * {
     min-width: 20rem;
   }
@@ -524,9 +532,11 @@ async function cancel() {
   text-align: center;
   padding: 5rem;
   margin: auto;
+
   h2 {
     margin-bottom: 1rem;
   }
+
   * {
     max-width: 100%;
   }
@@ -535,6 +545,7 @@ async function cancel() {
 .not-available {
   font-size: 2rem;
 }
+
 .status {
   color: var(--color-neutral-txt-primary);
 }
@@ -546,6 +557,7 @@ async function cancel() {
 .danger {
   color: var(--color-danger-txt-base);
 }
+
 .success,
 .danger {
   &.ui-icon {
@@ -559,6 +571,7 @@ async function cancel() {
   text-align: left;
   gap: 0.5em;
 }
+
 .warning {
   color: var(--color-warning-txt-base);
 }
diff --git a/@xen-orchestra/web-core/lib/assets/css/_colors-legacy.pcss b/@xen-orchestra/web-core/lib/assets/css/_colors-legacy.pcss
deleted file mode 100644
index 61d6aedd6d5..00000000000
--- a/@xen-orchestra/web-core/lib/assets/css/_colors-legacy.pcss
+++ /dev/null
@@ -1,125 +0,0 @@
-:root {
-  --color-logo: #282467;
-
-  --color-grey-000: #000000;
-  --color-grey-100: #1a1b38;
-  --color-grey-200: #595a6f;
-  --color-grey-300: #9899a5;
-  --color-grey-400: #bfbfc6;
-  --color-grey-500: #e5e5e7;
-  --color-grey-600: #ffffff;
-
-  --background-color-primary: #ffffff;
-  --background-color-secondary: #f6f6f7;
-
-  --color-purple-base: #8f84ff;
-  --color-purple-d20: color(#8f84ff blend(black 20%));
-  --color-purple-d40: color(#8f84ff blend(black 40%));
-  --color-purple-d60: color(#8f84ff blend(black 60%));
-  --color-purple-l20: color(#8f84ff blend(white 20%));
-  --color-purple-l40: color(#8f84ff blend(white 40%));
-  --color-purple-l60: color(#8f84ff blend(white 60%));
-  --background-color-purple-10: color(white blend(#8f84ff 10%));
-  --background-color-purple-20: color(white blend(#8f84ff 20%));
-  --background-color-purple-30: color(white blend(#8f84ff 30%));
-  --background-color-purple-60: color(white blend(#8f84ff 60%));
-
-  --color-green-base: #2ca878;
-  --color-green-d20: color(#2ca878 blend(black 20%));
-  --color-green-d40: color(#2ca878 blend(black 40%));
-  --color-green-d60: color(#2ca878 blend(black 60%));
-  --color-green-l20: color(#2ca878 blend(white 20%));
-  --color-green-l40: color(#2ca878 blend(white 40%));
-  --color-green-l60: color(#2ca878 blend(white 60%));
-  --background-color-green-10: color(white blend(#2ca878 10%));
-  --background-color-green-20: color(white blend(#2ca878 20%));
-  --background-color-green-30: color(white blend(#2ca878 30%));
-  --background-color-green-60: color(white blend(#2ca878 60%));
-
-  --color-orange-base: #ef7f18;
-  --color-orange-d20: color(#ef7f18 blend(black 20%));
-  --color-orange-d40: color(#ef7f18 blend(black 40%));
-  --color-orange-d60: color(#ef7f18 blend(black 60%));
-  --color-orange-l20: color(#ef7f18 blend(white 20%));
-  --color-orange-l40: color(#ef7f18 blend(white 40%));
-  --color-orange-l60: color(#ef7f18 blend(white 60%));
-  --background-color-orange-10: color(white blend(#ef7f18 10%));
-  --background-color-orange-20: color(white blend(#ef7f18 20%));
-  --background-color-orange-30: color(white blend(#ef7f18 30%));
-  --background-color-orange-60: color(white blend(#ef7f18 60%));
-
-  --color-red-base: #be1621;
-  --color-red-d20: color(#be1621 blend(black 20%));
-  --color-red-d40: color(#be1621 blend(black 40%));
-  --color-red-d60: color(#be1621 blend(black 60%));
-  --color-red-l20: color(#be1621 blend(white 20%));
-  --color-red-l40: color(#be1621 blend(white 40%));
-  --color-red-l60: color(#be1621 blend(white 60%));
-  --background-color-red-10: color(white blend(#be1621 10%));
-  --background-color-red-20: color(white blend(#be1621 20%));
-  --background-color-red-30: color(white blend(#be1621 30%));
-  --background-color-red-60: color(white blend(#be1621 60%));
-}
-
-:root.dark {
-  --color-logo: #e5e5e7;
-
-  --color-grey-000: #ffffff;
-  --color-grey-100: #e5e5e7;
-  --color-grey-200: #bfbfc6;
-  --color-grey-300: #9899a5;
-  --color-grey-400: #595a6f;
-  --color-grey-500: #3a3b54;
-  --color-grey-600: #000000;
-
-  --background-color-primary: #14141e;
-  --background-color-secondary: #17182b;
-
-  --color-purple-base: #8f84ff;
-  --color-purple-d20: color(#8f84ff blend(white 20%));
-  --color-purple-d40: color(#8f84ff blend(white 40%));
-  --color-purple-d60: color(#8f84ff blend(white 60%));
-  --color-purple-l20: color(#8f84ff blend(black 20%));
-  --color-purple-l40: color(#8f84ff blend(black 40%));
-  --color-purple-l60: color(#8f84ff blend(black 60%));
-  --background-color-purple-10: color(#17182b blend(#8f84ff 25%));
-  --background-color-purple-20: color(#17182b blend(#8f84ff 35%));
-  --background-color-purple-30: color(#17182b blend(#8f84ff 45%));
-  --background-color-purple-60: color(#17182b blend(#8f84ff 85%));
-
-  --color-green-base: #2ca878;
-  --color-green-d20: color(#2ca878 blend(white 20%));
-  --color-green-d40: color(#2ca878 blend(white 40%));
-  --color-green-d60: color(#2ca878 blend(white 60%));
-  --color-green-l20: color(#2ca878 blend(black 20%));
-  --color-green-l40: color(#2ca878 blend(black 40%));
-  --color-green-l60: color(#2ca878 blend(black 60%));
-  --background-color-green-10: color(#17182b blend(#2ca878 25%));
-  --background-color-green-20: color(#17182b blend(#2ca878 35%));
-  --background-color-green-30: color(#17182b blend(#2ca878 45%));
-  --background-color-green-60: color(#17182b blend(#2ca878 85%));
-
-  --color-orange-base: #ef7f18;
-  --color-orange-d20: color(#ef7f18 blend(white 20%));
-  --color-orange-d40: color(#ef7f18 blend(white 40%));
-  --color-orange-d60: color(#ef7f18 blend(white 60%));
-  --color-orange-l20: color(#ef7f18 blend(black 20%));
-  --color-orange-l40: color(#ef7f18 blend(black 40%));
-  --color-orange-l60: color(#ef7f18 blend(black 60%));
-  --background-color-orange-10: color(#17182b blend(#ef7f18 25%));
-  --background-color-orange-20: color(#17182b blend(#ef7f18 35%));
-  --background-color-orange-30: color(#17182b blend(#ef7f18 45%));
-  --background-color-orange-60: color(#17182b blend(#ef7f18 85%));
-
-  --color-red-base: #be1621;
-  --color-red-d20: color(#be1621 blend(white 20%));
-  --color-red-d40: color(#be1621 blend(white 40%));
-  --color-red-d60: color(#be1621 blend(white 60%));
-  --color-red-l20: color(#be1621 blend(black 20%));
-  --color-red-l40: color(#be1621 blend(black 40%));
-  --color-red-l60: color(#be1621 blend(black 60%));
-  --background-color-red-10: color(#17182b blend(#be1621 25%));
-  --background-color-red-20: color(#17182b blend(#be1621 35%));
-  --background-color-red-30: color(#17182b blend(#be1621 45%));
-  --background-color-red-60: color(#17182b blend(#be1621 85%));
-}
diff --git a/@xen-orchestra/web-core/lib/assets/css/base.pcss b/@xen-orchestra/web-core/lib/assets/css/base.pcss
index 0a1409b4da6..6168eb6955e 100644
--- a/@xen-orchestra/web-core/lib/assets/css/base.pcss
+++ b/@xen-orchestra/web-core/lib/assets/css/base.pcss
@@ -1,4 +1,3 @@
-@import '_colors-legacy.pcss';
 @import '_colors.pcss';
 @import '_reset.pcss';
 @import '_fonts.pcss';
@@ -28,6 +27,7 @@
   scrollbar-width: auto;
 
   /* Chrome/Webkit */
+
   ::-webkit-scrollbar {
     width: var(--scrollbar-width);
   }
diff --git a/@xen-orchestra/web-core/lib/components/LegendTitle.vue b/@xen-orchestra/web-core/lib/components/LegendTitle.vue
index b4cfbc0a2d6..f034b34eb17 100644
--- a/@xen-orchestra/web-core/lib/components/LegendTitle.vue
+++ b/@xen-orchestra/web-core/lib/components/LegendTitle.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="legend-title typo c3-semi-bold">
     <slot />
-    <UiIcon v-tooltip="iconTooltip ?? false" :icon color="info" />
+    <UiIcon v-tooltip="iconTooltip ?? false" :icon color="normal" />
   </div>
 </template>
 
diff --git a/@xen-orchestra/web-core/lib/components/PowerStateIcon.vue b/@xen-orchestra/web-core/lib/components/PowerStateIcon.vue
index 86ef9147e8b..304b4f044a7 100644
--- a/@xen-orchestra/web-core/lib/components/PowerStateIcon.vue
+++ b/@xen-orchestra/web-core/lib/components/PowerStateIcon.vue
@@ -1,6 +1,6 @@
 <!-- v1.0 -->
 <template>
-  <UiIcon :class="className" :icon="icon" class="power-state-icon" />
+  <UiIcon :class="className" color="current" :icon class="power-state-icon" />
 </template>
 
 <script lang="ts" setup>
@@ -32,7 +32,7 @@ const className = computed(() => `state-${props.state}`)
   }
 
   &.state-running {
-    color: var(--color-success-txt-base);
+    color: var(--color-success-item-base);
   }
 
   &.state-paused {
@@ -40,7 +40,7 @@ const className = computed(() => `state-${props.state}`)
   }
 
   &.state-halted {
-    color: var(--color-danger-txt-base);
+    color: var(--color-danger-item-base);
   }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/UiCounter.vue b/@xen-orchestra/web-core/lib/components/UiCounter.vue
index a7ed9f5d225..9e426b6f780 100644
--- a/@xen-orchestra/web-core/lib/components/UiCounter.vue
+++ b/@xen-orchestra/web-core/lib/components/UiCounter.vue
@@ -13,7 +13,7 @@ import { computed } from 'vue'
 const props = withDefaults(
   defineProps<{
     value: number | string
-    color?: CounterColor
+    color: CounterColor
     size?: CounterSize
   }>(),
   { size: 'small' }
@@ -32,26 +32,34 @@ const classNames = computed(() => {
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .ui-counter {
-  --background-color: var(--color-neutral-txt-secondary);
+  &.primary {
+    --background-color: var(--color-normal-item-base);
+    --color: var(--color-normal-txt-item);
+  }
 
-  &.info {
-    --background-color: var(--color-normal-txt-base);
+  &.secondary {
+    --background-color: var(--color-neutral-txt-primary);
+    --color: var(--color-neutral-background-primary);
   }
 
   &.success {
-    --background-color: var(--color-success-txt-base);
+    --background-color: var(--color-success-item-base);
+    --color: var(--color-success-txt-item);
   }
 
   &.warning {
-    --background-color: var(--color-warning-txt-base);
+    --background-color: var(--color-warning-item-base);
+    --color: var(--color-warning-txt-item);
   }
 
-  &:is(.error, .danger) {
-    --background-color: var(--color-danger-txt-base);
+  &.danger {
+    --background-color: var(--color-danger-item-base);
+    --color: var(--color-danger-txt-item);
   }
 
-  &.black {
-    --background-color: var(--color-neutral-txt-primary);
+  &.disabled {
+    --background-color: var(--color-neutral-background-disabled);
+    --color: var(--color-neutral-txt-secondary);
   }
 }
 
@@ -75,7 +83,7 @@ const classNames = computed(() => {
   justify-content: center;
   vertical-align: middle;
   text-transform: lowercase;
-  color: var(--color-normal-txt-item);
+  color: var(--color);
   height: var(--height);
   min-width: var(--height);
   padding: var(--padding);
diff --git a/@xen-orchestra/web-core/lib/components/UiTag.vue b/@xen-orchestra/web-core/lib/components/UiTag.vue
index a58c618b994..0f4573e1967 100644
--- a/@xen-orchestra/web-core/lib/components/UiTag.vue
+++ b/@xen-orchestra/web-core/lib/components/UiTag.vue
@@ -2,7 +2,7 @@
 <template>
   <span :class="[color, { light }]" class="ui-tag typo p3-regular">
     <slot name="icon">
-      <UiIcon :icon fixed-width />
+      <UiIcon :icon color="current" fixed-width />
     </slot>
     <span class="text-ellipsis"><slot /></span>
   </span>
@@ -13,65 +13,73 @@ import UiIcon from '@core/components/icon/UiIcon.vue'
 import type { TagColor } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
-withDefaults(
-  defineProps<{
-    color?: TagColor
-    light?: boolean
-    icon?: IconDefinition
-  }>(),
-  { color: 'grey' }
-)
+defineProps<{
+  color: TagColor
+  light?: boolean
+  icon?: IconDefinition
+}>()
 </script>
 
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .ui-tag {
-  --color: var(--color-normal-txt-item);
-
-  &.light {
-    --color: var(--color-neutral-txt-primary);
-  }
-}
-
-/* BACKGROUND COLOR VARIANTS */
-.ui-tag {
-  &.grey {
-    --background-color: var(--color-neutral-txt-secondary);
+  &.primary {
+    --background-color: var(--color-normal-item-base);
+    --color: var(--color-normal-txt-item);
 
     &.light {
-      --background-color: var(--color-neutral-background-secondary);
+      --background-color: var(--color-normal-background-selected);
+      --color: var(--color-normal-txt-base);
     }
   }
 
-  &.info {
-    --background-color: var(--color-normal-item-hover);
+  &.secondary {
+    --background-color: var(--color-neutral-txt-primary);
+    --color: var(--color-neutral-background-primary);
 
     &.light {
-      --background-color: var(--color-normal-background-selected);
+      --background-color: var(--color-neutral-background-secondary);
+      --color: var(--color-neutral-txt-primary);
     }
   }
 
   &.success {
-    --background-color: var(--color-success-item-hover);
+    --background-color: var(--color-success-item-base);
+    --color: var(--color-success-txt-item);
 
     &.light {
       --background-color: var(--color-success-background-selected);
+      --color: var(--color-success-txt-base);
     }
   }
 
   &.warning {
-    --background-color: var(--color-warning-item-hover);
+    --background-color: var(--color-warning-item-base);
+    --color: var(--color-warning-txt-item);
 
     &.light {
       --background-color: var(--color-warning-background-selected);
+      --color: var(--color-warning-txt-base);
     }
   }
 
-  &:is(.error, .danger) {
-    --background-color: var(--color-danger-item-hover);
+  &.danger {
+    --background-color: var(--color-danger-item-base);
+    --color: var(--color-danger-txt-item);
 
     &.light {
       --background-color: var(--color-danger-background-selected);
+      --color: var(--color-danger-txt-base);
+    }
+  }
+
+  &.disabled {
+    --background-color: var(--color-neutral-background-disabled);
+    --color: var(--color-neutral-txt-secondary);
+
+    &.light {
+      --background-color: var(--color-neutral-background-secondary);
+      --color: var(--color-neutral-txt-secondary);
     }
   }
 }
diff --git a/@xen-orchestra/web-core/lib/components/backup-state/BackupState.vue b/@xen-orchestra/web-core/lib/components/backup-state/BackupState.vue
index e0b379a062b..cfe4a633c99 100644
--- a/@xen-orchestra/web-core/lib/components/backup-state/BackupState.vue
+++ b/@xen-orchestra/web-core/lib/components/backup-state/BackupState.vue
@@ -20,7 +20,7 @@ const props = defineProps<Props>()
 const states: Record<Props['state'], { icon: IconDefinition; color: Color }> = {
   success: { icon: faCheckCircle, color: 'success' },
   partial: { icon: faCircleMinus, color: 'warning' },
-  failure: { icon: faCircleXmark, color: 'error' },
+  failure: { icon: faCircleXmark, color: 'danger' },
 }
 
 const icon = computed(() => states[props.state].icon)
diff --git a/@xen-orchestra/web-core/lib/components/button/ButtonIcon.vue b/@xen-orchestra/web-core/lib/components/button/ButtonIcon.vue
index 1d3336807fa..2160582d4ee 100644
--- a/@xen-orchestra/web-core/lib/components/button/ButtonIcon.vue
+++ b/@xen-orchestra/web-core/lib/components/button/ButtonIcon.vue
@@ -1,7 +1,7 @@
 <!-- v1.0 -->
 <template>
   <button :class="[color, size, { disabled, active }]" :disabled class="button-icon" type="button">
-    <UiIcon :icon class="icon" />
+    <UiIcon :icon color="current" />
     <span v-if="dot" class="dot" />
   </button>
 </template>
@@ -22,7 +22,7 @@ const props = withDefaults(
     dot?: boolean
     targetScale?: number | { x: number; y: number }
   }>(),
-  { color: 'info', size: 'medium', targetScale: 1 }
+  { color: 'normal', size: 'medium', targetScale: 1 }
 )
 
 const cssTargetScale = computed(() => {
@@ -37,7 +37,7 @@ const cssTargetScale = computed(() => {
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .button-icon {
-  &.info {
+  &.normal {
     & {
       --color: var(--color-normal-txt-base);
       --background-color: transparent;
@@ -88,7 +88,7 @@ const cssTargetScale = computed(() => {
     }
 
     &:is(:disabled, .disabled) {
-      --color: var(--color-success-item-disabled);
+      --color: var(--color-neutral-txt-secondary);
       --background-color: transparent;
     }
   }
@@ -116,7 +116,7 @@ const cssTargetScale = computed(() => {
     }
 
     &:is(:disabled, .disabled) {
-      --color: var(--color-warning-item-disabled);
+      --color: var(--color-neutral-txt-secondary);
       --background-color: transparent;
     }
   }
@@ -144,7 +144,7 @@ const cssTargetScale = computed(() => {
     }
 
     &:is(:disabled, .disabled) {
-      --color: var(--color-danger-item-disabled);
+      --color: var(--color-neutral-txt-secondary);
       --background-color: transparent;
     }
   }
diff --git a/@xen-orchestra/web-core/lib/components/button/UiButton.vue b/@xen-orchestra/web-core/lib/components/button/UiButton.vue
index 1e6aaec0d74..a4e44337d6b 100644
--- a/@xen-orchestra/web-core/lib/components/button/UiButton.vue
+++ b/@xen-orchestra/web-core/lib/components/button/UiButton.vue
@@ -1,9 +1,9 @@
 <!-- v1.0 -->
 <template>
   <button :class="className" :disabled="busy || isDisabled" class="ui-button" type="button">
-    <UiIcon :busy :icon="leftIcon" class="icon" fixed-width />
+    <UiIcon :busy :icon="leftIcon" color="current" class="icon" fixed-width />
     <slot />
-    <UiIcon :icon="rightIcon" class="icon" fixed-width />
+    <UiIcon :icon="rightIcon" color="current" class="icon" fixed-width />
   </button>
 </template>
 
@@ -18,28 +18,25 @@ import { computed } from 'vue'
 
 const props = withDefaults(
   defineProps<{
-    level?: ButtonLevel
+    level: ButtonLevel
+    color: Color
+    size: ButtonSize
     busy?: boolean
     disabled?: boolean
     leftIcon?: IconDefinition
     rightIcon?: IconDefinition
-    color?: Color
-    size?: ButtonSize
   }>(),
   {
     disabled: undefined,
-    color: 'info',
-    level: 'primary',
-    size: 'small',
   }
 )
 
 const isDisabled = useContext(DisabledContext, () => props.disabled)
 
 const fontClasses = {
-  'extra-small': 'typo p3-medium',
-  small: 'typo h6-medium',
-  medium: 'typo h3-semi-bold',
+  small: 'typo p3-medium',
+  medium: 'typo h6-medium',
+  large: 'typo h3-semi-bold',
 }
 
 const className = computed(() => {
@@ -59,123 +56,389 @@ const className = computed(() => {
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .ui-button {
-  &.info {
-    --accent-color: var(--color-normal-txt-base);
-
-    &:is(:hover, .hover, :focus-visible) {
-      --accent-color: var(--color-normal-txt-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --accent-color: var(--color-normal-txt-active);
-    }
-
-    &:is(:disabled, .disabled) {
-      --accent-color: var(--color-neutral-txt-secondary);
+  &.primary {
+    &.normal {
+      --background-color: var(--color-normal-item-base);
+      --border-color: var(--color-normal-item-base);
+      --color: var(--color-normal-txt-item);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-normal-item-hover);
+        --border-color: var(--color-normal-item-hover);
+        --color: var(--color-normal-txt-item);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-normal-item-active);
+        --border-color: var(--color-normal-item-active);
+        --color: var(--color-normal-txt-item);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-normal-item-disabled);
+        --border-color: var(--color-normal-item-disabled);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-normal-item-base);
+        --border-color: var(--color-normal-item-base);
+        --color: var(--color-normal-txt-item);
+      }
     }
-  }
 
-  &.success {
-    --accent-color: var(--color-success-txt-base);
-
-    &:is(:hover, .hover, :focus-visible) {
-      --accent-color: var(--color-success-txt-hover);
+    &.success {
+      --background-color: var(--color-success-item-base);
+      --border-color: var(--color-success-item-base);
+      --color: var(--color-success-txt-item);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-success-item-hover);
+        --border-color: var(--color-success-item-hover);
+        --color: var(--color-success-txt-item);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-success-item-active);
+        --border-color: var(--color-success-item-active);
+        --color: var(--color-success-txt-item);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-success-item-disabled);
+        --border-color: var(--color-success-item-disabled);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-success-item-base);
+        --border-color: var(--color-success-item-base);
+        --color: var(--color-success-txt-item);
+      }
     }
 
-    &:is(:active, .pressed) {
-      --accent-color: var(--color-success-txt-active);
+    &.warning {
+      --background-color: var(--color-warning-item-base);
+      --border-color: var(--color-warning-item-base);
+      --color: var(--color-warning-txt-item);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-warning-item-hover);
+        --border-color: var(--color-warning-item-hover);
+        --color: var(--color-warning-txt-item);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-warning-item-active);
+        --border-color: var(--color-warning-item-active);
+        --color: var(--color-warning-txt-item);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-warning-item-disabled);
+        --border-color: var(--color-warning-item-disabled);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-warning-item-base);
+        --border-color: var(--color-warning-item-base);
+        --color: var(--color-warning-txt-item);
+      }
     }
 
-    &:is(:disabled, .disabled) {
-      --accent-color: var(--color-success-item-disabled);
+    &.danger {
+      --background-color: var(--color-danger-item-base);
+      --border-color: var(--color-danger-item-base);
+      --color: var(--color-danger-txt-item);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-danger-item-hover);
+        --border-color: var(--color-danger-item-hover);
+        --color: var(--color-danger-txt-item);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-danger-item-active);
+        --border-color: var(--color-danger-item-active);
+        --color: var(--color-danger-txt-item);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-danger-item-disabled);
+        --border-color: var(--color-danger-item-disabled);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-danger-item-base);
+        --border-color: var(--color-danger-item-base);
+        --color: var(--color-danger-txt-item);
+      }
     }
   }
 
-  &.warning {
-    --accent-color: var(--color-warning-txt-base);
+  &.secondary {
+    &.normal {
+      --background-color: var(--color-neutral-background-primary);
+      --border-color: var(--color-normal-item-base);
+      --color: var(--color-normal-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-normal-item-hover);
+        --color: var(--color-normal-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-normal-item-active);
+        --color: var(--color-normal-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-neutral-background-disabled);
+        --border-color: var(--color-neutral-txt-secondary);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-normal-item-base);
+        --color: var(--color-normal-txt-base);
+      }
+    }
 
-    &:is(:hover, .hover, :focus-visible) {
-      --accent-color: var(--color-warning-txt-hover);
+    &.success {
+      --background-color: var(--color-neutral-background-primary);
+      --border-color: var(--color-success-txt-base);
+      --color: var(--color-success-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-success-txt-hover);
+        --color: var(--color-success-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-success-txt-active);
+        --color: var(--color-success-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-neutral-background-disabled);
+        --border-color: var(--color-neutral-txt-secondary);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-success-txt-base);
+        --color: var(--color-success-txt-base);
+      }
     }
 
-    &:is(:active, .pressed) {
-      --accent-color: var(--color-warning-txt-active);
+    &.warning {
+      --background-color: var(--color-neutral-background-primary);
+      --border-color: var(--color-warning-txt-base);
+      --color: var(--color-warning-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-warning-txt-hover);
+        --color: var(--color-warning-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-warning-txt-active);
+        --color: var(--color-warning-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-neutral-background-disabled);
+        --border-color: var(--color-neutral-txt-secondary);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-warning-txt-base);
+        --color: var(--color-warning-txt-base);
+      }
     }
 
-    &:is(:disabled, .disabled) {
-      --accent-color: var(--color-warning-item-disabled);
+    &.danger {
+      --background-color: var(--color-neutral-background-primary);
+      --border-color: var(--color-danger-txt-base);
+      --color: var(--color-danger-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-danger-txt-hover);
+        --color: var(--color-danger-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-danger-txt-active);
+        --color: var(--color-danger-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: var(--color-neutral-background-disabled);
+        --border-color: var(--color-neutral-txt-secondary);
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-neutral-background-primary);
+        --border-color: var(--color-danger-txt-base);
+        --color: var(--color-danger-txt-base);
+      }
     }
   }
 
-  &:is(.danger, .error) {
-    --accent-color: var(--color-danger-txt-base);
+  &.tertiary {
+    &.normal {
+      --background-color: transparent;
+      --border-color: transparent;
+      --color: var(--color-normal-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-normal-background-hover);
+        --border-color: var(--color-normal-background-hover);
+        --color: var(--color-normal-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-normal-background-active);
+        --border-color: var(--color-normal-background-active);
+        --color: var(--color-normal-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: transparent;
+        --border-color: transparent;
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-normal-background-selected);
+        --border-color: var(--color-normal-background-selected);
+        --color: var(--color-normal-txt-base);
+      }
+    }
 
-    &:is(:hover, .hover, :focus-visible) {
-      --accent-color: var(--color-danger-txt-hover);
+    &.success {
+      --background-color: transparent;
+      --border-color: transparent;
+      --color: var(--color-success-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-success-background-hover);
+        --border-color: var(--color-success-background-hover);
+        --color: var(--color-success-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-success-background-active);
+        --border-color: var(--color-success-background-active);
+        --color: var(--color-success-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: transparent;
+        --border-color: transparent;
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-success-background-selected);
+        --border-color: var(--color-success-background-selected);
+        --color: var(--color-success-txt-base);
+      }
     }
 
-    &:is(:active, .pressed) {
-      --accent-color: var(--color-danger-txt-active);
+    &.warning {
+      --background-color: transparent;
+      --border-color: transparent;
+      --color: var(--color-warning-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-warning-background-hover);
+        --border-color: var(--color-warning-background-hover);
+        --color: var(--color-warning-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-warning-background-active);
+        --border-color: var(--color-warning-background-active);
+        --color: var(--color-warning-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: transparent;
+        --border-color: transparent;
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-warning-background-selected);
+        --border-color: var(--color-warning-background-selected);
+        --color: var(--color-warning-txt-base);
+      }
     }
 
-    &:is(:disabled, .disabled) {
-      --accent-color: var(--color-danger-item-disabled);
+    &.danger {
+      --background-color: transparent;
+      --border-color: transparent;
+      --color: var(--color-danger-txt-base);
+
+      &:is(:hover, .hover, :focus-visible) {
+        --background-color: var(--color-danger-background-hover);
+        --border-color: var(--color-danger-background-hover);
+        --color: var(--color-danger-txt-hover);
+      }
+
+      &:is(:active, .pressed) {
+        --background-color: var(--color-danger-background-active);
+        --border-color: var(--color-danger-background-active);
+        --color: var(--color-danger-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        --background-color: transparent;
+        --border-color: transparent;
+        --color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        --background-color: var(--color-danger-background-selected);
+        --border-color: var(--color-danger-background-selected);
+        --color: var(--color-danger-txt-base);
+      }
     }
   }
 }
 
 /* SIZE VARIANTS */
 .ui-button {
-  &.extra-small {
+  &.small {
     --padding: 0.4rem 0.8rem;
-
-    &.tertiary {
-      --padding: 0;
-    }
+    --border-radius: 0.2rem;
   }
 
-  &.small {
+  &.medium {
     --padding: 0.8rem 1.6rem;
-
-    &.tertiary {
-      --padding: 0.2rem 0;
-    }
+    --border-radius: 0.4rem;
   }
 
-  &.medium {
+  &.large {
     --padding: 1.6rem 2.4rem;
-
-    &.tertiary {
-      --padding: 0.4rem 0;
-    }
-  }
-}
-
-/* LEVELS VARIANTS */
-.ui-button {
-  &.primary {
-    --color: var(--color-normal-txt-item);
-    --background-color: var(--accent-color);
-    --border-color: var(--accent-color);
-    --border-style: solid;
-    --border-radius: 0.8rem;
-  }
-
-  &.secondary {
-    --color: var(--accent-color);
-    --background-color: var(--color-neutral-background-primary);
-    --border-color: var(--accent-color);
-    --border-style: solid;
     --border-radius: 0.8rem;
   }
-
-  &.tertiary {
-    --color: var(--accent-color);
-    --background-color: transparent;
-    --border-color: var(--accent-color);
-    --border-style: none none solid;
-    --border-radius: 0;
-  }
 }
 
 /* IMPLEMENTATION */
@@ -190,7 +453,7 @@ const className = computed(() => {
   outline: none;
   border-color: var(--border-color);
   border-radius: var(--border-radius);
-  border-style: var(--border-style);
+  border-style: solid;
   color: var(--color);
   background-color: var(--background-color);
   padding: var(--padding);
diff --git a/@xen-orchestra/web-core/lib/components/card/CardTitle.vue b/@xen-orchestra/web-core/lib/components/card/CardTitle.vue
index 2fc95819527..c62e448a490 100644
--- a/@xen-orchestra/web-core/lib/components/card/CardTitle.vue
+++ b/@xen-orchestra/web-core/lib/components/card/CardTitle.vue
@@ -2,9 +2,13 @@
 <template>
   <div class="card-title">
     <div class="main-content">
-      <div class="title typo h6-medium"><slot /></div>
+      <div class="title typo h6-medium">
+        <slot />
+      </div>
 
-      <div v-if="$slots.info" class="info typo h7-semi-bold"><slot name="info" /></div>
+      <div v-if="$slots.info" class="info typo h7-semi-bold">
+        <slot name="info" />
+      </div>
     </div>
     <p v-if="$slots.description" class="description typo p3-regular">
       <slot name="description" />
@@ -36,6 +40,7 @@ defineSlots<{
   display: flex;
   align-items: center;
   gap: 1.6rem;
+  color: var(--color-neutral-txt-primary);
 }
 
 .info {
diff --git a/@xen-orchestra/web-core/lib/components/cell-object/CellObject.vue b/@xen-orchestra/web-core/lib/components/cell-object/CellObject.vue
index dd05b75f22b..abd2c07211b 100644
--- a/@xen-orchestra/web-core/lib/components/cell-object/CellObject.vue
+++ b/@xen-orchestra/web-core/lib/components/cell-object/CellObject.vue
@@ -11,8 +11,8 @@
           v-if="isSupported && copiableId"
           :left-icon="faCopy"
           level="secondary"
-          size="extra-small"
-          :color="copied ? 'success' : 'info'"
+          size="small"
+          :color="copied ? 'success' : 'normal'"
           @click="copy(id)"
         >
           {{ copied ? $t('core.copied') : $t('core.copy-id') }}
diff --git a/@xen-orchestra/web-core/lib/components/chip/UiChip.vue b/@xen-orchestra/web-core/lib/components/chip/UiChip.vue
index a1baaf04a60..a49c3d68e9a 100644
--- a/@xen-orchestra/web-core/lib/components/chip/UiChip.vue
+++ b/@xen-orchestra/web-core/lib/components/chip/UiChip.vue
@@ -21,7 +21,7 @@ withDefaults(
     color?: Color
     disabled?: boolean
   }>(),
-  { color: 'info' }
+  { color: 'normal' }
 )
 
 const emit = defineEmits<{
diff --git a/@xen-orchestra/web-core/lib/components/donut-chart/DonutChart.vue b/@xen-orchestra/web-core/lib/components/donut-chart/DonutChart.vue
index 1b8dd0260f1..60a193cb043 100644
--- a/@xen-orchestra/web-core/lib/components/donut-chart/DonutChart.vue
+++ b/@xen-orchestra/web-core/lib/components/donut-chart/DonutChart.vue
@@ -13,7 +13,7 @@
       cy="50"
       r="40"
     />
-    <UiIcon :icon height="24" width="24" x="38" y="38" />
+    <UiIcon :icon color="current" height="24" width="24" x="38" y="38" />
   </svg>
 </template>
 
@@ -70,7 +70,7 @@ const computedSegments = computed(() => {
   --stroke-color: var(--color-neutral-txt-primary);
 
   &.primary {
-    --stroke-color: var(--color-normal-txt-base);
+    --stroke-color: var(--color-normal-item-base);
   }
 
   &.secondary {
@@ -78,19 +78,19 @@ const computedSegments = computed(() => {
   }
 
   &.success {
-    --stroke-color: var(--color-success-txt-base);
+    --stroke-color: var(--color-success-item-base);
   }
 
   &.warning {
-    --stroke-color: var(--color-warning-txt-base);
+    --stroke-color: var(--color-warning-item-base);
   }
 
   &.danger {
-    --stroke-color: var(--color-danger-txt-base);
+    --stroke-color: var(--color-danger-item-base);
   }
 
   &.disabled {
-    --stroke-color: var(--color-neutral-txt-secondary);
+    --stroke-color: var(--color-neutral-background-disabled);
   }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue b/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue
index 5b6880a6b78..d2c89f44388 100644
--- a/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue
+++ b/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue
@@ -1,14 +1,14 @@
 <template>
   <div v-tooltip="{ selector: '.label' }" :class="[color, { disabled, selected }]" class="dropdown-item">
-    <UiIcon v-if="checkbox" :color="color ?? 'info'" :icon="selected ? faSquareCheck : faSquare" />
+    <UiIcon v-if="checkbox" :color :icon="selected ? faSquareCheck : faSquare" />
     <slot name="icon">
-      <UiIcon :icon />
+      <UiIcon :icon color="current" />
     </slot>
     <div class="label p2 medium text-ellipsis">
       <slot />
     </div>
     <div v-if="info" class="info-text p3 italic">{{ info }}</div>
-    <UiIcon v-if="arrow" :color="disabled ? undefined : 'info'" :icon="faAngleRight" class="right-icon" />
+    <UiIcon v-if="arrow" :color="disabled ? 'current' : 'normal'" :icon="faAngleRight" class="right-icon" />
   </div>
 </template>
 
@@ -24,7 +24,7 @@ import { computed, inject } from 'vue'
 
 defineProps<{
   arrow?: boolean
-  color?: Color
+  color: Color
   disabled?: boolean
   icon?: IconDefinition
   info?: string
@@ -40,7 +40,7 @@ const checkbox = inject(
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .dropdown-item {
-  & {
+  &.normal {
     --color: var(--color-neutral-txt-primary);
     --background-color: var(--color-neutral-background-primary);
 
@@ -65,31 +65,6 @@ const checkbox = inject(
     }
   }
 
-  &.info {
-    --color: var(--color-normal-txt-base);
-    --background-color: var(--color-neutral-background-primary);
-
-    &:is(.active, .selected) {
-      --color: var(--color-normal-txt-base);
-      --background-color: var(--color-normal-background-selected);
-    }
-
-    &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-normal-txt-hover);
-      --background-color: var(--color-normal-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --color: var(--color-normal-txt-active);
-      --background-color: var(--color-normal-background-active);
-    }
-
-    &.disabled {
-      --color: var(--color-normal-item-disabled);
-      --background-color: var(--color-neutral-background-primary);
-    }
-  }
-
   &.success {
     --color: var(--color-success-txt-base);
     --background-color: var(--color-neutral-background-primary);
@@ -110,7 +85,7 @@ const checkbox = inject(
     }
 
     &.disabled {
-      --color: var(--color-success-item-disabled);
+      --color: var(--color-neutral-txt-secondary);
       --background-color: var(--color-neutral-background-primary);
     }
   }
@@ -135,12 +110,12 @@ const checkbox = inject(
     }
 
     &.disabled {
-      --color: var(--color-warning-item-disabled);
+      --color: var(--color-neutral-txt-secondary);
       --background-color: var(--color-neutral-background-primary);
     }
   }
 
-  &:is(.error, .danger) {
+  &.danger {
     --color: var(--color-danger-txt-base);
     --background-color: var(--color-neutral-background-primary);
 
@@ -160,7 +135,7 @@ const checkbox = inject(
     }
 
     &.disabled {
-      --color: var(--color-danger-item-disabled);
+      --color: var(--color-neutral-txt-secondary);
       --background-color: var(--color-neutral-background-primary);
     }
   }
diff --git a/@xen-orchestra/web-core/lib/components/dropdown/DropdownTitle.vue b/@xen-orchestra/web-core/lib/components/dropdown/DropdownTitle.vue
index 7494d6143fb..06b9b22d3bf 100644
--- a/@xen-orchestra/web-core/lib/components/dropdown/DropdownTitle.vue
+++ b/@xen-orchestra/web-core/lib/components/dropdown/DropdownTitle.vue
@@ -4,7 +4,7 @@
  -->
 <template>
   <div class="dropdown-title">
-    <UiIcon :icon />
+    <UiIcon :icon color="current" />
     <div class="label c3 semi-bold">
       <slot />
     </div>
diff --git a/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue b/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue
index 195838808fa..5ea8fb19262 100644
--- a/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue
+++ b/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue
@@ -4,7 +4,7 @@
     <div class="label-wrapper">
       <span v-if="slots.icon || icon" class="icon">
         <slot name="icon">
-          <UiIcon :icon />
+          <UiIcon :icon color="current" />
         </slot>
       </span>
       <h4 v-tooltip class="typo h4-medium label text-ellipsis">
diff --git a/@xen-orchestra/web-core/lib/components/icon/ComplexIcon.vue b/@xen-orchestra/web-core/lib/components/icon/ComplexIcon.vue
index 51dfa05e76f..a7a591f5d29 100644
--- a/@xen-orchestra/web-core/lib/components/icon/ComplexIcon.vue
+++ b/@xen-orchestra/web-core/lib/components/icon/ComplexIcon.vue
@@ -41,7 +41,7 @@ withDefaults(
     transform: translate(100%, 80%);
 
     :deep(path) {
-      stroke: var(--color-normal-txt-item);
+      stroke: var(--color-neutral-background-primary);
       stroke-width: 100px;
       stroke-linejoin: round;
       paint-order: stroke;
diff --git a/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue b/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue
index 43659afc075..8d0b6b90c0d 100644
--- a/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue
+++ b/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue
@@ -5,8 +5,8 @@
 <!-- Network v1.0 -->
 <template>
   <FontAwesomeLayers :class="[size, { disabled: stateConfig === undefined }]" class="object-icon">
-    <UiIcon :icon="mainIcon" />
-    <UiIcon :icon="stateIcon" :style="stateIconStyle" class="state" />
+    <UiIcon :icon="mainIcon" color="current" />
+    <UiIcon :icon="stateIcon" color="current" :style="stateIconStyle" class="state" />
   </FontAwesomeLayers>
 </template>
 
@@ -46,7 +46,7 @@ const config: ObjectIconConfig = {
     states: {
       running: {
         icon: faPlay,
-        color: '--color-success-txt-base',
+        color: '--color-success-item-base',
         translate: {
           x: [100, 132, 148],
           y: [65, 75, 90],
@@ -54,7 +54,7 @@ const config: ObjectIconConfig = {
       },
       halted: {
         icon: faStop,
-        color: '--color-danger-txt-base',
+        color: '--color-danger-item-base',
         translate: {
           x: [100, 136, 144],
           y: [65, 75, 90],
@@ -62,7 +62,7 @@ const config: ObjectIconConfig = {
       },
       suspended: {
         icon: faMoon,
-        color: '--color-normal-txt-item',
+        color: '--color-normal-item-base',
         translate: {
           x: [88, 130, 140],
           y: [65, 75, 90],
@@ -83,7 +83,7 @@ const config: ObjectIconConfig = {
     states: {
       running: {
         icon: faPlay,
-        color: '--color-success-txt-base',
+        color: '--color-success-item-base',
         translate: {
           x: [82, 122, 136],
           y: [66, 70, 90],
@@ -91,7 +91,7 @@ const config: ObjectIconConfig = {
       },
       halted: {
         icon: faStop,
-        color: '--color-danger-txt-base',
+        color: '--color-danger-item-base',
         translate: {
           x: [90, 122, 134],
           y: [65, 72, 85],
@@ -99,7 +99,7 @@ const config: ObjectIconConfig = {
       },
       maintenance: {
         icon: faTriangleExclamation,
-        color: '--color-warning-txt-base',
+        color: '--color-warning-item-base',
         translate: {
           x: [60, 88, 100],
           y: [68, 72, 82],
@@ -112,7 +112,7 @@ const config: ObjectIconConfig = {
     states: {
       connected: {
         icon: faCheckCircle,
-        color: '--color-success-txt-base',
+        color: '--color-success-item-base',
         translate: {
           x: [60, 90, 100],
           y: [65, 75, 90],
@@ -120,7 +120,7 @@ const config: ObjectIconConfig = {
       },
       'partially-connected': {
         icon: faCircleMinus,
-        color: '--color-warning-txt-base',
+        color: '--color-warning-item-base',
         translate: {
           x: [60, 90, 100],
           y: [65, 75, 90],
@@ -128,7 +128,7 @@ const config: ObjectIconConfig = {
       },
       disconnected: {
         icon: faCircleXmark,
-        color: '--color-danger-txt-base',
+        color: '--color-danger-item-base',
         translate: {
           x: [60, 90, 100],
           y: [65, 75, 90],
@@ -141,7 +141,7 @@ const config: ObjectIconConfig = {
     states: {
       connected: {
         icon: faCheckCircle,
-        color: '--color-success-txt-base',
+        color: '--color-success-item-base',
         translate: {
           x: [112, 130, 162],
           y: [74, 78, 102],
@@ -149,7 +149,7 @@ const config: ObjectIconConfig = {
       },
       disconnected: {
         icon: faCircleXmark,
-        color: '--color-danger-txt-base',
+        color: '--color-danger-item-base',
         translate: {
           x: [112, 130, 162],
           y: [74, 78, 102],
@@ -162,7 +162,7 @@ const config: ObjectIconConfig = {
     states: {
       connected: {
         icon: faCheckCircle,
-        color: '--color-success-txt-base',
+        color: '--color-success-item-base',
         translate: {
           x: [84, 110, 128],
           y: [66, 72, 88],
@@ -170,7 +170,7 @@ const config: ObjectIconConfig = {
       },
       disconnected: {
         icon: faCircleXmark,
-        color: '--color-danger-txt-base',
+        color: '--color-danger-item-base',
         translate: {
           x: [84, 110, 128],
           y: [66, 72, 88],
diff --git a/@xen-orchestra/web-core/lib/components/icon/UiIcon.vue b/@xen-orchestra/web-core/lib/components/icon/UiIcon.vue
index 6d8c62d5ffd..1260bb25e92 100644
--- a/@xen-orchestra/web-core/lib/components/icon/UiIcon.vue
+++ b/@xen-orchestra/web-core/lib/components/icon/UiIcon.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import UiSpinner from '@core/components/UiSpinner.vue'
-import type { Color } from '@core/types/color.type'
+import type { IconColor } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
@@ -14,29 +14,31 @@ defineProps<{
   busy?: boolean
   icon?: IconDefinition
   fixedWidth?: boolean
-  color?: Color
+  color: IconColor
 }>()
 </script>
 
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .ui-icon {
-  --color: currentColor;
+  &.current {
+    --color: currentColor;
+  }
 
-  &.info {
-    --color: var(--color-normal-txt-base);
+  &.normal {
+    --color: var(--color-normal-item-base);
   }
 
   &.success {
-    --color: var(--color-success-txt-base);
+    --color: var(--color-success-item-base);
   }
 
   &.warning {
-    --color: var(--color-warning-txt-base);
+    --color: var(--color-warning-item-base);
   }
 
-  &.error {
-    --color: var(--color-danger-txt-base);
+  &.danger {
+    --color: var(--color-danger-item-base);
   }
 }
 
diff --git a/@xen-orchestra/web-core/lib/components/icon/VmIcon.vue b/@xen-orchestra/web-core/lib/components/icon/VmIcon.vue
deleted file mode 100644
index 814d69a5ac8..00000000000
--- a/@xen-orchestra/web-core/lib/components/icon/VmIcon.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <FontAwesomeLayers class="vm-icon">
-    <UiIcon :icon="faDisplay" />
-    <PowerStateIcon :state class="state" />
-  </FontAwesomeLayers>
-</template>
-
-<script lang="ts" setup>
-import UiIcon from '@core/components/icon/UiIcon.vue'
-import PowerStateIcon from '@core/components/PowerStateIcon.vue'
-import type { POWER_STATE } from '@core/types/power-state.type'
-import { faDisplay } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
-
-defineProps<{
-  state: POWER_STATE
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.vm-icon {
-  flex-shrink: 0;
-}
-
-.state {
-  font-size: 0.7em;
-  transform: translate(80%, 70%);
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/input/UiInput.vue b/@xen-orchestra/web-core/lib/components/input/UiInput.vue
index f0aaf54e52c..8b12b64603e 100644
--- a/@xen-orchestra/web-core/lib/components/input/UiInput.vue
+++ b/@xen-orchestra/web-core/lib/components/input/UiInput.vue
@@ -1,9 +1,15 @@
 <!-- WIP -->
 <template>
   <div class="ui-input">
-    <UiIcon :icon class="before" />
+    <UiIcon :icon color="current" class="before" />
     <input :id v-model.trim="modelValue" class="typo p1-regular input" type="search" v-bind="$attrs" />
-    <UiIcon v-if="!$attrs.disabled && modelValue" :icon="faXmark" class="after" color="info" @click="modelValue = ''" />
+    <UiIcon
+      v-if="!$attrs.disabled && modelValue"
+      :icon="faXmark"
+      class="after"
+      color="normal"
+      @click="modelValue = ''"
+    />
   </div>
 </template>
 
@@ -36,23 +42,23 @@ const id = computed(() => uniqueId('input-'))
   }
 
   &:is(:hover, :focus-visible) {
-    --border-color: var(--color-normal-txt-hover);
+    --border-color: var(--color-normal-item-hover);
     --background-color: var(--color-neutral-background-primary);
   }
 
   &:focus {
-    --border-color: var(--color-normal-txt-base);
+    --border-color: var(--color-normal-item-base);
     --background-color: var(--color-neutral-background-primary);
   }
 
   &:active {
-    --border-color: var(--color-normal-txt-active);
+    --border-color: var(--color-normal-item-active);
     --background-color: var(--color-neutral-background-primary);
   }
 
   &:disabled {
     --border-color: var(--color-neutral-border);
-    --background-color: var(--color-neutral-background-secondary);
+    --background-color: var(--color-neutral-background-disabled);
   }
 }
 
diff --git a/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue b/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue
index 51b1f4c5c94..ce6bfef6d04 100644
--- a/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue
+++ b/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue
@@ -1,9 +1,9 @@
 <!-- v1.0 -->
 <template>
   <li :class="color" class="legend-item">
-    <UiIcon :icon="faCircle" class="circle-icon" />
+    <UiIcon :icon="faCircle" color="current" class="circle-icon" />
     <span class="label typo p3-regular"><slot /></span>
-    <UiIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" color="info" />
+    <UiIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" color="normal" />
     <span v-if="valueLabel" class="value-and-unit typo c3-semi-bold">{{ valueLabel }}</span>
   </li>
 </template>
@@ -36,7 +36,7 @@ const valueLabel = computed(() => [props.value, props.unit].join(' ').trim())
 /* COLOR VARIANTS */
 .legend-item {
   &.primary {
-    --circle-color: var(--color-normal-txt-base);
+    --circle-color: var(--color-normal-item-base);
   }
 
   &.secondary {
@@ -44,19 +44,19 @@ const valueLabel = computed(() => [props.value, props.unit].join(' ').trim())
   }
 
   &.success {
-    --circle-color: var(--color-success-txt-base);
+    --circle-color: var(--color-success-item-base);
   }
 
   &.warning {
-    --circle-color: var(--color-warning-txt-base);
+    --circle-color: var(--color-warning-item-base);
   }
 
   &.danger {
-    --circle-color: var(--color-danger-txt-base);
+    --circle-color: var(--color-danger-item-base);
   }
 
   &.disabled {
-    --circle-color: var(--color-neutral-txt-secondary);
+    --circle-color: var(--color-neutral-background-disabled);
   }
 }
 
diff --git a/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue b/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue
index 03e2df5d508..a7dad342304 100644
--- a/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue
+++ b/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue
@@ -11,11 +11,11 @@
     >
       <slot />
     </MenuTrigger>
-    <MenuList v-else :disabled="isDisabled" shadow>
+    <MenuList v-else :disabled="isDisabled" border>
       <template #trigger="{ open, isOpen }">
         <MenuTrigger :active="isOpen" :busy="isBusy" :disabled="isDisabled" :icon @click="open">
           <slot />
-          <UiIcon :fixed-width="false" :icon="submenuIcon" class="submenu-icon" />
+          <UiIcon :fixed-width="false" :icon="submenuIcon" color="current" class="submenu-icon" />
         </MenuTrigger>
       </template>
       <slot name="submenu" />
diff --git a/@xen-orchestra/web-core/lib/components/menu/MenuList.vue b/@xen-orchestra/web-core/lib/components/menu/MenuList.vue
index 7e90deb5ca5..e3e28ee3f87 100644
--- a/@xen-orchestra/web-core/lib/components/menu/MenuList.vue
+++ b/@xen-orchestra/web-core/lib/components/menu/MenuList.vue
@@ -2,7 +2,7 @@
 <template>
   <slot :is-open="isOpen" :open="open" name="trigger" />
   <Teleport :disabled="!shouldTeleport" to="body">
-    <ul v-if="!hasTrigger || isOpen" ref="menu" :class="{ horizontal, shadow }" class="menu-list" v-bind="$attrs">
+    <ul v-if="!hasTrigger || isOpen" ref="menu" :class="{ horizontal, border }" class="menu-list" v-bind="$attrs">
       <slot />
     </ul>
   </Teleport>
@@ -23,7 +23,7 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     horizontal?: boolean
-    shadow?: boolean
+    border?: boolean
     disabled?: boolean
     placement?: Options['placement']
   }>(),
@@ -88,17 +88,17 @@ const open = (event: MouseEvent) => {
   flex-direction: column;
   padding: 0.4rem;
   cursor: default;
-  color: var(--color-neutral-txt-secondary);
+  color: var(--color-neutral-txt-primary);
   border-radius: 0.4rem;
-  background-color: var(--color-normal-txt-item);
+  background-color: var(--color-neutral-background-primary);
   gap: 0.2rem;
 
   &.horizontal {
     flex-direction: row;
   }
 
-  &.shadow {
-    box-shadow: var(--shadow-300);
+  &.border {
+    border: 0.1rem solid var(--color-neutral-border);
   }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/menu/MenuTrigger.vue b/@xen-orchestra/web-core/lib/components/menu/MenuTrigger.vue
index ddd768661e2..f6971427145 100644
--- a/@xen-orchestra/web-core/lib/components/menu/MenuTrigger.vue
+++ b/@xen-orchestra/web-core/lib/components/menu/MenuTrigger.vue
@@ -1,7 +1,7 @@
 <!-- v1.0 -->
 <template>
   <div :class="{ active, disabled }" class="menu-trigger">
-    <UiIcon :busy="busy" :icon="icon" />
+    <UiIcon :busy :icon color="current" />
     <slot />
   </div>
 </template>
@@ -30,10 +30,10 @@ defineProps<{
   white-space: nowrap;
   border-radius: 0.8rem;
   gap: 1rem;
-  background-color: var(--color-normal-txt-item);
+  background-color: var(--color-neutral-background-primary);
 
   &.disabled {
-    color: var(--color-neutral-border);
+    color: var(--color-neutral-txt-secondary);
   }
 
   &:not(.disabled) {
diff --git a/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue b/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue
index 74f4430dae3..f6275889c01 100644
--- a/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue
+++ b/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue
@@ -3,7 +3,7 @@
   <RouterLink v-if="route && !disabled" :to="route" class="object-link is-link typo p3-medium">
     <span class="icon">
       <slot name="icon">
-        <UiIcon :icon />
+        <UiIcon :icon color="current" />
       </slot>
     </span>
     <span v-tooltip class="content text-ellipsis">
@@ -13,7 +13,7 @@
   <span v-else :class="{ disabled }" class="object-link typo p3-medium">
     <span class="icon">
       <slot name="icon">
-        <UiIcon :icon />
+        <UiIcon :icon color="current" />
       </slot>
     </span>
     <slot />
diff --git a/@xen-orchestra/web-core/lib/components/query-search-bar/QuerySearchBar.vue b/@xen-orchestra/web-core/lib/components/query-search-bar/QuerySearchBar.vue
index 2a1dff3b8ca..bccd5399ee0 100644
--- a/@xen-orchestra/web-core/lib/components/query-search-bar/QuerySearchBar.vue
+++ b/@xen-orchestra/web-core/lib/components/query-search-bar/QuerySearchBar.vue
@@ -12,9 +12,16 @@
       :placeholder="$t('core.query-search-bar.placeholder')"
     />
     <template v-if="uiStore.isDesktop">
-      <UiButton type="submit">{{ $t('core.search') }}</UiButton>
+      <UiButton size="medium" color="normal" level="primary" type="submit">{{ $t('core.search') }}</UiButton>
       <Divider type="stretch" />
-      <UiButton v-tooltip="$t('coming-soon')" level="secondary" :left-icon="faFilter" disabled>
+      <UiButton
+        v-tooltip="$t('coming-soon')"
+        size="medium"
+        color="normal"
+        level="secondary"
+        :left-icon="faFilter"
+        disabled
+      >
         {{ $t('core.query-search-bar.use-query-builder') }}
       </UiButton>
     </template>
diff --git a/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBar.vue b/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBar.vue
index e8dbb26a94b..406877ce18b 100644
--- a/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBar.vue
+++ b/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBar.vue
@@ -38,6 +38,6 @@ const max = computed(() => Math.max(props.maxValue ?? 0, totalValue.value))
   height: 4rem;
   border-radius: 0.8rem;
   overflow: hidden;
-  background-color: var(--color-normal-background-selected);
+  background-color: var(--color-neutral-background-disabled);
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBarSegment.vue b/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBarSegment.vue
index 161f8bb6516..f14c47e4223 100644
--- a/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBarSegment.vue
+++ b/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBarSegment.vue
@@ -38,19 +38,19 @@ useResizeObserver(ellipsisElement, ([entry]) => {
 /* COLOR VARIANT */
 .stacked-bar-segment {
   &.primary {
-    --background-color: var(--color-normal-txt-base);
+    --background-color: var(--color-normal-item-base);
   }
 
   &.success {
-    --background-color: var(--color-success-txt-base);
+    --background-color: var(--color-success-item-base);
   }
 
   &.warning {
-    --background-color: var(--color-warning-txt-base);
+    --background-color: var(--color-warning-item-base);
   }
 
   &.danger {
-    --background-color: var(--color-danger-txt-base);
+    --background-color: var(--color-danger-item-base);
   }
 }
 
@@ -62,6 +62,7 @@ useResizeObserver(ellipsisElement, ([entry]) => {
   white-space: nowrap;
   color: var(--color-normal-txt-item);
   background-color: var(--background-color);
+  padding-inline: 0.8rem;
 }
 
 .hidden {
diff --git a/@xen-orchestra/web-core/lib/components/tab/TabItem.vue b/@xen-orchestra/web-core/lib/components/tab/TabItem.vue
index d50bcb711b6..1479dc4b256 100644
--- a/@xen-orchestra/web-core/lib/components/tab/TabItem.vue
+++ b/@xen-orchestra/web-core/lib/components/tab/TabItem.vue
@@ -47,19 +47,19 @@ const classNames = computed(() => {
 
   &:is(:hover, .hover, :focus-visible) {
     --color: var(--color-neutral-txt-primary);
-    --border-color: var(--color-normal-txt-hover);
+    --border-color: var(--color-normal-item-hover);
     --background-color: var(--color-normal-background-hover);
   }
 
   &:is(:active, .pressed) {
     --color: var(--color-neutral-txt-primary);
-    --border-color: var(--color-normal-txt-active);
+    --border-color: var(--color-normal-item-active);
     --background-color: var(--color-normal-background-active);
   }
 
   &:is(.active, .selected) {
     --color: var(--color-neutral-txt-primary);
-    --border-color: var(--color-normal-txt-base);
+    --border-color: var(--color-normal-item-base);
     --background-color: var(--color-normal-background-selected);
   }
 
diff --git a/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue b/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
index bedb6589706..8d9cdf600df 100644
--- a/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
+++ b/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
@@ -1,6 +1,6 @@
 <!-- v1.0 -->
 <template>
-  <MenuList :disabled placement="bottom-start" shadow>
+  <MenuList :disabled placement="bottom-start" border>
     <template #trigger="{ open, isOpen }">
       <th
         :class="{ interactive, disabled, focus: isOpen }"
@@ -9,10 +9,10 @@
       >
         <div class="content">
           <span class="label">
-            <UiIcon :icon />
+            <UiIcon :icon color="current" />
             <slot />
           </span>
-          <UiIcon :icon="currentInteraction?.icon" />
+          <UiIcon :icon="currentInteraction?.icon" color="current" />
         </div>
       </th>
     </template>
@@ -23,7 +23,8 @@
       :disabled="interaction.disabled"
       :on-click="() => updateInteraction(interaction)"
     >
-      <UiIcon :icon="interaction.icon" />{{ interaction.label }}
+      <UiIcon :icon="interaction.icon" color="current" />
+      {{ interaction.label }}
       <i v-if="currentInteraction?.id === interaction.id" class="current-interaction typo p3-regular-italic">
         {{ $t('core.current').toLowerCase() }}
       </i>
@@ -114,14 +115,16 @@ const updateInteraction = (interaction: Interaction) => {
 
   &.disabled {
     --color: var(--color-neutral-txt-secondary);
-    --background-color: var(--color-neutral-background-secondary);
+    --background-color: var(--color-neutral-background-disabled);
   }
 }
+
 /* IMPLEMENTATION */
 .column-header.interactive {
   cursor: pointer;
   color: var(--color);
   background-color: var(--background-color);
+
   &.disabled {
     cursor: not-allowed;
   }
diff --git a/@xen-orchestra/web-core/lib/components/task/QuickTaskItem.vue b/@xen-orchestra/web-core/lib/components/task/QuickTaskItem.vue
index a2fcd7f1690..5110e2b0f79 100644
--- a/@xen-orchestra/web-core/lib/components/task/QuickTaskItem.vue
+++ b/@xen-orchestra/web-core/lib/components/task/QuickTaskItem.vue
@@ -9,16 +9,16 @@
       </div>
       <div class="informations">
         <div class="line-1">
-          <UiTag v-if="task.tag" color="grey">{{ task.tag }}</UiTag>
+          <UiTag v-if="task.tag" color="secondary">{{ task.tag }}</UiTag>
           <div v-if="hasSubTasks" class="subtasks">
-            <UiIcon :icon="faCircleNotch" />
+            <UiIcon :icon="faCircleNotch" color="current" />
             <span class="typo p4-medium">{{ $t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
           </div>
         </div>
         <div v-if="task.start" class="line-2 typo p4-regular">
           {{ $d(task.start, 'datetime_short') }}
           <template v-if="task.end">
-            <UiIcon :icon="faArrowRight" />
+            <UiIcon :icon="faArrowRight" color="current" />
             {{ $d(new Date(task.end), 'datetime_short') }}
           </template>
         </div>
diff --git a/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue b/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue
index bf11100e8a7..64471bdad6a 100644
--- a/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue
+++ b/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue
@@ -2,7 +2,7 @@
   <TabList :disabled="loading">
     <TabItem v-bind="tabs.pending.bindings">
       {{ $t('tasks.quick-view.in-progress') }}
-      <UiCounter v-if="pendingCount !== undefined" :value="pendingCount" color="info" />
+      <UiCounter v-if="pendingCount !== undefined" :value="pendingCount" color="primary" />
     </TabItem>
     <TabItem v-bind="tabs.success.bindings">
       {{ $t('tasks.quick-view.done') }}
diff --git a/@xen-orchestra/web-core/lib/components/tooltip/TooltipItem.vue b/@xen-orchestra/web-core/lib/components/tooltip/TooltipItem.vue
index 2b8f27f3639..7ac3dcf869e 100644
--- a/@xen-orchestra/web-core/lib/components/tooltip/TooltipItem.vue
+++ b/@xen-orchestra/web-core/lib/components/tooltip/TooltipItem.vue
@@ -62,7 +62,7 @@ watch(content, () => updatePlacement(), { flush: 'post' })
   display: inline-flex;
   padding: 0.4rem 0.8rem;
   pointer-events: none;
-  color: var(--color-normal-txt-item);
+  color: var(--color-neutral-background-primary);
   border-radius: 0.4rem;
   background-color: var(--color-neutral-txt-primary);
   z-index: 999999;
diff --git a/@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue b/@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue
index 0528ca89542..4c15b607164 100644
--- a/@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue
+++ b/@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue
@@ -26,7 +26,7 @@
       <div v-else class="h-line" />
       <a v-tooltip="{ selector: '.text' }" :href class="link typo p2-medium" @click="navigate">
         <slot name="icon">
-          <UiIcon :icon class="icon" />
+          <UiIcon :icon color="current" class="icon" />
         </slot>
         <div class="text text-ellipsis">
           <slot />
diff --git a/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue b/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue
index c37156a472b..0df9c70f88d 100644
--- a/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue
+++ b/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue
@@ -6,7 +6,7 @@
         <template v-if="depth > 1">
           <TreeLine v-for="i in depth - 1" :key="i" :right="i === depth - 1" full-height />
         </template>
-        <UiIcon :icon class="icon" />
+        <UiIcon :icon color="current" />
         <div class="loader">&nbsp;</div>
       </div>
     </div>
@@ -34,10 +34,6 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
   background-color: var(--color-neutral-background-primary);
 }
 
-.icon {
-  color: var(--color-neutral-txt-primary);
-}
-
 .link-placeholder {
   display: flex;
   align-items: center;
diff --git a/@xen-orchestra/web-core/lib/types/button.type.ts b/@xen-orchestra/web-core/lib/types/button.type.ts
index 114b65d40e0..f0f49e06eb8 100644
--- a/@xen-orchestra/web-core/lib/types/button.type.ts
+++ b/@xen-orchestra/web-core/lib/types/button.type.ts
@@ -1,3 +1,3 @@
 export type ButtonLevel = 'primary' | 'secondary' | 'tertiary'
 
-export type ButtonSize = 'extra-small' | 'small' | 'medium'
+export type ButtonSize = 'small' | 'medium' | 'large'
diff --git a/@xen-orchestra/web-core/lib/types/color.type.ts b/@xen-orchestra/web-core/lib/types/color.type.ts
index 46607043b26..271d492b4fb 100644
--- a/@xen-orchestra/web-core/lib/types/color.type.ts
+++ b/@xen-orchestra/web-core/lib/types/color.type.ts
@@ -1,5 +1,7 @@
-export type Color = 'info' | 'error' | 'danger' | 'warning' | 'success'
+export type Color = 'normal' | 'success' | 'warning' | 'danger'
 
-export type CounterColor = Color | 'black'
+export type IconColor = 'current' | 'normal' | 'success' | 'warning' | 'danger'
 
-export type TagColor = Color | 'grey'
+export type CounterColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
+
+export type TagColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
diff --git a/@xen-orchestra/web/src/components/account-menu/AccountMenu.vue b/@xen-orchestra/web/src/components/account-menu/AccountMenu.vue
index dd918ec8637..37a321632e9 100644
--- a/@xen-orchestra/web/src/components/account-menu/AccountMenu.vue
+++ b/@xen-orchestra/web/src/components/account-menu/AccountMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <MenuList :disabled placement="bottom-end">
+  <MenuList border :disabled placement="bottom-end">
     <template #trigger="{ isOpen, open }">
       <AccountMenuTrigger :active="isOpen" @click="open($event)" />
     </template>
diff --git a/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue b/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue
index 5f52eaa6a2e..4d9d04ffc54 100644
--- a/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue
+++ b/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue
@@ -6,7 +6,7 @@
     type="button"
   >
     <UserLogo class="logo" size="medium" />
-    <UiIcon :icon="faAngleDown" class="icon" color="info" />
+    <UiIcon :icon="faAngleDown" class="icon" color="normal" />
   </button>
 </template>
 
diff --git a/@xen-orchestra/web/src/components/tree/HostTreeItem.vue b/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
index 7728b1915e1..405ea366823 100644
--- a/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
+++ b/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
@@ -11,7 +11,7 @@
       </template>
       <template #addons>
         <UiIcon v-if="isMaster" v-tooltip="$t('master')" :icon="faStar" color="warning" />
-        <UiCounter v-tooltip="$t('running-vm', runningVmsCount)" :value="runningVmsCount" color="info" />
+        <UiCounter v-tooltip="$t('running-vm', runningVmsCount)" :value="runningVmsCount" color="primary" />
       </template>
     </TreeItemLabel>
     <template v-if="branch.hasChildren" #sublist>
diff --git a/@xen-orchestra/web/src/components/tree/PoolTreeItem.vue b/@xen-orchestra/web/src/components/tree/PoolTreeItem.vue
index a26ae4d045a..b7e92c99f94 100644
--- a/@xen-orchestra/web/src/components/tree/PoolTreeItem.vue
+++ b/@xen-orchestra/web/src/components/tree/PoolTreeItem.vue
@@ -3,7 +3,7 @@
     <TreeItemLabel :icon="faCity" :route="`/pool/${branch.data.id}`" @toggle="branch.toggleExpand()">
       {{ branch.data.name_label }}
       <template #addons>
-        <UiCounter v-tooltip="$t('running-vm', runningVmsCount)" :value="runningVmsCount" color="info" />
+        <UiCounter v-tooltip="$t('running-vm', runningVmsCount)" :value="runningVmsCount" color="primary" />
       </template>
     </TreeItemLabel>
     <template v-if="branch.hasChildren" #sublist>
diff --git a/@xen-orchestra/web/src/layouts/AppLayout.vue b/@xen-orchestra/web/src/layouts/AppLayout.vue
index 7d750ef8dbb..2bd1db92b57 100644
--- a/@xen-orchestra/web/src/layouts/AppLayout.vue
+++ b/@xen-orchestra/web/src/layouts/AppLayout.vue
@@ -6,7 +6,15 @@
       </RouterLink>
     </template>
     <template #app-header>
-      <UiButton :right-icon="faArrowUpRightFromSquare" level="tertiary" @click="openUrl('/', true)">XO 5</UiButton>
+      <UiButton
+        size="medium"
+        color="normal"
+        :right-icon="faArrowUpRightFromSquare"
+        level="tertiary"
+        @click="openUrl('/', true)"
+      >
+        XO 5
+      </UiButton>
       <QuickTaskButton />
       <AccountMenu />
     </template>