diff --git a/src/components/ui/Checkbox.vue b/src/components/ui/Checkbox.vue
index 355ffb3..7a7c85d 100644
--- a/src/components/ui/Checkbox.vue
+++ b/src/components/ui/Checkbox.vue
@@ -13,7 +13,7 @@ defineEmits(['update:modelValue'])
 
 const classes = computed(() => {
   return cn(
-    'peer size-4 shrink-0 rounded border border-input shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=indeterminate]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground',
+    'peer size-4 shrink-0 rounded-sm border border-input shadow-xs shadow-black/[.04] ring-offset-background transition-shadow focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-64 data-[state=checked]:border-primary data-[state=indeterminate]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground',
     props.class
   )
 })
diff --git a/src/components/ui/Input.vue b/src/components/ui/Input.vue
index 0b3706e..2900155 100644
--- a/src/components/ui/Input.vue
+++ b/src/components/ui/Input.vue
@@ -37,7 +37,7 @@ const onInput = (event: Event) => {
 
 const computedClass = computed(() => {
   return cn(
-    'border-input file:text-foreground placeholder:text-muted-foreground/70 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+    'border-input file:text-foreground placeholder:text-muted-foreground/72 flex h-9 w-full min-w-0 rounded-lg border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64',
     'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
     'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
     props.type === 'search' &&
diff --git a/src/components/ui/SelectNative.vue b/src/components/ui/SelectNative.vue
index ccad421..234bc12 100644
--- a/src/components/ui/SelectNative.vue
+++ b/src/components/ui/SelectNative.vue
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const selectClass = computed(() => {
   return cn(
-    'peer inline-flex w-full cursor-pointer appearance-none items-center rounded-lg border border-input bg-background text-sm text-foreground shadow-xs shadow-black/5 transition-shadow focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 has-[option[disabled]:checked]:text-muted-foreground',
+    'peer inline-flex w-full cursor-pointer appearance-none items-center rounded-lg border border-input bg-background text-sm text-foreground shadow-xs shadow-black/5 transition-shadow focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64 has-[option[disabled]:checked]:text-muted-foreground',
     props.multiple ? 'py-1 *:px-3 *:py-1 [&_option:checked]:bg-accent' : 'h-9 pe-8 ps-3',
     props.class
   )
@@ -37,7 +37,7 @@ const emit = defineEmits(['update:modelValue'])
     </select>
     <span
       v-if="!multiple"
-      class="pointer-events-none absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-50"
+      class="pointer-events-none absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-64"
     >
       <ChevronDown :size="16" :stroke-width="2" aria-hidden="true" />
     </span>
diff --git a/src/components/ui/Slider.vue b/src/components/ui/Slider.vue
index c9a6fcd..68023ed 100644
--- a/src/components/ui/Slider.vue
+++ b/src/components/ui/Slider.vue
@@ -127,7 +127,7 @@ const renderThumb = (value: number) => {
       cn(
         'relative flex w-full touch-none select-none items-center',
         'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-        'data-disabled:opacity-50',
+        'data-disabled:opacity-64',
         props.class
       )
     "
diff --git a/src/components/ui/Switch.vue b/src/components/ui/Switch.vue
index 83d47ab..4df31cb 100644
--- a/src/components/ui/Switch.vue
+++ b/src/components/ui/Switch.vue
@@ -12,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const classes = computed(() => {
   return cn(
-    'peer inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+    'peer inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-64 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
     props.class
   )
 })
diff --git a/src/components/ui/Textarea.vue b/src/components/ui/Textarea.vue
index 5e4f2a5..f0e7c70 100644
--- a/src/components/ui/Textarea.vue
+++ b/src/components/ui/Textarea.vue
@@ -14,7 +14,7 @@ const { class: extraClasses } = toRefs(props)
 
 const classes = computed(() =>
   cn(
-    'border-input placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex min-h-19.5 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+    'border-input placeholder:text-muted-foreground/72 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex min-h-19.5 w-full rounded-lg border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-64',
     extraClasses.value
   )
 )
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index af9c2a0..65c91db 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -39,15 +39,22 @@ export const buttonVariants = cva(
   }
 );
 
+// Badge styling adapted from the COSS design system (packages/ui/src/components/badge.tsx):
+// squared-off (rounded-sm) badges plus soft info/success/warning/error variants that
+// use the new semantic tokens.
 export const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-full border px-1.5 text-xs font-medium leading-normal transition-colors outline-offset-2 focus-visible:outline-2 focus-visible:outline-ring/70',
+  "relative inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-sm border border-transparent px-1.5 text-xs font-medium leading-normal outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground',
-        destructive: 'border-transparent bg-destructive text-destructive-foreground',
-        outline: 'text-foreground'
+        default: 'bg-primary text-primary-foreground',
+        secondary: 'bg-secondary text-secondary-foreground',
+        destructive: 'bg-destructive text-white',
+        outline: 'border-input bg-background text-foreground dark:bg-input/32',
+        error: 'bg-destructive/8 text-destructive-foreground dark:bg-destructive/16',
+        info: 'bg-info/8 text-info-foreground dark:bg-info/16',
+        success: 'bg-success/8 text-success-foreground dark:bg-success/16',
+        warning: 'bg-warning/8 text-warning-foreground dark:bg-warning/16'
       }
     },
     defaultVariants: {