diff --git a/packages/histoire-controls/src/components/checkbox/HstCheckbox.vue b/packages/histoire-controls/src/components/checkbox/HstCheckbox.vue
index 6e994f55..2c1f0f54 100644
--- a/packages/histoire-controls/src/components/checkbox/HstCheckbox.vue
+++ b/packages/histoire-controls/src/components/checkbox/HstCheckbox.vue
@@ -51,7 +51,7 @@ watch(path, value => {
         :class="[
           modelValue
             ? 'htw-border-primary-500 htw-border-8'
-            : 'htw-border-gray-300 dark:htw-border-gray-500 htw-delay-150',
+            : 'htw-border-black/25 dark:htw-border-white/25 htw-delay-150',
         ]"
       />
       <svg
diff --git a/packages/histoire-controls/src/components/number/HstNumber.vue b/packages/histoire-controls/src/components/number/HstNumber.vue
index e0ee807e..3ded3371 100644
--- a/packages/histoire-controls/src/components/number/HstNumber.vue
+++ b/packages/histoire-controls/src/components/number/HstNumber.vue
@@ -86,7 +86,7 @@ onUnmounted(() => {
       :class="{
         'htw-select-none': isDragging,
       }"
-      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-gray-300 dark:htw-border-gray-500 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize"
+      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize"
     >
   </HstWrapper>
 </template>
diff --git a/packages/histoire-controls/src/components/text/HstText.vue b/packages/histoire-controls/src/components/text/HstText.vue
index 2de38bd9..37da1424 100644
--- a/packages/histoire-controls/src/components/text/HstText.vue
+++ b/packages/histoire-controls/src/components/text/HstText.vue
@@ -33,7 +33,7 @@ const input = ref<HTMLInputElement>()
       v-bind="{ ...$attrs, class: null, style: null }"
       type="text"
       :value="modelValue"
-      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-gray-300 dark:htw-border-gray-500 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm"
+      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm"
       @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     >
   </HstWrapper>
diff --git a/packages/histoire-controls/src/components/textarea/HstTextarea.vue b/packages/histoire-controls/src/components/textarea/HstTextarea.vue
index f655a8f7..c7da0aa9 100644
--- a/packages/histoire-controls/src/components/textarea/HstTextarea.vue
+++ b/packages/histoire-controls/src/components/textarea/HstTextarea.vue
@@ -33,7 +33,7 @@ const input = ref<HTMLInputElement>()
       ref="input"
       v-bind="{ ...$attrs, class: null, style: null }"
       :value="modelValue"
-      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-gray-300 dark:htw-border-gray-500 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-box-border htw-resize-y htw-min-h-[26px]"
+      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-box-border htw-resize-y htw-min-h-[26px]"
       @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     />
   </HstWrapper>
diff --git a/packages/histoire/src/client/app/components/base/BaseCheckbox.vue b/packages/histoire/src/client/app/components/base/BaseCheckbox.vue
index 3cc82d3d..32788159 100644
--- a/packages/histoire/src/client/app/components/base/BaseCheckbox.vue
+++ b/packages/histoire/src/client/app/components/base/BaseCheckbox.vue
@@ -45,7 +45,7 @@ watch(path, value => {
         :class="[
           modelValue
             ? 'htw-border-primary-500 htw-border-8'
-            : 'htw-border-gray-300 dark:htw-border-gray-500 htw-delay-150',
+            : 'htw-border-black/25 dark:htw-border-white/25 htw-delay-150',
         ]"
       />
       <svg