wangjia/pangolin
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases 19 Wiki Activity
Files
b2cb20be47345d936fa0fc0fff359ad1725ae467
pangolin/design
T
History
wangjia b2cb20be47 chore(design): 删除 design/flutter fork，更新 .gitignore 
删除 design/flutter/（21 个文件）：
- Flutter token/组件的 canonical 实现已在 client/lib/
- Token 数值层改由 design/codegen/gen_flutter_tokens.mjs codegen
- 设计规格由 design/preview/ specimens + SKILL.md 表达

.gitignore 新增：
- client/android/local.properties、client/android/app/src/main/java/
- client/ios/Flutter/ephemeral/、client/pubspec.lock
- .claude/worktrees/（临时工作目录）

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-15 19:11:01 +08:00
..
assets
feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)
2026-06-11 23:57:57 +08:00
codegen
chore(design): 建立 token 单源管线，删除 design/flutter fork
2026-06-15 18:27:22 +08:00
preview
feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)
2026-06-11 23:57:57 +08:00
scraps
feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)
2026-06-11 23:57:57 +08:00
server
merge: maestro/tsk_x7wrlA87orsY [devices + 订阅校验中间件] (tsk_VRzw-af__qWx)
2026-06-13 15:09:51 +08:00
ui_kits
feat: CI 流水线 — lint + 单测 + OpenAPI 校验 + 脱敏扫描 + 镜像构建 [tsk_P5b5nIrEsfrV]
2026-06-13 01:19:28 +08:00
uploads
feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)
2026-06-11 23:57:57 +08:00
_adherence.oxlintrc.json
feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)
2026-06-11 23:57:57 +08:00
_ds_bundle.js
feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)
2026-06-11 23:57:57 +08:00
_ds_manifest.json
feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)
2026-06-11 23:57:57 +08:00
CLAUDE.md
feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)
2026-06-11 23:57:57 +08:00
colors_and_type.css
feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)
2026-06-11 23:57:57 +08:00
README.md
feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)
2026-06-11 23:57:57 +08:00
SKILL.md
chore(design): 建立 token 单源管线，删除 design/flutter fork
2026-06-15 18:27:22 +08:00

README.md

穿山甲 VPN · Pangolin VPN — Design System

极简、轻量、亲和的跨平台网络加速品牌设计系统。暖大地色(穿山甲鳞甲)+ 大量留白 + 双语界面。

这是一套从零创建的品牌设计系统(无既有代码库 / Figma / Logo 输入)。所有视觉决策记录于本文件,所有 token 见 colors_and_type.css,可预览的卡片在 preview/,可拼装的高保真界面在 ui_kits/。

1. 产品语境 Product Context

穿山甲(Pangolin) 是一款面向大众的消费级网络加速应用。核心价值主张:一键连接、智能选线、即开即用。品牌人格定位为「极简轻量、亲和易用」——不堆砌技术参数,不制造焦虑,用干净的留白和温暖的大地色传递「顺畅又轻松」的感觉。

脱敏说明:面向国内市场,品牌与宣传统一定位为「网络加速 / 体验优化 + 隐私保护」,不使用「VPN / 翻墙 / 窜 / 自由穿越」等敏感词。产品主名统一为「穿山甲」(不带 VPN 后缀);VPN 仅在必要技术文档出现。

名字 穿山甲(Pangolin) 取鳞甲「防护 / 安全」之意。视觉系统提炼出行走穿山甲剖面作为核心图形母题。

覆盖的产品界面(UI Kits)

  1. 移动 App(iOS / Android)—— 登录/注册、首次引导、连接主界面、服务器列表、统计、账户中心(套餐/设备/兑换/联系)。ui_kits/mobile/
  2. 桌面客户端(Windows / macOS)—— 登录/注册、首次引导、连接面板、节点、统计、账户中心、联系我们、设置。ui_kits/desktop/
  3. iPad 客户端 —— 侧栏分栏布局(连接/节点/统计/账户),触控尺寸,复用移动端原子。ui_kits/tablet/

用户后台(账户 / 套餐 / 设备 / 兑换)已直接集成进移动与桌面客户端(因支付走外部渠道,独立 Web 后台冗余,故不再单列)。

生产前端:Flutter

生产代码使用 Flutter。设计令牌的 Dart 版本见 flutter/pangolin_theme.dart(与 colors_and_type.css 一一对应:颜色、间距、圆角、动效、文字、明/暗 ThemeData)。ui_kits/ 的 React/HTML 为视觉规范参考,Flutter 实现以其为蓝本。详见 flutter/README.md。

输入来源 Sources

  • 无外部素材。本系统完全从品牌简述「穿山甲 vpn软件」与一轮用户访谈问题推导而来。
  • 若后续有真实 Logo / Figma / 代码库,请通过 Import 菜单附上,我会据此校准。

2. 内容基础 Content Fundamentals

界面为中英双语,中文为主、英文为辅。重要:真实产品在任一时刻只显示一种语言——用户在设置/账户页通过「中文 / EN」段控切换,中英不会同时出现。设计系统 preview/ 卡片里出现的中英并排,仅用于同时展示两套字体规范(specimen),不代表产品 UI。三个 UI Kit 均已实现单语言切换。

  • 人称:对用户用「你」,自称用「我们」。亲切、平等,不端着。例:「我们不记录你的浏览数据」。
  • 语气:简短、肯定、轻松。动词开头的祈使句优先:「一键连接」「选择节点」「立即升级」。
  • 大小写:英文标题用 Title Case 或全大写小字 overline(PANGOLIN、ACCOUNT);正文句首大写。中文不加句号于短标题/按钮。
  • 数字与单位:数据读数用等宽字体,数值大、单位小且着 clay 主色(86.4 Mb/s、24 ms)。
  • Emoji:不使用 emoji 作装饰。状态一律用「色点 + 文字胶囊」表达。
  • 专业术语:保留行业通用英文词(WireGuard、Kill Switch、P2P),不强行翻译,降低理解成本。
  • Vibe:像一位靠谱又不啰嗦的朋友。文案示例:
    • 连接态:已连接 Connected / 连接中 Connecting / 未连接 Off
    • 营销:极速畅连 Smooth、极速 · 稳定 · 省心
    • 隐私承诺:我们不记录你的浏览数据 · 端到端加密

3. 视觉基础 Visual Foundations

色彩 Color

  • 主色 Clay / Copper(--clay-500 #B96A3D):温暖的黏土铜色,呼应穿山甲鳞甲与大地。用于主按钮、强调、链接、选中态。完整 50–900 色阶见 token。
  • 中性 Sand / Taupe:暖灰中性 50–950,承担文本与表面。--sand-950 #14110E 是深色画布(暖 espresso,非纯黑——保持温度)。
  • 语义色(大地调校):success #5B8C5A(连接/安全)、warning #D69A3C(连接中)、danger #C0533B(断开/错误)。各配 *-subtle 浅底。
  • 双主题:浅色以沙米白(--sand-50)为画布、纯白为卡面;深色以暖 espresso 为画布、#221E19 为卡面。切换方式:<html data-theme="dark">。所有颜色都走语义 token,组件天然双主题。
  • 影像基调(若引入照片):偏暖、自然光、低饱和大地色,可加细微胶片颗粒;避免冷色与高对比霓虹。

字体 Type

  • Display — Sora(600/700):标题、营销大字、Logo 字标。几何但不冰冷。
  • Body / UI — Manrope(400–700):界面与正文主力。
  • CJK — Noto Sans SC(400/500/700):中文专用伴随字体,与上面两者度量协调。
  • Mono — JetBrains Mono:IP、速率、时长、密钥等数据读数,启用 tabular nums。
  • 字阶:48 / 36 / 30 / 24 / 20 / 18 / 16 / 14 / 12。标题字距收紧(-0.02em),overline 字距放宽(0.08em)。
  • ⚠️ 字体说明:四款均为开源字体(Google Fonts),作为本品牌正式选定字体,非临时替代。若你已有授权品牌字体,告诉我替换。

间距与网格 Spacing

  • 4px 基准网格。常用:4 / 8 / 12 / 16 / 24 / 32 / 48 / 64。
  • 留白慷慨——这是「极简轻量」气质的关键,卡片内边距偏大(16–24px),区块间距 32–48px。

圆角 Radius

  • 偏大圆角传递亲和:sm 6 / md 10 / lg 14 / xl 20 / 2xl 28 / full。
  • 按钮多用 full(胶囊);卡片用 lg–xl;输入框用 md。

阴影与高度 Elevation

  • 暖色调投影(rgba(45,30,20,…)),柔和克制,不用冷灰阴影。
  • sm 卡片静置、md 浮起卡片/按钮悬浮、lg 弹窗/抽屉、xl 模态。
  • 深色主题下投影改为深黑透明并加强。
  • 焦点环:0 0 0 4px var(--ring)(clay 半透明),用于输入与可聚焦元素。

边框 Borders

  • 细边 1–1.5px,色用 --border(浅:sand-200 / 深:白 10% 透明)。强调边 --border-strong。
  • 卡片优先「surface + shadow-sm + 极淡边框」组合,而非重边框。

动效 Motion

  • 缓动:进出场用 --ease-out cubic-bezier(.22,1,.36,1),状态切换用 --ease-in-out。
  • 时长:fast 140ms(hover/press)、base 220ms(开关/展开)、slow 360ms(页面/抽屉)。
  • 风格:淡入 + 轻微位移为主,无浮夸弹跳。连接中状态用环形 loader 旋转;连接成功用色环扩散(box-shadow 外环)。

交互态 States

  • Hover:主色按钮加深一档(--accent-hover);幽灵按钮显示 --accent-subtle 浅底;列表行显示 sand 浅底。
  • Press:轻微缩放(scale .97)+ 再深一档(--accent-press)。
  • Focus:clay 焦点环(见上)。
  • Selected:--accent-subtle 底 + clay 文字/勾选。
  • Disabled:sand-200 底 + sand-400 字,not-allowed。

透明与模糊 Transparency / Blur

  • 克制使用。仅用于:导航/工具栏滚动时的毛玻璃(backdrop-filter: blur(12px) + 表面色 80% 透明)、模态遮罩(--overlay)。
  • 不做大面积玻璃拟态。

布局规则 Layout

  • 移动端:顶栏 + 中部巨型连接键 + 底部节点条/Tab,关键操作单手可达。
  • 桌面端:紧凑窄窗(~360–420px 宽),托盘风格;或带左侧栏的标准窗口。
  • Web 后台:左侧导航 + 内容区,最大内容宽度约束(~1080px),大量留白。
  • 固定元素:移动端底部 Tab、桌面端标题栏、Web 顶栏(滚动毛玻璃)。

背景 Backgrounds

  • 以纯色画布为主(沙米白 / 暖 espresso),不滥用渐变。
  • 渐变仅出现在:App 图标、PRO 套餐卡、连接成功的氛围光晕等少数强调处,且只在 clay 同色系内(clay-600 → clay-800)。
  • 不使用紫蓝渐变、不使用重复纹理贴图。

4. 图标系统 Iconography

  • 图标库:Lucide(细线条、2px stroke、圆角端点)。与「极简轻量、亲和」气质一致。经 CDN 引入,非本地字体: 
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<i data-lucide="power"></i>
<script>lucide.createIcons()</script>
    在 React/JSX 中可用 lucide-react 或直接渲染 <i data-lucide> 后调用 createIcons()。
  • 常用图标:power(连接)、shield-check(已保护)、globe(节点)、zap(极速)、settings、loader(连接中,旋转)、check(选中)、chevron-right、map-pin、user、credit-card。
  • ⚠️ 替代说明:本品牌无自有图标字体,Lucide 为选定的最接近匹配(同等线宽/圆角风格)。如需自有图标集请提供。
  • 国旗/国家:服务器列表不用 emoji 国旗(跨平台渲染不一致),改用 sand 底圆角方块内的 2 字母国家码(HK / JP / SG / US),选中态翻转为 clay 底白字。
  • Unicode 装饰字符:不使用。
  • 品牌图形:核心母题为「行走穿山甲」(实心鳞甲剪影,朝右),见 assets/logo-*.svg 与 assets/app-icon.svg,不要用 emoji 或随手 SVG 替代,直接复制。

5. 资产清单 Assets

assets/ 内:

  • logo-mark.svg — 主标记(clay 行走穿山甲,鳞甲剪影,朝右)
  • logo-mark-white.svg — 反白标记(深色背景用,奶油色身体 + clay 鳞脊)
  • logo-mark-mono.svg — 单色标记(currentColor,内联使用时随文字色)
  • logo-wordmark.svg — 标记 + 字标横版锁版(穿山甲 / PANGOLIN)
  • app-icon.svg — App 图标(clay 渐变圆角方 + 白色穿山甲)

⚠️ Logo 为本系统新创建的图形(用户选择「抽象几何标记 + 字标」,迭代后定为行走穿山甲剪影,朝右)。若你有正式 Logo,请替换 assets/ 内文件并告知我。

6. 索引 Index — 本仓库文件清单

路径 内容
README.md 本文件 — 品牌语境、内容基础、视觉基础、图标系统、索引
colors_and_type.css 唯一真相来源:色阶、语义 token(浅/深)、字体、字阶、间距、圆角、阴影、动效
flutter/ 生产令牌 + 组件雏形:pangolin_theme.dart(明/暗 ThemeData + 全量令牌)、widgets/(连接键/服务器行/套餐卡/按钮/状态胶囊 Dart 雏形)+ 接入说明
assets/ Logo 各变体 + App 图标(SVG)
preview/ 设计系统卡片(色彩 / 字体 / 间距 / 组件 / 品牌)— 渲染于 Design System 标签页
ui_kits/mobile/ 移动 App UI Kit(登录/引导/连接/节点/统计/账户中心)
ui_kits/desktop/ 桌面客户端 UI Kit(登录/引导/连接/节点/统计/账户/联系/设置)
ui_kits/tablet/ iPad 客户端 UI Kit(侧栏分栏布局,复用 mobile 原子)
ui_kits/website/ 官网宣传页 UI Kit(产品/定价/下载/文档/Blog,响应式 + 注册引导)
ui_kits/usercenter/ Web 用户中心 UI Kit(概览/订阅导入/兑换/邀请返利)
SKILL.md Agent Skill 入口(可下载用于 Claude Code)

每个 ui_kits/<product>/ 内含 README.md、index.html(可点击 demo)与若干 *.jsx 组件。

Reference in New Issue View Git Blame Copy Permalink