Netresearch Branding Skill — Living Style Guide & Compliance Demo

Hard validity rules

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-25

The symbol-only [n] mark appears exactly once in the top header, ≥32×32px, aspect ratio preserved, no recolor/filter/shadow. Clickable → netresearch.de.

SKILL.md:38–43 · references/logo.md

2 · Brand colors

NB-25

#2F99A4 primary, #FF4D00 accent-only, #585961 text. Orange must never dominate a surface.

SKILL.md:42 · references/colors.md

3 · Typography intent

NB-25

Raleway for headlines & UI emphasis; Open Sans for body and forms. Calibri is the Office-document equivalent.

SKILL.md:43 · references/typography.md

4 · Footer branding

NB-25

Footer must contain the exact string Netresearch DTT GmbH and a link to https://www.netresearch.de/. See the bottom of this page.

SKILL.md:44 · checkpoints.yaml NB-19/NB-25

Colors

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.

White on teal

Turquoise · Primary

#2F99A4

CTAs, links, headers, brand identity. RGB 47,153,164

White on orange

Orange · Accent

#FF4D00

Emphasis & highlights only — never dominant. RGB 255,77,0

White on grey

Anthracite · Text

#585961

Body copy, headings, labels. RGB 88,89,97

Grey #585961

Light Grey

#CCCDCC

Borders, dividers, disabled — not for text. RGB 204,205,204

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, both ways: WCAG 2.x relative luminance, and APCA (APCA-W3 0.1.9). Where the document’s stated number disagrees with the math, the mismatch is flagged.

The two columns answer different questions. WCAG is the compliance gate and is not negotiable. APCA is a perceptual readability measure: its Lc is signed — positive means dark text on a light background, negative the reverse — and the size it permits depends on the font weight, so there is no single passing number. A pair can clear WCAG and still read poorly at 14px, and an APCA pass never waives a WCAG failure. The APCA reading column names the smallest regular-weight (400) text the Lc allows, from APCA’s own font table.

Foreground	Background	WCAG	AA normal	AA large	APCA Lc	APCA reading	Doc claim (colors.md)

Approved vs. forbidden combinations

✓ Do

The brand #2F99A4 stays on borders, icons, chart series and display type at 24px or more. Under white label text it is 3.38:1.

✗ Don’t — intentional anti-patterns

These swatches deliberately violate the brand to illustrate the rule — they are not the page’s chrome.

Canonical CSS variables

→ Finding F1

SKILL.md prescribes --nr-primary, --nr-accent, --nr-text, --nr-border, --nr-bg and NB-16 enforces them. The references and templates use the same names, with the role suffixes the contrast rules need: -fill for a surface under white text, -text for type at body size, -deep for its hover, -strong for the boundary of a control.

Typography

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

Headlines

Aa 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–439

Open Sans

Body

Aa 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–511

Type scale (desktop)

Scale

H1 · 48px / 700 Raleway H2 · 36px / 700 Raleway H3 · 28px / 600 Raleway H4 · 22px / 600 Raleway Lead · 20px / 400 Open Sans Body · 16px / 400 Open Sans — optimal line length 50–75 characters. Small · 14px / 400 Open Sans (production floor)

references/typography.md:554–667

Components

The 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.md

Forms

web-design.md

Email

Focus me to see the brand-teal ring.

Message

Cards

web-design.md

Card title

Soft shadow, 8px radius, lift on hover. Title in Raleway, body in Open Sans.

Links, quote & alerts

web-design.md

Inline 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

Logo

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×

dashed = minimum clear zone

Sizes

→ Finding F5

32px min

48px header

120px anchor

SKILL.md recommends 40–56px in headers; logo.md recommends ≥120px as a visual anchor. Both say “recommended” — which wins, when?

✓ Do

Keep the turquoise frame dominant, the grey “n” clearly visible.
Use on white or very light neutral backgrounds.
Link clickable instances to netresearch.de.

✗ Don’t

Recolor, add gradients, strokes, glows or drop-shadows.
Rotate, skew, distort or crop the mark.
Replace with a generic placeholder icon.

TYPO3 extensions

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/02

Resources/Public/Icons/Extension.svg — the symbol-only mark, teal frame #2F99A4, letter #585961. No PNG on v12+ (NB-03).

composer.json

NB-09/10

Name netresearch/<ext>; author Netresearch DTT GmbH, email typo3@netresearch.de, homepage https://www.netresearch.de/.

ext_emconf.php

NB-13/14

author_company must be exactly Netresearch DTT GmbH; description ends with - by Netresearch.

Repo description

NB-20

The GitHub repository description must end with - by Netresearch.

README badge ordering

Standard

Four 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–597

README branding

Top & 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-30

Must contain a netresearch.de link, the string Netresearch DTT, or by Netresearch.

Footer · last 20 lines

NB-31/32

Both the company name Netresearch DTT and a netresearch.de link.

License mention

NB-33

The README must reference licensing somewhere — a ## License heading, “licensed under”, or an SPDX badge whose URL contains license.

Enforcement

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

Open questions

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.