netresearch-branding

Netresearch 品牌指南（严格）

将 Netresearch 品牌标识应用于 Web 输出、文档和 TYPO3 扩展。

自动触发条件

满足以下任一条件时自动应用：

• GitHub 组织为 netresearch，或 Composer 厂商为 netresearch/
• 创建或修改 HTML 页面、仪表板、报告、文档页面或组件演示
• 创建扩展图标或品牌化 UI 资源
• 提示词包含品牌相关词语（例如 logo、样式指南、品牌颜色）
• 其他技能生成面向用户的视觉内容

首先选择输出配置

• 托管的 TYPO3 手册（Documentation/、guides.xml、docs.typo3.org）： 使用 typo3-docs 技能，并遵循 references/typo3-docs-branding.md。保留 TYPO3 官方主题、页眉、字体和按钮颜色。在手册内容中添加原生导航卡片、 装饰性青绿色下划线和 Netresearch 结尾卡片。渲染所有受维护的语言，并检查 桌面端和移动端输出。
• 独立品牌化页面、仪表板和报告：应用以下硬性有效性规则和 Web 设计参考。页眉 logo 和 Raleway/Open Sans 要求属于此配置，不属于托管手册配置。
• 扩展图标、元数据和 README 文件：使用对应产物的具体要求；它们不是独立 HTML 页面。

根据用户指示应用所选配置。

独立品牌化页面的硬性有效性规则

缺少以下任一项，输出即无效：

1. 页眉 logo（assets/logos/netresearch-symbol-only.svg，或使用 references/logo-svg.md 中的备用方案）
2. 品牌颜色：#2F99A4（主色）、#FF4D00（仅用于强调）、#585961（文本）
3. 字体意图：标题/UI 强调使用 Raleway，正文/表单使用 Open Sans
4. 页脚包含指向 https://www.netresearch.de/ 的链接和文本 Netresearch DTT GmbH

强制 Logo 渲染行为

Logo 来源优先级：

1. assets/logos/netresearch-symbol-only.svg
2. references/logo-svg.md（内联 SVG 备用方案）
3. references/logo.md（适用于 SVG 受限 Agent 的文本备用方案）

独立品牌化页面的规则（托管手册使用其自身配置）：

• 品牌化页面的顶部页眉/导航中恰好包含一次 logo
• 最小尺寸为 32x32px；页眉中建议使用 40–56px
• 保持宽高比
• 不得重新着色、扭曲、添加滤镜、阴影或轮廓，不得替换或近似绘制
• 如果 logo 可点击，则链接到 https://www.netresearch.de/

当前参考工作流

加载参考资料前先选择输出配置。对于独立页面：

1. 使用 references/colors.md 查看调色板/令牌映射
2. 使用 references/typography.md 查看字体用途和字号层级
3. 使用 references/web-design.md 查看页面构建、布局、组件和间距
4. 使用 references/logo.md 和 references/logo-svg.md 查看 logo 备用方案
5. 使用 references/typo3-extension-branding.md 了解 TYPO3 相关内容
6. 仅在明确要求联合品牌时，使用 references/co-branding.md 查看背书文案

对于托管的 TYPO3 手册，请从 references/typo3-docs-branding.md 开始，并在编辑前 检查参考手册当前的源文件和渲染输出。

核心品牌系统

• CSS 变量使用 --nr-*——供应商前缀正是关键：这些令牌会写入项目自己的样式表中，而 --color-primary 可能已有其他含义。 检查点 NB-16 会检索这些变量。标准集合及其值如下：

  令牌	值	用途
  --nr-primary	#2F99A4	表面、边框、图标、图表系列、≥24px 的展示文字——3.38:1，不可用于正文大小的文字颜色
  --nr-primary-fill	#257880	承载白色文字的填充表面（5.15:1）
  --nr-primary-text	#15585E	白色背景上的链接、标签、小字号文字（8.11:1）
  --nr-primary-deep	#0A5057	上述元素的悬停状态（9.14:1）
  --nr-accent	#FF4D00	用作填充或标记的强调色——3.33:1，绝不可用于正文文字
  --nr-accent-dark	#CC3D00	承载白色文字的强调色填充（4.96:1）
  --nr-accent-text	#9A2E00	文字中的强调色强调（7.60:1）
  --nr-text	#585961	正文（6.96:1）
  --nr-text-secondary	#6E6F78	帮助信息、元信息、说明文字（4.99:1）
  --nr-bg / --nr-bg-alt	#FFFFFF / #F5F5F5	页面和区块背景
  --nr-border	#CCCDCC	仅用于分隔线和装饰（1.59:1）
  --nr-border-strong	#8A8B93	交互控件的可见边界——SC 1.4.11 要求 3:1
  --nr-border-light	#E5E5E5	细线

  深色表面使用完全不同的一套颜色——参见 references/colors.md。

• 强调橙色仅用于突出显示，不得主导表面

• 无障碍：至少达到 WCAG AA 对比度，并采用语义化结构

• 面向用户的品牌页面必须包含页脚品牌标识

构建独立品牌页面

以上规则规定了 Netresearch 的外观；本节说明 templates/styles.css 如何据此构建独立页面、仪表板或应用屏幕。 本节适用于独立页面配置：托管的 TYPO3 手册保留其自身配置，只有硬性有效性规则会判定输出无效。请从模板开始；references/web-design.md（“品牌页面的构建方式”）说明设计依据和所有组件。

• 每页一个醒目的表面：石油蓝渐变 #257880 → #15585E → #0A5057 搭配嵌套方形图案，用于主视觉区、分栏品牌面板或应用页眉条带。除此之外，所有区域都保持白色或 #F5F5F5，强制要求使用的炭灰色页脚除外。
• 用细线营造层次：1px --nr-border-light 边框，加上多层柔和阴影；控件圆角为 10px，卡片为 16px，主视觉面板和对话框为 24px。悬停时不跳动，不使用 transition: all。
• 用字体呈现层级：标题使用品牌文字颜色 #585961，左对齐；搭配大写眉题，其橙色圆点按预期用途作为强调色。文字字号不得小于 14px（references/typography.md）。
• 状态同时通过形式和颜色表达：状态使用带圆点和文字的徽标（.badge-*），指标使用带等宽数字的卡片（.stat），消息使用白色通知卡片，并配有采用对应状态色调的图标块（.notice-*）。卡片、通知或面板边缘不得添加彩色条纹。
• 让控件一目了然：48px 的输入框和按钮、3:1 的输入框边框、实心焦点轮廓（--nr-focus；渐变背景和页脚上使用白色）、绘制式复选框、用于切换两个到四个视图的分段控件，并在标签中标出必填字段。
• 真实流程使用步骤，引导流程使用分栏布局：登录、请求和上传界面将带流程步骤的品牌面板置于左侧，任务置于右侧。
• 兼容两种配色方案：每个颜色令牌都有对应的深色值（references/colors.md）；遵循 prefers-color-scheme 和 data-theme。

联合品牌（可选）

仅适用于请求明确要求将 Netresearch 与第二个品牌（平台、Netresearch 产品品牌、客户）结合的情况。将某个品牌作为主题并不属于此类请求：关于 OroCommerce 的 Netresearch 页面仍仅使用 Netresearch 品牌。

• Netresearch 仍为发件方；Hard Validity Rules 保持不变。
• 第二个品牌作为内容点缀出现；背书语句需说明 Netresearch 的角色。
• 由其他品牌作为发件方的输出不在范围内。
• 角色、语句目录和保护措施：references/co-branding.md。

TYPO3 扩展要求

• 图标路径：Resources/Public/Icons/Extension.svg（青绿色 #2F99A4）
• Composer 厂商前缀：netresearch/
• author_company：Netresearch DTT GmbH
• 描述后缀：- by Netresearch
• 联系方式：[email protected]

品牌素材

• assets/markdown-pdf.css — 为 markdown-to-pdf-skill 提供的品牌样式表；通过 --css 应用。其 .page-header/.page-footer 运行元素不会由 convert.py 输出；调用方必须提供包含这些元素的 HTML（见该技能的 SKILL.md）。
• assets/markdown-pdf-logo.svg — 独立的 Netresearch 徽标（品牌青绿色/灰色），可通用。
• assets/markdown-pdf-logo-white.svg — 白色填充版本，用于 .page-header 运行页眉；在青绿色背景（--nr-primary）上，青绿色/灰色徽标缺乏对比度。这是获准的“不得重新着色”规则例外——不得用于其他场景。

按制品类型区分许可

“Netresearch 许可”并非单一许可。应根据制品类型选择：

制品	许可
TYPO3 扩展（netresearch/t3x-*、任何 typo3-cms-extension）	AGPL-3.0-or-later；若扩展必须与仅采用 GPL-2.0 的代码并存，则使用 GPL-2.0-or-later——TYPO3 核心采用 GPL-2.0-or-later，扩展须遵守相应义务
Agent 技能、库、CLI、内部工具	分开授权：代码采用 MIT，说明文字和参考内容采用 CC-BY-SA-4.0；随附 LICENSE-MIT + LICENSE-CC-BY-SA-4.0，SPDX 表达式为 (MIT AND CC-BY-SA-4.0)
品牌素材（徽标文件、颜色规范、本技能的参考资料）	CC-BY-SA-4.0；此外，徽标还须遵守 references/logo.md 中的商标规则——许可并不允许重新着色或扭曲

各类详情：扩展见 references/typo3-extension-branding.md， 技能和工具见 references/README-branding.md。

不作主观评价

在品牌报告、PR/提交文本和文档中，应说明变更或输出的作用，而非工作有多好——不要叙述预期结果（“所有测试均通过”），也不要自我表扬（“整洁”）。判断依据是语气，而非词表。参见 references/no-editorializing.md。

参考资料

• references/colors.md
• references/typography.md
• references/web-design.md
• references/logo.md
• references/logo-svg.md
• references/typo3-extension-branding.md
• references/typo3-docs-branding.md
• references/README-branding.md
• references/no-editorializing.md
• references/co-branding.md（仅适用于明确提出的联合品牌请求）