Huisstijl en Branding

Eigenaar: Marketing
Reviewritme: Per kwartaal of bij wijziging van de TypeScript theme library
Laatst bijgewerkt: 2026-05-27

Doel

Dit document legt de basiskleuren en huisstijlrichtlijnen vast voor Martens Multimedia en gerelateerde digitale toepassingen. Het zorgt dat websites, apps, documenten en interne tooling dezelfde visuele basis gebruiken.

Wanneer gebruiken

Gebruik dit document bij het ontwerpen of aanpassen van digitale interfaces, documenttemplates, presentaties, landingspagina's en interne kennisbankpagina's.

Bron van waarheid

Dit document is de bron van waarheid voor de Martens Multimedia-kleuren en typografie.

De TypeScript-library wordt vanuit dit document bijgewerkt met:

npm run sync-theme

Het script schrijft naar:

../Typescript/packages/package-ui-components/src/theme-config.ts

Wijzig kleuren en fontfamilies dus eerst hier, en draai daarna het sync-script.

Kleurenpalet

Token	Waarde	Gebruik
`primaryBlue`	`#3a13f8`	Primaire merkactie, actieve navigatie, hoofdknoppen
`primaryBlueLight`	`#6c52ff`	Hover, gradient, lichte accenten
`primaryBlueDark`	`#2d0fcb`	Donkere variant van primaire merkactie
`primaryGreen`	`#30eb20`	Secundaire merkactie, positieve accenten, success states
`primaryGreenLight`	`#68f55d`	Lichte groene accenten
`primaryGreenDark`	`#1dad14`	Donkere groene accenten
`accentPink`	`#d66186`	Campagne- of visueel accent waar passend
`accentOrange`	`#ffa500`	Waarschuwing, aandachtspunt of opvallend accent
`accentOrangeLight`	`#ffbd47`	Lichte oranje accenten
`accentOrangeDark`	`#e69500`	Donkere oranje accenten
`folderGreen`	`#2e7d32`	Mappen, documentstructuur of beheeraccenten
`infoBlue`	`#38bdf8`	Informatieve status of ondersteunend blauw
`infoBlueLight`	`#7dd3fc`	Lichte informatietint
`infoBlueDark`	`#0284c7`	Donkere informatietint
`white`	`#ffffff`	Wit voor contrast en lichte panelen
`black`	`#000000`	Zwart voor contrast waar expliciet nodig
`defaultDark`	`#191919`	Algemene donkere basiswaarde
`canvasLight`	`#f4f6f8`	Achtergrondkleur voor lichte interfaces
`canvasDark`	`#12151b`	Achtergrondkleur voor donkere interfaces
`paperLight`	`#ffffff`	Kaarten, panelen en documentvlakken in lichte interfaces
`paperDark`	`#1b2029`	Kaarten en panelen in donkere interfaces
`surfaceLight`	`#ebeff5`	Subtiele vlakken en achtergrondbanden
`surfaceDark`	`#222938`	Subtiele vlakken in donkere interfaces
`textPrimaryLight`	`#0f172a`	Primaire tekst op lichte achtergrond
`textPrimaryDark`	`#f5f7fb`	Primaire tekst op donkere achtergrond
`textSecondaryLight`	`#5f6b7a`	Secundaire tekst op lichte achtergrond
`textSecondaryDark`	`#a3adbf`	Secundaire tekst op donkere achtergrond
`borderLight`	`rgba(15, 23, 42, 0.08)`	Randen in lichte interfaces
`borderDark`	`rgba(255, 255, 255, 0.08)`	Randen in donkere interfaces
`hoverLight`	`rgba(58, 19, 248, 0.04)`	Hover-state in lichte interfaces
`hoverDark`	`rgba(255, 255, 255, 0.05)`	Hover-state in donkere interfaces
`selectedLight`	`rgba(58, 19, 248, 0.08)`	Geselecteerde state in lichte interfaces
`selectedDark`	`rgba(58, 19, 248, 0.22)`	Geselecteerde state in donkere interfaces

Toepassing

Digitale interfaces

Gebruik primaryBlue als hoofdkleur voor navigatie, primaire knoppen en actieve states.
Gebruik primaryGreen spaarzaam als secundair accent of positieve bevestiging.
Gebruik accentOrange alleen voor aandachtspunten, waarschuwingen of visuele highlights.
Gebruik canvasLight, paperLight en surfaceLight voor rustige, leesbare achtergronden.
Gebruik tekstkleuren uit textPrimary* en textSecondary*; voorkom losse grijstinten zonder relatie met het palet.

Documenten en templates

Gebruik primaryBlue voor kopaccenten, lijnen of herkenbare merkdetails.
Gebruik surfaceLight voor subtiele achtergrondvlakken.
Gebruik accentOrange niet als hoofdkleur; alleen als markering.
Houd inhoudelijke documenten rustig en leesbaar. Kleur ondersteunt de structuur, maar draagt niet de inhoud.

Martens Mainframe

De MkDocs-site gebruikt deze kleuren in:

header-gradient
actieve sidebar-items
hover- en focus-states
wachtwoordscherm
knoppen en focusringen

Typografie

De technische theme library gebruikt deze fontfamilies:

Token	Fontfamilie	Gebruik
`main`	`"Roboto", "Arial", sans-serif`	Algemene interfacebasis
`brand`	`"Roboto Slab", "Roboto", "Arial", sans-serif`	Koppen en merkaccenten
`body`	`"Roboto", "Arial", sans-serif`	Lopende tekst
`mono`	`"Roboto Mono", "Courier New", monospace`	Code en technische waarden

Beheerafspraken

Wijzig kleuren en fontfamilies eerst in dit document.
Draai daarna npm run sync-theme om de TypeScript theme library bij te werken.
Controleer vervolgens toepassingen zoals websites, apps, templates en Martens Mainframe.
Voeg geen losse kleurvarianten toe zonder duidelijke functie.