/* ========================================================================== Spoor, planningstool EJV Ontwerptokens, versie 1, 31 augustus 2026 Eén bestand met alle waarden uit het ontwerp: kleuren, de kleurenreeks voor de sporen, afstanden, lettergroottes en de maten van knoppen en velden. Afspraken die bij deze waarden horen: - Geen ronde hoeken en geen schaduwen. Vlakken worden gescheiden door lijnen van 1 pixel. - Alles met een cijfer erin (datum, tijd, weeknummer, bestandsgrootte) staat in de monospace, zodat kolommen recht onder elkaar lopen. - Kleur is nooit de enige drager van betekenis. Elk spoor heeft ook een kode van twee letters, en in de tijdbalk een eigen stipvorm. - Alles wat je kunt aanraken is minimaal 44 bij 44 punten. ========================================================================== */ :root { /* --- Letters ----------------------------------------------------------- Drie families. Newsreader voor koppen en datums in het groot, IBM Plex Sans voor gewone tekst en knoppen, IBM Plex Mono voor cijfers. Alle drie gratis via Google Fonts. */ --font-kop: "Newsreader", Georgia, serif; --font-tekst: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-cijfer: "IBM Plex Mono", ui-monospace, monospace; /* Koppen, Newsreader 400 */ --kop-1-size: 60px; --kop-1-line: 1.02; --kop-1-weight: 400; --kop-1-spacing: -0.015em; --kop-2-size: 36px; --kop-2-line: 1.10; --kop-2-weight: 400; --kop-2-spacing: -0.01em; --kop-3-size: 30px; --kop-3-line: 1.10; --kop-3-weight: 400; --kop-3-spacing: 0; --kop-4-size: 26px; --kop-4-line: 1.15; --kop-4-weight: 400; --kop-4-spacing: 0; --kop-5-size: 22px; --kop-5-line: 1.20; --kop-5-weight: 400; --kop-5-spacing: 0; /* Tekst, IBM Plex Sans. 500 voor titels van items, 400 voor de rest. Let op: velden op de telefoon minimaal 16px, anders zoomt iOS in. */ --tekst-l-size: 17px; --tekst-l-line: 1.55; --tekst-l-weight: 400; --tekst-m-size: 15px; --tekst-m-line: 1.45; --tekst-m-weight: 400; --tekst-m-nadruk-weight: 500; --tekst-s-size: 14px; --tekst-s-line: 1.40; --tekst-s-weight: 400; --tekst-xs-size: 13px; --tekst-xs-line: 1.40; --tekst-xs-weight: 400; --tekst-mini-size: 12px; --tekst-mini-line: 1.40; --tekst-mini-weight: 400; /* Label, klein en in kapitalen, boven een blok. Plex Mono 400. */ --label-size: 11px; --label-line: 1.20; --label-weight: 400; --label-spacing: 0.10em; --label-transform: uppercase; /* Cijfers, IBM Plex Mono */ --cijfer-xl-size: 28px; --cijfer-xl-line: 1.10; --cijfer-xl-weight: 500; --cijfer-xl-spacing: -0.02em; --cijfer-l-size: 18px; --cijfer-l-line: 1.20; --cijfer-l-weight: 500; --cijfer-m-size: 15px; --cijfer-m-line: 1.50; --cijfer-m-weight: 400; --cijfer-s-size: 13px; --cijfer-s-line: 1.30; --cijfer-s-weight: 500; --cijfer-xs-size: 11px; --cijfer-xs-line: 1.30; --cijfer-xs-weight: 400; --cijfer-mini-size: 10px; --cijfer-mini-line: 1.20; --cijfer-mini-weight: 600; /* Zet dit op elk element met cijfers erin */ --cijfer-variant: tabular-nums; /* --- Ondergrond en tekst, licht ---------------------------------------- */ --papier-1: #F8F4EC; /* vlakken: kaarten, velden, itemblokjes */ --papier-2: #F3EDE3; /* achtergrond van een scherm */ --papier-3: #E7E0D3; /* buiten het scherm, rustpunt tussen blokken */ --ink: #211D18; /* tekst, primaire knop, ankerlijn */ --ink-2: #3A342C; /* toelichting en langere tekst */ --ink-3: #6B6357; /* labels en bijzaken */ --ink-4: #8C857B; /* uitgezet, afgerond, uurlabels */ --ink-op-donker-vlak: #F8F4EC; /* tekst op ink of op een spoorkleur */ --lijn: rgba(33, 29, 24, 0.16); /* standaard scheiding, 1px */ --lijn-zwak: rgba(33, 29, 24, 0.08); /* uurlijnen in het weekraster */ --lijn-sterk: rgba(33, 29, 24, 0.30); /* rand van een veld, buitenrand */ --let-op: #A8412C; /* fout, waarschuwing, vandaag */ --let-op-vlak: #FBF1EE; /* achtergrond van een foutmelding */ --let-op-lijn: rgba(168, 65, 44, 0.50); --vandaag-vlak: rgba(168, 65, 44, 0.05); /* kolom of week van vandaag */ /* --- Accent ------------------------------------------------------------ Eén accentkleur: donker potloodblauw. Bewust donkerder en koeler dan alle spoorkleuren, zodat je het nooit voor een spoor aanziet. Wel gebruiken voor: - de hoofdactie op een scherm (Opslaan, Item toevoegen, Nu een back-up maken). Eén per scherm, de andere knoppen blijven lijn of tekst. - het menu-item waar je nu bent: tekst in de accentkleur met een streep van 2 px eronder, dus niet alleen een grijstint. - de focusrand als je met het toetsenbord door de velden loopt. - links in een tekst. Niet gebruiken voor: - sporen, die houden hun eigen kleur. - vandaag, fouten en waarschuwingen, die blijven --let-op. - vlakken, kaders, achtergronden en versiering. */ --accent: #123C63; --accent-hover: #1A5384; --accent-ink: #F8F4EC; /* tekst op de accentkleur */ --accent-zwak: rgba(18, 60, 99, 0.14); /* focusrand en actieve rij */ /* Menu: onderbalk op de telefoon, rij bovenin op het brede scherm */ --menu-ink: #6B6357; /* niet actief */ --menu-actief-ink: #123C63; --menu-actief-gewicht: 600; --menu-actief-streep: 2px; --menu-actief-streep-kleur: #123C63; --waas: rgba(33, 29, 24, 0.45); /* achter een geopend venster */ --schaduw: none; --radius: 0; /* --- Ondergrond en tekst, donker --------------------------------------- Voor 's avonds. De tool volgt de stand van de telefoon, met in de instellingen een vaste keuze voor licht of donker. */ --donker-1: #17150F; --donker-2: #201D16; --donker-3: #2B271E; --donker-ink: #EDE6D8; --donker-ink-2: #C9C1B2; --donker-ink-3: #948C7E; --donker-lijn: rgba(237, 230, 216, 0.16); --donker-lijn-sterk: rgba(237, 230, 216, 0.25); --donker-let-op: #E08A72; /* --- De sporen --------------------------------------------------------- Elf kleuren, allemaal ongeveer even donker en even verzadigd, zodat ze naast elkaar rustig blijven, ook als er veel items in beeld staan. Elke kleur haalt op papier ten minste 4,5 op 1 contrast met de lichte ondergrond, dus tekst in deze kleur is leesbaar. Per spoor drie waarden: -kleur op de lichte ondergrond -donker dezelfde kleur, lichter gemaakt voor de donkere stand -tint hetzelfde met 12 procent dekking, voor het vlak van een blokje in het weekraster Plus een kode van twee letters, want kleur staat er nooit alleen voor. De laatste drie zijn vrij: gebruik ze voor sporen die Erik later toevoegt. Meer dan elf sporen tegelijk in beeld wordt onrustig, dan is archiveren beter dan een twaalfde kleur verzinnen. */ --spoor-1-kleur: #B4472F; --spoor-1-donker: #E08A72; --spoor-1-tint: rgba(180, 71, 47, 0.12); /* VW, verkoop huidige woning */ --spoor-2-kleur: #2F5D8A; --spoor-2-donker: #7FAFD9; --spoor-2-tint: rgba(47, 93, 138, 0.12); /* ZV, Zandvoort 7 */ --spoor-3-kleur: #A67C1A; --spoor-3-donker: #DCB65C; --spoor-3-tint: rgba(166, 124, 26, 0.12); /* LO, leegmaken en opslag */ --spoor-4-kleur: #4E7A46; --spoor-4-donker: #8FBC85; --spoor-4-tint: rgba(78, 122, 70, 0.12); /* DG, DGOTC */ --spoor-5-kleur: #7A4A78; --spoor-5-donker: #C093BE; --spoor-5-tint: rgba(122, 74, 120, 0.12); /* EJ, EJV commercieel */ --spoor-6-kleur: #17706E; --spoor-6-donker: #6FB8B6; --spoor-6-tint: rgba(23, 112, 110, 0.12); /* MI, MIT haalbaarheidsonderzoek */ --spoor-7-kleur: #C2712B; --spoor-7-donker: #EBA968; --spoor-7-tint: rgba(194, 113, 43, 0.12); /* WB, Wombats */ --spoor-8-kleur: #5A6472; --spoor-8-donker: #A3ADBC; --spoor-8-tint: rgba(90, 100, 114, 0.12); /* vrij, in het ontwerp: privé en gezin */ --spoor-9-kleur: #A33A62; --spoor-9-donker: #DC87A6; --spoor-9-tint: rgba(163, 58, 98, 0.12); /* vrij, in het ontwerp: verenigingswerk */ --spoor-10-kleur: #6B7A2E; --spoor-10-donker: #AEBD70; --spoor-10-tint: rgba(107, 122, 46, 0.12); /* vrij, in het ontwerp: studie en lezen */ --spoor-11-kleur: #8C857B; --spoor-11-donker: #B4ACA0; --spoor-11-tint: rgba(140, 133, 123, 0.12); /* geen spoor */ /* De kode van twee letters hoort bij de kleur en staat waar de naam niet past: in de tijdbalk op de telefoon, in een itemblokje, in een chip. Een nieuw spoor krijgt de kode van de eerstvolgende vrije kleur. Erik kan die zelf overschrijven, maar hij is er dus altijd al. */ --spoor-1-kode: "VW"; /* Verkoop huidige woning */ --spoor-2-kode: "ZV"; /* Zandvoort 7 */ --spoor-3-kode: "LO"; /* Leegmaken en opslag */ --spoor-4-kode: "DG"; /* DGOTC */ --spoor-5-kode: "EJ"; /* EJV commercieel */ --spoor-6-kode: "MI"; /* MIT haalbaarheidsonderzoek */ --spoor-7-kode: "WB"; /* Wombats */ --spoor-8-kode: "PR"; /* vrij, in het ontwerp: privé en gezin */ --spoor-9-kode: "VE"; /* vrij, in het ontwerp: verenigingswerk */ --spoor-10-kode: "ST"; /* vrij, in het ontwerp: studie en lezen */ --spoor-11-kode: "--"; /* geen spoor */ /* --- Afstanden --------------------------------------------------------- Alles is een veelvoud van 4. Gebruik geen tussenmaten. */ --ruimte-1: 4px; --ruimte-2: 8px; --ruimte-3: 12px; --ruimte-4: 16px; --ruimte-6: 24px; --ruimte-8: 32px; --ruimte-12: 48px; --ruimte-18: 72px; --rand-scherm-mobiel: 16px; --rand-scherm-breed: 24px; /* --- Knoppen ----------------------------------------------------------- Vier soorten. Primair is ink met papier erop, secundair is een lijn om niets heen, gevaar is de let-op kleur, en tekst is alleen tekst. */ --knop-hoogte: 44px; /* op de telefoon */ --knop-hoogte-ruim: 48px; /* onderin het scherm, in de duimzone */ --knop-padding-x: 18px; --knop-size: 15px; --knop-weight: 500; --knop-radius: 0; --knop-rand: 1px; --knop-primair-vlak: #123C63; /* de accentkleur, één hoofdactie per scherm */ --knop-primair-ink: #F8F4EC; --knop-primair-vlak-hover: #1A5384; --knop-secundair-vlak: transparent; --knop-secundair-ink: #211D18; --knop-secundair-rand: #211D18; --knop-secundair-vlak-hover: rgba(33, 29, 24, 0.06); --knop-gevaar-ink: #A8412C; --knop-gevaar-rand: rgba(168, 65, 44, 0.50); --knop-gevaar-vlak-hover: rgba(168, 65, 44, 0.08); --knop-tekst-ink: #6B6357; --knop-tekst-ink-hover: #211D18; --knop-uit-vlak: rgba(33, 29, 24, 0.12); --knop-uit-ink: rgba(33, 29, 24, 0.40); /* --- Invoervelden ----------------------------------------------------- */ --veld-hoogte: 44px; --veld-hoogte-ruim: 48px; /* titel en datum in het itemvenster */ --veld-padding-x: 12px; --veld-padding-y: 10px; /* voor een notitieveld met meer regels */ --veld-size: 16px; /* niet lager, anders zoomt iOS in */ --veld-vlak: #F8F4EC; --veld-ink: #211D18; --veld-rand: rgba(33, 29, 24, 0.30); --veld-rand-focus: #123C63; --veld-ring-focus: 0 0 0 2px rgba(18, 60, 99, 0.28); --veld-plaatshouder-ink: #8C857B; --veld-label-size: 13px; --veld-label-ink: #6B6357; --veld-fout-rand: #A8412C; --veld-fout-vlak: #FBF1EE; --veld-fout-ink: #A8412C; /* de uitleg onder het veld */ --veld-radius: 0; /* Schuifje aan of uit, voor hele dag, anker en gedaan */ --schuif-breed: 46px; --schuif-hoog: 28px; --schuif-knop: 22px; --schuif-aan-vlak: #211D18; --schuif-uit-vlak: rgba(33, 29, 24, 0.14); --schuif-knop-vlak: #F8F4EC; /* --- Itemblokjes en chips --------------------------------------------- */ --item-hoogte: 48px; --item-vlak: #F8F4EC; --item-rand: rgba(33, 29, 24, 0.14); --item-spoorbalk: 4px; /* het gekleurde streepje links */ --item-padding: 8px 10px; --item-tijd-breed: 76px; /* kolom met de tijd, mobiel */ --item-gedaan-vlak: #EFE9DE; --item-gedaan-ink: #8C857B; --item-anker-rand: #211D18; /* anker krijgt een volle rand plus ruit */ --item-vast-vulling: repeating-linear-gradient(135deg, rgba(33,29,24,0.05) 0 6px, transparent 6px 12px); --item-vast-rand: 1px dashed rgba(33, 29, 24, 0.35); --chip-hoogte: 32px; --chip-hoogte-ruim: 36px; --chip-padding-x: 10px; --chip-size: 13px; --chip-vlak: #F8F4EC; --chip-rand: rgba(33, 29, 24, 0.24); --chip-aan-vlak: #211D18; --chip-aan-ink: #F8F4EC; --chip-stip: 8px; /* vierkantje in de spoorkleur */ --chip-leeg-rand: 1px dashed rgba(33, 29, 24, 0.40); --kode-size: 10px; /* de tweeletterkode van een spoor */ --kode-weight: 600; --kode-padding: 2px 5px; --kode-vierkant: 30px; /* als los blokje, bijvoorbeeld in een lijst */ /* --- Maten van de schermen -------------------------------------------- */ --uur-hoogte-mobiel: 40px; /* een uur in het weekraster */ --uur-hoogte-breed: 44px; --uur-gutter-mobiel: 46px; /* kolom met de uurlabels links */ --uur-gutter-breed: 56px; --dag-start: 7; /* het raster begint om 07:00 */ --dag-eind: 23; /* en eindigt om 23:00, de avonden passen erin */ /* Werkmoment: het kader in de dagkolom met een kopbalk erboven. De kopbalk staat bóven de starttijd, dus het kader zelf valt precies op het uurraster. Item-posities binnen het kader zijn de tijd plus de hoogte van de kopbalk. */ /* Vier regels plus de meter passen hierin: tijd, waarvoor, hoeveel gepland, en de staat in woorden. Elke regel krijgt flex: none, anders drukt een lange regel de rest plat. */ --werkmoment-kop-hoogte-breed: 72px; --werkmoment-kop-hoogte-mobiel: 72px; --werkmoment-kop-vlak: #E7E0D3; --werkmoment-kop-vlak-teveel: #FBF1EE; --werkmoment-kop-vulling-eenmalig: repeating-linear-gradient(135deg, rgba(33,29,24,0.07) 0 5px, transparent 5px 10px); --werkmoment-vlak: rgba(248, 244, 236, 0.72); --werkmoment-rand: rgba(33, 29, 24, 0.50); --werkmoment-rand-teveel: #A8412C; --werkmoment-rand-stijl-vast: solid; --werkmoment-rand-stijl-eenmalig: dashed; /* een keer extra, buiten het patroon */ --werkmoment-spoorbalk: 4px; /* 5px op de telefoon */ --werkmoment-meter-hoogte: 3px; --werkmoment-meter-baan: rgba(33, 29, 24, 0.14); --werkmoment-meter-vul: #211D18; --werkmoment-meter-vul-teveel: #A8412C; --werkmoment-vrij-rand: 1px dashed rgba(33, 29, 24, 0.35); --werkmoment-vrij-vulling: repeating-linear-gradient(135deg, rgba(33,29,24,0.05) 0 5px, transparent 5px 10px); --werkmoment-eindlijn: 2px solid #A8412C; /* streep waar het moment ophoudt */ --werkmoment-over-vulling: repeating-linear-gradient(135deg, rgba(168,65,44,0.16) 0 5px, transparent 5px 10px); --tijdbalk-rij-hoogte: 48px; /* een spoor in het overzicht */ --tijdbalk-sporen-breed: 226px; /* de namen links, breed scherm */ /* Op een iPhone past de spoornaam er niet naast de tijdlijn. Daar staat alleen het gekleurde vierkantje met de kode van twee letters, 34 px breed, en de volledige namen staan onder de balk in een legenda. Vanaf --breekpunt-breed verschijnen de namen weer. */ --tijdbalk-sporen-breed-mobiel: 34px; --tijdbalk-sporen-weergave-mobiel: kode; /* kode, niet naam */ --tijdbalk-kode-vierkant-mobiel: 22px; --tijdbalk-legenda-hoogte-mobiel: 22px; /* regelhoogte in de legenda */ --tijdbalk-stip: 10px; --tijdbalk-stip-groot: 13px; /* een stap met meer gewicht */ --tijdbalk-stip-rand: 2px; /* open stip: witte vulling, gekleurde rand */ --tijdbalk-anker-lijn: 2px; --tijdbalk-vandaag-lijn: 2px; --tab-balk-hoogte: 56px; /* onderin op de telefoon, vijf tabs */ --raakvlak-min: 44px; --breekpunt-breed: 900px; /* hieronder de mobiele indeling */ --breed-max: 1280px; /* --- Beweging --------------------------------------------------------- Alleen waar die uitlegt wat er verandert, zoals bij het verslepen van een item. Nergens anders. */ --duur-kort: 120ms; --duur-sleep: 160ms; --verloop: cubic-bezier(0.2, 0, 0, 1); } /* --- Donkere stand -------------------------------------------------------- Zelfde tokennamen, andere waarden, zodat de code niets hoeft te weten over licht of donker. Twee manieren om erin te komen: 1. De stand van het apparaat. Dat gebeurt automatisch, behalve als Erik in de instellingen zelf licht heeft gekozen (data-thema="licht"). 2. Zijn eigen keuze in de instellingen: zet data-thema="donker" of data-thema="licht" op het html-element en bewaar die keuze. Zonder data-thema volgt de tool het apparaat. */ @media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) { --accent: #8FB6E0; /* op donker moet het accent lichter zijn */ --accent-hover: #B4CFE8; --accent-ink: #17150F; --accent-zwak: rgba(143, 182, 224, 0.22); --menu-actief-ink: #8FB6E0; --menu-actief-streep-kleur: #8FB6E0; --waas: rgba(10, 9, 6, 0.62); --papier-1: #201D16; --papier-2: #17150F; --papier-3: #2B271E; --ink: #EDE6D8; --ink-2: #C9C1B2; --ink-3: #948C7E; --ink-4: #6F675B; --ink-op-donker-vlak: #17150F; --lijn: rgba(237, 230, 216, 0.16); --lijn-zwak: rgba(237, 230, 216, 0.08); --lijn-sterk: rgba(237, 230, 216, 0.25); --let-op: #E08A72; --let-op-vlak: #2E1F1A; --let-op-lijn: rgba(224, 138, 114, 0.50); --vandaag-vlak: rgba(224, 138, 114, 0.07); --spoor-1-kleur: #E08A72; --spoor-2-kleur: #7FAFD9; --spoor-3-kleur: #DCB65C; --spoor-4-kleur: #8FBC85; --spoor-5-kleur: #C093BE; --spoor-6-kleur: #6FB8B6; --spoor-7-kleur: #EBA968; --spoor-8-kleur: #A3ADBC; --spoor-9-kleur: #DC87A6; --spoor-10-kleur: #AEBD70; --spoor-11-kleur: #B4ACA0; --knop-primair-vlak: #8FB6E0; --knop-primair-ink: #17150F; --knop-primair-vlak-hover: #B4CFE8; --knop-secundair-ink: #EDE6D8; --knop-secundair-rand: #EDE6D8; --knop-secundair-vlak-hover: rgba(237, 230, 216, 0.08); --knop-tekst-ink: #948C7E; --knop-tekst-ink-hover: #EDE6D8; --knop-uit-vlak: rgba(237, 230, 216, 0.12); --knop-uit-ink: rgba(237, 230, 216, 0.40); --veld-vlak: #2B271E; --veld-ink: #EDE6D8; --veld-rand: rgba(237, 230, 216, 0.30); --veld-rand-focus: #EDE6D8; --veld-ring-focus: 0 0 0 2px rgba(237, 230, 216, 0.18); --veld-plaatshouder-ink: #948C7E; --veld-label-ink: #948C7E; --veld-fout-rand: #E08A72; --veld-fout-vlak: #2E1F1A; --veld-fout-ink: #E08A72; --item-vlak: #201D16; --item-rand: rgba(237, 230, 216, 0.12); --item-gedaan-vlak: #1C1A13; --item-gedaan-ink: #6F675B; --item-anker-rand: #EDE6D8; --item-vast-vulling: repeating-linear-gradient(135deg, rgba(237,230,216,0.05) 0 6px, transparent 6px 12px); --item-vast-rand: 1px dashed rgba(237, 230, 216, 0.35); --chip-vlak: #201D16; --chip-rand: rgba(237, 230, 216, 0.24); --chip-aan-vlak: #EDE6D8; --chip-aan-ink: #17150F; --chip-leeg-rand: 1px dashed rgba(237, 230, 216, 0.40); --schuif-aan-vlak: #EDE6D8; --schuif-uit-vlak: rgba(237, 230, 216, 0.14); --schuif-knop-vlak: #17150F; } } [data-thema="donker"] { --accent: #8FB6E0; /* op donker moet het accent lichter zijn */ --accent-hover: #B4CFE8; --accent-ink: #17150F; --accent-zwak: rgba(143, 182, 224, 0.22); --menu-actief-ink: #8FB6E0; --menu-actief-streep-kleur: #8FB6E0; --waas: rgba(10, 9, 6, 0.62); --papier-1: #201D16; --papier-2: #17150F; --papier-3: #2B271E; --ink: #EDE6D8; --ink-2: #C9C1B2; --ink-3: #948C7E; --ink-4: #6F675B; --ink-op-donker-vlak: #17150F; --lijn: rgba(237, 230, 216, 0.16); --lijn-zwak: rgba(237, 230, 216, 0.08); --lijn-sterk: rgba(237, 230, 216, 0.25); --let-op: #E08A72; --let-op-vlak: #2E1F1A; --let-op-lijn: rgba(224, 138, 114, 0.50); --vandaag-vlak: rgba(224, 138, 114, 0.07); --spoor-1-kleur: #E08A72; --spoor-2-kleur: #7FAFD9; --spoor-3-kleur: #DCB65C; --spoor-4-kleur: #8FBC85; --spoor-5-kleur: #C093BE; --spoor-6-kleur: #6FB8B6; --spoor-7-kleur: #EBA968; --spoor-8-kleur: #A3ADBC; --spoor-9-kleur: #DC87A6; --spoor-10-kleur: #AEBD70; --spoor-11-kleur: #B4ACA0; --knop-primair-vlak: #8FB6E0; --knop-primair-ink: #17150F; --knop-primair-vlak-hover: #B4CFE8; --knop-secundair-ink: #EDE6D8; --knop-secundair-rand: #EDE6D8; --knop-secundair-vlak-hover: rgba(237, 230, 216, 0.08); --knop-tekst-ink: #948C7E; --knop-tekst-ink-hover: #EDE6D8; --knop-uit-vlak: rgba(237, 230, 216, 0.12); --knop-uit-ink: rgba(237, 230, 216, 0.40); --veld-vlak: #2B271E; --veld-ink: #EDE6D8; --veld-rand: rgba(237, 230, 216, 0.30); --veld-rand-focus: #EDE6D8; --veld-ring-focus: 0 0 0 2px rgba(237, 230, 216, 0.18); --veld-plaatshouder-ink: #948C7E; --veld-label-ink: #948C7E; --veld-fout-rand: #E08A72; --veld-fout-vlak: #2E1F1A; --veld-fout-ink: #E08A72; --item-vlak: #201D16; --item-rand: rgba(237, 230, 216, 0.12); --item-gedaan-vlak: #1C1A13; --item-gedaan-ink: #6F675B; --item-anker-rand: #EDE6D8; --item-vast-vulling: repeating-linear-gradient(135deg, rgba(237,230,216,0.05) 0 6px, transparent 6px 12px); --item-vast-rand: 1px dashed rgba(237, 230, 216, 0.35); --chip-vlak: #201D16; --chip-rand: rgba(237, 230, 216, 0.24); --chip-aan-vlak: #EDE6D8; --chip-aan-ink: #17150F; --chip-leeg-rand: 1px dashed rgba(237, 230, 216, 0.40); --schuif-aan-vlak: #EDE6D8; --schuif-uit-vlak: rgba(237, 230, 216, 0.14); --schuif-knop-vlak: #17150F; } /* --- Letters ophalen ------------------------------------------------------ AANPASSING OP HET BESTAND VAN CLAUDE DESIGN, in opdracht van Erik, 31 augustus 2026. Hier stond een regel die de drie lettertypes bij Google Fonts ophaalde. Die is verwijderd. De lettertypes staan op de eigen server, in /css/letters.css en /fonts/, zodat er bij het gebruik van de tool geen enkel gegeven naar een andere partij gaat. Komt er een nieuwe versie van dit bestand van Claude Design, haal die regel er dan opnieuw uit. Zie ook README.md, "Aanpassingen op het ontwerpbestand". */