/* ========================================================================== INSITELY TOKENS, kopie voor de webapp Versie 2.3, 27 augustus 2026 Eenmalig samengevoegd uit de huisstijlmap C:\Data\OneDrive - Insitely\AI\Huisstijl: css\insitely-fonts-web.css de zes @font-face css\insitely-tokens.css het :root-blok De legacy aliassen zijn op 28 augustus 2026 uitgefaseerd: alle 285 verwijzingen zijn omgezet naar de --in- namen. De huisstijlmap is de bron. Wijzig kleur of typografie daar, niet hier. Importeer dit als eerste, voor elke andere stylesheet. Regel: geen enkele andere stylesheet bevat nog een hex-waarde. ========================================================================== */ /* --- 1. Fonts, uit insitely-fonts-web.css ------------------------------- */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap; src:url('/static/fonts/montserrat-v31-latin-regular.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap; src:url('/static/fonts/montserrat-v31-latin-italic.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap; src:url('/static/fonts/montserrat-v31-latin-500.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:italic;font-weight:500;font-display:swap; src:url('/static/fonts/montserrat-v31-latin-500italic.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap; src:url('/static/fonts/montserrat-v31-latin-800.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:italic;font-weight:800;font-display:swap; src:url('/static/fonts/montserrat-v31-latin-800italic.woff2') format('woff2')} /* --- 2. Tokens, uit insitely-tokens.css --------------------------------- */ :root { /* --- Blauwen ------------------------------------------------ Gouden regel 1: één basis per medium. Digitaal bouwt op --in-navy, print bouwt op --in-blue. Gouden regel 2: die twee nooit samen op dezelfde drager. */ --in-navy: #002844; /* digitale basis */ --in-navy-deep: #001B2E; /* footers, diepste vlak */ --in-blue: #1C4966; /* printblauw, print-basis, nooit op scherm */ --in-blue-mid: #2D7397; /* blogs en redactionele dragers */ --in-light-blue: #99D9F2; /* alleen op donker */ --in-blue-100: #D6ECF6; /* licht blauw vlak, blogs */ --in-blue-50: #EFF7FB; /* zeer licht blauw vlak, blogs */ /* --- Accent ------------------------------------------------- Gouden regel 3: accent blijft accent, nooit als vlak. Gouden regel 4: nooit als letter op wit. */ --in-verde-scandal: #A6E800; /* het enige accent */ --in-verde-scandal-dark: #8DC500; /* hover en active */ /* --- Neutralen ---------------------------------------------- */ --in-ink: #26261F; /* Iron Ore Deep, donkere tekst */ --in-iron-ore: #434343; /* signatuur, fysiek SW 7069 = #434341, nooit UI */ --in-mist: #95A3AB; /* Iron Ore Light, alleen op donker */ --in-text-muted: #5B5B54; /* bijschriften op licht */ --in-line: #D9DEE1; /* randen en scheidingslijnen */ --in-wash: #F7F9FA; /* rustige achtergrond, tabelkoppen */ --in-white: #FFFFFF; /* --- Status ------------------------------------------------- Gouden regel 7: rood alleen op lichte dragers. Gouden regel 8: geen waarschuwingskleur. Gebruik --in-mist. */ --in-error: #C0392B; --in-error-bg: #FBEDEB; --in-success: #1E7A4A; /* niet als reekskleur naast Verde Scandal */ --in-success-bg: #EAF5EF; /* --- Semantische laag --------------------------------------- Deze verwijzen alleen naar de kleuren hierboven, nooit naar een eigen hex. insitely-kit.css bouwt hierop. Gemeten op de live site: text, text-on-dark, text-link, text-link-dark, btn-*, border-strong, focus, font-body, font-mono, radius-*, pad. Afgeleid uit de gouden regels: bg, bg-subtle, bg-dark, bg-darker, border, text-muted-dark, text-muted-print, text-accent-dark, font-display, weight-body, weight-display. Gemeten op de live site en bevestigd: maxw 1180. */ --in-bg: var(--in-white); --in-bg-subtle: var(--in-wash); --in-bg-dark: var(--in-navy); --in-bg-darker: var(--in-navy-deep); --in-text: var(--in-ink); --in-text-on-dark: var(--in-white); --in-text-muted-dark: var(--in-mist); /* gouden regel 5 */ --in-text-muted-print: var(--in-light-blue); /* op printblauw, 6,2 */ --in-text-accent-dark: var(--in-verde-scandal); --in-text-on-verde-scandal: var(--in-ink); /* 10,3 */ --in-text-link: var(--in-navy); /* altijd onderlijnd */ --in-text-link-dark: var(--in-light-blue); --in-border: var(--in-line); --in-border-strong: var(--in-mist); --in-focus: var(--in-verde-scandal); --in-shadow-card: 0 1px 2px rgba(38, 38, 31, .06), 0 8px 24px rgba(38, 38, 31, .06); --in-focus-ring: 0 0 0 3px rgba(0, 40, 68, .12); --in-btn-bg: var(--in-navy); --in-btn-border: var(--in-verde-scandal); --in-btn-text: var(--in-verde-scandal); --in-btn-bg-hover: var(--in-verde-scandal); --in-btn-text-hover: var(--in-ink); /* --- Typografie --------------------------------------------- Montserrat voor alles, zelf gehost, geen Google Fonts CDN. 800 koppen, 500 labels en knoppen, 400 lopende tekst. */ --in-font: 'Montserrat', system-ui, sans-serif; --in-font-body: var(--in-font); --in-font-display: var(--in-font); --in-font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; --in-weight-regular: 400; --in-weight-medium: 500; --in-weight-extrabold: 800; --in-weight-body: var(--in-weight-regular); --in-weight-display: var(--in-weight-extrabold); /* Printset: papier en klantdocumenten */ --in-doc-body: 11pt; /* klantdocumenten minstens 12pt */ --in-doc-lead: 12pt; /* Medium 500, de introzin */ --in-doc-heading: 13pt; /* ExtraBold, in printblauw */ --in-doc-table: 10.5pt; --in-doc-caption: 9.5pt; --in-doc-line-height: 1.3; --in-page-margin-x: 18mm; --in-page-margin-bottom: 15mm; /* Schermset: styleguide, dashboards, interne naslag */ --in-ui-body: 13pt; --in-ui-heading: 15pt; /* ExtraBold, in navy */ --in-ui-label: 9.8pt; /* 0.18em, kapitalen */ --in-ui-table: 12pt; --in-ui-table-head: 9.5pt; /* 0.13em, kapitalen */ --in-ui-btn: 11pt; /* Medium 500 */ --in-ui-caption: 11pt; --in-ui-title: 31pt; /* ExtraBold, wit op navy */ --in-ui-line-height: 1.45; --in-ui-margin-x: 21mm; --in-ui-margin-top: 14mm; --in-ui-margin-bottom: 13mm; /* --- Componenten -------------------------------------------- */ --in-maxw: 1180px; /* gemeten op de live site */ --in-pad: 24px; --in-radius-sm: 6px; --in-radius-md: 12px; --in-radius-lg: 20px; --in-radius-btn: 20px; --in-btn-radius: var(--in-radius-btn); --in-btn-padding: 13px 26px; --in-btn-border-width: 2px; /* niet vastgelegd in de styleguide */ --in-mark-width: 4px; /* niet vastgelegd in de styleguide */ }