netresearch-branding
npx machina-cli add skill netresearch/netresearch-branding-skill/netresearch-branding --openclawNetresearch Brand Guidelines
Apply Netresearch brand identity to web projects, documentation, and digital content.
Auto-Trigger Conditions
Apply when:
- GitHub org is
netresearchor composer.json hasnetresearch/vendor - Creating HTML pages, dashboards, landing pages
- Another skill generates visual content
MANDATORY Requirements
- Logo:
assets/logos/netresearch-symbol-only.svgin header (min 32×32px) - Colors:
#2F99A4(primary),#FF4D00(accent only),#585961(text) - Typography: Raleway (headlines), Open Sans (body)
- Footer: Link to https://www.netresearch.de/ + "Netresearch DTT GmbH"
Quick Reference
Colors: #2F99A4 turquoise · #FF4D00 orange · #585961 text · #CCCDCC grey
Fonts: Raleway (h1-h6) · Open Sans (body) · Calibri (docs fallback)
Logo: Min 120px digital · Min 32×32 icon
References
references/colors.md- Complete color specifications, CSS variablesreferences/typography.md- Font weights, sizes, scalereferences/web-design.md- Component styles, layoutsreferences/typo3-extension-branding.md- Extension requirements
TYPO3 Extensions
- Extension icon:
Resources/Public/Icons/Extension.svg(symbol-only logo) - Description:
<What> - by Netresearch author_company:Netresearch DTT GmbH- Vendor:
netresearch/prefix
Pre-Launch QA Tools
Before launching branded content, verify compliance with automated audit tools:
| Tool | Purpose | Check |
|---|---|---|
| axe DevTools | WCAG accessibility | Color contrast, ARIA labels, keyboard navigation |
| WAVE | Accessibility evaluation | Missing alt text, heading structure, form labels |
| Chrome Lighthouse | Performance + accessibility | Contrast ratios, SEO, performance scores |
| WebAIM Contrast Checker | Color verification | Ensure #2F99A4/#FF4D00 on backgrounds meet AA |
Minimum requirements:
- Lighthouse Accessibility score: 90+
- Zero critical axe violations
- All WAVE errors resolved
See references/web-design.md for the complete pre-launch checklist.
Brand Debt
Brand inconsistencies accumulate over time ("brand debt"). Identify and remediate:
Detection signals:
- Hardcoded hex values instead of CSS variables (
#2f99a4vsvar(--nr-primary)) - Inline styles overriding brand colors
- Non-standard fonts (Arial, Helvetica instead of Raleway/Open Sans)
- Logo variations (wrong aspect ratio, missing SVG, rasterized versions)
- Inconsistent button styles across pages
Remediation workflow:
- Audit: Run
grep -r "#[0-9a-fA-F]{6}" --include="*.css" --include="*.scss"to find hardcoded colors - Centralize: Move all brand values to CSS custom properties
- Document: Track deviations in a
BRAND_DEBT.mdfile with fix priority - Monitor: Schedule quarterly brand audits using the QA tools above
Prevention:
- Use CSS variables exclusively:
var(--nr-primary),var(--nr-accent),var(--nr-text) - Lint for hardcoded brand colors in CI/CD
- Include brand review in PR checklists for UI changes
Contributing: https://github.com/netresearch/netresearch-branding-skill
Source
git clone https://github.com/netresearch/netresearch-branding-skill/blob/main/skills/netresearch-branding/SKILL.mdView on GitHub Overview
netresearch-branding enforces Netresearch identity across web pages, dashboards, and digital content. It prescribes the [n] logo, brand colors (#2F99A4, #FF4D00, #585961), and typography (Raleway for headlines, Open Sans for body) to ensure a consistent brand experience.
How This Skill Works
When you create HTML pages, dashboards, or visual content for Netresearch projects, apply the header logo from assets/logos/netresearch-symbol-only.svg (min 32×32px) and the specified colors and typography. Include the Netresearch footer link to www.netresearch.de and follow the referenced branding guidelines; automated QA tools like axe DevTools, WAVE, Chrome Lighthouse, and WebAIM checks help verify accessibility and contrast.
When to Use It
- Building HTML pages, dashboards, or landing pages for Netresearch projects
- Repos where GitHub org is netresearch or composer.json vendor is netresearch/
- Designing visual content such as dashboards, reports, or marketing visuals
- Updating documentation pages to align with Netresearch typography and colors
- Conducting pre-launch branding QA with the recommended auditing tools
Quick Start
- Step 1: Verify repository context (GitHub org is netresearch or composer.json vendor includes netresearch/)
- Step 2: Apply assets and styles: header logo at assets/logos/netresearch-symbol-only.svg, colors #2F99A4/#FF4D00/#585961, typography Raleway + Open Sans
- Step 3: Run pre-launch QA (axe DevTools, WAVE, Chrome Lighthouse, WebAIM). Ensure footer link and accessibility targets are met
Best Practices
- Use the mandated logo assets (assets/logos/netresearch-symbol-only.svg) in header and ensure a minimum 32×32px size
- Apply the exact brand colors: #2F99A4 (primary), #FF4D00 (accent), #585961 (text)
- Use Raleway for headlines and Open Sans for body text to match typography guidelines
- Include the footer link to https://www.netresearch.de/ with the text 'Netresearch DTT GmbH'
- Centralize brand values in CSS variables (e.g., var(--nr-primary), var(--nr-accent), var(--nr-text)) and lint for hardcoded colors
Example Use Cases
- A Netresearch project homepage that uses the header logo, brand colors, and Raleway/Open Sans typography
- An analytics dashboard UI that follows the Netresearch color palette and typographic scale
- A documentation site page with brand-consistent fonts, colors, and the required footer link
- An extension UI or widget set that adheres to logo usage and color rules
- A branded internal report template aligned with the typography and color guidelines
