frontend/src/assets/components.css

@@ -105,10 +105,33 @@
   background: var(--color-action-destructive-hover);
 }
 
-/* --- size modifiers ------------------------------------------------------ */
+/* --- size modifiers ------------------------------------------------------
+ *
+ * THREE sizes, because the app genuinely has three. Measured across the ~100
+ * bespoke button rules before this scale existed, vertical padding fell into
+ * clusters rather than a spread: ~27 at 0.4–0.45rem, ~28 at 0.25–0.3rem, ~23
+ * at 0.1–0.15rem. Those are three different components — a page action, a row
+ * action, and an affordance living inside a card — that happen to share a name
+ * prefix. Collapsing them to one size would visibly break the card layouts.
+ *
+ * A button carries its size modifier; the DEFAULT (no modifier) is the page
+ * action, which is the one the house style specifies.
+ */
 
-.btn-small,
+/* Row actions: a toolbar, a table row, a list item's controls. */
+.btn-compact,
+.btn-small,          /* pre-existing spellings, kept so no template churns */
 .btn-sm {
   padding: var(--fs-space-1) var(--fs-space-3);   /* 4px 12px */
   font-size: var(--fs-size-tiny);
 }
+
+/* Inline affordances: a dismiss ×, a confirm tick, an add-chip — things that
+ * sit INSIDE a line of text or a card and must not disturb its rhythm. Below
+ * the spacing scale's first step on the vertical axis by necessity: 4px of
+ * padding on a 11px label already exceeds the line box these live in. */
+.btn-inline {
+  padding: 2px var(--fs-space-1);                 /* 2px 4px */
+  font-size: var(--fs-size-tiny);
+  line-height: 1;
+}

frontend/src/views/DesignView.vue

@@ -237,7 +237,16 @@ const TYPE_SPECIMENS = [
         <button class="btn-ghost">Cancel</button>
         <button class="btn-danger">Delete</button>
         <button class="btn-primary" disabled>Disabled</button>
-        <button class="btn-ghost btn-small">Small</button>
+      </div>
+      <p class="spec-caption">
+        Three sizes, because the app has three kinds of button: a page action, a
+        row action, and an affordance that sits inside a card without disturbing
+        its rhythm.
+      </p>
+      <div class="button-specimens">
+        <button class="btn-primary">Default — page action</button>
+        <button class="btn-primary btn-compact">Compact — row action</button>
+        <button class="btn-primary btn-inline">Inline</button>
       </div>
       <ul class="spec-list">
         <li v-for="b in RULEBOOK_BUTTONS" :key="b.name">
@@ -361,6 +370,14 @@ const TYPE_SPECIMENS = [
 
 /* Gaps ------------------------------------------------------------------- */
 
+.spec-caption {
+  margin: 0 0 0.75rem;
+  color: var(--color-text-secondary);
+  font-size: 0.85rem;
+  line-height: 1.5;
+  max-width: 60ch;
+}
+
 /* Layout only. The buttons inside style themselves from the shared sheet —
    adding any appearance rule here would recreate the copy this section
    just stopped being. */