From 5f846daf9be530d1b02e7350b5823c1e37b7f4f2 Mon Sep 17 00:00:00 2001 From: Ruben van der Linde Date: Thu, 23 Apr 2026 11:04:19 +0200 Subject: [PATCH 01/29] feat(brand): add Conduction 2026 brand guide, design rationale, and DTCG tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Introduces the theme-conduction-2026 brand system in the .github repo so all Conduction apps can consume a single source of truth for colour and typography. - BRAND.md: values, logo usage, colour palette, typography, do's & don'ts - DESIGN.md: rationale (why cobalt, why windmill orange, why Figtree, why a Conduction-owned theme that aligns with NLDS rather than extending it) - brand/tokens.json: W3C DTCG format, primitive + semantic layers (scope A: colours + typography; spacing/radii/components follow later) - brand/README.md: how to consume tokens (CSS vars, Tailwind, JS) + NLDS mapping - brand/assets/: Conduction avatar SVGs recoloured to cobalt #21468B — on-white (default), on-blue (inverse), transparent (flexible) - profile/README.md: link to the new brand guide from the org landing page Colours: cobalt #21468B (primary), windmill orange #FF7F00 (secondary), vermillion #AE1C28 (tertiary), white #FFFFFF (background) — all sourced from the official Dutch flag palette, signalling Conduction's Dutch identity without colliding with the Rijkshuisstijl. Hexagon logo wrapper preserved. Typography: Figtree (body + headings) and IBM Plex Mono (code), both OFL. --- BRAND.md | 181 ++++++++++++++++++ DESIGN.md | 195 ++++++++++++++++++++ brand/README.md | 101 ++++++++++ brand/assets/avatar-conduction-on-blue.svg | 9 + brand/assets/avatar-conduction-on-white.svg | 9 + brand/assets/avatar-conduction.svg | 8 + brand/tokens.json | 168 +++++++++++++++++ profile/README.md | 9 + 8 files changed, 680 insertions(+) create mode 100644 BRAND.md create mode 100644 DESIGN.md create mode 100644 brand/README.md create mode 100644 brand/assets/avatar-conduction-on-blue.svg create mode 100644 brand/assets/avatar-conduction-on-white.svg create mode 100644 brand/assets/avatar-conduction.svg create mode 100644 brand/tokens.json diff --git a/BRAND.md b/BRAND.md new file mode 100644 index 0000000..e53b5d1 --- /dev/null +++ b/BRAND.md @@ -0,0 +1,181 @@ +# 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-bedrijf** dat ICT-oplossingen bouwt voor overheid en maatschappelijk domein. 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. + +--- + +## 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. +- 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 kleuren zijn gebaseerd op de **officiële Nederlandse vlagkleuren**. + +| Rol | Naam | Hex | RGB | Gebruik | +|---|---|---|---|---| +| **Primary** | Kobaltblauw | `#21468B` | 33, 70, 139 | Merk, links, CTA's, koppen | +| **Secondary** | Windmolen-oranje | `#FF7F00` | 255, 127, 0 | Accenten, highlights, hover | +| **Tertiary** | Helder vermiljoen | `#AE1C28` | 173, 28, 40 | Spaarzaam — attentie, error-state | +| **Background** | Wit | `#FFFFFF` | 255, 255, 255 | Default achtergrond | + +### Waarom deze drie? + +- **Kobaltblauw** is officieel de blauwtint van de Nederlandse vlag. Donkerder dan onze oude lichtblauw, straalt betrouwbaarheid en stabiliteit uit. +- **Oranje** is expliciet *niet* het Rijkshuisstijl-oranje — we kiezen windmolen-oranje als onderscheidende accentkleur. Zo blijven we herkenbaar als bedrijf, niet als overheid. +- **Vermiljoen** is de officiële rode vlagkleur. Spaarzaam in te zetten voor attentie en error-states. + +### 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. + +### Do's + +- ✅ Gebruik cobalt voor structuur en primaire acties +- ✅ Gebruik oranje voor attentie zonder alarm (hover, nieuwe badge, highlight) +- ✅ Gebruik vermiljoen alléén voor echte attentie (error, destructieve actie) + +### Don'ts + +- ❌ Meng oranje en rood nooit in hetzelfde oppervlak +- ❌ Gebruik geen oranje voor grote vlakken (hero-achtergrond, sidebar) +- ❌ 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..4ac2501 --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,195 @@ +# 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.2:1, WCAG AAA). We kunnen cobalt dus óók voor body-tekst gebruiken, wat het merk consistenter maakt. + +**Afgewezen alternatieven:** +- *NLDS utrecht-blauw (`#154273`)*: ook donker, ook mooi — maar niet de officiële vlagkleur, dus geen Nederlandse associatie. +- *Midnight / navy (`#0C2D48`)*: te donker, gaat richting zwart, verliest kleuridentiteit. +- *Huidige lichtblauw behouden met extra gewicht via typografie*: overwogen, maar onvoldoende signaal van de gewenste richting. + +### Waarom windmolen-oranje `#FF7F00` als secundair, en niet rijkshuisstijl-oranje? + +Rijkshuisstijl-oranje (`#E17000`) is de accentkleur van de Nederlandse overheid. Als wij dat overnemen, worden we visueel verward met een overheidsdienst — ongewenst. Windmolen-oranje (`#FF7F00`) is: + +- Iets feller, duidelijk anders dan rijksoranje +- Associatief met Nederland (Oranje-boven, windmolens) zonder de Rijkshuisstijl-implicatie +- Een heldere accentkleur die op wit goed opvalt maar niet agressief is + +Oranje blijft beperkt tot ~8% van een oppervlak. Het is **accent**, geen hoofdkleur. + +### 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. + +### 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. + +--- + +## 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 + +### 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. + +--- + +## 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 + windmolen + vermiljoen, Figtree + IBM Plex Mono, zeshoek-wrapper behouden | Brand-initiatief | diff --git a/brand/README.md b/brand/README.md new file mode 100644 index 0000000..1a3d1cb --- /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: #FF7F00; + --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 `#FF7F00` (windmolen-oranje) om te onderscheiden van Rijkshuisstijl. | +| `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..a7037bd --- /dev/null +++ b/brand/tokens.json @@ -0,0 +1,168 @@ +{ + "$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": { + "windmill": { + "$value": "#FF7F00", + "$type": "color", + "$description": "Windmolen-oranje — steunkleur die onze identiteit onderscheidt van de Rijkshuisstijl." + } + }, + "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." + } + } + } + }, + + "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.windmill}", "$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." } + }, + "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.windmill}", "$type": "color", "$description": "Accent-tekst — spaarzaam, voor nadruk." } + }, + "link": { + "default": { "$value": "{color.primitive.blue.cobalt}", "$type": "color" }, + "hover": { "$value": "{color.primitive.orange.windmill}", "$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/profile/README.md b/profile/README.md index dfa8f45..9426d57 100644 --- a/profile/README.md +++ b/profile/README.md @@ -55,6 +55,15 @@ Our core competencies are the backbone of our company's success: - We offer knowledge and work collaboratively. - We prioritize integration, making systems work seamlessly together. +## 🎨 Design & Brand + +Our visual identity is grounded in Dutch heritage: cobalt blue from the national flag, windmill orange as our distinctive accent, and a hexagon that wraps every Conduction product. Full guidelines, logos and tokens live in this repo: + +- [BRAND.md](../BRAND.md) — brand guide (values, logo, colours, typography, do's & don'ts) +- [DESIGN.md](../DESIGN.md) — rationale behind our design choices +- [`brand/tokens.json`](../brand/tokens.json) — machine-readable design tokens (DTCG format) +- [`brand/assets/`](../brand/assets/) — logo SVGs (cobalt-on-white, white-on-cobalt, transparent) + ## 🌈 Join Our Team at Conduction Are you passionate about making the digital world more democratic, inclusive, and transparent? Do you thrive in an innovative and collaborative environment? If so, we'd love to have you join our team at Conduction! From 9d0cc18de3e846b01de6047530e5575139bc16b6 Mon Sep 17 00:00:00 2001 From: Ruben van der Linde Date: Thu, 23 Apr 2026 11:11:11 +0200 Subject: [PATCH 02/29] docs(brand): add rollout section to DESIGN.md Clarifies which surfaces (www.conduction.nl marketing site, docs.conduction.nl Docusaurus site, individual app-UIs) adopt the theme in which order and why. Marketing-first on merit of brand impact, with docs as parallel technical testbed. Defines what counts as "migrated" per surface. --- DESIGN.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/DESIGN.md b/DESIGN.md index 4ac2501..f849960 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -177,6 +177,41 @@ Spacing/radii/shadows (scope B) en componenttokens (scope C) volgen op basis van --- +## 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 windmolen-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: From 8fc950f8c0d278ce80d79cf515d381ff6aea5b0a Mon Sep 17 00:00:00 2001 From: Ruben van der Linde Date: Thu, 23 Apr 2026 11:27:01 +0200 Subject: [PATCH 03/29] feat(brand): switch secondary from windmill to KNVB orange (#F36C21) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaces wimpel-oranje #FF7F00 with KNVB-oranje #F36C21 as the brand secondary. Motivation (full version in DESIGN.md): - Softer, warmer pairing with cobalt (less buzz from a pure-complement 100%-saturation orange) - KNVB is the most universally recognisable "Nederlands oranje" — accessible patriotism via the national football team, without the Rijkshuisstijl (government) association - Better fit with the "innovative / trade-driven / human" side of the brief than wimpel's formal ceremonial feel Adds two new sections to DESIGN.md: - "Wat oranje betekent voor Conduction" — the accent color stands for warmth, accessibility, Dutch identity at mass-appeal level, and attention focus. Cobalt carries trust; orange carries movement. - "Overwogen kleurcombinaties" — comparison table placing our cobalt+KNVB pairing against Rabobank, ING, Rijkshuisstijl, KNVB itself, and the Dutch flag. Shows we sit in the gap between "too-dark banking navy" and "too-brown government orange". Adds a "Subtiel gebruik: de 8%-regel" section that spells out where orange belongs (focus rings, hover states, badges, icon accents, highlights) and where it does not (large fills, primary buttons, body text, multiple accents per screen). Token rename: color.primitive.orange.windmill -> color.primitive.orange.knvb. All semantic tokens updated to reference the new primitive. --- BRAND.md | 43 +++++++++++++++++++++--- DESIGN.md | 83 ++++++++++++++++++++++++++++++++++++++++++----- brand/README.md | 4 +-- brand/tokens.json | 12 +++---- profile/README.md | 2 +- 5 files changed, 123 insertions(+), 21 deletions(-) diff --git a/BRAND.md b/BRAND.md index e53b5d1..92c4b03 100644 --- a/BRAND.md +++ b/BRAND.md @@ -62,16 +62,29 @@ Onze kleuren zijn gebaseerd op de **officiële Nederlandse vlagkleuren**. | Rol | Naam | Hex | RGB | Gebruik | |---|---|---|---|---| | **Primary** | Kobaltblauw | `#21468B` | 33, 70, 139 | Merk, links, CTA's, koppen | -| **Secondary** | Windmolen-oranje | `#FF7F00` | 255, 127, 0 | Accenten, highlights, hover | -| **Tertiary** | Helder vermiljoen | `#AE1C28` | 173, 28, 40 | Spaarzaam — attentie, error-state | +| **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 | ### Waarom deze drie? - **Kobaltblauw** is officieel de blauwtint van de Nederlandse vlag. Donkerder dan onze oude lichtblauw, straalt betrouwbaarheid en stabiliteit uit. -- **Oranje** is expliciet *niet* het Rijkshuisstijl-oranje — we kiezen windmolen-oranje als onderscheidende accentkleur. Zo blijven we herkenbaar als bedrijf, niet als overheid. +- **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. +Zie [DESIGN.md](./DESIGN.md#waarom-knvb-oranje-f36c21-als-secundair) voor de volledige afweging, inclusief vergelijking met Rabobank, ING en Rijkshuisstijl. + +### 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: @@ -83,16 +96,38 @@ Richtlijn voor balans in vlakverdeling: 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, highlight) +- ✅ 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` --- diff --git a/DESIGN.md b/DESIGN.md index f849960..2346f23 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -37,15 +37,82 @@ Kobaltblauw `#21468B`: - *Midnight / navy (`#0C2D48`)*: te donker, gaat richting zwart, verliest kleuridentiteit. - *Huidige lichtblauw behouden met extra gewicht via typografie*: overwogen, maar onvoldoende signaal van de gewenste richting. -### Waarom windmolen-oranje `#FF7F00` als secundair, en niet rijkshuisstijl-oranje? +### Waarom KNVB-oranje `#F36C21` als secundair? -Rijkshuisstijl-oranje (`#E17000`) is de accentkleur van de Nederlandse overheid. Als wij dat overnemen, worden we visueel verward met een overheidsdienst — ongewenst. Windmolen-oranje (`#FF7F00`) is: +We hebben drie oranjetinten overwogen: wimpel-oranje `#FF7F00` (de letterlijke wimpel die boven de Nederlandse vlag wappert bij staatsaangelegenheden), Rijkshuisstijl-oranje `#E17000` (de accent­kleur van de Nederlandse overheid), en KNVB-oranje `#F36C21` (het oranje van het nationale elftal en bij uitbreiding de "Oranje"-beleving). -- Iets feller, duidelijk anders dan rijksoranje -- Associatief met Nederland (Oranje-boven, windmolens) zonder de Rijkshuisstijl-implicatie -- Een heldere accentkleur die op wit goed opvalt maar niet agressief is +**Rijkshuisstijl-oranje valt meteen af.** Die kleur is geassocieerd met "de overheid", en onze apps worden weliswaar *door* overheden gebruikt, maar Conduction is een bedrijf. Verwarring met een overheidsdienst is positionerings-schadelijk. -Oranje blijft beperkt tot ~8% van een oppervlak. Het is **accent**, geen hoofdkleur. +Tussen wimpel en KNVB gaat het om karakter en harmonie met cobalt: + +| Eigenschap | Wimpel `#FF7F00` | KNVB `#F36C21` | +|---|---|---| +| Hue | 30° (puur oranje) | 22° (licht rood-leanend) | +| Saturatie | 100% | 90% | +| Luminantie (L in HSL) | 50% | 54% | +| WCAG-contrast op cobalt | 3.58:1 | 3.01:1 (net 3:1-grens voor UI-accents) | +| Pairing met cobalt | Letterlijk complement — kan "buzzen" | Zachter, iets warmer, minder vibratie | +| Signaal | Officieel, institutioneel, "vlag-poster" | Warm, mass-appeal, "Oranjegekte" | +| Culturele lading | Wimpel = staatsaangelegenheden, ceremonieel | Elftal = toegankelijke patriottisme | + +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 + +### Overwogen kleurcombinaties — hoe staan wij tussen andere Nederlandse identiteiten? + +Cobalt + KNVB-oranje is geen onontgonnen terrein; meerdere Nederlandse merken combineren donkerblauw met een oranje-accent. De vraag is of onze combinatie voldoende **onderscheidend** is. + +| Identiteit | Blauw | Oranje | Karakter | Onderscheid t.o.v. Conduction 2026 | +|---|---|---|---|---| +| **Conduction 2026** (voorstel) | `#21468B` kobalt (L=34%) | `#F36C21` KNVB (H=22°) | Warm-professioneel, Nederlands-toegankelijk | — | +| **Rabobank** | `#000066` donker navy (L=20%) | `#FF6600` | Conservatief, bancair, traditioneel | Rabo's navy is véél donkerder (bijna zwart-blauw); hun oranje is feller en meer pure 30°. Bank-feel, niet product-feel. | +| **ING** | `#000066` donker navy (L=20%) | `#FF6200` | Modern bancair, fintech | Vrijwel identiek aan Rabobank qua blauw; iets roodder oranje. Blauw veel donkerder dan cobalt. | +| **Rijkshuisstijl** | `#154273` rijksblauw (L=27%) | `#E17000` rijksoranje (L=44%) | Formeel, overheid, institutioneel | Blauw iets donkerder dan cobalt; oranje duidelijk donkerder en bruiner. Overheids­associatie uitgesloten voor ons. | +| **KNVB / Oranje-elftal** | `#19284B` navy (L=20%) | `#F36C21` KNVB | Sport, nationale trots | Ons blauw is lichter en herkenbaarder als vlag-cobalt; oranje is identiek. | +| **Nederlandse vlag (officieel)** | `#21468B` kobalt | *(geen oranje; rood `#AE1C28`)* | Staatsembleem | Wij gebruiken exact hetzelfde blauw; oranje is voor ons secundair. | + +**Conclusie uit de tabel:** + +- Banken (Rabobank, ING) claimen het **donkerste** navy-oranje register. Hun navy (`#000066`) is ruwweg 14 L-punten donkerder dan onze cobalt — dat is een zichtbaar andere categorie. Onze cobalt ademt meer "daglicht" en ligt dichter bij de vlagtint. +- Rijkshuisstijl zit ertussen qua blauw maar kiest een bruiner oranje. Wij vermijden hun oranje. +- KNVB gebruikt ons exacte oranje, maar met donkerder navy. Het elftal-combo is niet verwarrend met ons, maar "borrowt" wel dezelfde Nederlandse warmte — dat is een feature, geen bug. +- Onze pairing (lichter cobalt + warmer oranje) zit in een "gat" tussen banken (te donker, te formeel) en overheid (te bruin, te institutioneel). Dat gat is precies waar een open-source-productbedrijf thuishoort: Nederlands, professioneel, maar niet corporate-stoffig of staatsdienst-streng. + +Als in de toekomst een concurrent in hetzelfde register komt, kunnen we onderscheiden via **toepassing en proportie** (de 8%-regel, hexagon-wrapper, typografie) — het is niet alleen het kleurenpalet dat ons kenbaar maakt. ### Waarom vermiljoen `#AE1C28` als tertiair? @@ -189,7 +256,7 @@ Het thema landt niet in één klap overal. Drie soorten oppervlakken met elk een ### 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 windmolen-oranje vertelt een ander verhaal over wie we zijn — die boodschap landt het eerst op de marketingsite. +- **`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. @@ -227,4 +294,4 @@ Deze noteren we alvast, maar lossen we niet in deze ronde op: | Datum | Wijziging | Besluit door | |---|---|---| -| 2026-04-23 | Introductie `theme-conduction-2026`: kobalt + windmolen + vermiljoen, Figtree + IBM Plex Mono, zeshoek-wrapper behouden | Brand-initiatief | +| 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 index 1a3d1cb..4dfa87c 100644 --- a/brand/README.md +++ b/brand/README.md @@ -30,7 +30,7 @@ Genereer met [Style Dictionary](https://amzn.github.io/style-dictionary/) of een ```css :root { --conduction-color-brand-primary: #21468B; - --conduction-color-brand-secondary: #FF7F00; + --conduction-color-brand-secondary: #F36C21; --conduction-color-brand-tertiary: #AE1C28; --conduction-color-background-default: #FFFFFF; --conduction-color-text-default: #21468B; @@ -77,7 +77,7 @@ Conduction volgt NL Design System waar een equivalent token bestaat, en definiee | 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 `#FF7F00` (windmolen-oranje) om te onderscheiden van Rijkshuisstijl. | +| `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. | diff --git a/brand/tokens.json b/brand/tokens.json index a7037bd..b736a71 100644 --- a/brand/tokens.json +++ b/brand/tokens.json @@ -12,10 +12,10 @@ } }, "orange": { - "windmill": { - "$value": "#FF7F00", + "knvb": { + "$value": "#F36C21", "$type": "color", - "$description": "Windmolen-oranje — steunkleur die onze identiteit onderscheidt van de Rijkshuisstijl." + "$description": "KNVB-oranje — warme, iets rood-leanende oranjetint. Secundaire steunkleur; herkenbaar Nederlands via associatie met het nationale elftal, zonder de Rijkshuisstijl-overheidslading." } }, "red": { @@ -81,7 +81,7 @@ "color": { "brand": { "primary": { "$value": "{color.primitive.blue.cobalt}", "$type": "color", "$description": "Primaire merkkleur — links, CTA's, focus, branding." }, - "secondary": { "$value": "{color.primitive.orange.windmill}", "$type": "color", "$description": "Secundaire merkkleur — accenten, highlights, badges." }, + "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." } }, "background": { @@ -91,11 +91,11 @@ "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.windmill}", "$type": "color", "$description": "Accent-tekst — spaarzaam, voor nadruk." } + "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.windmill}", "$type": "color" } + "hover": { "$value": "{color.primitive.orange.knvb}", "$type": "color" } }, "status": { "error": { "$value": "{color.primitive.red.vermillion}", "$type": "color" } diff --git a/profile/README.md b/profile/README.md index 9426d57..5488441 100644 --- a/profile/README.md +++ b/profile/README.md @@ -57,7 +57,7 @@ Our core competencies are the backbone of our company's success: ## 🎨 Design & Brand -Our visual identity is grounded in Dutch heritage: cobalt blue from the national flag, windmill orange as our distinctive accent, and a hexagon that wraps every Conduction product. Full guidelines, logos and tokens live in this repo: +Our visual identity is grounded in Dutch heritage: cobalt blue from the national flag, KNVB orange as our distinctive accent, and a hexagon that wraps every Conduction product. Full guidelines, logos and tokens live in this repo: - [BRAND.md](../BRAND.md) — brand guide (values, logo, colours, typography, do's & don'ts) - [DESIGN.md](../DESIGN.md) — rationale behind our design choices From 1b6aad30ca087ca652cb137c081eeef1f70691d1 Mon Sep 17 00:00:00 2001 From: Ruben van der Linde Date: Thu, 23 Apr 2026 11:41:45 +0200 Subject: [PATCH 04/29] docs(brand): strengthen DESIGN.md colour rationales with complete comparison tables Three improvements based on feedback that the colour section was asymmetric: 1. Blue had rationale but no side-by-side comparison table. Added one. Candidates compared: legacy #4376FC, cobalt #21468B (chosen), NLDS utrecht-blauw #154273, rijks-lint #01689B, midnight #0C2D48. Table shows HSL, contrast-on-white, body-text viability, cultural reference, and reason for selection or rejection. 2. Orange comparison table omitted Rijkshuisstijl (#E17000). Added it as a third column alongside wimpel and KNVB. Shows Rijks fails on three fronts simultaneously: worst contrast on cobalt (2.82:1, below WCAG 3:1), highest positioning risk (direct government signal), and darkest luminance (sinks into cobalt rather than popping). 3. The Dutch-brand comparison table (Rabobank, ING, Rijkshuisstijl, KNVB, flag) was buried as a subsection inside the KNVB-orange rationale. Promoted it to a standalone subsection "Positie tegenover andere Nederlandse merken" at the bottom of the colour section, after all individual colour rationales. Now discoverable as its own topic. Also added a note about the differentiation risk: no single brand matches our exact pair, but the combination can read as Rabobank/ING/government at a glance. Our differentiation therefore leans on proportion and application (the 8% rule, hexagon wrapper, Figtree, white dominance), not hex values alone. --- DESIGN.md | 97 ++++++++++++++++++++++++++++++++----------------------- 1 file changed, 56 insertions(+), 41 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index 2346f23..cd84ef3 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -30,32 +30,47 @@ 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.2:1, WCAG AAA). We kunnen cobalt dus óók voor body-tekst gebruiken, wat het merk consistenter maakt. +- **Heeft uitstekend contrast** op wit (≈ 9.05:1, WCAG AAA). We kunnen cobalt dus óók voor body-tekst gebruiken, wat het merk consistenter maakt. -**Afgewezen alternatieven:** -- *NLDS utrecht-blauw (`#154273`)*: ook donker, ook mooi — maar niet de officiële vlagkleur, dus geen Nederlandse associatie. -- *Midnight / navy (`#0C2D48`)*: te donker, gaat richting zwart, verliest kleuridentiteit. -- *Huidige lichtblauw behouden met extra gewicht via typografie*: overwogen, maar onvoldoende signaal van de gewenste richting. +We hebben vijf blauwtinten tegen elkaar afgezet voor we kobalt kozen: -### Waarom KNVB-oranje `#F36C21` als secundair? +| 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 | -We hebben drie oranjetinten overwogen: wimpel-oranje `#FF7F00` (de letterlijke wimpel die boven de Nederlandse vlag wappert bij staatsaangelegenheden), Rijkshuisstijl-oranje `#E17000` (de accent­kleur van de Nederlandse overheid), en KNVB-oranje `#F36C21` (het oranje van het nationale elftal en bij uitbreiding de "Oranje"-beleving). +**Waarom kobalt wint:** -**Rijkshuisstijl-oranje valt meteen af.** Die kleur is geassocieerd met "de overheid", en onze apps worden weliswaar *door* overheden gebruikt, maar Conduction is een bedrijf. Verwarring met een overheidsdienst is positionerings-schadelijk. +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. -Tussen wimpel en KNVB gaat het om karakter en harmonie met cobalt: +### Waarom KNVB-oranje `#F36C21` als secundair? -| Eigenschap | Wimpel `#FF7F00` | KNVB `#F36C21` | -|---|---|---| -| Hue | 30° (puur oranje) | 22° (licht rood-leanend) | -| Saturatie | 100% | 90% | -| Luminantie (L in HSL) | 50% | 54% | -| WCAG-contrast op cobalt | 3.58:1 | 3.01:1 (net 3:1-grens voor UI-accents) | -| Pairing met cobalt | Letterlijk complement — kan "buzzen" | Zachter, iets warmer, minder vibratie | -| Signaal | Officieel, institutioneel, "vlag-poster" | Warm, mass-appeal, "Oranjegekte" | -| Culturele lading | Wimpel = staatsaangelegenheden, ceremonieel | Elftal = toegankelijke patriottisme | +We hebben drie oranjetinten tegen elkaar afgezet: -KNVB wint op drie fronten: +| 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. @@ -92,28 +107,6 @@ Waar oranje uitdrukkelijk **niet** werkt: - Body-tekst op wit (wel voldoende contrast, maar te druk) - Meer dan één accent per scherm -### Overwogen kleurcombinaties — hoe staan wij tussen andere Nederlandse identiteiten? - -Cobalt + KNVB-oranje is geen onontgonnen terrein; meerdere Nederlandse merken combineren donkerblauw met een oranje-accent. De vraag is of onze combinatie voldoende **onderscheidend** is. - -| Identiteit | Blauw | Oranje | Karakter | Onderscheid t.o.v. Conduction 2026 | -|---|---|---|---|---| -| **Conduction 2026** (voorstel) | `#21468B` kobalt (L=34%) | `#F36C21` KNVB (H=22°) | Warm-professioneel, Nederlands-toegankelijk | — | -| **Rabobank** | `#000066` donker navy (L=20%) | `#FF6600` | Conservatief, bancair, traditioneel | Rabo's navy is véél donkerder (bijna zwart-blauw); hun oranje is feller en meer pure 30°. Bank-feel, niet product-feel. | -| **ING** | `#000066` donker navy (L=20%) | `#FF6200` | Modern bancair, fintech | Vrijwel identiek aan Rabobank qua blauw; iets roodder oranje. Blauw veel donkerder dan cobalt. | -| **Rijkshuisstijl** | `#154273` rijksblauw (L=27%) | `#E17000` rijksoranje (L=44%) | Formeel, overheid, institutioneel | Blauw iets donkerder dan cobalt; oranje duidelijk donkerder en bruiner. Overheids­associatie uitgesloten voor ons. | -| **KNVB / Oranje-elftal** | `#19284B` navy (L=20%) | `#F36C21` KNVB | Sport, nationale trots | Ons blauw is lichter en herkenbaarder als vlag-cobalt; oranje is identiek. | -| **Nederlandse vlag (officieel)** | `#21468B` kobalt | *(geen oranje; rood `#AE1C28`)* | Staatsembleem | Wij gebruiken exact hetzelfde blauw; oranje is voor ons secundair. | - -**Conclusie uit de tabel:** - -- Banken (Rabobank, ING) claimen het **donkerste** navy-oranje register. Hun navy (`#000066`) is ruwweg 14 L-punten donkerder dan onze cobalt — dat is een zichtbaar andere categorie. Onze cobalt ademt meer "daglicht" en ligt dichter bij de vlagtint. -- Rijkshuisstijl zit ertussen qua blauw maar kiest een bruiner oranje. Wij vermijden hun oranje. -- KNVB gebruikt ons exacte oranje, maar met donkerder navy. Het elftal-combo is niet verwarrend met ons, maar "borrowt" wel dezelfde Nederlandse warmte — dat is een feature, geen bug. -- Onze pairing (lichter cobalt + warmer oranje) zit in een "gat" tussen banken (te donker, te formeel) en overheid (te bruin, te institutioneel). Dat gat is precies waar een open-source-productbedrijf thuishoort: Nederlands, professioneel, maar niet corporate-stoffig of staatsdienst-streng. - -Als in de toekomst een concurrent in hetzelfde register komt, kunnen we onderscheiden via **toepassing en proportie** (de 8%-regel, hexagon-wrapper, typografie) — het is niet alleen het kleurenpalet dat ons kenbaar maakt. - ### Waarom vermiljoen `#AE1C28` als tertiair? Helder vermiljoen is de officiële rode vlagkleur. We nemen het op omdat: @@ -128,6 +121,28 @@ Vermiljoen is **nog spaarzamer** dan oranje (~2%). Overmatig rood voelt alarmere 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 From 676c0c2aaa5d648fdb5740211bd9d9b3336efa7a Mon Sep 17 00:00:00 2001 From: Ruben van der Linde Date: Thu, 23 Apr 2026 11:54:17 +0200 Subject: [PATCH 05/29] feat(brand): add website design brief + lift business-model shift to BRAND/DESIGN MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three coupled changes to PR #21, all serving the www.conduction.nl overhaul. 1. BRAND.md — three new company-wide sections: - "Wat we bouwen — een app-ecosysteem, geen consultancy" — Conduction is reframed as a product company. The ecosystem of Nextcloud apps is the primary business; projects, training and advisory services are supporting, not leading. Customers can use us without talking to us. - "Voor wie we bouwen" — audience shift codified. Primary: MKB (target). Secondary: overheid (current majority, in wind-down). Tertiary: OSS developers/integrators. Honest about the transition rather than pretending it's already complete. - "Apps & Solutions" — terminology standard for ALL Conduction communication. Apps are software products (OpenCatalogi); solutions are what you achieve with them (WOO compliance). One app serves many solutions; one solution needs a stack of apps. Bans phrases like "our WOO app" across all channels. 2. DESIGN.md — new section "Tone & visuele richting — implicaties van de positioneringsshift" — translates the BRAND.md positioning shifts into design implications valid company-wide, not website-specific: - Tone table: overheid-formal "u"/3e persoon/jargon → MKB-direct "je"/resultaat-centraal/scanbaar - Visual table: stockfoto/team/vergaderzaal → app-screenshots/hexagon/ UI-as-hero. Team photos retreat to About pages; apps take over hero slots. - Apps-vs-Solutions language rules for visual contexts (stack-diagrams, don't name apps after solutions). 3. briefs/website.md (new) — the actual website design brief, ~18 sections: purpose, strategic context, audiences, CTA hierarchy (primary task = install from Nextcloud app store), information architecture, page types, content types, tone, visual direction, i18n (bilingual NL/EN with NL default), accessibility, SEO (solution landing pages as SEO anchors), success metrics, out of scope, and a two-phase implementation approach (design-first in HTML+CSS mocks, Docusaurus implementation second). Launch scope: 11 core apps, 5 initial solutions. briefs/README.md establishes the per-surface brief convention (briefs/ dir for future drukwerk/presentation/app-UI briefs). Everything in the brief links back to BRAND.md, DESIGN.md and tokens.json rather than duplicating foundation content. Surface-specific insights that emerged during scoping (e.g. product-company tone) are lifted to the foundation docs so future surfaces can consume them. --- BRAND.md | 35 +++- DESIGN.md | 43 +++++ briefs/README.md | 14 ++ briefs/website.md | 417 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 508 insertions(+), 1 deletion(-) create mode 100644 briefs/README.md create mode 100644 briefs/website.md diff --git a/BRAND.md b/BRAND.md index 92c4b03..8f51959 100644 --- a/BRAND.md +++ b/BRAND.md @@ -9,7 +9,7 @@ Voor **machine-leesbare tokens**: zie [`brand/tokens.json`](./brand/tokens.json) ## Wie we zijn -Conduction is een **Nederlands open-source-bedrijf** dat ICT-oplossingen bouwt voor overheid en maatschappelijk domein. Onze identiteit leunt bewust op Nederlandse kernwaardes: +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. @@ -17,6 +17,39 @@ Conduction is een **Nederlands open-source-bedrijf** dat ICT-oplossingen bouwt v - **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. + +Projecten, training en advies bestaan als **ondersteunende diensten** rondom het ecosysteem — voor klanten die extra hulp willen bij implementatie, maatwerk of opleiding. Ze zijn secundair, niet leading. Alle merkcommunicatie (website, drukwerk, presentaties) leidt met de apps en het ecosysteem; services worden discreet vermeld voor wie er specifiek naar zoekt. + +## 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 diff --git a/DESIGN.md b/DESIGN.md index cd84ef3..e216297 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -259,6 +259,49 @@ Spacing/radii/shadows (scope B) en componenttokens (scope C) volgen op basis van --- +## 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: 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..3e51879 --- /dev/null +++ b/briefs/website.md @@ -0,0 +1,417 @@ +# Website Design Brief — www.conduction.nl (2026) + +**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 + +- [../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) + +**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 **www.conduction.nl** die bezoekers zo kort mogelijk naar de **Nextcloud app store** leidt. De site is de produkt-etalage van het Conduction-ecosysteem. + +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. + +| 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 | **Contact us** (discreet) | Footer, Services-pagina | + +**Regel:** CTA 1 is op elke app/solution-pagina zichtbaar zonder te scrollen. Andere CTA's mogen verderop. Contact is in de footer, niet in de hoofdnavigatie. + +## 5. Information Architecture + +### Hoofdnavigatie (header) + +1. **Apps** — de app-catalogus +2. **Solutions** — probleem-georiënteerde landingspagina's (WOO, registers, zaakafhandeling, ...) +3. **About** — wie we zijn, waardes, team +4. **Docs** (extern, → docs.conduction.nl) +5. **GitHub** (extern, → github.com/ConductionNL) +6. *(taalwisselaar NL/EN)* + +### Footer + +- Services (pagina, niet in hoofdnavigatie) +- 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 +/about wie we zijn +/services (discreet; niet in hoofdmenu) +/contact contactformulier +/404 fallback + +[per taal: /nl/... en /en/...] +``` + +## 6. Pagina-types + +### 6.1 Homepage + +**Job:** in ≤ 10 seconden duidelijk maken wat Conduction is, welke apps bestaan, en hoe je verder komt. + +Structuur van boven naar beneden: + +- **Hero** — korte pitch ("We bouwen een ecosysteem van Nextcloud-apps voor MKB en overheid") + primaire CTA ("Browse our apps" → /apps) + secundaire CTA ("Solve a problem" → /solutions). Visueel: app-screenshot of hexagon-compositie, geen teamfoto. +- **Featured apps** — 4–6 core apps in kaartvorm met hexagon-logo, naam, tagline, "Install" CTA +- **Top solutions** — 3–4 meest relevante solutions als teasers met "Read more" naar solution-pagina +- **Ecosystem-strip** — één beeld dat het verband toont tussen apps (interconnected, hexagon-rooster) +- **Proof** — installed-count, gemeenten/organisaties die ons gebruiken, GitHub-sterren +- **Footer** — zie boven + +**Geen** op de homepage: teamfoto, mission-statement lang verhaal, "onze diensten"-sectie, blog-feed als hero. + +### 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 Services (`/services`) + +**Job:** voor wie er specifiek naar zoekt bestaat deze pagina. Niet in hoofdmenu, wel indexeerbaar. + +Structuur: + +- "Het ecosysteem staat centraal, maar we helpen je graag ook met implementatie" +- Services: implementatie-ondersteuning, training, maatwerkadvies, integratie-projecten +- Voor welke doelgroep (voornamelijk overheid, maar open voor MKB) +- Contact-formulier of -CTA + +### 6.8 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.9 404 + +- Speelse hexagon-illustratie ("lost in the grid") +- Zoekveld +- Links naar /apps, /solutions, homepage +- Primary CTA: terug naar homepage + +## 7. Content types + +### App + +| 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 + +| 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). 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 terugkerend element.** App-logo's altijd in hexagon-wrapper. Sectiedividers of illustratie-elementen mogen hexagon-patronen gebruiken. +- **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 oranje highlights. Eén stijl door de hele site; 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. + +## 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:** `
`, `