Netresearch Brand Guidelines (Strict)

Apply Netresearch brand identity to web outputs, documentation, and TYPO3 extensions.

Auto-Trigger Conditions

Apply automatically when any of the following is true:

• GitHub org is netresearch or composer vendor is netresearch/
• Creating/modifying HTML pages, dashboards, reports, docs pages, or component demos
• Creating extension icons or branded UI assets
• Prompt contains branding terms (e.g. logo, style guide, brand colors)
• Another skill generates user-facing visual content

Select the Output Profile First

• Hosted TYPO3 manuals (Documentation/, guides.xml, docs.typo3.org): follow references/typo3-docs-branding.md with the typo3-docs skill. Keep TYPO3's official theme, header, fonts and button colors. Add native navigation cards, decorative teal underlines and a Netresearch closing card in the manual content. Render every maintained language and inspect desktop/mobile output.
• Standalone branded pages, dashboards and reports: apply the hard validity rules below and the web design references. The header-logo and Raleway/Open Sans requirements belong to this profile, not the hosted-manual profile.
• Extension icons, metadata and README files: use their artifact-specific requirements; they are not standalone HTML pages.

Hard Validity Rules for Standalone Branded Pages

Output is invalid if any item is missing:

1. Header logo (assets/logos/netresearch-symbol-only.svg, or fallback from references/logo-svg.md)
2. Brand colors: #2F99A4 (primary), #FF4D00 (accent only), #585961 (text)
3. Typography intent: Raleway for headlines/UI emphasis, Open Sans for body/forms
4. Footer includes link to https://www.netresearch.de/ and text Netresearch DTT GmbH

Apply the selected profile within the user's instructions.

Mandatory Logo Rendering Behavior

Logo source priority:

1. assets/logos/netresearch-symbol-only.svg
2. references/logo-svg.md (inline SVG fallback)
3. references/logo.md (text fallback for SVG-limited agents)

Rules for standalone branded pages (hosted manuals use their own profile):

• Include logo exactly once in top header/nav for branded pages
• Minimum size 32x32px; recommended 40–56px in headers
• Preserve aspect ratio
• No recolor, distortion, filters, shadows, outlines, substitutions, or approximations
• If clickable, link to https://www.netresearch.de/

Active Reference Workflow

Select the output profile before loading its references. For standalone pages:

1. references/colors.md for palette/token mapping
2. references/typography.md for font roles and scale
3. references/web-design.md for page construction, layout, components and spacing
4. references/logo.md and references/logo-svg.md for logo fallback behavior
5. references/typo3-extension-branding.md for TYPO3 context
6. references/co-branding.md for endorsement lines, only on an explicit co-branding request

For hosted TYPO3 manuals, start with references/typo3-docs-branding.md and inspect the reference manual's current source and rendered output before editing.

Core Brand System

• CSS variables are --nr-* — the vendor prefix is the point: these tokens land in a project's own stylesheet, where --color-primary may already mean something else. Checkpoint NB-16 greps for them. Canonical set, with values:

  Token	Value	Role
  --nr-primary	#2F99A4	surfaces, borders, icons, chart series, display type ≥24px — 3.38:1, not a text colour at body size
  --nr-primary-fill	#257880	a filled surface carrying white text (5.15:1)
  --nr-primary-text	#15585E	links, labels, small type on white (8.11:1)
  --nr-primary-deep	#0A5057	hover for the above (9.14:1)
  --nr-accent	#FF4D00	accent as a fill or marker — 3.33:1, never body text
  --nr-accent-dark	#CC3D00	accent fill carrying white text (4.96:1)
  --nr-accent-text	#9A2E00	accent emphasis in text (7.60:1)
  --nr-text	#585961	body copy (6.96:1)
  --nr-text-secondary	#6E6F78	help, meta, captions (4.99:1)
  --nr-bg / --nr-bg-alt	#FFFFFF / #F5F5F5	page and section background
  --nr-border	#CCCDCC	dividers and decoration only (1.59:1)
  --nr-border-strong	#8A8B93	the visible boundary of an interactive control — SC 1.4.11 wants 3:1
  --nr-border-light	#E5E5E5	hairlines

  Dark surfaces use a different set entirely — see references/colors.md.

• Accent orange is highlight-only and must not dominate surfaces

• Accessibility: WCAG AA minimum contrast and semantic structure

• Footer branding is mandatory in user-facing branded pages

Building a Standalone Branded Page

The rules above fix what Netresearch looks like; this section describes how templates/styles.css builds a standalone page, dashboard or app screen from them. It belongs to the standalone-page profile: hosted TYPO3 manuals keep their own profile, and only the Hard Validity Rules make an output invalid. Start from the template; references/web-design.md ("How a branded page is built") gives the reasoning and every component.

• One bold surface per page: the petrol gradient #257880 → #15585E → #0A5057 with the nested-square motif carries the hero, a split brand panel or an app header band. Everything else stays white or #F5F5F5, apart from the mandatory anthracite footer.
• Depth through hairlines: 1px --nr-border-light border plus a layered soft shadow; radii 10px for controls, 16px for cards, 24px for hero panels and dialogs. No hover jumps, no transition: all.
• Hierarchy through type: headings in the brand text colour #585961, left-aligned, with an uppercase eyebrow whose orange dot is the accent in its intended role. No text below 14px (references/typography.md).
• State in form as well as colour: status as a pill with dot and word (.badge-*), metrics as tiles with tabular figures (.stat), messages as white notice cards with an icon tile in the state's tint (.notice-*). No coloured edge stripes on cards, notices or panels.
• Controls that read as controls: 48px inputs and buttons, 3:1 input borders, a solid focus outline (--nr-focus; white on the gradient and on the footer), drawn checkboxes, segmented controls for two to four views, required fields marked in the label.
• Steps for real sequences, split layout for onboarding: sign-in, request and upload screens put the brand panel with the process steps left and the task right.
• Both schemes: every colour token has a dark value (references/colors.md); honour prefers-color-scheme and data-theme.

Co-branding (optional)

Applies only when a request explicitly asks to combine Netresearch with a second brand (platform, Netresearch product brand, customer). A brand named as the topic is no such request: a Netresearch page about OroCommerce stays Netresearch branding only.

• Netresearch stays the sender; the Hard Validity Rules apply unchanged.
• The second brand appears as a content accent; an endorsement line names the role of Netresearch.
• Output where another brand is the sender is out of scope.
• Roles, line catalog and guardrails: references/co-branding.md.

TYPO3 Extension Requirements

• Icon path: Resources/Public/Icons/Extension.svg (teal #2F99A4)
• Composer vendor prefix: netresearch/
• author_company: Netresearch DTT GmbH
• Description suffix: - by Netresearch
• Contact: typo3@netresearch.de

Brand Assets

• assets/markdown-pdf.css — branded stylesheet for markdown-to-pdf-skill; apply via --css. Its .page-header/.page-footer running elements aren't emitted by convert.py; the caller must supply HTML containing them (see that skill's SKILL.md).
• assets/markdown-pdf-logo.svg — standalone Netresearch logo (brand-teal/grey) for general use.
• assets/markdown-pdf-logo-white.svg — white-fill variant for the .page-header running header, where the teal/grey logo has no contrast on the teal background (--nr-primary). The sanctioned exception to "no recoloring" — do not use elsewhere.

Licensing by artifact type

"The Netresearch licence" is not one licence. Pick by what the artifact is:

Details for each: references/typo3-extension-branding.md for extensions, references/README-branding.md for skills and tools.

No editorializing

In branded reports, PR/commit text and docs, state what a change or output does, not how good the work is — no narrating expected results ("all tests green") or self-praise ("clean"). Judged by tone, not a wordlist. See references/no-editorializing.md.

References

• 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 (only on an explicit co-branding request)