{"id":35747439,"url":"https://github.com/netresearch/netresearch-branding-skill","last_synced_at":"2026-03-15T19:47:58.954Z","repository":{"id":319628052,"uuid":"1078745957","full_name":"netresearch/netresearch-branding-skill","owner":"netresearch","description":"Agent Skill for implementing Netresearch brand guidelines - colors, typography, components | Claude Code compatible","archived":false,"fork":false,"pushed_at":"2026-01-29T20:22:17.000Z","size":69,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-30T05:16:22.806Z","etag":null,"topics":["agent-skills","ai-agent","branding","claude-code-skill","corporate-identity","design-system","netresearch","open-standard","skill"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/netresearch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-18T10:33:28.000Z","updated_at":"2026-01-29T20:22:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"6a2106b7-2eeb-4376-8f9d-c0c8d1884eeb","html_url":"https://github.com/netresearch/netresearch-branding-skill","commit_stats":null,"previous_names":["netresearch/netresearch-branding-skill"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/netresearch/netresearch-branding-skill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netresearch%2Fnetresearch-branding-skill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netresearch%2Fnetresearch-branding-skill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netresearch%2Fnetresearch-branding-skill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netresearch%2Fnetresearch-branding-skill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/netresearch","download_url":"https://codeload.github.com/netresearch/netresearch-branding-skill/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netresearch%2Fnetresearch-branding-skill/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28928906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T04:05:25.756Z","status":"ssl_error","status_checked_at":"2026-01-31T04:02:35.005Z","response_time":128,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent-skills","ai-agent","branding","claude-code-skill","corporate-identity","design-system","netresearch","open-standard","skill"],"created_at":"2026-01-06T18:15:42.340Z","updated_at":"2026-03-15T19:47:58.947Z","avatar_url":"https://github.com/netresearch.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Netresearch Brand Guidelines Skill\n\nA comprehensive Claude Code skill for implementing Netresearch brand guidelines in web projects. Ensures consistent brand application across all digital touchpoints.\n\n## 🔌 Compatibility\n\nThis is an **Agent Skill** following the [open standard](https://agentskills.io) originally developed by Anthropic and released for cross-platform use.\n\n**Supported Platforms:**\n- ✅ Claude Code (Anthropic)\n- ✅ Cursor\n- ✅ GitHub Copilot\n- ✅ Other skills-compatible AI agents\n\n\u003e Skills are portable packages of procedural knowledge that work across any AI agent supporting the Agent Skills specification.\n\n\n## Overview\n\nThis 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.\n\n## Features\n\n### 📋 Comprehensive Brand Guidelines\n- **SKILL.md** - Complete brand implementation guide covering:\n  - Brand identity and core values\n  - Color system with accessibility compliance\n  - Typography standards (Raleway, Open Sans, Calibri)\n  - Logo usage guidelines and restrictions\n  - Web design principles and best practices\n  - Component styles and patterns\n  - Social media specifications\n  - Image guidelines\n  - Accessibility requirements (WCAG AA)\n  - Implementation checklists\n\n### 🎨 Reference Documentation\n- **colors.md** - Detailed color palette with:\n  - Technical specifications (Hex, RGB, CMYK, Pantone, NCS)\n  - Usage guidelines and approved combinations\n  - WCAG AA contrast ratios\n  - CSS custom properties\n  - Accessibility compliance details\n\n- **typography.md** - Complete typography system with:\n  - Font specifications and licensing\n  - Web font loading strategies\n  - Typography scale and hierarchy\n  - Responsive typography patterns\n  - Line height and spacing guidelines\n  - Performance optimization\n\n- **web-design.md** - Web implementation patterns:\n  - Responsive grid system\n  - Component library (buttons, cards, forms, navigation)\n  - Layout patterns\n  - Animations and transitions\n  - Accessibility considerations\n\n### 🎯 Templates \u0026 Examples\n- **landing-page.html** - Complete landing page template\n- **styles.css** - Production-ready brand CSS with all components\n- **components.html** - Interactive component showcase\n\n## Installation\n\n### Option 1: Via Netresearch Marketplace (Recommended)\n\n```bash\n/plugin marketplace add netresearch/claude-code-marketplace\n```\n\nThen browse skills with `/plugin`.\n\n### Option 2: Download Release\n\nDownload the [latest release](https://github.com/netresearch/netresearch-branding-skill/releases/latest) and extract to `~/.claude/skills/netresearch-branding/`\n\n### Option 3: Manual Installation\n\n```bash\n# Using curl\ncurl -L https://github.com/netresearch/netresearch-branding-skill/archive/refs/heads/main.zip -o netresearch-branding.zip\nunzip netresearch-branding.zip -d ~/.claude/skills/\nmv ~/.claude/skills/netresearch-branding-skill-main ~/.claude/skills/netresearch-branding\n\n# Or using git\ngit clone https://github.com/netresearch/netresearch-branding-skill.git ~/.claude/skills/netresearch-branding\n```\n\n## Usage\n\n### Automatic Activation\n\nThe skill activates automatically when working on:\n- Netresearch web projects\n- Brand implementation tasks\n- UI/UX development requiring brand compliance\n- Documentation needing brand guidelines\n\n### Manual Invocation\n\n```bash\n/skill netresearch-branding\n```\n\n### Example Workflows\n\n#### **Creating a New Landing Page**\n```\nUser: \"Create a landing page following Netresearch brand guidelines\"\n\nClaude: [Activates netresearch-branding skill]\n- Uses brand colors (Turquoise #2F99A4, Orange #FF4D00)\n- Applies Raleway for headlines, Open Sans for body\n- Implements high white space design principle\n- Creates responsive layout with brand components\n- Ensures WCAG AA accessibility compliance\n- Delivers production-ready HTML/CSS\n```\n\n#### **Brand Compliance Check**\n```\nUser: \"Review this website design for Netresearch brand compliance\"\n\nClaude: [Activates netresearch-branding skill]\n- Verifies color usage (primary vs accent)\n- Checks typography (correct fonts and weights)\n- Validates spacing and white space principles\n- Reviews component implementations\n- Assesses accessibility compliance\n- Provides specific improvement recommendations\n```\n\n#### **Component Development**\n```\nUser: \"Create a contact form with Netresearch branding\"\n\nClaude: [Activates netresearch-branding skill]\n- Uses branded form components\n- Applies correct input styling\n- Implements brand buttons\n- Ensures proper spacing\n- Validates accessibility\n- Provides complete HTML/CSS\n```\n\n## Brand Quick Reference\n\n### Colors\n\n| Color | Hex | Usage |\n|-------|-----|-------|\n| **Turquoise** | `#2F99A4` | Primary brand color, links, CTAs |\n| **Orange** | `#FF4D00` | Accent color, emphasis only |\n| **Anthracite** | `#585961` | Primary text color |\n| **Light Grey** | `#CCCDCC` | Borders, backgrounds |\n| **White** | `#FFFFFF` | Primary background |\n\n### Typography\n\n| Element | Font | Size | Weight |\n|---------|------|------|--------|\n| **Headlines (Web)** | Raleway | 48px-56px | 700 |\n| **Body (Web)** | Open Sans | 16px | 400 |\n| **Buttons** | Raleway | 16px | 600 |\n| **Documents** | Calibri | 11-12pt | 400/700 |\n\n### Key Principles\n\n1. **High White Space** - Generous padding and margins throughout\n2. **Responsive Design** - Mobile-first approach with defined breakpoints\n3. **Accessibility** - WCAG AA compliance mandatory\n4. **Color Hierarchy** - Turquoise primary, orange accent only\n5. **Clean Typography** - Clear hierarchy with Raleway + Open Sans\n\n## File Structure\n\n```\nnetresearch-branding-skill/\n├── SKILL.md                      # Main skill file with guidelines\n├── README.md                     # This file\n├── references/\n│   ├── colors.md                 # Color palette reference\n│   ├── typography.md             # Typography system\n│   └── web-design.md             # Web components \u0026 patterns\n├── templates/\n│   ├── landing-page.html         # Landing page template\n│   └── styles.css                # Brand CSS framework\n└── examples/\n    └── components.html           # Interactive component showcase\n```\n\n## Brand Component Library\n\n### Buttons\n```html\n\u003c!-- Primary action --\u003e\n\u003cbutton class=\"btn-primary\"\u003eGet Started\u003c/button\u003e\n\n\u003c!-- Secondary action --\u003e\n\u003cbutton class=\"btn-secondary\"\u003eLearn More\u003c/button\u003e\n\n\u003c!-- Tertiary action --\u003e\n\u003cbutton class=\"btn-outline\"\u003eContact Us\u003c/button\u003e\n```\n\n### Cards\n```html\n\u003cdiv class=\"card\"\u003e\n  \u003cdiv class=\"card-content\"\u003e\n    \u003ch3 class=\"card-title\"\u003eCard Title\u003c/h3\u003e\n    \u003cp class=\"card-text\"\u003eCard description.\u003c/p\u003e\n    \u003ca href=\"#\" class=\"link-standalone\"\u003eLearn more\u003c/a\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Forms\n```html\n\u003cdiv class=\"form-group\"\u003e\n  \u003clabel for=\"email\" class=\"form-label\"\u003eEmail*\u003c/label\u003e\n  \u003cinput type=\"email\" id=\"email\" class=\"form-input\"\n         placeholder=\"your@email.com\" required\u003e\n\u003c/div\u003e\n```\n\n## CSS Custom Properties\n\nThe skill includes a complete set of CSS custom properties for easy implementation:\n\n```css\n:root {\n  /* Brand Colors */\n  --color-primary: #2F99A4;\n  --color-accent: #FF4D00;\n  --color-text-primary: #585961;\n\n  /* Typography */\n  --font-headline: 'Raleway', sans-serif;\n  --font-body: 'Open Sans', sans-serif;\n\n  /* Spacing */\n  --spacing-xs: 8px;\n  --spacing-sm: 12px;\n  --spacing-md: 16px;\n  --spacing-lg: 24px;\n  --spacing-xl: 32px;\n  --spacing-xxl: 48px;\n  --spacing-3xl: 64px;\n  --spacing-4xl: 96px;\n}\n```\n\n## Accessibility Compliance\n\nAll brand implementations must meet **WCAG AA** standards:\n\n✅ **Text Contrast Ratios:**\n- Anthracite on white: 8.3:1 (AAA)\n- White on turquoise: 4.5:1 (AA)\n- Turquoise on white: 3.8:1 (AA for large text)\n\n✅ **Keyboard Navigation:**\n- All interactive elements accessible\n- Visible focus states\n- Logical tab order\n\n✅ **Screen Readers:**\n- Semantic HTML\n- ARIA labels where needed\n- Alternative text for images\n\n## Responsive Breakpoints\n\n```css\n/* Mobile First Approach */\n/* Extra Small: 0-599px (default) */\n/* Small: 600px+ */\n/* Medium: 768px+ */\n/* Large: 1024px+ */\n/* Extra Large: 1440px+ */\n```\n\n## Social Media Specifications\n\n### Profile Images\n- **Facebook:** 180 × 180 px (displays at 170 × 170 px)\n- **LinkedIn:** 400 × 400 px (displays at 300 × 300 px)\n- **Twitter:** 400 × 400 px (displays at 200 × 200 px)\n- **XING:** 1024 × 1024 px\n\n### Header/Cover Images\n- **Facebook:** 820 × 312 px\n- **LinkedIn (Company):** 1128 × 191 px\n- **Twitter:** 1500 × 500 px\n- **XING:** 970 × 250 px\n\n## Quality Checklist\n\nBefore deploying any branded material:\n\n**Visual Design:**\n- [ ] Colors match exact hex values\n- [ ] Turquoise is primary, orange is accent only\n- [ ] High white space maintained\n- [ ] Typography uses Raleway + Open Sans\n\n**Technical:**\n- [ ] Responsive design implemented\n- [ ] WCAG AA compliance verified\n- [ ] Fonts loaded efficiently\n- [ ] CSS follows naming conventions\n\n**Content:**\n- [ ] Logo used correctly\n- [ ] Images follow brand guidelines\n- [ ] Consistent tone and voice\n- [ ] No unapproved color combinations\n\n## Contributing\n\nContributions are welcome! Please follow these guidelines:\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/improvement`)\n3. Make your changes\n4. Test thoroughly against brand guidelines\n5. Commit your changes (`git commit -m 'Add improvement'`)\n6. Push to the branch (`git push origin feature/improvement`)\n7. Create a Pull Request\n\n## License\n\nThis project uses split licensing:\n\n- **Code** (scripts, workflows, configs): [MIT](LICENSE-MIT)\n- **Content** (skill definitions, documentation, references): [CC-BY-SA-4.0](LICENSE-CC-BY-SA-4.0)\n\nSee the individual license files for full terms.\n## Support\n\n**Issues and Questions:**\n- GitHub Issues: [Report issues](https://github.com/netresearch/netresearch-branding-skill/issues)\n\n**Netresearch Contact:**\n- **Website:** https://www.netresearch.de\n- **Issues:** [https://github.com/netresearch/netresearch-branding-skill/issues](https://github.com/netresearch/netresearch-branding-skill/issues)\n- **Phone:** +49 341 49288-0\n- **Address:** Nonnenstraße 11d, 04229 Leipzig, Germany\n\n## Related Skills\n\n- **typo3-docs** - TYPO3 extension documentation creation\n- **typo3-testing** - TYPO3 extension testing infrastructure\n- **typo3-conformance** - TYPO3 coding standards evaluation\n\n## Credits\n\nCreated by Netresearch DTT GmbH for consistent brand implementation across digital projects.\n\n**Maintained By:** Netresearch DTT GmbH, Leipzig, Germany\n\n---\n\n**Version:** 1.0.0\n**Last Updated:** 2025-10-18\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetresearch%2Fnetresearch-branding-skill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetresearch%2Fnetresearch-branding-skill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetresearch%2Fnetresearch-branding-skill/lists"}