diff --git a/design-refs/mockup/components.html b/design-refs/mockup/components.html
index 7debea7..4c646f8 100644
--- a/design-refs/mockup/components.html
+++ b/design-refs/mockup/components.html
@@ -194,8 +194,8 @@
     display: flex; align-items: center; justify-content: center;
   }
   .gedges { position: absolute; inset: 0; pointer-events: none; }
-  .edge { fill: none; stroke-width: 1.5; stroke-linecap: butt; stroke-dasharray: 9 4; stroke: #6366f1; }
-  .station { fill: #6366f1; }
+  .edge { fill: none; stroke-width: 1.2; stroke-linecap: butt; stroke-dasharray: 6 3; stroke: #a3b5af; }
+  .station { fill: #78928a; }
   .glegend { display: flex; gap: 22px; font-size: 12px; color: #555; align-items: center; }
   .glegend .sw { display: inline-block; width: 30px; border-top: 1.5px dashed #9a9a98; margin-right: 6px; vertical-align: middle; }
   .glegend .sw.rel { border-top-color: #c9c9c7; }
@@ -663,13 +663,13 @@
       <path class="edge" d="M 392 212 C 417 212, 407 144, 432 144"/>
       <path class="edge" d="M 592 132 H 632"/>
       <path class="edge" d="M 712 154 V 232"/>
-      <circle class="station" cx="12"  cy="132" r="5"/>
-      <circle class="station" cx="207" cy="132" r="5"/>
-      <circle class="station" cx="224" cy="52"  r="4.5"/>
-      <circle class="station" cx="224" cy="212" r="4.5"/>
-      <circle class="station" cx="420" cy="132" r="5"/>
-      <circle class="station" cx="624" cy="132" r="4.5"/>
-      <circle class="station" cx="712" cy="224" r="4.5"/>
+      <circle class="station" cx="12"  cy="132" r="2.8"/>
+      <circle class="station" cx="207" cy="132" r="2.8"/>
+      <circle class="station" cx="224" cy="52"  r="2.8"/>
+      <circle class="station" cx="224" cy="212" r="2.8"/>
+      <circle class="station" cx="420" cy="132" r="2.8"/>
+      <circle class="station" cx="624" cy="132" r="2.8"/>
+      <circle class="station" cx="712" cy="224" r="2.8"/>
     </svg>
     <div class="rnode" style="left:22px; top:110px;"><span class="entry-badge" style="width:20px;height:20px;font-size:11px;">①</span><span class="icotile" style="background:#e0e7ff;">🌐</span><span class="t">快速开始</span><span class="st done">✓</span></div>
     <div class="rnode" style="left:232px; top:30px;"><span class="entry-badge" style="width:20px;height:20px;font-size:11px;">②</span><span class="icotile" style="background:#fce7f3;">⚛️</span><span class="t">React</span><span class="st done">✓</span></div>
@@ -681,31 +681,31 @@
   </div>
 
   <!-- 构件：线条组件六原语 -->
-  <div class="canvas" style="top: 462px; left: 40px; width: 880px; height: 258px;">
+  <div class="canvas" style="top: 462px; left: 40px; width: 880px; height: 272px;">
     <div style="font-size:14px; font-weight:700; color:#1a1a1a; margin-bottom:10px;">&lt;RouteLine /&gt; 线条组件 · 六原语</div>
     <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;">
       <div class="linecard">
-        <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 28 H 220"/><circle class="station" cx="20" cy="28" r="4.5"/><circle class="station" cx="220" cy="28" r="4.5"/></svg>
+        <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 28 H 220"/><circle class="station" cx="20" cy="28" r="2.8"/><circle class="station" cx="220" cy="28" r="2.8"/></svg>
         <div class="vlabel"><b>segment</b> · 直段</div>
       </div>
       <div class="linecard">
-        <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 44 H 105 Q 125 44 125 24 V 10"/><circle class="station" cx="20" cy="44" r="4.5"/></svg>
+        <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 44 H 105 Q 125 44 125 24 V 10"/><circle class="station" cx="20" cy="44" r="2.8"/></svg>
         <div class="vlabel"><b>elbow</b> · 圆角转角</div>
       </div>
       <div class="linecard">
-        <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 15 42 C 60 4, 180 58, 225 16"/><circle class="station" cx="15" cy="42" r="4.5"/><circle class="station" cx="225" cy="16" r="4.5"/></svg>
+        <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 15 42 C 60 4, 180 58, 225 16"/><circle class="station" cx="15" cy="42" r="2.8"/><circle class="station" cx="225" cy="16" r="2.8"/></svg>
         <div class="vlabel"><b>curve</b> · 曲线</div>
       </div>
       <div class="linecard">
-        <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 28 H 80 C 100 28, 100 10, 118 10 H 200"/><path class="edge" d="M 80 28 C 100 28, 100 46, 118 46 H 200"/><circle class="station" cx="80" cy="28" r="4.5"/></svg>
+        <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 28 H 80 C 100 28, 100 10, 118 10 H 200"/><path class="edge" d="M 80 28 C 100 28, 100 46, 118 46 H 200"/><circle class="station" cx="80" cy="28" r="2.8"/></svg>
         <div class="vlabel"><b>fork</b> · 分流岔口</div>
       </div>
       <div class="linecard">
-        <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 10 H 95 C 113 10, 113 28, 130 28 H 220"/><path class="edge" d="M 20 46 H 95 C 113 46, 113 28, 130 28"/><circle class="station" cx="130" cy="28" r="4.5"/></svg>
+        <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 10 H 95 C 113 10, 113 28, 130 28 H 220"/><path class="edge" d="M 20 46 H 95 C 113 46, 113 28, 130 28"/><circle class="station" cx="130" cy="28" r="2.8"/></svg>
         <div class="vlabel"><b>merge</b> · 汇合并线</div>
       </div>
       <div class="linecard">
-        <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 28 H 220"/><circle class="station" cx="90" cy="28" r="6"/><circle class="station" cx="170" cy="28" r="6"/></svg>
+        <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 28 H 220"/><circle class="station" cx="90" cy="28" r="2.8"/><circle class="station" cx="170" cy="28" r="2.8"/></svg>
         <div class="vlabel"><b>station</b> · 站点（悬浮于卡间槽内）</div>
       </div>
     </div>
@@ -725,9 +725,10 @@
   <div style="position:absolute; top: 420px; left: 948px; width: 292px;" class="panel">
     <h3 style="margin-bottom:6px;">设计原则</h3>
     <div class="note" style="margin-bottom:4px;"><span class="idx">1</span><span class="txt"><b>线只管顺序</b>：状态交给卡片（✓ / 🔒）。</span></div>
-    <div class="note" style="margin-bottom:4px;"><span class="idx">2</span><span class="txt"><b>岔口即分支</b>：快速开始分流出 React 线与示例线，在「更多」并线。</span></div>
-    <div class="note" style="margin-bottom:4px;"><span class="idx">3</span><span class="txt"><b>线条是构件</b>：六原语可拼任意路线。</span></div>
-    <div class="note" style="margin-bottom:0;"><span class="idx">4</span><span class="txt">顺序为<b>示例占位</b>，填 courses.ts 自动更新。</span></div>
+    <div class="note" style="margin-bottom:4px;"><span class="idx">2</span><span class="txt"><b>背景级线条</b>：灰绿 <code>#A3B5AF</code> · 1.2px · 划隙 6:3；站点 <code>#78928A</code> 深一档，直径 ≈ 4× 线宽。</span></div>
+    <div class="note" style="margin-bottom:4px;"><span class="idx">3</span><span class="txt"><b>岔口即分支</b>：快速开始分流出 React 线与示例线，在「更多」并线。</span></div>
+    <div class="note" style="margin-bottom:4px;"><span class="idx">4</span><span class="txt"><b>线条是构件</b>：六原语可拼任意路线。</span></div>
+    <div class="note" style="margin-bottom:0;"><span class="idx">5</span><span class="txt">顺序为<b>示例占位</b>，填 courses.ts 自动更新。</span></div>
   </div>
 
   <div class="footline">组件设计稿 · Storybook 拆分 · stack idealjs</div>
diff --git a/design-refs/mockup/components.pdf b/design-refs/mockup/components.pdf
index 11c2235..0ab5ff2 100644
Binary files a/design-refs/mockup/components.pdf and b/design-refs/mockup/components.pdf differ