diff --git a/apps/design-lab/e2e/visual.spec.ts-snapshots/colors-chromium-linux.png b/apps/design-lab/e2e/visual.spec.ts-snapshots/colors-chromium-linux.png
index 3ea219e..2ae7f19 100644
Binary files a/apps/design-lab/e2e/visual.spec.ts-snapshots/colors-chromium-linux.png and b/apps/design-lab/e2e/visual.spec.ts-snapshots/colors-chromium-linux.png differ
diff --git a/apps/design-lab/e2e/visual.spec.ts-snapshots/components-chromium-linux.png b/apps/design-lab/e2e/visual.spec.ts-snapshots/components-chromium-linux.png
index 727cbaa..176adc9 100644
Binary files a/apps/design-lab/e2e/visual.spec.ts-snapshots/components-chromium-linux.png and b/apps/design-lab/e2e/visual.spec.ts-snapshots/components-chromium-linux.png differ
diff --git a/apps/design-lab/e2e/visual.spec.ts-snapshots/shelf-chromium-linux.png b/apps/design-lab/e2e/visual.spec.ts-snapshots/shelf-chromium-linux.png
index 9578b93..b8f8c76 100644
Binary files a/apps/design-lab/e2e/visual.spec.ts-snapshots/shelf-chromium-linux.png and b/apps/design-lab/e2e/visual.spec.ts-snapshots/shelf-chromium-linux.png differ
diff --git a/apps/design-lab/e2e/visual.spec.ts-snapshots/symbols-chromium-linux.png b/apps/design-lab/e2e/visual.spec.ts-snapshots/symbols-chromium-linux.png
index dd58d2f..12ec057 100644
Binary files a/apps/design-lab/e2e/visual.spec.ts-snapshots/symbols-chromium-linux.png and b/apps/design-lab/e2e/visual.spec.ts-snapshots/symbols-chromium-linux.png differ
diff --git a/apps/design-lab/src/pages/colors/App.tsx b/apps/design-lab/src/pages/colors/App.tsx
index c4e8f40..c77767e 100644
--- a/apps/design-lab/src/pages/colors/App.tsx
+++ b/apps/design-lab/src/pages/colors/App.tsx
@@ -18,8 +18,8 @@ function Chip({ c, n, h }: { c: string; n: string; h: string }) {
   return (
     <div>
       <div className="h-12 rounded-[10px] border-2 border-ink" style={{ background: c }} />
-      <div className="mt-1 whitespace-nowrap text-[10.5px] font-bold">{n}</div>
-      <div className="whitespace-nowrap font-mono text-[9px] text-[#6b6b6b]">{h}</div>
+      <div className="mt-1 whitespace-nowrap text-small font-bold">{n}</div>
+      <div className="whitespace-nowrap font-mono t-small-mute">{h}</div>
     </div>
   )
 }
@@ -59,7 +59,7 @@ function DoDont({ bad, children, text }: { bad?: boolean; children: React.ReactN
         {bad ? '✗' : '✓'}
       </span>
       {children}
-      <p className="m-0 flex-1 text-[11.5px] leading-snug text-body">{text}</p>
+      <p className="m-0 flex-1 text-small leading-snug text-body">{text}</p>
     </div>
   )
 }
@@ -76,7 +76,7 @@ export function App() {
                 <div className="h-11 w-[88px]" style={{ background: p.b }} />
               </div>
               <div className="mt-1.5 text-[11px] font-bold">{p.name}</div>
-              <div className="text-[10px] text-[#555]">{p.use}</div>
+              <div className="text-small text-[#555]">{p.use}</div>
             </div>
           ))}
         </div>
@@ -95,7 +95,7 @@ export function App() {
                 <span className="flex h-[18px] w-[18px] shrink-0 translate-y-[2px] items-center justify-center rounded-full border-2 border-ink bg-ink text-[10px] font-extrabold text-paper">{i + 1}</span>
                 <b className="text-[13px]">{r.name}</b>
               </div>
-              <p className="m-0 mt-1.5 mb-2 max-w-[760px] text-[11.5px] leading-relaxed text-body">{r.why}</p>
+              <p className="m-0 mt-1.5 mb-2 max-w-[760px] text-content leading-relaxed text-body">{r.why}</p>
               <div className="grid grid-cols-2 gap-3">
                 <DoDont bad text={r.badCap}>{r.badDemo}</DoDont>
                 <DoDont text={r.goodCap}>{r.goodDemo}</DoDont>
diff --git a/apps/design-lab/src/pages/shelf/App.tsx b/apps/design-lab/src/pages/shelf/App.tsx
index 94a3d7e..17bb377 100644
--- a/apps/design-lab/src/pages/shelf/App.tsx
+++ b/apps/design-lab/src/pages/shelf/App.tsx
@@ -60,7 +60,7 @@ export function App() {
         >
           <MemphisCard chapter={CHAPTERS[5]} compact />
         </div>
-        <div className="absolute left-[860px] top-[320px]"><AssignBlock {...ASSIGNMENT} /></div>
+        <div className="absolute left-[820px] top-[320px]"><AssignBlock {...ASSIGNMENT} /></div>
         <div className="absolute left-[60px] top-[440px] flex gap-4">
           <Ticket chapter={CHAPTERS[2]} done />
           <Ticket chapter={CHAPTERS[5]} done={false} />
diff --git a/apps/design-lab/src/pages/symbols/App.tsx b/apps/design-lab/src/pages/symbols/App.tsx
index 2ebfe26..dd53fc2 100644
--- a/apps/design-lab/src/pages/symbols/App.tsx
+++ b/apps/design-lab/src/pages/symbols/App.tsx
@@ -37,14 +37,14 @@ export function App() {
             <div key={s.n} className="text-center">
               <div className="mx-auto flex h-[46px] w-[46px] items-center justify-center rounded-xl border-2 border-ink bg-white">{s.el}</div>
               <div className="mt-1.5 text-[11px] font-bold">{s.n}</div>
-              <div className="text-[9.5px] leading-tight text-[#6b6b6b]">{s.m}</div>
-              <div className="mt-0.5 text-[9px] text-[#8a8a8a]">{s.s}</div>
+              <div className="t-small-mute leading-tight">{s.m}</div>
+              <div className="mt-0.5 t-small-mute">{s.s}</div>
             </div>
           ))}
         </div>
       </Section>
       <Section label="词汇表 · 父子层级" note="与 ai-era-tutorial 词汇表对齐">
-        <table className="w-full border-collapse text-[11.5px] text-body">
+        <table className="w-full border-collapse text-small text-body">
           <thead>
             <tr className="border-b-2 border-[#d5d5d3] text-left text-ink">
               <th className="w-24 py-1 pr-2">父词</th>
@@ -77,7 +77,7 @@ export function App() {
                 </>}
               </svg>
               <div className="mt-1 text-[13px] font-extrabold">{l.n}</div>
-              <div className="text-[11px] text-[#555]">{l.m}</div>
+              <div className="text-small text-[#555]">{l.m}</div>
             </div>
           ))}
           <div className="rounded-xl border-2 border-ink bg-white p-3">
@@ -85,7 +85,7 @@ export function App() {
               <path d="M12 22 q10 -22 20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0" stroke="var(--color-clash3b)" strokeWidth="3" fill="none" strokeLinecap="round" />
             </svg>
             <div className="mt-1 text-[13px] font-extrabold">波浪带 ＝ 代理交接</div>
-            <div className="text-[11px] text-[#555]">agent 边界 · 区域标记，不连线</div>
+            <div className="text-small text-[#555]">agent 边界 · 区域标记，不连线</div>
           </div>
         </div>
       </Section>
@@ -93,7 +93,7 @@ export function App() {
         <div className="flex flex-wrap items-start gap-6">
           <Ticket chapter={CHAPTERS[1]} done />
           <Ticket chapter={CHAPTERS[5]} done={false} />
-          <p className="m-0 max-w-[280px] flex-1 text-[11.5px] leading-relaxed text-body">
+          <p className="m-0 max-w-[280px] flex-1 text-content leading-relaxed text-body">
             <b>完成＝沿撕线打双孔</b>（半圆缺口）；未开始撕线为实线、无孔。头部色块无独立描边，由票体 overflow-hidden 裁出单一描边圆角。票号＝章程序号。
           </p>
         </div>
diff --git a/apps/tutorial/src/pages/design-colors/App.tsx b/apps/tutorial/src/pages/design-colors/App.tsx
index 2a363a2..bc47c9a 100644
--- a/apps/tutorial/src/pages/design-colors/App.tsx
+++ b/apps/tutorial/src/pages/design-colors/App.tsx
@@ -18,8 +18,8 @@ function Chip({ c, n, h }: { c: string; n: string; h: string }) {
   return (
     <div>
       <div className="h-12 rounded-[10px] border-2 border-ink" style={{ background: c }} />
-      <div className="mt-1 whitespace-nowrap text-[10.5px] font-bold">{n}</div>
-      <div className="whitespace-nowrap font-mono text-[9px] text-[#6b6b6b]">{h}</div>
+      <div className="mt-1 whitespace-nowrap text-small font-bold">{n}</div>
+      <div className="whitespace-nowrap font-mono t-small-mute">{h}</div>
     </div>
   )
 }
@@ -59,7 +59,7 @@ function DoDont({ bad, children, text }: { bad?: boolean; children: React.ReactN
         {bad ? '✗' : '✓'}
       </span>
       {children}
-      <p className="m-0 flex-1 text-[11.5px] leading-snug text-body">{text}</p>
+      <p className="m-0 flex-1 text-small leading-snug text-body">{text}</p>
     </div>
   )
 }
@@ -76,7 +76,7 @@ export function App() {
                 <div className="h-11 w-[88px]" style={{ background: p.b }} />
               </div>
               <div className="mt-1.5 text-[11px] font-bold">{p.name}</div>
-              <div className="text-[10px] text-[#555]">{p.use}</div>
+              <div className="text-small text-[#555]">{p.use}</div>
             </div>
           ))}
         </div>
@@ -95,7 +95,7 @@ export function App() {
                 <span className="flex h-[18px] w-[18px] shrink-0 translate-y-[2px] items-center justify-center rounded-full border-2 border-ink bg-ink text-[10px] font-extrabold text-paper">{i + 1}</span>
                 <b className="text-[13px]">{r.name}</b>
               </div>
-              <p className="m-0 mt-1.5 mb-2 max-w-[760px] text-[11.5px] leading-relaxed text-body">{r.why}</p>
+              <p className="m-0 mt-1.5 mb-2 max-w-[760px] text-content leading-relaxed text-body">{r.why}</p>
               <div className="grid grid-cols-2 gap-3">
                 <DoDont bad text={r.badCap}>{r.badDemo}</DoDont>
                 <DoDont text={r.goodCap}>{r.goodDemo}</DoDont>
diff --git a/apps/tutorial/src/pages/design-examples/App.tsx b/apps/tutorial/src/pages/design-examples/App.tsx
index 6a471d8..adb5d82 100644
--- a/apps/tutorial/src/pages/design-examples/App.tsx
+++ b/apps/tutorial/src/pages/design-examples/App.tsx
@@ -31,7 +31,7 @@ export function App() {
         <div className="absolute left-[40px] top-[110px] w-[250px]"><MemphisCard chapter={CHAPTERS[1]} entry={1} /></div>
         <div className="absolute left-[380px] top-[44px] w-[250px] -rotate-1"><MemphisCard chapter={CHAPTERS[2]} entry={2} /></div>
         <div className="absolute left-[700px] top-[44px] w-[140px]"><MemphisCard chapter={CHAPTERS[5]} compact /></div>
-        <div className="absolute left-[860px] top-[320px]"><AssignBlock {...ASSIGNMENT} /></div>
+        <div className="absolute left-[820px] top-[320px]"><AssignBlock {...ASSIGNMENT} /></div>
         <div className="absolute left-[60px] top-[440px] flex gap-4">
           <Ticket chapter={CHAPTERS[2]} done />
           <Ticket chapter={CHAPTERS[5]} done={false} />
diff --git a/apps/tutorial/src/pages/design-symbols/App.tsx b/apps/tutorial/src/pages/design-symbols/App.tsx
index b736902..e5ddf5f 100644
--- a/apps/tutorial/src/pages/design-symbols/App.tsx
+++ b/apps/tutorial/src/pages/design-symbols/App.tsx
@@ -37,14 +37,14 @@ export function App() {
             <div key={s.n} className="text-center">
               <div className="mx-auto flex h-[46px] w-[46px] items-center justify-center rounded-xl border-2 border-ink bg-white">{s.el}</div>
               <div className="mt-1.5 text-[11px] font-bold">{s.n}</div>
-              <div className="text-[9.5px] leading-tight text-[#6b6b6b]">{s.m}</div>
-              <div className="mt-0.5 text-[9px] text-[#8a8a8a]">{s.s}</div>
+              <div className="t-small-mute leading-tight">{s.m}</div>
+              <div className="mt-0.5 t-small-mute">{s.s}</div>
             </div>
           ))}
         </div>
       </Section>
       <Section label="词汇表 · 父子层级" note="与 ai-era-tutorial 词汇表对齐">
-        <table className="w-full border-collapse text-[11.5px] text-body">
+        <table className="w-full border-collapse text-small text-body">
           <thead>
             <tr className="border-b-2 border-[#d5d5d3] text-left text-ink">
               <th className="w-24 py-1 pr-2">父词</th>
@@ -77,7 +77,7 @@ export function App() {
                 </>}
               </svg>
               <div className="mt-1 text-[13px] font-extrabold">{l.n}</div>
-              <div className="text-[11px] text-[#555]">{l.m}</div>
+              <div className="text-small text-[#555]">{l.m}</div>
             </div>
           ))}
           <div className="rounded-xl border-2 border-ink bg-white p-3">
@@ -85,7 +85,7 @@ export function App() {
               <path d="M12 22 q10 -22 20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0" stroke="var(--color-clash3b)" strokeWidth="3" fill="none" strokeLinecap="round" />
             </svg>
             <div className="mt-1 text-[13px] font-extrabold">波浪带 ＝ 代理交接</div>
-            <div className="text-[11px] text-[#555]">agent 边界 · 区域标记，不连线</div>
+            <div className="text-small text-[#555]">agent 边界 · 区域标记，不连线</div>
           </div>
         </div>
       </Section>
@@ -93,7 +93,7 @@ export function App() {
         <div className="flex flex-wrap items-start gap-6">
           <Ticket chapter={CHAPTERS[1]} done />
           <Ticket chapter={CHAPTERS[5]} done={false} />
-          <p className="m-0 max-w-[280px] flex-1 text-[11.5px] leading-relaxed text-body">
+          <p className="m-0 max-w-[280px] flex-1 text-content leading-relaxed text-body">
             <b>完成＝沿撕线打双孔</b>（半圆缺口）；未开始撕线为实线、无孔。头部色块无独立描边，由票体 overflow-hidden 裁出单一描边圆角。票号＝章程序号。
           </p>
         </div>
diff --git a/packages/design-system/src/components/EntryGuide.tsx b/packages/design-system/src/components/EntryGuide.tsx
index f69fac5..3aa7809 100644
--- a/packages/design-system/src/components/EntryGuide.tsx
+++ b/packages/design-system/src/components/EntryGuide.tsx
@@ -23,22 +23,22 @@ export function EntryGuide({
             >
               {p.icon}
             </span>
-            <b className="text-[13px]">{p.name}</b>
+            <b className="text-t3">{p.name}</b>
           </div>
           <div className="mt-2 flex flex-wrap items-center gap-1.5">
             {p.path.map((id, i) => (
               <span key={id} className="flex items-center gap-1.5">
-                {i > 0 && <span className="text-[10px] text-mute">→</span>}
+                {i > 0 && <span className="text-small text-mute">→</span>}
                 {linkChapter ? (
                   <a
                     href={`/ch${id}.html`}
-                    className={`rounded-full border-[1.5px] border-ink px-2.5 py-0.5 text-[10.5px] no-underline ${id === p.entry ? 'bg-clash2a font-extrabold' : 'bg-white'}`}
+                    className={`rounded-full border-[1.5px] border-ink px-2.5 py-0.5 text-small no-underline ${id === p.entry ? 'bg-clash2a font-extrabold' : 'bg-white'}`}
                   >
                     {id === p.entry && ['①', '②', '③'][profiles.indexOf(p)]} {chapters[id].title}
                   </a>
                 ) : (
                   <span
-                    className={`rounded-full border-[1.5px] border-ink px-2.5 py-0.5 text-[10.5px] ${id === p.entry ? 'bg-clash2a font-extrabold' : 'bg-white'}`}
+                    className={`rounded-full border-[1.5px] border-ink px-2.5 py-0.5 text-small ${id === p.entry ? 'bg-clash2a font-extrabold' : 'bg-white'}`}
                   >
                     {id === p.entry && ['①', '②', '③'][profiles.indexOf(p)]} {chapters[id].title}
                   </span>
@@ -46,7 +46,7 @@ export function EntryGuide({
               </span>
             ))}
           </div>
-          <p className="m-0 mt-2 text-[10px] leading-relaxed text-mute">{p.note}</p>
+          <p className="m-0 mt-2 t-small-mute leading-relaxed">{p.note}</p>
         </div>
       ))}
     </div>
diff --git a/packages/design-system/src/components/MemphisCard.tsx b/packages/design-system/src/components/MemphisCard.tsx
index 9a3c2b3..1238228 100644
--- a/packages/design-system/src/components/MemphisCard.tsx
+++ b/packages/design-system/src/components/MemphisCard.tsx
@@ -110,22 +110,22 @@ export function MemphisCard({
           chapter.gifUrl ? (
             <img src={chapter.gifUrl} alt={chapter.target.expectation} className="h-full w-full object-cover" />
           ) : (
-            <span className="px-3 text-center text-[11px] font-bold leading-snug text-paper">
+            <span className="px-3 text-center text-small font-bold leading-snug text-paper">
               ▶ {chapter.target.expectation}
             </span>
           )
         ) : flip ? (
-          <span className="px-3 text-center text-[11px] leading-snug text-ink/80 mix-blend-multiply">
+          <span className="px-3 text-center text-small leading-snug text-ink/80 mix-blend-multiply">
             {chapter.target.goal}
           </span>
         ) : zoneText ? (
           /* 静置态（用法示例）：过程文字骑在相框里，价值区短语带荧光标记 */
-          <span className="px-3 text-center text-[11.5px] font-semibold leading-snug text-ink">{zoneText}</span>
+          <span className="px-3 text-center text-small font-semibold leading-snug text-ink">{zoneText}</span>
         ) : (
           /* 静置态：章节 emoji 是相框的视觉主体（对齐设计稿解剖卡） */
           <span style={{ fontSize: compact ? '28px' : '40px' }}>{chapter.emoji}</span>
         )}
-        <span className="absolute left-1.5 top-1 text-[9px] font-bold tracking-wide text-paper">
+        <span className="absolute left-1.5 top-1 text-small font-bold tracking-wide text-paper">
           预期结果{showGif ? ' · GIF' : ''}
         </span>
         <Ring size={16} className="absolute bottom-1.5 right-1.5" />
@@ -133,7 +133,7 @@ export function MemphisCard({
       {/* 卡头：▲ 目标 + 标题 + ● 积木点列 */}
       <div className="mt-2 flex items-center gap-2">
         <Tri size={14} />
-        <b className="flex-1 text-[14px] text-[#2b1d10] [text-shadow:0_1px_1px_rgba(255,255,255,0.9)]">
+        <b className="flex-1 text-t3 text-[#2b1d10] [text-shadow:0_1px_1px_rgba(255,255,255,0.9)]">
           {chapter.title}
         </b>
         {!compact && <BrickDots bricks={chapter.target.bricks} />}
diff --git a/packages/design-system/src/components/Ticket.tsx b/packages/design-system/src/components/Ticket.tsx
index dd11741..429232c 100644
--- a/packages/design-system/src/components/Ticket.tsx
+++ b/packages/design-system/src/components/Ticket.tsx
@@ -12,13 +12,13 @@ export function Ticket({ chapter, done }: { chapter: Chapter; done: boolean }) {
       {/* 头部媒体块：章节色纯填充，无独立边框（由票体裁切） */}
       <div className="flex w-14 shrink-0 items-center justify-center text-[22px]" style={{ background: chapter.color }}>{chapter.emoji}</div>
       <div className="flex-1 py-2 pl-2.5 pr-2">
-        <b className="text-[12.5px]">{chapter.title}</b>
-        <div className="mt-0.5 font-mono text-[8.5px] text-mute">
+        <b className="text-content font-bold">{chapter.title}</b>
+        <div className="mt-0.5 font-mono t-small-mute">
           No. {String(chapter.id).padStart(3, '0')} · {done ? '已完成（打孔）' : '未开始（无孔）'}
         </div>
       </div>
       <div
-        className={`flex w-[42px] items-center justify-center font-mono text-[9.5px] text-mute ${done ? 'border-l-[1.5px] border-dashed border-ink' : 'border-l-[1.5px] border-solid border-ink'}`}
+        className={`flex w-[42px] items-center justify-center font-mono text-small text-mute ${done ? 'border-l-[1.5px] border-dashed border-ink' : 'border-l-[1.5px] border-solid border-ink'}`}
       >
         №{String(chapter.id).padStart(2, '0')}
       </div>
@@ -49,15 +49,15 @@ export function AssignBlock({
   miss: { how: string; looks: string }
 }) {
   return (
-    <div data-comp="assign" className="w-[260px] rounded-xl border-2 border-ink bg-paper p-3 shadow-hard">
+    <div data-comp="assign" className="w-[320px] rounded-xl border-2 border-ink bg-paper p-4 shadow-hard">
       <div className="flex items-center gap-2">
         <svg width="16" height="16" viewBox="0 0 18 18" aria-hidden>
           <path d="M9 1 v16 M1 9 h16" stroke="var(--color-clash2b)" strokeWidth="3.5" strokeLinecap="round" />
           <path d="M9 1 v16 M1 9 h16" stroke="var(--color-ink)" strokeWidth="1.2" />
         </svg>
-        <b className="text-[13px]">{title}</b>
+        <b className="text-t3">{title}</b>
       </div>
-      <div className="mt-1.5 space-y-0.5 text-[11px] leading-relaxed text-body">
+      <div className="mt-2 space-y-1 text-content leading-relaxed text-body">
         <div>
           <b>位置</b>：{pos}
         </div>
@@ -74,8 +74,8 @@ export function AssignBlock({
             <path d="M 12 32 L 8 27 L 16 22 L 8 17 L 16 12 L 12 7 L 14 2" fill="none" stroke="var(--color-clash1a)" strokeWidth="3" strokeLinejoin="round" strokeLinecap="round" />
           </svg>
           <div>
-            <b className="text-[11.5px]">脱靶 · {miss.how}</b>
-            <p className="m-0 mt-0.5 text-[10.5px] leading-relaxed text-body">{miss.looks}</p>
+            <b className="t-small-strong">脱靶 · {miss.how}</b>
+            <p className="m-0 mt-0.5 text-small leading-relaxed text-body">{miss.looks}</p>
           </div>
         </div>
       </div>
diff --git a/packages/design-system/src/components/shapes.tsx b/packages/design-system/src/components/shapes.tsx
index 998abfb..ad69c04 100644
--- a/packages/design-system/src/components/shapes.tsx
+++ b/packages/design-system/src/components/shapes.tsx
@@ -74,8 +74,8 @@ export function MissMark({ how, looks }: { how: string; looks: string }) {
     <div className="flex items-start gap-3">
       <Tremble size={22} className="mt-0.5 shrink-0" />
       <div>
-        <b className="text-[13px]">脱靶 · {how}</b>
-        <p className="m-0 mt-0.5 text-[12px] leading-relaxed text-body">{looks}</p>
+        <b className="text-content font-bold">脱靶 · {how}</b>
+        <p className="m-0 mt-0.5 text-small leading-relaxed text-body">{looks}</p>
       </div>
     </div>
   )