The default button read as the biggest control on the page because its
padding came from --gl-space-xs/-s. Those are layout gaps and they are
fluid, so on a wide viewport the default grew to 48px tall while the
`lg` size — sized with fixed literals — stayed at 47px. The ramp ran
28 / 48 / 47.

Put the default on the same fixed ramp as its neighbours (0.5rem 1rem),
so the three sizes read 28 / 34 / 47, and the default lands within a
pixel of IconButton's 34px box — a Button and an IconButton in the same
toolbar now line up. Variants, weight, radius and the sm/lg sizes are
untouched.

Docs follow: the Sizes section claimed sizes changed padding only, which
was never true of sm or lg, and the Space page now says out loud that
control padding is not on the fluid space scale.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019yEVAE5whghEqnU1g2tuX7

diff --git a/_components/button.md b/_components/button.md
index 59bdcb7..5ec2fd6 100644
--- a/_components/button.md
+++ b/_components/button.md
@@ -35,8 +35,10 @@ and irreversible only.
 
 ## Sizes
 
-Sizes adjust padding only — the font stays on the type scale, it does not
-grow a step of its own.
+Sizes move padding, and at the two ends of the ramp one step of font size
+with it — weight, radius, and letter-spacing never move. Medium is the
+default, and it lands within a pixel of a default IconButton's 34px box, so
+a button and an icon button in the same row line up.
 
 <figure class="example">
 <figcaption>Sizes</figcaption>
@@ -162,7 +164,7 @@ class Button needs, and only anchors reach for it.
   <tbody>
     <tr><td><code>button</code></td><td></td><td>Required base. A bare <code>&lt;button&gt;</code> is styled directly — no class. Use <code>&lt;a class="btn"&gt;</code> instead when the control navigates.</td></tr>
     <tr><td><code>data-variant</code></td><td><code>primary | dark | ghost | danger</code></td><td>Omit for the default, quiet look — no fill at rest.</td></tr>
-    <tr><td><code>data-size</code></td><td><code>sm | lg</code></td><td>Omit for the default (medium) size. Padding only.</td></tr>
+    <tr><td><code>data-size</code></td><td><code>sm | lg</code></td><td>Omit for the default (medium) size. Padding, plus one step of font size at each end.</td></tr>
     <tr><td><code>data-block</code></td><td>boolean</td><td>Full width of its container.</td></tr>
     <tr><td><code>disabled</code></td><td>boolean</td><td>Removes the button from the tab order.</td></tr>
     <tr><td><code>aria-disabled</code></td><td><code>"true"</code></td><td>Looks disabled, stays focusable.</td></tr>
diff --git a/_foundations/space.md b/_foundations/space.md
index c9f2cde..3046660 100644
--- a/_foundations/space.md
+++ b/_foundations/space.md
@@ -160,3 +160,8 @@ rather than a decorative flourish. Nothing pill-shaped except true pills.
   `:last-child` reset.
 - **A value not on the scale is a bug**, not a nudge. If a gap looks wrong,
   the scale is wrong and should change for everybody.
+- **A control's own padding is not on this scale.** Button, Tag, Badge, and
+  Tabs size themselves with a small fixed ramp of their own. This scale is
+  fluid, and a control that grows with the viewport stops matching the
+  controls beside it — the default Button was once taller than the large
+  one for exactly that reason.
diff --git a/_sass/components/button.css b/_sass/components/button.css
index 0ca79ca..54f1aaf 100644
--- a/_sass/components/button.css
+++ b/_sass/components/button.css
@@ -6,6 +6,11 @@
    dark, ghost, danger. Sizes: sm, md (default), lg — padding and font step
    only, weight and radius stay put.
 
+   The three sizes share one literal padding ramp rather than reading the
+   space scale: --gl-space-xs/-s are layout gaps, and being fluid they grew
+   the default button past the large one on a wide viewport. Control padding
+   is its own small, fixed ramp — see the sizes block at the bottom.
+
    The contract is the element itself: a bare <button> is styled directly, no
    class required. An <a> that acts like a button (navigates rather than
    changes something — see the Button page's "Links that act like buttons")
@@ -18,7 +23,7 @@ button:not(.icon-button),
 a.btn {
   --_bg: transparent;
   --_fg: var(--gl-color-text-primary);
-  --_pad: var(--gl-space-xs) var(--gl-space-s);
+  --_pad: 0.5rem 1rem;
   --_font: var(--gl-step--1);
 
   display: inline-flex;
@@ -93,6 +98,11 @@ button:not(.icon-button):disabled,
   --_fg: var(--gl-color-accent-fg);
 }
 
+/* One ramp, three rungs — 0.375/0.5/0.75rem of vertical padding, each with
+   the horizontal padding at roughly twice it. Medium lands within a pixel
+   of IconButton's default 2.125rem box (its label is fluid, that box is
+   not), so a Button and an IconButton in the same toolbar line up without
+   either being told the other's size. */
 :is(button:not(.icon-button), a.btn)[data-size="sm"] { --_pad: 0.375rem 0.75rem; --_font: 0.8125rem; }
 :is(button:not(.icon-button), a.btn)[data-size="lg"] { --_pad: 0.75rem 1.375rem; --_font: var(--gl-step-0); }