diff --git a/design/prototype/index.html b/design/prototype/index.html new file mode 100644 index 0000000..777fbbb --- /dev/null +++ b/design/prototype/index.html @@ -0,0 +1,407 @@ + + + + + +穿山甲 Pangolin · 设计系统 + + + + + + +
+
穿山甲 Pangolin
+ 设计系统登记簿 · Prototype + +
+ +
+ + +
+ +
+

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)
+
+ + +
+

字号梯度

+

Display 用 Sora，正文/UI 用 Manrope，中文伴随 Noto Sans SC，数据用 JetBrains Mono。示例单语显示（中英分行，非并排同句）。

+
+
--text-display-xl 48极速畅连Fast & Stable
+
--text-display 36网络加速Network Boost
+
--text-h1 30一键连接One-tap Connect
+
--text-h2 24智能选线Smart Routing
+
--text-h3 20隐私保护Privacy First
+
--text-body-lg 18稳定加速线路，即开即用。Stable links, ready instantly.
+
--text-body 16正文与界面主力字号，兼顾中英排版。Body copy for UI and long-form reading.
+
--text-sm 14次要说明与表单标签。Secondary hints and form labels.
+
--text-caption 12辅助注释与胶囊文字。Captions and pill text.
+
.t-overline连接状态Connection Status
+
.t-mono 数据103.119.13.48 · 42 ms · 1.28 GB
+
+
+ + +
+

圆角 Radius

+

偏大圆角传递亲和。按钮全胶囊 --radius-full，卡片 lg–xl，输入 md。

+
+
sm · 6
+
md · 10
+
lg · 14
+
xl · 20
+
2xl · 28
+
full · 999
+
+
+ +
+

间距 Spacing

+

4px 基准网格。

+
+
1 · 4
+
2 · 8
+
3 · 12
+
4 · 16
+
5 · 20
+
6 · 24
+
8 · 32
+
10 · 40
+
12 · 48
+
16 · 64
+
+
+ +
+

阴影 Shadow

+

柔和暖调（rgba(45,30,20,…)），绝不用冷灰阴影。

+
+
sm
+
md
+
lg
+
xl
+
focus
+
+
+ + +
+

按钮 · .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）。

+
+
+
当前节点
+
香港 · HK 加速线路
+
稳定 · 无日志 · 隐私保护
+
+
+
HK · 香港
+
JP · 东京
+
SG · 新加坡
+
+
+
+ +
+

输入 · .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
+ PRO 会员 + 流媒体 + P2P + badge 别名 +
+
+ +
+

语言下拉 · .langsel

+

不依赖原生 <select>：触发药丸 .langsel-trigger + 自控绝对定位菜单 .menu / .menu-item（选中态 .is-selected）。点触发按钮可实际展开/收起。

+
+
+ + +
+ ↖ 默认展开演示，可点击触发按钮收起 / 展开 +
+
+ + +
+

Lucide 图标库 —

+

细线条 · 2px stroke · 圆角端点。sprite 单源 icons.js，用法 <svg class="ic"><use href="#i-<name>"/></svg>。

+
+
+
+
+ + + + + + diff --git a/docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md b/docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md index a89488b..a33c343 100644 --- a/docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md +++ b/docs/superpowers/plans/2026-07-07-frontend-ds-refactor.md @@ -45,7 +45,7 @@ 只引 `var(--token)` 的 CSS（镜像 `design/preview/` 现有规格 + client widgets 实现语义） - [x] 1.4 `design/prototype/icons.js`：SVG sprite 单源（``）， 收敛现有分散图标（website Icon.astro / usercenter icons.tsx / Flutter pangolin_icons.dart 三处的图标集） -- [ ] 1.5 `design/prototype/index.html`：活登记页——三…两主题（light/dark）切换 + `data-swatches` 声明式色板 + +- [x] 1.5 `design/prototype/index.html`：活登记页——三…两主题（light/dark）切换 + `data-swatches` 声明式色板 + 字号梯度 + 圆角/间距/阴影 + 全部公用组件原子展示卡 + 图标库全展示。**每个 atom 必须在此登记** - [ ] 1.6 `design/ui_kits/` 的 jsx/css 端原型：提炼进 prototype 后**删除 jsx 组件副本**（消除与 「禁向 design/ 提组件代码副本」的冲突 + 漂移源）；保留必要的屏级 HTML 布局参考迁进 `prototype/screens/`