/* ============================================================ QEET DESIGN TOKENS — de enige bron van waarheid voor kleur, typografie, ruimte en vorm op qeet.tdclmbr.com. Bron merkkleuren: "Huisstijl QEET.pdf" (Brand Essentials, 25 juli 2021) uit de Qeet-merkdrive, map Logo's. Merk: #143228 donkergroen (Pantone 5535 C) #191E1E bijna-zwart (Pantone 419 C) #877350 goud (Pantone 871 C) #FF9B6E zalm (Pantone 163 C) #FFE1D2 licht-zalm (163 C @ 28%) LET OP twee bekende afwijkingen in het bronmateriaal: 1. Het logo-SVG gebruikt #062C27, niet de #143228 uit de gids. Wij volgen de gids. Laat het logo hierop bijtrekken. 2. De gids kent geen grijsschaal en geen statuskleuren. Alles onder "neutraal" en "status" hieronder is door ons afgeleid en getoetst op WCAG; dat is uitbreiding, geen huisstijl. Wijzig je een waarde? Doe het HIER en nergens anders. Geen losse hex in een template. Zie SITE-CONVENTIES paragraaf F. ============================================================ */ :root { color-scheme: light; /* --- Merk (letterlijk uit de huisstijl) ------------------- */ --qeet-groen: #143228; --qeet-zwart: #191E1E; --qeet-goud: #877350; --qeet-zalm: #FF9B6E; --qeet-zalm-licht: #FFE1D2; /* --- Vlakken --------------------------------------------- */ --surface-page: #F5F1EC; /* de pagina zelf */ --surface-card: #FFFFFF; /* kaarten, tabellen, grafieken*/ --surface-sunken: #EFE9E1; /* invoervelden, code, wells */ --surface-brand: #143228; /* donkere KPI-tegels, koppen */ --surface-accent: #FFE1D2; /* zachte merkvlakken */ /* --- Inkt (getoetst tegen kaart EN pagina) ---------------- ink-1 13.85 / 12.31 ruim AAA ink-2 9.23 / 8.21 ruim AAA ink-3 5.85 / 5.20 haalt AA <- was #8A97A6 op 2.64, faalde ink-op-brand: op --surface-brand */ --ink-1: #143228; --ink-2: #3F4A44; --ink-3: #6B6459; --ink-op-brand: #F2EFEA; --ink-op-brand-2: #C3C9C4; /* --- Randen ---------------------------------------------- border-subtle is decoratief (scheidingslijn binnen een kaart). border-strong haalt 3:1 en is verplicht zodra de rand BETEKENIS draagt: kaartgrens, tabelkop, focusring. De oude #E2DDD2 stond op 1.20 en was feitelijk onzichtbaar. */ --border-subtle: #E5DED4; --border: #D7CEC1; --border-strong: #948877; /* --- Status ---------------------------------------------- TEKST-varianten halen 4.5:1, gebruik die voor labels. MARK-varianten zijn voor vlakken, iconen en balken (>=3:1). Statuskleur NOOIT alleen: altijd icoon of woord ernaast. */ --status-good: #05684A; --status-good-mark: #00764F; --status-warn: #8A6714; --status-warn-mark: #B0862B; --status-danger: #B0302A; --status-danger-mark:#C4453D; --status-info: #2A5FA0; --status-info-mark: #2E6DB4; /* Zachte achtergronden voor badges en meldingsbalken. De statuskleur ernaast haalt op deze tinten nog steeds AA (good 5,68 · let-op 4,64 · fout 4,98 · info 5,18). Gebruik ze NOOIT met een andere tekstkleur dan hun eigen status. */ --tint-good: #DCEFE5; --tint-warn: #FAF1E0; --tint-danger: #F7DEDC; --tint-info: #DDE7F3; /* --- Accent ---------------------------------------------- De merkzalm #FF9B6E haalt 2.07 op wit en mag dus NOOIT tekstkleur zijn op een licht vlak. Als vlak of als tekst op donkergroen (6.70) werkt hij wel. Voor zalm-als-tekst op licht is er accent-ink. */ --accent: #FF9B6E; --accent-ink: #B4471A; --accent-soft: #FFE1D2; /* Primaire knop. Eigen token, want in donkere modus is het merkgroen donkerder dan de kaart en zou de knop wegvallen. */ --knop-bg: #143228; --knop-ink: #FFFFFF; --knop-bg-hover: #00764F; /* --- Grafiekseries --------------------------------------- Vaste volgorde, nooit doorrollen. Gevalideerd met scripts/validate_palette.js: alle checks PASS op wit, slechtste aangrenzende CVD dE 8.1, normaal zicht 17.1. BOVENGRENS: bij scatter/bubble/small-multiples (waar ELK paar naast elkaar kan vallen) zijn alleen slot 1 t/m 3 veilig. Meer series daar -> vouw samen tot "Overig" of splits in aparte grafieken. */ --serie-1: #00764F; /* groen */ --serie-2: #E56E36; /* zalm */ --serie-3: #2E6DB4; /* blauw */ --serie-4: #D25C8C; /* magenta */ --serie-5: #B0862B; /* goud */ --serie-6: #12A08C; /* teal */ --serie-7: #6A5AA8; /* violet */ --serie-8: #C4453D; /* rood */ /* Grafiekchroom */ --chart-grid: #E5DED4; --chart-axis: #C3B9A9; --chart-label: #6B6459; /* --- Typografie ------------------------------------------ Faro Lucky is het huisstijl-lettertype; de woff2's staan in assets/fonts/ en worden geladen door fonts.css. Laad DIE eerst, dan tokens.css, dan shell.css. De gids geeft een PRINT-schaal (kop 80 / subtitel 40 / body 18 pt). Die is hieronder vertaald naar 7 digitale stappen. Meer niet: er stonden 30 losse groottes in de templates. Faro Display is een aparte familie, alleen vanaf 28px. */ --font-ui: "Faro Lucky", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-kop: "Faro Display Lucky", "Faro Lucky", system-ui, sans-serif; --font-cijfers: var(--font-ui); --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --font-script: "Quentin Sonata Script", cursive; --tekst-xs: 11px; /* badges, voetnoten */ --tekst-sm: 12px; /* tabelcellen, bijschriften */ --tekst-base: 14px; /* body, de standaard */ --tekst-md: 16px; /* kaarttitels */ --tekst-lg: 20px; /* sectiekoppen */ --tekst-xl: 28px; /* KPI-waarden */ --tekst-2xl: 40px; /* het ene grote getal per pagina*/ --regel-strak: 1.25; --regel-body: 1.5; --gewicht-normaal: 400; --gewicht-medium: 500; --gewicht-vet: 600; /* Kleine kapitaal-labels. Dit was de laag die overal in te licht grijs stond; die staat nu op --ink-3 en haalt AA. */ --label-spatie: 0.06em; /* --- Ruimte (4px-ritme) ----------------------------------- */ --ruimte-1: 4px; --ruimte-2: 8px; --ruimte-3: 12px; --ruimte-4: 16px; --ruimte-5: 24px; --ruimte-6: 32px; --ruimte-7: 48px; /* --- Vorm ------------------------------------------------ Drie radii. Er stonden er 19 in de templates. */ --rond-sm: 4px; --rond-md: 8px; --rond-lg: 14px; --rond-pil: 999px; /* --- Diepte ---------------------------------------------- Drie niveaus. Er stonden 21 losse box-shadows. */ --diepte-1: 0 1px 2px rgba(20, 50, 40, 0.06); --diepte-2: 0 2px 8px rgba(20, 50, 40, 0.08); --diepte-3: 0 8px 24px rgba(20, 50, 40, 0.12); --focusring: 0 0 0 3px rgba(0, 118, 79, 0.35); --duur-snel: 120ms; --duur-normaal: 200ms; } /* ============================================================ DONKERE MODUS Eigen stappen, geen automatische omkering. Het seriepalet is opnieuw gevalideerd tegen het donkere vlak #13201C: alle checks PASS, slechtste aangrenzende CVD dE 8.2, normaal zicht 17.4. Ook hier geldt de bovengrens van 3 series bij alles-tegen-alles-vormen. Beide scopes zijn nodig: de media query volgt de OS-instelling, de data-theme-scope volgt de schakelaar van de gebruiker en moet in beide richtingen winnen. ============================================================ */ @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark; --surface-page: #0D1714; --surface-card: #13201C; --surface-sunken: #0A120F; --surface-brand: #04302A; --surface-accent: #3A2318; --ink-1: #F2EFEA; --ink-2: #C3C9C4; --ink-3: #98A19B; --ink-op-brand: #F2EFEA; --ink-op-brand-2: #C3C9C4; --border-subtle: #22302A; --border: #2C3A34; --border-strong: #5C6E64; --status-good: #46C093; --status-good-mark: #17A87D; --status-warn: #D9AE55; --status-warn-mark: #B78A32; --status-danger: #E88079; --status-danger-mark:#D0524C; --status-info: #7FAEE0; --status-info-mark: #5289CE; --tint-good: #12332A; --tint-warn: #33291A; --tint-danger: #3A1F1E; --tint-info: #182838; --accent: #FF9B6E; --accent-ink: #FFB694; --accent-soft: #3A2318; --knop-bg: #17A87D; --knop-ink: #0D1714; --knop-bg-hover: #46C093; --serie-1: #07795A; --serie-2: #E0703D; --serie-3: #5289CE; --serie-4: #CC6390; --serie-5: #B78A32; --serie-6: #17A88F; --serie-7: #8B7DC4; --serie-8: #D0524C; --chart-grid: #22302A; --chart-axis: #3E4E47; --chart-label: #98A19B; --diepte-1: 0 1px 2px rgba(0, 0, 0, 0.4); --diepte-2: 0 2px 8px rgba(0, 0, 0, 0.5); --diepte-3: 0 8px 24px rgba(0, 0, 0, 0.6); --focusring: 0 0 0 3px rgba(23, 168, 125, 0.45); } } :root[data-theme="dark"] { color-scheme: dark; --surface-page: #0D1714; --surface-card: #13201C; --surface-sunken: #0A120F; --surface-brand: #04302A; --surface-accent: #3A2318; --ink-1: #F2EFEA; --ink-2: #C3C9C4; --ink-3: #98A19B; --ink-op-brand: #F2EFEA; --ink-op-brand-2: #C3C9C4; --border-subtle: #22302A; --border: #2C3A34; --border-strong: #5C6E64; --status-good: #46C093; --status-good-mark: #17A87D; --status-warn: #D9AE55; --status-warn-mark: #B78A32; --status-danger: #E88079; --status-danger-mark:#D0524C; --status-info: #7FAEE0; --status-info-mark: #5289CE; --tint-good: #12332A; --tint-warn: #33291A; --tint-danger: #3A1F1E; --tint-info: #182838; --accent: #FF9B6E; --accent-ink: #FFB694; --accent-soft: #3A2318; --knop-bg: #17A87D; --knop-ink: #0D1714; --knop-bg-hover: #46C093; --serie-1: #07795A; --serie-2: #E0703D; --serie-3: #5289CE; --serie-4: #CC6390; --serie-5: #B78A32; --serie-6: #17A88F; --serie-7: #8B7DC4; --serie-8: #D0524C; --chart-grid: #22302A; --chart-axis: #3E4E47; --chart-label: #98A19B; --diepte-1: 0 1px 2px rgba(0, 0, 0, 0.4); --diepte-2: 0 2px 8px rgba(0, 0, 0, 0.5); --diepte-3: 0 8px 24px rgba(0, 0, 0, 0.6); --focusring: 0 0 0 3px rgba(23, 168, 125, 0.45); }