Tapo 官网 · 设计系统结构参考 · 2026 年 10 月 · English

一个完整的网站设计系统需要什么

面向营销加电商官网的完整结构。每一项都标了它由什么决定(品牌调性还是功能),以及应该由谁负责。

品牌调性表达“我们是谁”

偏主观的选择,让网站一眼认得出。改了它,品牌就变了。

色板 · 字体 · 圆角性格 · 摄影风格 · 动效气质 · 语气
功能性让它好用

由可用性、无障碍和工程决定。大部分可以按行业通用做法来。

间距档位 · 断点 · 状态 · 对比度 · 表单 · 层级顺序
混合结构通用,数值跟品牌

怎么分档是通用的,具体数值按品牌调。

字号层级 · 圆角档位 · 阴影 · 顶部导航 · 产品卡片

三层怎么连起来

品牌决定放在最底层,是原始数值;功能规则放在中间层,是“用途”。组件只引用用途,所以品牌刷新时只改底层数值,组件不用动。

原始值Primitive

品牌色板、字体、各种档位。本身不带用途。

blue-500 · space-4 · radius-2
→
用途Semantic

这个值拿来干什么。换主题、深色模式都只改这一层。

text-default · surface-card · interactive-primary
→
组件例外Component

只有组件必须和默认不同时才用。

button-danger-bg

谁负责什么

Agency 定

品牌类。由 agency 给方向和最终数值。

Agency 定方向,我们落地

混合类。agency 给视觉方向,我们整理成档位、状态和变体。

我们自己做

功能类。按行业通用做法,加上现有的 Tapo 组件库。

关于 Pentagram R1 这一列

对照 Pentagram 9 月 30 日的 Web R1:● 已交 · ◐ 部分 · ○ 缺失。在页面模块里画了、但还没整理成可复用组件的,算“部分”。

参考