brand-visual-language
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseBrand Visual Language
品牌视觉语言
Visual shape communicates personality. A rounded corner says something different to the user than a sharp one — and that message arrives before they read a single word. The shapes in typography, border-radius, and iconography should tell a consistent story.
视觉形状能够传递品牌个性。圆角给用户的感受与尖角截然不同——这种信息传递发生在用户阅读任何文字之前。排版、border-radius和图标中的形状应当传达一致的品牌叙事。
Shape Language
形状语言
| Shape | Tone | Associated with |
|---|---|---|
| Rounded, pill-shaped | Friendly, approachable, playful, modern | Consumer apps, health, kids, lifestyle, social |
| Softly rounded (8–12px) | Professional, warm, accessible | SaaS, productivity, general B2B |
| Lightly rounded (2–4px) | Precise, structured, efficient | Enterprise tools, finance, data platforms |
| Sharp / no radius | Technical, serious, authoritative | Developer tools, security, industrial |
Every component — cards, inputs, modals, badges — should follow the same radius logic.
| 形状 | 基调 | 适用场景 |
|---|---|---|
| 圆润胶囊形 | 友好、易亲近、活泼、现代 | 消费类应用、健康、儿童、生活方式、社交领域 |
| 柔和圆角（8–12px） | 专业、温暖、易用 | SaaS、生产力工具、通用B2B场景 |
| 轻微圆角（2–4px） | 精准、结构化、高效 | 企业工具、金融、数据平台 |
| 尖角/无圆角 | 技术感强、严肃、权威 | 开发者工具、安全、工业领域 |
所有组件——卡片、输入框、模态框、徽章——都应遵循相同的圆角逻辑。
Radius for Large Surfaces
大尺寸元素的圆角设置
The perceived "roundedness" of an element changes with its scale. A radius that looks soft on a button may look sharp on a large container.
- Large Cards & Modals: Typically use a larger radius than buttons (e.g., if buttons are 4px, large cards might be 8px or 12px) to maintain a consistent visual tone.
- Wells and Background Sections: For large background areas or "wells," a smaller radius (2px–8px) is often used to provide structure and define the region without making it feel like a "floating" component. This keeps the focus on the content within, rather than the container itself.
元素的“圆润感”会随尺寸变化而改变。在按钮上看起来柔和的圆角，放到大型容器上可能会显得尖锐。
- 大型卡片与模态框： 通常使用比按钮更大的圆角（例如，如果按钮用4px圆角，大型卡片可使用8px或12px），以保持一致的视觉基调。
- 背景区块与容器： 对于大型背景区域或“容器”，通常使用较小的圆角（2px–8px），既能构建结构、界定区域，又不会让它看起来像“悬浮”组件，从而将焦点放在内部内容而非容器本身。
Reading Shape from an Existing Brand
从现有品牌提取形状语言
Before choosing a radius, look at the brand's existing materials:
- Logo: Is it rounded, geometric, or angular? The logo's shapes are intentional brand decisions.
- Product photography or illustration style: Rounded, bubbly illustrations signal a different personality than sharp, technical diagrams.
- Typography: A geometric sans-serif (Circular, Futura) reads differently than a humanist sans (Inter, Söhne) or a sharp editorial serif.
- Competitor landscape: Sometimes being the slightly softer option in a sharp market, or the more structured option in a playful market, is the differentiator.
Read the real shape language, don't infer it (dembrandt engine, optional). For a brand that already ships a product, extract its actual radius, type, and tone from the live site rather than guessing from the logo:andget_brand_identityreturn computed values off the DOM. Seeget_design_tokens.extract-design
选择圆角之前，先参考品牌的现有物料：
- Logo： 是圆润、几何感还是棱角分明？Logo的形状是经过刻意设计的品牌决策。
- 产品摄影或插画风格： 圆润活泼的插画与尖锐技术感的图表传递的个性完全不同。
- 排版： 几何无衬线字体（Circular、Futura）与人本主义无衬线字体（Inter、Söhne）或尖锐的 editorial serif字体给人的感受截然不同。
- 竞品环境： 有时在偏尖锐的市场中选择稍柔和的风格，或在偏活泼的市场中选择更结构化的风格，就能形成差异化优势。
提取真实的形状语言，而非主观推断（dembrandt engine，可选）。 对于已有产品的品牌，直接从线上站点提取实际的圆角、字体和基调，而非仅凭Logo猜测：和get_brand_identity可从DOM中返回计算值。详见get_design_tokens。extract-design
Typography and Shape
排版与形状
Typeface shapes carry the same tonal signals:
| Type style | Tone |
|---|---|
| Geometric sans (circular letterforms) | Modern, clean, slightly playful |
| Humanist sans (varied stroke widths) | Warm, readable, professional |
| Grotesque sans (neutral, utilitarian) | Serious, efficient, no-frills |
| Serif | Authoritative, established, editorial |
| Rounded sans | Friendly, approachable, informal |
| Monospace | Technical, developer-facing, precise |
The typeface and the border-radius should not contradict each other. A rounded, friendly typeface paired with sharp 0px corners creates visual dissonance.
字体形状同样承载着基调信号：
| 字体风格 | 基调 |
|---|---|
| 几何无衬线（圆形字形） | 现代、简洁、略带活泼感 |
| 人本主义无衬线（笔画宽度多变） | 温暖、易读、专业 |
| 粗陋无衬线（中性、实用） | 严肃、高效、简约 |
| 衬线字体 | 权威、成熟、编辑风格 |
| 圆润无衬线 | 友好、易亲近、非正式 |
| 等宽字体 | 技术感强、面向开发者、精准 |
字体与border-radius不应产生视觉冲突。例如，圆润友好的字体搭配0px尖角会造成视觉不协调。
Extending Brand Typography
拓展品牌排版
Brand books often specify a display or heading font but leave body text underdefined — a single weight, no reading size, no fallback. This is common with luxury, fashion, or legacy brands where the brand identity was built for print, not screen.
When the brand book is insufficient for UI purposes, extend it deliberately:
When extension is justified:
- Brand font has poor legibility at small sizes (display fonts, decorative typefaces)
- Brand font lacks the weights needed for UI hierarchy (no regular, no medium)
- Brand font has no body or reading variant defined
- Brand font loads poorly (performance, licensing, web rendering)
How to extend:
- Keep the brand font for headings and display — this is where brand identity lives
- Add a secondary typeface for body text that is complementary in tone, not competing
- Match shape language: a geometric brand font pairs with a geometric body font; a humanist display pairs with a humanist body
Brand heading font (display, h1–h3): maintains identity
↓
Secondary body font (body, labels, UI copy): legibility and completenessPairing principles:
- Contrast in role, not in personality — the two fonts should feel like they belong to the same product
- Avoid two display fonts or two highly characterful fonts together
- A neutral, high-quality sans (Inter, DM Sans, Söhne) pairs safely with most brand fonts
- If the brand font is a serif, a clean sans body is the natural complement — and vice versa
Do this sparingly. Two typefaces is a deliberate extension. Three typefaces is almost always too many. Document the decision and the rationale so future designers do not add a third.
品牌手册通常会指定标题或展示字体，但对正文字体定义不足——仅指定单一字重，未定义阅读字号和 fallback 字体。这种情况常见于奢侈品、时尚或传统品牌，其品牌标识最初是为印刷而非屏幕设计的。
当品牌手册不足以支撑UI设计时，需有策略地拓展：
适合拓展的场景：
- 品牌字体在小尺寸下可读性差（展示字体、装饰性字体）
- 品牌字体缺乏UI层级所需的字重（无常规字重、无中等字重）
- 品牌字体未定义正文或阅读变体
- 品牌字体加载性能差（性能、授权、网页渲染问题）
拓展方法：
- 保留品牌字体用于标题和展示——这是品牌标识的核心载体
- 添加一款基调互补而非竞争的辅助字体用于正文
- 匹配形状语言：几何品牌字体搭配几何正文字体；人本主义展示字体搭配人本主义正文字体
Brand heading font (display, h1–h3): maintains identity
↓
Secondary body font (body, labels, UI copy): legibility and completeness搭配原则：
- 角色上形成对比，而非个性——两款字体应感觉属于同一产品
- 避免同时使用两款展示字体或两款极具特色的字体
- 中性高品质无衬线字体（Inter、DM Sans、Söhne）可安全搭配大多数品牌字体
- 如果品牌字体是衬线字体，干净的无衬线正文字体是自然的互补选择，反之亦然
谨慎操作。 使用两款字体是刻意的拓展，三款字体几乎总是过多。需记录决策及理由，避免后续设计师添加第三款字体。
Iconography
图标设计
Icon style must match the brand's shape language. Mixing icon styles — some thin, some bold, some filled, some outlined — breaks visual cohesion even when individual icons are correct.
| Icon style | Tone | Use when |
|---|---|---|
| Thin / outline (1–1.5px stroke) | Minimal, elegant, refined | Luxury, editorial, premium SaaS |
| Regular outline (2px stroke) | Balanced, professional | General SaaS, productivity tools |
| Bold / thick (2.5–3px stroke) | Strong, clear, accessible | Consumer apps, mobile-first, accessibility focus |
| Filled | Solid, confident, clear at small sizes | Dashboard indicators, status icons, mobile nav |
| Rounded corners on icon paths | Friendly, approachable | Consumer, lifestyle, health |
| Sharp corners on icon paths | Technical, precise | Developer tools, finance, data |
Rule: Use one icon library and one weight throughout. If mixing is unavoidable (e.g. a specialised icon not available in the chosen library), match stroke width and corner style manually.
图标风格必须匹配品牌的形状语言。混合不同风格的图标——有的纤细、有的粗厚、有的填充、有的轮廓——即使单个图标设计正确，也会破坏视觉连贯性。
| 图标风格 | 基调 | 适用场景 |
|---|---|---|
| 纤细/轮廓（1–1.5px描边） | 极简、优雅、精致 | 奢侈品、编辑类、高端SaaS |
| 常规轮廓（2px描边） | 平衡、专业 | 通用SaaS、生产力工具 |
| 粗厚（2.5–3px描边） | 醒目、清晰、易用 | 消费类应用、移动端优先、注重无障碍 |
| 填充式 | 扎实、自信、小尺寸下清晰可见 | 仪表盘指示器、状态图标、移动端导航 |
| 图标路径带圆角 | 友好、易亲近 | 消费类、生活方式、健康领域 |
| 图标路径带尖角 | 技术感强、精准 | 开发者工具、金融、数据领域 |
规则： 全程使用同一图标库和同一字重。若无法避免混合（例如所需的专业图标不在选定库中），需手动匹配描边宽度和边角风格。
Use the standard icon; never invent one for a solved concept
使用标准图标；切勿为已有共识的概念自创图标
Gear = settings, person = profile, magnifier = search, house = home, trash = delete, bell = notifications. Inventing an alternative here costs decoding for zero benefit. Search "icon [concept]" to check the convention before committing. Save design freedom for concepts with no established icon.
Icons let the eye skip the word — but only unambiguous ones, and only where scanning pays off (nav, status, row types). A vague or decorative icon adds work instead of saving it; an icon on every label is noise. Right icon, relevant place. See [[ui-density]] on reading as time.
齿轮=设置，人物=个人资料，放大镜=搜索，房子=首页，垃圾桶=删除，铃铛=通知。自创替代图标只会增加用户的理解成本，毫无益处。在确定图标前，搜索“icon [概念]”查看通用惯例。仅在无既定图标的概念上发挥设计自由。
图标让用户无需阅读文字——但只有明确的图标，且在适合快速扫描的场景（导航、状态、行类型）中才能发挥作用。模糊或装饰性的图标反而会增加用户负担；每个标签都加图标会造成视觉噪音。选择合适的图标，放置在合适的位置。关于阅读时间可参考[[ui-density]]。
Consistency Across Elements
跨元素一致性
All shape-bearing elements should follow the same visual logic:
| Element | Applies shape language via |
|---|---|
| Buttons | |
| Cards | |
| Inputs | |
| Badges / tags | Can be more rounded than buttons — pill shape is common |
| Modals / drawers | |
| Avatars | Always fully round ( |
| Icons | Stroke weight and corner style match brand |
| Illustrations | Shape style consistent with icon style |
所有带有形状特征的元素都应遵循相同的视觉逻辑：
| 元素 | 形状语言的体现方式 |
|---|---|
| 按钮 | |
| 卡片 | |
| 输入框 | |
| 徽章/标签 | 可比按钮更圆润——胶囊形很常见 |
| 模态框/侧边栏 | |
| 头像 | 始终为全圆形（ |
| 图标 | 描边宽度和边角风格匹配品牌 |
| 插画 | 形状风格与图标保持一致 |
Review Checklist
审核清单
- Does the border-radius token match the brand's shape language (logo, illustrations, photography)?
- Is the same radius logic applied to buttons, inputs, and cards?
- Does the typeface tone match the overall brand personality?
- Is a single icon library used consistently throughout?
- Do icons match the brand in stroke weight (thin for refined, bold for accessible)?
- Are rounded icon corners used for friendly brands and sharp corners for technical brands?
- Are standard concepts (settings, profile, search, delete, notifications) using the conventional icon rather than an invented one?
- Are icons used only where recognition pays off — not sprinkled on every label as decoration?
- Is the border-radius adjusted for surface size (e.g., larger for modals, tighter 2-8px for wells/backgrounds)?
- Is there no visual contradiction between typeface style and shape choices (e.g. rounded type + sharp cards)?
- border-radius token是否匹配品牌的形状语言（Logo、插画、摄影）？
- 按钮、输入框和卡片是否应用了相同的圆角逻辑？
- 字体基调是否与整体品牌个性匹配？
- 是否全程一致使用单一图标库？
- 图标描边宽度是否与品牌匹配（纤细对应精致，粗厚对应易用）？
- 友好型品牌是否使用圆角图标，技术型品牌是否使用尖角图标？
- 通用概念（设置、个人资料、搜索、删除、通知）是否使用惯例图标而非自创图标？
- 图标是否仅在识别收益大于成本的场景使用——而非作为装饰随意添加到每个标签？
- 是否根据元素尺寸调整border-radius（例如，模态框用更大圆角，背景区块用2-8px的紧凑圆角）？
- 字体风格与形状选择之间是否无视觉冲突（例如，圆润字体搭配尖角卡片）？