品牌 Logo 使用规范(Brand Guidelines)模板实战:用 logo-design-skill 为小品牌编写一页式指南
发布时间:2026/10/15 20:18:34来源:尧图企业网站定制
AI 技能/插件AI 评测【免费下载链接】logo-design-skillA comprehensive logo-design skill for Claude, Gemini CLI, Codex and other AI agents: principles, process, SVG craft, testing tools and a 1,400 logo reference library.项目地址https://gitcode.com/gh_mirrors/lo/logo-design-skill点击查看免费下载这篇技术指南围绕 logo-design-skill 仓库内置的 品牌指南模板brand-guidelines-template.md 展开解析如何把一个 Logo 从定稿符号沉淀为一份可交付、可执行的品牌使用规范。读完本文你将掌握该模板七个核心章节的填写逻辑、每个占位符背后的设计依据以及如何结合仓库中的 SVG 审计脚本、变体导出脚本 与测试清单产出指南中要求的真实数值最小尺寸、留白、色彩代码、字体许可并看到一份完整的 Harbor 品牌填充示例。1. 模板的定位与编写哲学该模板位于 skills/logo-design/templates/brand-guidelines-template.md是 logo-design-skill 在交付阶段SKILL.md 的 Phase 7提供的标准输出物之一。模板开头用一句引言定下了编写基调Keep it to one or two pages for small brands. Write for non-designers. More dos than donts.这句话包含三层明确的设计决策也是任何品牌规范编写者都应遵循的原则控制在 1–2 页针对小型品牌startup、独立工作室、个体商户规范不需要成为几百页的《品牌识别标准手册》。在 identity-system.md 的 §7 中也有同样表述Scale down for a start-up; a one-page sheet can be enough对初创企业可以缩减规模一页纸通常就够。面向非设计人员使用者的画像包括打印店店员、市场运营、内容编辑、供应商与印厂他们不关心设计理论只需要能用、别用错。因此 identity-system.md 明确要求用plain language平实的语言书写避免设计行话。多写该做、少写不该做规范是规则书不是禁令清单。用正面表述规定正确用法误用部分只在必要处出现。在整体交付流程中模板与 presentation-delivery.md 描述的 mini guidelines 完全对应——后者要求规范至少包含留白、最小尺寸、颜色代码、批准的背景组合、字体、误用示例以及在什么地方用哪个文件的说明。模板正是这条要求的落地实现。2. 模板骨架七个章节一览模板采用紧凑的七节结构每一节解决品牌规范中一个必答问题章节解决的问题关键占位符1. The logo这个符号是什么、为什么、有哪几个版本、文件放哪Idea、Versions、Files2. Clear space周围留白多少、如何随尺寸缩放1 × unit3. Minimum size屏幕与印刷的最小可用尺寸96 px / 25 mm、16 px / 6 mm4. Colour品牌色在四个色彩系统中的精确值HEX、RGB、CMYK、Pantone5. Typography标题/正文字体、Web 回退栈、许可family、weight、licence6. Donts最常见的误用情形拉伸、变色、旋转、加效果等7. Contact有问题找谁、主文件在哪name、email、location下面逐一深入每一节说明填充逻辑、示例取值以及仓库中可用来支撑这些数值的工具与测试依据。3. 第 1 节The logo——一句话 Idea、版本与文件模板要求为标志写下一句话说明并列出正式交付的版本与文件规范Idea用一句话说明这个符号是什么意思、为什么这样设计。这与仓库的设计原则一脉相承——SKILL.md 反复强调one sentence一个概念必须能一句话说清否则无法在一瞥中被读懂。在 presentation-delivery.md 中每个概念向客户展示时同样要求一句话 Idea。Versions模板给出的标准版本集是primary (horizontal) · stacked · symbol-only · wordmark-only。这四种变体在 mark-types.md 中被称为lockup体系横向组合是多数宽幅场景页眉、招牌的主用版本堆叠版适配方形版面与社交媒体纯符号用于 app 图标与 favicon纯字标用于需要克制排版的场景。值得注意的仓库数据点在库内 233 个同时交付完整 Logo 与独立图标的品牌中约 9/10 的完整 Logo 是宽高比大于 2.5:1 的横向 lockup而约 3/4 的图标是接近方形0.8–1.25:1——符号与 lockup 从第一天就应作为一对来设计规范中列出所有版本正是这一事实的书面化。Files模板要求区分digital/*.svg|png屏幕用RGB 色彩与print/*.pdf印刷用CMYK/专色并强调用对文件——RGB 文件只用于屏幕印刷必须用 CMYK/专色版本。这一点在 presentation-delivery.md 中有更尖锐的提醒many clients send the digital RGB file to their printer — spell it out很多客户会把数字版 RGB 文件直接发给印厂——一定要写明白。文件组织上presentation-delivery.md 建议按用途建立print/、digital/、social/、source/四个文件夹命名形如brand-logo-horizontal-color.svg、brand-symbol-black.svg。从源码看文件从哪来这些变体文件并非手工制作而是由 export_variants.py 从一个主 SVG 自动导出的。脚本 docstringL1-L30声明了它生成的六类 SVG 变体-black.svg单色黑、-white.svg单色白用于深色背景、-mono-hex.svg品牌单色可通过--mono重复传入多个色值、-square.svg256×256 居中画布用作头像/社交主文件、-favicon.svg浏览器标签页的紧凑方形版、-app-icon.svg白底/--icon-fg前景色加圆角方形--icon-bg底板。导出命令示例python3 skills/logo-design/scripts/export_variants.py final-symbol.svg \ --title Harbor logo --mono #0F7C80 --icon-bg #0F7C80 \ --web-icons --favicon-source final-symbol-small.svg其中--favicon-source允许传入一个为小尺寸重绘的简化版本final-symbol-small.svg因为小尺寸值得单独一张简化图--png 32 512 1024可为每个变体输出透明 PNG。指南中的 Files 一项正是要把这套脚本的产物按场景登记在案。4. 第 2 节Clear space——用 Logo 自身的元素定义留白模板规定Keep a clear zone of1 × unitaround the logo on all sides, where unit an element of the logo, e.g. the height of the symbols dot / the cap height of the wordmark. The zone scales with the logo — never use a fixed distance.这是模板中最具方法论价值的一条规则拆解如下unit 取自 Logo 本身留白单位必须是 Logo 上的某个既有元素——例如符号上那个圆点的高度或字标大写字母的 cap height字身高度。选它是因为它天然随标志缩放保证留白在任何尺寸下视觉比例一致。禁止固定数值不能写周围留白 10 mm或留白 20 px。因为同一 Logo 会被放大到招牌、缩小到 favicon固定距离会在不同场景下呈现完全不同的视觉压迫感。这条规则在 identity-system.md 中被原样重申clear space (defined by an element of the logo, e.g. the height of the symbols dot or the cap height, so it scales — never a fixed distance)可见它是整个技能体系中的共识性规范而非模板的孤例。填充指引在unit处写下你选定的那个元素。例如 Harbor 品牌的符号是一个圆点那么留白即写1 × dot height符号圆点的高度如果是纯字标品牌则写1 × cap height大写字母高度。指南发布后使用者在任意场景只需目测一个元素的高度即可确定留白无需换算。补充工程视角在 svg-construction.md 的 SVG 文件规范中作者建议在 viewBox 内保留约 4–8% 的统一边距或裁切紧凑后让留白规则负责间距or crop tight and let the clear-space rule handle spacing。这两种策略任选其一但必须在整套文件中保持一致——这解释了为什么有的主文件看起来留边大、有的裁得很紧真正的呼吸空间由指南中的 Clear space 规则统一接管。5. 第 3 节Minimum size——先测试再填写模板给出了一张最小尺寸对照表VersionScreenPrintHorizontale.g. 96 px widee.g. 25 mm wideSymbol16 px (use-faviconfile)6 mm这张表有三个值得展开的要点① 屏幕与印刷必须分开规定屏幕用像素px印刷用毫米mm因为两者的感知方式完全不同——屏幕上的 16 px 可能对应约 3 mm 的物理尺寸而印刷中 6 mm 宽的符号已经相当微小。模板给的 96 px / 25 mm横向版与 16 px / 6 mm符号版是经过行业实践检验的默认起点值实际填写时应以自己品牌的测试结果为准。② 16 px 与-favicon文件模板括号里特意注明符号的屏幕最小值应使用-favicon文件——即 export_variants.py 通过--favicon-source生成的、为小尺寸重绘过的简化版本而不是主符号的等比缩小。原因在 testing-checklist.md 中有明确说明16 px 下细节会糊成一团mush因此需要fewer elements, thicker strokes, bigger gaps更少的元素、更粗的笔画、更大的间隙的简化小尺寸版本详细标记可以保留一个简化同伴。③ 最小尺寸是怎么定出来的这不是拍脑袋数值而是一个可重复的测试过程。testing-checklist.md 给出了方法论shrink until the mark loses its identifying features; the size just above that is the documented minimum持续缩小直到标志失去辨识特征刚好大于该临界点的尺寸就是应记录的最小值。换句话说先把标志一路缩小找到还能认出它的临界尺寸再上浮一档写入指南。如何在仓库工具链中完成这个测试preview_sheet.py 会生成一个 HTML 测试表其中包含从大到小逐级缩小的尺寸阶梯size ladder、16/32 px 像素测试、单色/反白/背景/镜像旋转等检查项svg_audit.py 则从结构与几何层面扫描 near-miss 角度、过小细节小于画布 1/48 的子形状会被告警等隐患。两份脚本的输出可以直接作为指南最小尺寸数值的测试证据。6. 第 4 节Colour——四种色彩系统一个都不能少模板的颜色表要求同时给出四种色彩系统NameHEXRGBCMYKPantonePrimary#…………Neutral#…………为什么必须写全四个系统在 color.md 的 §6 Practical reproduction 中给出了完整理由——每种媒介只认其中一种HEXWeb 与界面设计的标准写法#0F7C80。RGB屏幕显示用的三通道值通常以 0–255 整数给出如15 124 128。CMYK四色印刷process print的百分比color.md 特别建议使用整数百分比如88 23 44 5因为整数值交给印厂更干净、不易误解。Pantone专色印刷的参考编号如7714 C。color.md 同时给出重要警告RGB ≠ print——霓虹绿、电光蓝、亮橙等鲜艳色可能超出 CMYK 色域印出来会变灰暗如果品牌主色必须在纸张上保持鲜亮应尽早检查 CMYK 换算或选用专色。模板还给出了批准的颜色组合清单与照片场景规则Approved logo/background pairs: full colour on white · white on primary · white on neutral · black on white. On photos, use the white or black version on a calm area, or the version in a container shape.即全彩版用在白底、白色版用在主色底与中性色底、黑色版用在白底照片上则优先在平静区域低纹理区域使用白色或黑色版本或使用容器container shape即色块/描边框承载标志。这条规则解决的是复杂背景下的可见性问题与 identity-system.md 中关于graphic devices容器、描边、色带、边框解决繁忙背景上的可见性的论述相互印证。填充示例来自 color.md 的调色板规范模板Pantone 为近似值印刷前需用实物色卡验证NameHEXRGBCMYKPantone (approx.)UseHarbor Teal#0F7C8015 124 12888 23 44 57714 CLogo, key UI, headingsInk#14212B20 33 4383 67 49 64Black 7 CType, one-colour logo与工具链的衔接品牌色值应直接从最终确定的主 SVG 中提取。export_variants.py的单色导出命令--mono #0F7C80会把所有 fill/stroke/stop 颜色替换为该值产出品牌单色版本脚本在解析颜色时会调用svglib.normalize_color校验合法性L146-L151非法色值会被跳过并打印skip invalid colour。指南第 4 节填写的色值应当与这些导出产物中的实际颜色严格一致——这是 process.md 最终交付清单中Colours are exact brand values颜色必须是精确的品牌值的书面化。7. 第 5 节Typography——字体、回退栈与许可模板第 5 节要求三项信息Headlines: family, weight标题字体族与字重Body: family, weights正文字体族与字重范围Web fallback: system stackWeb 环境的系统字体回退栈Licences: where licensed / open licence许可来源字体数量纪律在 typography.md 的 §6 Brand typefaces beyond the logo 中仓库对品牌字体体系给出的建议是大多数身份系统限制在两个字体族以内其中的字重与斜体不受限更多家族会稀释品牌的声音。正文建议用简单、可读性高、理想情况下字重齐全的中性无衬线体并考虑系统/Web 可用性与成本标题/展示字体则允许更多个性与正文形成对比。因此填写模板时标题 1 族、正文 1 族是最稳妥的组合。Web 回退栈指定当品牌字体未能加载时退回到哪些系统字体例如system-ui, -apple-system, Segoe UI, Roboto, sans-serif这类通用栈。模板强调给出 system stack目的是让非设计者也能在任意设备上复制出最接近品牌的排版效果。许可Licences——这是最容易踩坑的一栏typography.md 的 §7 给出明确警告免费字体经常是个人使用许可personal-use only而 Logo 属于商业使用——必须确认许可允许 Logo/商标用途有些许可明确限制或在商业外使用需要单独购买 Logo 许可。SIL Open Font License 这类开放许可家族一般可安全用于 Logo。还应检查字形覆盖品牌所有语言所需的带变音符字符、标点、、、数字、货币符号是否齐全。SKILL.md 的 Honesty and limits 部分进一步要求字体许可必须允许 Logo 使用要说明你假定了哪些字体并说明轮廓是已构造好的、或必须另行构造。填写 Licences 栏时应写明具体字体的授权来源或开放许可名称而非笼统写免费。8. 第 6 节Donts——把常见误用写成明确禁令模板给出七条禁止事项全部应原样继承进指南Dont stretch or squash不得拉伸或压扁Dont recolour outside the palette不得使用调色板之外的颜色Dont rotate不得旋转Dont add shadows, outlines, gradients or effects不得添加阴影、描边、渐变或效果Dont rearrange or resize the parts of a lockup不得重新排列或缩放 lockup 的组成部分Dont place on busy backgrounds without a container不得在没有容器的情况下放在繁忙背景上Dont recreate the wordmark by typing it不得通过打字重建字标前两条直接呼应 identity-system.md 中列举的 misuse 类型stretching, recolouring, rotating, adding effects, rearranging lockups, outlining, placing on busy backgrounds without a device。最后一条不得通过打字重建字标尤其关键最终字标必须是以轮廓outlines形式存在的矢量路径任何字体中都打不出完全一致的形状——这也是 svg-construction.md 中最终 Logo 不得依赖已安装字体渲染原则的延伸主文件中不应存在活的text元素字母必须构造为路径。从工程角度补充不得添加效果/保持主文件干净在 process.md 的最终交付清单中有对应的硬性检查项无重复/多余锚点、填充形状无开放路径、所有文字已转轮廓、无位图/滤镜/效果、描边已转为填充除非刻意保留描边风格的变体、该合并的形状已合并不留发丝线缝隙。9. 第 7 节Contact——主文件与唯一答疑人模板要求规范以两个必要信息收尾Questions about usage: name, email使用相关问题联系谁Master files: location主文件存放在哪这是品牌规范中常被忽略、但对小团队极其重要的部分。identity-system.md 在 §8 Rollout and stewardship 中把它上升为原则资产管理的核心是一个事实来源one source of truth——主文件命名清晰、对所有使用者可访问规范文档必须写明有问题找谁、主文件在哪否则使用者在遇到灰色地带时只能自行猜测规范很快就会形同虚设。Master files 的构成依据 presentation-delivery.md矢量主文件 SVGWeb/开发用、PDF印刷用若用户有相应工具还提供 AI/EPS给印厂与代理商位图方面提供透明 PNG如 512/1024/2048 px与白底 JPG办公用。10. 模板在完整交付流程中的位置这份模板不是孤立文档而是 SKILL.md 设计工作流 Phase 7构建 Logo 工具包的第 6 步Guidelines handover的标准产物。整个 Phase 7 的产出链条是精修选定方向最终几何、光学校正、小尺寸简化版、加细的反白版配色1–2 个颜色为佳、可复现、HEX/RGB/CMYK/Pantone 完整、单色与灰度版仍然成立字体与 lockup水平、堆叠、纯符号、纯字标四版本锁定相对尺寸与间距展示板行业相关 mockup导出文件export_variants.py指南与交接——即本文主题的模板配套主文件与交接说明设计理由、测试结果、待办事项并以 process.md 的 §7 最终清单收尾。identity-system.md 的 §7 还提供了一份更完整的标准手册建议解剖结构共 9 个部分引言、Logo、颜色、字体、图像与图案、网格与版式、应用场景、动效与声音、联系人与文件并明确指出这是为大品牌准备的完整版对初创企业应缩减规模一页纸通常足够。本模板正是该完整结构在紧凑版方向上的落点——七个章节正好覆盖完整结构的核心骨架Logo/颜色/字体/应用/联系人去掉了大品牌才需要的网格、图案、动效等扩展内容。当品牌体量增长、需要延伸到子品牌、图案或动效时可沿着 identity-system.md 的完整章节体系将这份一页指南扩展为系统规范而在此之前一页纸的紧凑版是成本与保护之间的最优平衡。11. 完整填充示例以 Harbor 品牌为例为便于直接套用下面以仓库中 presentation-spec.example.json 演示的品牌Harbor面向首次储蓄者、气质 calm/safe/patient 的储蓄 App为例把模板逐节填成一份可直接发布的指南。其中颜色值取自 color.md 的调色板规范示例Pantone 为近似值# Harbor — Logo Guidelines (compact) ## 1. The logo - **Idea**: 一个 H其横杠是一条平静的地平线——储蓄的安稳被画成一道不会摇晃的直线。 - **Versions**: primary (horizontal) · stacked · symbol-only · wordmark-only - **Files**: digital/*.svg|png 用于屏幕RGBprint/*.pdf 用于印刷CMYK/专色。 屏幕请用 RGB 文件印刷请用 print/ 目录下的 PDF不要混用。 ## 2. Clear space Logo 四周保留 1 × symbol dot height符号圆点高度的清晰留白。留白随 Logo 等比缩放——任何场景都不要使用固定距离。 ## 3. Minimum size | Version | Screen | Print | |------------|-------------|-------------| | Horizontal | 96 px wide | 25 mm wide | | Symbol | 16 px使用 -favicon 文件 | 6 mm | ## 4. Colour | Name | HEX | RGB | CMYK | Pantone (approx.) | |-------------|---------|--------------|-------------|-------------------| | Harbor Teal | #0F7C80 | 15 124 128 | 88 23 44 5 | 7714 C | | Ink | #14212B | 20 33 43 | 83 67 49 64 | Black 7 C | **Approved logo/background pairs**: 全彩版于白底 · 白色版于 Harbor Teal · 白色版于 Ink · 黑色版于白底。 照片背景上请在纹理平静的区域使用白色或黑色版本或使用容器色块承载。 ## 5. Typography - Headlines: Harbor Sans Bold · Body: Harbor Sans Regular / Medium · Web fallback: system-ui, -apple-system, sans-serif - Licences: 字体名与授权来源 / 开放许可 ## 6. Donts Dont stretch or squash · dont recolour outside the palette · dont rotate · dont add shadows, outlines, gradients or effects · dont rearrange or resize the parts of a lockup · dont place on busy backgrounds without a container · dont recreate the wordmark by typing it. ## 7. Contact Questions about usage: name, email. Master files: location.注意第 1 节的 Idea 与 presentation-spec.example.json 中概念 Horizon H 的描述一致An H whose crossbar is a calm horizon line说明指南中的一句话 Idea 应当与概念阶段的推荐语保持同源而不是临时新写。12. 让规范数值有据可查交付前的测试与验证闭环模板中的每一项数值最小尺寸、留白比例、色彩值、文件清单都不应是凭空填写而应来自真实的测试证据。仓库为此提供了完整的验证闭环① 结构审计——产出主文件后运行python3 skills/logo-design/scripts/svg_audit.py final-symbol.svg final-horizontal.svg脚本会报告 viewBox、宽高比、颜色数量、锚点数量并针对复杂性、near-miss 角度0.3–3° 偏离整洁角度的直边、小于画布 1/48 的过小细节给出 WARN/INFO最后给出 production-readiness score生产就绪评分。testing-checklist.md 建议最终主文件的评分达到约 90 分以上且无 FAIL 项再进入交付。② 视觉测试——用测试表确认最小尺寸、单色/反白、背景与货架对比python3 skills/logo-design/scripts/preview_sheet.py final-symbol.svg final-horizontal.svg \ --refs-industry consumer-app -o preview.htmltesting-checklist.md 要求每个概念在展示前、以及最终定稿后各完整跑一遍16 px favicon、24–32 px 应用列表/头像、超大尺寸、最小尺寸测定单色黑/白、品牌色底、照片底、灰度分离镜像、旋转 180°、意外读法以及与竞品的货架测试shelf test。这些结果会直接决定指南第 3 节的最小尺寸与第 4 节的背景组合是否成立。③ 文件导出与核对——export_variants.py 生成全部变体后对照指南第 1 节的版本清单逐项核对存在性与命名--web-icons选项还会额外产出favicon.ico、favicon-16/32/48.png、apple-touch-icon.png、icon-192/512.png、maskable-512.png以及site.webmanifest与head-snippet.html供 Web 集成直接引用。④ 最终检查——交付前对照 process.md 的 §7 清单无活字体/位图/滤镜、描边已扩展、viewBox 紧凑且居中、颜色为精确品牌值、单色与反白版本齐全、文件集与交付物一致。13. 写在最后规范的最小可用闭环一页式品牌指南的本质是把设计阶段产生的高成本判断固化为使用者可以低成本执行的规则。用本模板交付时请确保以下闭环完整留白与最小尺寸来自测试而不是复制模板的占位示例值颜色四系统齐全并注明 Pantone 为近似值、印刷前需实物色卡验证字体与许可写清楚Logo 是商业使用免费字体的个人使用许可是常见陷阱文件与联系人明确确保主文件一个事实来源、疑问有唯一答疑人最后用 svg_audit.py、preview_sheet.py 与 export_variants.py 完成验证与产出让指南中的每个数字都能追溯到测试证据。对大多数小品牌而言这一页纸就是品牌资产的用户手册——它不需要华丽只需要让任何拿到 Logo 的人都能用对。赞分享AI 技能/插件AI 评测【免费下载链接】logo-design-skillA comprehensive logo-design skill for Claude, Gemini CLI, Codex and other AI agents: principles, process, SVG craft, testing tools and a 1,400 logo reference library.项目地址https://gitcode.com/gh_mirrors/lo/logo-design-skill点击查看免费下载相关推荐OpenCommit品牌指南正确使用Logo与名称的规范OpenCommit品牌指南正确使用Logo与名称的规范 品牌标识系统概述 OpenCommit品牌标识系统由视觉元素和命名规范组成旨在确保全球用户获得一致开发工具AI 应用IOPaint 命令行批处理指南一条 run 命令跑通千张图片修复IOPaint 命令行批处理指南一条 run 命令跑通千张图片修复 IOPaint 是一个基于 SOTA AI 模型的图像修复inpainting工具支人工智能AI 应用计算机视觉图像处理媒体生成后端code2prompt品牌资产使用规范Logo与名称授权指南code2prompt品牌资产使用规范Logo与名称授权指南 你还在为如何正确使用code2prompt的品牌资产而困惑吗一文解决所有授权疑问读完本文你将开发工具AI 应用上一篇深度解析 ChatGLM-6B 模型的性能评估与测试方法下一篇LAVIS真理研究探索多模态智能的终极指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考