关于 emu-branding
面向设计师和内容创作者的 EMU 品牌规范技能,用于制作品牌材料。内容涵盖标志、配色、字体、图像、图表、暗色模式和社交媒体规格,并提供实现参考与素材。
主要功能
- 01标志素材与使用规则
- 02EMU 配色及对比度指南
- 03Nebula Sans 字体素材与用法
- 04摄影与图形风格指南
- 05图表、暗色模式和社交规格
适用场景
- 01设计 EMU 海报和文档
- 02制作品牌图表与可视化
- 03准备社交媒体图片
- 04为网页内容应用 EMU 风格
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ jablonkai/ skills --skill emu-branding安装后在 Claude Code 中输入/emu-branding确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
assets/fonts/NebulaSans/license.txtreferences/implementation.mdscripts/font_face_css.py详细介绍
EMU 品牌
EMU(Egyesület a Magyar Ultrafutásért)的官方品牌指南。
以下资源路径均相对于此技能目录。使用前请将它们解析为绝对路径——你生成的内容几乎总是位于其他位置。确定媒介后,请阅读references/implementation.md,了解具体实现方式(在 HTML 中嵌入字体、配置 matplotlib/Pillow、制作 Office 文档)。
品牌标识
| 属性 | 值 |
|---|---|
| 全称 | Egyesület a Magyar Ultrafutásért |
| 简称 / 缩写 | EMU |
| 使命 | 在匈牙利及世界各地推广和支持超长距离跑步! |
| 旗舰赛事 | EMU 6-Day Race |
Logo 图案是一只风格化的奔跑鸸鹋——这是对协会缩写的文字游戏——鸸鹋身体为灰色(#4F4C4D),脖子为 EMU Blue,头部为黑色;下方是 EMU Blue 的小写 slab-serif emu 字标。
Logo
| 资源 | 路径 | 使用场景 |
|---|---|---|
| 徽章 Logo | assets/images/emu-logo.png | 白色圆形徽章上;适用于深色或复杂背景、头像、网站图标 |
| 透明 Logo | assets/images/emu-logo-transparent.png | 透明背景,分辨率更高——白色/浅色背景、海报、页眉、文档上的默认选择 |
直接放在浅色表面时,优先使用透明版本;背景为深色、有纹理、照片或 EMU Blue 时,使用徽章版本——深色表面上灰色身体会消失,蓝色背景上蓝色脖子和字标会消失。
使用规则
- Logo 周围应留出足够的空白(每侧至少为 Logo 高度的 10%)
- 不得扭曲、旋转或重新着色
- 最小尺寸:数字场景下高度为 40px,印刷品中为 15mm
- 在深色、照片或 EMU Blue 背景上,使用徽章版本(
emu-logo.png) - 始终使用 Logo 图片;切勿用 Nebula Sans 或其他字体重新输入“emu”字标——slab-serif 字标是标志的一部分
色彩方案
主色——EMU Blue
最重要的品牌色,在代码中定义为 EMU Blue:
| 属性 | 值 |
|---|---|
| 十六进制 | #00ADEF |
| RGB | 0, 173, 239 |
| 用途 | 主强调色、单系列图表、面积图填充、直方图柱、CTA 按钮 |
将其用作带透明度的填充色(例如面积图背景)时,EMU Blue 的 alpha 值应设为 50%。
辅助色
这些颜色可在设计和营销材料中与 EMU Blue 搭配使用:
| 颜色 | 十六进制 | 用途 |
|---|---|---|
| 白色 | #FFFFFF | 背景、留白 |
| 浅灰色 | #F5F5F5 | 卡片、背景变化 |
| 深色(近黑色) | #1A1A1A | 标题、强调文本 |
| 中灰色 | #5A5A5A | 正文、次要元素 |
| 深蓝色 | #006BA6 | 悬停状态、浅色背景上的链接和蓝色文本 |
| Emu Gray | #4F4C4D | Logo 的身体颜色——次要图形强调色、图表系列 |
对比度——EMU Blue 的适用与禁用场景
EMU Blue 较亮:在白色背景上,对比度仅为 2.5:1,低于可读文本所需的 4.5:1。这会影响一些常见的设计选择:
| 组合 | 比率 | 用途 |
|---|---|---|
EMU Blue 上的 #1A1A1A 文本 | 6.8:1 | 按钮、徽章、横幅——蓝色填充上的默认文本颜色 |
| EMU Blue 上的白色文本 | 2.5:1 | 仅用于超大展示文字(≥ 40px 粗体),绝不可用于正文或按钮标签 |
| 白色背景上的 EMU Blue 文本 | 2.5:1 | 仅用于大标题和装饰性强调 |
白色背景上的深蓝色 #006BA6 | 5.8:1 | 浅色背景上的链接和小号蓝色文本 |
深蓝色 #006BA6 上的白色 | 5.8:1 | 需要白色文本时使用的替代按钮样式 |
#121212 上的 EMU Blue | 7.3:1 | 深色模式下的链接和强调色——EMU Blue 在此背景上十分醒目 |
字体排印
官方品牌字体 — Nebula Sans
品牌字体为 Nebula Sans,已随技能资源打包,位于 assets/fonts/NebulaSans/,提供 OTF、TTF 和 WOFF2 格式。
可用字重:
| 字重 | 文件名 | 推荐用途 |
|---|---|---|
| Light | NebulaSans-Light | 装饰性文字、大号展示文字 |
| Book | NebulaSans-Book | 正文、段落 |
| Medium | NebulaSans-Medium | 小标题、UI 标签 |
| Semibold | NebulaSans-Semibold | 章节标题、强调内容 |
| Bold | NebulaSans-Bold | 大标题、CTA |
| Black | NebulaSans-Black | 主视觉标题、海报大标题 |
所有字重均提供 Italic 变体(例如 NebulaSans-BoldItalic)。
回退字体栈: Montserrat、Open Sans、Roboto、系统无衬线字体
Nebula Sans 支持完整的匈牙利语字母(ő、ű、Ő、Ű)、印刷引号(„ ”)和 半角短破折号,因此匈牙利语文案无需使用回退字体。
字体大小(网页 / 印刷)
| 级别 | 大小 | 字重 |
|---|---|---|
| H1 | 36–48px | Bold 或 Black |
| H2 | 28–32px | Bold |
| H3 | 20–24px | Semibold |
| 正文 | 16px | Book |
| 小号文字 | 14px | Book 或 Light |
加载字体
只有字体实际完成渲染,才算符合品牌规范——页面若只声明 'Nebula Sans' 而未加载字体,就会静默回退到 Arial。字重映射:Light=300、Book=400、
Medium=500、Semibold=600、Bold=700、Black=900。
- HTML:
python3 scripts/font_face_css.py Book Bold Black会输出@font-face规则,并将 WOFF2 文件以 base64 嵌入,因此单文件页面可在任何地方使用;添加--href fonts可改为链接复制的字体文件。 - matplotlib / Pillow: 通过绝对路径注册或打开 TTF 文件。
- Word / PowerPoint: 字体仅按名称引用,不会嵌入——请告知用户。
各项详情和代码片段请参阅:references/implementation.md。
视觉风格
摄影
- 超级马拉松比赛动态照片——跑者在道路上奔跑
- 匈牙利风光和赛事(尤其是 EMU 6-Day Race 场地)
- 自然光照下充满动感与活力的构图
- 避免摆拍感过强或看起来像图库照片
图形元素
- 简洁现代的线条——避免繁复装饰
- 鸸鹋剪影可用作装饰元素或图案
- 以 EMU Blue 为主色强调色
- 使用简单的几何形状作为背景和边框
数据可视化与图表
创建图表或数据可视化内容时:
| 元素 | 风格 |
|---|---|
| 单一系列 | 使用 EMU Blue #00ADEF 实色 |
| 面积填充 | 使用 50% 不透明度的 EMU Blue |
| 多系列配色 | 按顺序使用:#00ADEF、#006BA6、#4F4C4D、#80D6F7、#1A1A1A、#A7A5A6——系列超过 6 个时应考虑拆分图表 |
| 突出显示某一项 | 该项使用 EMU Blue,其他所有柱形 / 折线使用 #C8C8C8 |
| 网格线 | #E0E0E0,1px |
| 坐标轴标签 | Nebula Sans Book、#5A5A5A、14px |
| 图表标题 | Nebula Sans Semibold、#1A1A1A、20px |
| 注释 | Nebula Sans Medium、EMU Blue |
图表风格应简洁、清晰——避免 3D 效果、过多网格线或粗重边框。默认使用白色背景。标题左对齐,去掉上边框和右边框;如果数据点不多、便于阅读,可直接在柱形上标注数值。用于社交媒体的图表可在角落放置小号 Logo;嵌入 EMU 自有文档的图表则不应添加。
深色模式
为深色背景或深色模式 UI 创建内容时:
| 元素 | 浅色模式 | 深色模式 |
|---|---|---|
| 背景 | #FFFFFF | #121212 |
| 卡片表面 | #F5F5F5 | #1E1E1E |
| 主要文本 | #1A1A1A | #E0E0E0 |
| 次要文本 | #5A5A5A | #9E9E9E |
| EMU Blue | #00ADEF(不变) | #00ADEF(不变) |
| 网格线 | #E0E0E0 | #333333 |
EMU Blue 在深色背景上的显示效果甚至优于浅色背景(在 #121212 上的对比度为 7.3:1),因此在深色模式下也可用于链接和小号强调文字。深色背景上请使用徽章版 Logo(emu-logo.png)——白色圆形可提供所需的对比度。
社交媒体
帖子尺寸
| 平台 | 格式 | 尺寸 |
|---|---|---|
| Instagram 帖子 | 竖版(首选 — 可占满动态流) | 1080×1350px |
| Instagram 帖子 | 正方形 | 1080×1080px |
| Instagram 快拍 | 竖版 | 1080×1920px |
| Facebook 帖子 | 横版 | 1200×630px |
| Facebook 封面 | 宽幅 | 1640×924px |
| X/Twitter 帖子 | 横版 | 1600×900px |
话题标签
#EMU6DayRace#6DayRace#6DayRun#ultrafutás(匈牙利语)#ultrarunning
语气风格
- 热情、有激励性——赞颂跑者的成就
- 营造社区氛围——包容所有超马跑者
- 专业又友好,平易近人
- 双语:面向国际受众使用英语,本地活动使用匈牙利语
- 匈牙利语文案遵循匈牙利语惯例:使用 „idézőjel” 引号、小数逗号(
812,3 km)、日期格式 如2026. május 18.,以及用窄空格或空格分隔千位(1 000 km)