/* ===================================================================== SCOUTR 2.0 - tokens De enige plek waar kleuren, lettertypes, afstanden en radii staan. Geen losse hexwaarden elders in de codebase. Elke contrastverhouding hieronder is BEREKEND met tools/contrast.py, niet geschat. Het getal achter een kleur is de verhouding tegen de grond die erbij staat. Laatst doorgerekend: 2026-09-14 ===================================================================== */ :root { /* ------------------------------------------------------------------- GROND EN PANELEN ------------------------------------------------------------------- */ --sc-nachtgroen: #121A17; /* de grond van de hele site */ --sc-kampdoek: #1C2723; /* panelen, kaarten, invoervelden */ --sc-kampdoek-hoog: #243129; /* een paneel op een paneel */ /* ------------------------------------------------------------------- TEKST Doel was 7:1 voor lopende tekst. Beide halen dat ruim. ------------------------------------------------------------------- */ --sc-tekst: #F2EFE8; /* 15.42 op nachtgroen, 13.41 op kampdoek */ --sc-tekst-zacht: #C2CDC6; /* 10.83 op nachtgroen, 9.42 op kampdoek */ /* ------------------------------------------------------------------- TOUW - labels en kleine data ------------------------------------------------------------------- */ --sc-touw: #D6C49A; /* 10.31 op nachtgroen, 8.96 op kampdoek */ /* ------------------------------------------------------------------- ROZE - het accent uit het logo Let op: #E0417E haalt 4.41 op nachtgroen en 3.83 op kampdoek. Dat is genoeg voor GROTE tekst (>= 24px, of >= 18.66px vet) en voor iconen en randen, maar NIET voor lopende tekst. Gebruik roze dus nooit voor een zin, alleen voor koppen en accenten. Voor een roze VLAK met witte tekst erop is #E0417E te licht: wit haalt er 4.02 op. Daarom een halve tint donkerder voor vlakken. ------------------------------------------------------------------- */ --sc-roze: #E0417E; /* 4.41 op nachtgroen. Alleen grote tekst */ --sc-roze-tekst: #EE6E9E; /* 6.21 op nachtgroen, 5.40 op kampdoek - AA voor roze in LOPENDE tekst, waar #E0417E met 3.83 op kampdoek onder de grens zakt */ --sc-roze-vlak: #D2356C; /* wit erop: 4.70 - AA */ --sc-roze-vlak-op: #BE2A5E; /* dezelfde knop, aangewezen of ingedrukt */ --sc-roze-stil: rgba(224, 65, 126, .12); /* zachte vulling */ /* ------------------------------------------------------------------- DEN - bevestiging, matches, succes Zelfde verhaal als roze. #3E7A5E haalt 3.50 op nachtgroen: goed voor een vlak of een rand, te zwak voor tekst. Voor den ALS TEKST is er een lichtere tint die 7.24 haalt. ------------------------------------------------------------------- */ --sc-den: #3E7A5E; /* vlakken. Wit erop: 5.06 - AA */ --sc-den-vlak-op: #2F6B4F; /* wit erop: 6.29 - AA */ --sc-den-tekst: #6FB48C; /* 7.24 op nachtgroen, 6.29 op kampdoek - AAA */ --sc-den-stil: rgba(62, 122, 94, .14); /* ------------------------------------------------------------------- FOUT - rood, apart van roze zodat een foutmelding niet als accent leest ------------------------------------------------------------------- */ --sc-fout: #FF8B8B; /* 7.86 op nachtgroen, 6.83 op kampdoek - AA */ --sc-fout-vlak: #B3261E; /* wit erop: 6.54 - AA */ --sc-fout-stil: rgba(255, 139, 139, .12); /* ------------------------------------------------------------------- RANDEN WCAG vraagt 3:1 voor randen die betekenis dragen: invoervelden, knoppen, alles wat je kunt bedienen. Puur decoratieve scheidingslijnen mogen zwakker. ------------------------------------------------------------------- */ --sc-rand-stil: #2F3F39; /* 1.59 - alleen decoratief, nooit om een veld */ --sc-rand: #5B746B; /* 3.50 op nachtgroen, 3.05 op kampdoek - AA */ --sc-rand-sterk: #8FA79C; /* 6.89 op nachtgroen - aangewezen toestand */ /* ------------------------------------------------------------------- FOCUS 2px touw met 3px afstand, zoals afgesproken. Overal hetzelfde, ook op een roze knop, zodat de focusring nooit wegvalt in de knopkleur. ------------------------------------------------------------------- */ --sc-focus: var(--sc-touw); --sc-focus-dikte: 2px; --sc-focus-afstand: 3px; /* ------------------------------------------------------------------- HET MOTIEF - de geweven gekleurde band Een motief, meer niet. Boven en onder de pagina, en diagonaal over de swipefoto. ------------------------------------------------------------------- */ --sc-band: repeating-linear-gradient(115deg, #E0417E 0 12px, #F2EFE8 12px 24px, #3E7A5E 24px 36px, #D6C49A 36px 48px, #2F6FB3 48px 60px); --sc-band-maat: 96px 100%; /* ------------------------------------------------------------------- LETTERTYPEN Koppen: Bricolage Grotesque. Lopende tekst: Hanken Grotesk. Korte datalabels: Martian Mono, uitsluitend, maximaal drie woorden. ------------------------------------------------------------------- */ --sc-font-kop: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --sc-font-tekst: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif; --sc-font-data: "Martian Mono", ui-monospace, "Cascadia Mono", monospace; /* ------------------------------------------------------------------- TYPOGRAFISCHE SCHAAL Lopende tekst 17px, nooit lager. Kleine labels nooit onder 13px. De clamp-waarden schalen mee maar zakken nergens onder de ondergrens. ------------------------------------------------------------------- */ /* Twee maten lopende tekst. In de app telt dichtheid: je wil een lijst of een formulier in een oogopslag overzien. In lopende tekst telt leesbaarheid. 16px is de ondergrens die we onszelf opgelegd hebben en halen we overal; 17px gebruiken we waar iemand echt zit te lezen. */ --sc-t-xs: 12px; /* kleinste toegestane label */ --sc-t-sm: 13.5px; /* bijschrift, hulptekst */ --sc-t-base: 16px; /* de app */ --sc-t-lees: 17px; /* artikel, voorwaarden, over ons */ --sc-t-lg: 17px; --sc-t-xl: clamp(18px, .6vw + 16px, 21px); --sc-t-2xl: clamp(21px, 1.2vw + 17px, 26px); --sc-t-3xl: clamp(25px, 2.2vw + 18px, 34px); --sc-t-4xl: clamp(31px, 3.6vw + 20px, 50px); --sc-lh-strak: 1.08; /* grote koppen */ --sc-lh-kop: 1.22; /* kleine koppen */ --sc-lh-tekst: 1.55; /* lopende tekst */ --sc-spatie-data: .12em; /* alleen op Martian Mono, korte woorden */ /* ------------------------------------------------------------------- AFSTANDEN - schaal van 4px ------------------------------------------------------------------- */ --sc-r-1: 4px; --sc-r-2: 6px; --sc-r-3: 10px; --sc-r-4: 14px; --sc-r-5: 20px; --sc-r-6: 26px; --sc-r-7: 38px; --sc-r-8: 52px; --sc-r-9: 76px; /* ------------------------------------------------------------------- RADII ------------------------------------------------------------------- */ --sc-rond-sm: 8px; --sc-rond-md: 12px; --sc-rond-lg: 16px; --sc-rond-xl: 22px; --sc-rond-pil: 999px; /* ------------------------------------------------------------------- AANRAAKVLAK Minstens 44 bij 44. Elke knop, link-als-knop en formulierbediening gebruikt deze waarde als ondergrens. ------------------------------------------------------------------- */ /* 44px is de maat voor een VINGER. Met een muis is dat onnodig log en maakt het elke lijst en elk formulier dubbel zo hoog. De waarde verspringt daarom met het aanwijsapparaat, niet met de schermbreedte: een aanraakscherm van 1400px krijgt gewoon 44. */ --sc-raak: 38px; /* ------------------------------------------------------------------- SCHADUW EN BEWEGING ------------------------------------------------------------------- */ --sc-schaduw-sm: 0 2px 6px rgba(0, 0, 0, .30); --sc-schaduw-md: 0 10px 30px rgba(0, 0, 0, .38); --sc-schaduw-lg: 0 24px 60px rgba(0, 0, 0, .46); --sc-duur-snel: .16s; --sc-duur: .24s; --sc-duur-traag: .42s; --sc-soepel: cubic-bezier(.2, .8, .3, 1); /* ------------------------------------------------------------------- BREEDTES ------------------------------------------------------------------- */ --sc-breed: 1120px; /* gewone inhoudsbreedte */ --sc-breed-smal: 600px; /* formulieren */ --sc-breed-lees: 70ch; /* lopende tekst, ongeveer 65 tekens */ --sc-goot: 20px; /* zijmarge, wordt breder op grote schermen */ } @media (min-width: 700px) { :root { --sc-goot: 24px; } } /* Wie met een vinger werkt krijgt de volle 44px, zoals WCAG 2.5.5 vraagt. Wie met een muis werkt niet, want daar is 38px ruim en blijft de pagina strak. `pointer: coarse` is de enige betrouwbare manier om dat te weten: schermbreedte zegt er niets over. */ @media (pointer: coarse) { :root { --sc-raak: 44px; } } /* --------------------------------------------------------------------- Wie minder beweging wil, krijgt minder beweging. Alles wat met deze duurtokens werkt, staat hiermee in een klap stil. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --sc-duur-snel: 0s; --sc-duur: 0s; --sc-duur-traag: 0s; } } /* ===================================================================== GEBRUIKSREGELS, kort 1. Roze en den staan nooit naast elkaar. Roze is het merk, den is bevestiging. Samen in beeld lezen ze als kerstversiering. 2. Roze is nooit de kleur van een zin. Alleen koppen, iconen, randen en vlakken. 3. Martian Mono alleen voor losse labels van maximaal drie woorden, met --sc-spatie-data. Nooit voor een zin. 4. Tekst komt nooit rechtstreeks op een foto. Er ligt een verloop of een vlak tussen. 5. Een rand om iets bedienbaars gebruikt --sc-rand, niet --sc-rand-stil. ===================================================================== */