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

Maintenance80

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

46d 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)
```

###  Alternatives

[soup/paginator

Paginator is a simple class that allows you to create pagination. It doesn't require any database connection. It is compatible with Twitter's Bootstrap Framework, by using the CSS class pagination that is also attached.

351.5k](/packages/soup-paginator)[components/jquery-htmlclean

HTML Clean plug-in for jQuery

183.1k1](/packages/components-jquery-htmlclean)

PHPackages © 2026

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