建立或审查品牌视觉语言时，如何让圆角…

在设计系统、选图标库、设定圆角 token 或审查视觉一致性时，用统一的形状语言让 UI 在用户读文字前就传达出品牌性格。

适用场景

解决思路

1. 按形状语言选圆角：圆润/胶囊形=友好、亲和、活泼、现代（消费类、健康、儿童、生活方式、社交）；柔和圆角 8–12px=专业、温暖、易用（SaaS、生产力、通用 B2B）；轻圆角 2–4px=精确、结构化、高效（企业工具、金融、数据平台）；直角/无圆角=技术、严肃、权威（开发者工具、安全、工业）。所有组件（卡片、输入框、模态框、徽章）遵循同一套圆角逻辑。
2. 大表面单独调整圆角：大卡片与模态框通常用比按钮更大的圆角（如按钮 4px，大卡片用 8px 或 12px）以保持一致的视觉调性；背景区域或「well」用较小圆角（2px–8px）来定义区域结构，避免看起来像「漂浮」组件，让焦点留在内容而非容器上。
3. 从现有品牌材料读取形状语言：看 logo 是圆润、几何还是棱角分明；看产品摄影或插画风格是圆润泡泡感还是锐利技术图解；看字体是几何无衬线（Circular、Futura）、人文无衬线（Inter、Söhne）还是锐利编辑衬线；看竞品格局，有时在锐利市场中做更柔和的选择、或在活泼市场中做更结构化的选择就是差异化点。
4. 不要靠猜，读取真实形状语言（可选 dembrandt 引擎）：对已上线产品的品牌，用 `get_brand_identity` 和 `get_design_tokens` 从 DOM 提取实际圆角、字体和调性，而不是从 logo 推断。参见 `extract-design`。
5. 让字体形状与圆角一致：几何无衬线（圆形字形）=现代、干净、略活泼；人文无衬线（笔画宽度变化）=温暖、易读、专业；Grotesque 无衬线（中性、实用）=严肃、高效、无装饰；衬线=权威、成熟、编辑感；圆润无衬线=友好、亲和、非正式；等宽=技术、面向开发者、精确。字体与圆角不能互相矛盾（圆润友好字体配 0px 直角会产生视觉不和谐）。
6. 当品牌手册不足以支撑 UI 时，有意识地扩展字体：适用情形包括品牌字体在小字号下可读性差（展示字体、装饰字体）、缺少 UI 层级所需字重（无 regular、无 medium）、未定义正文/阅读变体、加载性能差（性能、授权、网页渲染）。做法是标题和展示保留品牌字体（品牌识别所在），正文添加在调性上互补而非竞争的第二字体，并匹配形状语言（几何品牌字体配几何正文字体，人文展示字体配人文正文字体）。
7. 字体配对原则：角色上对比而非性格上对比，两款字体应像同一产品；避免两个展示字体或两个高个性字体搭配；中性高质量无衬线（Inter、DM Sans、Söhne）可安全搭配大多数品牌字体；品牌字体是衬线时，干净无衬线正文是自然补充，反之亦然。
8. 克制使用：两款字体是有意扩展，三款几乎总是太多。记录决策与理由，防止后续设计师再加第三款。
9. 图标风格必须匹配品牌形状语言，不要混用（有的细、有的粗、有的填充、有的描边），即使单个图标正确也会破坏视觉统一。图标风格选择：细/描边 1–1.5px=极简、优雅、精致（奢侈、编辑、高端 SaaS）；常规描边 2px=平衡、专业（通用 SaaS、生产力工具）；粗/厚 2.5–3px=强烈、清晰、易用（消费应用、移动优先、无障碍重点）；填充=扎实、自信、小尺寸清晰（仪表盘指示、状态图标、移动导航）；图标路径圆角=友好、亲和（消费、生活方式、健康）；图标路径直角=技术、精确（开发者工具、金融、数据）。
10. 全程使用一个图标库和一种字重。若必须混用（如所选库没有某个专用图标），手动匹配描边宽度和圆角风格。
11. 使用标准图标，绝不为已有解决方案的概念自创图标：齿轮=设置、人=个人资料、放大镜=搜索、房子=首页、垃圾桶=删除、铃铛=通知。自创替代只会增加解码成本而无收益。提交前搜索「icon [概念]」确认惯例。把设计自由留给没有既定图标的概念。
12. 图标只在识别有回报处使用：图标让眼睛跳过文字，但仅限无歧义的图标，且仅在扫描有价值处（导航、状态、行类型）。模糊或装饰性图标增加负担而非节省；每个标签都配图标是噪音。图标要对、位置要相关。参见 `ui-density` 关于阅读即时间的论述。
13. 所有承载形状的元素遵循同一视觉逻辑：按钮用 `--radius-button`；卡片用 `--radius-card`（与按钮相同或略大）；输入框用 `--radius-input`（通常与按钮相同）；徽章/标签可比按钮更圆，常用胶囊形；模态框/抽屉用 `--radius-modal`（通常更大，12–16px）；头像始终全圆（`--radius-full`）；图标描边宽度和圆角风格匹配品牌；插画形状风格与图标风格一致。
14. 执行指南前先读指南自身的适用范围声明：为印刷写的规范优化的是纸上的墨，浅灰在纸上可读、授权字体嵌入 PDF 一次即可，但两者都撑不过屏幕——同一灰色在白底上可能只有约 2:1 对比度，同一字体往往根本无法通过 webfont 管道提供。当指南媒介与工作媒介不同时，指南是证据而非法律。
15. 把现有产品对指南的偏离先当作发现而非错误来读：团队在文字颜色上偏离，通常已经遇到了你正要重现的对比度问题。反向错误代价同样大：把每个偏离都当作漂移，会丢掉唯一真正跑过的指南审计。
16. 用这个测试区分两者：该偏离能否被复现为屏幕上的约束？颜色因原值只有 2:1 而改、字体因授权不覆盖 webfont 而换、圆角因原值在 16px 下渲染成糊块而调——每条都是发现，需要更新的是指南。没有约束能解释、原值本可工作的偏离则是漂移，需要纠正的是产品。按值而非按产品跑这个测试；多数资产同时包含两者。
17. 把缺口作为发现带回给品牌负责人：从未见过屏幕的指南不是错的，是不完整的，补全它的最快方式就是列出它用尽的地方。对比度下限见 `wcag-accessibility`。
18. 对无法重写的软件应用品牌：多数品牌工作落在不干净的代码库上，包括 2015 年用当时框架建的门户和古老到能投票的内部系统，而员工整天盯着这些工具，品牌体验同样受影响。
19. 记住形状语言是最后到达的，不是最先：遗留应用仅靠正确的 logo、品牌色和字体就能令人信服地承载品牌；匹配圆角和图标风格是第 3 级工作，通常不值得在那里做。按应用决定走到阶梯的哪一级（识别、chrome、token、组件），而不是把未重写视为失败。阶梯与按应用决策见 `layout-paradigms-and-consistency`。
20. 老应用若有变量（Bootstrap 或 Sass 构建通常有），把品牌色和字体映射上去，以极小成本买到大部分感知一致性。你买的是识别度而非保真度：用户应在加载后一秒内知道这是谁的软件。
21. 用审查清单逐项检查：圆角 token 是否匹配品牌形状语言（logo、插画、摄影）？按钮、输入框、卡片是否应用同一圆角逻辑？字体调性是否匹配整体品牌性格？是否全程一致使用单一图标库？图标描边宽度是否匹配品牌（精致用细、无障碍用粗）？友好品牌是否用圆角图标路径、技术品牌是否用直角？标准概念（设置、个人资料、搜索、删除、通知）是否用惯例图标而非自创？图标是否只在识别有回报处使用而非每个标签都撒？圆角是否按表面尺寸调整（模态框更大、well/背景 2–8px 更紧）？字体风格与形状选择之间是否无视觉矛盾（如圆润字体配直角卡片）？

适用边界 · 注意事项

• 品牌手册明确且完整地覆盖了屏幕场景（含正文、字重、网页字体授权）时，不需要自行扩展字体。
• 对无法重写的遗留应用，不要追求圆角与图标风格的完全匹配——那是第 3 级工作，通常不值得，只做 logo、品牌色和字体即可。
• 不要为已有既定图标的概念自创图标，也不要在每个标签上都加图标作为装饰。