VerdeX 设计品牌 — Leonardo × VerdeX | 独立设计语言与系统

品牌资产

Logo

VerdeX 标志由图形标记（Icon Mark）与文字标记（Wordmark）水平组合而成。图形标记为抽象的 V/X 几何形，文字标记为定制无衬线字体。

标志解构

标志由两大元素组成：左侧图形标记传达品牌识别，右侧文字标记传递品牌名称。两者不可拆分后单独使用（Icon Only 除外）。

图形标记 Icon Mark

文字标记 Wordmark

安全间距

Logo 四周必须保留不小于图形标记高度 20% 的安全区域，确保标志在任何场景下都有足够的呼吸空间。

X X X X

安全间距 X = 图形标记高度 × 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 置于左上角，信息层级清晰。使用标准标志 + 浅色背景。

张明 Nancy

产品设计总监
zhangming@verdex.design
+86 138-0000-0001

标准名片

90 × 54mm · 标准标志 · 左上对齐

张明 Nancy

产品设计总监
zhangming@verdex.design
+86 138-0000-0001

深色名片

90 × 54mm · 反白文字 · 品牌绿图形标记

信纸与信封

A4 信纸（210×297mm）与 DL 信封（220×110mm），Logo 置于页眉，地址信息置于页脚。

A4 信纸

210 × 297mm · Logo 页眉 · 正文线框占位

STAMP

VerdeX Design Studio
中国广州市白云区尖彭路 001 号
hello@verdex.design

DL 信封

220 × 110mm · Logo + 寄件人地址 · 右下对齐

演示文稿

16:9 PPT 模板，Logo 置于左上角，品牌绿作为强调色条。标题页与内容页遵循统一的版式网格。

封面页

16:9 · 品牌绿强调条 · 标题 + 副标题

内容页

16:9 · 细绿线分割 · 正文 + 图表区域

社交媒体

头像使用纯图形标记，封面图使用反白标志 + 品牌绿背景。确保在小尺寸下仍可识别。

头像

400 × 400px · 纯图形标记 · 品牌绿底色

封面图

1500 × 500px · 反白标志居中 · 深色背景

工牌

标准工牌 86×54mm 竖版，Logo 置于底部，照片区域占主体。配色可选用品牌绿点缀。

👤

陈磊

高级前端工程师

标准工牌

86 × 54mm · 竖版 · 照片 + 姓名 + Logo

👤

李华

UX 设计师

横版工牌

横版布局 · 品牌绿分割线 · 活动/会议场景

周边产品

Logo 在帆布袋、笔记本等周边产品上的应用。优先使用纯图形标记或反白标志，保持简洁。

帆布袋

Logo 居中印刷 · 米白色帆布 · 单色或双色

笔记本

A5 硬壳 · 深灰底色 · 反白标志压印

笔类 / 小型物品

纯图形标记 · 多色笔身适配 · 最小 7mm 高度

网页导航

标准网站导航栏中的 Logo 放置方案。Logo 置于左侧，导航链接居右，背景为浅色或深色。

浅色导航

标准标志 · 白底 · 左对齐 · 48px 高度

深色导航

反白标志 · 深色底 · 品牌绿图形保持彩色

移动端导航

纯图形标记 · 高度 ≥ 20px · 窄屏适配

应用速查表

应用场景	尺寸	标志方案	备注
名片	90 × 54mm	标准标志	浅色 / 深色两版
A4 信纸	210 × 297mm	标准标志	页眉左上角
DL 信封	220 × 110mm	标准标志	左上角 + 寄件人地址
PPT 封面	16:9	标准标志	品牌绿强调条
社交头像	≥ 400px	纯图形标记	品牌绿底色
社交封面	1500 × 500px	反白标志	深色背景居中
工牌	86 × 54mm	标准标志	竖版 / 横版
帆布袋	—	标准标志	居中印刷
笔记本	A5	反白标志	深灰硬壳压印
网页导航栏	≥ 48px 高	标准 / 纯图形	浅色 / 深色双版

基础令牌

色彩

VerdeX 色彩系统以品牌绿 #00AC80 为核心，构建了语义化的颜色令牌体系，覆盖浅色与深色两种模式。

品牌色

主色及其衍生色阶，用于 CTA、链接、选中态等关键交互。

accent-soft

oklch(95% .04 170)

accent

oklch(62% .17 170)

accent-hover

oklch(55% .17 170)

语义色板 — 浅色模式

语义令牌在不同主题下自动切换，保证可读性与对比度。

令牌	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)

功能色

成功、警告、危险、信息四种状态色，用于反馈与标记。

Success

oklch(58% .16 155)

Warning

oklch(72% .16 85)

Danger

oklch(55% .18 25)

Info

oklch(58% .16 255)

基础令牌

排版

系统原生字体栈，确保跨平台一致的阅读体验。标题使用 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

字号层级

text-6xl · Display3.75rem / 1.05

敏捷开发，快速迭代

text-5xl · H13rem / 1.1

设计系统驱动产品

text-4xl · H22.25rem / 1.2

组件化是效率的基石

text-3xl · H31.875rem / 1.3

从设计令牌到生产代码

text-2xl · H41.5rem / 1.4

色彩系统与语义令牌

text-lg · Body Large1.125rem / 1.6

VerdeX 是戴子森创建的独立设计品牌，旗下设计系统面向现代 Web 应用，强调简洁、清晰的视觉语言与高度可组合的组件架构。

text-base · Body1rem / 1.6

基于 Design Token 架构，VerdeX 将设计决策封装为可复用的变量，确保从设计工具到前端代码的一致性。所有组件均支持浅色/深色双主题。

text-sm · Caption0.875rem / 1.5

适用于辅助文字、标签、提示信息等次要内容场景

Mono · Code0.875em / 1.5

const tokens = await fetchDesignTokens();

组件库

组件

覆盖表单、导航、反馈、数据展示等场景的核心 UI 组件，所有组件均遵循统一的设计令牌体系。

按钮 Button

五种变体、四种尺寸、完整的交互态（hover / focus / disabled）。

输入框 Input

文本输入、下拉选择、文本域，及验证态。

用户名 3-32 个字符，支持字母与数字

邮箱

角色

备注

记住我的选择选项 A 选项 B

卡片 Card

内容容器，支持 hover 抬升与多种布局。

项目启动

初始化设计令牌、建立组件库基础结构、配置自动化发布流水线。

已完成

组件开发

完成 Button、Input、Card、Modal、Table 等核心组件的开发与文档。

进行中

文档站点

搭建设计系统文档站，包含使用指南、组件示例与设计原则。

待开始

对话框 Modal

居中弹出的模态对话框，带背景模糊遮罩。

标签页 Tabs

面包屑 Breadcrumbs

徽章 Badge

成功警告错误信息默认

组件库

手风琴 Accordion

可折叠的内容面板，支持单个或多项展开。提供 default 和 surface 两种变体，可隐藏分隔线。

基础用法

默认单展开模式（一次仅展开一项），点击触发切换。

VerdeX 使用 OKLch 色彩空间构建语义化设计令牌，覆盖浅色与深色双模式。所有组件均通过 CSS 变量消费令牌，确保视觉一致性。

组件采用 BEM 命名规范，每个组件至少包含 Base + Variant + State 三层 CSS 结构。支持复合变体（如 Button 的 variant × size 矩阵）。

以 mobile-first 为基础，通过媒体查询逐步增强桌面端布局。侧边栏在 < 900px 时自动转为横向导航条，主内容区边距适配不同视口。

Surface 变体 · 多项展开

使用 surface 变体让每个项目看起来像独立卡片。支持同时展开多项内容。

将 verdex.css 引入项目，复制 CSS 变量到 :root，即可开始使用所有令牌和组件。无需额外依赖。

支持浅色与深色两种模式。通过 data-theme="dark" 属性切换，主题偏好自动持久化到 localStorage。

所有组件样式均可通过覆盖 CSS 变量或添加自定义类名来定制。组件采用语义化 HTML 结构，即使没有 CSS 也能正常运作。

隐藏分隔线

使用 .accordion--hide-separator 移除项目间的分隔线，获得更简洁的外观。

简洁、现代、通用——VerdeX 的三大设计原则。每个决策都服务于可读性、一致性、可扩展性。

纯 HTML/CSS/JS，零框架依赖。所有组件可独立使用，也可集成到 React、Vue 等框架中。

组件库

头像 Avatar

用于展示用户身份的头像组件。支持图片、文字缩写、图标三种内容，提供三种尺寸和多种颜色方案。

尺寸 Size

三种尺寸：sm (32px)、md (40px)、lg (48px)。

D

sm

DZ

md

DZS

lg

颜色方案 Color

五种语义颜色：accent（品牌绿）、success（成功绿）、warning（警告黄）、danger（危险红）、neutral（中性灰）。

A

S

W

D

N

Soft 变体

柔和背景色 + 品牌绿文字，适合大量头像同时出现的场景。

张

李明

王

群组 Avatar Group

多个头像叠加显示，+N 表示溢出数量。

D

L

W

C

+2

组件库

抽屉 Drawer

从屏幕边缘滑出的面板，支持四个方向（左/右/上/下）。可用于导航菜单、详情面板、操作表单等场景。

弹出方向 Placement

四种弹出位置：底部（默认）、顶部、左侧、右侧。点击按钮打开对应方向的抽屉。

Backdrop 变体

三种遮罩方案：opaque（默认半透明遮罩）、blur（毛玻璃模糊）、transparent（无遮罩，点击遮罩区仍可关闭）。

组件库

骨架屏 Skeleton

数据加载时的占位组件，提供三种动画模式：shimmer（流光）、pulse（呼吸）、none（静态）。

基础元素

文本行（带末行缩短）、圆形（头像骨架）、矩形（图片/卡片骨架）。

三种动画模式

Shimmer（流光划过）、Pulse（渐隐渐现）、None（纯静态无动画）。

SHIMMER

PULSE

NONE

加载卡片示例

模拟真实数据加载场景：头像 + 标题 + 描述行的完整卡片骨架。

组件库

间距 Spacer

控制元素间水平和垂直间距的辅助组件。提供 1-16 级间距，对应设计令牌的 spacing scale。

垂直间距 Vertical Spacer

使用 .spacer--y-{n} 在元素间插入垂直间距。n 取值为 1,2,3,4,5,6,8,10,12,16。

元素 A

元素 B（间距 y-2 = 8px）

元素 C（间距 y-6 = 24px）

元素 D（间距 y-10 = 40px）

水平间距 Horizontal Spacer

使用 .spacer--x-{n} 在行内元素间插入水平间距。

A

B

C

A-B 间距 12px · B-C 之间使用 x-auto 自动填充剩余空间

分隔线 Spacer Line

使用 .spacer--line 插入一条占据全宽的分隔线。

分组一

项目 1

项目 2

分组二

项目 3

项目 4

间距速查表

级别	CSS 类名	对应值
1	`.spacer--x-1` / `.spacer--y-1`	4px
2	`.spacer--x-2` / `.spacer--y-2`	8px
3	`.spacer--x-3` / `.spacer--y-3`	12px
4	`.spacer--x-4` / `.spacer--y-4`	16px
5	`.spacer--x-5` / `.spacer--y-5`	20px
6	`.spacer--x-6` / `.spacer--y-6`	24px
8	`.spacer--x-8` / `.spacer--y-8`	32px
10	`.spacer--x-10` / `.spacer--y-10`	40px
12	`.spacer--x-12` / `.spacer--y-12`	48px
16	`.spacer--x-16` / `.spacer--y-16`	64px

界面模式

由基础组件组合而成的高阶界面模式，覆盖仪表盘、数据表格、统计卡片等常见业务场景。

统计卡片

用于仪表盘首页的关键指标展示。

总用户数

24,892

↑ 12.5% 较上月

活跃项目

1,204

↑ 3.2% 较上月

平均响应

186ms

↓ 8.1% 较上月

系统可用率

99.97%

↑ 0.02% 较上月

数据表格

支持表头固定、行 hover、等宽数字对齐。

项目名称	负责人	状态	进度	预算
VerdeX 设计品牌	张明	进行中	78%	¥120,000
移动端适配	李华	规划中	15%	¥85,000
自动化测试	王芳	待审核	92%	¥45,000
文档站点	陈磊	进行中	60%	¥68,000
CI/CD 集成	赵雪	已阻塞	33%	¥52,000

仪表盘卡片

带图表的看板卡片，常用于数据概览页面。

发布 v2.4.0 版本发布	10分钟前
合并 PR #284 组件优化	2小时前
评审设计令牌更新	5小时前
文档更新使用指南	昨天