@conduction/docusaurus-preset 0.1.0

package/src/theme/MDXPage/index.jsx

@@ -0,0 +1,134 @@
+/**
+ * Brand MDXPage swizzle.
+ *
+ * Docusaurus's default MDXPage wraps every MDX page in
+ * `<main class="container">.row > .col col--8`, which constrains content
+ * to 67% width with a margin column reserved for the TOC. That works
+ * for documentation pages but kills the design of marketing pages: the
+ * cobalt-50 stats band, the canal-scene footer, and every cobalt CTA
+ * panel render with visible white margins instead of bleeding to the
+ * edges.
+ *
+ * Brand rule: pages with `hide_table_of_contents: true` (every page in
+ * sites/www/src/pages/) render full-width. Section components own
+ * their own `max-width: 1280px; margin: 0 auto` rules, so the marketing
+ * surfaces look right. Pages that DO show a TOC keep the standard
+ * Docusaurus container behaviour so the docs side stays consistent.
+ *
+ * Mirrors the source upstream MDXPage signature so the rest of the
+ * Docusaurus renderer (PageMetadata, HtmlClassNameProvider, etc.) is
+ * untouched.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+import MDXContent from '@theme/MDXContent';
+import TOC from '@theme/TOC';
+import ContentVisibility from '@theme/ContentVisibility';
+import EditMetaRow from '@theme/EditMetaRow';
+
+export default function MDXPage(props) {
+  const {content: MDXPageContent} = props;
+  const {metadata, assets} = MDXPageContent;
+  const {
+    title,
+    editUrl,
+    description,
+    frontMatter,
+    lastUpdatedBy,
+    lastUpdatedAt,
+  } = metadata;
+  const {
+    keywords,
+    wrapperClassName,
+    hide_table_of_contents: hideTableOfContents,
+  } = frontMatter;
+  const image = assets.image ?? frontMatter.image;
+  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
+
+  /* Marketing pages that opt out of the TOC also opt out of the col-8
+     container; the section components inside the page handle their own
+     widths and bleed to the edges where the design calls for it. */
+  const isMarketing = !!hideTableOfContents;
+
+  /* Marketing pages get article-margin: 0 so the first section of the
+     page (Hero, Section, etc.) sits flush against the navbar. The
+     default Infima styling on <article> would otherwise leave a small
+     top margin between the navbar's border and the page's first row,
+     which the user-flagged screenshot showed on the connext landing.
+     Docs pages keep the default margin so the heading rhythm reads
+     correctly. */
+  const articleStyle = isMarketing ? {margin: 0, padding: 0} : undefined;
+
+  const inner = (
+    <>
+      <ContentVisibility metadata={metadata} />
+      <article style={articleStyle}>
+        <MDXContent>
+          <MDXPageContent />
+        </MDXContent>
+      </article>
+      {canDisplayEditMetaRow && (
+        <EditMetaRow
+          className={clsx(
+            'margin-top--sm',
+            ThemeClassNames.pages.pageFooterEditMetaRow,
+          )}
+          editUrl={editUrl}
+          lastUpdatedAt={lastUpdatedAt}
+          lastUpdatedBy={lastUpdatedBy}
+        />
+      )}
+    </>
+  );
+
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        wrapperClassName ?? ThemeClassNames.wrapper.mdxPages,
+        ThemeClassNames.page.mdxPage,
+      )}>
+      <Layout>
+        <PageMetadata
+          title={title}
+          description={description}
+          keywords={keywords}
+          image={image}
+        />
+        {isMarketing ? (
+          /* Marketing surface: no container, no col-8. The page's
+             section components own their own widths. The
+             `marketing-page` class lets brand.css zero-out any stray
+             top margin/padding so the first section sits flush
+             against the navbar (no gap between navbar and hex-rain
+             hero). */
+          <main className="marketing-page">{inner}</main>
+        ) : (
+          /* Docs / TOC surface: standard Docusaurus container. */
+          <main className="container container--fluid margin-vert--lg">
+            <div className="row">
+              <div className={clsx('col', MDXPageContent.toc.length > 0 && 'col--8')}>
+                {inner}
+              </div>
+              {MDXPageContent.toc.length > 0 && (
+                <div className="col col--2">
+                  <TOC
+                    toc={MDXPageContent.toc}
+                    minHeadingLevel={frontMatter.toc_min_heading_level}
+                    maxHeadingLevel={frontMatter.toc_max_heading_level}
+                  />
+                </div>
+              )}
+            </div>
+          </main>
+        )}
+      </Layout>
+    </HtmlClassNameProvider>
+  );
+}

package/src/theme/Navbar/index.jsx

@@ -0,0 +1,120 @@
+/**
+ * Brand Navbar swizzle.
+ *
+ * Replaces Docusaurus's default Infima navbar with the Conduction
+ * top-navbar pattern: brand wordmark + nav links + Partners + Install.
+ * Navigation items come from themeConfig.navbar.items (configured by
+ * the consuming site); the chrome (typography, spacing, brand citation)
+ * stays locked in this component.
+ *
+ * Brand wordmark switches based on pathname so a single Conduction hub
+ * can host vanity sub-brand entry points:
+ *
+ *   /connext, /nl/connext           → "Con<Next>" with next-blue accent
+ *   /commonground, /nl/commonground → "Common <Ground>" with cg-yellow accent
+ *   anything else                   → navbar.title (e.g. "Conduction")
+ *
+ * The home link follows the brand: clicking the wordmark while on a
+ * sub-brand section keeps you in that section. Outside a sub-brand
+ * section it goes to the site root.
+ *
+ * Mirrors preview/components/top-navbar.html in the design-system kit.
+ */
+
+import React from 'react';
+import Link from '@docusaurus/Link';
+import {useLocation} from '@docusaurus/router';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+import {brandFor} from '../brand.jsx';
+import styles from './styles.module.css';
+
+/**
+ * Render a single navbar item. The brand top-navbar supports a small
+ * subset of Docusaurus item types (link, locale dropdown, optional
+ * primary CTA via items[].cta = true). Everything else falls back to
+ * a plain link for forward-compatibility.
+ */
+function NavItem({item, location}) {
+  if (item.type === 'localeDropdown') {
+    return (
+      <div className={styles.localeWrapper}>
+        <LocaleDropdownNavbarItem mobile={false} {...item} />
+      </div>
+    );
+  }
+
+  /* External link, no React-router prefetch */
+  if (item.href && !item.to) {
+    const isCta = item.cta === true;
+    return (
+      <a
+        href={item.href}
+        className={isCta ? styles.cta : styles.ghost}
+        target={item.href.startsWith('http') ? '_blank' : undefined}
+        rel={item.href.startsWith('http') ? 'noopener noreferrer' : undefined}
+      >
+        {item.label}{isCta && ' →'}
+      </a>
+    );
+  }
+
+  /* Internal route */
+  if (item.to) {
+    const isCta = item.cta === true;
+    const isActive = location?.pathname === item.to ||
+                     location?.pathname?.startsWith(item.to + '/');
+    return (
+      <Link
+        to={item.to}
+        className={
+          isCta
+            ? styles.cta
+            : `${styles.link} ${isActive ? styles.linkActive : ''}`
+        }
+      >
+        {item.label}{isCta && ' →'}
+      </Link>
+    );
+  }
+
+  return null;
+}
+
+export default function Navbar() {
+  const {navbar} = useThemeConfig();
+  const location = useLocation();
+  const items = navbar.items || [];
+  const brand = brandFor(location.pathname, navbar.title);
+  const wordmark = brand ? brand.wordmark : navbar.title;
+  /* Path-match: keep the visitor in the sub-brand section on logo click.
+     Title-match (the site's primary brand IS a sub-brand): logo goes to
+     site root since the section IS the site. */
+  const homeHref = brand?.source === 'path' ? brand.home : '/';
+
+  /* Split into "left links" (regular nav) and "right CTAs" (locale,
+     external links, install button). The brand pattern groups them
+     this way; consumers control order via item.position. */
+  const leftItems = items.filter(i => i.position !== 'right' && i.type !== 'localeDropdown');
+  const rightItems = items.filter(i => i.position === 'right' || i.type === 'localeDropdown');
+
+  return (
+    <nav className={styles.nav} role="navigation" aria-label="Main">
+      <div className={styles.left}>
+        <Link to={homeHref} className={styles.wordmark}>
+          {wordmark}
+        </Link>
+        <div className={styles.links}>
+          {leftItems.map((item, i) => (
+            <NavItem key={i} item={item} location={location} />
+          ))}
+        </div>
+      </div>
+      <div className={styles.ctas}>
+        {rightItems.map((item, i) => (
+          <NavItem key={i} item={item} location={location} />
+        ))}
+      </div>
+    </nav>
+  );
+}

package/src/theme/Navbar/styles.module.css

@@ -0,0 +1,114 @@
+/**
+ * Navbar swizzle styles. Mirrors preview/components/top-navbar.html in
+ * the design-system kit. CSS Modules so class names don't collide with
+ * Docusaurus's Infima rules.
+ */
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 22px 56px;
+  border-bottom: 1px solid var(--c-cobalt-100);
+  background: white;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 44px;
+}
+
+.wordmark {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--c-blue-cobalt);
+  text-decoration: none;
+}
+.wordmark:hover { color: var(--c-blue-cobalt); text-decoration: none; }
+
+.links {
+  display: flex;
+  gap: 28px;
+}
+
+.link {
+  color: var(--c-cobalt-700);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  transition: color 160ms ease;
+}
+.link:hover {
+  color: var(--c-orange-knvb);
+  text-decoration: none;
+}
+.linkActive {
+  color: var(--c-orange-knvb);
+  font-weight: 600;
+}
+
+.ctas {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.ghost {
+  color: var(--c-cobalt-700);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+}
+.ghost:hover {
+  color: var(--c-orange-knvb);
+  text-decoration: none;
+}
+
+.cta {
+  background: var(--c-blue-cobalt);
+  color: white;
+  padding: 9px 16px;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background 160ms ease;
+}
+.cta:hover {
+  background: var(--c-cobalt-700);
+  color: white;
+  text-decoration: none;
+}
+
+/* Locale dropdown integration. Override Infima's defaults so it sits
+   inline with the other right-side items. */
+.localeWrapper :global(.dropdown) {
+  font-size: 14px;
+}
+.localeWrapper :global(.navbar__link) {
+  color: var(--c-cobalt-700);
+  font-weight: 500;
+  padding: 0 8px;
+}
+.localeWrapper :global(.navbar__link:hover) {
+  color: var(--c-orange-knvb);
+}
+
+/* Responsive collapse, simplified for v1.
+   TODO: hamburger menu like the design-system mock. */
+@media (max-width: 900px) {
+  .nav {
+    padding: 16px 24px;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+  .left { gap: 16px; }
+  .links { gap: 16px; }
+  .ctas { gap: 8px; }
+}

package/src/theme/brand.jsx

@@ -0,0 +1,63 @@
+/**
+ * Sub-brand detection for the Conduction hub.
+ *
+ * The hub at conduction.nl hosts ConNext and Common Ground vanity
+ * sections at /connext and /commonground (with locale-prefixed twins
+ * at /nl/connext and /nl/commonground). When a visitor is browsing
+ * inside a sub-brand section, the navbar wordmark and the footer
+ * brand block both switch to that sub-brand's mark. Outside any
+ * sub-brand section the default (Conduction, or whatever
+ * navbar.title is set to) wins.
+ *
+ * Both the Navbar and Footer swizzles import from here so the
+ * regex, wordmark JSX, and label stay in one place.
+ */
+
+import React from 'react';
+
+export const SUB_BRANDS = [
+  {
+    name: 'connext',
+    match: /^(?:\/nl)?\/connext(?:\/|$)/,
+    home: '/connext',
+    label: 'ConNext',
+    wordmark: (
+      <>
+        Con<span className="next-blue">Next</span>
+      </>
+    ),
+  },
+  {
+    name: 'commonground',
+    match: /^(?:\/nl)?\/commonground(?:\/|$)/,
+    home: '/commonground',
+    label: 'Common Ground+',
+    wordmark: (
+      <>
+        <span className="cg-plus-common">Common</span>{' '}
+        <span className="cg-yellow">Ground</span>
+        <span className="cg-plus-plus">+</span>
+      </>
+    ),
+  },
+];
+
+/**
+ * Pick the sub-brand active for a pathname. Falls back to title-based
+ * detection so a site whose primary brand IS a sub-brand (e.g. its
+ * navbar.title is set to 'ConNext') still gets the styled wordmark.
+ *
+ * Returns the matched SUB_BRANDS entry, or null if no match (default
+ * means the consumer should fall back to its own default text).
+ */
+export function brandFor(pathname, title) {
+  for (const b of SUB_BRANDS) {
+    if (b.match.test(pathname)) return {...b, source: 'path'};
+  }
+  if (title) {
+    for (const b of SUB_BRANDS) {
+      if (b.label === title) return {...b, source: 'title'};
+    }
+  }
+  return null;
+}

package/src/theme.js

@@ -0,0 +1,45 @@
+/**
+ * @conduction/docusaurus-preset, theme plugin entry.
+ *
+ * Registers the brand theme with Docusaurus so swizzled components
+ * (Navbar, Footer, future Doc / DocItem / etc.) replace the Infima
+ * defaults automatically. Sites pick this up by including it in
+ * themes: [...] (createConfig() does this for you).
+ *
+ * The brand CSS (token mapping + brand atoms) is also registered here
+ * via getClientModules() so it loads on every page without the site
+ * having to wire it into customCss.
+ */
+
+const path = require('path');
+
+module.exports = function conductionTheme(context, options) {
+  return {
+    name: '@conduction/docusaurus-theme',
+
+    /**
+     * Tells Docusaurus where to find swizzleable theme components.
+     * Anything under ./theme/<ComponentName>/ overrides the matching
+     * Docusaurus default.
+     */
+    getThemePath() {
+      return path.resolve(__dirname, './theme');
+    },
+
+    /**
+     * Same path, exposed for the `docusaurus swizzle` CLI so consumers
+     * can list / eject our overrides if they need to customise further.
+     */
+    getTypeScriptThemePath() {
+      return path.resolve(__dirname, './theme');
+    },
+
+    /**
+     * Brand CSS auto-loaded on every page. Sites can still append more
+     * via customCss[]; the preset's createConfig() wires that through.
+     */
+    getClientModules() {
+      return [path.resolve(__dirname, './css/brand.css')];
+    },
+  };
+};

package/src/utils/lazyScript.js

@@ -0,0 +1,37 @@
+/**
+ * useLazyScript: load a runtime script after React hydration.
+ *
+ * The pattern used in this preset's heavier components (canal-footer,
+ * hex-rain, platform-diagram) was to inject the runtime via
+ * `<Head><script defer /></Head>`. Defer scripts run between HTML
+ * parse and DOMContentLoaded, which is *before* React hydration in
+ * production builds. The scripts mutate the DOM (filling .skyline,
+ * upgrading custom elements, etc.), and the mutated DOM no longer
+ * matches what React tries to hydrate, producing minified errors
+ * #418 (hydration mismatch) + #423 (recovered by client re-render).
+ *
+ * Loading via this hook injects the <script> tag into <body> from a
+ * useEffect, which fires *after* hydration completes. The script's
+ * DOM mutations are then post-hydration and React doesn't re-validate.
+ *
+ * The injected tag has data-lazy-script="<key>" so SPA route changes
+ * don't double-load the same runtime, and so consumers can listen
+ * for `load` events on it (e.g. hex-rain calls window.HexRain.hydrate
+ * once the runtime registers itself).
+ */
+
+import {useEffect} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+export function useLazyScript(src, key) {
+  const isBrowser = useIsBrowser();
+  useEffect(() => {
+    if (!isBrowser) return;
+    if (document.querySelector(`script[data-lazy-script="${key}"]`)) return;
+    const script = document.createElement('script');
+    script.src = src;
+    script.async = true;
+    script.dataset.lazyScript = key;
+    document.body.appendChild(script);
+  }, [isBrowser, src, key]);
+}

package/static/img/favicon.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-86.6 -100 173.2 200" role="img" aria-label="Conduction avatar">
+  <title>Conduction avatar, drawn as three pointy-top polygons</title>
+  <!-- viewBox is the bounding box of the outer hex (R=100), no
+       internal padding. Three polygons in the same drawing
+       vocabulary as the watermark hexes:
+         1. Outer hex      cobalt, the frame
+         2. Inner hex      white, the empty interior (so the
+                           logo reads correctly on any ground)
+         3. C-shape        cobalt, sits inside the inner hex -->
+  <polygon fill="#21468B" points="0,-100 86.6,-50 86.6,50 0,100 -86.6,50 -86.6,-50"/>
+  <polygon fill="#FFFFFF" points="0,-74.5 64.5,-37.3 64.5,37.3 0,74.5 -64.5,37.3 -64.5,-37.3"/>
+  <polygon fill="#21468B" points="-0.2,-25.2 20.1,-13.5 43.7,-27.1 -0.2,-52.4 -45.6,-26.2 -45.6,26.2 -0.2,52.4 43.7,27.1 20.1,13.5 -0.2,25.2 -22,12.6 -22,-12.6"/>
+</svg>

package/static/img/honeycomb-scatter.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Hex scatter overlay">
+  <title>Hex scatter, solid-fill cobalt tones</title>
+  <!-- Twelve pointy-top hexes, all solid fills from the cobalt ramp.
+       Mix of cobalt-700 and cobalt-800 reads as "darker" against
+       cobalt-900 grounds and "darker still" against blue-cobalt
+       grounds, giving a visible but quiet hex texture either way.
+       No transparency, no gradients. One orange accent per scene
+       is added by the foreground, never here. -->
+  <g>
+    <polygon points="120,40 165,66 165,118 120,144 75,118 75,66" fill="#152D5C"/>
+    <polygon points="280,80 325,106 325,158 280,184 235,158 235,106" fill="#102246"/>
+    <polygon points="450,30 510,64 510,132 450,166 390,132 390,64" fill="#152D5C"/>
+    <polygon points="630,90 675,116 675,168 630,194 585,168 585,116" fill="#102246"/>
+    <polygon points="760,40 800,63 800,109 760,132 720,109 720,63" fill="#152D5C"/>
+    <polygon points="60,200 90,217 90,253 60,270 30,253 30,217" fill="#102246"/>
+    <polygon points="200,260 245,286 245,338 200,364 155,338 155,286" fill="#152D5C"/>
+    <polygon points="370,310 410,333 410,379 370,402 330,379 330,333" fill="#102246"/>
+    <polygon points="540,290 590,318 590,374 540,402 490,374 490,318" fill="#152D5C"/>
+    <polygon points="700,260 740,283 740,329 700,352 660,329 660,283" fill="#102246"/>
+    <polygon points="100,360 140,383 140,429 100,452 60,429 60,383" fill="#152D5C"/>
+    <polygon points="380,150 410,167 410,203 380,220 350,203 350,167" fill="#102246"/>
+  </g>
+</svg>

package/static/img/honeycomb-watermark.svg

@@ -0,0 +1,108 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 297" width="210mm" height="297mm" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Honeycomb watermark for A4 stationery">
+  <title>Honeycomb watermark, point-up hexes with scattered orange accents</title>
+  <!-- A4 watermark. Real honeycomb tiling with R=20mm.
+       Bulk hexes are stroked in cobalt-100 (solid colour), the
+       scattered accents are filled solid in KNVB orange. No fill-
+       opacity, no rgba, no gradients. All hexes point up. -->
+  <defs>
+    <!-- R=14 drawn hexes on a grid spaced for R=20: 6mm of breathing
+         room around each hex, never touching, still reading as a
+         honeycomb arrangement. -->
+    <polygon id="hx" points="0,-14 12.124,-7 12.124,7 0,14 -12.124,7 -12.124,-7"/>
+  </defs>
+
+  <!-- Cobalt-outlined hexes — the comb -->
+  <g fill="none" stroke="#DCE3F0" stroke-width="0.4">
+    <!-- Row 0 (type A, y=20) -->
+    <use href="#hx" x="17.32"  y="20"/>
+    <use href="#hx" x="51.96"  y="20"/>
+    <use href="#hx" x="86.6"   y="20"/>
+    <use href="#hx" x="121.24" y="20"/>
+    <use href="#hx" x="155.88" y="20"/>
+    <use href="#hx" x="190.52" y="20"/>
+
+    <!-- Row 1 (type B, y=50) -->
+    <use href="#hx" x="0"      y="50"/>
+    <use href="#hx" x="34.64"  y="50"/>
+    <use href="#hx" x="103.92" y="50"/>
+    <use href="#hx" x="138.56" y="50"/>
+    <use href="#hx" x="173.2"  y="50"/>
+    <use href="#hx" x="207.84" y="50"/>
+
+    <!-- Row 2 (type A, y=80) -->
+    <use href="#hx" x="17.32"  y="80"/>
+    <use href="#hx" x="51.96"  y="80"/>
+    <use href="#hx" x="86.6"   y="80"/>
+    <use href="#hx" x="121.24" y="80"/>
+    <use href="#hx" x="155.88" y="80"/>
+    <use href="#hx" x="190.52" y="80"/>
+
+    <!-- Row 3 (type B, y=110) -->
+    <use href="#hx" x="0"      y="110"/>
+    <use href="#hx" x="34.64"  y="110"/>
+    <use href="#hx" x="69.28"  y="110"/>
+    <use href="#hx" x="103.92" y="110"/>
+    <use href="#hx" x="138.56" y="110"/>
+    <use href="#hx" x="207.84" y="110"/>
+
+    <!-- Row 4 (type A, y=140) -->
+    <use href="#hx" x="17.32"  y="140"/>
+    <use href="#hx" x="51.96"  y="140"/>
+    <use href="#hx" x="86.6"   y="140"/>
+    <use href="#hx" x="121.24" y="140"/>
+    <use href="#hx" x="155.88" y="140"/>
+    <use href="#hx" x="190.52" y="140"/>
+
+    <!-- Row 5 (type B, y=170) -->
+    <use href="#hx" x="0"      y="170"/>
+    <use href="#hx" x="69.28"  y="170"/>
+    <use href="#hx" x="103.92" y="170"/>
+    <use href="#hx" x="138.56" y="170"/>
+    <use href="#hx" x="173.2"  y="170"/>
+    <use href="#hx" x="207.84" y="170"/>
+
+    <!-- Row 6 (type A, y=200) -->
+    <use href="#hx" x="17.32"  y="200"/>
+    <use href="#hx" x="51.96"  y="200"/>
+    <use href="#hx" x="86.6"   y="200"/>
+    <use href="#hx" x="121.24" y="200"/>
+    <use href="#hx" x="155.88" y="200"/>
+    <use href="#hx" x="190.52" y="200"/>
+
+    <!-- Row 7 (type B, y=230) -->
+    <use href="#hx" x="0"      y="230"/>
+    <use href="#hx" x="34.64"  y="230"/>
+    <use href="#hx" x="69.28"  y="230"/>
+    <use href="#hx" x="103.92" y="230"/>
+    <use href="#hx" x="173.2"  y="230"/>
+    <use href="#hx" x="207.84" y="230"/>
+
+    <!-- Row 8 (type A, y=260) -->
+    <use href="#hx" x="17.32"  y="260"/>
+    <use href="#hx" x="51.96"  y="260"/>
+    <use href="#hx" x="86.6"   y="260"/>
+    <use href="#hx" x="121.24" y="260"/>
+    <use href="#hx" x="155.88" y="260"/>
+    <use href="#hx" x="190.52" y="260"/>
+
+    <!-- Row 9 (type B, y=290) -->
+    <use href="#hx" x="0"      y="290"/>
+    <use href="#hx" x="34.64"  y="290"/>
+    <use href="#hx" x="69.28"  y="290"/>
+    <use href="#hx" x="138.56" y="290"/>
+    <use href="#hx" x="173.2"  y="290"/>
+    <use href="#hx" x="207.84" y="290"/>
+  </g>
+
+  <!-- Scattered cobalt accents — five, outline only.
+       Same stroke-width as the cobalt-100 bulk hexes; the brand
+       cobalt is naturally darker than cobalt-100 so the accents
+       read as a quieter highlight without overpowering body text. -->
+  <g fill="none" stroke="#21468B" stroke-width="0.4">
+    <use href="#hx" x="69.28"  y="50"/>
+    <use href="#hx" x="173.2"  y="110"/>
+    <use href="#hx" x="34.64"  y="170"/>
+    <use href="#hx" x="138.56" y="230"/>
+    <use href="#hx" x="103.92" y="290"/>
+  </g>
+</svg>

package/static/img/logo-dark.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-86.6 -100 173.2 200" role="img" aria-label="Conduction avatar, white">
+  <title>Conduction avatar, white, drawn as polygons (no background)</title>
+  <!-- For dark grounds. The cobalt-on-light cousin draws an inner
+       white polygon to force the interior; here the ground is
+       already dark so we let it show through, and the frame
+       collapses to a single hex with a hole, drawn via even-odd
+       fill of one path. Plus the C-shape on top in white. -->
+  <path fill="#FFFFFF" fill-rule="evenodd" d="M0,-100 L86.6,-50 L86.6,50 L0,100 L-86.6,50 L-86.6,-50 Z M0,-74.5 L64.5,-37.3 L64.5,37.3 L0,74.5 L-64.5,37.3 L-64.5,-37.3 Z"/>
+  <polygon fill="#FFFFFF" points="-0.2,-25.2 20.1,-13.5 43.7,-27.1 -0.2,-52.4 -45.6,-26.2 -45.6,26.2 -0.2,52.4 43.7,27.1 20.1,13.5 -0.2,25.2 -22,12.6 -22,-12.6"/>
+</svg>