外观
样式系统：颜色/字体/效果
把颜色、字体、效果存成"样式"——一次定义，处处使用，改一处处处生效。你的微信绿、正文字号、卡片阴影，先定义一次，用到哪都一模一样；而不是每一处都临时手写一遍"绿 + 17px + 阴影"。
为什么改个颜色要改几十个图层
新建微信首页时，消息气泡、按钮、图标、点赞小红点……凡是绿色，你都一个一个去填 #07C160。第一次做没问题。可老板说"这个绿太艳，换成 #07D160"——你懵了：要重新点几十个图层，逐个改色，改完还可能漏了几个，界面花了。
问题不在手慢，而在做法错了：每个图层单独设色，等于把"用哪个绿"这条决定，复制粘贴了几十份。复制越多，改一处就越难。专业做法是：把"用哪个绿"定义一次，存成一个颜色样式，所有图层都"引用"它。改样式，引用它的几十个图层一起变。
样式 = 命名 + 复用：给它起个名，是为了"以后说名字就行"；多处复用，是为了"改一处全部生效"。
三类样式：颜色 / 字体 / 效果
三类样式对号入座：
| 样式类型 | 存的是什么 | 微信里的例子 |
|---|---|---|
| 颜色样式 Color | 一个颜色（含名字） | 微信绿 #07C160、微信灰、正文字 |
| 字体样式 Text | 字族 + 字号 + 字重 + 行距……一套 | 正文 17/400、标题 17/600、时间 12/400 |
| 效果样式 Effect | 阴影 / 模糊 / 描边…… | 卡片投影、弹出层阴影 |
设计工具里，能存成"样式"的，主要有三类：颜色样式（存一个带名字的颜色）、字体样式（存字族+字号+字重+行距这一整套）、效果样式（存阴影/模糊/描边）。每个样式都有名字（"微信绿""正文"），你按名字使用，而不是按一坨数值。
三类样式：颜色（一个颜色）、字体（字族+字号+字重+行距）、效果（阴影/模糊/描边）。
微信样式集：把微信首页拆成一组样式
微信首页拆出的 8 个样式：
| 样式名 | 内容 | 用在哪 |
|---|---|---|
色彩/微信绿 | #07C160 | 按钮、图标、选中态 |
色彩/微信灰 | #E5E5EA（浅灰） | 分割线、背景底 |
色彩/正文字 | #000000 或 #1F1F1F | 标题文字 |
色彩/辅助灰字 | #999999 | 时间、摘要 |
色彩/微信红 | #FA5151 | 未读数字角标、点赞小红点 |
字体/正文 | PingFang SC · 17px · Regular 400 | 消息标题、正文 |
字体/辅助 | PingFang SC · 12px · Regular 400 | 时间、角标 |
效果/卡片阴影 | 柔和投影 | 转发卡片、弹窗 |
把微信首页"拆"成一组可复用样式，这组样式就是你的微信样式库种子。给样式起名时用分类前缀（色彩/、字体/、效果/），这样列表里一目了然，不会跟同名样式打架。
用这 8 个样式重建微信界面片段，下一节"练习"直接引用。
命名规范：为什么样式要起好名字
样式越多，名字一乱就废了。三条铁律：加分类前缀（色彩/微信绿、字体/正文、效果/卡片阴影，列表分组清晰）；按用途起名，不按颜色值起名（叫"微信绿"或"品牌绿"，别叫"那个绿色的 1 号"）；语义优先于外观（辅助灰字 比 #999999 强——"辅助"说明它该用在哪儿，而 #999999 只告诉肉眼一个数字）。
落地后的体验：你不再是"给每个图层填色、设字号"，而是"给每个图层点一个样式名"。界面搭完想统一调整——比如正文从 17px 改成 18px——只改 字体/正文 这一个样式，整个界面一起变。
在 Penpot 里创建并应用颜色样式
Penpot 的样式入口在右侧面板的色块旁边那个小圆点。创建颜色样式：画一个矩形并选中，右侧「填充 Fill」点开色块，先填好颜色（输入微信绿 #07C160），再点色块旁边的小圆点（样式图标），在弹出的面板里点「创建样式 Create style」，给它起名微信绿，确定。应用到其他图层：再画一个矩形并选中，点「填充」色块旁边的小圆点，在样式列表里点「微信绿」——它立刻变成微信绿；这时改一下样式本身（把 #07C160 换成 #07D160），看两个矩形是不是一起变了。
字体样式、效果样式的创建步骤一模一样，只是入口分别在「文字」面板和右侧「效果 Effect」面板。
样式的全部魔法：一处定义，处处使用，改一处，处处生效。
深度
样式 vs Design Tokens（留到知识点 23）
学习者最容易问："样式"和后面的"Design Tokens（23）"有啥区别？一句话：样式是工具层的复用，Token 是更抽象的决策源头。
| 样式（本知识点） | Design Tokens（23） | |
|---|---|---|
| 在哪一层 | 工具里（Penpot/Figma 的样式面板） | 项目里（写在代码 / 配置里的变量） |
| 管什么 | 让图层"引用同一个设置" | 让"决策"有名字、有语义、跨端统一 |
| 改动生效范围 | 当前设计文件 | 整个产品、多个端（iOS/安卓/Web） |
此刻你只需要在 Penpot 里把样式建好、用起来；往后当产品大了、要跨端一致时，这些样式会化身成 Token（color.brand、font.body）沉淀为设计决策的唯一来源。样式是 Token 的"落地雏形"——你现在建的"微信绿"样式，将来就是 color.brand 这个 Token。
完整实例：微信界面的样式落地
把上一节那 8 个样式，用来重建微信首页的一个片段：
| 界面元素 | 用什么样式 |
|---|---|
| 消息标题（"前同事老张"） | 字体/正文 + 色彩/正文字 |
| 消息摘要（"好的，明天见"） | 字体/正文 + 色彩/辅助灰字（字号略小可再建一个 字体/摘要） |
| 时间（"昨天 15:30"） | 字体/辅助 + 色彩/辅助灰字 |
| 未读数字角标 | 字体/辅助（粗体）+ 微信绿的"白字"变体 |
| 转发卡片 | 效果/卡片阴影 + 色彩/卡片底 |
这就是"从会概念到能落地"的跃迁：先有样式，后有界面；改一处，处处生效。
误区
| # | 误解 | 正解 |
|---|---|---|
| 1 | 每个图层单独设色/字号是正常做法 | 误区。单个图层手设颜色，改一处要改几十处；正确做法是存成样式，处处引用 |
| 2 | 样式是后期才做的活 | 错。一开始建立，一开始就省力；等界面做完再补样式，等于返工 |
| 3 | 样式和 Token 是一回事 | 样式是工具层的复用，Token 是项目层更抽象的决策源头。样式是 Token 的落地雏形 |
| 4 | 样式名随便起，反正我自己看 | 起名即规范。加了分类前缀、按用途起名，团队和未来的你才用得起 |
| 5 | 改样式要重新应用一遍 | 不用。样式是引用不是复制，改样式本体，所有引用它的一次生效 |
练习
即时题
Q1：为什么每个图层单独设色，改个颜色要改几十次？
答案
因为"用哪个绿"这条决定被复制粘贴了几十份，改一处得手动改每一份，还容易漏。Q2：样式系统存的是哪三类设置？
答案
颜色样式（颜色）、字体样式（字族/字号/字重等）、效果样式（阴影/模糊）。Q3：在 Penpot 里，创建颜色样式的入口在哪？
答案
选中图形 → 右侧「填充」色块 → 点色块旁边的小圆点（样式图标）→ 「创建样式」→ 起名。模块题 老板说"把微信绿 #07C160 换成 #07D160"。请用一句话说明"手设每个图层"和"用样式"两种做法的差别，并估一估各要花多久。
参考思路
- 手设：去每个绿色图层逐个改色，几十处，可能 10 分钟，还可能漏几个。 - 用样式：打开 `色彩/微信绿` 样式，改一个值，全部图层一起变，10 秒钟。 - 关键点：单次做两者差不多；一旦要改、要统一，样式省下十倍时间。这就是样式存在的意义。迷你案例（微信实战） 先建一组微信样式，再用它们重建微信首页的一个片段：
- 建 8 个样式：
色彩/微信绿、色彩/微信灰、色彩/正文字、色彩/辅助灰字、色彩/微信红、字体/正文、字体/辅助、效果/卡片阴影。 - 新建一个画板，画一个"消息行"：左侧头像圆、右侧签名文字。
- 给签名文字应用
字体/正文+色彩/正文字。 - 画一条分割线，应用
色彩/微信灰。 - 画一个小圆当"未读角标"，应用
色彩/微信红。 - 现在改
色彩/微信绿这个样式，看界面上所有引用它的图层一起变。 - 把界面里一个"绿色按钮"应用
色彩/微信绿，验证"处处使用"。
做完你就懂了：界面不是"一个个画"的，而是"用样式搭"的。样式就是微信设计系统的第一块砖。
素材
- Penpot 样式（Libraries/Styles）：Penpot 官方文档的「样式」章节，看颜色/文字/效果样式如何创建与管理。
- Penpot 成组件（Component）：样式管"颜色/字体/效果"，组件事管"整个可复用元素"——下一环节会用。
- 微信品牌色
#07C160：真实品牌色，可在拾色器验证。 - 进阶实验（可选）：在 Penpot 里建好"微信绿"样式后，复制 5 个矩形都引用它，再把样式改成
#07D160，亲眼看到 5 个矩形一起变色。 - 后续衔接：本知识点（样式，工具层）→ 23 Design Tokens（Token，项目层）→ 组件化（把图形+样式包成可复用组件）。