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
netresearchor composer vendor isnetresearch/ - 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): followreferences/typo3-docs-branding.mdwith thetypo3-docsskill. 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:
- Header logo (
assets/logos/netresearch-symbol-only.svg, or fallback fromreferences/logo-svg.md) - Brand colors:
#2F99A4(primary),#FF4D00(accent only),#585961(text) - Typography intent: Raleway for headlines/UI emphasis, Open Sans for body/forms
- Footer includes link to
https://www.netresearch.de/and textNetresearch DTT GmbH
Apply the selected profile within the user's instructions.
Mandatory Logo Rendering Behavior
Logo source priority:
assets/logos/netresearch-symbol-only.svgreferences/logo-svg.md(inline SVG fallback)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; recommended40–56pxin 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:
references/colors.mdfor palette/token mappingreferences/typography.mdfor font roles and scalereferences/web-design.mdfor page construction, layout, components and spacingreferences/logo.mdandreferences/logo-svg.mdfor logo fallback behaviorreferences/typo3-extension-branding.mdfor TYPO3 contextreferences/co-branding.mdfor 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-primarymay already mean something else. Checkpoint NB-16 greps for them. Canonical set, with values:Token Value Role --nr-primary#2F99A4surfaces, borders, icons, chart series, display type ≥24px — 3.38:1, not a text colour at body size --nr-primary-fill#257880a filled surface carrying white text (5.15:1) --nr-primary-text#15585Elinks, labels, small type on white (8.11:1) --nr-primary-deep#0A5057hover for the above (9.14:1) --nr-accent#FF4D00accent as a fill or marker — 3.33:1, never body text --nr-accent-dark#CC3D00accent fill carrying white text (4.96:1) --nr-accent-text#9A2E00accent emphasis in text (7.60:1) --nr-text#585961body copy (6.96:1) --nr-text-secondary#6E6F78help, meta, captions (4.99:1) --nr-bg/--nr-bg-alt#FFFFFF/#F5F5F5page and section background --nr-border#CCCDCCdividers and decoration only (1.59:1) --nr-border-strong#8A8B93the visible boundary of an interactive control — SC 1.4.11 wants 3:1 --nr-border-light#E5E5E5hairlines 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 → #0A5057with 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-lightborder plus a layered soft shadow; radii 10px for controls, 16px for cards, 24px for hero panels and dialogs. No hover jumps, notransition: 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); honourprefers-color-schemeanddata-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 formarkdown-to-pdf-skill; apply via--css. Its.page-header/.page-footerrunning elements aren't emitted byconvert.py; the caller must supply HTML containing them (see that skill'sSKILL.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-headerrunning 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:
| Artifact | Licence |
|---|---|
TYPO3 extension (netresearch/t3x-*, any typo3-cms-extension) | AGPL-3.0-or-later, or GPL-2.0-or-later where the extension must sit alongside GPL-2.0-only code — TYPO3 core is GPL-2.0-or-later and an extension inherits that obligation |
| Agent skill, library, CLI, internal tool | Split: code MIT, prose and reference content CC-BY-SA-4.0, shipped as LICENSE-MIT + LICENSE-CC-BY-SA-4.0 with the SPDX expression (MIT AND CC-BY-SA-4.0) |
| Brand assets (logo files, colour specs, this skill's references) | CC-BY-SA-4.0, and the logo additionally carries the trademark rules in references/logo.md — a licence does not permit recolouring or distortion |
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.mdreferences/typography.mdreferences/web-design.mdreferences/logo.mdreferences/logo-svg.mdreferences/typo3-extension-branding.mdreferences/typo3-docs-branding.mdreferences/README-branding.mdreferences/no-editorializing.mdreferences/co-branding.md(only on an explicit co-branding request)


