Design tokens & asset-strategie¶

Doel & context¶

Dit document legt de visuele grondslag van de huidige site vast (kleuren, typografie, grid, afbeeldingsformaten) als token-referentie voor de Next.js-rebuild, plus de strategie om pixelgetrouwheid te halen door hergebruik van de bestaande main.css. Bron: theme-code (Sage 9) en de gerenderde output van de live templates. Peildatum: 2026-08-06.

Alleen de main-bundle telt

Het thema bevat drie template-sets (main / katen / v2), maar alle live pagina's laden uitsluitend dist/styles/main.css + dist/scripts/main.js, met daarin een "v2-header-bridge" voor de header/navigatie. De katen- en v2-bundels (v2.css/v2.js) zijn aan geen enkele gepubliceerde pagina gekoppeld — dood gewicht, niet nabouwen. De main-bundle is gebaseerd op Bootstrap 5 (npm-alias bootstrap5), niet Bootstrap 4 zoals verouderde projectdocumentatie zegt.

Kleuren¶

Basispalet (`common/_colors.scss`)¶

Token	Waarde	Gebruik
`$blue` / `$primary`	`#0080be`	primaire accentkleur (basis)
`$blue-dark` / `$secondary` / `$body-color`	`#293e51`	bodytekst, headings-basis
`$red`	`#99465f`	accent/fout
`$green-light`	`#d4edda`	succes
`$grey-light`	`#ebebeb`	randen, topbar-achtergrond, lijnen
`$grey`	`#ccc`	secundair grijs
`$grey-dark`	`#555`	topbar-tekst (GB/WV)
`$white`	`#fff`	achtergronden

Subsite-kleuren¶

De hele theming hangt aan één body-klasse theme-gb / theme-wv / theme-tr / theme-cgc (bepaald door URL-prefix, override via ?t=KEY). Per subsite:

Subsite	primary	secondary	gradient light / mid / dark (header-pill, accenten)
GB	`#277695`	`#293e51`	`#4bb3dc` / `#0064a7` / `#0e588a`
WV	`#2c3d50`	`#336699`	`#4a6a8a` / `#2c3d50` / `#1a2530`
TR	`#29917b`	`#063418`	`#3db89e` / `#29917b` / `#1a5f50`
CGC	`#a78550`	`#514027`	`#c9a76a` / `#a78550` / `#7a6139`

Aanvullende thememap-waarden (per subsite, uit $themes in _colors.scss):

Onderdeel	GB	WV	TR	CGC
Topbar tekst	`#555`	`#555`	`#ebebeb`	`#ebebeb`
Topbar achtergrond	`#ebebeb`	`#ebebeb`	`lighten(#063418, 5%)`	`#a78550`
Header tekstkleur	`#277695`	`#2c3d50`	`#29917b`	`#514027`
Headings-kleur	`#277695`	`#336699`	`#063418`	`#514027`
Logo-hoogte desktop (bridge)	40px (logo-v2: 107px)	29px	24px (header-personal: 80px)	40px (header-personal: 80px)

De thememap wordt via tools/_theme.scss toegepast op ±50 component-mixins (typografie, topbar, header, footer, buttons, previews, paywall, paginering, formulieren): elke component heeft per subsite een kleurvariant.

CSS custom properties (v2-bridge)¶

Op :root/.theme-*: --v2-gradient-light, --v2-gradient-mid, --v2-gradient-dark, --v2-accent (= gradient-mid), --v2-primary-rgb. Gradientformule: linear-gradient(to right, var(--v2-gradient-light) 0%, var(--v2-gradient-dark) 100%) — o.a. de actieve menu-pill in de navigatie.

Typografie¶

Token	Waarde
Body-font	`"Inter", sans-serif` (gewichten 300/400/600)
Headings- én topbar-font	`"Ubuntu", sans-serif` (gewichten 400/500/700)
Basis	1rem = 16px, line-height 1.5
`$font-size-lg` / `$font-size-sm`	1.25rem / 0.875rem
Gewicht-tokens	light 300, normal 400, bold 500, bolder 600
h1–h6	2.5 / 2 / 1.75 / 1.5 / 1.25 / 1 rem; line-height 1.2; gewicht 400; margin-bottom 1rem; kleur per subsite

Fonts worden geladen via Google Fonts <link> (Inter:wght@300;400;600 + Ubuntu:wght@400;500;700, display=swap, preconnect naar fonts.gstatic.com). Geen self-hosted fonts. Voor de rebuild: zelf hosten via next/font mag, mits dezelfde gewichten/fallbacks.

Roboto/Poppins worden nooit geladen

De v2-header-bridge declareert font-family: "Roboto" (navbar/dropdowns) en "Poppins" (canvas-menu-CTA's), maar geen van beide fonts wordt geladen — het gerenderde navigatiefont is dus de systeem-sans-serif. Pixelgetrouw nabouwen = het huidige fallback-gedrag overnemen, niet alsnog Roboto/Poppins laden.

Eén échte @font-face in main.css: Simple Line Icons (iconfont voor icon-magnifier, icon-user, icon-arrow-down; \e604 als dropdown-pijl). Daarnaast Font Awesome 5 als SVG-JS (o.a. fab fa-linkedin-in) en losse inline SVG's in de templates.

Breakpoints & grid¶

Afwijkend van de Bootstrap-defaults (common/_variables.scss):

Breakpoint	xs	sm	md	lg	xl	xxl	xxxl
Min-breedte	0	576	768	992	1200	1460	1600
Container-max	—	560	720	926	1152	1395	1535

12 kolommen, gutter 32px.
Header gebruikt .container-xl met expliciete max-width: 1152px en 16px zijpadding, uitgelijnd met de .container van de pagina.
Header-gedrag per breakpoint: <768px compact (logo + zoekknop + hamburger); 768–991px header-top met hamburger, geen menubalk, geen topbar; ≥992px topbar + menubalk zichtbaar, hamburger weg. Sticky nav (kloon met 65px-logo) verschijnt na 300px scroll.
body { min-width: 320px; touch-action: pan-x pan-y; } (zoom uitgeschakeld i.v.m. de PDF-lezer).

Overige tokens¶

Token	Waarde
Transitie standaard / snel	`all .3s ease-in-out` / `.2s`
Schaduw dropdowns	`0 8px 20px rgba(32,54,86,.2)`
Schaduw klein	`0 2px 4px rgba(0,0,0,.15)`
Borderkleur	`#ebebeb`
Menu-item (desktop)	15px, kleur `#79889e`, hover `#203656`; actief: witte tekst op pill (border-radius 25px) met subsite-gradient

Afbeeldingsformaten (image sizes)¶

Naam	Afmetingen	Crop	Gebruik
`theme-25:18-l`	750×540	ja	grote artikel-/nieuwspreviews, artikelheader
`theme-25:18-s`	450×325	ja	kleinere previews, themakaarten
`theme-25:18-t`	180×136	ja	thumbnails
`theme-newsletter`	560×260	ja	nieuwsbrief-e-mail
`cover`	300×∞	nee	product-/boekcovers
`issue-cover`	328×464	ja	uitgave-covers ("laatste uitgave"-blok)
`og-image`	1200×630	ja	social sharing
`thumbnail` (WP)	150×150	ja	o.a. auteursfoto's in artikelmeta

Géén srcset, géén lazy loading in de huidige output

Vrijwel alle afbeeldingen renderen via een kale <img> in partials/image.blade.php — gemeten: 0× srcset, 0× loading="lazy". Pixelgetrouw = exacte crops uit bovenstaande tabel (25:18-verhouding voor previews, 328×464 covers). Functioneel verbeteren met next/image (srcset/lazy) is toegestaan mits de zichtbare crop en beeldmaat gelijk blijven; de bron-crops zijn deze WP-maten (beschikbaar via media_details.sizes in REST).

Uploads worden door nginx naar Azure Blob geproxied; …/uploads/issues/ is cookie-beschermd (403) — uitgave-PDF's uitsluitend via gb-app/v1/issues/{id}/pdf.

Iconen, logo's, favicons¶

Logo's: GB = inline SVG (header-variant "logo-v2", kleuren #0064a7/#00b1eb); WV/TR/CGC = PNG's (logo-wv.png, logo-tr.png, logo-cgc.png; SVG-varianten aanwezig in dist/images/). Elke subsite heeft daarnaast een klein inline SVG-icoon (topbar-subswitch, subsites-menu, footer).
Favicons: één volledige set met GB-branding voor álle subsites (dist/images/favicon/; mask-kleur #2a80b9, theme-color #ffffff). Er is géén per-subsite-favicon — beslispunt voor de rebuild, huidige situatie is: overal GB-icoon.
Vier icon-systemen naast elkaar (inline SVG, FA5 SVG-JS, Simple Line Icons-font, PNG/SVG-sprite voor het Digibron-blok). Bij de rebuild consolideren mag; de zichtbare glyphs moeten gelijk blijven.

Hergebruik main.css: strategie voor pixelgetrouwheid¶

De gecompileerde dist/styles/main.css (≈1,5 MB) bevat alle live styling, inclusief de per-subsite-theming en de v2-header-bridge. Strategie voor de rebuild, in volgorde van voorkeur:

Fase 1 — bundel 1-op-1 meenemen. Neem main.css ongewijzigd op in de Next.js-app en behoud de bestaande BEM-klassen (c-/o--prefix) en de body-klasse theme-{gb|wv|tr|cgc} in de gerenderde markup. Dit garandeert pixelgetrouwheid zonder herimplementatie: identieke klassen + identieke CSS = identieke weergave. Voorwaarden:
- dezelfde markupstructuur per component (zie de template-documentatie: c-article-preview-big, c-latest-issue, c-pay-wall, c-pagination, enz.);
- Google Fonts-link (of next/font-equivalent met dezelfde gewichten);
- Simple Line Icons-font en FA-assets uit dist/vendor/ meeverhuizen;
- jQuery-gedrag (canvas-menu, zoek-overlay, sticky nav, FlexSlider-galerij) herbouwen in React — de CSS-klassen (open, visible, down) blijven het contract.
Fase 2 — SCSS-bron overnemen (optioneel, na livegang). De SCSS-bron (common/, components/, tools/_theme.scss, v2-bridge) in de Next.js-build compileren zodat ongebruikte katen/v2-restanten en dode selectors (legacy sidenav, header--fixed) gesaneerd kunnen worden. Alleen doen met visuele regressietests (Playwright-screenshots) als vangnet.
Niet doen: de tokens handmatig overtikken in een nieuw designsystem als primaire route — dat maakt pixelgetrouwheid onbewijsbaar. Bovenstaande token-tabellen zijn de referentie voor toekomstig onderhoud, niet de bouwinstructie voor fase 1.

Acceptatiecriteria¶

Visueel testbaar met Playwright (screenshots + computed styles) op de nieuwe site vs. de huidige.

Bekende afwijkingen¶

Niet nabouwen in Next.js — wel vermelden in het testrapport

Roboto/Poppins-declaraties zonder geladen font in de v2-header-bridge (valt terug op systeemfont). In de rebuild: bewust één fontkeuze vastleggen; het per ongeluk declareren van niet-geladen fonts niet overnemen.
GB-logo-v2 bevat een live <text>-element met font 'Depot New' dat nergens geladen wordt (rendert in fallbackfont) — logo-SVG bij rebuild platslaan naar outlines.
Footer-socialblok: het ACF-veld "instagram" rendert feitelijk een LinkedIn-icoon (elseif-keten-bug).
Placeholder-links (href="#") in de v2-account-dropdown en canvas-menu-CTA's ("Word lid", "Doneer nu"); de werkende accountlinks staan alleen in de desktop-topbar. In de rebuild krijgen deze CTA's echte bestemmingen.
Dode JS-sporen (legacy sidenav/header--fixed-code in main.js) en ongebruikte katen/v2-bundels — niet meenemen.
Geen srcset/lazy loading — mag in de rebuild verbeterd worden (zie hierboven), maar het testrapport moet vermelden dat de huidige site dit mist.