@conduction/docusaurus-preset 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "1.2.0",
+  "version": "1.3.0",
+  "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.jsx

@@ -2,11 +2,9 @@
  * <ContactCta />
  *
  * Soft tinted call-to-action panel for the bottom of academy
- * tutorials, docs pages, or any long-form content. Two-column
- * layout: title + body on the left, single primary action on the
- * right. A subtle pointy-top hex motif decorates the right edge
- * so the panel reads as a Conduction surface, not a generic blue
- * box.
+ * tutorials, docs pages, or any long-form content. Composed from
+ * <HexCard decoration> with a mail icon in the top-left badge and
+ * the primary CTA in the right-side actions slot.
  *
  * Tone: cobalt-50 ground, cobalt-900 type, cobalt-700 body, KNVB
  * orange reserved for the trailing arrow inside the CTA. One
@@ -34,41 +32,39 @@
  */
 
 import React from 'react';
+import HexCard from '../HexCard/HexCard';
 import styles from './ContactCta.module.css';
 
-export default function ContactCta({
-  title,
-  body,
-  cta,
-  className,
-}) {
-  const composed = [styles.panel, className].filter(Boolean).join(' ');
+function CtaButton({cta}) {
+  if (!cta) return null;
+  const isExternal = cta.href && /^https?:/.test(cta.href);
   return (
-    <aside className={composed}>
-      <span className={styles.hex1} aria-hidden="true" />
-      <span className={styles.hex2} aria-hidden="true" />
-      <span className={styles.hex3} aria-hidden="true" />
-
-      <div className={styles.copy}>
-        {title && <h3 className={styles.title}>{title}</h3>}
-        {body && <p className={styles.body}>{body}</p>}
-      </div>
+    <a
+      className={styles.button}
+      href={cta.href || '#'}
+      target={isExternal ? '_blank' : undefined}
+      rel={isExternal ? 'noreferrer noopener' : undefined}
+    >
+      <span>{cta.label}</span>
+      <svg viewBox="0 0 24 24" aria-hidden="true" width="14" height="14"
+           fill="none" stroke="currentColor" strokeWidth="2"
+           strokeLinecap="round" strokeLinejoin="round">
+        <path d="M5 12h14M12 5l7 7-7 7"/>
+      </svg>
+    </a>
+  );
+}
 
-      {cta && (
-        <a
-          className={styles.button}
-          href={cta.href || '#'}
-          target={cta.href && /^https?:/.test(cta.href) ? '_blank' : undefined}
-          rel={cta.href && /^https?:/.test(cta.href) ? 'noreferrer noopener' : undefined}
-        >
-          <span>{cta.label}</span>
-          <svg viewBox="0 0 24 24" aria-hidden="true" width="14" height="14"
-               fill="none" stroke="currentColor" strokeWidth="2"
-               strokeLinecap="round" strokeLinejoin="round">
-            <path d="M5 12h14M12 5l7 7-7 7"/>
-          </svg>
-        </a>
-      )}
-    </aside>
+export default function ContactCta({title, body, cta, className}) {
+  return (
+    <HexCard
+      title={title}
+      icon="mail"
+      decoration
+      actions={<CtaButton cta={cta} />}
+      className={className}
+    >
+      {body && <p>{body}</p>}
+    </HexCard>
   );
 }

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

@@ -1,97 +1,9 @@
-.panel {
-  position: relative;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: var(--space-6);
-  align-items: center;
-  background: var(--c-cobalt-50);
-  border: 1px solid var(--c-cobalt-100);
-  border-radius: var(--radius-lg);
-  padding: var(--space-7) var(--space-8);
-  margin: var(--space-12) 0 var(--space-8);
-  overflow: hidden;
-  font-family: var(--conduction-typography-font-family-body);
-}
-
-@media (max-width: 720px) {
-  .panel {
-    grid-template-columns: 1fr;
-    padding: var(--space-6);
-    gap: var(--space-4);
-  }
-}
-
-/* Decorative pointy-top hexes layered on the right edge. They sit
-   behind the copy via z-index 0 with the copy and button on z-index 1.
-   Pointy-top point-up only — never rotated, never flat-top. */
-.hex1,
-.hex2,
-.hex3 {
-  position: absolute;
-  background: var(--c-cobalt-100);
-  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-  pointer-events: none;
-  z-index: 0;
-}
-
-.hex1 {
-  width: 220px;
-  height: 254px;
-  right: -60px;
-  top: -40px;
-  opacity: 0.7;
-}
-
-.hex2 {
-  width: 110px;
-  height: 127px;
-  right: 80px;
-  bottom: -30px;
-  opacity: 0.5;
-  background: var(--c-cobalt-200);
-}
-
-.hex3 {
-  width: 56px;
-  height: 65px;
-  right: 220px;
-  top: 18px;
-  opacity: 0.5;
-  background: var(--c-cobalt-200);
-}
-
-@media (max-width: 720px) {
-  .hex1 { right: -100px; top: -80px; }
-  .hex2, .hex3 { display: none; }
-}
-
-.copy {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  gap: var(--space-2);
-  max-width: 60ch;
-}
-
-.title {
-  font-size: 24px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
-  margin: 0;
-  line-height: 1.25;
-}
-
-.body {
-  font-size: 16px;
-  color: var(--c-cobalt-700);
-  line-height: 1.6;
-  margin: 0;
-}
+/**
+ * <ContactCta /> styles. The shell is now <HexCard decoration>; only
+ * the action button keeps its own rules here.
+ */
 
 .button {
-  position: relative;
-  z-index: 1;
   display: inline-flex;
   align-items: center;
   gap: 8px;

package/src/components/HexCard/HexCard.jsx

@@ -0,0 +1,115 @@
+/**
+ * <HexCard />
+ *
+ * Tinted academy/tutorial panel with a top-left hex badge holding an
+ * icon. The shared shell behind <ContactCta />, <Outcomes />, and
+ * <Prerequisites /> — all three were rebuilt in isolation around the
+ * same cobalt-50 surface, so this primitive consolidates the surface,
+ * border, padding, and badge slot in one place.
+ *
+ * Anatomy:
+ *   ┌──────────────────────────────────────────┐
+ *   │ ⬢  Title                       [actions] │
+ *   │    body / list / paragraph               │
+ *   └──────────────────────────────────────────┘
+ *
+ * The badge is a <HexThumbnail size="sm" tone="cobalt-deep"> with a
+ * white glyph. Cobalt + white keeps the orange accent budget free for
+ * the orange checkmark/bullet glyphs inside <Outcomes /> and
+ * <Prerequisites />, and for the orange CTA arrow in <ContactCta />.
+ *
+ * Usage:
+ *
+ *   <HexCard title="Wat je leert" icon="lightbulb">
+ *     <ul>...</ul>
+ *   </HexCard>
+ *
+ *   <HexCard
+ *     title="Wil je meer weten?"
+ *     icon="mail"
+ *     decoration
+ *     actions={<a className="…">Mail ons →</a>}
+ *   >
+ *     <p>Mail ons. We helpen je…</p>
+ *   </HexCard>
+ *
+ * Mirrors preview/components/hex-card.html.
+ */
+
+import React from 'react';
+import HexThumbnail from '../primitives/HexThumbnail';
+import styles from './HexCard.module.css';
+
+const ICONS = {
+  mail: (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <rect x="3" y="5" width="18" height="14" rx="2"/>
+      <path d="M3 7l9 7 9-7"/>
+    </svg>
+  ),
+  lightbulb: (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M9 18h6"/>
+      <path d="M10 21h4"/>
+      <path d="M12 3a6 6 0 0 0-4 10.5c.7.8 1 1.6 1 2.5v1h6v-1c0-.9.3-1.7 1-2.5A6 6 0 0 0 12 3z"/>
+    </svg>
+  ),
+  clipboard: (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <rect x="6" y="4" width="12" height="17" rx="2"/>
+      <rect x="9" y="2" width="6" height="4" rx="1"/>
+      <path d="M9 11h6"/>
+      <path d="M9 15h6"/>
+    </svg>
+  ),
+};
+
+export default function HexCard({
+  title,
+  icon,
+  iconNode,
+  decoration = false,
+  actions,
+  children,
+  className,
+  as: Tag = 'aside',
+}) {
+  const composed = [
+    styles.card,
+    decoration && styles.hasDecoration,
+    actions && styles.hasActions,
+    className,
+  ].filter(Boolean).join(' ');
+
+  const glyph = iconNode || (icon && ICONS[icon]) || null;
+
+  return (
+    <Tag className={composed}>
+      {decoration && (
+        <>
+          <span className={`${styles.deco} ${styles.deco1}`} aria-hidden="true" />
+          <span className={`${styles.deco} ${styles.deco2}`} aria-hidden="true" />
+          <span className={`${styles.deco} ${styles.deco3}`} aria-hidden="true" />
+        </>
+      )}
+
+      {glyph && (
+        <span className={styles.badge} aria-hidden="true">
+          <HexThumbnail size="sm" tone="cobalt-deep">{glyph}</HexThumbnail>
+        </span>
+      )}
+
+      <div className={styles.head}>
+        {title && <h3 className={styles.title}>{title}</h3>}
+      </div>
+
+      <div className={styles.body}>
+        {children}
+      </div>
+
+      {actions && (
+        <div className={styles.actions}>{actions}</div>
+      )}
+    </Tag>
+  );
+}

package/src/components/HexCard/HexCard.module.css

@@ -0,0 +1,147 @@
+/**
+ * <HexCard /> styles. Tinted academy panel with a top-left hex
+ * badge, optional right-edge decorative hex motif, and an optional
+ * right-side actions slot.
+ *
+ * Layout:
+ *   [badge]  [head .................] [actions]
+ *            [body .........................  ]
+ *
+ * The badge column auto-sizes to the 56px hex; head spans the
+ * remaining width; body lives below the head and spans both
+ * non-action columns. The actions cell is only present when an
+ * <HexCard actions={…}> prop is passed (e.g. ContactCta button).
+ */
+
+.card {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    "badge head"
+    "body  body";
+  column-gap: var(--space-4);
+  row-gap: var(--space-3);
+  align-items: start;
+  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;
+  overflow: hidden;
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.hasActions {
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas:
+    "badge head    actions"
+    "body  body    actions";
+  align-items: center;
+  column-gap: var(--space-5);
+}
+
+@media (max-width: 720px) {
+  .hasActions {
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      "badge   head"
+      "body    body"
+      "actions actions";
+  }
+  .card { padding: var(--space-5) var(--space-5); }
+}
+
+.badge {
+  grid-area: badge;
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+}
+
+.head {
+  grid-area: head;
+  position: relative;
+  z-index: 1;
+  align-self: center;
+}
+
+.title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+  margin: 0;
+  line-height: 1.25;
+}
+
+.body {
+  grid-area: body;
+  position: relative;
+  z-index: 1;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--c-cobalt-700);
+}
+
+.body > p { margin: 0; }
+.body > p + p { margin-top: var(--space-3); }
+.body > ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: var(--space-3);
+}
+
+.actions {
+  grid-area: actions;
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+/* Decorative pointy-top hexes layered on the right edge. Only
+   rendered when the parent passes <HexCard decoration>. They sit
+   behind copy via z-index 0 with everything else on z-index 1.
+   Pointy-top point-up — never rotated. */
+.deco {
+  position: absolute;
+  background: var(--c-cobalt-100);
+  clip-path: var(--hex-pointy-top);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.deco1 {
+  width: 220px;
+  height: 254px;
+  right: -60px;
+  top: -40px;
+  opacity: 0.7;
+}
+
+.deco2 {
+  width: 110px;
+  height: 127px;
+  right: 80px;
+  bottom: -30px;
+  opacity: 0.5;
+  background: var(--c-cobalt-200);
+}
+
+.deco3 {
+  width: 56px;
+  height: 65px;
+  right: 220px;
+  top: 18px;
+  opacity: 0.5;
+  background: var(--c-cobalt-200);
+}
+
+@media (max-width: 720px) {
+  .deco1 { right: -100px; top: -80px; }
+  .deco2, .deco3 { display: none; }
+}

package/src/components/Outcomes/Outcomes.jsx

@@ -10,9 +10,10 @@
  *   - "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.
+ * Visual: shared <HexCard> shell with a lightbulb icon in the
+ * top-left badge. Each item uses an orange checkmark glyph
+ * (achievement) instead of the orange hex bullet (need) used in
+ * <Prerequisites />. Same surface, distinct semantics.
  *
  * Usage:
  *
@@ -27,6 +28,7 @@
  */
 
 import React from 'react';
+import HexCard from '../HexCard/HexCard';
 import styles from './Outcomes.module.css';
 
 export function Outcome({children, className}) {
@@ -44,11 +46,9 @@ export function Outcome({children, className}) {
 }
 
 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>
+    <HexCard title={title} icon="lightbulb" className={className}>
+      <ul>{children}</ul>
+    </HexCard>
   );
 }

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

@@ -1,29 +1,7 @@
-.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;
-}
+/**
+ * <Outcomes /> styles. The shell is provided by <HexCard>; only the
+ * orange-checkmark item layout lives here.
+ */
 
 .item {
   display: grid;

package/src/components/Prerequisites/Prerequisites.jsx

@@ -5,10 +5,10 @@
  * starting an academy tutorial. Replaces the ad-hoc "What you need"
  * h2 + bullet list pattern that was duplicated across tutorials.
  *
- * Each item renders with a small hex-bullet on the left so the list
- * reads as a checklist instead of generic prose. The card uses the
- * cobalt-50 tinted-surface tone, matching <FeatureList/> and
- * <FAQ/> on academy pages.
+ * Visual: shared <HexCard> shell with a clipboard icon in the
+ * top-left badge. Each item renders with a small orange hex-bullet
+ * on the left so the list reads as a checklist instead of generic
+ * prose.
  *
  * Usage:
  *
@@ -25,6 +25,7 @@
  */
 
 import React from 'react';
+import HexCard from '../HexCard/HexCard';
 import styles from './Prerequisites.module.css';
 
 export function PrerequisiteItem({children, className}) {
@@ -38,11 +39,9 @@ export function PrerequisiteItem({children, className}) {
 }
 
 export default function Prerequisites({title = 'What you need', 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>
+    <HexCard title={title} icon="clipboard" className={className}>
+      <ul>{children}</ul>
+    </HexCard>
   );
 }

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

@@ -1,28 +1,7 @@
-.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-10) 0;
-  font-family: var(--conduction-typography-font-family-body);
-}
-
-.title {
-  font-size: 18px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
-  margin: 0 0 var(--space-3);
-  line-height: 1.3;
-}
-
-.list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: grid;
-  gap: var(--space-2);
-}
+/**
+ * <Prerequisites /> styles. The shell is provided by <HexCard>; only
+ * the orange hex-bullet item layout lives here.
+ */
 
 .item {
   display: grid;
@@ -39,7 +18,7 @@
   height: 14px;
   margin-top: 6px;
   background: var(--c-orange-knvb);
-  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+  clip-path: var(--hex-pointy-top);
   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 HexCard} from './HexCard/HexCard.jsx';
 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';

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); }