diff --git a/docs/architecture/visual-specimen.html b/docs/architecture/visual-specimen.html
index 7975a03..59a73e9 100644
--- a/docs/architecture/visual-specimen.html
+++ b/docs/architecture/visual-specimen.html
@@ -568,7 +568,9 @@
         display: inline-block;
       }
       .dot.draft {
-        background: var(--support-warning);
+        /* Accent, not a warning hue: a draft / unpublished-changes state is
+           neutral, not a problem (arch/10 §6 status-indicator resolution + council). */
+        background: var(--accent);
       }
       .dot.published {
         background: var(--support-success);
@@ -624,6 +626,13 @@
         align-items: center;
         gap: var(--space-2);
       }
+      /* Fixed-width slot so the draft dot (shown only on dirty rows) never shifts
+         the date — published rows keep an empty slot and stay aligned. */
+      .item .indicator {
+        flex: 0 0 auto;
+        width: 8px;
+        height: 8px;
+      }
       .item .del {
         opacity: 0;
         border: none;
@@ -990,8 +999,12 @@
       <section>
         <h2>Tabs · status · tags</h2>
         <div class="tabs">
-          <button aria-selected="true">Draft</button>
-          <button aria-selected="false">Published</button>
+          <button aria-selected="true">Overview</button>
+          <button aria-selected="false">Details</button>
+        </div>
+        <div class="cap" style="margin-top: var(--space-2)">
+          Catalog primitive only. The Draft/Published view uses the segmented control (a
+          radio group), not tabs — see arch/10.
         </div>
         <div class="row" style="margin-top: var(--space-6)">
           <span class="tag-pill"><span class="dot draft"></span> Draft changes</span>
@@ -1033,7 +1046,11 @@
             <div class="item active">
               <div class="main">
                 <div class="name">Quarterly revenue</div>
-                <div class="sub"><span class="dot draft"></span> Today · 2 KB</div>
+                <div class="sub">
+                  <span class="indicator"><span class="dot draft"></span></span><span
+                    >Today · 2 KB</span
+                  >
+                </div>
               </div>
               <button class="del" title="Delete">
                 <svg
@@ -1052,7 +1069,7 @@
             <div class="item">
               <div class="main">
                 <div class="name">Population by region</div>
-                <div class="sub"><span class="dot published"></span> Yesterday</div>
+                <div class="sub"><span class="indicator"></span><span>Yesterday</span></div>
               </div>
               <button class="del" title="Delete">
                 <svg
@@ -1071,7 +1088,7 @@
             <div class="item">
               <div class="main">
                 <div class="name">Scatter · height vs weight</div>
-                <div class="sub"><span class="dot published"></span> 3d ago</div>
+                <div class="sub"><span class="indicator"></span><span>3d ago</span></div>
               </div>
               <button class="del" title="Delete">
                 <svg