mcpField
E
emu-branding

emu-branding

github.com/jablonkai设计与 UI443 次安装今天更新
代码仓库

关于 emu-branding

面向设计师和内容创作者的 EMU 品牌规范技能,用于制作品牌材料。内容涵盖标志、配色、字体、图像、图表、暗色模式和社交媒体规格,并提供实现参考与素材。

主要功能

  1. 01标志素材与使用规则
  2. 02EMU 配色及对比度指南
  3. 03Nebula Sans 字体素材与用法
  4. 04摄影与图形风格指南
  5. 05图表、暗色模式和社交规格

适用场景

  1. 01设计 EMU 海报和文档
  2. 02制作品牌图表与可视化
  3. 03准备社交媒体图片
  4. 04为网页内容应用 EMU 风格

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/jablonkai/skills --skill emu-branding

安装后在 Claude Code 中输入/emu-branding确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

assets/fonts/NebulaSans/
license.txt
references/
implementation.md
scripts/
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

资源路径使用场景
徽章 Logoassets/images/emu-logo.png白色圆形徽章上;适用于深色或复杂背景、头像、网站图标
透明 Logoassets/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
RGB0, 173, 239
用途主强调色、单系列图表、面积图填充、直方图柱、CTA 按钮

将其用作带透明度的填充色(例如面积图背景)时,EMU Blue 的 alpha 值应设为 50%。

辅助色

这些颜色可在设计和营销材料中与 EMU Blue 搭配使用:

颜色十六进制用途
白色#FFFFFF背景、留白
浅灰色#F5F5F5卡片、背景变化
深色(近黑色)#1A1A1A标题、强调文本
中灰色#5A5A5A正文、次要元素
深蓝色#006BA6悬停状态、浅色背景上的链接和蓝色文本
Emu Gray#4F4C4DLogo 的身体颜色——次要图形强调色、图表系列
对比度——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仅用于大标题和装饰性强调
白色背景上的深蓝色 #006BA65.8:1浅色背景上的链接和小号蓝色文本
深蓝色 #006BA6 上的白色5.8:1需要白色文本时使用的替代按钮样式
#121212 上的 EMU Blue7.3:1深色模式下的链接和强调色——EMU Blue 在此背景上十分醒目

字体排印

官方品牌字体 — Nebula Sans

品牌字体为 Nebula Sans,已随技能资源打包,位于 assets/fonts/NebulaSans/,提供 OTF、TTF 和 WOFF2 格式。

可用字重:

字重文件名推荐用途
LightNebulaSans-Light装饰性文字、大号展示文字
BookNebulaSans-Book正文、段落
MediumNebulaSans-Medium小标题、UI 标签
SemiboldNebulaSans-Semibold章节标题、强调内容
BoldNebulaSans-Bold大标题、CTA
BlackNebulaSans-Black主视觉标题、海报大标题

所有字重均提供 Italic 变体(例如 NebulaSans-BoldItalic)。

回退字体栈: Montserrat、Open Sans、Roboto、系统无衬线字体

Nebula Sans 支持完整的匈牙利语字母(ő、ű、Ő、Ű)、印刷引号(„ ”)和 半角短破折号,因此匈牙利语文案无需使用回退字体。

字体大小(网页 / 印刷)
级别大小字重
H136–48pxBold 或 Black
H228–32pxBold
H320–24pxSemibold
正文16pxBook
小号文字14pxBook 或 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)

评论

支持 Markdown