/* ================================================================== MarketingOost designtokens voor datatools Bron van waarheid · v1.0 · 8 juli 2026 Gedestilleerd uit de Design-verkenning, gekozen uitwerkingen: 3a "Podium" → context rapport (partner-uitrol) 3b "Systeem" → context dashboard (intern, default) ================================================================== GEBRUIK intern partner REGELS 1. Componenten verwijzen uitsluitend naar semantische rollen (--accent, --surface, --chart-line, …), nooit naar merknamen of losse hexcodes. 2. Accentkleuren zijn voor vlakken en lijnen. Tekst in accentkleur alleen via --accent-text-safe (overal ≥ 4,5:1, WCAG AA). 3. Benchmarkkleuren (--chart-*) zijn uitsluitend vlak/lijn-kleuren; --chart-weerribben (goud, 1,9:1) nooit als tekstkleur. 4. Merk-als-context: hele view over één merk → data-brand zetten. Merk-als-datapunt: chrome blijft MO; reeksen krijgen hun vaste --chart-* benchmarkkleur. Partnerweergave licht het eigen merk uit en dempt de rest naar --chart-dim. 5. Kleuren gemarkeerd met (afgeleid) of (voorstel) zijn geen officiële huisstijlkleuren; wijzig ze alleen hier, nooit lokaal. 6. Schrijfstijl: geen gedachtestreepjes in copy, comments en labels; gebruik punt, dubbele punt, puntkomma of haakjes. Het minteken in negatieve waarden is U+2212, geen streepje. 7. Symbolen komen uit mo-symbolen.svg en hebben elk precies één vaste betekenis; nooit twee symbolen voor dezelfde functie. Raster 20, lijnbreedte 1.75, ronde uiteinden. De lijn volgt de tekstkleur (currentColor), het accentdetail kleurt mee met het merkthema en statussymbolen staan altijd in semantische kleur. ================================================================== */ /* ========== laag 0 · fundament (contextonafhankelijk) ============ */ :root { /* Typografie. Dax Pro is het officiële MO-font; Montserrat is de vastgestelde web-stand-in zolang Dax Pro niet als webfont staat. */ --font: "Dax Pro", "Montserrat", system-ui, -apple-system, sans-serif; /* Semantiek (identiek in beide contexten) */ --pos: #1B7F5C; --pos-bg: #E3F3EC; --neg: #BE3A2B; --neg-bg: #FAE9E6; --warn: #9A6A00; --warn-bg: #FBF0D9; --info: #2E6EB5; --info-bg: #E5EFF9; /* Focus (toetsenbordnavigatie) */ --focus: var(--info); /* Benchmarkpalet: vaste kleur per merk in álle vergelijkende grafieken, over tools heen. Afwijkingen van de hoofdkleur zijn bewust, om botsingen te vermijden: */ --chart-twente: #D9291C; /* afgeleid: FF0000 verdiept, rood blijft van Twente */ --chart-zwolle: #052AA0; /* officieel; enige navy */ --chart-visitoost: #005051; /* officieel (Hulst); zalm botst met DAH */ --chart-weerribben: #E8B62E; /* afgeleid uit FFCC4D; blauw botst met Salland/Zwolle */ --chart-salland: #5B98D2; /* officieel; middenblauw */ --chart-vechtdal: #D40068; /* officieel; enige roze */ --chart-hanzesteden: #4E9B9C; /* afgeleid uit 7FC1C2; rood botst met Twente */ --chart-heuvelrug: #00AACF; /* officieel (2e hoofdkleur); magenta botst met Vechtdal */ --chart-ijsseldelta: #26AA7B; /* officieel; enige groen */ --chart-dah: #CF4520; /* officieel (terracotta); zalm botst met VisitOost */ --chart-haaksbergen: #6E7B8A; /* voorstel; geen huisstijl vastgelegd */ --chart-dim: var(--border-strong); /* gedempte reeksen bij merk-uitlichting */ /* Sequentieel palet rond MO-paars: licht → donker */ --seq-1: #F7EEF6; --seq-2: #E7CFE4; --seq-3: #D2A9CD; --seq-4: #B87FB0; --seq-5: #985391; --seq-6: #7A2273; --seq-7: #56154F; /* Divergerend palet (MO-oranje ↔ MO-paars, neutraal midden) */ --div-1: #B85F00; --div-2: #F49807; --div-3: #FAC97E; --div-4: #F0EDEA; --div-5: #C9A0C6; --div-6: #99458F; --div-7: #7A2273; } /* ========== laag 1 · context ===================================== */ /* Dashboard (3b "Systeem"): temperatuurloos · strak · compact. Default: interne tools zijn het dagelijkse gebruik. */ :root, [data-context="dashboard"] { --bg: #F5F5F5; --surface: #FFFFFF; --surface-2: #EEEEEE; --border: #DDDDDD; --border-strong: #BDBDBD; --text: #202020; --text-2: #4E4E4E; --text-3: #797979; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-badge: 6px; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.07); --pad-page: 22px; --pad-card: 16px; --gap: 12px; --gap-lg: 28px; --pad-cell: 8px 12px; --pad-ctrl: 7px 11px; } /* Rapport (3a "Podium"): koel-neutraal · zacht · ruim. Voor rapportages en benchmarks richting regiopartners. */ [data-context="rapport"] { --bg: #F6F7F7; --surface: #FFFFFF; --surface-2: #EFF1F1; --border: #E0E3E3; --border-strong: #C2C7C7; --text: #1E2323; --text-2: #4C5555; --text-3: #7B8585; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-badge: 999px; --shadow-card: 0 12px 32px rgba(20, 30, 30, 0.09); --pad-page: 32px; --pad-card: 22px; --gap: 18px; --gap-lg: 40px; --pad-cell: 11px 14px; --pad-ctrl: 10px 14px; } /* ========== laag 2 · merkthema ==================================== Per merk: --accent (vlak/lijn), --accent-text-safe (tekst, AA), --accent-2 (klein tweede accent), --accent-soft (lichte tint voor badges/selected states), --chart-line + --chart-line-2 (reeksen in merkcontext), --chart-self (eigen benchmarkkleur, voor uitlichting). ================================================================== */ /* MarketingOost (default) */ :root, [data-brand="mo"] { --accent: #F49807; /* officieel */ --accent-text-safe: #8F5A00; /* afgeleid */ --accent-2: #7A2273; /* officieel */ --accent-soft: #FCEFDB; /* afgeleid */ --chart-line: var(--accent); --chart-line-2: #7A2273; --chart-self: var(--accent); /* MO is geen merk in benchmarks */ } [data-brand="twente"] { /* Visit Twente */ --accent: #FF0000; /* officieel */ --accent-text-safe: #C40000; /* afgeleid */ --accent-2: #878485; /* officieel */ --accent-soft: #FFE9E6; /* afgeleid */ --chart-line: var(--accent); --chart-line-2: #878485; --chart-self: var(--chart-twente); } [data-brand="visitoost"] { /* VisitOost */ --accent: #EB8C71; /* officieel (Goudvink) */ --accent-text-safe: #005051; /* officieel (Hulst) */ --accent-2: #952D6E; /* officieel (Rhododendron) */ --accent-soft: #F8F1EB; /* officieel (Paddestoel) */ --chart-line: var(--accent); --chart-line-2: #005051; --chart-self: var(--chart-visitoost); } [data-brand="salland"] { /* Visit Salland */ --accent: #5B98D2; /* officieel */ --accent-text-safe: #1F414A; /* officieel */ --accent-2: #3D8488; /* officieel */ --accent-soft: #EAF2F9; /* afgeleid */ --chart-line: var(--accent); --chart-line-2: #3D8488; --chart-self: var(--chart-salland); } [data-brand="heuvelrug"] { /* Sallandse Heuvelrug */ --accent: #B12B90; /* officieel */ --accent-text-safe: #B12B90; /* officieel; haalt zelf AA (5,8:1) */ --accent-2: #00AACF; /* officieel */ --accent-soft: #F5E3F1; /* afgeleid */ --chart-line: var(--accent); --chart-line-2: #00AACF; --chart-self: var(--chart-heuvelrug); } [data-brand="vechtdal"] { /* Vechtdal Marketing */ --accent: #D40068; /* officieel */ --accent-text-safe: #D40068; /* officieel; haalt zelf AA (4,8:1) */ --accent-2: #008BE1; /* officieel */ --accent-soft: #FCEBF3; /* afgeleid */ --chart-line: var(--accent); --chart-line-2: #008BE1; --chart-self: var(--chart-vechtdal); } [data-brand="weerribben"] { /* Weerribben Wieden */ --accent: #23A4C3; /* officieel */ --accent-text-safe: #005A60; /* officieel (Accent Groen) */ --accent-2: #F17C00; /* officieel */ --accent-soft: #E4F4F9; /* afgeleid */ --chart-line: var(--accent); --chart-line-2: #F17C00; --chart-self: var(--chart-weerribben); } [data-brand="zwolle"] { /* Visit Zwolle */ --accent: #052AA0; /* officieel */ --accent-text-safe: #052AA0; /* officieel; haalt zelf AA (11,4:1) */ --accent-2: #FC445C; /* officieel */ --accent-soft: #E7EBF8; /* afgeleid */ --chart-line: var(--accent); --chart-line-2: #E89920; /* officieel (okergeel) */ --chart-self: var(--chart-zwolle); } [data-brand="hanzesteden"] { /* Visit Hanzesteden */ --accent: #C0081F; /* officieel (Hanze Rood) */ --accent-text-safe: #C0081F; /* officieel; haalt zelf AA (6,4:1) */ --accent-2: #7FC1C2; /* officieel (Turquoise) */ --accent-soft: #F7DFE2; /* afgeleid */ --chart-line: var(--accent); --chart-line-2: #4E9B9C; /* afgeleid uit 7FC1C2 */ --chart-self: var(--chart-hanzesteden); } [data-brand="ijsseldelta"] { /* IJsseldelta */ --accent: #26AA7B; /* officieel */ --accent-text-safe: #187556; /* afgeleid; 26AA7B haalt geen AA (3,0:1) */ --accent-2: #09AFC4; /* officieel */ --accent-soft: #E3F4EE; /* afgeleid */ --chart-line: var(--accent); --chart-line-2: #09AFC4; --chart-self: var(--chart-ijsseldelta); } [data-brand="dah"] { /* Das Andere Holland */ --accent: #CF4520; /* officieel (Terracotta) */ --accent-text-safe: #833921; /* officieel (Donkerbruin) */ --accent-2: #FF8D6D; /* officieel (Zalm); nooit als tekst */ --accent-soft: #F9E7E2; /* afgeleid */ --chart-line: var(--accent); --chart-line-2: #833921; --chart-self: var(--chart-dah); } [data-brand="haaksbergen"] { /* Haaksbergen Natuurlijk: geen huisstijl vastgelegd; volledig voorstel (neutraal leigrijs) */ --accent: #6E7B8A; --accent-text-safe: #4E5966; --accent-2: #B7B2A9; --accent-soft: #ECEEF0; --chart-line: var(--accent); --chart-line-2: #4E5966; --chart-self: var(--chart-haaksbergen); }