Case Study · 设计系统
VerdeX Design System
VerdeX 是我——戴子森——将十三年跨领域设计方法论沉淀为一套可复用设计语言的产物。它不是凭空创造的组件库，而是无数真实项目中对「设计一致性」的反复追问与解答。
Logo
VerdeX 标志由图形标记（Icon Mark）与文字标记（Wordmark）水平组合而成。图形标记为抽象的 V/X 几何形，文字标记为定制无衬线字体。
标志解构
标志由两大元素组成：左侧图形标记传达品牌识别，右侧文字标记传递品牌名称。两者不可拆分后单独使用（Icon Only 除外）。
安全间距
Logo 四周必须保留不小于图形标记高度 50% 的安全区域，确保标志在任何场景下都有足够的呼吸空间。
最小尺寸
为确保标志在各种媒介上的可识别性，Logo 文字标记高度不得低于以下最小尺寸。
| 场景 | 最小高度 | 示例 |
|---|---|---|
| Web / 桌面 | 24px | 导航栏、页脚 |
| 移动端 | 20px | App 顶部栏 |
| 打印 / 大型 | 16mm | 名片、海报 |
| Icon Only | 16px | Favicon、App 图标 |
色彩变体
标志有三种色彩方案，根据背景明暗选择对应的变体，确保始终有足够的对比度。
背景适配
标志在不同明度背景下的使用规则。优先使用浅色背景 + 标准标志，深色背景使用反白版本。不在品牌绿背景上使用反白标志。
错误用法
以下是常见的 Logo 误用场景，请严格避免。保持品牌标志的一致性是设计系统的核心原则之一。
资源文件
| 文件 | 格式 | 用途 |
|---|---|---|
| verdex-logo.svg | SVG | Web / 数字产品首选 |
| verdex-logo-light.svg | SVG | 深色背景反白版 |
| verdex-icon.svg | SVG | Favicon / App 图标 |
| verdex-logo.png | PNG | PPT / 文档 / 邮件签名 |
物料应用
Logo 在名片、信纸、演示文稿、社交媒体、工牌、周边产品及网页导航等实际场景中的规范应用示例。
名片
标准名片尺寸 90×54mm，Logo 置于左上角，信息层级清晰。使用标准标志 + 浅色背景。
zhangming@verdex.design
+86 138-0000-0001
zhangming@verdex.design
+86 138-0000-0001
信纸与信封
A4 信纸（210×297mm）与 DL 信封（220×110mm），Logo 置于页眉，地址信息置于页脚。
中国上海市静安区南京西路 1515 号
hello@verdex.design
演示文稿
16:9 PPT 模板，Logo 置于左上角，品牌绿作为强调色条。标题页与内容页遵循统一的版式网格。
社交媒体
头像使用纯图形标记，封面图使用反白标志 + 品牌绿背景。确保在小尺寸下仍可识别。
工牌
标准工牌 86×54mm 竖版，Logo 置于底部，照片区域占主体。配色可选用品牌绿点缀。
周边产品
Logo 在帆布袋、笔记本等周边产品上的应用。优先使用纯图形标记或反白标志，保持简洁。
网页导航
标准网站导航栏中的 Logo 放置方案。Logo 置于左侧，导航链接居右，背景为浅色或深色。
应用速查表
| 应用场景 | 尺寸 | 标志方案 | 备注 |
|---|---|---|---|
| 名片 | 90 × 54mm | 标准标志 | 浅色 / 深色两版 |
| A4 信纸 | 210 × 297mm | 标准标志 | 页眉左上角 |
| DL 信封 | 220 × 110mm | 标准标志 | 左上角 + 寄件人地址 |
| PPT 封面 | 16:9 | 标准标志 | 品牌绿强调条 |
| 社交头像 | ≥ 400px | 纯图形标记 | 品牌绿底色 |
| 社交封面 | 1500 × 500px | 反白标志 | 深色背景居中 |
| 工牌 | 86 × 54mm | 标准标志 | 竖版 / 横版 |
| 帆布袋 | — | 标准标志 | 居中印刷 |
| 笔记本 | A5 | 反白标志 | 深灰硬壳压印 |
| 网页导航栏 | ≥ 48px 高 | 标准 / 纯图形 | 浅色 / 深色双版 |
色彩
VerdeX 色彩系统以品牌绿 #00AC80 为核心，构建了语义化的颜色令牌体系，覆盖浅色与深色两种模式。
品牌色
主色及其衍生色阶，用于 CTA、链接、选中态等关键交互。
语义色板 — 浅色模式
语义令牌在不同主题下自动切换，保证可读性与对比度。
| 令牌 | 预览 | CSS 变量 | 值 |
|---|---|---|---|
| Background | --bg | oklch(99% .002 180) | |
| Surface | --surface | oklch(100% 0 0) | |
| Foreground | --fg | oklch(18% .015 180) | |
| Muted | --muted | oklch(50% .015 175) | |
| Border | --border | oklch(90% .008 175) |
功能色
成功、警告、危险、信息四种状态色，用于反馈与标记。
排版
系统原生字体栈，确保跨平台一致的阅读体验。标题使用 SF Pro Display，正文使用 SF Pro Text，等宽使用 JetBrains Mono。
字体族
| 用途 | CSS 变量 | 字体栈 |
|---|---|---|
| Display | --font-display | -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif |
| Body | --font-body | -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif |
| Mono | --font-mono | 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace |
字号层级
组件
覆盖表单、导航、反馈、数据展示等场景的核心 UI 组件，所有组件均遵循统一的设计令牌体系。
按钮 Button
五种变体、四种尺寸、完整的交互态（hover / focus / disabled）。
输入框 Input
文本输入、下拉选择、文本域，及验证态。
卡片 Card
内容容器，支持 hover 抬升与多种布局。
对话框 Modal
居中弹出的模态对话框，带背景模糊遮罩。
标签页 Tabs
面包屑 Breadcrumbs
徽章 Badge
界面模式
由基础组件组合而成的高阶界面模式，覆盖仪表盘、数据表格、统计卡片等常见业务场景。
统计卡片
用于仪表盘首页的关键指标展示。
数据表格
支持表头固定、行 hover、等宽数字对齐。
| 项目名称 | 负责人 | 状态 | 进度 | 预算 |
|---|---|---|---|---|
| VerdeX Design System | 张明 | 进行中 | 78% | ¥120,000 |
| 移动端适配 | 李华 | 规划中 | 15% | ¥85,000 |
| 自动化测试 | 王芳 | 待审核 | 92% | ¥45,000 |
| 文档站点 | 陈磊 | 进行中 | 60% | ¥68,000 |
| CI/CD 集成 | 赵雪 | 已阻塞 | 33% | ¥52,000 |
仪表盘卡片
带图表的看板卡片，常用于数据概览页面。