---
type: memory
subtype: ontwerpspecificatie
domain: jonathan-looman
project: visuele-richting
datum: 2026-09-19
vervangt: de versie van 2026-09-17, die v2 beschreef terwijl de bouw op v7 stond
status: BESCHRIJFT richting-v7.html zoals die er nu is. Wijkt de bouw af, dan is dit bestand fout.
bron: patronen-uit-het-board.md (pin-citaties) + sites-achter-de-pins.md (gemeten sites)
---

# Ontwerpspecificatie jonathanlooman.nl

Elke waarde draagt zijn bron. Waar een getal uit een gemeten site komt staat de site erbij;
waar het uit het board komt het pinnummer. Een waarde zonder bron hoort hier niet.

> **Diff-notitie 2026-09-19.** De vorige versie beschreef v2: koele grond `#f0f1f1`, NeueBit als
> displayletter, ClaudeOS als vlak 2, 7.613 marks op vlak 3, zes vlakken. Geen daarvan is nog
> waar. Zo'n stale spec is gevaarlijk omdat hij als waarheid geciteerd wordt; daarom hieronder
> wat er werkelijk staat, met de oude waarden alleen waar ze uitleggen waarom iets veranderde.

---

## 1. Fundament: Vlak

De bouw hangt op `@noorddev/vlak` (MIT, css-only, lokaal in `vlak/node_modules/`). Vlak levert
papier, inkt, de 204px-module (184 kolom + 20 goot), radius 0, en de easing. Eigen CSS staat
ongelaagd en wint dus zonder `!important`.

Twee dingen van Vlak zijn uitgezet, met reden:
- **`--grid-image: none`** de kolomoverlay is decoratie, en decoratie zonder functie is verboden
  (besluit Jonathan 2026-09-17: een raster mag alleen bestaan waar het iets doet).
- **Inter** Vlak schrijft Inter voor en noemt hem niet wisselbaar. Overruled: Inter is de meest
  getemplateerde letter van het web en botst met "bewust ver van Since Today".

## 2. Letters

| Rol | Letter | Bron |
|---|---|---|
| Lezen | Neue Haas Grotesk Text, fallback Helvetica Neue / Helvetica / Arial | pins 08, 09, 10, 16, 17, 25 (alle sitepins lezen in een grotesk) |
| Display | **Times New Roman, bij het renderen door een raster gehaald** | pin 21 (schreef met pixelranden), pin 04/13 (Mondwest = pixelschreef); Jonathan 2026-09-17: "Times-achtig maar gepixeld" |
| Meta | systeem-mono (ui-monospace / SF Mono / Menlo) | pins 02, 05, 06, 16, 24 |

**Vervallen:** NeueBit als displayletter. Reden: Mondwest en NeueBit zijn van Pangram Pangram,
niet van Velvetyne; vier downloadpogingen gaven identieke HTML-foutpagina's. Vervangen door een
techniek in plaats van een bestand, wat beter is: hij werkt met elke schreefletter en vraagt geen
account.

### De quantiser

Eén functie, `quantiseText()` in de bouw. Teken de tekst klein op een canvas, drempel op
grijswaarde 142 zodat er geen halftinten zijn, teken dan één `fillRect` per opgelichte cel op
ware grootte.

- **cel 3 tot 5px** = leesbare kopletter, oogt als Mondwest
- **cel 8 tot 14px** = dezelfde functie doorgedreven tot uiteenvallen, voor het merkteken
- **Nooit CSS-schaling op het resultaat.** Een pixelbeeld verkleinen laat halve cellen vallen en
  breekt de stammen. Gemeten 2026-09-17: koppen werden onleesbaar in een smaller venster. De
  functie past de lettergrootte aan vóór het tekenen en tekent daarna op ware grootte.
- Op Retina tekenen op `devicePixelRatio`, maximaal 2.
- Geen `putImageData` en geen composite-bewerkingen: Safari tekende die als diagonale strepen
  (gemeld door Jonathan met schermafbeelding, 2026-09-17). Alleen `fillRect`.

## 3. Kleur

**Grond en inkt komen van Vlak:** papier `#FAF8F2`, inkt `#1A1A1A`, grijs `#6B6B6B`.

**Vervallen:** de koele grond `#f0f1f1` uit v2. Gemeten in `sites-achter-de-pins.md`: van de acht
gemeten sites is er geen enkele koeler dan neutraal; die van ons was de enige.

**Het palet komt uit Jonathans eigen bodemmeting**, gesampled uit
`resonate-garden-alle-variabelen.jpg` en `-moisture-v1.jpg`, en daarna richting papier verzacht
(70 tot 82 procent) omdat verzadigd te zwaar werd:

| Token | Pastel | Herkomst in de meting |
|---|---|---|
| --p-moss | #dad6cc | #61593b, 15,4% van het bronbeeld, de meest voorkomende kleur |
| --p-plum | #d5cecf | #4a2b4a, 10,9% |
| --p-wine | #d5cacc | #4a1338, 10,3% |
| --p-aubergine | #cec7cb | #210333, 9,9%, het donkerste eind |
| --p-rose | #e2d7d3 | #925c60, 8,7% |
| --p-acid | #efecd3 | #d9d15f, 7,6%, het lichte eind |
| --p-sand | #eae3d1 | #bd9d56, 4,9% |
| --p-volt | #cdccee | #191df7, 13% van de vochtmeting |
| --ok | #4c8a3f | de enige verzadigde kleur die overblijft, alleen voor status |

**Regel:** kleur zit op het beeld, niet op de lege vlakken. Besluit Jonathan 2026-09-17: "het
beeld zet de toon". De tekstvlakken staan op papier; de tint is hoogstens een zitting onder een
beeld.

## 4. Raster en maat

- Goot en padding: Vlaks `--gutter` = 20px.
- **Gulden snede overal:** elk tweekolomsvlak is `1.618fr 1fr`, breed links. Dit was een echte
  bug: de kop van het grootboek en de bio stonden omgekeerd, waardoor alinea's op een andere x
  begonnen. Jonathan zag het; sindsdien staan alle drie gelijk.
- Verticaal ook gulden snede: hero en beeldvlakken op 61,8vh, niet 100vh.
- Hero-kader: 1% rondom, 3% onder.
- Buffer tussen projecten: minimaal 30vh, tekst alleen, op papier. **Tekst staat nooit over beeld.**

## 5. Het rasterdevice, waar het nog bestaat

Besluit Jonathan 2026-09-17: geen decoratieve rasters. Een raster mag alleen waar het iets doet.
Wat daardoor verviel: het patroon achter het grootboek, en de abri-posters in de banden van
projecten waar ze niet bij horen.

Wat overblijft:
1. **De letter zelf** de quantiser hierboven. Dit is het device, niet een effect eroverheen.
2. **Het merkteken** een organische vorm die van links naar rechts in grovere cellen uiteenvalt.
   Zelfde bewerking als de letter, toegepast op een vorm. Brief Jonathan: "organisch logo dat
   verandert naar iets abstract digitaals".
3. **De QR in het slotvlak** werkende code (ECC H, centrum 28% vrij voor het merkteken),
   gedecodeerd op de render: `https://vimeo.com/894970495`. Functioneel raster, geen ornament.
4. **De abri-posters** alleen bij Clubhuis, want daar zijn ze het werk.

## 6. De vlakken zoals ze nu staan

| Vlak | Familie |
|---|---|
| Hero | portret paginavullend, naam gequantiseerd eroverheen, kader 1/1/1/3 |
| De zin | tekst 38,2 / film 61,8 |
| Per project | buffer (tekst, papier, ≥30vh) → lead 61,8vh → horizontale scrollstrook 38,2vh |
| Grootboek | tabel op papier, koprij, 43 rijen, rij klikbaar en dan schuift een beeldstrook eronder |
| Bio | 61,8 / 38,2 |
| Slot | QR met merkteken 61,8 / naam en knop 38,2 |

Twaalf projecten met beeld. **Vervallen:** ClaudeOS als vlak (besluit Jonathan 2026-09-17: nog
niet rijp voor dit profiel, vervangen door de agentische orkestratie van het Kruyd-platform) en
de 7.613 marks (vervangen door echte beelden).

## 7. Beweging

Alleen hover en active. Geen entry-animaties, geen scroll-triggers, geen laadtoestanden.
Besluit Jonathan: laden en overgangen vielen expliciet af als plek voor het raster.
Video's spelen gemute en in lus. `prefers-reduced-motion` schakelt ze uit.

## 8. Wat nog niet klopt

**De faalvorm waar we in zitten is Repetition.** Twaalf keer hetzelfde ritme onder elkaar:
buffer, lead, strook. De pagina is 20.000px lang en liep bij de volledige render tegen de
pixellimiet van de browser. Dat is geen renderprobleem maar het ontwerpsignaal: er is herhaling
waar verloop hoort. Teneo en HyperGarden krijgen nu hetzelfde gewicht, en dat is feitelijk onwaar.

Dit is géén smaakprobleem en geen typografieprobleem. Geen enkele verfijning van de letter raakt
het. De ingreep is spreiding forceren: het eerste project paginavullend, het vijfde compact, het
tiende alleen een grootboekregel.

Tweede punt: de stroken zijn archiefdumps. HyperGarden opent met 25 beelden waar het recept in
`portfolio-image-selection` er drie tot zes voorschrijft, en de volgorde komt uit de bestandsnaam
in plaats van uit het recept (lead is een foto, hoogstens één diagram, nooit twee
schermafbeeldingen naast elkaar).

## 9. Open bij Jonathan

Mailadres voor de knoppen · jaar van de abri-posters (bestelbestand zegt november 2017, index
zegt Clubhuis 2016) · welk fragment uit de film van 5:08 · jaartallen voor acht grootboekrijen ·
klopt "teaching since 2012" · toestemming per klantproject vóór publicatie
(`vertrouwelijkheid.md`).

## 10. Geparkeerd: de hybride vorm (ma 21 sep 16:00)

Er is een spanning tussen wat hier staat en `positioning.md` §Richting 2026-09-02. Dat document
verwerpt precies wat v7 is: een catalogus om door te bladeren, een case-index als navigatiemodel,
een "over mij"-pagina. Het stelt in de plaats een **intake** voor in vijf bewegingen, die niet
over Jonathan antwoordt maar over de bezoeker, en die eindigt met een oordeel dat nee mag zijn.

Waarom dit geen fout is maar een open besluit: hetzelfde document noemt de craft-laag de tweede
schermtaak (een lelijk profiel weerlegt zichzelf) en schrijft voor dat je **de onderlaag eerst**
bouwt: het werk als data met bron per bewering. Het grootboek van 43 rijen mét omschrijvingen ís
die onderlaag, alleen als HTML in plaats van als data.

Wat er niet is en wel eerst hoorde (blok B, letterlijk "bouw de machineleesbare laag eerst, niet
als sluitstuk"): gestructureerde data, een agent-index, een crawlerbeleid.

**Besluit Jonathan 2026-09-19:** parkeren tot maandag 21 september 16:00, een half uur, met Fable
(weeklimiet reset die ochtend 03:00). Doel is een concept dat beide vormen combineert, niet kiezen
tussen de twee.

**Structurele reden dat dit bij JL hoort en niet bij ST** (Jonathan, zelfde dag): JL en ST hebben
in de kern dezelfde vraagstukken, maar bij JL beslist hij alleen en bij ST altijd in overleg met
Gwenda en het ST Bureau. JL is dus de proeftuin; wat daar werkt erft ST via de Bureau-dag. Dat is
ook waarom dit niet op de gezamenlijke maandag staat: die heeft de Design Lock als primair besluit.

**Uitgevoerd 2026-09-21 17:20 (Fable-agent, Sonnet-sessie):** concept staat in
[concept-hybride-vorm-2026-09-21.md](concept-hybride-vorm-2026-09-21.md), status DRAFT. Kern: intake
boven, grootboek onder; één databestand met drie lezers (tabel, intake-filter, agent-index);
twaalf beeldblokken worden bewijskaarten; bio sterft als vlak; "say"-vlak wisselt van inhoud, niet
van vorm. Drie voorstellen buiten de bronnen expliciet gemarkeerd. Diezelfde avond (19:33-20:00)
vier reacties van Jonathan erbij: CTA, sessieladder als aanbod, remote first, abonnement-schets,
artefact-als-lead-magnet. Adversarial QC 20:41: BLOCK op vier punten, drie feitelijke verwerkt
(IMG-stub, bron-veld ontbreekt op alle 43 rijen, movement 5 dubbel gebruikt); de vierde is een
open [J]-keuze: sprint-eerst of abonnement-eerst. Het concept-bestand is de levende stand, deze
alinea niet.