Structured Intelligence: één samenhangend systeem voor kleur, vorm en beweging.
Dit document is het bindende visuele naslagwerk voor Identitylab 2.0: kleurfilosofie en tokens met contrastrichtlijnen, typografische hiërarchie, iconografie, vormentaal, fotografie, illustratie, motion, lay-out en toepassing per kanaal. Geen felblauw, geen paars, geen neon en geen generieke AI-clichés — wel oordeel, ruimte en precisie.
Kleur als betekenis, niet als decoratie.
Het palet is bewust gedempt en aards: Carbon en Clear dragen het grootste deel van elke compositie, Knowledge Blue en Human Green geven betekenis, en Signal Coral blijft schaars als beslissingssignaal. Geen felblauw, geen paars, geen neon-tinten — elke kleur moet standhouden in een rustige, redactionele omgeving.
Carbon
Primair — autoriteit
Knowledge Blue
Merk — vertrouwen & intelligentie
Human Green
Secundair — samenwerking & vooruitgang
Signal Coral
Accent — schaars beslissingssignaal
Clear
Basis — hoofdsurface
Mist
Neutraal — structuur
Gebruiksverhouding per pagina
65–75% Clear/Paper · 15–20% neutrals (Mist/Fog) · 5–10% Carbon/inverse · 3–6% Knowledge Blue en Human Green samen · maximaal 2–3% Signal Coral. Coral is geen sectiekleur: het markeert uitsluitend de primaire actie of het belangrijkste inzicht.
Contrastrichtlijnen (WCAG 2.2 AA)
| Combinatie | Waarden | Contrastratio | Status |
|---|---|---|---|
| Carbon tekst op Clear | #171A1C op #F7F8F6 | 15.2 : 1 | AA & AAA |
| Clear tekst op Carbon | #F7F8F6 op #171A1C | 15.2 : 1 | AA & AAA |
| Knowledge Blue op Clear | #355E8A op #F7F8F6 | 6.1 : 1 | AA (tekst & UI) |
| Wit op Knowledge Blue | #F7F8F6 op #355E8A | 6.1 : 1 | AA (tekst & UI) |
| Human Green op Clear | #4B6B5B op #F7F8F6 | 5.4 : 1 | AA (tekst & UI) |
| Wit op Signal Coral | #F7F8F6 op #C9542E | 4.6 : 1 | AA (grote/UI-tekst) |
| Graphite metatekst op Clear | #4B5257 op #F7F8F6 | 6.8 : 1 | AA & AAA |
Regel: bodytekst nooit onder 4.5:1, grote koppen en UI-componenten nooit onder 3:1. Fouttoestanden gebruiken een gecontroleerd rood — nooit Signal Coral — zodat merkaccent en foutstatus visueel gescheiden blijven. Focusstaten gebruiken Knowledge Blue met een zichtbare outline en offset, en worden nooit verwijderd.
Doen
- Kleur inzetten om hiërarchie en actie te verduidelijken.
- Coral reserveren voor één primaire beslissing per view.
- Neutrals gebruiken voor rust tussen inhoudsblokken.
Niet doen
- Felblauw, paars, neon of verzadigde gradients gebruiken.
- Coral als achtergrondkleur of decoratief accent inzetten.
- Meer dan drie merkkleuren gelijktijdig tonen in één sectie.
Redactionele hiërarchie, rationeel opgebouwd.
Manrope draagt navigatie, koppen, cijfers en interface. Source Serif 4 wordt selectief ingezet voor langere inzichten, citaten en betekenisvolle redactionele passages. Geen serif in knoppen, navigatie of functionele labels; geen viewport-gekoppelde fontsizing — vaste, geteste stappen per breakpoint.
Modern, helder en rationeel zonder technologisch koud te worden. Draagt koppen, labels, navigatie, cijfers en controls. Premium alternatief bij ruimer licentiebudget: Söhne of Suisse Int'l.
Menselijk, geloofwaardig en comfortabel voor lange tekst, citaten en inleidingen. Nooit kleiner dan 18px. Premium alternatief bij ruimer licentiebudget: Tiempos.
Kopschaal (desktop / mobiel)
Doen
- Sentence case gebruiken, ook in grote koppen.
- Regelbreedte van koppen beperken tot 12–14 woorden.
- Tabular figures gebruiken in statistieken en tabellen.
Niet doen
- Volledige zinnen in kapitalen zetten.
- Serif gebruiken onder 18px of in interface-elementen.
- Kleur midden in een kop gebruiken als puur effect.
Iconen verduidelijken functie, ze versieren niets.
Monoline, geometrisch en terughoudend. Iconen ondersteunen navigatie en categorie — nooit gebruikt om lege ruimte te vullen of om "technologie" te suggereren via breinen, robots of sparkles.
- — Monoline, 1.75 px optische strokewidth op 24 px raster.
- — Overwegend geometrisch, licht afgeronde joins en caps — nooit gevuld of cartoonesk.
- — Eén concept = één icoon, overal in het systeem herbruikt.
- — Geen mix van outline- en filled-sets binnen dezelfde context.
- — Geen brein, robot, chip, sparkle of gloeiend netwerkbolletje om 'AI' te betekenen — toon structuur, niet techniek.
Structuur zichtbaar maken, niet versieren.
De vormentaal toont samenhang: lijnen die knooppunten verbinden, een onderliggend grid, en editoriale nummering. Geen zwevende bollen, particle fields, glazen kaarten of overdadige schaduwen.
Verbindingslijn
Eén dunne lijn (1px) die twee of meer punten verbindt. Toont samenhang tussen strategie, kennis, technologie en mensen.
Knooppunt
Kleine cirkel (6–10px) op een lijn of raster. Markeert een fase, beslissing of dataset — nooit gebruikt als losse decoratie.
Rooster / grid
Zichtbaar of onzichtbaar 12-koloms grid als onderliggende structuur voor tekst, media en compositie.
Genummerd blok
Editoriale nummering (01–06) voor pijlers, fases en argumenten. Vervangt decoratieve iconen door structuur.
Documentair, menselijk en zonder poserende clichés.
Beeld toont echte mensen, echte omgevingen en echt materiaal. Natuurlijk licht, gedempte, aardse kleurbewerking die aansluit bij het palet — geen koude blauwe of paarse tint-overlays, geen generieke "AI"-visuals met gloeiende netwerken.
Documentaire menselijke context
Echte leiders, teams en vakmensen tijdens denken, onderzoeken, structureren en samenwerken. Geen geposeerde stockbeelden van 'vergaderende mensen' of overdreven glimlachen.
Omgeving en materiaal
Werkplekken, notities, whiteboards, prototypes en documenten die de aanpak tastbaar maken.
Architecturale ruimte
Rustige, daglicht-gedreven interieurs en structuren die 'orde in complexiteit' visueel ondersteunen.
Portretten met karakter
Natuurlijk licht, neutrale achtergrond, oprechte blik. Geen zware retouche of gestileerde glamour.
Doen
- Cropped, documentaire beelden met precieze captions combineren.
- Kleurbewerking afstemmen op Carbon/Clear/Mist als basispalet.
- Mensen tonen tijdens denken, structureren en samenwerken.
Niet doen
- Generieke stockfoto's van glimlachende vergaderingen gebruiken.
- Blauwe/paarse technologie-overlays of lichtflares toevoegen.
- Robots, holografische schermen of futuristische dashboards tonen.
Diagrammen die betekenis tonen, geen decoratie.
Illustratie blijft functioneel: lijnstructuren, stappenschema's en dataviz die verbanden verduidelijken. Geen freeform illustratiestijl, geen mascottes, geen gestileerde "brein"-graphics.
Lijnwerk op raster
1px lijnen, knooppunten en labels op een onzichtbaar grid. Kleur uit het gedempte kernpalet, monochroom waar mogelijk.
Eerlijke datavisualisatie
Staafdiagrammen en tijdlijnen met tabular figures, duidelijke assen en bronvermelding. Geen 3D-effecten of overdreven schaalvertekening.
Systeemschema's
Tonen hoe strategie, kennis, technologie en mensen samenhangen — als proces, niet als abstracte technologie-esthetiek.
Rustige beweging die betekenis draagt.
Beweging bevestigt hiërarchie, richting en voortgang. Ze is functioneel en terughoudend — nooit speels, nooit een leeg technologie-effect.
Doel van beweging
Beweging toont richting, samenhang of voortgang — nooit decoratie of spektakel. Elke animatie moet betekenis toevoegen aan hiërarchie of navigatie.
Timing
160–240 ms voor interface-feedback (hover, focus, toggle). 400–700 ms voor entrance van content. Easing: ease-out voor entrance, ease-in-out voor herhaalde beweging.
Reveal-patroon
Content verschijnt met een korte, subtiele opwaartse fade (8–12px verplaatsing). Nooit bounces, overshoot of speelse fysica.
Lijnen & verbindingen
Verbindingslijnen tussen knooppunten tekenen zich eenmalig en rustig, als bewijs van samenhang — niet als doorlopende, aandacht-trekkende lus.
Eén accentbeweging per view
Maximaal één opvallende animatie per scherm. Overige elementen bewegen synchroon en terughoudend.
Reduced motion
prefers-reduced-motion: reduce schakelt alle niet-essentiële animatie uit; interface blijft volledig bruikbaar zonder beweging.
Een rationeel grid, redactioneel gepaced.
Elke pagina volgt hetzelfde onderliggende grid en dezelfde ritmiek: oriëntatie, kernstelling, uitleg, bewijs, betekenis en volgende stap.
Grid
12 koloms desktop (1280px content, 1440px outer), 8 koloms tablet, 4 koloms mobile. Vaste gutters van 24 / 20 / 16 px.
Ritme
Oriëntatie → Kernstelling → Uitleg → Bewijs → Betekenis → Volgende stap. Afwisseling via inhoudsvorm, niet via willekeurige achtergrondkleuren.
Surfaces
Maximaal drie semantische surfaces per pagina: basis (Clear), subtiele sectie (Mist) en inverse nadruk (Carbon).
Kaarten
Radius 6–8px, subtiele 1px border, geen permanente schaduw. Gelijke kolombreedte, ongelijke inhoudslengte toegestaan.
Witruimte
96–128px tussen secties op desktop; witruimte toont hiërarchie, is nooit lege decoratie.
Eén systeem, consistent per context.
Hetzelfde kleuren-, type- en vormsysteem past zich aan per kanaal zonder zijn identiteit te verliezen. Regels per kanaal maken duidelijk wat vast staat en wat context-specifiek is.
Website & digitale platformen
- Volledige typografische hiërarchie, 12-koloms grid, alle interactiestaten.
- Signal Coral uitsluitend voor primaire CTA's; max. 2–3% kleurgebruik per pagina.
- WCAG 2.2 AA als absoluut minimum, incl. focus states en reduced motion.
Presentaties & rapporten
- Eén kop, één argument, ruime marges — geen dichtgeslibde slides.
- Genummerde argumentatie en verbindingslijnen in plaats van clipart-iconen.
- Carbon en Clear als hoofdcontrast; Knowledge Blue en Human Green als data-accent.
Social & LinkedIn
- Eén heldere stelling per post, gedragen door structuur (lijn, nummer, grid) — geen stockfoto-collages.
- Coral wordt spaarzaam gebruikt als signature-accent, niet als achtergrondkleur.
- Beeldtaal blijft documentair en rustig, ook in een snel scrollend kanaal.
Sales- en offertedocumenten
- Zelfde tokens en typografie als de website; geen los 'salesdeck'-sjabloon.
- Bewijs dicht bij claims: methode, resultaat en context in dezelfde sectie.
- Coral gereserveerd voor het uiteindelijke voorstel of besluitmoment.
E-mail & nieuwsbrief
- Enkele kolom, Manrope voor koppen en UI, Source Serif 4 voor langere inzichten.
- Eén primaire actie per e-mail, secundaire links als tekstlink met pijl.
- Alt-tekst verplicht; kleurcontrast blijft AA-conform op alle clients.
Kantoor, briefpapier & merchandising
- Carbon en Clear als hoofdpalet; Coral als klein, gecontroleerd merkteken.
- Wordmark 'identitylab' met subtiele '2.0'-indicator, nooit vervormd of geroteerd.
- Materiaalkeuze rustig en degelijk: geen glans, geen felle plastic afwerking.
Hoe het systeem consistent blijft.
Structured Intelligence is bindend voor elk nieuw ontwerp, elke presentatie en elk extern document. Uitzonderingen vragen een expliciete afweging tegen de vijf ontwerpcriteria uit het UX-systeem.
Eén bron van waarheid
Componenten gebruiken altijd semantische tokens (achtergrond, actie, tekst) — nooit losse hexwaarden in code of ontwerp.
Vijf ontwerpcriteria
Elk nieuw element moet minstens vier van vijf vragen positief beantwoorden: duidelijkheid, vertrouwen, volgende stap, alle schermformaten, beheerst gevoel.
Periodieke audit
Kleur-, type- en beeldgebruik wordt per kwartaal getoetst aan dit document en aan WCAG 2.2 AA, met afwijkingen expliciet gelogd.
Dit systeem toepassen op uw eigen merk of kanaal?
We vertalen dit visuele systeem graag naar een concreet component- of merkpakket.