diff --git a/web/delivery-platform-ui/public/design-system.html b/web/delivery-platform-ui/public/design-system.html
new file mode 100644
index 0000000..353b966
--- /dev/null
+++ b/web/delivery-platform-ui/public/design-system.html
@@ -0,0 +1,369 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>CraftLabs 设计体系 v1.0</title>
+<style>
+:root {
+  --brand:#2C3E6B; --brand2:#3D5A99; --bg:#EAEFFA; --card:#fff; --border:#E8ECF1;
+  --text:#303133; --text2:#606266; --text3:#909399; --text4:#C0C4CC;
+  --th:#F2F5FC; --s-bg:#F8F9FB; --ok:#1A7A3A; --okbg:#E6F7EE; --okbd:#A8E6C1;
+  --bad:#F56C6C; --badbg:#FEF0F0; --warn:#E6A23C; --warnbg:#FDF6EC; --dot:#D54941;
+  --r-sm:4px; --r-md:6px; --r-lg:8px;
+}
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}
+.header{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:24px 32px}
+.header h1{font-size:24px;font-weight:700;margin-bottom:4px}
+.header p{font-size:13px;opacity:.85}
+.nav{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;display:flex;overflow-x:auto}
+.nav a{padding:10px 20px;font-size:13px;color:var(--text2);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
+.nav a:hover,.nav a.active{color:var(--brand);font-weight:600;border-bottom-color:var(--brand)}
+.container{max-width:1200px;margin:0 auto;padding:24px 20px}
+.sec{margin-bottom:32px}
+.sec-title{font-size:20px;font-weight:700;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--th)}
+.sec-sub{font-size:15px;font-weight:600;color:var(--brand);margin:20px 0 12px}
+
+/* Swatches */
+.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
+.sw{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r-md);border:1px solid var(--border);padding:12px 14px}
+.sw-box{width:56px;height:56px;border-radius:var(--r-md);border:1px solid var(--border);flex-shrink:0}
+.sw-info{flex:1;min-width:0}
+.sw-name{font-weight:600;font-size:13px}.sw-hex{font-size:11px;color:var(--text3);font-family:monospace;margin-top:2px}
+.sw-use{font-size:11px;color:var(--text4);margin-top:2px}
+
+/* Card */
+.card{background:var(--card);border-radius:var(--r-md);border:1px solid var(--border);padding:16px;margin-bottom:12px}
+.card-title{font-weight:600;font-size:14px;margin-bottom:10px}
+
+/* Type specimens */
+.type-spec{margin-bottom:8px;padding:6px 0}
+.type-label{font-size:11px;color:var(--text4);margin-bottom:2px}
+.type-h1{font-size:22px;font-weight:700}
+.type-h2{font-size:20px;font-weight:700}
+.type-h3{font-size:16px;font-weight:600}
+.type-body{font-size:14px}
+.type-sec{font-size:13px;color:var(--text2)}
+.type-cap{font-size:12px;color:var(--text3)}
+.type-mono{font-size:12px;font-family:monospace}
+
+/* Component demos */
+.demo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0}
+.btn{font-size:13px;font-weight:500;border-radius:var(--r-sm);padding:6px 14px;cursor:pointer;border:none;font-family:inherit}
+.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand2)}
+.btn-cta{background:var(--brand);color:#fff;box-shadow:0 2px 6px rgba(44,62,107,.2);padding:7px 16px}
+.btn-cancel{background:#fff;color:var(--text2);border:1px solid var(--border)}
+.btn-danger{background:var(--bad);color:#fff}
+.btn-link{background:none;border:none;color:var(--brand);cursor:pointer;font-size:13px;padding:0;font-family:inherit}
+
+.input-demo{border:1px solid #E0E3E8;border-radius:var(--r-sm);padding:7px 12px;font-size:13px;color:var(--text);outline:none;min-width:200px;font-family:inherit}
+.input-demo:focus{border-color:var(--brand)}
+.search-demo{border:1px solid #E0E3E8;border-radius:var(--r-md);padding:5px 12px;background:var(--s-bg);display:flex;align-items:center;gap:8px;min-width:240px}
+.search-demo span{color:var(--text4);font-size:13px}
+.search-demo input{border:none;outline:none;flex:1;font-size:13px;background:transparent;font-family:inherit}
+
+.tag{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:500}
+.tag-ok{background:var(--okbg);color:var(--ok);border:1px solid var(--okbd)}
+.tag-bad{background:var(--badbg);color:var(--bad);border:1px solid #FBC4C4}
+.tag-warn{background:var(--warnbg);color:var(--warn);border:1px solid #F5DAB1}
+.tag-gray{background:#f4f4f5;color:var(--text3);border:1px solid #e9e9eb}
+
+.badge-demo{position:relative;display:inline-flex;align-items:center}
+.badge-dot{position:absolute;top:-4px;right:-8px;width:16px;height:16px;background:var(--dot);border-radius:50%;font-size:10px;color:#fff;line-height:16px;text-align:center;font-weight:600}
+
+.menu-row{background:var(--card);border-radius:var(--r-md);border:1px solid var(--border);overflow:hidden;max-width:240px}
+.menu-title{padding:6px 16px;font-size:11px;color:var(--text4);text-transform:uppercase;font-weight:600}
+.menu-it{padding:8px 16px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);border-right:3px solid transparent}
+.menu-it.active{background:var(--th);color:var(--brand);font-weight:600;border-right-color:var(--brand)}
+
+.bc{display:flex;align-items:center;gap:6px;font-size:13px;padding:8px 0}
+.bc .sep{color:var(--text4)}.bc .cur{color:var(--brand);font-weight:600}
+
+/* Layout diagram */
+.layout-diagram{background:var(--card);border-radius:var(--r-md);border:1px solid var(--border);padding:8px;font-size:11px}
+.ld-header{background:#fff;height:28px;line-height:28px;text-align:center;color:var(--text3);margin-bottom:4px;border:1px dashed var(--brand)}
+.ld-body{display:flex;gap:4px;height:160px}
+.ld-sidebar{background:#fff;width:56px;text-align:center;padding:4px;color:var(--text3);border:1px dashed var(--text4);font-size:10px}
+.ld-content{flex:1;display:flex;flex-direction:column;gap:4px}
+.ld-bc{background:#fff;height:20px;line-height:20px;text-align:center;color:var(--text2);font-size:10px;border:1px dashed var(--text4)}
+.ld-main{flex:1;background:#fff;display:flex;gap:3px;padding:3px}
+.ld-tree{background:var(--th);width:48px;text-align:center;font-size:9px;color:var(--text3);padding:4px}
+.ld-area{flex:1;background:var(--bg);border:1px dashed var(--text4);text-align:center;font-size:9px;color:var(--text3);padding:4px}
+</style>
+</head>
+<body>
+<div class="header">
+  <h1>CraftLabs 设计体系 v1.0</h1>
+  <p>基于 Figma「安徽地质博物馆 v2.0」Token · 适配 delivery-platform-ui · 2026-05-19</p>
+</div>
+
+<nav class="nav" id="nav">
+  <a href="#colors" class="active">色彩</a><a href="#type">字体</a><a href="#space">间距&圆角</a><a href="#layout">布局</a><a href="#components">组件</a><a href="#dialog">弹框</a><a href="#pages">页面</a>
+</nav>
+
+<div class="container">
+
+<!-- ===== COLORS ===== -->
+<section class="sec" id="colors">
+  <h2 class="sec-title">🎨 色彩系统</h2>
+  <h3 class="sec-sub">品牌色</h3>
+  <div class="swatches">
+    <div class="sw"><div class="sw-box" style="background:#2C3E6B"></div><div class="sw-info"><div class="sw-name">Brand / Primary</div><div class="sw-hex">#2C3E6B</div><div class="sw-use">按钮、链接、选中态、表头</div></div></div>
+    <div class="sw"><div class="sw-box" style="background:#3D5A99"></div><div class="sw-info"><div class="sw-name">Brand Hover</div><div class="sw-hex">#3D5A99</div><div class="sw-use">主色悬停态</div></div></div>
+    <div class="sw"><div class="sw-box" style="background:#F2F5FC"></div><div class="sw-info"><div class="sw-name">Brand Light</div><div class="sw-hex">#F2F5FC</div><div class="sw-use">表头背景、选中背景、hover</div></div></div>
+  </div>
+
+  <h3 class="sec-sub">背景 & 表面</h3>
+  <div class="swatches">
+    <div class="sw"><div class="sw-box" style="background:#EAEFFA"></div><div class="sw-info"><div class="sw-name">Page Background</div><div class="sw-hex">#EAEFFA</div><div class="sw-use">全局页面底色</div></div></div>
+    <div class="sw"><div class="sw-box" style="background:#FFFFFF;border-color:#ddd"></div><div class="sw-info"><div class="sw-name">Card / Surface</div><div class="sw-hex">#FFFFFF</div><div class="sw-use">卡片、弹窗、菜单背景</div></div></div>
+    <div class="sw"><div class="sw-box" style="background:#F8F9FB"></div><div class="sw-info"><div class="sw-name">Search / Input BG</div><div class="sw-hex">#F8F9FB</div><div class="sw-use">搜索框、输入框背景</div></div></div>
+  </div>
+
+  <h3 class="sec-sub">文字色</h3>
+  <div class="swatches">
+    <div class="sw"><div class="sw-box" style="background:#303133"></div><div class="sw-info"><div class="sw-name">Text Primary</div><div class="sw-hex">#303133</div><div class="sw-use">标题、正文</div></div></div>
+    <div class="sw"><div class="sw-box" style="background:#606266"></div><div class="sw-info"><div class="sw-name">Text Secondary</div><div class="sw-hex">#606266</div><div class="sw-use">标签、说明</div></div></div>
+    <div class="sw"><div class="sw-box" style="background:#909399"></div><div class="sw-info"><div class="sw-name">Text Placeholder</div><div class="sw-hex">#909399</div><div class="sw-use">占位符、辅助</div></div></div>
+    <div class="sw"><div class="sw-box" style="background:#C0C4CC"></div><div class="sw-info"><div class="sw-name">Text Disabled</div><div class="sw-hex">#C0C4CC</div><div class="sw-use">禁用态、图标</div></div></div>
+  </div>
+
+  <h3 class="sec-sub">语义色</h3>
+  <div class="swatches">
+    <div class="sw"><div class="sw-box" style="background:#E6F7EE"></div><div class="sw-info"><div class="sw-name">Success <span style="font-size:11px;color:#1A7A3A">#1A7A3A</span></div><div class="sw-hex">bg: #E6F7EE / border: #A8E6C1</div><div class="sw-use">活跃状态、成功</div></div></div>
+    <div class="sw"><div class="sw-box" style="background:#FEF0F0"></div><div class="sw-info"><div class="sw-name">Danger <span style="font-size:11px;color:#F56C6C">#F56C6C</span></div><div class="sw-hex">bg: #FEF0F0 / border: #FBC4C4</div><div class="sw-use">吊销、删除</div></div></div>
+    <div class="sw"><div class="sw-box" style="background:#FDF6EC"></div><div class="sw-info"><div class="sw-name">Warning <span style="font-size:11px;color:#E6A23C">#E6A23C</span></div><div class="sw-hex">bg: #FDF6EC / border: #F5DAB1</div><div class="sw-use">待处理、警告</div></div></div>
+    <div class="sw"><div class="sw-box" style="background:#D54941"></div><div class="sw-info"><div class="sw-name">Badge / Notification</div><div class="sw-hex">#D54941</div><div class="sw-use">通知红点、NEW标记</div></div></div>
+  </div>
+
+  <h3 class="sec-sub">边框色</h3>
+  <div class="swatches">
+    <div class="sw"><div class="sw-box" style="background:#E8ECF1"></div><div class="sw-info"><div class="sw-name">Border General</div><div class="sw-hex">#E8ECF1</div><div class="sw-use">卡片、表格、菜单边框</div></div></div>
+    <div class="sw"><div class="sw-box" style="background:#E0E3E8"></div><div class="sw-info"><div class="sw-name">Border Input</div><div class="sw-hex">#E0E3E8</div><div class="sw-use">输入框边框</div></div></div>
+  </div>
+</section>
+
+<!-- ===== TYPOGRAPHY ===== -->
+<section class="sec" id="type">
+  <h2 class="sec-title">🔤 字体排版</h2>
+  <div class="card">
+    <div class="type-spec"><div class="type-label">H1 · 22px / 700</div><div class="type-h1">页面主标题 Page Title</div></div>
+    <div class="type-spec"><div class="type-label">H2 · 20px / 700</div><div class="type-h2">区块标题 Section Title</div></div>
+    <div class="type-spec"><div class="type-label">H3 · 16px / 600</div><div class="type-h3">弹框标题 Dialog Title</div></div>
+    <div class="type-spec"><div class="type-label">Body · 14px / 400</div><div class="type-body">正文内容，表格数据，菜单项文字。The quick brown fox jumps over the lazy dog.</div></div>
+    <div class="type-spec"><div class="type-label">Secondary · 13px / 400 · #606266</div><div class="type-sec">次要文字，标签说明，表单标签文字。</div></div>
+    <div class="type-spec"><div class="type-label">Caption · 12px / 400 · #909399</div><div class="type-cap">时间戳、统计数字辅助、页脚信息。</div></div>
+    <div class="type-spec"><div class="type-label">Code/Mono · 12px / 400 · monospace</div><div class="type-mono">01JQNX...a1b2 · SN-2026-A1B2C · kp_2026_q2</div></div>
+  </div>
+  <div class="card"><div class="card-title">字体族</div><code style="font-size:13px;color:var(--text2)">-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif</code></div>
+</section>
+
+<!-- ===== SPACING & RADIUS ===== -->
+<section class="sec" id="space">
+  <h2 class="sec-title">📏 间距 & 圆角 & 阴影</h2>
+  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
+    <div class="card"><div class="card-title">间距</div>
+      <div style="font-size:13px;color:var(--text2);line-height:2"><b>4px</b> 图标文字间距<br><b>8px</b> 按钮/筛选间距<br><b>12px</b> 卡片/统计卡间距<br><b>16px</b> 表单/内容上下<br><b>20px</b> 内容左右/弹框内<br><b>24px</b> 区块间距</div>
+    </div>
+    <div class="card"><div class="card-title">圆角</div>
+      <div style="font-size:13px;color:var(--text2);line-height:2">
+        <div style="border:1px solid var(--brand);border-radius:4px;padding:4px 8px;margin-bottom:6px;display:inline-block">4px 输入框/按钮</div><br>
+        <div style="border:1px solid var(--brand);border-radius:6px;padding:6px 10px;margin-bottom:6px;display:inline-block">6px 卡片/搜索框</div><br>
+        <div style="border:1px solid var(--brand);border-radius:8px;padding:8px 12px;display:inline-block">8px 弹框</div>
+      </div>
+    </div>
+    <div class="card"><div class="card-title">阴影</div>
+      <div style="font-size:12px;color:var(--text2);line-height:2">
+        <div style="box-shadow:0 1px 2px rgba(0,0,0,.03);padding:6px 10px;margin-bottom:6px;border-radius:4px">卡片: 0 1px 2px</div>
+        <div style="box-shadow:0 2px 6px rgba(44,62,107,.2);padding:6px 10px;margin-bottom:6px;border-radius:4px;background:var(--brand);color:#fff">CTA按钮: 0 2px 6px</div>
+        <div style="box-shadow:0 8px 40px rgba(0,0,0,.15);padding:6px 10px;border-radius:4px">弹框: 0 8px 40px</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ===== LAYOUT ===== -->
+<section class="sec" id="layout">
+  <h2 class="sec-title">📐 布局体系</h2>
+  <div class="layout-diagram">
+    <div class="ld-header">Header · 60px 固定 · Logo + 导航 + 搜索 + 🔔³ + ⚙️ + 👤</div>
+    <div class="ld-body">
+      <div class="ld-sidebar">Sidebar<br>232px<br>白底<br>11项</div>
+      <div class="ld-content">
+        <div class="ld-bc">Breadcrumb · 46px · 授权运营 › 当前页面</div>
+        <div class="ld-main">
+          <div class="ld-tree">Tree<br>280px<br>(可选)</div>
+          <div class="ld-area">Main Content · 自适应<br>内边距: 20px左右 / 16px上下</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px">
+    <div class="card"><div class="card-title">尺寸速查</div><div style="font-size:12px;color:var(--text2);line-height:2;font-family:monospace">
+      Header: 60px · Sidebar: 232px · Breadcrumb: 46px<br>Tree: 280px · Content pad: 20px/16px<br>Card gap: 12px · Form gap: 16px
+    </div></div>
+    <div class="card"><div class="card-title">页面类型</div><div style="font-size:12px;color:var(--text2);line-height:2">
+      标准列表: 全宽卡片+筛选+表格<br>Tree+列表: 左侧280px树+右侧列表<br>工作台: 统计卡片+图表+待办<br>详情: 卡片+操作按钮<br>只读: 简单表格
+    </div></div>
+  </div>
+</section>
+
+<!-- ===== COMPONENTS ===== -->
+<section class="sec" id="components">
+  <h2 class="sec-title">🧩 组件</h2>
+
+  <h3 class="sec-sub">按钮</h3>
+  <div class="card"><div class="demo-row">
+    <button class="btn btn-primary">主按钮</button>
+    <button class="btn btn-cta">＋ CTA 按钮</button>
+    <button class="btn btn-cancel">取消</button>
+    <button class="btn btn-danger">删除</button>
+    <button class="btn-link">链接按钮</button>
+  </div></div>
+
+  <h3 class="sec-sub">输入框 & 搜索</h3>
+  <div class="card"><div class="demo-row">
+    <input class="input-demo" placeholder="普通输入框...">
+    <div class="search-demo"><span>🔍</span><input placeholder="搜索..."></div>
+  </div></div>
+
+  <h3 class="sec-sub">状态标签</h3>
+  <div class="card"><div class="demo-row">
+    <span class="tag tag-ok">活跃</span>
+    <span class="tag tag-warn">待处理</span>
+    <span class="tag tag-bad">已吊销</span>
+    <span class="tag tag-gray">已过期</span>
+  </div></div>
+
+  <h3 class="sec-sub">通知 Badge</h3>
+  <div class="card"><div class="demo-row">
+    <span class="badge-demo">🔔<span class="badge-dot">3</span></span>
+    <span style="font-size:13px;color:var(--text2);margin-left:12px">Header 通知红点 · 16px · #D54941</span>
+  </div></div>
+
+  <h3 class="sec-sub">侧边菜单</h3>
+  <div class="card" style="display:flex;gap:12px">
+    <div class="menu-row">
+      <div class="menu-title">业务管理</div>
+      <div class="menu-it">📊 工作台</div>
+      <div class="menu-it active">🛡️ 许可证管理</div>
+      <div class="menu-it">📨 Callback 收件箱</div>
+      <div class="menu-title">集成配置</div>
+      <div class="menu-it">🌐 集成环境</div>
+    </div>
+    <div class="card-title" style="font-size:12px;color:var(--text2)">
+      232px 宽 · 白底<br>
+      菜单高 42-50px<br>
+      选中: #F2F5FC 底<br>
+      右边框 3px #2C3E6B<br>
+      分组标签 11px<br>
+      底部版本号
+    </div>
+  </div>
+
+  <h3 class="sec-sub">面包屑</h3>
+  <div class="card"><div class="bc"><span>授权运营</span><span class="sep">›</span><span class="cur">许可证管理</span></div></div>
+</section>
+
+<!-- ===== DIALOG ===== -->
+<section class="sec" id="dialog">
+  <h2 class="sec-title">🪟 弹框体系</h2>
+  <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px">
+    <div class="card"><div class="card-title">签发许可证 · 560px</div>
+      <div style="background:var(--s-bg);border-radius:4px;padding:8px;font-size:11px;color:var(--text2);line-height:1.8">
+        <b>布局:</b> 6表单字段 + 特性复选框<br>
+        <b>Footer:</b> 取消(左) + 签发(右)<br>
+        <b>圆角:</b> 8px · <b>内边距:</b> 20px<br>
+        <b>表单间距:</b> 16px
+      </div>
+    </div>
+    <div class="card"><div class="card-title">详情查看 · 480-520px</div>
+      <div style="background:var(--s-bg);border-radius:4px;padding:8px;font-size:11px;color:var(--text2);line-height:1.8">
+        <b>布局:</b> 标签(100px右对齐) + 值<br>
+        <b>Footer:</b> 关闭(+吊销按钮,红色)<br>
+        <b>许可证ID:</b> monospace 字体
+      </div>
+    </div>
+    <div class="card"><div class="card-title">新建/编辑 · 480px</div>
+      <div style="background:var(--s-bg);border-radius:4px;padding:8px;font-size:11px;color:var(--text2);line-height:1.8">
+        <b>布局:</b> 2-4表单字段<br>
+        <b>Footer:</b> 取消+保存
+      </div>
+    </div>
+    <div class="card"><div class="card-title">确认/吊销 · 420px</div>
+      <div style="background:#FEF0F0;border:1px solid #FBC4C4;border-radius:4px;padding:8px;font-size:11px;color:var(--bad);line-height:1.8">
+        <b>危险操作区分:</b><br>
+        红色背景提示区 #FEF0F0<br>
+        确认按钮: 红色 #F56C6C<br>
+        内容: 居中图标+说明
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ===== PAGES ===== -->
+<section class="sec" id="pages">
+  <h2 class="sec-title">📄 页面模板</h2>
+  <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px">
+    <div class="card"><div class="card-title">标准列表页</div>
+      <div style="background:var(--s-bg);border-radius:4px;padding:10px;font-size:10px;color:var(--text2);line-height:2;font-family:monospace">
+        ┌──────────────────────────┐<br>
+        │ [统计卡1][统计卡2][...]    │<br>
+        ├──────────────────────────┤<br>
+        │ [🔍搜索][▼下拉] [查询][+新建]│<br>
+        ├──────────────────────────┤<br>
+        │ 表格: ID│名称│状态│操作   │<br>
+        │ ...                      │<br>
+        ├──────────────────────────┤<br>
+        │          共XX条 ‹1 2 3›  │<br>
+        └──────────────────────────┘
+      </div>
+      <div style="font-size:11px;color:var(--text3);margin-top:6px">客户管理 / 合同管理 / 交付管理 / 许可SN</div>
+    </div>
+    <div class="card"><div class="card-title">Tree + 列表页</div>
+      <div style="background:var(--s-bg);border-radius:4px;padding:10px;font-size:10px;color:var(--text2);line-height:2;font-family:monospace">
+        ┌───────┬──────────────┐<br>
+        │ 🔍搜索 │ [统计卡...]   │<br>
+        │ ▸ 项目A│ [筛选+签发]   │<br>
+        │ ▸ 项目B│ 表格...      │<br>
+        │ ▸ 项目C│              │<br>
+        └───────┴──────────────┘
+      </div>
+      <div style="font-size:11px;color:var(--text3);margin-top:6px">许可证管理（280px Tree面板）</div>
+    </div>
+    <div class="card"><div class="card-title">工作台 Dashboard</div>
+      <div style="background:var(--s-bg);border-radius:4px;padding:10px;font-size:10px;color:var(--text2);line-height:2;font-family:monospace">
+        ┌──────────────────────────┐<br>
+        │ [总许可证][活跃][待处理][...]│<br>
+        ├───────────┬──────────────┤<br>
+        │ 📊 趋势图  │ ⚠️ 待办列表   │<br>
+        │           │ · 许可证到期  │<br>
+        │           │ · Callback   │<br>
+        └───────────┴──────────────┘
+      </div>
+    </div>
+    <div class="card"><div class="card-title">详情页</div>
+      <div style="background:var(--s-bg);border-radius:4px;padding:10px;font-size:10px;color:var(--text2);line-height:2;font-family:monospace">
+        ┌──────────────────────────┐<br>
+        │ 详情卡片                  │<br>
+        │ 标签: 值                  │<br>
+        │ 标签: 值                  │<br>
+        │ ...                      │<br>
+        │          [编辑] [删除]    │<br>
+        └──────────────────────────┘
+      </div>
+      <div style="font-size:11px;color:var(--text3);margin-top:6px">合同详情 / 交付详情 / SN详情</div>
+    </div>
+  </div>
+</section>
+
+<footer style="text-align:center;padding:20px;font-size:11px;color:var(--text3);border-top:1px solid var(--border);margin-top:24px">
+  CraftLabs Design System v1.0 · 2026-05-19 · 文档: docs/superpowers/specs/2026-05-19-design-system.md
+</footer>
+</div>
+
+<script>
+document.querySelectorAll('.nav a').forEach(a=>{a.onclick=function(e){e.preventDefault();document.querySelectorAll('.nav a').forEach(x=>x.classList.remove('active'));this.classList.add('active');document.querySelector(this.getAttribute('href')).scrollIntoView({behavior:'smooth'})}});
+</script>
+</body>
+</html>
