Design System
V1.0 — 2026
邬 晓 峰
Structure
as a System
从一枚徽章,到一整套秩序。这里定义邬晓峰个人品牌的令牌、组件与应用规范——极简、黑白、一处朱红。
04
Foundations
06
Component sets
20+
Applications
01
Principles
设计原则
01
Order 秩序
一切从几何网格出发。对齐、比例、留白都有据可循,克制而稳定。
02
Restraint 简净
黑白承载 95% 的信息。少即是多——每个元素都必须有存在的理由。
03
One Accent 一处朱红
朱红是唯一的情绪。它只出现在最需要被看见的地方,绝不铺陈。
02
Color
色彩令牌
点击任意色卡复制 HEX。黑白为主体,朱红为强调(≤5%),灰用于辅助信息,墨绿仅作成功状态。
Ink 墨✓ 已复制
--ink
#12110E
18·17·14
0·0·0·95
#12110E
18·17·14
0·0·0·95
Paper 纸✓ 已复制
--paper
#F7F4EC
247·244·236
2·2·7·0
#F7F4EC
247·244·236
2·2·7·0
朱红✓ 已复制
--accent
#C4362A
196·54·42
#C4362A
196·54·42
Grey 灰✓ 已复制
--gray
#9A968C
154·150·140
#9A968C
154·150·140
Success✓ 已复制
--ok
#3B7A57
59·122·87
#3B7A57
59·122·87
Ink tints · 墨阶
900800700500400300200100
03
Typography
字体系统
Space GroteskLATIN / DISPLAY
Aa Bb Cc
ABCDEFGHIJKLM 0123456789 & @ /
Weights 400 / 500 / 600 / 700
思源宋体 / 思源黑体中文
邬 晓 峰
秩序 · 简净 · 运动之美
宋体→标题气质 · 黑体→正文
DISPLAY · 56 / 600Form follows order
H1 · 32 / 600章节标题 Heading
H2 · 24 / 500秩序之下,皆是自由
BODY · 16 / 300正文使用思源黑体,行距 1.7,字距 0,段落充分呼吸。
LABEL · 11 / 500Tracked Uppercase Label
MONO · 12#C4362A · code · token · 000000
04
Spacing
间距刻度
基于 4px 基准的间距刻度。所有内边距、间隙、外边距均取自此表,保证节奏一致。
space-14px
space-28px
space-316px
space-424px
space-532px
space-648px
space-764px
space-888px · 章节内边距
05
Radius & Shadow
圆角与阴影
Radius · 圆角
0 · sharp
4 · sm
8 · md
full
默认取 sharp / 4px。圆形仅用于头像与印章,呼应徽章的圆。
Elevation · 阴影
0 · flat
1 · card
2 · float
阴影极克制,只用于分层。多数界面靠 1px 描边而非阴影。
06
Grid
栅格系统
12 columns16px gutter88px margin1440 max-width
07
Motion
动效
动效服务于清晰,不表演。默认缓动 cubic-bezier(.4,0,.2,1),悬停下方色块查看时长。
Fast · 快
150ms · hover / press
Base · 标准
250ms · toggle / tab
Slow · 慢
400ms · panel / page
08
Iconography
图标系统
线性图标,1.5px 描边、圆头端点、24px 网格,几何语言呼应徽章。
09
Components · Buttons
按钮
Live Playground · 点击切换 & 悬停
Project Title
悬停查看抬升效果
Variants · 类型
States · 状态
默认
悬停 → 朱红
按下
禁用
10
Components · Forms
表单
请输入有效的邮箱地址
11
Components · Selection
选择控件 · 可交互
Toggle · 开关
点击切换开 / 关
Segmented · 分段控件
Small
Medium
Large
Checkbox & Radio
已选中 Checked
未选中 Unchecked
Radio 选中
Radio 未选
12
Components · Cards
卡片
CASE / 001
Identity System
品牌识别系统设计,从徽章到应用的完整推导。
Featured
深色卡片用于强调内容与作品集封面。
邬晓峰 Patrick Wu
设计师 · 创意人
个人 / 联系人卡片样式。
13
Components · Chips & Badges
标签与徽标
Tags · 标签
Branding
Editorial
Type
Featured
Status · 状态徽标
Available 可接洽
In Progress 进行中
Archived 归档
14
Components · Feedback
反馈 · 可交互
Accordion · 折叠 (点击展开)
如何使用朱红强调色?+
朱红仅用于强调:链接、关键按钮、状态点、印章。任一画面占比不超过 5%。
徽章最小尺寸是多少?+
印刷 ≥ 12mm,数字 ≥ 32px。低于此尺寸请改用简化字母标记。
中英文如何搭配?+
拉丁用 Space Grotesk,中文标题用思源宋体、正文用思源黑体。中文字距略放宽。
Alerts · 提示条
已保存
你的更改已成功保存。
需要注意
部分字段尚未填写完整。
Toast 通知
深色浮层通知,2.5s 后自动消失。
15
Brand · The Mark
标志 · 构造
Geometric construction · 几何构造
X
X
Clear space = X (徽章 20%)
PRINT ≥ 12mmDIGITAL ≥ 32pxMisuse · 错误用法
✕拉伸变形
✕随意旋转
✕非规范配色
✕添加阴影
16
Brand · Logo System
标志系统
Primary Emblem · 主徽章PATRICK WU
邬晓峰 · 设计师
PATRICK WU
邬 晓 峰
Reversals · 正 / 反 / 强调色
17
Brand · Seal & Pattern
印章与纹样
18
Applications · Digital
数字应用
www.patrickwoo.cn
WorkAboutJournalContact
Journal · Issue 07秩序,是一种
温柔的自由
温柔的自由
这一期,聊聊如何用最少的元素表达最强的态度。从一枚徽章开始……
阅读全文 →13916043949@qq.comUnsubscribe
App Icon
19
Applications · Print
印刷物料
Designer · CreativePATRICK WU
邬晓峰
www.patrickwoo.cn · +86 139 1604 3949
13916043949@qq.com
13916043949@qq.com
W · X · FPATRICK WU
邬晓峰 · 设计工作室
13916043949@qq.comwww.patrickwoo.cn
作品
选集
选集
2020—2026
谢谢
THANK YOU · 感谢卡
PATRICK WU
设计师 · STAFF
EXHIBITION 2026
INVOICE
收据 · No. 0042
Identity Design¥ 24,000
Guideline Kit¥ 8,000
TOTAL 合计¥ 32,000
20
Applications · Merch
周边物料
Tote 帆布袋
Tee 卫衣/T恤
Mug 马克杯
Notebook 笔记本
Enamel Pin 徽章
W
Stickers 贴纸
Cap 帽子
Packing Tape 胶带
21
Applications · Digital Assets
数字资产
Favicon
16 · 32 · 56 px
QR 二维码
中心嵌徽章
Avatar 头像
三色圆形头像
PATRICK WU 邬晓峰
Designer & Creative · 设计师
13916043949@qq.com · www.patrickwoo.cn
Email Signature · 邮件签名
22
Resources · Downloads
资产下载
色值令牌 · #12110E · #F7F4EC · #C4362A · #9A968C · #3B7A57 · 字体 · Space Grotesk / 思源宋体 / 思源黑体 / Space Mono
点击上方任意卡片下载 SVG
23
Resources · Governance
治理与规则
Do · 应当
保持徽章比例与充足留白
黑白为主,朱红点睛(≤5%)
使用规定字体与间距刻度
优先使用矢量 SVG 资产
Don't · 不可
拉伸、旋转或添加阴影
使用规范外的颜色
大面积铺陈朱红
低于最小尺寸使用徽章
VERSION
1.0
UPDATED
2026.07
MAINTAINER
邬晓峰
CONTACT
13916043949@qq.com
邬 晓 峰
PATRICK WU
一枚徽章,一套秩序。愿它在每一次应用中,都保持简净与力量。
Design System · V1.0 · 2026