diff --git a/web/src/components/ui/Primitives.tsx b/web/src/components/ui/Primitives.tsx
index 47a6788..bc04df5 100644
--- a/web/src/components/ui/Primitives.tsx
+++ b/web/src/components/ui/Primitives.tsx
@@ -76,20 +76,20 @@ export type ProductStatus =
   | 'warning';
 
 const buttonSizeClass: Record<ProductButtonSize, string> = {
-  sm: '',
-  md: '',
-  lg: '',
+  sm: 'min-h-9 px-3 text-xs leading-none',
+  md: 'min-h-11 px-4 text-sm leading-none',
+  lg: 'min-h-12 px-5 text-sm leading-none',
   icon: 'h-10 w-10 px-0',
 };
 
 const fieldSizeClass: Record<ProductFieldSize, string> = {
-  sm: 'min-h-8 px-2 py-1 text-xs',
-  md: '',
+  sm: 'min-h-9 px-3 py-2 text-xs leading-5',
+  md: 'min-h-11 px-3.5 py-2.5 text-sm leading-6',
 };
 
 const fieldVariantClass: Record<ProductFieldVariant, string> = {
-  surface: 'bg-[var(--card)] border-[var(--border)] text-[var(--foreground)]',
-  muted: 'bg-[var(--muted)] border-[var(--border)] text-[var(--foreground)]',
+  surface: 'rounded-[var(--bl-radius-control)] border-[var(--border)] bg-[var(--input)] text-[var(--foreground)] shadow-sm shadow-black/[0.02] focus-visible:border-[var(--ring)] focus-visible:ring-2 focus-visible:ring-[var(--ring-soft)]',
+  muted: 'rounded-[var(--bl-radius-control)] border-[var(--border)] bg-[var(--muted)] text-[var(--foreground)] shadow-sm shadow-black/[0.02] focus-visible:border-[var(--ring)] focus-visible:ring-2 focus-visible:ring-[var(--ring-soft)]',
 };
 
 const productStatusTone: Record<ProductStatus, ProductStatusTone> = {