10 · Identiteit / Systeem-rationale

Waarom deze kleuren, deze typografie, deze hex.

Elke systeemkeuze heeft een reden. Lees dit als iets willekeurig voelt, dat is het niet.

Kleur · waarom deze en niet de voor de hand liggende alternatieven
Primair

Kobaltblauw #21468B

Het officiële blauw van de Nederlandse vlag, zwaarder dan legacy SaaS-blauwen, lichter dan bank-navy. Het zegt betrouwbaar en Nederlands zonder nostalgisch of overheid-grijs te worden. Vult 20% van elk oppervlak, de proportie is de regel, niet alleen de hex.

Overwogen: Standaard-navy (#1E3A8A, te SaaS-tech-blauw) · Inter-blauw (#3B82F6, te generiek). Kobalt heeft Nederlandse identiteit ingebakken.
Accent · 8%-regel

KNVB-oranje #F36C21

Het oranje van het Nederlands voetbalelftal, warm, direct herkenbaar als Nederlands, maar geen Rijkshuisstijl-oranje (dat zou ons naar overheid-document-territorium trekken). Begrensd op ~8% van elk oppervlak. Nooit als primaire vulling, nooit als knop-achtergrond.

Overwogen: Rijkshuisstijl-oranje (#CB571B, te gemeente). Pantone Reflex Orange (#FF5800, te luid). KNVB zit op het warm-Nederlandse middelpunt.
Tertiair · spaarzaam

Vermiljoen-rood #AE1C28

Het rood van de Nederlandse vlag. Zeldzaam, voor status (errors, deletions, verbannen-woord-callouts) en voor het zeldzame moment dat we vlag-energie willen oproepen zonder op oranje te leunen. Begrensd op ~2% van elk oppervlak.

Overwogen: Standaard-error-rood (#DC2626, generiek). Vermiljoen heeft Nederlandse vlag-warmte zonder agressief te zijn.
Gast · alleen in ConNext-context

Nextcloud-blauw #0082C9

Nextcloud's officiële blauw. Een gastkleur in ons systeem, alleen gebruikt waar de context ConNext-specifiek is: de "Next" in de wordmark, de workspace-hex op platform-diagrammen, brand-citaten in copy. Nooit op functioneel "next" (volgende pagina, volgend jaar).

Regel: Stijl je een generiek UI-element, dan is dit niet je kleur. Citeer je Nextcloud het platform, dan wel.
Positie · ten opzichte van naburige Nederlandse paletten
Rijkshuisstijl
#154273
Conduction
#21468B
PostNL
#2065A8
ABN AMRO
#003366
ING
#FF6900

Kobalt zit bewust tussen overheid-blauw (te donker, te institutioneel) en corporate-blauw (te generiek, te SaaS). Zwaarder dan commerciële blauwen, lichter dan nationaal-overheid-blauwen, de plek voor een Nederlands open-source-productbedrijf.

Typografie · Figtree + IBM Plex Mono
Figtree · koppen & body Rond, kalm, humanistische sans-serif 400 · 500 · 600 · 700
Body + heading

Figtree

Ronde terminals, neutraal karakter, brede gewichtenreeks. Leest kalm, niet corporate-koud. Open Font License (OFL), dus bundlebaar. Werkt van 12px tot display-formaten zonder van karakter te wisselen.

Overwogen: Inter (te SaaS, terminals te puntig). Roboto (te Google). Manrope (te geometrisch). Figtree's rondheid geeft de brand zijn kalmte.
$ cookies --reconfigure # IBM Plex Mono → voor code, eyebrows, meta
Code + meta

IBM Plex Mono

Royale x-height, leesbaar op kleine maten, heeft karakter zonder schattig te worden. Voor codeblokken, eyebrows ("THE PLATFORM OVERVIEW"), code-style metadata en onze cookie-CLI-prompt. OFL-gelicentieerd.

Overwogen: JetBrains Mono (iets te techy). Source Code Pro (te neutraal). Plex Mono heeft de juiste mix van autoriteit + warmte.
Aa 9-stappen-ramp · 12 → 48px + display
Waarom geen display-font

Eén familie, meer gewichten.

We leveren geen aparte display-font. Figtree op 700 met negatieve letter-spacing handelt elke kop tot 64px af zonder een tweede typeface op te roepen. Minder laden, meer consistentie, minder foundry-licentievragen.

Beslissing: Een display-font is een tweede merkstem. Wij hebben er één. Figtree draagt de hele ramp.
Geen ligaturen Geen alternates Geen optionele stilistische sets
Typografische discipline

OpenType-features standaard uit.

Ligaturen, swashes, alternates, allemaal uit. Waarom? Ze renderen inconsistent over platforms heen (vooral WCAG-screenreaders + oudere PDF's) en trekken het oog op manieren die scanbaarheid schaden. Web-gerenderde Figtree leest altijd als Figtree.

Uitzondering: We zetten tabular-nums aan voor numerieke tabellen. Verder font-feature-settings: "liga" 0; op de root.
Hex-motief · altijd pointy-top, nooit flat-top
POINTY-TOP · de enige hex die we leveren
De vorm-regel

Pointy-top, elke keer.

Nergens in de brand flat-top-varianten. De pointy-top hex loopt door van app-iconen tot bullets, status-badges, paginatie, overal waar een vorm iets betekent. Functionele containers (knoppen, inputs, cards) blijven rechthoekig. Hexes wijzen aan. Rechthoeken doen.

Waarom geen flat-top? Flat-top hexes lezen als honingraat, food-tech, biologie, verkeerd industrie-signaal. Pointy-top leest als kristal, modulair systeem, doelgerichte constructie.
APP-ICOON
STATUS
PAGINATIE
RV
AVATAR
De hex als systeem

Bullets, badges, avatars, dividers.

Een logo-wrapper is pas het begin. De hex verschijnt als bullet op elke lijst, status-indicator naast elke app, avatar-wrapper voor elk teamlid, divider tussen secties, timeline-knoop in stap-diagrammen. Overal waar een vorm iets betekent is de hex die vorm.

Waar 'ie niet komt: knoppen, inputs, cards, modals, tabellen. Rechthoeken doen het werk; hexes wijzen aan.
Flat-isometrische hex-prism-stijl voor alle illustraties. Geen mensen, geen gezichten, geen mascottes. Geen stock-foto's, geen 3D-renders, geen gradient-achtergronden (behalve het Nextcloud-blauwe gradient op de workspace-hex).
Illustratie-richting

Flat-isometrisch hex-prism. Referentie: Honeycomb.io.

Hex-prisms, dezelfde pointy-top hex geëxtrudeerd met een lichte isometrische diepte, vlakke schaduw, geen Pixar-licht. Elke illustratie in het systeem gebruikt deze geometrie, met pastel-categorie-paletten per zijde. Referentie: het platform-overview-diagram van Honeycomb.

Wat we niet gebruiken: fotografie, 3D-renders, mascotte-figuren (OpenPeeps, Tom-Froese-stijl), gradient-achtergronden, neonverlichting. De geometrie draagt het beeld; we vullen het niet aan.