Four things that make a branded page valid
From SKILL.md “Hard Validity Rules” and checkpoint NB-25: a Netresearch visual output is invalid if any of these is missing. Partial compliance is a FAIL. This very page satisfies all four — the header logo above, the tokens below, Raleway/Open Sans throughout, and the footer.
1 · Header logo
NB-25The symbol-only [n] mark appears exactly once in the top header, ≥32×32px, aspect ratio preserved, no recolor/filter/shadow. Clickable → netresearch.de.
2 · Brand colors
NB-25#2F99A4 primary, #FF4D00 accent-only, #585961 text. Orange must never dominate a surface.
SKILL.md:42 · references/colors.md3 · Typography intent
NB-25Raleway for headlines & UI emphasis; Open Sans for body and forms. Calibri is the Office-document equivalent.
SKILL.md:43 · references/typography.md4 · Footer branding
NB-25Footer must contain the exact string Netresearch DTT GmbH and a link to https://www.netresearch.de/. See the bottom of this page.
Palette & tokens
The full palette from references/colors.md. Turquoise is the brand; orange is highlight-only; anthracite is text. Each swatch carries its own issue link.
Live WCAG contrast verifier
The brand docs hard-code contrast ratios — but contrast is symmetric, so a pair cannot have two different values. These rows are computed in your browser from the hex values (WCAG 2.x relative luminance). Where the document’s stated number disagrees with the math, the mismatch is flagged. This is Finding F2.
| Foreground | Background | Computed | AA normal | AA large | Doc claim (colors.md) |
|---|
Approved vs. forbidden combinations
These swatches deliberately violate the brand to illustrate the rule — they are not the page’s chrome.
Canonical CSS variables
→ Finding F1SKILL.md prescribes --nr-primary, --nr-accent, --nr-text, --nr-border, --nr-bg and NB-16 enforces them. (Note: the reference files’ own examples use --color-* instead — see Open Questions.)
Raleway for voice, Open Sans for reading
From references/typography.md. Headlines, navigation and buttons use Raleway (400/600/700); body, lists, forms and captions use Open Sans. Never below 14px in production.
Raleway
HeadlinesAa Bb Cc 123
Headlines (h1–h5), nav items, button labels, pull quotes, taglines. Weights 400 / 600 / 700.
Not for body paragraphs, long-form, or text below 14px.
references/typography.md:366–439Open Sans
BodyAa Bb Cc 123
All body copy, lists, form inputs, captions, table content, footer text. Weights 400 / 600 / 700.
Not for main headlines or display text above 48px.
references/typography.md:442–511Type scale (desktop)
ScaleThe component library
Buttons, cards, forms, links, tables, quotes and alerts as defined in references/web-design.md — generous white space, 4px/8px radii, brand-colored focus rings.
Buttons
web-design.mdForms
web-design.mdCards
web-design.mdLinks, quote & alerts
web-design.mdInline a brand link and an external link.
Clean, uncluttered layouts that let the content breathe.— Web design principle #1
Info
Teal-bordered call-out for neutral information.Highlight
Orange-bordered call-out — used sparingly.Tables
web-design.md| Token | Value | Role |
|---|---|---|
--nr-primary | #2F99A4 | Primary brand |
--nr-accent | #FF4D00 | Accent only |
--nr-text | #585961 | Body text |
The symbol-only [n] mark
From references/logo.md and references/logo-svg.md. Turquoise frame, anthracite “n”, square canvas, fixed aspect ratio, clear space ≥ 0.25× width on every side.
Clear space
0.25×Sizes
→ Finding F5SKILL.md recommends 40–56px in headers; logo.md recommends ≥120px as a visual anchor. Both say “recommended” — which wins, when?
- Keep the turquoise frame dominant, the grey “n” clearly visible.
- Use on white or very light neutral backgrounds.
- Link clickable instances to
netresearch.de.
- Recolor, add gradients, strokes, glows or drop-shadows.
- Rotate, skew, distort or crop the mark.
- Replace with a generic placeholder icon.
Extension branding requirements
From references/typo3-extension-branding.md. These apply to every netresearch/ TYPO3 extension and are enforced by checkpoints NB-01…NB-14.
Extension icon
NB-01/02Resources/Public/Icons/Extension.svg — the symbol-only mark, teal frame #2F99A4, letter #585961. No PNG on v12+ (NB-03).
composer.json
NB-09/10Name netresearch/<ext>; author Netresearch DTT GmbH, email typo3@netresearch.de, homepage https://www.netresearch.de/.
ext_emconf.php
NB-13/14author_company must be exactly Netresearch DTT GmbH; description ends with - by Netresearch.
Repo description
NB-20The GitHub repository description must end with - by Netresearch.
README badge ordering
StandardFour rows, in order: 1) CI/Quality (CI, codecov) · 2) Security (OpenSSF Scorecard, Best Practices, SLSA 3) · 3) Standards (PHPStan, PHP, TYPO3, License, Release, Covenant) · 4) TER badges if published.
references/typo3-extension-branding.md:525–597Top & bottom placement (NB-30…NB-33)
From references/README-branding.md: readers scan the top and the bottom. Affiliation must be visible at both ends, with the licence mention nearby. Applies to every Netresearch repo, not just TYPO3.
Headline · first 30 lines
NB-30Must contain a netresearch.de link, the string Netresearch DTT, or by Netresearch.
Footer · last 20 lines
NB-31/32Both the company name Netresearch DTT and a netresearch.de link.
License mention
NB-33The README must reference licensing somewhere — a ## License heading, “licensed under”, or an SPDX badge whose URL contains license.
All checkpoints
The mechanical & LLM checks from checkpoints.yaml that automated assessment runs against any repo. TYPO3-only checks pass trivially (N/A) on non-TYPO3 repos. Each row has an issue link.
| ID | Severity | Check | Issue |
|---|
Ambiguous, contradictory & undefined rules
Building this page surfaced rules that conflict between files, contradict the math, or are simply undefined. Each is cited to file:line and carries a pre-filled issue link so it can be triaged. Nothing here is invented — every claim is checkable in the repo.