PHPackages                             netresearch/agent-netresearch-branding - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. netresearch/agent-netresearch-branding

ActiveAi-agent-skill[Utility & Helpers](/categories/utility)

netresearch/agent-netresearch-branding
======================================

Netresearch AI skill for brand identity and design standards in web projects

v2.6.0(1mo ago)20[1 issues](https://github.com/netresearch/netresearch-branding-skill/issues)(MIT AND CC-BY-SA-4.0)ShellCI passing

Since Dec 16Pushed 1mo ago2 watchersCompare

[ Source](https://github.com/netresearch/netresearch-branding-skill)[ Packagist](https://packagist.org/packages/netresearch/agent-netresearch-branding)[ RSS](/packages/netresearch-agent-netresearch-branding/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (2)Versions (22)Used By (0)

Netresearch Brand Guidelines Skill
==================================

[](#netresearch-brand-guidelines-skill)

A comprehensive Claude Code skill for implementing Netresearch brand guidelines in web projects. Ensures consistent brand application across all digital touchpoints.

🔌 Compatibility
---------------

[](#-compatibility)

This is an **Agent Skill** following the [open standard](https://agentskills.io) originally developed by Anthropic and released for cross-platform use.

**Supported Platforms:**

- ✅ Claude Code (Anthropic)
- ✅ Cursor
- ✅ GitHub Copilot
- ✅ Other skills-compatible AI agents

> Skills are portable packages of procedural knowledge that work across any AI agent supporting the Agent Skills specification.

Overview
--------

[](#overview)

This skill provides complete brand guidelines, reference documentation, and ready-to-use templates for implementing Netresearch's visual identity on web projects. It enables Claude Code to help developers and designers maintain brand consistency across websites, applications, and digital materials.

Features
--------

[](#features)

### 📋 Comprehensive Brand Guidelines

[](#-comprehensive-brand-guidelines)

- **SKILL.md** - Complete brand implementation guide covering:
    - Brand identity and core values
    - Color system with accessibility compliance
    - Typography standards (Raleway, Open Sans, Calibri)
    - Logo usage guidelines and restrictions
    - Web design principles and best practices
    - Component styles and patterns
    - Social media specifications
    - Image guidelines
    - Accessibility requirements (WCAG AA)
    - Implementation checklists

### 🎨 Reference Documentation

[](#-reference-documentation)

- **colors.md** - Detailed color palette with:

    - Technical specifications (Hex, RGB, CMYK, Pantone, NCS)
    - Usage guidelines and approved combinations
    - WCAG AA contrast ratios
    - CSS custom properties
    - Accessibility compliance details
- **typography.md** - Complete typography system with:

    - Font specifications and licensing
    - Web font loading strategies
    - Typography scale and hierarchy
    - Responsive typography patterns
    - Line height and spacing guidelines
    - Performance optimization
- **web-design.md** - Web implementation patterns:

    - Responsive grid system
    - Component library (buttons, cards, forms, navigation)
    - Layout patterns
    - Animations and transitions
    - Accessibility considerations

### 🎯 Templates & Examples

[](#-templates--examples)

- **landing-page.html** - Complete landing page template
- **styles.css** - Production-ready brand CSS with all components
- **components.html** - Interactive component showcase

Installation
------------

[](#installation)

### Marketplace (Recommended)

[](#marketplace-recommended)

Add the [Netresearch marketplace](https://github.com/netresearch/claude-code-marketplace) once, then browse and install skills:

```
# Claude Code
/plugin marketplace add netresearch/claude-code-marketplace
```

### npx ([skills.sh](https://skills.sh))

[](#npx-skillssh)

Install with any [Agent Skills](https://agentskills.io)-compatible agent:

```
npx skills add https://github.com/netresearch/netresearch-branding-skill --skill netresearch-branding
```

### Download Release

[](#download-release)

Download the [latest release](https://github.com/netresearch/netresearch-branding-skill/releases/latest) and extract to your agent's skills directory.

### Git Clone

[](#git-clone)

```
git clone https://github.com/netresearch/netresearch-branding-skill.git
```

### Composer (PHP Projects)

[](#composer-php-projects)

```
composer require netresearch/netresearch-branding-skill
```

Requires [netresearch/composer-agent-skill-plugin](https://github.com/netresearch/composer-agent-skill-plugin).

Usage
-----

[](#usage)

### Automatic Activation

[](#automatic-activation)

The skill activates automatically when working on:

- Netresearch web projects
- Brand implementation tasks
- UI/UX development requiring brand compliance
- Documentation needing brand guidelines

### Manual Invocation

[](#manual-invocation)

```
/skill netresearch-branding
```

### Example Workflows

[](#example-workflows)

#### **Creating a New Landing Page**

[](#creating-a-new-landing-page)

```
User: "Create a landing page following Netresearch brand guidelines"

Claude: [Activates netresearch-branding skill]
- Uses brand colors (Turquoise #2F99A4, Orange #FF4D00)
- Applies Raleway for headlines, Open Sans for body
- Implements high white space design principle
- Creates responsive layout with brand components
- Ensures WCAG AA accessibility compliance
- Delivers production-ready HTML/CSS

```

#### **Brand Compliance Check**

[](#brand-compliance-check)

```
User: "Review this website design for Netresearch brand compliance"

Claude: [Activates netresearch-branding skill]
- Verifies color usage (primary vs accent)
- Checks typography (correct fonts and weights)
- Validates spacing and white space principles
- Reviews component implementations
- Assesses accessibility compliance
- Provides specific improvement recommendations

```

#### **Component Development**

[](#component-development)

```
User: "Create a contact form with Netresearch branding"

Claude: [Activates netresearch-branding skill]
- Uses branded form components
- Applies correct input styling
- Implements brand buttons
- Ensures proper spacing
- Validates accessibility
- Provides complete HTML/CSS

```

Brand Quick Reference
---------------------

[](#brand-quick-reference)

### Colors

[](#colors)

ColorHexUsage**Turquoise**`#2F99A4`Primary brand color, links, CTAs**Orange**`#FF4D00`Accent color, emphasis only**Anthracite**`#585961`Primary text color**Light Grey**`#CCCDCC`Borders, backgrounds**White**`#FFFFFF`Primary background### Typography

[](#typography)

ElementFontSizeWeight**Headlines (Web)**Raleway48px-56px700**Body (Web)**Open Sans16px400**Buttons**Raleway16px600**Documents**Calibri11-12pt400/700### Key Principles

[](#key-principles)

1. **High White Space** - Generous padding and margins throughout
2. **Responsive Design** - Mobile-first approach with defined breakpoints
3. **Accessibility** - WCAG AA compliance mandatory
4. **Color Hierarchy** - Turquoise primary, orange accent only
5. **Clean Typography** - Clear hierarchy with Raleway + Open Sans

File Structure
--------------

[](#file-structure)

```
netresearch-branding-skill/
├── SKILL.md                      # Main skill file with guidelines
├── README.md                     # This file
├── references/
│   ├── colors.md                 # Color palette reference
│   ├── typography.md             # Typography system
│   └── web-design.md             # Web components & patterns
├── templates/
│   ├── landing-page.html         # Landing page template
│   └── styles.css                # Brand CSS framework
└── examples/
    └── components.html           # Interactive component showcase

```

Brand Component Library
-----------------------

[](#brand-component-library)

### Buttons

[](#buttons)

```

Get Started

Learn More

Contact Us
```

### Cards

[](#cards)

```

    Card Title
    Card description.
    Learn more

```

### Forms

[](#forms)

```

  Email*

```

CSS Custom Properties
---------------------

[](#css-custom-properties)

The skill includes a complete set of CSS custom properties for easy implementation:

```
:root {
  /* Brand Colors */
  --color-primary: #2F99A4;
  --color-accent: #FF4D00;
  --color-text-primary: #585961;

  /* Typography */
  --font-headline: 'Raleway', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
}
```

Accessibility Compliance
------------------------

[](#accessibility-compliance)

All brand implementations must meet **WCAG AA** standards:

✅ **Text Contrast Ratios:**

- Anthracite on white: 8.3:1 (AAA)
- White on turquoise: 4.5:1 (AA)
- Turquoise on white: 3.8:1 (AA for large text)

✅ **Keyboard Navigation:**

- All interactive elements accessible
- Visible focus states
- Logical tab order

✅ **Screen Readers:**

- Semantic HTML
- ARIA labels where needed
- Alternative text for images

Responsive Breakpoints
----------------------

[](#responsive-breakpoints)

```
/* Mobile First Approach */
/* Extra Small: 0-599px (default) */
/* Small: 600px+ */
/* Medium: 768px+ */
/* Large: 1024px+ */
/* Extra Large: 1440px+ */
```

Social Media Specifications
---------------------------

[](#social-media-specifications)

### Profile Images

[](#profile-images)

- **Facebook:** 180 × 180 px (displays at 170 × 170 px)
- **LinkedIn:** 400 × 400 px (displays at 300 × 300 px)
- **Twitter:** 400 × 400 px (displays at 200 × 200 px)
- **XING:** 1024 × 1024 px

### Header/Cover Images

[](#headercover-images)

- **Facebook:** 820 × 312 px
- **LinkedIn (Company):** 1128 × 191 px
- **Twitter:** 1500 × 500 px
- **XING:** 970 × 250 px

Quality Checklist
-----------------

[](#quality-checklist)

Before deploying any branded material:

**Visual Design:**

- Colors match exact hex values
- Turquoise is primary, orange is accent only
- High white space maintained
- Typography uses Raleway + Open Sans

**Technical:**

- Responsive design implemented
- WCAG AA compliance verified
- Fonts loaded efficiently
- CSS follows naming conventions

**Content:**

- Logo used correctly
- Images follow brand guidelines
- Consistent tone and voice
- No unapproved color combinations

Contributing
------------

[](#contributing)

Contributions are welcome! Please follow these guidelines:

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/improvement`)
3. Make your changes
4. Test thoroughly against brand guidelines
5. Commit your changes (`git commit -m 'Add improvement'`)
6. Push to the branch (`git push origin feature/improvement`)
7. Create a Pull Request

License
-------

[](#license)

This project uses split licensing:

- **Code** (scripts, workflows, configs): [MIT](LICENSE-MIT)
- **Content** (skill definitions, documentation, references): [CC-BY-SA-4.0](LICENSE-CC-BY-SA-4.0)

See the individual license files for full terms.

Support
-------

[](#support)

**Issues and Questions:**

- GitHub Issues: [Report issues](https://github.com/netresearch/netresearch-branding-skill/issues)

**Netresearch Contact:**

- **Website:**
- **Issues:**
- **Phone:** +49 341 49288-0
- **Address:** Nonnenstraße 11d, 04229 Leipzig, Germany

Related Skills
--------------

[](#related-skills)

- **typo3-docs** - TYPO3 extension documentation creation
- **typo3-testing** - TYPO3 extension testing infrastructure
- **typo3-conformance** - TYPO3 coding standards evaluation

Credits
-------

[](#credits)

Created by Netresearch DTT GmbH for consistent brand implementation across digital projects.

**Maintained By:** Netresearch DTT GmbH, Leipzig, Germany

---

**Version:** 1.0.0 **Last Updated:** 2025-10-18

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance81

Actively maintained with recent releases

Popularity3

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity44

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 98.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~5 days

Total

20

Last Release

41d ago

Major Versions

v1.3.2 → v2.0.02026-01-19

### Community

Maintainers

![](https://www.gravatar.com/avatar/acffee6a64e18f21593794b335dd8786001148f7df89fd8372a54d3dd09d91a4?d=identicon)[netresearch](/maintainers/netresearch)

---

Top Contributors

[![CybotTM](https://avatars.githubusercontent.com/u/326348?v=4)](https://github.com/CybotTM "CybotTM (90 commits)")[![renovate[bot]](https://avatars.githubusercontent.com/in/2740?v=4)](https://github.com/renovate[bot] "renovate[bot] (1 commits)")

---

Tags

agent-skillsai-agentbrandingclaude-code-skillcorporate-identitydesign-systemnetresearchopen-standardskill

### Embed Badge

![Health badge](/badges/netresearch-agent-netresearch-branding/health.svg)

```
[![Health](https://phpackages.com/badges/netresearch-agent-netresearch-branding/health.svg)](https://phpackages.com/packages/netresearch-agent-netresearch-branding)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)