diff --git a/app/assets/stylesheets/tailwind/buttons.css b/app/assets/stylesheets/tailwind/buttons.css
index 47bccef221..6d43ec0424 100644
--- a/app/assets/stylesheets/tailwind/buttons.css
+++ b/app/assets/stylesheets/tailwind/buttons.css
@@ -3,35 +3,67 @@
     @apply inline-flex items-center gap-2 relative;
   }
 
+  /* Medium (default). Size, radius, icon size and icon-aware padding follow
+     the Core Design system spec and are identical across all button types. */
   .btn {
-    @apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center px-4 rounded border border-solid appearance-none whitespace-nowrap cursor-pointer h-[40px];
+    @apply relative inline-flex items-center text-sm shrink-0 gap-[6px] justify-center px-4 rounded-lg border border-solid appearance-none whitespace-nowrap cursor-pointer h-[40px];
     border-color: transparent;
   }
 
+  /* Icon-aware padding: a leading (left) icon gets less padding on its side than
+     the text side. Buttons in this system only ever have a left icon or no icon,
+     so matching the first child is enough — no label wrapper or side class needed. */
+  .btn:not(.icon-btn):has(> .sn-icon:first-child) {
+    @apply pl-2;
+  }
+
   .btn.icon-btn {
     @apply px-2 ;
   }
 
   .btn.btn-lg {
-    @apply px-[1.125rem] text-base h-[44px];
+    @apply px-6 text-base h-[44px] gap-2;
+  }
+
+  .btn.btn-lg:not(.icon-btn):has(> .sn-icon:first-child) {
+    @apply pl-4;
   }
 
+
   .btn.btn-lg.icon-btn {
     @apply px-2.5;
   }
 
   .btn.btn-sm {
-    @apply px-2.5 text-xs h-[36px];
+    @apply px-3 text-xs h-[36px] gap-1;
+  }
+
+  .btn.btn-sm .sn-icon {
+    @apply !text-[20px];
   }
 
+  .btn.btn-sm:not(.icon-btn):has(> .sn-icon:first-child) {
+    @apply pl-2;
+  }
+
+
   .btn.btn-sm.icon-btn {
-    @apply px-1.5;
+    @apply px-2;
   }
 
   .btn.btn-xs {
-    @apply px-2.5 text-xs h-[30px];
+    @apply px-2 text-xs h-[30px] gap-1;
+  }
+
+  .btn.btn-xs .sn-icon {
+    @apply !text-[16px];
   }
 
+  .btn.btn-xs:not(.icon-btn):has(> .sn-icon:first-child) {
+    @apply pl-1.5;
+  }
+
+
   .btn.btn-xs.icon-btn {
     @apply px-0.5 w-[30px];
   }
diff --git a/app/views/design_elements/_button.html.erb b/app/views/design_elements/_button.html.erb
index 8069b0f0f0..b126776464 100644
--- a/app/views/design_elements/_button.html.erb
+++ b/app/views/design_elements/_button.html.erb
@@ -33,10 +33,6 @@
               <i class="sn-icon sn-icon-<%= icons_list.sample %>"></i>
               Button
             </button>
-            <button class="btn <%= type_class %> <%= size_class %>">
-              Button
-              <i class="sn-icon sn-icon-<%= icons_list.sample %>"></i>
-            </button>
             <button class="btn <%= type_class %> <%= size_class %>" disabled="true">
               Button
             </button>