App 图标家族
母题=行走穿山甲（实心鳞甲剪影，朝右）置于 clay 渐变圆角方。矢量单源 design/assets/app-icon.svg，多尺寸直接引用同一文件（零漂移，非内联副本）。
多尺寸
104 · 64 · 40 · 28
104 · 主图标644028Logo 锁版
图标 mark + 字标水平锁版。浅色背景用主锁版 logo-mark.svg，深色背景用反白锁版 logo-mark-white.svg；整体横版字标 logo-wordmark.svg。矢量单源 design/assets/。
主锁版 / 反白锁版
logo-mark.svg · logo-mark-white.svg
横版字标
logo-wordmark.svg · 240×56
clay · 黏土铜色阶
品牌主色阶（穿山甲鳞甲的暖大地色）。--clay-500 为品牌主色，浅色主题 accent 取 500、深色取 400。
sand · 沙米中性阶
暖中性色阶。浅色画布 --sand-50，深色画布暖 espresso --sand-950（非纯黑）。
语义色相
地色调校过的三组状态色相：绿=连接/安全，琥珀=连接中/提示，红=断开/错误。
语义 token
界面只引用这一层（浅/深自动切换）。切右上主题看色值实时变化。
背景 / 表面
--bg · --surface · --overlay前景 / 文本
--fg1/2/3 · --fg-on-accent品牌 accent
--accent(+hover/press/subtle/border)描边 / 光环
--border · --border-strong · --ring状态语义
success / warning / danger (+ -subtle)暗色主题表面
暗色画布=暖 espresso --sand-950（非纯黑）。表面层级 --bg（应用画布）→ --surface（卡片/面板）→ --surface-2（嵌套层），逐级提亮保持暖调。此卡固定演示暗色，不随右上主题切换。
表面层级（固定暗色演示）
--bg · --surface · --surface-2正文字体 · Manrope
界面与正文主力（--font-sans，权重 400–700）。人文几何，中英混排稳定。示例中英分行、单句不并排。
Body · Manrope
--font-sans · 400 / 500 / 600 / 700一键连接，极速畅连
轻盈、亲和、即开即用的网络加速。
Body 16px — 全球 80+ 加速线路，智能选择最快节点，稳定不掉线。
Small 14px — 适用于次要说明、列表副标题与表单提示文字。
中文字体 · Noto Sans SC
中文专用伴随字体（--font-cjk，权重 400 / 500 / 700）。与 Manrope / Sora 同框时保证中文字形与字重一致。
CJK · Noto Sans SC
--font-cjk · 400 / 500 / 700穿山甲 · 守护每一次连接
无需配置，打开即用。智能分流，海外应用秒开。
隐私保护 · 我们不记录你的浏览数据 · 端到端加密
Display 字体 · Sora
标题、营销大字、Logo 字标（--font-display，权重 600 / 700）。几何友好，字距收紧 -0.02em。
Display · Sora
--font-display · 600 / 700极速畅连 Smooth
极速 · 稳定 · 省心
等宽数据字体 · JetBrains Mono
IP / 速率 / 时长 / 密钥等数据读数（--font-mono，开 tabular nums 等宽对齐，数字不跳动）。
Mono · JetBrains Mono
--font-mono · tnum字号梯度
Display 用 Sora，正文/UI 用 Manrope，中文伴随 Noto Sans SC，数据用 JetBrains Mono。示例单语显示（中英分行，非并排同句）。
圆角 Radius
偏大圆角传递亲和。按钮全胶囊 --radius-full，卡片 lg–xl，输入 md。
间距 Spacing
4px 基准网格。
阴影 Shadow
柔和暖调（rgba(45,30,20,…)），绝不用冷灰阴影。
按钮 · .btn
全胶囊圆角 · hover 主色加深 · press 缩放 .97 · focus clay 光环。变体 .btn-primary/-ghost/-subtle/-danger，尺寸 .btn-lg/-icon/-block。
变体
.btn + .btn-primary/-ghost/-subtle/-danger尺寸 / 形态
.btn-lg · .btn-icon · .btn-block禁用态
:disabled · .is-disabled卡片 · .card
surface 底 + border + radius-xl + shadow-sm。.card-flush 用于列表容器（内容自带 padding）。
内容容器 · .view-body
桌面客户端内容视图统一宽度容器：默认居中 600px（账户/设置/联系我们/统计/订单/通知/邀请等单栏页），.is-wide 修饰 840px（购买套餐等多列网格页）。padding 固定 space-5 space-6 space-6。对齐 Flutter PageBody(client/lib/widgets/page_body.dart)。
默认 · 600px
.view-body宽 · 840px
.view-body.is-wide输入 · .input / .field / .flabel
强描边 + radius-md + focus clay 光环。状态 .is-focused / .is-error / :disabled。
胶囊 · .pill / .badge
状态用「色点 + 文字胶囊」，非 emoji。状态修饰 .is-success/-warning/-danger/-neutral，变体 .pill-accent / .pill-outline。.badge 为 .pill 语义别名。
状态修饰
.pill.is-*（含 .dot）变体 / 别名
.pill-accent · .pill-outline · .badge语言下拉 · .langsel
不依赖原生 <select>：触发药丸 .langsel-trigger + 自控绝对定位菜单 .menu / .menu-item（选中态 .is-selected）。点触发按钮可实际展开/收起。
核心连接按钮 · .connect-btn
产品招牌组件：圆形一键连接键，三态 .is-off / .is-connecting / .is-on。背景在渐变↔纯色间切换仅过渡 box-shadow/background-color（禁 transition:all，否则背景计算失效）。轨道环用内联 <svg>，圆内为图标 + 标签 / 计时。镜像 client/lib/widgets/connect_button.dart。
服务器列表行 · .server-row
节点列表一行：国家码块（2 字母，绝不用 emoji 国旗）+ 名称/子名 + 属性胶囊（.pill-outline）+ 延迟（--font-mono·按值变色）+ 信号条 + 选中/推荐/不可用态。镜像 client/lib/widgets/server_tile.dart。放进 .card.card-flush 列表容器。
列表行
.server-row · .is-selected · .is-down智能选择推荐行
.server-row.is-smart · zap + 推荐胶囊状态徽章 · .pill 场景
徽章复用胶囊原子 .pill（见「胶囊 .pill / .badge」），此处按业务场景分组：连接态（色点 + 文字，非 emoji · 铁律 #7）· 套餐 · 节点属性。镜像 client/lib/widgets/status_pill.dart。
连接态
.pill.is-success/-warning/-danger/-neutral分流动作
直连 is-success · 走隧道 is-warning · 拒绝 is-danger套餐
.pill-accent · .pill.is-neutral节点属性
.pill-outline · .pill.is-neutral（数据）复合输入 · 开关 · 图标框 · Toast
对齐线上 pangolin_field.dart / dtoggle / pangolin_toast.dart。.field-box 复合输入（前置图标 + 裸 input + 后置槽），.toggle 开关，.segswitch 二选一段控开关（支付渠道/币种），.icon-box 图标框，.status-dot 状态点，.toast 轻提示。
额度卡 · 指标卡
对齐线上 quota_card.dart（免费版今日额度：倒计时收缩条 + 「免费版」短标签 + 三档阈值；无绿色「已解锁」态，线上以倒计时收缩条表达）与统计 .metric 指标瓦片。
设备行 · 设置行
对齐线上 DevicesScreen / settings_page.dart。.device-row（图标框 + 名 + 最后在线 + 本机/移除/⋯）与 .setting-row（图标框 + 标题 + 副标 + trailing：chevron / 开关 / 值）。
设备管理
.device-row设置
.setting-row套餐横幅 · 侧栏会员卡
对齐线上 _PlanBanner（账户页）与 plan_badge_card.dart（桌面侧栏底部）。免费=surface 卡；.is-pro=clay 渐变。
侧栏会员卡
.plan-badge更新条 · 底部 Tab · 侧栏项
app-chrome 组件。.update-banner（jiu 式更新顶部横条，对齐 UpdateBanner）、.tabbar/.tab（移动底部 4-Tab，对齐 bottom_tab_bar.dart）、.nav-item（桌面/iPad 侧栏项，对齐 nav_sidebar.dart）。
套餐卡 · .plan-card
购买套餐档位卡。常规档 surface 底；.is-featured 走 clay 渐变高亮（年付/最优惠），内含反色 CTA，顶部可挂 .plan-pop「最受欢迎」浮标。镜像 client/lib/widgets/plan_card.dart。金额仅展示，扣款以 pay 服务为准。
支付方式 · .pay-method
底部弹层选择支付渠道，一行 = leading 图标 + 标题 + trailing chevron。资金外流（拉起支付宝 / 展示加密地址），App 内无卡号录入表单（设计铁律 #10）。生产渠道：哪吒聚合（支付宝）+ 加密货币 USDT。
明细行 · .kv-row
可复制键值行，用于加密支付态展示「网络 / 收款地址 / 精确金额」。值用等宽字（--font-mono + tabular nums），右侧复制按钮。
结果态 · .result
支付终态：居中大图标 + 标题 + 说明。成功用 --success，失败加 .is-fail 走 --danger。
Lucide 图标库 —
细线条 · 2px stroke · 圆角端点。sprite 单源 icons.js，用法 <svg class="ic"><use href="#i-<name>"/></svg>。