diff --git a/BRAND.md b/BRAND.md new file mode 100644 index 0000000..bd8533b --- /dev/null +++ b/BRAND.md @@ -0,0 +1,332 @@ +# Conduction Brand Guide + +Dit document beschrijft de Conduction huisstijl: wie we zijn, hoe we eruitzien, en hoe je het merk consistent toepast over al onze apps, documentatie en communicatie. + +Voor de **rationale** achter onze keuzes: zie [DESIGN.md](./DESIGN.md). +Voor **machine-leesbare tokens**: zie [`brand/tokens.json`](./brand/tokens.json). + +--- + +## Wie we zijn + +Conduction is een **Nederlands open-source-productbedrijf**. We bouwen een ecosysteem van samenwerkende Nextcloud-apps. Onze identiteit leunt bewust op Nederlandse kernwaardes: + +- **Trots Nederlands.** We ontwerpen vanuit Nederlandse standaarden (NL Design System, Common Ground, API-principes) en dragen dat uit. +- **Innovatief.** We lopen voorop in open source, API-first architectuur, en federatieve datamodellen. +- **Handelsgedreven.** Pragmatisch, doelgericht, resultaatgericht. Oplossingen die werken, niet vertoningen. +- **Penny-wise.** Open source, hergebruik, zuinig met publieke middelen — dezelfde discipline die onze software kenmerkt. +- **Betrouwbaar.** Stabiel, transparant, voorspelbaar. De dieper-blauwe huisstijl onderstreept dat. + +## Wat we bouwen — een app-ecosysteem, geen consultancy + +Ons model verschuift. Historisch kwam ons werk voort uit *projecten, training en advies*: opdrachten waarin een klant ons inhuurde om iets te bouwen, implementeren of begeleiden. Dat bestaat nog, maar is niet meer waar Conduction om draait. + +**Conduction is een productbedrijf.** We bouwen een **ecosysteem van samenwerkende Nextcloud-apps** — OpenRegister, OpenCatalogi, OpenConnector, DocuDesk, MyDash, en meer. Onze klanten kunnen ons gebruiken **zonder ons te hoeven spreken**: ze downloaden de apps uit de Nextcloud app store, installeren, en zijn klaar. Dat is de kern van wat we nu zijn. Alle apps zijn en blijven **altijd gratis en open source** — geen Community/Enterprise-split, geen feature-gating, geen "Pro"-tier. + +We verdienen ons brood via twee ondersteunende lagen rondom het ecosysteem: + +- **Support** (technisch: een SLA-contract). Optionele zekerheid-laag bovenop de gratis software met twee componenten: helpdesk-ondersteuning (reactief) en proactieve begeleiding op basis van telemetry (wij zien problemen voordat de klant belt). Afgerekend *per app × per gebruiker × per jaar* met twee tiers (Standard en Premium). Klanten krijgen Support via twee paden — via hun eigen Nextcloud-leverancier (voor managed-Nextcloud-gebruikers, met één contract en één factuur), of rechtstreeks via een formulier in de admin-instellingen van de app zelf (voor self-managed Nextcloud). Support is *altijd optioneel* en blokkeert geen enkele feature. +- **Services.** Projectmatige activiteiten met gepubliceerde tarievenkaart: **development** (€125/uur), **consultancy** (€150/uur), **fysieke training** (€1.000–€1.200/dagdeel), **online training** (gratis), en **certificering** (prijs per certificaat). Optionele strippenkaart van €15.000 vooraf met 10% korting voor klanten met doorlopende behoefte. Voor klanten met een specifieke behoefte die méér vraagt dan zelfstandig installeren + doorlopende Support. + +Beide zijn **secundair**, niet leading. In klant-communicatie gebruiken we het woord **"Support"** in plaats van "SLA" — Support is toegankelijker en is wat klanten zoeken; SLA is de technische term voor het onderliggende contract. Alle merkcommunicatie (website, drukwerk, presentaties) leidt met de apps en het ecosysteem; Support en Services worden eerlijk en transparant uitgelegd waar relevant, maar nooit als verplichte funnel of upgrade-druk. + +## ConNext — onze publieke productbrand + +Per 2026-04-28 is **ConNext** onze publieke productbrand. Het is de naam waaronder klanten ons ecosysteem leren kennen, gebruiken en aanbevelen. + +### De relatie in één regel + +> **ConNext is a Conduction proposition for Nextcloud.** + +Drie merken in driehoeksverhouding: + +- **Conduction** — het Nederlandse open-source-productbedrijf dat ConNext bouwt. Juridische entiteit, contracten-partner voor Support, werkgever, contributor in OSS-communities. Blijft **zeer zichtbaar** op de site (footer, About-pagina, Support-contracten). +- **ConNext** — de **publieke productbrand** voor het hele Conduction-on-Nextcloud-ecosysteem. Het is **pure positionering** (geen aparte software-laag, geen nieuwe code) — de naam waaronder Conduction de bestaande Core-apps + Workplace Apps + AI + integraties als één samenhangend platform aan klanten presenteert. +- **Nextcloud** — het host-platform waarop ConNext draait. Geen Conduction-eigendom, wel essentieel: ConNext extends Nextcloud van *office suite* naar *workplace*. + +### Hernoeming van ConNext (intern → publiek) + +Tot voor kort was *"ConNext"* een **interne programmanaam** voor onze AI-pipeline (Specter + Hydra + Medusa). Per 2026-04-28 is dat traject hernoemd naar **RAD** (Rapid Application Development) en is *"ConNext"* vrijgemaakt als publieke productbrand. RAD blijft intern; ConNext gaat naar buiten. + +### Wat ConNext concreet betekent voor klanten + +ConNext = Conduction's bundel van open-source-componenten die Nextcloud doorontwikkelt van office suite naar workplace. Concreet bestaat ConNext uit **zes component-cards** rondom de Nextcloud-kernel: + +1. **Technical Core** — OpenRegister · OpenConnector · DocuDesk · NLDesign Theme · MyDash (5 fundationele capabilities: data, integratie, documenten, theming, dashboards) +2. **Workplace App** — OpenCatalogi · PipelinQ · Procest · ZaakAfhandelApp · DeciDesk · ShillinQ · LarpingApp · OpenWoo · SoftwareCatalog (9 user-facing apps voor concrete use cases) +3. **AI** — Automation · Agents · Intelligence (cross-cutting AI-capabilities) +4. **Integrated Apps** — OpenTalk · Matrix · n8n · OpenProject · XWiki · GitLab · Mattermost (third-party OSS-apps die ConNext via OpenConnector in jouw Nextcloud integreert) +5. **App Builder** *(Coming soon)* — UI waarmee klanten zelf (mini) Nextcloud-apps bouwen of bestaande ConNext-apps customizen. Empowerment-tagline: *"The client is always right — and now they have the tools to make it true."* +6. **Admin Tools** — App-versions · Crontab (gratis open-source admin-utilities, geen primair product) + +Volledige uitleg per component-card en alle apps: [`briefs/website/app-architecture.md`](./briefs/website/app-architecture.md). + +### ConNext-wordmark + +De wordmark is **pure typografie**: + +> **ConNext** + +- *Con* in cobalt `#21468B` (Conduction-primair) +- *Next* in Nextcloud-blauw `#0082C9` (Nextcloud-officieel) +- Geen icoon vóór de wordmark; de typografische kleurwissel doet het brand-werk + +In headers en op de homepage-hero: ConNext-wordmark prominent, met *"by Conduction"* subtitel klein eronder + Conduction-hexagon-avatar als kleine icoon links ernaast. Zo blijft Conduction zichtbaar en is de drie-merken-relatie meteen visueel duidelijk. + +### Domein + +ConNext leeft op **`connext.conduction.nl`** (subdomein van Conduction). De bestaande `www.conduction.nl` blijft als slim corporate site bestaan — wordt later vernieuwd met dezelfde Conduction-huisstijl die we nu via ConNext uitrollen. + +### Conduction-huisstijl is gedeeld + +Belangrijk: de visuele identiteit die we hier in BRAND.md beschrijven (cobalt + KNVB-oranje + vermiljoen + Figtree + IBM Plex Mono + hexagon-motief + Nextcloud-blauw) is de **Conduction-huisstijl** in algemene zin — **niet** ConNext-specifiek. ConNext is het eerste public-facing product dat deze huisstijl draagt; toekomstig vernieuwd www.conduction.nl-corporate krijgt diezelfde huisstijl. + +Eén huisstijl, twee submerken: + +- **ConNext-product-brand** — typografische wordmark (Con-cobalt + Next-Nextcloud-blue), gericht op klanten van het platform +- **Conduction-corporate-brand** — hexagon-avatar als bedrijfsmerk-mark, gericht op community/contributors/stakeholders + +Beide gebruiken hetzelfde palet, dezelfde typografie, hetzelfde hexagon-motief — alleen de wordmark/mark verschilt. + +## Voor wie we bouwen + +Onze doelgroep is in transitie: + +- **Primair: MKB.** Ons toekomstbeeld. Kleine en middelgrote organisaties die open-source-oplossingen willen gebruiken zonder dure integrator-trajecten. Directe taal, concreet resultaat, zelf installeren. +- **Secundair: Overheid.** Het merendeel van onze **huidige klanten** is nog overheid (gemeenten, samenwerkingsverbanden). We dragen ze niet weg — ze blijven welkom — maar ons zwaartepunt schuift. +- **Tertiair: Ontwikkelaars en integrators.** De open-source-community die bijdraagt aan onze apps, forks maakt, of ze integreert in eigen stacks. + +We zijn eerlijk over waar we staan: overheid *is* nog de meerderheid, MKB *is* het doel. De communicatie en het product laten die richting zien zonder de huidige klantenbasis te verloochenen. + +## Apps & Solutions — onze terminologie + +Dit onderscheid is geldig voor *alle* Conduction-communicatie (website, marketing, sales, documentatie, support), niet alleen voor de website: + +- **App** = een stuk software dat we bouwen en uitleveren. Concrete, installeerbare producten. Voorbeeld: *OpenCatalogi*, *OpenRegister*, *DocuDesk*. +- **Solution** = wat een klant ermee kan bereiken. Een oplossing voor een concreet probleem. Voorbeeld: *WOO-compliance*, *organisatieregister*, *zaakafhandeling*. + +De relatie tussen beide: + +- Eén **app** kan aan meerdere **solutions** bijdragen (OpenCatalogi is relevant voor WOO-compliance én voor softwarecatalogi) +- Eén **solution** vraagt vaak meerdere **apps** (WOO-compliance combineert OpenCatalogi + OpenConnector + DocuDesk) +- We communiceren vanuit beide kanten: apps voor wie weet welk product hij zoekt; solutions voor wie een probleem heeft en de weg naar de juiste app-stack nodig heeft + +Consequentie voor taalgebruik: vermijd zinsconstructies als *"onze WOO-app"* (er is geen WOO-app, WOO is een solution die meerdere apps vraagt). Zeg in plaats daarvan *"onze WOO-solution, gebouwd op OpenCatalogi en OpenConnector"*. + +--- + +## Logo + +### Het Conduction avatar + +Het Conduction-avatar bestaat uit een **dubbele zeshoek** (hexagon-in-hexagon) met daarin een C-vorm. De buitenste zeshoek is het omkapsel dat ook om applicatielogo's komt — dit patroon is herkenbaar en terugkerend door ons hele merk. + +| Versie | Gebruik | Bestand | +|---|---|---| +| **Kobalt op wit** (default) | Op lichte achtergronden, in documenten, op de website | [`brand/assets/avatar-conduction-on-white.svg`](./brand/assets/avatar-conduction-on-white.svg) | +| **Wit op kobalt** (inverse) | Op donkere achtergronden, hero-secties, social avatars | [`brand/assets/avatar-conduction-on-blue.svg`](./brand/assets/avatar-conduction-on-blue.svg) | +| **Transparant** (flexibel) | Generiek gebruik met eigen achtergrond | [`brand/assets/avatar-conduction.svg`](./brand/assets/avatar-conduction.svg) | + +### Applicatielogo's: de hexagon-wrapper + +Applicaties (OpenRegister, OpenCatalogi, OpenConnector, DocuDesk, …) krijgen hun eigen iconografie **binnen** de kenmerkende zeshoek-wrapper. Zo blijft het Conduction-merk zichtbaar zonder dat app-identiteiten in elkaar overlopen. + +Richtlijnen: +- De wrapper is altijd een zeshoek, **altijd pointy-top** (punt naar boven). Geen flat-top-varianten in onze huisstijl. +- App-icon mag in de primary-brand-kleur, tertiary-brand-kleur of wit — nooit in oranje (oranje is accent, geen kernkleur). +- Minimale grootte: 32×32px. Kleiner wordt de zeshoek onleesbaar. + +### Do's + +- ✅ Gebruik SVG waar mogelijk — schaalt altijd scherp +- ✅ Respecteer minimaal 1/4 van de hoogte als witruimte rondom het avatar +- ✅ Gebruik altijd de officiële kleuren (`#21468B`, `#FFFFFF`) + +### Don'ts + +- ❌ Geen andere tinten blauw toepassen op het logo +- ❌ Niet roteren, schuintrekken of outlinen +- ❌ Niet op drukke fotografische achtergronden plaatsen zonder witte/blauwe fond +- ❌ De zeshoek-wrapper niet vervangen door een andere vorm + +--- + +## Kleurpalet + +Onze primaire kleuren zijn gebaseerd op de **officiële Nederlandse vlagkleuren**. Daarnaast hebben we Nextcloud-blauw als brand-kleur voor alle ConNext-context (zie hieronder). + +| Rol | Naam | Hex | RGB | Gebruik | +|---|---|---|---|---| +| **Primary** | Kobaltblauw | `#21468B` | 33, 70, 139 | Merk, links, CTA's, koppen | +| **Secondary** | KNVB-oranje | `#F36C21` | 243, 108, 33 | Accenten, highlights, hover — spaarzaam | +| **Tertiary** | Helder vermiljoen | `#AE1C28` | 173, 28, 40 | Zeer spaarzaam — attentie, error-state | +| **Background** | Wit | `#FFFFFF` | 255, 255, 255 | Default achtergrond | +| **Nextcloud Blue** | Nextcloud-blauw | `#0082C9` | 0, 130, 201 | "Next" in ConNext-wordmark · brand-citation van "Nextcloud" in copy · idiomatische "next" waar het over Nextcloud-as-platform gaat · top-face van de Nextcloud-kernel-hex op platform-overview-diagrammen | +| **Nextcloud Cyan** | Nextcloud-cyan | `#1CAFFF` | 28, 175, 255 | Lichter einde van Nextcloud's officiële brand-gradient (`#0082C9 → #1CAFFF`, 45°). Alleen samen met Nextcloud-blauw als gradient-tint, niet als losse brand-kleur | + +### Waarom deze kleuren? + +- **Kobaltblauw** is officieel de blauwtint van de Nederlandse vlag. Donkerder dan onze oude lichtblauw, straalt betrouwbaarheid en stabiliteit uit. **Onze primaire merkkleur.** +- **KNVB-oranje** is het meest universeel herkenbare "Nederlands oranje" — het oranje van het nationale elftal. Warm, toegankelijk, emotioneel geladen. Expliciet *niet* het Rijkshuisstijl-oranje (`#E17000`), en ook niet de letterlijke wimpel-tint (`#FF7F00`): de KNVB-variant pairt zachter met cobalt en signaleert "Nederlands maar niet overheid, trots maar niet stoffig". +- **Vermiljoen** is de officiële rode vlagkleur. Spaarzaam in te zetten voor attentie en error-states. +- **Nextcloud-blauw** is geen Conduction-kleur — het is de **officiële brand-kleur van Nextcloud**, opgenomen in onze huisstijl voor specifieke contextuele inzet. Wij claimen het niet, we citeren het. Net zoals andere merken gerespecteerd worden in hun eigen brand-context. + +Zie [DESIGN.md](./DESIGN.md#waarom-knvb-oranje-f36c21-als-secundair) voor de volledige afweging, inclusief vergelijking met Rabobank, ING en Rijkshuisstijl. + +### "Next" in Nextcloud-blauw — markup-conventie + +Drie plekken in copy waar **Nextcloud-blauw `#0082C9`** wordt toegepast op tekst (niet op visuele elementen): + +| Toepassing | Voorbeeld | Markup | +|---|---|---| +| **ConNext-wordmark** — "Next" deel altijd Nextcloud-blauw | ConNext | Twee ``'s met respectievelijk Conduction-cobalt en Nextcloud-blauw kleur | +| **Brand-citation van "Nextcloud"** — elke voorkomen in copy | "ConNext extends [Nextcloud]{.next-blue} into a workspace" | `Nextcloud` | +| **Idiomatische "next"** — wanneer het direct over Nextcloud-as-platform of ConNext-connectiviteit gaat | "Take Nextcloud to the [next]{.next-blue} level" | `next` (handmatig per redactioneel oordeel) | + +**Niet** toepassen op: +- Generieke "next" in functionele context (*"next page"*, *"next year"*, *"next step"*) — dat is gewone Nederlandse/Engelse tekst, niet brand-citation +- Andere woorden die toevallig "next" bevatten (*"Annexed"*, *"Index"*) — letter-strings tellen niet, alleen losstaande woorden +- Body-tekst-decoratie zonder brand-betekenis — Nextcloud-blauw moet bewust en betekenisvol blijven + +Zie [DESIGN.md §Nextcloud-blauw als secundaire brand-kleur](./DESIGN.md) voor de full rationale en visuele voorbeelden. + +### Wat oranje betekent voor Conduction + +KNVB-oranje is onze **accent**-kleur, niet onze hoofdkleur. Het staat symbool voor: + +- **Warmte en toegankelijkheid** — we zijn een bedrijf van mensen, niet een monolithisch instituut +- **Nederlandse identiteit op mass-appeal niveau** — iedereen herkent "Oranje" (elftal, Koningsdag, Oranjegekte), zonder overheidsverwijzing +- **Pragmatisch optimisme** — energie, actie, "we bouwen dingen die werken" +- **Focus** — in UI trekt oranje het oog naar één ding tegelijk + +Oranje is daarmee het tegengewicht van cobalt: cobalt draagt structuur en vertrouwen, oranje draagt beweging en menselijkheid. + +### Proportie + +Richtlijn voor balans in vlakverdeling: + +- **70%** wit (achtergrond, ademruimte) +- **20%** kobaltblauw (merk, structuur, tekst) +- **8%** oranje (accent, hover, highlight) +- **2%** vermiljoen (uiterst spaarzaam) + +Oranje en vermiljoen zijn **krachtige** kleuren — gebruik ze als bijspeler, niet als hoofdrolspeler. + +### Subtiel gebruik van oranje — concreet + +Oranje werkt wanneer het **één ding** accentueert. Plaatsen waar het goed past: + +- **Focus rings** rond formulier-inputs en buttons +- **Hover states** voor links en interactieve elementen (link default = cobalt, hover = oranje) +- **Badges** voor "nieuw", "beta", "featured" (max. één per scherm) +- **Iconografie-accenten** — een icoon in cobalt met één oranje detail, niet een volledig oranje icoon +- **Onderstrepingen** of markers bij headings van de kern-boodschap (één per pagina) +- **Call-to-action-randjes** — primary button blijft cobalt met witte tekst; oranje kan als border, shadow of micro-accent +- **Illustraties** — als highlight-kleur binnen een cobalt-dominant illustratiestijl +- **Grafiek-hoogtepunten** — één datapunt of lijn in oranje, rest in cobalt-tinten + +Plaatsen waar oranje **niet** werkt: + +- Grote vlakken (hero-achtergrond, sidebar-fill, card-background) +- Primary fill van een knop (oranje op wit kan druk ogen; gebruik cobalt-fill met wit) +- Body-tekst (te weinig contrast op wit) +- Meer dan één accent per scherm (oranje werkt door spaarzaamheid; twee oranje elementen concurreren) + +### Do's + +- ✅ Gebruik cobalt voor structuur en primaire acties +- ✅ Gebruik oranje voor attentie zonder alarm (hover, nieuwe badge, focus ring) +- ✅ Gebruik vermiljoen alléén voor echte attentie (error, destructieve actie) +- ✅ Max. één oranje accent per scherm — spaarzaamheid is de bron van zijn kracht + +### Don'ts + +- ❌ Meng oranje en rood nooit in hetzelfde oppervlak +- ❌ Gebruik geen oranje voor grote vlakken (hero-achtergrond, sidebar) +- ❌ Maak geen primary buttons met oranje fill — dat behoort cobalt toe +- ❌ Introduceer geen nieuwe tinten blauw — alles gaat via `theme.conduction-2026.color.brand.primary` + +--- + +## Typografie + +### Lettertypes + +| Rol | Font | Licentie | Bron | +|---|---|---|---| +| **Body + headings** | Figtree | SIL Open Font License (OFL) | [Google Fonts](https://fonts.google.com/specimen/Figtree) | +| **Code + monospace** | IBM Plex Mono | SIL Open Font License (OFL) | [Google Fonts](https://fonts.google.com/specimen/IBM+Plex+Mono) | + +### Karakter + +**Figtree** is een ronde, rustige, humanistische sans-serif. Warmer dan Inter, professioneler dan Nunito, moderner dan Source Sans. Past bij onze "trots Nederlands, handelsgedreven" identiteit. + +**IBM Plex Mono** is een rustige monospace met iets warme vormen — harmonieus naast Figtree, zonder scherp technisch randje. + +### Fallback stack + +Als de webfont niet laadt, vallen we terug op systeemfonts — geen Times New Roman, nooit: + +``` +Figtree, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif +'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace +``` + +### Schaal + +Zie [`brand/tokens.json`](./brand/tokens.json) voor de exacte waardes. Ramp: 12 / 14 / 16 / 18 / 20 / 24 / 32 / 40 / 48 px. Gewichten: 400 (regular), 500 (medium), 600 (semibold), 700 (bold). + +### Do's + +- ✅ Headings in 600/700, body in 400 +- ✅ Line-height 1.5 voor body, 1.2 voor koppen +- ✅ Laad alleen de gewichten die je daadwerkelijk gebruikt (400, 500, 600, 700 voor Figtree) + +### Don'ts + +- ❌ Gebruik geen andere fonts naast Figtree en IBM Plex Mono +- ❌ Geen italics voor nadruk — gebruik gewicht of kleur +- ❌ Geen letterspacing < -0.02em of > 0.05em + +--- + +## Toepassing + +### Web-apps + +Apps consumeren het thema via de semantische token-laag, niet via hardcoded hex-waardes. + +```css +.button-primary { + background: var(--conduction-color-brand-primary); + color: var(--conduction-color-text-inverse); + font-family: var(--conduction-typography-font-family-body); +} +``` + +### Nextcloud-integraties + +Conduction-apps die binnen Nextcloud draaien respecteren waar mogelijk het Nextcloud-thema, maar eigen app-chrome (icon-strip, modals, hero's) gebruikt de Conduction-tokens. Zie per app de NL Design-integratie. + +### Documentatie + +De Docusaurus-website in [`website/`](./website/) wordt in een vervolg-PR gemigreerd naar het `conduction-2026` thema. + +### Presentaties en offertes + +- Default template: witte achtergrond, kobaltblauwe koppen, oranje voor 1 accent per slide +- Nooit meer dan 2 accentkleuren op dezelfde slide +- Het avatar altijd in de bovenhoek — links of rechts, consistent binnen het document + +--- + +## Voor bijdragers + +Wijzigingen aan het merk raken alle Conduction-apps. Volg: + +1. Open een issue met voorstel + rationale +2. Feature-branch `feature/brand-` vanaf `main` +3. Update bij wijzigingen in kleur/typografie altijd tegelijk: [`brand/tokens.json`](./brand/tokens.json), dit bestand, en [`DESIGN.md`](./DESIGN.md) +4. PR naar `main` met voorbeelden (screenshots) van het effect + +Zie [CONTRIBUTING.md](./CONTRIBUTING.md) voor de algemene bijdrage-flow. diff --git a/DESIGN.md b/DESIGN.md new file mode 100644 index 0000000..961cbb5 --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,454 @@ +# Conduction Design Rationale + +Dit document legt vast **waarom** we de ontwerpkeuzes hebben gemaakt die in [BRAND.md](./BRAND.md) staan en in [`brand/tokens.json`](./brand/tokens.json) zijn vastgelegd. BRAND.md is het "wat" en "hoe"; dit is het "waarom". + +> **Thema:** `theme-conduction-2026` +> **Status:** Scope A (kleur + typografie). Spacing, radii, shadows, motion en componenttokens volgen in latere ronden. +> **Transitie:** Harde switch. Apps stappen over; er is geen parallel legacy-thema. + +--- + +## Uitgangspunt: een Conduction-thema, dat toevallig op NLDS leunt + +We kiezen voor een **Conduction-eigen naamruimte** (`theme.conduction-2026.*`) boven directe NL Design System-namespaces. Redenen: + +1. **Conduction is geen overheid.** Onze apps worden gebruikt door overheden, maar we zijn een bedrijf met een eigen identiteit. Die moet herkenbaar blijven. +2. **Vrijheid waar nodig.** NLDS is sterk op gemeentelijke/rijks-design, maar heeft geen sluitende tokens voor alle use-cases van een productbedrijf (bv. een accentkleur die bewust afwijkt van de Rijkshuisstijl). +3. **Interop waar mogelijk.** Voor overlappende tokens volgen we NLDS conventies en waardes, zodat NLDS-componenten drop-in werken in Conduction-apps. Zie mapping in [`brand/README.md`](./brand/README.md). + +**Concreet:** een NLDS-knop die `--nl-color-primary` verwacht krijgt die via een mapping-laag in elke app (of de primary is direct gelijk aan NLDS-primary bij de apps die dat volgen). + +--- + +## Kleuren + +### Waarom kobaltblauw `#21468B`? + +Onze oude merkkleur was een lichter, frisser blauw (`#4376FC`-achtig, zie [de legacy avatar](./brand/assets/avatar-conduction-on-white.svg) vóór de recolor). Dat straalde "tech / modern" uit, maar te weinig **gewicht**. Een productbedrijf dat met overheden werkt, moet vertrouwen uitstralen. + +Kobaltblauw `#21468B`: + +- **Is officieel de blauwtint van de Nederlandse vlag.** Dat past bij onze positionering: een trots Nederlands open-source-bedrijf. +- **Is donker.** Donkerdere blauwen worden als betrouwbaarder, stabieler, serieuzer ervaren — precies wat we willen uitdragen. +- **Heeft uitstekend contrast** op wit (≈ 9.05:1, WCAG AAA). We kunnen cobalt dus óók voor body-tekst gebruiken, wat het merk consistenter maakt. + +We hebben vijf blauwtinten tegen elkaar afgezet voor we kobalt kozen: + +| Eigenschap | Legacy `#4376FC` | **Kobalt `#21468B`** (gekozen) | NLDS utrecht `#154273` | Rijks-lint `#01689B` | Midnight `#0C2D48` | +|---|---|---|---|---|---| +| Hue | 223° | 219° | 211° | 200° | 207° | +| Saturatie | 97% | 62% | 69% | 99% | 71% | +| Luminantie (HSL L) | 63% | 34% | 27% | 31% | 17% | +| Contrast op wit | 3.99:1 | **9.05:1** | 10.19:1 | 6.07:1 | 14.19:1 | +| Body-tekst bruikbaar? | Nee (fails AA) | Ja (AAA) | Ja (AAA) | Marginaal (AA, niet AAA) | Ja (AAA) | +| Culturele verwijzing | Generieke "cloud/SaaS" | Nederlandse vlag | NLDS / Gemeente Utrecht | Rijksoverheid-identiteit | Klassiek banking/corporate | +| Reden | Onze legacy-kleur — te licht, te "tech", te weinig gewicht | **Gekozen**: vlag-referentie + donker genoeg voor body-tekst | Mooi maar geen vlag-associatie; NLDS-signaal zonder Nederlandse symboliek | Sterk overheid-signaal — verwarrend voor ons als bedrijf | Te donker; verliest kleuridentiteit en begint op zwart te lijken | + +**Waarom kobalt wint:** + +1. **Enige kandidaat met directe vlag-associatie.** `#21468B` is letterlijk de blauwtint van de Nederlandse vlag. Dat is geen coïncidentie die we kunnen claimen met NLDS utrecht of een bancair navy. +2. **Juiste donkerheids­niveau.** Licht genoeg om blauw te blijven (L=34% vs navy L=17-20%), donker genoeg om betrouwbaar te voelen en body-tekst-contrast te halen. +3. **Niet bancair, niet overheid.** Zit in een gat tussen bank-navy's (`#000066`, L=20%) en Rijks-blauwen (`#154273`/`#01689B`). Dat gat past ons: Nederlands, zakelijk, maar geen bank en geen dienst. + +### Waarom KNVB-oranje `#F36C21` als secundair? + +We hebben drie oranjetinten tegen elkaar afgezet: + +| Eigenschap | Wimpel `#FF7F00` | Rijkshuisstijl `#E17000` | **KNVB `#F36C21`** (gekozen) | +|---|---|---|---| +| Hue | 30° (puur oranje) | 30° (puur oranje) | 22° (licht rood-leanend) | +| Saturatie | 100% | 100% | 90% | +| Luminantie (HSL L) | 50% | 44% | 54% | +| WCAG-contrast op cobalt | 3.58:1 | 2.82:1 (faalt 3:1) | 3.01:1 (net haalbaar) | +| Pairing met cobalt | Letterlijk complement — kan "buzzen" | Te donker, te weinig pop tegen cobalt | Zachter, iets warmer, minder vibratie | +| Signaal | Officieel, institutioneel, "vlag-poster" | Overheid, formeel, bureaucratisch | Warm, mass-appeal, "Oranjegekte" | +| Culturele lading | Staatsaangelegenheden, ceremonieel | Rijksoverheid-merk | Nationale elftal, toegankelijke patriottisme | +| Positionerings-risico | Gering | **Hoog** — verwarring met overheidsmerk | Laag — elftal is bedrijfsneutraal | + +**Rijkshuisstijl-oranje faalt op drie fronten tegelijk:** +- Slechtste contrast op cobalt (2.82:1, onder de WCAG 3:1-drempel voor UI-accents) +- Hoogste positionerings-risico (direct overheidssignaal voor een bedrijf dat bewust *niet* als overheid wil ogen) +- Donkerste luminantie van de drie, "zinkt" visueel weg tegen cobalt in plaats van eruit te springen + +Tussen wimpel en KNVB gaat het niet meer om uitsluiting maar om karakter en harmonie. KNVB wint op drie fronten: + +1. **Zachtere harmonie met cobalt.** De lichte rood-lean en iets lagere saturatie geven een volwassener, minder hard-contrasterende pairing. Minder "posterkleur", meer "professioneel bedrijf met Nederlandse identiteit". +2. **Emotionele resonantie zonder Rijks-associatie.** KNVB-oranje is het meest universeel herkenbare "Nederlands oranje" — toegankelijker dan wimpel — maar zonder de overheidslading van rijksoranje. +3. **Past bij "innovatief / handelsgedreven / menselijk".** Wimpel leunt naar formeel; KNVB leunt naar energiek-toegankelijk. De briefing vraagt om het tweede. + +Prijs die we betalen: ~0.57 contrast-punten minder op cobalt (3.01 vs 3.58). Voor icoon- en accent-gebruik is 3:1 voldoende (WCAG AA voor non-text). Voor grotere oranje elementen waarin leesbaarheid ertoe doet, gebruiken we oranje *op wit* (contrast 4.96:1, AAA voor grote tekst), niet *op cobalt*. + +### Wat oranje betekent voor Conduction + +KNVB-oranje is onze **accent**-kleur, niet onze hoofdkleur. Semantisch staat het voor: + +- **Warmte en toegankelijkheid** — we zijn een bedrijf van mensen, niet een monolithisch instituut +- **Nederlandse identiteit op mass-appeal niveau** — "Oranje" (elftal, Koningsdag, Oranjegekte) herkent iedereen, zonder overheidsverwijzing +- **Pragmatisch optimisme** — energie, actie, "we bouwen dingen die werken" +- **Aandacht-focus** — in UI trekt oranje het oog naar één ding tegelijk + +Oranje is daarmee het **tegengewicht** van cobalt: cobalt draagt structuur en vertrouwen, oranje draagt beweging en menselijkheid. Samen zeggen ze: *stabiel én benaderbaar*. + +### Subtiel gebruik: de 8%-regel + +Proportioneel houden we oranje op **maximaal ~8%** van een gegeven oppervlak. Dat is geen toevallige grens — het is de hoeveelheid waarbij accentkleur als accent ervaren wordt en niet als secondary brand-kleur. Boven de 10% begint oranje te concurreren met cobalt en verliest het zijn attention-werking. + +Concrete plaatsen waar oranje werkt (zie [BRAND.md](./BRAND.md#subtiel-gebruik-van-oranje--concreet) voor de volledige lijst): + +- Focus rings, hover states, "nieuw"-badges +- Één datapunt in een grafiek, één icoon-detail, één highlight-woord +- Randen, schaduwen, micro-accenten op cobalt-dominante elementen +- Illustratie-highlights binnen een cobalt-palet + +Waar oranje uitdrukkelijk **niet** werkt: + +- Grote vlakken (hero-backgrounds, sidebar-fills, card-backgrounds) +- Primary button fill (dat is cobalt-gebied) +- Body-tekst op wit (wel voldoende contrast, maar te druk) +- Meer dan één accent per scherm + +### Waarom vermiljoen `#AE1C28` als tertiair? + +Helder vermiljoen is de officiële rode vlagkleur. We nemen het op omdat: + +- Het compleet maakt wat Nederland is: rood-wit-blauw +- Het een natuurlijke kandidaat is voor error-states en destructieve acties +- Een apart rood voor status los houden van branding voorkomt inconsistentie (anders krijg je "Tailwind red-500" in de ene app en "Bootstrap danger" in de andere) + +Vermiljoen is **nog spaarzamer** dan oranje (~2%). Overmatig rood voelt alarmerend. + +### Nextcloud-blauw `#0082C9` als secundaire brand-kleur (voor ConNext-context) + +Per 2026-04-28 voegen we **Nextcloud-blauw** toe aan onze huisstijl als kleur die specifiek wordt gebruikt in **ConNext-context**. Dit is een uitbreiding op het Conduction-vlagkleur-palet, niet een vervanging. + +**Waarom Nextcloud-blauw opnemen:** + +ConNext is een Conduction-propositie *voor Nextcloud*. Het hele product-narratief hangt op de connectiviteit tussen Conduction (cobalt) en Nextcloud (Nextcloud-blauw). Door Nextcloud's eigen brand-kleur op te nemen — niet te claimen, maar te citeren — eerbiedigen we hun merk en maken we de partnerrelatie visueel zichtbaar. Het is een design-equivalent van *"powered by Nextcloud"*: wij blijven Conduction in vorm en kleur, maar erkennen Nextcloud waar dat hoort. + +**De officiële waardes** (vastgelegd via `nextcloud.com/brand`): + +| Token | Hex | RGB | HSL | Pantone | +|---|---|---|---|---| +| Nextcloud Blue (primair) | `#0082C9` | 0, 130, 201 | 201° / 100% / 39% | 285C | +| Nextcloud Cyan (gradient-eind) | `#1CAFFF` | 28, 175, 255 | 201° / 100% / 55% | — | +| Nextcloud Gradient | `linear-gradient(45deg, #0082C9, #1CAFFF)` | — | — | — | + +**Drie strikte gebruiksregels:** + +1. **In de ConNext-wordmark** — *"Next"* altijd in `#0082C9`, *"Con"* altijd in cobalt `#21468B`. Dat creëert de typografische rijm die de Conduction-Nextcloud-relatie zichtbaar maakt zonder een woord uit te leggen. +2. **In tekst** — toegepast als markup-conventie op: + - elke voorkomen van het brand-woord *"Nextcloud"* (consistent brand-citation) + - idiomatische *"next"* waar het direct gaat over Nextcloud-as-platform of over ConNext-connectiviteit (*"take Nextcloud to the next level"* — beide woorden krijgen blauw) + - Niet toegepast op generieke *"next"* zonder brand-betekenis (*"next page"*, *"next year"*) of op letterstrings binnen andere woorden (*"index"*, *"annexed"*) +3. **Op platform-overview-diagrammen** — de Nextcloud-kernel-hex gebruikt Nextcloud's officiële gradient (`#0082C9 → #1CAFFF`, 45°) op de top-face. De omliggende component-cards gebruiken cobalt-tinten (Conduction-context). Compositie codeert: *"Nextcloud is de kernel, Conduction is wat eromheen zit."* + +**Niet toepassen op:** + +- Conduction-corporate communicatie waar Nextcloud niet betrokken is (CV's, contracten, NL Design System co-werk-presentaties zonder ConNext-context) +- UI-componenten op apps die niet specifiek Nextcloud-gerelateerd zijn (buttons, links, etc. — die blijven cobalt) +- Decoratief — Nextcloud-blauw moet bewust en betekenisvol blijven; willekeurige plaatsing watert de symboliek uit + +**Verschil met cobalt:** cobalt `#21468B` is *onze* hoofdkleur (alle UI, alle copy, alle merken), Nextcloud-blauw `#0082C9` is een *gast-kleur* die we citeren in specifieke ConNext-context. Cobalt blijft 70%+ van de zichtbare brand-kleur; Nextcloud-blauw verschijnt op gerichte plekken (~5% van zichtbare kleur, alleen waar het symbolisch hoort). + +Volledige catalogus van toepassingen plus markup-voorbeelden: zie [BRAND.md §"Next" in Nextcloud-blauw — markup-conventie](./BRAND.md#next-in-nextcloud-blauw--markup-conventie). + +### Waarom geen neutrale grijzen in scope A? + +Scope A is bewust minimaal. Voor body-tekst gebruiken we kobalt op wit (contrast is ruim voldoende). Voor muted/secondary tekst, borders, subtle backgrounds hebben we grijzen nodig — dat komt in **scope B**. Voor nu kunnen apps tijdelijk hun eigen neutrale grijs gebruiken; we standaardiseren dat zodra meerdere apps ermee werken. + +### Positie tegenover andere Nederlandse merken + +Cobalt + KNVB-oranje is geen onontgonnen terrein. Meerdere Nederlandse merken combineren donkerblauw met een oranje-accent — banken, overheid, sport. De vraag is niet óf we in dit register opereren, maar of onze specifieke pairing voldoende **onderscheidend** is van hen. + +| Identiteit | Blauw | Oranje | Karakter | Onderscheid t.o.v. Conduction 2026 | +|---|---|---|---|---| +| **Conduction 2026** (voorstel) | `#21468B` kobalt (L=34%) | `#F36C21` KNVB (H=22°, L=54%) | Warm-professioneel, Nederlands-toegankelijk | — | +| **Rabobank** | `#000066` donker navy (L=20%) | `#FF6600` (H=24°) | Conservatief, bancair, traditioneel | Rabo's navy is ~14 L-punten donkerder dan cobalt (bijna zwart-blauw); hun oranje is feller en puurder. Bank-feel, niet product-feel. | +| **ING** | `#000066` donker navy (L=20%) | `#FF6200` (H=23°) | Modern bancair, fintech | Vrijwel identiek blauw aan Rabobank; iets roodder oranje. Beiden zitten in het donkere bank-register, wij niet. | +| **Rijkshuisstijl** | `#154273` rijksblauw (L=27%) | `#E17000` rijksoranje (L=44%) | Formeel, overheid, institutioneel | Blauw iets donkerder dan cobalt én zonder vlag-referentie; oranje duidelijk donkerder en bruiner. Overheidsassociatie bewust uitgesloten. | +| **KNVB / Oranje-elftal** | `#19284B` navy (L=20%) | `#F36C21` KNVB | Sport, nationale trots | Identiek oranje — dat is geen ongeluk maar een associatie-keuze. Hun blauw is donkerder; ons blauw is herkenbaar vlag-cobalt. | +| **Nederlandse vlag (officieel)** | `#21468B` kobalt | *(geen oranje; rood `#AE1C28`)* | Staatsembleem | Exact hetzelfde blauw; oranje is voor ons secundair, niet vlag-onderdeel. | + +**Wat deze tabel laat zien:** + +- **Banken claimen het donkerste register.** Rabobank en ING delen praktisch hetzelfde `#000066`-navy — extreem donker, bijna zwart. Onze cobalt (L=34%) zit ~14 L-punten lichter. Dat is een ander visueel register: "daglicht / vlag" versus "bank-corporate". +- **Rijkshuisstijl zit tussenin qua blauw**, maar onderscheidt zich met een donkerder, bruiner oranje. Wij vermijden hun oranje bewust om overheidverwarring uit te sluiten. +- **KNVB gebruikt ons exacte oranje**, maar combineert het met veel donkerder navy. Het elftal-merk "leent" niet ons palet — wij lenen hun oranje, bewust, om toegankelijke Nederlandse warmte te signaleren zonder overheidsverwijzing. +- **Onze positie ligt in een "gat"** tussen bank-navy (te donker, te corporate) en Rijks (te bruin, te institutioneel). Dat gat is precies waar een Nederlands open-source-productbedrijf thuishoort: helder genoeg om niet corporate te ogen, donker genoeg om betrouwbaar te zijn, en warmer dan overheid. + +**Risico: verwarring via associatie, niet via identieke waardes.** Geen enkel merk hier heeft *exact* ons paar (cobalt + KNVB-oranje). Maar als een bezoeker snel langs komt, kan de combinatie aan Rabobank, ING of "iets van de overheid" doen denken. Onze onderscheiding moet daarom niet alleen uit kleur komen maar ook uit **proportie en toepassing**: de 8%-regel voor oranje, de zeshoek-wrapper, Figtree-typografie, en de witte-dominantie. Dat samen maakt ons kenbaar, niet de hex-waardes alleen. + +--- + +## Typografie + +### Waarom Figtree? + +Briefing: **voller, ronder, rustiger, professioneler** dan de huidige typografie (die "te hard" aanvoelt). + +Kandidaten vergeleken: + +| Font | Vol/rond | Rustig | Professioneel | Oordeel | +|---|---|---|---|---| +| DM Sans | ✅✅ | ✅✅ | ✅ | Zeer goede optie — iets neutraler | +| Figtree | ✅✅ | ✅✅ | ✅✅ | **Gekozen** — warmte + professionaliteit | +| Manrope | ✅ | ✅ | ✅✅ | Koeler, tech-signaal sterker | +| Fira Sans | ✅ | ✅ | ✅✅ | Humanist maar scherper | +| Public Sans | — | ✅ | ✅✅ | Neutraal, mist karakter | +| Nunito | ✅✅ | ✅✅ | — | Te speels voor B2B/gov | + +Figtree won omdat het: + +- **Ronde contraformen** heeft (zacht, vriendelijk) zonder speels te worden +- **Hoge x-height** heeft (goed leesbaar op schermen) +- **Meerdere gewichten** (300–900) ondersteunt, genoeg voor een complete type-ramp +- **OFL-licensed** is en gratis via Google Fonts beschikbaar +- **In productie bewezen** — gebruikt door bv. Vercel-ecosystem, Linear-achtige tools + +### Waarom IBM Plex Mono voor code? + +- Warmer in vorm dan JetBrains Mono (past beter naast Figtree) +- Rustig en zeer leesbaar — geen sterke stylistische accenten +- OFL, brede taalondersteuning +- Conductie-apps zijn geen pure developer tools — een "te technische" mono (JetBrains Mono, Fira Code met ligaturen) trekt te veel aandacht + +Als in de toekomst een app bewust developer-facing wordt (API-console, debugger), kan die lokaal overstappen op JetBrains Mono — maar de default blijft IBM Plex Mono. + +### Waarom geen aparte display-font voor koppen? + +Overwogen: DM Serif Display / Fraunces / Playfair als display-accent. Afgewezen omdat: + +- Serif koppen boven sans body voelt in B2B-context al snel "uitgeversachtig" of magazine-stijl, niet zakelijk +- Tweede font = extra bandwidth + extra complexiteit voor consumenten van de tokens +- Figtree in 700 weight heeft genoeg gewicht en karakter voor koppen + +Als we in de toekomst één display-weight willen toevoegen voor hero's (bv. Figtree 900), doen we dat per app op basis van noodzaak — niet globaal. + +--- + +## Logo + +### Waarom de hexagon-wrapper behouden? + +De zeshoek is in alle huidige Conduction-apps het herkenbaar omkapsel. Hem behouden bij de stijlvernieuwing: + +- **Bewaart institutioneel geheugen** — gebruikers die Conduction-apps kennen, herkennen ons meteen +- **Schaalt over het portfolio** — elk app-icon past binnen dezelfde vorm, maakt portfolio-pagina's rustig +- **Heeft geen gevestigde associatie** in overheidsland — geen botsing met Rijkshuisstijl-iconografie + +### Van wrapper naar systematisch motief + +De zeshoek is niet langer alléén het omkapsel rond het logo. Vanaf `theme-conduction-2026` wordt ze een **systematisch motief** dat door de hele UI terugkomt: bulletjes in lijsten, paginering-dots, step-indicators, process-statussen, avatar-frames, badges, dividers, loaders, category-tags, rating-schalen, timeline-kralen. Overal waar een vorm *iets aanduidt* (status, volgorde, categorie, accent) — daar mag een hex gebruikt worden. + +**Regel — hexagon voor accenten, niet voor functionele containers.** De zeshoek gaat op elementen waar een vorm betekenis heeft. Elementen waar een mens *iets mee doet* (inputs, buttons, modals, content-cards, tables) blijven rechthoekig, omdat dat beter klikt, tikt, leest en invult. De mix van rechthoekige containers met hex-accenten is bewust: functionaliteit en merkidentiteit beide verdedigen. + +Volledige catalogus van toepassingen (met wanneer en hoe) staat in de surface-specifieke [`briefs/website/visual-motifs.md`](./briefs/website/visual-motifs.md). Die catalogus is oorspronkelijk voor de website geschreven maar geldt **company-wide** — dezelfde hex-toepassingen gelden ook voor app-UI's, drukwerk, presentaties en toekomstige oppervlakken. + +**Eén oriëntatie: altijd pointy-top.** + +De Conduction-zeshoek heeft altijd de punt naar boven. Dat is de oriëntatie van het bestaande Conduction-logo en van alle portret-frames die we tot nu toe gebruikten. Consistentie boven alles — geen mix van punt-boven en plat-boven in dezelfde UI. + +Waarom deze keuze: + +- **Merkherkenning**: elke hexagon die je tegenkomt op een Conduction-oppervlak heeft dezelfde oriëntatie, wat de vorm direct als "Conduction" laadt +- **Visuele rust**: gemixte oriëntaties leiden tot een druk honeycomb-patroon; één oriëntatie is rustiger en formeler +- **Consistent over surfaces**: van logo tot bullet tot avatar tot pagination — allemaal pointy-top + +Bij honeycomb-patronen (meerdere hexagons aaneengesloten) werken pointy-top-hexes prima — ze stapelen in offset rijen horizontaal. + +### Illustratie-stijl — gekozen richting + +Per 2026-04-23 vastgelegd: **alle illustraties** op alle Conduction-oppervlakken gebruiken de **flat-isometric hex-prism-stijl** (richting A2 in [`briefs/website/visual-motifs.md`](./briefs/website/visual-motifs.md#gekozen-richting-a2--flat-isometric-hex-prism-overall)). Referentie: honeycomb.io platform-overview-visualisatie. + +Kenmerken: + +- Hexagons geëxtrudeerd tot prisma's vanuit ~30° isometrisch perspectief +- Flat kleurvlakken — geen gradients, geen lighting, geen photorealistisch 3D +- Cobalt #21468B dominant, KNVB-oranje accent ≤10%, pastel categorie-kleuren voor differentiatie +- Witte achtergrond, subtiele 2D drop-shadow voor diepte +- Geen mensen, geen gezichten, geen karakters +- Eén visuele taal door alle oppervlakken (website, drukwerk, presentaties, app-UI's) + +Productie: Midjourney eerste batch met master-prompt; per-scène-prompts in [`briefs/website/illustration-batch-1.md`](./briefs/website/illustration-batch-1.md). + +### ConNext-wordmark — typografische keuze + +Per 2026-04-28 introduceren we **ConNext** als publieke productbrand (zie [BRAND.md §ConNext](./BRAND.md#connext--onze-publieke-productbrand)). De wordmark is bewust **pure typografie**, geen icoon of monogram: + +> **ConNext** + +**Waarom geen icoon vóór de wordmark:** + +- De **typografische kleurwissel zelf** doet al het zware merkwerk: *Con* in Conduction-cobalt, *Next* in Nextcloud-blauw. Geen icoon nodig om die boodschap te dragen — de letters zijn de boodschap. +- **Conduction's hexagon-avatar bestaat al** als bedrijfsmerk-mark. Een tweede icoon erbij voor ConNext zou brand-versplintering geven (twee marks om te onderhouden, te tonen, te beschermen). +- **Eenvoud schaalt beter**: pure tekst werkt op elke achtergrond, in elke grootte, op elk medium. Geen pixel-tweaks per platform. +- **Past bij de tech-product-categorie**: Stripe, Linear, Vercel, Plausible — allemaal product-brands waarvan de wordmark zelf voldoende is. + +**Typografische details:** + +- Lettertype: **Figtree** (zelfde body-font als de rest van de huisstijl) — zorgt voor visuele cohesie +- Gewicht: **bold** (700) op grote weergave (header, hero), **semibold** (600) op kleinere plekken +- Kerning: licht aaneengesloten — *Con* en *Next* moeten visueel één woord vormen, ook al zijn de kleuren anders. Geen extra spatie. +- Hoofdletter-conventie: alleen de **C** en **N** zijn hoofdletter (camelCase met capital N). Niet *"connext"* (te plat), niet *"CONNEXT"* (te schreeuwerig), niet *"Connext"* (te gewoon). + +**Lockup-context:** + +In headers en op de homepage-hero verschijnt de ConNext-wordmark **prominent**, met: + +- *"by Conduction"* subtitel klein eronder (zelfde Figtree-font, regular gewicht, cobalt-tint, ~50% van wordmark-grootte) +- Conduction-hexagon-avatar als kleine icoon (~24px) links naast de subtitel — als subtle bedrijfsmerk-anchor + +Zo staan alle drie de brand-actoren (Conduction · ConNext · Nextcloud) zichtbaar zonder dat één element het beeld domineert. + +### Waarom twee logo-varianten (op wit, op blauw)? + +- **Op wit** is de default — documenten, lichte UI, website +- **Op blauw** is nodig voor hero-secties, social-media avatars met donkere achtergrond, en Nextcloud dark-mode +- Beide staan in [`brand/assets/`](./brand/assets/). Plus een transparante variant voor gevallen waar de achtergrond bekend/variabel is. + +Bronbestanden: + +- [Kobalt op wit](./brand/assets/avatar-conduction-on-white.svg) — default +- [Wit op kobalt](./brand/assets/avatar-conduction-on-blue.svg) — inverse +- [Transparant](./brand/assets/avatar-conduction.svg) — flexibel + +### Waarom niet een volledig nieuw logo? + +De kleurvernieuwing is al een significant signaal. Een nieuwe vorm bovenop nieuwe kleuren zou: + +- Continuïteit breken (bestaande gebruikers heroriënteren zich onnodig) +- Veel meer visuele inventaris raken (app-icons, social, drukwerk, merchandise) +- De boodschap verwateren — we willen zeggen "nieuwe, serieuzere kleur", niet "nieuw bedrijf" + +De zeshoek blijft; de kleur wordt volwassener. Dat is de boodschap. + +--- + +## Implementatie-aanpak + +### Harde switch, geen parallel thema + +Overwogen werd: twee thema's naast elkaar (`theme-legacy`, `theme-conduction-2026`) waar apps individueel overstappen. Afgewezen: + +- **Twee waarheden meedragen is duur.** Elke kleur/typografie-wijziging moet in beide. +- **Apps zouden achterblijven.** Zonder deadline wordt legacy nooit verlaten. +- **De nieuwe stijl is het gewenste eindbeeld.** Een harde switch signaleert commitment. + +De migratie gebeurt per app in eigen tempo, maar alle apps consumeren **hetzelfde** `conduction-2026` thema. Er is geen rollback-thema. + +### Waarom DTCG-formaat? + +W3C [Design Tokens Community Group](https://design-tokens.github.io/community-group/format/) is het opkomende standaardformaat: + +- **Tool-agnostisch** — Style Dictionary, Tokens Studio, Figma, Supernova ondersteunen het (of zijn bezig ermee) +- **Toekomstbestendig** — we zitten niet vast aan één tooling +- **Zelf-documenterend** — `$description` velden leven naast waardes +- **Referentie-resolutie** — `{color.primitive.blue.cobalt}` ketent primitief → thema + +Alternatief was Style Dictionary v3 formaat (zonder `$`), maar DTCG is breder en SD v4 gaat er naartoe. Geen reden voor legacy format. + +### Waarom scope A eerst (kleur + typografie)? + +- **80% van de merkherkenning** zit in kleur + typografie +- **Snelste time-to-visible-change** — apps kunnen vandaag al migreren zonder op spacing/radii te wachten +- **Beperkt risico** — minder oppervlak om fout te krijgen +- **Leer-iteratie** — uit de eerste migraties leren we wat de volgende scope moet dekken + +Spacing/radii/shadows (scope B) en componenttokens (scope C) volgen op basis van daadwerkelijke vraag uit app-migraties, niet op speculatie. + +--- + +## Tone & visuele richting — implicaties van de positioneringsshift + +Conduction verschuift van *consultancy* naar *productbedrijf* (zie [BRAND.md](./BRAND.md#wat-we-bouwen--een-app-ecosysteem-geen-consultancy)) en van *overheid-first* naar *MKB-first* (zie [BRAND.md](./BRAND.md#voor-wie-we-bouwen)). Die twee shifts hebben consequenties voor hoe we **schrijven** en **beelden gebruiken** — niet alleen op de website, maar in alle communicatie. + +### Tone-verschuiving + +| Oud (overheid-dienstverlener) | Nieuw (MKB-productbedrijf) | +|---|---| +| Formele aanspreekvorm ("u", 3e persoon) | Directe aanspreekvorm ("je", "jij") | +| Abstracte ambitie ("digitale transformatie", "ketensamenwerking") | Concrete uitkomst ("installeer OpenCatalogi in 2 minuten") | +| Proces-centraal ("onze implementatie­methodologie") | Resultaat-centraal ("deze app lost dit probleem op") | +| Neutrale dienstverlening-taal | Zelfbewust product-taal ("we bouwen X, en het werkt") | +| Jargon als vakbekwaamheids-signaal | Jargon als exclusie — alleen als het écht nodig is, met uitleg | +| Lange, volledige zinnen | Korte zinnen, witregels, scanbaarheid | + +Dit geldt in alle kanalen: website, offertes, presentaties, blogposts, social. Overheidsklanten begrijpen directe taal prima; MKB-klanten zouden afhaken bij de oude tone. + +### Visuele richting + +De positionerings-shift van *dienstverlener* naar *productbedrijf* heeft visuele gevolgen. Wat we *tonen* verandert: + +| Oud (dienstverlener) | Nieuw (productbedrijf) | +|---|---| +| Stockfoto's van mensen in vergaderzalen, handdrukken, whiteboards | App-screenshots, UI-fragmenten, productdemo's | +| "Onze expertise" in tekst + team-portretten als bewijs | "Wat onze apps doen" in visuele demo's | +| Abstracte netwerk-iconografie (knooppunten, verbindingen) | Concrete app-iconografie (apps in hexagon-wrapper, features als beeld) | +| Casefoto's van klantenprojecten | Installed-count, app-metrics, gebruikersaantallen | +| "Team Conduction" als hero-element | "Apps Conduction" als hero-element | + +Team-foto's en mensen verdwijnen niet helemaal — ze horen thuis op *over-ons*-pagina's, in jaarverslag-achtige content, en in contactvormen — maar ze zijn niet meer het eerste wat een bezoeker of lezer ziet. + +**Richtlijn voor imagery:** liever een illustratie in het cobalt-palet dan een stockfoto. Liever een app-screenshot dan een generiek "platform"-beeld. Liever een getekend icoon dan een 3D-render. Als je twijfelt: kan dit beeld ook bij een willekeurig ander IT-dienstverlener-bedrijf staan? Dan moet het niet op Conduction-materiaal. + +### Apps-vs-Solutions framing (taalgebruik) + +Zie de terminologie-sectie in [BRAND.md](./BRAND.md#apps--solutions--onze-terminologie). Kort samengevat voor ontwerp: + +- Spreek nooit over "onze WOO-app" of "onze zaakafhandel-app" — er zijn geen WOO- of zaakafhandeling-apps. Dat zijn *solutions* (oplossingen voor problemen); de apps die ze realiseren zijn *OpenCatalogi*, *OpenRegister*, etc. +- Solution-pagina's zijn probleem-gericht ("Wat is WOO-compliance en hoe los je het op?"); app-pagina's zijn product-gericht ("Wat is OpenCatalogi en wat kan het?"). +- In visuele voorstellingen kunnen apps en solutions samen getoond worden: solution als doel, apps als bouwstenen. Bijvoorbeeld een "stack-diagram" per solution. + +--- + +## Rollout — welke oppervlakken, in welke volgorde + +Het thema landt niet in één klap overal. Drie soorten oppervlakken met elk een eigen prioriteit en complexiteit: + +| Oppervlak | Doel | Codebase | Prioriteit | +|---|---|---|---| +| `www.conduction.nl` | Marketing, wervend, eerste indruk | Aparte codebase (stack nader te bepalen) | **Hoog** — grootste merkimpact richting (potentiële) klanten | +| `docs.conduction.nl` | Technische documentatie voor integrators | Docusaurus in [`.github/website/`](./website/) | **Middel** — goede eerste testcase voor de tokens | +| App-UI's (OpenRegister, OpenCatalogi, …) | Productgebruik | Per app-repo | **Middel-hoog** — dagelijks zichtbaar voor eindgebruikers | + +### Waarom deze volgorde + +- **`www.conduction.nl` eerst** omdat merk-uitstraling het grootste effect heeft op prospects die ons nog niet kennen. De donkerdere kobalt plus KNVB-oranje vertelt een ander verhaal over wie we zijn — die boodschap landt het eerst op de marketingsite. +- **`docs.conduction.nl` als parallelle technische proef.** Technisch laagdrempelig (één Docusaurus `custom.css` vervangen, fonts toevoegen via `stylesheets` in `docusaurus.config.js`) en laag visueel risico — docs mogen iteratief. Het legt bovendien bloot welke scope-B tokens (spacing, radii, shadows) als eerste nodig zijn zodra een echte site ze consumeert. +- **Apps per stuk, op eigen tempo.** De harde switch betreft het *thema-contract* (`theme-conduction-2026`), niet een gedeelde deadline voor alle apps. Elke app-repo landt zijn eigen migratie-PR. + +### De "docs-first vs marketing-first"-afweging + +Vanuit techniek is docs-first logisch (kleiner, overzichtelijker, snel klaar). Vanuit positionering is marketing-first logisch (merkimpact). We kiezen **marketing-first**, met docs als parallelle technische proef. + +Als de marketing-site echter op een platform draait dat moeilijk tokens consumeert (bv. Webflow of een WordPress-theme zonder build-pipeline), draait de volgorde om — dan is `docs.conduction.nl` het eerste formele bewijs van het thema in gebruik, en landt de marketingsite via export van dezelfde waardes. + +### Wat telt als "gemigreerd"? + +Een oppervlak is pas gemigreerd wanneer: + +1. Alle merkkleuren via `theme.conduction-2026.color.brand.*` worden geconsumeerd (geen hardcoded hex) +2. Typografie via de `theme.conduction-2026.typography.font-family.*` tokens loopt +3. Het avatar in de juiste variant (op-wit of op-blauw) gebruikt wordt +4. Er geen `#4376FC` of andere legacy-blauwtint meer in het oppervlak voorkomt + +Tot die tijd is het oppervlak "in transitie". + +--- + +## Open vragen / toekomstige beslissingen + +Deze noteren we alvast, maar lossen we niet in deze ronde op: + +- **Dark mode** — aparte thema-variant of automatische inversie op basis van tokens? Voor scope B. +- **Accessibility-varianten** — high-contrast mode, reduced-motion? Voor scope B/C. +- **App-specifieke accent-kleuren** — mag een Conduction-app zijn eigen "OpenCatalogi-blauw" hebben, of alleen binnen het merk-palet blijven? Nu: alleen binnen het merk-palet. Heroverwegen als dat knelt. +- **NLDS versie-pinning** — als NLDS majors uitbrengt die tokens hernoemen, volgen we automatisch of gecontroleerd? Voor later. + +--- + +## Wijzigingshistorie + +| Datum | Wijziging | Besluit door | +|---|---|---| +| 2026-04-23 | Introductie `theme-conduction-2026`: kobalt + KNVB-oranje + vermiljoen, Figtree + IBM Plex Mono, zeshoek-wrapper behouden. Wimpel-oranje (`#FF7F00`) en Rijkshuisstijl-oranje (`#E17000`) overwogen en afgewezen; KNVB gekozen om warmere harmonie met cobalt en mass-appeal "Oranje"-associatie zonder overheidslading. | Brand-initiatief | diff --git a/brand/README.md b/brand/README.md new file mode 100644 index 0000000..4dfa87c --- /dev/null +++ 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-` 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 new file mode 100644 index 0000000..ca229b3 --- /dev/null +++ b/brand/assets/avatar-conduction-on-blue.svg @@ -0,0 +1,9 @@ + + + Conduction avatar — white on cobalt + + + + + + diff --git a/brand/assets/avatar-conduction-on-white.svg b/brand/assets/avatar-conduction-on-white.svg new file mode 100644 index 0000000..57fd8d7 --- /dev/null +++ b/brand/assets/avatar-conduction-on-white.svg @@ -0,0 +1,9 @@ + + + Conduction avatar — cobalt on white + + + + + + diff --git a/brand/assets/avatar-conduction.svg b/brand/assets/avatar-conduction.svg new file mode 100644 index 0000000..097b00f --- /dev/null +++ b/brand/assets/avatar-conduction.svg @@ -0,0 +1,8 @@ + + + Conduction avatar + + + + + diff --git a/brand/tokens.json b/brand/tokens.json new file mode 100644 index 0000000..594428c --- /dev/null +++ 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 new file mode 100644 index 0000000..c0e4a8f --- /dev/null +++ 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) diff --git a/briefs/website.md b/briefs/website.md new file mode 100644 index 0000000..f6ea088 --- /dev/null +++ b/briefs/website.md @@ -0,0 +1,516 @@ +# Website Design Brief — `connext.conduction.nl` (2026, ConNext public site) + +> **Brand-update 2026-04-28**: deze brief beschrijft de ConNext-website (`connext.conduction.nl`), Conduction's publieke productbrand voor het Nextcloud-ecosystem. ConNext = "a Conduction proposition for Nextcloud". Drie merken in driehoeksverhouding zichtbaar op de site: Conduction (zeer zichtbaar als bouwer), ConNext (primaire productbrand), Nextcloud (geciteerd als platform). Zie [`BRAND.md §ConNext`](../BRAND.md#connext--onze-publieke-productbrand) voor volledige uitleg. De rest van dit document gebruikt nog regelmatig de term "Conduction-website" — die referenties betreffen historisch het project, niet de uiteindelijke brand-positie. + + +**Status:** Concept, ronde 1 +**Laatste update:** 2026-04-23 +**Thema:** `theme-conduction-2026` +**Doelstaat:** Bilingual (NL/EN), Docusaurus 3.x, product-first + +## Waar deze brief op bouwt + +**Foundation (company-wide):** + +- [../BRAND.md](../BRAND.md) — merkwaardes, logo, kleurpalet, typografie, Apps-vs-Solutions terminologie +- [../DESIGN.md](../DESIGN.md) — rationale achter kleur/typo, tone-shift MKB-direct, visuele richting productbedrijf +- [../brand/tokens.json](../brand/tokens.json) — DTCG tokens (kleur + typografie, scope A) + +**Content-appendix (website-specifiek, gemined uit onze intelligence-DB):** + +- [`website/app-taglines.md`](./website/app-taglines.md) — tagline-library voor alle 11 core apps (NL + EN) +- [`website/solution-woo.md`](./website/solution-woo.md) — volledige WOO-solution-pagina als template voor andere solutions +- [`website/tone-samples.md`](./website/tone-samples.md) — NL tone-calibratie met drie registers en rewrite-recepten +- [`website/icon-library.md`](./website/icon-library.md) — iconen-bibliotheek-keuze (aanbevolen: Lucide) +- [`website/platform-benchmarks.md`](./website/platform-benchmarks.md) — uitgebreide deep-dive-analyse van Odoo, WooCommerce en Nextcloud als app-platform-referenties; concrete IA-/layout-/CTA-patronen om over te nemen, aan te passen, of bewust níet over te nemen gegeven ons gratis + optionele-Support-model. Bevat ook Nextcloud's exacte pricing-structuur (€71–205/user/jaar, tiers Standard/Premium/Ultimate, 100-user-minimum) als benchmark voor onze eigen pricing-tabel. +- [`website/support-model.md`](./website/support-model.md) — het Conduction Support-model: twee paden (via Nextcloud-leverancier of rechtstreeks via app-admin-formulier), wat er concreet in Support zit (helpdesk + proactieve telemetry-ondersteuning), pricing-structuur (per app × per user × per jaar × 2 tiers Standard/Premium) en wat dat betekent voor de Support-pagina-structuur. *Pricing-waarden in de tabel zijn placeholders en moeten door Conduction-leiding bevestigd worden.* +- [`website/services-model.md`](./website/services-model.md) — het Conduction Services-model: volledige tarievenkaart (Development €125/uur, Consultancy €150/uur, strippenkaart €15K/10% korting, fysieke training €1.000–€1.200/dagdeel, online training gratis, certificering variabel), strippenkaart-uitleg, training-varianten (fysiek/online/certificering), en Services-pagina-structuur. +- [`website/visual-motifs.md`](./website/visual-motifs.md) — **drie visuele systemen**: (1) hexagon als systematisch motief door de hele UI — bulletjes, pagination, status, avatars, badges, dividers, etc. met regel "hex voor accenten, niet voor functionele containers"; (2) per-sectie-treatments van de homepage (7 secties) plus app-detail / solution-landing / Support / Services / About / 404 met opties en aanbevelingen; (3) illustratie-stijl-kandidaten (Open Peeps, Humaaans, Storyset Line, etc.) ter bevestiging, plus een master-briefing-tekst voor illustrators/AI. + +**Deze brief beschrijft alleen het website-specifieke.** Alles wat Conduction-wide geldt (wie we zijn, hoe we eruitzien, welke woorden we gebruiken) staat in de foundation-documenten. Als iets uit deze brief toch company-wide blijkt, lift het terug naar BRAND.md of DESIGN.md. + +--- + +## 1. Doel + +Een nieuwe **`connext.conduction.nl`** (de ConNext-site) die bezoekers zo kort mogelijk naar de **Nextcloud app store** leidt. De site is de productbrand-etalage van het ConNext-ecosystem (Conduction's apps op Nextcloud). + +Wat deze site **niet** is: +- Geen corporate brochure (dienstverlener-site) +- Geen portal/login/dashboard (dat is Nextcloud zelf) +- Geen technische documentatie (dat is docs.conduction.nl) +- Geen e-commerce (apps zijn open source, installatie gaat via Nextcloud app store) + +## 2. Strategische context + +Context komt uit BRAND.md, kort herhaald: + +- **Business-model shift.** Conduction beweegt van *consultancy (projecten, training, advies)* naar *productbedrijf (ecosysteem van Nextcloud-apps)*. Klanten kunnen ons gebruiken zonder ons te spreken. +- **Doelgroep-shift.** Van overheid-first naar MKB-first, met een eerlijke transitie: overheid is nog de meerderheid, MKB is het doel. +- **Tone-shift.** Van formele overheid-taal naar directe MKB-taal. + +Dit samen maakt een **product-first, apps-in-de-hoofdrol, MKB-directe** site. + +## 3. Doelgroepen + +### Primair — MKB-beslisser / IT-lead (nieuw) + +- Komt met een concreet probleem ("we moeten WOO-compliant worden", "we willen één registerplatform") +- Kent Conduction vaak **niet** vooraf — komt via Google op een solution-landingspagina +- Heeft een beperkt budget, wil zelf kunnen evalueren, geen consultancy-traject +- Leest scanbaar, klikt snel door, beslist in dagen-weken niet maanden + +**Wat deze bezoeker nodig heeft:** heldere probleem-herkenning, concrete oplossing, directe installeer-route. + +### Secundair — Overheid-beslisser / IT (bestaand) + +- Kent Conduction al, heeft wellicht een lopende relatie of een project in gedachten +- Meer tijd, meer stakeholders, meer compliance-eisen (inkoop, BIO, ...) +- Wil zowel apps als ondersteuning (implementatie, training) + +**Wat deze bezoeker nodig heeft:** apps duidelijk gepositioneerd, plus een discrete route naar Services/contact. + +### Tertiair — Ontwikkelaar / Integrator + +- Bouwt of integreert open source +- Komt vaak via GitHub of docs.conduction.nl +- Zoekt APIs, source code, contribution guides + +**Wat deze bezoeker nodig heeft:** directe links naar GitHub, docs.conduction.nl, licenties. Niet veel meer. + +## 4. Primaire taak & CTA-hiërarchie + +De site heeft één primaire taak: **installeer een app vanuit de Nextcloud app store**. Alle andere CTA's zijn ondersteunend. + +**Framing-principe — van "upgrade-druk" naar "download-druk".** Odoo en WooCommerce werken met upgrade/koop-druk (trial starten, kopen, upgraden). Bij ons is dat **download-druk**: elke pagina leidt naar één gratis, frictieloze actie — de app installeren. Geen trial-urgency, geen prijs-vergelijkingen, geen upgrade-nags. Primary button zegt altijd *"Install from Nextcloud app store"*, nooit *"Get started"* of *"Sign up"*. Zie [`website/platform-benchmarks.md §Van upgrade-druk naar download-druk`](./website/platform-benchmarks.md#van-upgrade-druk-naar-download-druk--de-kern-reframing) voor de volledige reframing. + +| Rang | CTA | Waar | +|---|---|---| +| 1 | **Install from Nextcloud app store** | Elke app-pagina, homepage, solution-pagina's | +| 2 | **Try the demo** (indien beschikbaar) | App-pagina's | +| 3 | **Read the docs** (→ docs.conduction.nl) | App-pagina's, footer | +| 4 | **View on GitHub** | App-pagina's, footer | +| 5 | **View Support tiers & pricing** | Hoofdnavigatie (Support-link), één homepage-strip | +| 6 | **Contact us** (discreet) | Footer | + +**Regel:** CTA 1 is op elke app/solution-pagina zichtbaar zonder te scrollen. Andere CTA's mogen verderop. Contact staat in de footer. **Géén** add-to-cart-achtige UI, **géén** urgency-tactics ("limited time offer", "last chance"), **géén** exit-intent-popups, **géén** sticky CTA-bars met upgrade-messaging. + +**Support is géén conversiepunt op de website.** Het aanvragen van Support gebeurt buiten onze site — óf via de Nextcloud-leverancier van de klant (pad 1), óf via een formulier in de admin-instellingen van de geïnstalleerde app zelf (pad 2). Onze Support-pagina (`/support` in de hoofdnav) *legt uit* wat Support is, toont pricing-tiers, en stuurt door naar de juiste aanvraagroute — maar bevat geen shopping-cart. Zie [`website/support-model.md`](./website/support-model.md) voor de volledige uitleg inclusief pricing-structuur. + +## 5. Information Architecture + +### Hoofdnavigatie (header) + +1. **Apps** — de app-catalogus +2. **Solutions** — probleem-georiënteerde landingspagina's (WOO, registers, zaakafhandeling, ...) +3. **Support** — uitleg van Support-tiers + pricing-tabel (alléén voor Support, software is gratis) +4. **About** — wie we zijn, waardes, team +5. **Docs** (extern, → docs.conduction.nl) +6. **GitHub** (extern, → github.com/ConductionNL) +7. *(taalwisselaar NL/EN)* + +**Opmerking over Support in hoofdnav:** eerder aangemerkt als "alleen footer" om upgrade-druk te vermijden. Herzien: Support mag in de hoofdnav omdat bezoekers die prijzen willen weten niet naar de footer moeten zoeken. De mitigatie zit in de pagina-content zelf (prominente disclaimer dat software gratis is en Support optioneel). Alternatief nav-label "Pricing" is ook acceptabel; voor nu gekozen "Support" als inhoudelijk accurater. Zie [`website/support-model.md`](./website/support-model.md). + +### Footer + +- Services (pagina, niet in hoofdnavigatie) — maatwerk-ontwikkeling, training, implementatie-begeleiding +- Contact +- Privacy / Legal +- GitHub, LinkedIn, andere social +- Taalwisselaar (tweede plek, naast header) + +### Sitemap + +``` +/ homepage +/apps app-catalogus +/apps/{app-slug} app-detail +/solutions solution-catalogus +/solutions/{solution-slug} solution-landing +/support Support-pagina in hoofdnav — tiers, pricing-tabel, twee aanvraagpaden +/about wie we zijn +/services (discreet; niet in hoofdmenu) — maatwerk-dev, training, implementatie-begeleiding +/contact contactformulier +/404 fallback + +[per taal: /nl/... en /en/...] +``` + +## 6. Pagina-types + +### 6.1 Homepage + +**Job:** in ≤ 10 seconden duidelijk maken wat **ConNext** is — Conduction's propositie die Nextcloud doorontwikkelt van *office suite* naar *workspace*. Bezoeker begrijpt de pitch en heeft een directe stap (browse apps) of begrijpt de architectuur (scroll naar component-overview). + +Structuur van boven naar beneden: + +- **Hero** — + - ConNext-wordmark prominent (Con cobalt + Next Nextcloud-blauw) met *"by Conduction"* subtitel + kleine Conduction-hexagon-avatar links + - **H1**: *"Make Nextcloud your workspace, not just your office suite"* + - **Lead**: *"ConNext is Conduction's set of open-source components that bring data, processes, AI, and integrations to your Nextcloud — turning a file-sync platform into your actual workplace."* + - **Primaire CTA**: *"Browse our apps"* → `/apps` + - **Secundaire CTA**: *"How does ConNext work?"* (scrolt naar component-overview hieronder) + - **Visueel**: het isometrische **platform-overview-diagram** (Honeycomb-stijl) met **Nextcloud-kernel** in centrum + **6 component-cards** rondom (Technical Core · Workplace App · AI · Integrated Apps · App Builder *(Coming soon)* · Admin Tools) + **side-box links** met bron-systemen (BAG/BRK/PDOK/etc.). Volledige spec: zie [`website/visual-motifs.md §Platform overview pattern`](./website/visual-motifs.md#platform-overview-pattern--honeycomb-stijl-als-hero) en [`website/illustration-batch-1.md scène 1`](./website/illustration-batch-1.md). + +- **Featured apps** — selectie uit Workplace App component (4–6 stuks) als kaarten met hexagon-icon, naam, tagline, "Install" CTA. Linken door naar app-detail-pagina's. +- **Top solutions** — 3–4 meest relevante solutions als teasers met "Read more" naar solution-pagina +- **Ecosystem-strip** — vereenvoudigde versie van de hero-component-overview, zonder pills, alleen de zes component-cards en hun rol; nodigt uit om door te klikken naar /apps voor details +- **Proof** — installed-count, gemeenten/organisaties die ConNext gebruiken, GitHub-sterren, *"X apps live in Nextcloud's app store"* +- **Footer** — zie hoofdsite-structuur + +**Geen** op de homepage: teamfoto, mission-statement lang verhaal, "onze diensten"-sectie als hoofd-CTA, blog-feed als hero. + +**Architecturele context** voor de hero: zie [`website/app-architecture.md`](./website/app-architecture.md) voor de volledige beschrijving van de zes component-cards rondom Nextcloud-kernel + alle apps + integraties. Dit document is de canonieke bron voor wat in elke component zit. + +### 6.2 App-catalogus (`/apps`) + +**Job:** alle apps tonen met voldoende structuur dat een bezoeker snel de juiste vindt. + +- Filter/sorteer: op solution, op status (stable/beta/experimental), op NLDS-compliance, op deployment-model +- Grid of list view, toggleable +- Per app-kaart: hexagon-logo, naam, tagline, status-badge, CTA "View details" +- Lege state (bv. na filter): "Ontbreekt een app die je zoekt? Dien een verzoek in" → GitHub link +- Sticky filter op desktop; modal filter op mobile + +### 6.3 App-detail (`/apps/{slug}`) + +**Job:** één app volledig uitleggen en installeren. + +Structuur: + +- **Hero** — hexagon-wrapped app-logo, naam, tagline, status-badge, primaire CTA **"Install from Nextcloud app store"**, secundaire CTA "View demo" / "Read docs" +- **Screenshots** — 3–5 schermen, carousel of grid +- **Wat doet het?** — 2–3 alinea's MKB-taal, concreet +- **Voor welke solutions?** — links naar relevante solution-pagina's +- **Integreert met** — andere apps in het ecosysteem (klikbare mini-kaarten) +- **Technische facts** — licentie, versie, NLDS-compliance, Nextcloud-versie, GitHub-link, docs-link +- **Testimonials / use-cases** (optioneel, komt later als content er is) +- **CTA-repeat** — "Install from Nextcloud app store" + +### 6.4 Solution-catalogus (`/solutions`) + +**Job:** wie niet weet welke app, maar wel een probleem heeft, hier vanaf laten starten. + +- Probleemgerichte categorieën (transparantie & WOO, data & registers, zaakafhandeling, organisatie-management, softwarecatalog, ...) +- Per categorie een korte beschrijving en kaarten naar solution-landingspagina's + +### 6.5 Solution-landing (`/solutions/{slug}`) + +**Job:** SEO-magneet voor probleemzoekers ("WOO compliance software", "open source zaakafhandeling"); vertaalt het probleem naar een app-stack. + +Structuur: + +- **Hero** — probleem in MKB-taal ("WOO-compliant worden is verplicht sinds 2022. Hier is hoe je het aanpakt.") +- **Wat is dit probleem?** — didactische uitleg, ~300 woorden, voor wie het nog niet kent +- **Hoe los je het op?** — beschrijving van de aanpak +- **De app-stack** — welke apps je nodig hebt, in welke rol (visualisatie: stack-diagram) +- **CTA** — "Install the stack" (link naar app-catalogus gefilterd op deze solution, of per-app links) +- **Testimonials / cases** (optioneel) +- **FAQ** (optioneel) — SEO-voer + +### 6.6 About (`/about`) + +**Job:** wie is Conduction, waar staan we voor, wie zit erachter. + +Structuur: + +- Missie en waardes (korte versie van BRAND.md) +- Team (foto's en rollen horen hier, niet op de homepage) +- Manifest / Common Ground-positie / open-source filosofie +- Roadmap-link (indien publiek) +- Contact-CTA + +### 6.7 Support (`/support`) + +**Job:** voor wie meer zekerheid wil dan "installeer en draai zelf". **In de hoofdnavigatie**, inclusief pricing-tabel. Geen bestelformulier op de pagina — wel een heldere uitleg van de twee paden waarop je Support kunt krijgen (via je Nextcloud-leverancier of rechtstreeks via het formulier in de app-admin-instellingen). + +Volledige structuur (6 secties) en pricing-structuur: zie [`website/support-model.md`](./website/support-model.md). Kort: + +1. Hero — *"Onze apps zijn altijd gratis. Support is optioneel."* +2. Wat zit in Support? (helpdesk-ondersteuning + proactieve telemetry-monitoring) +3. Pricing-tabel (per app × per user × per jaar × 2 tiers Standard/Premium) mét prominente disclaimer *"Software is en blijft gratis. Onderstaande prijzen gelden alléén voor Support."* +4. Hoe vraag ik Support aan? (pad 1 via leverancier, pad 2 via app-admin-formulier — twee routes zij-aan-zij) +5. FAQ (6–8 vragen) +6. Contact-CTA (discreet) + +### 6.8 Services (`/services`) + +**Job:** voor wie specifiek **maatwerk-ontwikkeling**, **consultancy**, **training** of **certificering** zoekt. Niet in hoofdmenu, wel in footer. Volledig transparant qua tarieven — geen "vraag een offerte aan"-wall. + +Onderscheid met Support: Support is doorlopende ondersteuning op geïnstalleerde apps (abonnement per app × per user × per jaar); Services zijn projectmatige activiteiten (uurtarief, per dagdeel bij training, per certificaat). + +Volledige structuur (6 secties) en tarievenkaart: zie [`website/services-model.md`](./website/services-model.md). Kort: + +1. Hero — *"Meer dan de apps — wij bouwen en leren ook mee wanneer je dat wilt."* +2. Wat biedt Services? (Development, Consultancy, Training, Certificering) +3. **Tarievenkaart** — Development €125/uur, Consultancy €150/uur, Strippenkaart €15.000 vooraf (10% korting), Fysieke training €1.000–€1.200 per dagdeel (4u les + 4u voorbereiding/verwerking), Online training gratis, Certificering €150–€500 per certificaat (indicatief) +4. Strippenkaart-uitleg (waarom, wanneer interessant, hoe werkt afboeken) +5. Training-details (fysiek/online/certificering apart uitgelegd) +6. Contact & aanvragen-formulier + +Link onderaan: *"Ook op zoek naar doorlopende ondersteuning? Bekijk onze [Support-tiers](/support)."* + +### 6.9 Contact (`/contact`) + +- Formulier (naam, organisatie, e-mail, onderwerp-categorie, bericht) +- E-mail, telefoon (indien) +- GitHub discussions, Slack/Discord (indien) +- Routebeschrijving/adres alleen als we een publiek kantoor hebben dat bezoekers verwelkomt + +### 6.10 404 + +- Speelse hexagon-illustratie ("lost in the grid") +- Zoekveld +- Links naar /apps, /solutions, homepage +- Primary CTA: terug naar homepage + +## 7. Content types + +### App + +Voor alle 11 core apps staan naam, categorie en tagline (NL + EN) klaar in [`website/app-taglines.md`](./website/app-taglines.md) — gemined uit de intelligence-DB (top-features per app). Designer kan hieruit direct werken bij de app-catalogus-mock. + +| Veld | Type | Verplicht | +|---|---|---| +| name | string | ja | +| slug | string | ja | +| tagline | string (1 regel) | ja | +| description | markdown | ja | +| logo_hexagon | SVG-pad | ja | +| screenshots | array of image + caption | aanbevolen | +| demo_url | URL | optioneel | +| nextcloud_appstore_url | URL | ja | +| github_url | URL | ja | +| docs_url | URL | ja | +| status | enum (stable, beta, experimental) | ja | +| nldesign_compliant | boolean | ja | +| latest_version | string | ja | +| licence | string (SPDX) | ja | +| solutions | array of solution-refs | optioneel | +| integrates_with | array of app-refs | optioneel | + +### Solution + +Een volledig uitgewerkte WOO-solution-pagina (inclusief hero, probleem-uitleg, aanpak, app-stack-tabel, FAQ en SEO-metadata) staat als **template** in [`website/solution-woo.md`](./website/solution-woo.md). De andere solutions volgen diezelfde structuur. Bron: 1.031 NL-tenders + 5.992 Woo-requirements uit onze intelligence-DB. + +| Veld | Type | Verplicht | +|---|---|---| +| name | string | ja | +| slug | string | ja | +| tagline | string | ja | +| problem_statement | markdown | ja | +| description | markdown | ja | +| app_stack | array of `{app, role}` | ja | +| seo_keywords | array of strings | aanbevolen | +| faq | array of `{q, a}` | optioneel | +| testimonials | array | optioneel | + +### Optioneel voor later — Customer Story, Blog Post / Pulse + +Niet voor MVP. Later toevoegen als er content is. + +## 8. Tone & voice — website-specifiek + +Foundation: zie [../DESIGN.md](../DESIGN.md#tone--visuele-richting--implicaties-van-de-positioneringsshift). Kalibratie met authentieke NL-tender-taal staat in [`website/tone-samples.md`](./website/tone-samples.md) — drie registers herkennen plus rewrite-recepten van overheid-taal naar Conduction-taal. Website-aanvullingen: + +- **Lead met het resultaat, niet het proces.** *"Installeer in 2 minuten"* > *"Onze implementatie-methodologie"*. +- **Gebruik cijfers.** *"100+ gemeenten"*, *"bespaart 20 uur per maand"*. Vage superlatieven zijn verboden. +- **Open-source trots zichtbaar.** GitHub-link op elke app-pagina, licentie prominent, "Contribute" als optie voor ontwikkelaars. +- **Ecosysteem-framing.** *"Deze app werkt alleen, maar het beste met X en Y"*. Verkoop niet alleen de losse app, verkoop ook het samenspel. +- **Geen consultancy-taal.** Verboden woorden: *digitale transformatie*, *ketensamenwerking als werkwoord*, *waardevolle inzichten*, *samen werken we aan*. Als je zo'n zin schrijft, schrap hem en herformuleer naar concreet resultaat. +- **Humor mag.** 404-pagina, micro-copy in formulieren, een knipoog hier en daar. Niet bezwarend professioneel. + +## 9. Visuele richting — website-specifiek + +Foundation: zie [../DESIGN.md](../DESIGN.md#visuele-richting). Website-aanvullingen: + +- **Hero's tonen software, niet mensen.** Uitzondering: About-pagina. +- **Hexagon als systematisch motief** — niet alleen rond logo's. Zie [`website/visual-motifs.md §Hexagon-motief`](./website/visual-motifs.md#1-hexagon-als-systematisch-motief) voor de volledige catalogus: bulletjes, pagination, step-indicators, status-badges, avatars, dividers, timeline-kralen, loading-spinners, empty-states, ratings. Regel: **hex voor accenten, niet voor functionele containers** (inputs, buttons, modals, tables blijven rechthoekig). +- **Kleurproportie.** ~70% wit, 20% cobalt, 8% oranje, 2% rood (zie BRAND.md). Hero mag cobalt-fond hebben; body is overwegend wit. +- **Typografie.** Figtree voor alles behalve code; IBM Plex Mono voor code-snippets en version-strings. +- **Illustraties** in cobalt-palet met KNVB-oranje highlights. Eén stijl door de hele site; named-style ter bevestiging in [`website/visual-motifs.md §3 Illustratie-stijl`](./website/visual-motifs.md#3-illustratie-stijl--named-style-te-bevestigen) (aanrader: Open Peeps / Storyset Line als vector-line-figures). Geen mix van 3D-renders, flat-illustrations en isometrische diagrammen door elkaar. +- **App-screenshots** met lichte omlijsting (1–2px cobalt) of schaduw voor diepte. Niet tilt-geroteerd; strak recht. +- **Geen** stockfoto's. Geen 3D-renders van abstract netwerken. Geen "diverse team werkt samen"-foto's. +- **Iconen:** [Lucide](https://lucide.dev) als standaard-bibliotheek (ISC, lijn-iconen, peer-group-adoptie). Volledig afwegingskader en implementatie-notities in [`website/icon-library.md`](./website/icon-library.md). + +### Referentie-sites (positief + anti) + +Kritische invoer voor de designer om de **toon en sfeer** te kunnen ankeren. Zonder deze referenties produceert een one-shot een gemiddelde-van-alles-ontwerp dat nergens helemaal op past. + +Bron: onze competitive-intelligence database (`concurrentie-analyse/intelligence.db` en uitgebreidere Postgres — 1.088 gecatalogeerde competitors met relatie `competitor` / `ally` / `initiative`, binnen een bredere pool van ~32K GitHub-repos en ~17K organisaties). De onderstaande selectie is een handmatige curatie uit die data — vijf positieve referenties die elk een ander aspect raken, plus twee anti-referenties als duidelijke "niet dit". + +#### Positief — vijf richtingen om naartoe te bewegen + +| Site | Relatie in DB | Wat we ervan overnemen | +|---|---|---| +| [**Nextcloud**](https://nextcloud.com) | ally | **Tonale aansluiting + app-store-model.** We leven letterlijk in hun ecosysteem en onze bezoekers komen (of zouden moeten komen) daar vandaan. Bij elke design-beslissing de sanity-check: "zou deze pagina naast Nextcloud's eigen site werken?" Hun app-store-IA is wat wij voortzetten. | +| [**Decidim**](https://decidim.org) | initiative | **Civic-OSS-toon en solution-first-IA.** AGPL, Barcelona, multilingual, government-adjacent. Hun solution-pagina's leggen echt een maatschappelijk probleem uit voor ze naar de software gaan — exact het patroon voor onze WOO/zaakafhandeling-landingspagina's. Dichtst-bij-buurman op missie. | +| [**Supabase**](https://supabase.com) | competitor (openregister) | **Gouden standaard voor OSS-productbedrijf + ecosystem-catalogus.** Hun Extensions-sectie is structureel vergelijkbaar met onze apps-catalogus. Open source plus commercial add-ons — net als ons model (apps + ondersteunende services). Sterke typografische hiërarchie, dichtheid zonder drukte. | +| [**Backstage**](https://backstage.io) | competitor (internal developer portal) | **Ecosystem- en plugin-framing.** Spotify's portal framework is expliciet "core + plugins = ecosystem". Onze apps zijn onze plugins. Meest directe conceptuele peer voor het verhaal "install what you need uit een groeiende catalogus". Het model dat zij verkopen, bouwen wij. | +| [**PostHog**](https://posthog.com) | competitor (marketing-suite) | **Persoonlijkheid zonder corporate-saaiheid.** Bewijst dat open-source niet zakelijk-droog hoeft. GitHub-trots zichtbaar, humor in microcopy, maar professioneel. MKB-vriendelijke toon. | + +Twee observaties bij deze selectie: +- Geen van deze vijf is een traditionele NL-overheidsleverancier. Dat is bewust — de markt is gevuld met traditionele leveranciers (zie anti-referenties), en we willen juist *niet* zo ogen. +- **Decidim** is de enige EU/NL-aangrensde referentie. Als er tussen de designs een "te anglo-tech-SaaS" spanning ontstaat, trek dan richting Decidim's register. + +#### Anti — twee sites waar we expliciet van wegbewegen + +Classic NL-gov-vendor-sites: beleidsterrein-georiënteerde IA, corporate-blauw, stockfoto's van mensen in pakken, "vraag een demo aan"-flow, lange sales-cycles. Uit onze DB zijn dit de meest archetypische voorbeelden (beide `proprietary` / `subscription`, beide gericht op dezelfde NL-gov-afnemers die *wij* anders willen benaderen): + +| Site | Relatie in DB | Waarom anti-referentie | +|---|---|---| +| [**PinkRoccade Local Government**](https://www.pinkroccadelocalgovernment.nl) | competitor (Sociaal Domein, CiVision Midoffice) | Prototype NL-gov-vendor-site: sector-gerangschikte IA ("beleidsterreinen"), corporate-blauwe stockfoto's, "neem contact op voor een offerte". Alles wat wij *niet* zijn. Wij installeer-je-direct, zij verkoop-cycle. | +| [**BCT**](https://www.bct.nl) (Corsa ECM) | competitor (Corsa, GeoVacs VTH) | Traditionele document-management-vendor voor gemeentes. Enterprise-layout, dienstverlener-visual-language, geen spoor van "product eerst". Exact de look waar we in de tone-shift (BRAND.md / DESIGN.md) vanaf willen. | + +#### Gebruiksinstructie voor de designer + +- Positief-referenties zijn **aspect-bronnen**, geen copy-bronnen. Per ontwerpbeslissing: welk aspect is hier leidend? +- Als een mock "tussen PinkRoccade en Supabase" zit: altijd verder richting Supabase. +- Als een mock té developer-gericht wordt (docs-dichtheid, code-blokken overal): terug richting Nextcloud/PostHog om de MKB-toon te herstellen. +- Als een mock stoffig/overheidsformeel oogt: naar Decidim voor het civic-OSS-register; weg van PinkRoccade/BCT. +- De hexagon-wrapper en kobalt+oranje zijn *onze*. Geen enkel referentie-site heeft die — borrow structurele patronen, geen visual-brand-elementen. + +## 10. Internationalisatie (bilingual NL/EN) + +- **URL-structuur:** expliciete locale-prefix. `/nl/...` en `/en/...`. Root `/` redirect op basis van browser-taal. +- **Default-locale:** Nederlands (onze MKB-doelgroep zoekt in NL, WOO en zaakafhandeling zijn NL-termen). +- **Volledige vertaling:** elke pagina beschikbaar in beide talen. Geen mengvorm (deels NL, deels EN). +- **hreflang-tags** en canonical-URL's per pagina voor correct indexeren. +- **Taalwisselaar** zichtbaar in header (primair) en footer (secundair). Switch houdt de huidige pagina aan (niet terug naar homepage). +- **SEO-strategie per taal:** + - **NL** — keywords rond WOO, zaakafhandeling, gemeente-software, Common Ground, NLDS, open source overheid. Primair SEO-doel. + - **EN** — keywords rond Nextcloud apps, open source government, Dutch open source. Secundair, voor internationale community. +- **Content-management:** per-locale markdown-bestanden in Docusaurus, volgens [Docusaurus i18n](https://docusaurus.io/docs/i18n/introduction). + +## 11. Accessibility + +- **Target:** WCAG 2.1 AA minimum, AAA waar haalbaar (cobalt-op-wit haalt AAA makkelijk). +- **Keyboard-navigation** volledig werkend. Focus-states in oranje (KNVB), zichtbaar en contrasterend. +- **Semantic HTML:** `
`, `