ConductionNL · rubenvdlinde · Apr 23, 2026 · Apr 23, 2026 · Apr 23, 2026 · Apr 23, 2026
diff --git a/BRAND.md b/BRAND.md
diff --git a/DESIGN.md b/DESIGN.md
diff --git a/brand/README.md b/brand/README.md
@@ -0,0 +1,101 @@
+# Conduction Brand Tokens
+
+Machine-leesbare design tokens voor het `conduction-2026` thema. Voor merkwaardes, logo-gebruik en voorbeelden: zie [BRAND.md](../BRAND.md). Voor de rationale achter keuzes: zie [DESIGN.md](../DESIGN.md).
+
+## Bestanden
+
+- [`tokens.json`](./tokens.json) — alle tokens in [W3C DTCG-formaat](https://design-tokens.github.io/community-group/format/) (`$value` / `$type`)
+- [`assets/`](./assets/) — SVG-logo's (zie [BRAND.md](../BRAND.md) voor gebruik)
+
+## Scope
+
+**Ronde 1 (huidig):** kleuren + typografie.
+**Later:** spacing, radii, shadows, motion, componenttokens. Daar groeien we naartoe zodra apps er tegenaan lopen.
+
+## Structuur
+
+Twee lagen:
+
+1. **Primitieven** (`color.primitive.*`, `typography.primitive.*`) — ruwe waardes, naam beschrijft wát het is, niet waar het gebruikt wordt.
+2. **Thema** (`theme.conduction-2026.*`) — semantische tokens die verwijzen naar primitieven. Apps consumeren *alleen* deze laag.
+
+Dit betekent dat een app nooit direct `#21468B` of `color.primitive.blue.cobalt` gebruikt, maar altijd `theme.conduction-2026.color.brand.primary`. Als we de primary-kleur later willen tweaken, hoeft alleen de thema-mapping aangepast — niet elke app.
+
+## Gebruik
+
+### Als CSS custom properties
+
+Genereer met [Style Dictionary](https://amzn.github.io/style-dictionary/) of een vergelijkbare tool:
+
+```css
+:root {
+  --conduction-color-brand-primary:   #21468B;
+  --conduction-color-brand-secondary: #F36C21;
+  --conduction-color-brand-tertiary:  #AE1C28;
+  --conduction-color-background-default: #FFFFFF;
+  --conduction-color-text-default:    #21468B;
+
+  --conduction-typography-font-family-body: Figtree, system-ui, sans-serif;
+  --conduction-typography-font-family-code: 'IBM Plex Mono', ui-monospace, monospace;
+}
+```
+
+### Als Tailwind config
+
+```js
+// tailwind.config.js — uittreksel
+import tokens from '../.github/brand/tokens.json' assert { type: 'json' }
+
+export default {
+  theme: {
+    colors: {
+      brand: {
+        primary:   tokens.theme['conduction-2026'].color.brand.primary.$value,
+        secondary: tokens.theme['conduction-2026'].color.brand.secondary.$value,
+        tertiary:  tokens.theme['conduction-2026'].color.brand.tertiary.$value,
+      },
+    },
+    fontFamily: {
+      sans: tokens.theme['conduction-2026'].typography['font-family'].body.$value.split(','),
+      mono: tokens.theme['conduction-2026'].typography['font-family'].code.$value.split(','),
+    },
+  },
+}
+```
+
+### Als Vue / JS import
+
+```js
+import tokens from '../../.github/brand/tokens.json'
+const primary = tokens.theme['conduction-2026'].color.brand.primary.$value
+```
+
+## NL Design System alignment
+
+Conduction volgt NL Design System waar een equivalent token bestaat, en definieert een eigen token waar NLDS niets biedt. Onderstaande mapping is indicatief — zie [DESIGN.md](../DESIGN.md) voor de afwegingen.
+
+| Conduction token | NLDS equivalent | Opmerking |
+|---|---|---|
+| `theme.conduction-2026.color.brand.primary` | `--nl-color-primary` | Onze waarde (kobaltblauw) is strikt gelijk aan de Nederlandse vlag; NLDS utrecht-theme gebruikt andere tint. |
+| `theme.conduction-2026.color.brand.secondary` | — | NLDS heeft geen vaste accentkleur; Conduction kiest `#F36C21` (KNVB-oranje) om warm-toegankelijk Nederlands te signaleren zonder Rijkshuisstijl-associatie. |
+| `theme.conduction-2026.color.brand.tertiary` | — | Eigen token; vermiljoen is officiële NL-vlagkleur, NLDS definieert dit niet. |
+| `theme.conduction-2026.color.background.default` | `--nl-color-bg-default` | Gelijk (wit). |
+| `theme.conduction-2026.typography.font-family.body` | Theme-afhankelijk in NLDS | Conduction fixeert op Figtree. |
+
+## Fonts
+
+Beide fonts zijn OFL-licensed en gratis beschikbaar via Google Fonts:
+
+- **Figtree** — https://fonts.google.com/specimen/Figtree
+- **IBM Plex Mono** — https://fonts.google.com/specimen/IBM+Plex+Mono
+
+Aanbevolen gewichten om te laden: Figtree 400/500/600/700, IBM Plex Mono 400/500.
+
+## Hoe te bijdragen
+
+Tokens wijzigen raakt alle Conduction-apps. Volg [CONTRIBUTING.md](../CONTRIBUTING.md):
+
+1. Open issue met voorstel + rationale (waarom nieuwe/gewijzigde token nodig is)
+2. Feature-branch `feature/brand-<kort-onderwerp>` vanaf `main`
+3. Tokens aanpassen, [DESIGN.md](../DESIGN.md) updaten met de afweging
+4. PR naar `main` met screenshots/voorbeelden van het effect
diff --git a/brand/assets/avatar-conduction-on-blue.svg b/brand/assets/avatar-conduction-on-blue.svg
diff --git a/brand/assets/avatar-conduction-on-white.svg b/brand/assets/avatar-conduction-on-white.svg
diff --git a/brand/assets/avatar-conduction.svg b/brand/assets/avatar-conduction.svg
diff --git a/brand/tokens.json b/brand/tokens.json
@@ -0,0 +1,189 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "Conduction brand tokens (scope A: color + typography). Theme: conduction-2026. Aligned with NL Design System where tokens exist; own tokens where NLDS has no equivalent. See DESIGN.md for rationale.",
+
+  "color": {
+    "primitive": {
+      "blue": {
+        "cobalt": {
+          "$value": "#21468B",
+          "$type": "color",
+          "$description": "Kobaltblauw — officiële blauwtint van de Nederlandse vlag. Primary brand color voor theme-conduction-2026."
+        }
+      },
+      "orange": {
+        "knvb": {
+          "$value": "#F36C21",
+          "$type": "color",
+          "$description": "KNVB-oranje — warme, iets rood-leanende oranjetint. Secundaire steunkleur; herkenbaar Nederlands via associatie met het nationale elftal, zonder de Rijkshuisstijl-overheidslading."
+        }
+      },
+      "red": {
+        "vermillion": {
+          "$value": "#AE1C28",
+          "$type": "color",
+          "$description": "Helder vermiljoen — officiële rode vlagtint, gebruikt als accent en voor status/error."
+        }
+      },
+      "neutral": {
+        "white": {
+          "$value": "#FFFFFF",
+          "$type": "color",
+          "$description": "Wit — default achtergrond."
+        }
+      },
+      "nextcloud": {
+        "blue": {
+          "$value": "#0082C9",
+          "$type": "color",
+          "$description": "Nextcloud Blue — officiële primaire brand-color van Nextcloud (RGB 0,130,201 · HSL 201/100/39 · Pantone 285C). Gebruikt in ConNext-context: (a) op het 'Next'-deel van de ConNext-wordmark, (b) op de top-face van de Nextcloud-kernel-hex in de platform-overview-diagram, (c) bij brand-citation van 'Nextcloud' in copy en idiomatische 'next' waar het over Nextcloud-as-platform gaat."
+        },
+        "cyan": {
+          "$value": "#1CAFFF",
+          "$type": "color",
+          "$description": "Nextcloud Cyan — lichtere variant uit Nextcloud's officiële brand-gradient (#0082C9 → #1CAFFF, 45°). Gebruikt voor het lichte einde van de Nextcloud-gradient op de kernel-hex."
+        }
+      }
+    }
+  },
+
+  "gradient": {
+    "nextcloud": {
+      "$value": "linear-gradient(45deg, #0082C9, #1CAFFF)",
+      "$type": "gradient",
+      "$description": "Nextcloud's officiële brand-gradient (45°). Gebruikt voor de top-face van de Nextcloud-kernel-hex in onze platform-overview-diagram. Eerbiedigt Nextcloud's eigen brand-identity binnen onze ConNext-compositie."
+    }
+  },
+
+  "typography": {
+    "primitive": {
+      "font-family": {
+        "sans": {
+          "$value": "Figtree, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+          "$type": "fontFamily",
+          "$description": "Figtree — ronde, rustige, humanistische sans-serif. OFL via Google Fonts. Gebruikt voor body en headings."
+        },
+        "mono": {
+          "$value": "'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
+          "$type": "fontFamily",
+          "$description": "IBM Plex Mono — rustige monospace, warm in vorm. OFL. Gebruikt voor code en kbd."
+        }
+      },
+      "font-weight": {
+        "regular":  { "$value": 400, "$type": "fontWeight" },
+        "medium":   { "$value": 500, "$type": "fontWeight" },
+        "semibold": { "$value": 600, "$type": "fontWeight" },
+        "bold":     { "$value": 700, "$type": "fontWeight" }
+      },
+      "font-size": {
+        "xs":   { "$value": "12px", "$type": "dimension" },
+        "sm":   { "$value": "14px", "$type": "dimension" },
+        "base": { "$value": "16px", "$type": "dimension" },
+        "lg":   { "$value": "18px", "$type": "dimension" },
+        "xl":   { "$value": "20px", "$type": "dimension" },
+        "2xl":  { "$value": "24px", "$type": "dimension" },
+        "3xl":  { "$value": "32px", "$type": "dimension" },
+        "4xl":  { "$value": "40px", "$type": "dimension" },
+        "5xl":  { "$value": "48px", "$type": "dimension" }
+      },
+      "line-height": {
+        "tight":   { "$value": 1.2, "$type": "number", "$description": "Voor display/headings." },
+        "normal":  { "$value": 1.5, "$type": "number", "$description": "Voor body-tekst." },
+        "relaxed": { "$value": 1.75, "$type": "number", "$description": "Voor long-form content." }
+      }
+    }
+  },
+
+  "theme": {
+    "conduction-2026": {
+      "$description": "Het Conduction huisstijl-thema uit 2026. Gebaseerd op de officiële Nederlandse vlagkleuren en NL Design System primitives.",
+
+      "color": {
+        "brand": {
+          "primary":   { "$value": "{color.primitive.blue.cobalt}",     "$type": "color", "$description": "Primaire merkkleur — links, CTA's, focus, branding." },
+          "secondary": { "$value": "{color.primitive.orange.knvb}", "$type": "color", "$description": "Secundaire merkkleur — accenten, highlights, badges." },
+          "tertiary":  { "$value": "{color.primitive.red.vermillion}",  "$type": "color", "$description": "Tertiaire merkkleur — sparingly, voor attentie-accenten en error-state." },
+          "nextcloud": { "$value": "{color.primitive.nextcloud.blue}",  "$type": "color", "$description": "Nextcloud-blauw — voor het 'Next' deel van de ConNext-wordmark, voor brand-citation van 'Nextcloud' in copy, en voor de Nextcloud-kernel op platform-overview-diagrammen. Geen primaire Conduction-merkkleur, maar wel onmisbaar in elke ConNext-context." }
+        },
+        "background": {
+          "default": { "$value": "{color.primitive.neutral.white}",  "$type": "color", "$description": "Default achtergrond van pagina's en kaarten." },
+          "inverse": { "$value": "{color.primitive.blue.cobalt}",    "$type": "color", "$description": "Donkere achtergrond (hero, footer) met witte tekst erop." }
+        },
+        "text": {
+          "default": { "$value": "{color.primitive.blue.cobalt}",    "$type": "color", "$description": "Default tekstkleur op witte achtergrond. Contrast ≈ 9.2:1 (AAA)." },
+          "inverse": { "$value": "{color.primitive.neutral.white}",  "$type": "color", "$description": "Tekstkleur op kobalt achtergrond." },
+          "accent":  { "$value": "{color.primitive.orange.knvb}", "$type": "color", "$description": "Accent-tekst — spaarzaam, voor nadruk." }
+        },
+        "link": {
+          "default": { "$value": "{color.primitive.blue.cobalt}",     "$type": "color" },
+          "hover":   { "$value": "{color.primitive.orange.knvb}", "$type": "color" }
+        },
+        "status": {
+          "error": { "$value": "{color.primitive.red.vermillion}", "$type": "color" }
+        }
+      },
+
+      "typography": {
+        "font-family": {
+          "body":    { "$value": "{typography.primitive.font-family.sans}", "$type": "fontFamily" },
+          "heading": { "$value": "{typography.primitive.font-family.sans}", "$type": "fontFamily" },
+          "code":    { "$value": "{typography.primitive.font-family.mono}", "$type": "fontFamily" }
+        },
+        "body": {
+          "$value": {
+            "fontFamily":  "{typography.primitive.font-family.sans}",
+            "fontWeight":  "{typography.primitive.font-weight.regular}",
+            "fontSize":    "{typography.primitive.font-size.base}",
+            "lineHeight":  "{typography.primitive.line-height.normal}"
+          },
+          "$type": "typography"
+        },
+        "heading-1": {
+          "$value": {
+            "fontFamily":  "{typography.primitive.font-family.sans}",
+            "fontWeight":  "{typography.primitive.font-weight.bold}",
+            "fontSize":    "{typography.primitive.font-size.5xl}",
+            "lineHeight":  "{typography.primitive.line-height.tight}"
+          },
+          "$type": "typography"
+        },
+        "heading-2": {
+          "$value": {
+            "fontFamily":  "{typography.primitive.font-family.sans}",
+            "fontWeight":  "{typography.primitive.font-weight.bold}",
+            "fontSize":    "{typography.primitive.font-size.4xl}",
+            "lineHeight":  "{typography.primitive.line-height.tight}"
+          },
+          "$type": "typography"
+        },
+        "heading-3": {
+          "$value": {
+            "fontFamily":  "{typography.primitive.font-family.sans}",
+            "fontWeight":  "{typography.primitive.font-weight.semibold}",
+            "fontSize":    "{typography.primitive.font-size.3xl}",
+            "lineHeight":  "{typography.primitive.line-height.tight}"
+          },
+          "$type": "typography"
+        },
+        "heading-4": {
+          "$value": {
+            "fontFamily":  "{typography.primitive.font-family.sans}",
+            "fontWeight":  "{typography.primitive.font-weight.semibold}",
+            "fontSize":    "{typography.primitive.font-size.2xl}",
+            "lineHeight":  "{typography.primitive.line-height.tight}"
+          },
+          "$type": "typography"
+        },
+        "code": {
+          "$value": {
+            "fontFamily":  "{typography.primitive.font-family.mono}",
+            "fontWeight":  "{typography.primitive.font-weight.regular}",
+            "fontSize":    "{typography.primitive.font-size.sm}",
+            "lineHeight":  "{typography.primitive.line-height.normal}"
+          },
+          "$type": "typography"
+        }
+      }
+    }
+  }
+}
diff --git a/briefs/README.md b/briefs/README.md
@@ -0,0 +1,14 @@
+# Design Briefs
+
+Per-oppervlak ontwerp-briefs die bouwen op de company-wide merkfoundation in [../BRAND.md](../BRAND.md), [../DESIGN.md](../DESIGN.md) en [../brand/tokens.json](../brand/tokens.json).
+
+## Conventie
+
+- Elke brief beschrijft één concreet oppervlak (een website, een drukwerkstuk, een app-UI, een presentatie-template) in zijn geheel
+- Briefs linken naar de foundation, ze dupliceren haar niet
+- Company-wide inzichten die uit een brief-sessie komen worden terug-gelift naar BRAND.md of DESIGN.md; oppervlak-specifieke details blijven hier
+- Structuur per brief: doel, doelgroep, IA, pagina/stuk-types, content-model, tone, visuele richting, i18n, accessibility, success-metriek, out-of-scope, implementatie-aanpak
+
+## Huidige briefs
+
+- [website.md](./website.md) — www.conduction.nl, bilingual NL/EN, product-first (ecosystem van Nextcloud-apps)