diff --git a/resources/views/components/icon.blade.php b/resources/views/components/icon.blade.php
index 482af0f8..e8395bcf 100644
--- a/resources/views/components/icon.blade.php
+++ b/resources/views/components/icon.blade.php
@@ -8,9 +8,8 @@
      falls back to 24, and `filled` combines with either. M3's optical size axis redraws a
      symbol so its strokes look equally heavy at every size, which means an icon drawn at
      20px or smaller uses the 20 cut: scaling the 24 cut down to 20px instead makes its
-     strokes about a sixth too thin (docs/reference/m3/styles.md § Icons). The cut and the
-     size are separate decisions, so a caller that draws `size-5` passes `optical="20"`
-     with it; the components that size their own icons do that for you.
+     strokes about a sixth too thin (docs/reference/m3/styles.md § Icons). `size` makes that
+     choice for you; `optical` is for an icon sized some other way, by the caller's own CSS.
 
      Decorative by default and hidden from screen readers, because nearly every icon sits
      beside words that already say what it means. Pass `label` when the icon alone carries
@@ -19,9 +18,8 @@
      `size` is the drawn size in px (`16`, `18`, `20`, `24`, `32`, `40`, `48` …, any whole number
      from 8 to 256; 24 when left out), written as `--md-icon-size` and drawn by
      resources/css/components/icon.css. An icon given a size of 20 or less takes the 20 cut
-     unless `optical` says otherwise, which is M3's rule. A size class from the caller still
-     works while the components that pass one are rewritten (plan step 36): a utility outranks
-     the package's layer.
+     unless `optical` says otherwise, which is M3's rule. A caller's unlayered class or `style`
+     setting a width and height still outranks the package's layer.
 
      `mirror-rtl` flips a directional symbol (an arrow, a chevron) in a right-to-left document,
      as M3's bidirectionality rules ask; symbols that mean the same in both directions do not
diff --git a/resources/views/components/menu-item.blade.php b/resources/views/components/menu-item.blade.php
index 86cd4391..0a126dd6 100644
--- a/resources/views/components/menu-item.blade.php
+++ b/resources/views/components/menu-item.blade.php
@@ -30,9 +30,9 @@
      come back to the item, and Escape closes nothing more.
 
      `icon-class` is for an icon whose colour means something of its own, a sport's glyph in the
-     sport's colour (`icon-class="text-sport-run"`). A colour there paints the icon over the ink
-     this file gives it, because a caller's unlayered class always outranks the package's layer —
-     except a disabled item's icon, which stays disabled regardless.
+     sport's colour (`icon-class="sport-run"`, the application's own class). A colour there paints
+     the icon over the ink this file gives it, because a caller's unlayered class always outranks
+     the package's layer — except a disabled item's icon, which stays disabled regardless.
 
      48px tall (M3's published row height wins over SegmentedMenuTokens' own 44dp, ACT-28),
      body-large label, 20px icons, 16px either side (SegmentedMenuTokens' Expressive spacing,
diff --git a/resources/views/components/navigation-rail.blade.php b/resources/views/components/navigation-rail.blade.php
index e92c1760..17063f4e 100644
--- a/resources/views/components/navigation-rail.blade.php
+++ b/resources/views/components/navigation-rail.blade.php
@@ -1,9 +1,9 @@
 {{-- M3 Expressive's navigation rail: destinations down the start edge of a `medium` or wider
      window, collapsed (96px, icon over label) or expanded (icon beside label in a full-width pill).
 
-         <div class="flex min-h-dvh">
+         <x-row align="stretch" style="min-height: 100dvh">
              <x-navigation-rail mode="collapsible">
-                 <x-slot:brand><span class="type-title-lg">Mail</span></x-slot:brand>
+                 <x-slot:brand><span class="md-type-title-lg">Mail</span></x-slot:brand>
                  <x-slot:header>
                      <x-fab label="Compose" icon="edit" />
                  </x-slot:header>
@@ -18,8 +18,8 @@
                  </x-slot:footer>
              </x-navigation-rail>
 
-             <main class="min-w-0 flex-1">…</main>
-         </div>
+             <main style="flex: 1; min-width: 0">…</main>
+         </x-row>
 
      `mode` says what decides its width:
      - `collapsed` — always collapsed; `expanded` — always expanded.
diff --git a/resources/views/showcase/sections/colour.blade.php b/resources/views/showcase/sections/colour.blade.php
index 62004f2f..88cfdbf1 100644
--- a/resources/views/showcase/sections/colour.blade.php
+++ b/resources/views/showcase/sections/colour.blade.php
@@ -25,6 +25,27 @@
         'Contrast level' => <<<'BLADE'
             <x-theme-toggle mode="contrast" />
             BLADE,
+        'Ink and lines' => <<<'BLADE'
+            <x-stack gap="space200" style="width: 100%;">
+                <p class="md-type-body-lg md-ink">Text reads in <code>md-ink</code>, on-surface.</p>
+                <p class="md-type-body-md md-ink-variant">Secondary text and metadata in <code>md-ink-variant</code>, on-surface-variant.</p>
+                <x-row gap="space100" align="center">
+                    <x-icon name="drag_indicator" class="md-ink-quiet" />
+                    <span class="md-type-body-md md-ink-variant">Decoration in <code>md-ink-quiet</code>, outline: never text that has to be read.</span>
+                </x-row>
+                <x-row gap="space200" wrap align="center">
+                    <span class="md-type-label-lg md-ink-primary">md-ink-primary</span>
+                    <span class="md-type-label-lg md-ink-error">md-ink-error</span>
+                    <span class="md-type-label-lg md-ink-success">md-ink-success</span>
+                    <span class="md-type-label-lg md-ink-warning">md-ink-warning</span>
+                    <span class="md-type-label-lg md-ink-info">md-ink-info</span>
+                </x-row>
+                <x-divider />
+                <x-surface outlined corner="md" padding="space200">
+                    <p class="md-type-body-md md-ink-variant">A line between groups is <code>&lt;x-divider&gt;</code>, an edge around a region <code>&lt;x-surface outlined&gt;</code>; both draw outline-variant.</p>
+                </x-surface>
+            </x-stack>
+            BLADE,
     ];
 @endphp
 
diff --git a/resources/views/showcase/sections/icons.blade.php b/resources/views/showcase/sections/icons.blade.php
index 440f2f94..3b6baa4c 100644
--- a/resources/views/showcase/sections/icons.blade.php
+++ b/resources/views/showcase/sections/icons.blade.php
@@ -23,11 +23,11 @@
     <p class="md-type-body-md md-ink-variant">
         Every Material Symbol (Rounded, 400, grade 0) as <code>&lt;x-icon name="…" /&gt;</code>, outlined or <code>filled</code>,
         drawn from the optical size 24 cut or — for an icon 20px or smaller, where 24's strokes would look thin —
-        the 20 cut: <code>&lt;x-icon name="…" optical="20" /&gt;</code>.
+        the 20 cut, which <code>size</code> picks on its own: <code>&lt;x-icon name="…" size="20" /&gt;</code>.
     </p>
 
     <p class="md-type-body-md md-ink-variant" data-test="when-to-use">
-        <code>filled</code> means active or selected; <code>optical="20"</code> when an icon is drawn at 20px or less; one weight per group. An icon takes the size and colour of the text beside it. An icon-only control carries an accessible name; a decorative icon is hidden.
+        <code>filled</code> means active or selected; <code>size</code> for any size but 24 (20 or less draws the 20 cut, and <code>optical</code> chooses a cut by hand); one weight per group. An icon takes the size and colour of the text beside it. An icon-only control carries an accessible name; a decorative icon is hidden.
     </p>
 
     <x-livewire-material::row gap="space200" wrap align="center">