diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index fffff130..ae660854 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -22,7 +22,7 @@
 					"focus-visible:outline-background-success-emphasis"
 				],
 				ghost: [
-					"border border-transparent bg-transparent text-foreground-muted",
+					"border border-transparent bg-transparent",
 					"hover:bg-background-inset",
 					"focus-visible:outline-border-focus"
 				],
@@ -45,8 +45,8 @@
 				]
 			},
 			size: {
-				sm: "min-h-8 gap-1.5 px-2 py-1.5 text-sm",
-				md: "min-h-9 gap-2 px-3 py-1.5 text-sm",
+				sm: "min-h-8 gap-1.5 px-2 py-1.5 typography-paragraph-small",
+				md: "min-h-9 gap-2 px-3 py-1.5 typography-paragraph-regular",
 				lg: "min-h-10 gap-2.5 px-4 py-2 typography-paragraph-large"
 			},
 			insetShadow: {
@@ -61,7 +61,7 @@
 				variant: "default",
 				insetShadow: true,
 				class: [
-					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150 before:content-['']",
+					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] dark:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150 before:content-['']",
 					"hover:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-strong-hover)]",
 					"active:*:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)]",
 					"disabled:active:*:translate-y-0"
@@ -71,8 +71,8 @@
 				variant: "primary",
 				insetShadow: true,
 				class: [
-					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-alpha-dark-25)] before:transition-all before:duration-150 before:content-['']",
-					"active:*:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-dark-50)]",
+					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-alpha-dark-25)] dark:before:shadow-[inset_0_-2px_0_0_var(--color-alpha-light-25)] before:transition-all before:duration-150 before:content-['']",
+					"active:*:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-dark-50)] dark:active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-light-50)]",
 					"disabled:active:*:translate-y-0"
 				]
 			}