@conduction/docusaurus-preset 1.1.1 → 1.2.1

package/README.md

@@ -11,7 +11,7 @@ Source lives inside the [design-system monorepo](https://github.com/ConductionNL
 - **Brand CSS** — tokens (cobalt palette, KNVB orange, Plex Mono, hex clip-paths, Common Ground yellow) auto-applied to Docusaurus's Infima theme variables. Navbar, footer, sidebar, buttons, code blocks all inherit the brand without a single swizzle.
 - **i18n config** — four locales pinned: NL default at the URL root, EN/DE/FR at `/en/`, `/de/`, `/fr/`. `htmlLang` per locale, `trailingSlash: true`, locale dropdown ready.
 - **Brand-default navbar** — locale-dropdown + GitHub link. Sites override `items[]` for site-specific navigation.
-- **Brand-default footer** — three-column link grid + Conduction-tells (KvK, BTW, address). Sites override per page or globally.
+- **Brand-default footer** — three-column link grid + Conduction-tells (KvK, BTW, address). Per-property override: pass `footer: { links: [...] }` to swap columns and inherit the brand copyright unchanged. Spread `baseFooterLinks()` to keep one or two brand columns alongside site-specific ones.
 - **Sensible defaults** — `trailingSlash`, `onBrokenLinks: 'warn'`, `respectPrefersColorScheme`, dark-mode brand mapping.
 
 ## Usage
@@ -59,7 +59,7 @@ The function returns a complete Docusaurus config with brand defaults pre-applie
 | `projectName` |  | `'design-system'` | GitHub repo. |
 | `i18n` |  | nl / en / de / fr, NL default | Override the brand-default i18n block. |
 | `navbar` |  | locale dropdown + GitHub | Merged into the brand-default navbar object. |
-| `footer` |  | three-column link grid | Replaces the brand-default footer. |
+| `footer` |  | three-column link grid + KvK/BTW copyright | Per-property fallback: any of `style` / `links` / `copyright` you omit keeps the brand default. Pass `footer: { links: [...] }` to swap columns and inherit the brand copyright. |
 | `customCss` |  | `[]` | Site-specific CSS, appended to `brand.css`. |
 | `presets` |  | `[['classic', …]]` | Replaces the default preset list. |
 | `plugins` |  | `[]` | Docusaurus plugins. |
@@ -67,7 +67,23 @@ The function returns a complete Docusaurus config with brand defaults pre-applie
 | `editUrl` |  | undefined | Edit-this-doc link. |
 | `blog` |  | enabled | Set `false` to disable the blog plugin. |
 
-Also exported: `I18N`, `baseNavbar(siteName)`, `baseFooter()` for sites that want to compose manually.
+Also exported: `I18N`, `baseNavbar(siteName)`, `baseFooter()`, `baseFooterLinks()`, `baseFooterCopyright()` for sites that want to compose manually. Common pattern on a product page: pass site-specific columns plus the Conduction column from the brand default:
+
+```js
+const { createConfig, baseFooterLinks } = require('@conduction/docusaurus-preset');
+
+module.exports = createConfig({
+  // …
+  footer: {
+    links: [
+      { title: 'MyProduct', items: [/* …site links */] },
+      // Spread the brand "Conduction" column to keep the corporate anchor.
+      ...baseFooterLinks().filter((c) => c.title === 'Conduction'),
+    ],
+    // copyright: omitted -> brand KvK/BTW/IBAN inherits.
+  },
+});
+```
 
 ## Brand CSS exports
 

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "1.1.1",
+  "version": "1.2.1",
+  "scripts": {
+    "prepack": "node scripts/prepack-bundle-css.js"
+  },
   "description": "Conduction brand preset for Docusaurus 3. Tokens, theme, navbar, footer, i18n config for nl/en/de/fr, and the React component library that powers conduction.nl and the Conduction product sites.",
   "main": "src/index.js",
   "exports": {

package/src/components/ContactCta/ContactCta.module.css

@@ -8,7 +8,7 @@
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: var(--space-7) var(--space-8);
-  margin: var(--space-10) 0 var(--space-6);
+  margin: var(--space-12) 0 var(--space-8);
   overflow: hidden;
   font-family: var(--conduction-typography-font-family-body);
 }

package/src/components/Outcomes/Outcomes.jsx

@@ -0,0 +1,54 @@
+/**
+ * <Outcomes /> + <Outcome />
+ *
+ * Sibling to <Prerequisites />, intended for the *top* of academy
+ * tutorials. Lists the concrete things the reader will have built,
+ * learned, or achieved by the end of the tutorial. Goes right after
+ * the lede paragraph and before <Prerequisites />, so the reader
+ * scans:
+ *   - "What am I going to walk away with?" (Outcomes)
+ *   - "What do I need before I start?"     (Prerequisites)
+ *   - the actual tutorial body
+ *
+ * Visual: tinted card identical to <Prerequisites />, but each item
+ * uses an orange checkmark glyph (achievement) instead of the orange
+ * hex bullet (need). Same tone, distinct semantics.
+ *
+ * Usage:
+ *
+ *   <Outcomes title="Wat je leert">
+ *     <Outcome>Hoe je het canonieke Woo-register importeert</Outcome>
+ *     <Outcome>Hoe je een publicatie aanmaakt en koppelt aan een TOOI-categorie</Outcome>
+ *     <Outcome>Welke API-aanroepen hoort bij elk van de stappen</Outcome>
+ *   </Outcomes>
+ *
+ * Mirrors the .outcomes section in
+ * preview/components/outcomes.html.
+ */
+
+import React from 'react';
+import styles from './Outcomes.module.css';
+
+export function Outcome({children, className}) {
+  const composed = [styles.item, className].filter(Boolean).join(' ');
+  return (
+    <li className={composed}>
+      <svg className={styles.check} viewBox="0 0 24 24" aria-hidden="true"
+           fill="none" stroke="currentColor" strokeWidth="3"
+           strokeLinecap="round" strokeLinejoin="round">
+        <path d="M5 13l4 4L19 7"/>
+      </svg>
+      <span className={styles.body}>{children}</span>
+    </li>
+  );
+}
+
+export default function Outcomes({title = "What you'll learn", children, className}) {
+  const composed = [styles.card, className].filter(Boolean).join(' ');
+  return (
+    <aside className={composed}>
+      {title && <h2 className={styles.title}>{title}</h2>}
+      <ul className={styles.list}>{children}</ul>
+    </aside>
+  );
+}

package/src/components/Outcomes/Outcomes.module.css

@@ -0,0 +1,64 @@
+.card {
+  background: var(--c-cobalt-50);
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6) var(--space-7);
+  margin: var(--space-8) 0;
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+  margin: 0 0 var(--space-4);
+  line-height: 1.25;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: var(--space-3);
+  max-width: none;
+}
+
+.item {
+  display: grid;
+  grid-template-columns: 22px 1fr;
+  gap: var(--space-3);
+  align-items: start;
+  font-size: 16px;
+  line-height: 1.55;
+  color: var(--c-cobalt-700);
+}
+
+.check {
+  width: 22px;
+  height: 22px;
+  margin-top: 2px;
+  color: var(--c-orange-knvb);
+  flex-shrink: 0;
+}
+
+.body {
+  display: block;
+}
+
+.body a {
+  color: var(--c-blue-cobalt);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.body a:hover { color: var(--c-cobalt-900); }
+
+.body code {
+  background: var(--c-cobalt-100);
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 14px;
+  color: var(--c-cobalt-900);
+}

package/src/components/Prerequisites/Prerequisites.module.css

@@ -3,7 +3,7 @@
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: var(--space-6) var(--space-7);
-  margin: var(--space-6) 0;
+  margin: var(--space-10) 0;
   font-family: var(--conduction-typography-font-family-body);
 }
 
@@ -38,7 +38,7 @@
   width: 14px;
   height: 14px;
   margin-top: 6px;
-  background: var(--c-cobalt-700);
+  background: var(--c-orange-knvb);
   clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
   flex-shrink: 0;
 }

package/src/components/index.js

@@ -99,6 +99,7 @@ export {default as ContentDetailHero} from './ContentDetailHero/ContentDetailHer
    "What you need", "Troubleshooting", and "Next steps" h2 + bullet
    patterns that academy tutorials kept duplicating. Designed for use
    inside an MDX academy post body. */
+export {default as Outcomes, Outcome} from './Outcomes/Outcomes.jsx';
 export {default as Prerequisites, PrerequisiteItem} from './Prerequisites/Prerequisites.jsx';
 export {default as Troubleshooting, TroubleshootingItem} from './Troubleshooting/Troubleshooting.jsx';
 export {default as NextSteps, NextStep} from './NextSteps/NextSteps.jsx';

package/src/css/tokens.css

@@ -1,12 +1,448 @@
-/**
- * Conduction brand tokens, mirrored for Docusaurus consumers.
+/* AUTO-GENERATED by docusaurus-preset/scripts/prepack-bundle-css.js
+ * during `npm publish`. Bundles the design-system monorepo's canonical
+ * tokens.css + typography.css into a self-contained file so consumer
+ * sites can resolve the imports through node_modules.
  *
- * Re-exports the canonical tokens from ../../tokens.css so a Docusaurus
- * site picking up the preset gets the same palette, typography, and hex
- * clip-paths as the design-system kit.
- *
- * When the preset is published to npm, this file becomes the bundled
- * copy; until then it imports relatively from the workspace.
+ * Do NOT edit this file in a published version. The working-tree
+ * src/css/tokens.css keeps the relative-import version that points
+ * back at the monorepo's source of truth.
  */
-@import url("../../../tokens.css");
-@import url("../../../typography.css");
+
+/* ============================================================
+   Conduction Design System — theme-conduction-2026
+   Generated from brand/tokens.json (DTCG)
+   ============================================================ */
+
+/* Fonts: Figtree (body+heading), IBM Plex Mono (code) — both OFL */
+@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");
+
+:root {
+  /* ---------- Color primitives ---------- */
+  --c-blue-cobalt:        #21468B;  /* Dutch flag blue — primary brand */
+  --c-orange-knvb:        #F36C21;  /* KNVB orange — accent */
+  --c-red-vermillion:     #AE1C28;  /* Dutch flag red — sparingly */
+  --c-white:              #FFFFFF;
+  --c-nextcloud-blue:     #0082C9;  /* Nextcloud official */
+  --c-nextcloud-cyan:     #1CAFFF;  /* Nextcloud gradient end */
+  --gradient-nextcloud:   linear-gradient(45deg, #0082C9, #1CAFFF);
+  --c-commonground-yellow: #F6AD00;  /* Common Ground official, commonground.nl */
+
+  /* Cobalt tints — derived for surfaces, hex-prism faces, soft fills */
+  --c-cobalt-50:          #EEF2F8;
+  --c-cobalt-100:         #DCE3F0;
+  --c-cobalt-200:         #B6C2DD;
+  --c-cobalt-300:         #8095BD;
+  --c-cobalt-400:         #4D69A4;
+  --c-cobalt-500:         #21468B;  /* = primary */
+  --c-cobalt-600:         #1B3A75;
+  --c-cobalt-700:         #152D5C;
+  --c-cobalt-800:         #102246;
+  --c-cobalt-900:         #0A172F;
+
+  /* Pastel families for hex-prism categories (per visual-motifs.md)
+     Each family has FIVE roles for prism construction:
+       -50  ultra-light wash (ground / page bg accents)
+       -100 top-face fill (the "lit" face you see in plan view)
+       -300 left-face fill (the slightly shaded vertical face)
+       -500 right-face / stroke (the deeper vertical face + outlines)
+       -700 ink — text on prism, pill outline, chip text
+
+     PRISM-FAMILY POLICY (locked 2026-04):
+       Component prisms get ONE of: lavender, mint, forest, terracotta.
+       The workspace prism uses workspace-blue (= Nextcloud's own brand blue).
+       Cobalt is brand chrome, NOT a prism family.
+       "Kernel" is a banned word in the brand vocabulary (see
+       identity/voice.html); use "workspace" everywhere.
+       Coral, gold, gray are NOT prism families. They serve different jobs:
+         · coral  = KNVB-orange accent (focus, hover, single-use highlights). ≤ 8 % page area.
+         · gold   = "Conduction Certified" mark ONLY. Never on a generic prism.
+         · gray   = neutral surfaces / strokes. Not a category.
+  */
+
+  /* — Component family 1: lavender (process / workflow) — */
+  --c-lavender-50:        #F6F2FC;
+  --c-lavender-100:       #ECE6F8;
+  --c-lavender-300:       #B7A7E3;
+  --c-lavender-500:       #7E66C9;
+  --c-lavender-700:       #483982;
+
+  /* — Component family 2: mint (integrate / connect) — */
+  --c-mint-50:            #EAF7F0;
+  --c-mint-100:           #DCF1E6;
+  --c-mint-300:           #87CFA8;
+  --c-mint-500:           #2E9866;
+  --c-mint-700:           #155234;
+
+  /* — Component family 3: forest (data / trustworthy / NLDS-compliant)
+       Distinct from mint — deeper, denser, more "official." Use
+       this for prisms that handle data and registers. — */
+  --c-forest-50:          #EEF5EE;
+  --c-forest-100:         #D7E8D6;
+  --c-forest-300:         #7DAA7C;
+  --c-forest-500:         #3D7C3A;
+  --c-forest-700:         #1E461C;
+
+  /* — Component family 4: terracotta (documents / human work)
+       Tuned around the brand vermillion (#AE1C28) as its 700-deep,
+       so it ties to the Dutch flag without the "alarm" of pure red. — */
+  --c-terracotta-50:      #FBF1EE;
+  --c-terracotta-100:     #F4DCD3;
+  --c-terracotta-300:     #DA9D8A;
+  --c-terracotta-500:     #B25E48;
+  --c-terracotta-700:     #6E2A1C;
+
+  /* — Workspace family: workspace-blue (= Nextcloud's own brand blue tints) — */
+  --c-workspaceblue-50:    #E5F2FA;
+  --c-workspaceblue-100:   #C8E5F5;
+  --c-workspaceblue-300:   #67BEEA;
+  --c-workspaceblue-500:   #0082C9;  /* Nextcloud blue */
+  --c-workspaceblue-700:   #014C77;
+
+  /* ----- Reserved colors (NOT prism families) -----
+     Kept in tokens because they have specific jobs elsewhere. */
+
+  /* Coral = KNVB orange accent only — focus rings, hover, occasional highlight. */
+  --c-coral-50:           #FFF3ED;
+  --c-coral-100:          #FFE4DA;
+  --c-coral-300:          #FAB29C;
+  --c-coral-500:          #F36C21;  /* = KNVB */
+  --c-coral-700:          #9B3A0E;
+
+  /* Gold = Conduction Certified mark ONLY. Reserved for the cert avatar
+     and trustmark badges. Do not use as a generic family color. */
+  --c-gold-50:            #FDF8E8;
+  --c-gold-100:           #FBF1D5;
+  --c-gold-300:           #ECC668;
+  --c-gold-500:           #C99A1F;
+  --c-gold-700:           #765806;
+
+  /* Gray = neutral surfaces, strokes, side-box chrome. Not a category. */
+  --c-gray-50:            #F4F5F8;
+  --c-gray-100:           #ECEEF2;
+  --c-gray-300:           #B7BDC9;
+  --c-gray-500:           #6B7280;
+  --c-gray-700:           #3A4150;
+
+  /* Workspace family alias — points to workspace-blue (Nextcloud).
+     The hex-prism API stays uniform: --c-workspace-{50,100,300,500,700} */
+  --c-workspace-50:       var(--c-workspaceblue-50);
+  --c-workspace-100:      var(--c-workspaceblue-100);
+  --c-workspace-300:      var(--c-workspaceblue-300);
+  --c-workspace-500:      var(--c-workspaceblue-500);
+  --c-workspace-700:      var(--c-workspaceblue-700);
+
+  /* ---------- Semantic theme.conduction-2026 ---------- */
+  /* Brand */
+  --conduction-color-brand-primary:    var(--c-blue-cobalt);
+  --conduction-color-brand-secondary:  var(--c-orange-knvb);
+  --conduction-color-brand-tertiary:   var(--c-red-vermillion);
+  --conduction-color-brand-nextcloud:    var(--c-nextcloud-blue);
+  --conduction-color-brand-commonground: var(--c-commonground-yellow);
+
+  /* Background */
+  --conduction-color-background-default: var(--c-white);
+  --conduction-color-background-inverse: var(--c-blue-cobalt);
+  --conduction-color-background-muted:   var(--c-cobalt-50);
+
+  /* Text */
+  --conduction-color-text-default: var(--c-blue-cobalt);
+  --conduction-color-text-inverse: var(--c-white);
+  --conduction-color-text-accent:  var(--c-orange-knvb);
+  --conduction-color-text-muted:   var(--c-cobalt-400);
+
+  /* Link */
+  --conduction-color-link-default: var(--c-blue-cobalt);
+  --conduction-color-link-hover:   var(--c-orange-knvb);
+
+  /* Status */
+  --conduction-color-status-error: var(--c-red-vermillion);
+
+  /* Border */
+  --conduction-color-border-default: var(--c-cobalt-200);
+  --conduction-color-border-strong:  var(--c-blue-cobalt);
+
+  /* ---------- Typography primitives ---------- */
+  --conduction-typography-font-family-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --conduction-typography-font-family-heading: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --conduction-typography-font-family-code:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+
+  --fw-regular:  400;
+  --fw-medium:   500;
+  --fw-semibold: 600;
+  --fw-bold:     700;
+
+  --fs-xs:   12px;
+  --fs-sm:   14px;
+  --fs-base: 16px;
+  --fs-lg:   18px;
+  --fs-xl:   20px;
+  --fs-2xl:  24px;
+  --fs-3xl:  32px;
+  --fs-4xl:  40px;
+  --fs-5xl:  48px;
+
+  --lh-tight:   1.2;
+  --lh-normal:  1.5;
+  --lh-relaxed: 1.75;
+
+  /* ---------- Spacing (proposed scope-B) ---------- */
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-8:  32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+
+  /* ---------- Radii ---------- */
+  --radius-sm:    4px;
+  --radius-md:    6px;   /* default for buttons/inputs */
+  --radius-lg:    10px;
+  --radius-xl:    16px;
+  --radius-pill:  999px;
+
+  /* ---------- Shadows (subtle, brand-quiet) ---------- */
+  --shadow-1: 0 1px 2px rgba(33, 70, 139, 0.08);
+  --shadow-2: 0 2px 8px rgba(33, 70, 139, 0.10);
+  --shadow-3: 0 8px 24px rgba(33, 70, 139, 0.12);
+
+  /* ---------- Hex motif clip-paths ---------- */
+  --hex-pointy-top: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+
+  /* ---------- Cut-corner clip-paths ---------- */
+  /* Triangular bevels mimic the hex motif on rectangles —
+     use these instead of (or in addition to) border-radius for
+     panels, cards, hero containers, modals. Use the size-specific
+     vars below; the polygon strings are inlined per size because
+     polygon() does not re-resolve var() at use time. */
+  --cut-sm:  6px;
+  --cut-md: 10px;
+  --cut-lg: 16px;
+  --cut-xl: 24px;
+
+  /* Top-left + bottom-right cut — diagonal asymmetry, our default */
+  --clip-cut-tlbr-sm: polygon( 6px 0, 100% 0, 100% calc(100% -  6px), calc(100% -  6px) 100%, 0 100%, 0  6px);
+  --clip-cut-tlbr-md: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
+  --clip-cut-tlbr-lg: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
+  --clip-cut-tlbr-xl: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
+  --clip-cut-tlbr:    var(--clip-cut-tlbr-md);
+
+  /* Top-right + bottom-left cut — mirror */
+  --clip-cut-trbl-sm: polygon(0 0, calc(100% -  6px) 0, 100%  6px, 100% 100%,  6px 100%, 0 calc(100% -  6px));
+  --clip-cut-trbl-md: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
+  --clip-cut-trbl-lg: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
+  --clip-cut-trbl-xl: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
+  --clip-cut-trbl:    var(--clip-cut-trbl-md);
+
+  /* All four corners cut */
+  --clip-cut-all-sm: polygon( 6px 0, calc(100% -  6px) 0, 100%  6px, 100% calc(100% -  6px), calc(100% -  6px) 100%,  6px 100%, 0 calc(100% -  6px), 0  6px);
+  --clip-cut-all-md: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
+  --clip-cut-all-lg: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
+  --clip-cut-all-xl: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
+  --clip-cut-all:    var(--clip-cut-all-md);
+
+  /* ============================================================
+     Print + paper sizes
+     ----------------------------------------------------------------
+     Real-world dimensions in millimetres. The HTML preview renders
+     these as on-screen mock-ups; the print stylesheet at the bottom
+     of each artefact maps them to @page rules. No bleed yet —
+     --bleed is plumbed at 0 and will flip to 3mm when we move to
+     real print runs. Don't bake bleed into individual layouts;
+     reference the token. */
+
+  /* Paper formats — width / height */
+  --paper-a4-w:   210mm;
+  --paper-a4-h:   297mm;
+  --paper-a5-w:   148mm;
+  --paper-a5-h:   210mm;
+  --paper-a3-w:   297mm;
+  --paper-a3-h:   420mm;
+
+  /* Business card — Dutch / European standard */
+  --card-w:        85mm;
+  --card-h:        55mm;
+
+  /* Envelopes */
+  --env-c5-w:     229mm;
+  --env-c5-h:     162mm;
+  --env-c4-w:     324mm;
+  --env-c4-h:     229mm;
+  --env-dl-w:     220mm;
+  --env-dl-h:     110mm;
+
+  /* Slide deck — 16:9 landscape, 1280×720 nominal at 96dpi */
+  --slide-w:    338.67mm;  /* 1280px → mm */
+  --slide-h:    190.5mm;   /* 720px → mm */
+  --slide-w-px:  1280px;
+  --slide-h-px:   720px;
+
+  /* Banner / signage — placed on screen, scale to real-world print later */
+  --banner-rollup-w: 850mm;   /* 85cm × 200cm pull-up */
+  --banner-rollup-h: 2000mm;
+  --banner-event-w:  3000mm;  /* 3m × 2m event backdrop */
+  --banner-event-h:  2000mm;
+
+  /* Web banners — pixel-native, kept here for one source of truth */
+  --banner-linkedin-w: 1584px;
+  --banner-linkedin-h:  396px;
+  --banner-x-w:        1500px;
+  --banner-x-h:         500px;
+  --banner-fb-w:        820px;
+  --banner-fb-h:        312px;
+
+  /* mm-based spacing for paper layouts (4mm step) */
+  --space-mm-1:   2mm;
+  --space-mm-2:   4mm;
+  --space-mm-3:   6mm;
+  --space-mm-4:   8mm;
+  --space-mm-5:  10mm;
+  --space-mm-6:  12mm;
+  --space-mm-8:  16mm;
+  --space-mm-10: 20mm;
+  --space-mm-12: 24mm;
+
+  /* Bleed — 0 on screen, flip to 3mm when sending to a real printer.
+     Keep this token referenced from artefact stylesheets (not hard-
+     coded) so the change is one place. */
+  --bleed: 0mm;
+}
+
+/* ============================================================
+   Base typography
+   ============================================================ */
+html { font-family: var(--conduction-typography-font-family-body); }
+body {
+  font-family: var(--conduction-typography-font-family-body);
+  font-size: var(--fs-base);
+  line-height: var(--lh-normal);
+  color: var(--conduction-color-text-default);
+  background: var(--conduction-color-background-default);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--conduction-typography-font-family-heading);
+  color: var(--conduction-color-text-default);
+  line-height: var(--lh-tight);
+  margin: 0;
+  text-wrap: balance;
+}
+h1 { font-size: var(--fs-5xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
+h2 { font-size: var(--fs-4xl); font-weight: var(--fw-bold); letter-spacing: -0.015em; }
+h3 { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
+h4 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
+h5 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); }
+h6 { font-size: var(--fs-lg);  font-weight: var(--fw-semibold); }
+
+p  { margin: 0; text-wrap: pretty; }
+
+code, kbd, samp, pre {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 0.92em;
+}
+
+a {
+  color: var(--conduction-color-link-default);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  transition: color 120ms ease;
+}
+a:hover { color: var(--conduction-color-link-hover); }
+
+/* ============================================================
+   Brand-citation: "Next" in Nextcloud-blue
+   ============================================================ */
+.next-blue { color: var(--conduction-color-brand-nextcloud); }
+.cg-yellow { color: var(--conduction-color-brand-commonground); }
+
+/* ============================================================
+   Hex-pattern background utility
+   ----------------------------------------------------------------
+   A subtle pointy-top hexagon lattice for footers, section dividers,
+   empty states. The lattice itself is an inline SVG data-URI, tiled.
+   Use the convenience classes below or set the custom properties
+   directly on any element:
+
+     .hex-pattern               default cobalt-100 lines @ ~6% opacity
+     .hex-pattern--soft         barely-there (4%) — for footers
+     .hex-pattern--bold         visible (12%) — for empty states / dividers
+
+   Override:
+     style="--hex-pattern-color: #21468B; --hex-pattern-opacity: 0.08;"
+
+   The pattern repeats at 56px, which matches our spacing rhythm
+   (multiple of --space-4 / --space-8). Don't go below 4% opacity or
+   the texture disappears at small sizes; don't go above 14% or it
+   fights the foreground.
+   ============================================================ */
+.hex-pattern,
+.hex-pattern--soft,
+.hex-pattern--bold {
+  --hex-pattern-color:   var(--c-blue-cobalt);
+  --hex-pattern-opacity: 0.06;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><g fill='none' stroke='%2321468B' stroke-width='1'><path d='M28 1 L55 16 L55 48 L28 63 L1 48 L1 16 Z'/><path d='M0 32 L1 32 M55 32 L56 32'/></g></svg>");
+  background-size: 56px 64px;
+  background-repeat: repeat;
+  /* layer the color tint via a mask: easier — lower the whole bg's opacity */
+  background-blend-mode: multiply;
+  position: relative;
+}
+.hex-pattern::before,
+.hex-pattern--soft::before,
+.hex-pattern--bold::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: inherit;
+  background-size: inherit;
+  background-repeat: inherit;
+  opacity: var(--hex-pattern-opacity);
+}
+.hex-pattern--soft { --hex-pattern-opacity: 0.04; }
+.hex-pattern--bold { --hex-pattern-opacity: 0.12; }
+/* When applied to a container, the pseudo-element handles the texture
+   so foreground content doesn't get tinted. Make children stack above: */
+.hex-pattern > *,
+.hex-pattern--soft > *,
+.hex-pattern--bold > * { position: relative; z-index: 1; }
+/* Strip the base-image (we paint via ::before only) so blend-mode
+   doesn't double up: */
+.hex-pattern, .hex-pattern--soft, .hex-pattern--bold {
+  background-image: none;
+  background-blend-mode: normal;
+}
+
+/* Typography & colour defaults, applied via the semantic tokens.
+   Pages link this alongside tokens.css. Per-page CSS only overrides
+   when a surface needs something other than the brand default
+   (e.g. white text on a cobalt panel). */
+
+@import url("./tokens.css");
+
+body {
+  color: var(--conduction-color-text-default);
+  font-family: var(--conduction-typography-font-family-body);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--conduction-color-text-default);
+  font-family: var(--conduction-typography-font-family-heading);
+  margin: 0;
+}
+
+a {
+  color: var(--conduction-color-link-default);
+  transition: color 140ms ease;
+}
+a:hover { color: var(--conduction-color-link-hover); }

package/src/index.js

@@ -54,39 +54,64 @@ const baseNavbar = (siteName) => ({
 });
 
 /**
- * Brand-default footer. Cobalt-900 panel with three-column link grid +
- * the standard Conduction tells (KvK, BTW, EUPL/MIT licence).
+ * Brand-default footer columns (the "links" array).
+ *
+ * Three corporate columns rendered on the cobalt-900 footer panel.
+ * Sites override these wholesale by passing `footer.links` to
+ * createConfig(); a site that wants to keep just one brand column
+ * (e.g. only "Conduction" on a product-page footer) can spread the
+ * filtered output of this function into their own array. The other
+ * footer fields (style, copyright) keep their brand defaults
+ * independently.
+ */
+const baseFooterLinks = () => [
+  {
+    title: 'Product',
+    items: [
+      { label: 'ConNext', href: 'https://conduction.nl/connext' },
+      { label: 'Common Ground', href: 'https://conduction.nl/commonground' },
+      { label: 'App store', href: 'https://apps.conduction.nl/' },
+      { label: 'Common Ground hosting', href: 'https://commonground.nu/' },
+    ],
+  },
+  {
+    title: 'Conduction',
+    items: [
+      { label: 'About', href: 'https://conduction.nl/about' },
+      { label: 'Open source', href: 'https://conduction.nl/about#opensource' },
+      { label: 'Team', href: 'https://conduction.nl/about#team' },
+      { label: 'ISO', href: 'https://conduction.nl/iso' },
+    ],
+  },
+  {
+    title: 'Documentatie',
+    items: [
+      { label: 'Brand book', href: 'https://connext.conduction.nl/' },
+      { label: 'Diagram set', href: 'https://connext.conduction.nl/diagrams/' },
+    ],
+  },
+];
+
+/**
+ * Brand-default footer copyright string. KvK + BTW + IBAN + address are
+ * the legal anchor that every Conduction-branded site needs to render
+ * regardless of which product-specific columns the footer shows above
+ * it. Sites override this only for non-Conduction surfaces (rare); on
+ * product pages it inherits unchanged.
+ */
+const baseFooterCopyright = () =>
+  `Conduction B.V. · KvK 76741850 · BTW NL860784241B01 · IBAN NL51 ABNA 0868951550 · Lauriergracht 14h, 1016 RR Amsterdam · ${new Date().getFullYear()}`;
+
+/**
+ * Brand-default footer (full object). Backward-compatible shim for
+ * older sites that called `baseFooter()` directly; new callers should
+ * compose with `baseFooterLinks` / `baseFooterCopyright` so per-property
+ * overrides keep working.
  */
 const baseFooter = () => ({
   style: 'dark',
-  links: [
-    {
-      title: 'Product',
-      items: [
-        { label: 'ConNext', href: 'https://conduction.nl/connext' },
-        { label: 'Common Ground', href: 'https://conduction.nl/commonground' },
-        { label: 'App store', href: 'https://apps.conduction.nl/' },
-        { label: 'Common Ground hosting', href: 'https://commonground.nu/' },
-      ],
-    },
-    {
-      title: 'Conduction',
-      items: [
-        { label: 'About', href: 'https://conduction.nl/about' },
-        { label: 'Open source', href: 'https://conduction.nl/about#opensource' },
-        { label: 'Team', href: 'https://conduction.nl/about#team' },
-        { label: 'ISO', href: 'https://conduction.nl/iso' },
-      ],
-    },
-    {
-      title: 'Documentatie',
-      items: [
-        { label: 'Brand book', href: 'https://connext.conduction.nl/' },
-        { label: 'Diagram set', href: 'https://connext.conduction.nl/diagrams/' },
-      ],
-    },
-  ],
-  copyright: `Conduction B.V. · KvK 76741850 · BTW NL860784241B01 · IBAN NL51 ABNA 0868951550 · Lauriergracht 14h, 1016 RR Amsterdam · ${new Date().getFullYear()}`,
+  links: baseFooterLinks(),
+  copyright: baseFooterCopyright(),
 });
 
 /**
@@ -97,8 +122,11 @@ const baseFooter = () => ({
  *
  * Optional:
  *   organizationName, projectName, navbar (deep-merged into base),
- *   footer (replaces base), customCss[] (appended to brand.css),
- *   plugins[], presets, i18n (overrides defaults)
+ *   footer (per-property fallback: any of style/links/copyright the
+ *     site omits keeps its brand default — pass `footer: { links: [...] }`
+ *     to swap columns while inheriting the KvK/BTW copyright),
+ *   customCss[] (appended to brand.css), plugins[], presets,
+ *   i18n (overrides defaults)
  */
 function createConfig(opts) {
   if (!opts || !opts.title || !opts.url) {
@@ -171,7 +199,19 @@ function createConfig(opts) {
           respectPrefersColorScheme: true,
         },
         navbar: Object.assign(baseNavbar(opts.title), opts.navbar || {}),
-        footer: opts.footer || baseFooter(),
+        /* Per-property fallback so a site can override one slice of the
+           footer (e.g. just `links`) and inherit the rest from the brand.
+           Previously `opts.footer` replaced the whole footer wholesale,
+           which forced sites to copy the KvK/BTW copyright string just to
+           swap columns. */
+        footer: (() => {
+          const f = opts.footer || {};
+          return {
+            style:     f.style     || 'dark',
+            links:     f.links     || baseFooterLinks(),
+            copyright: f.copyright || baseFooterCopyright(),
+          };
+        })(),
       },
       opts.themeConfig || {}
     ),
@@ -180,4 +220,11 @@ function createConfig(opts) {
   };
 }
 
-module.exports = { createConfig, I18N, baseNavbar, baseFooter };
+module.exports = {
+  createConfig,
+  I18N,
+  baseNavbar,
+  baseFooter,
+  baseFooterLinks,
+  baseFooterCopyright,
+};