---
type: memory
subtype: visuele-analyse
domain: jonathan-looman
project: visuele-richting
datum: 2026-09-17
auteur: claude (design lead pass, na de ask-user-besluiten van 2026-09-17)
status: PATROONEXTRACTIE, basis voor ontwerpspecificatie.md en richting-v2.html
bron: board/pin-01.jpg t/m pin-25.jpg, alle 25 zelf bekeken; blinde-lezing-2026-09-17.md als prior
lezer: Jonathan (besluit) + wie richting-v3 of de echte site bouwt
---

# Patronen uit het JL-board

Methode: een patroon telt pas als drie of meer pins het dragen. Eén pin is ruis of een tweede spoor; dat staat er dan bij. De blinde lezing van vanochtend is de prior; waar de beelden ervan afwijken, winnen de beelden.

## 0.B Design read (één regel)

Reading this as: solo design-build-partner portfolio voor een net gefinancierde software-founder, met een nuchtere, drukwerk-gedachte rastertaal (linkslijnende grotesk, één lange zin als kop, bitmapletter gedoseerd, halftoon als beelddevice), leunend op native CSS, lichte grond, één zuurgele accentkleur en nagenoeg geen beweging.

## De drie dials

| Dial | Waarde | Reden uit de pins |
|---|---|---|
| DESIGN_VARIANCE | **7** | De sites op het board zijn asymmetrisch maar rechthoekig en rasterhoudend: ongelijke kolommen (06, 12, 25), letters die de rand overschrijden (13, 16, 17), grote lege zones (05, 08). Geen masonry-chaos, dus geen 9. |
| MOTION_INTENSITY | **2** | Het board is print-gedacht: papier (03), specimens (04, 11, 18), posters (06, 09, 14). Jonathan heeft laadtoestanden en overgangen afgewezen. Alleen hover en active. |
| VISUAL_DENSITY | **3** | De gekozen kernpins tonen één zin plus leegte (05, 08, 16, 25). De dichte pins (11, 18, 24) zijn specimen- en instrumentpins buiten de kern. |

## Patronen per as

### Type

**Terugkerend**
- **Grotesk voor alles wat gelezen wordt** (08, 09, 10, 16, 17, 25; 05 in condensed). Geen enkele websitepin leest in een schreef; alleen 23 doet dat en die staat alleen.
- **Bitmapletter als spektakel, niet als broodletter** (01, 02, 03, 04, 11, 13, 14, 18, 19, 21). Tien pins, maar in geen ervan staat een leesalinea in pixels. De pixel is altijd groot en kort: één woord, één cijferreeks, één alfabet.
- **Schone vorm en rastervorm in één woord** (03: letters met pixelinbraak; 15: één geperforeerde letter in een verder gladde reeks; 19: A, B, C op drie resoluties; 21: schreef met pixelranden over foto). Dit is de kern "raster wordt beeld": het contrast tussen glad en gerasterd binnen één ding, niet het raster op zich.
- **Displaywoord loopt de container uit** (05, 10, 13, 16, 17). Vijf pins clippen het displaywoord aan de rand in plaats van het te laten omlopen.
- **Kleine mono-metaregels langs de randen** (02, 04, 05, 06, 16, 24). Altijd als navigatie, credit of maatlabel in de hoeken of aan de onderrand, nooit als kopje boven een sectie.
- **De lange gewone zin als kop** (05, 16, 25). Geen slogan; een zin die zegt met wie en wat. Nadruk in 25 via toon (grijs vs. zwart), in 16 via onderstreping, allebei binnen dezelfde familie.
- **Cijfers groot in de pixel- of monoletter** (02 "123", 11 de maatladder, 18 "123", 24 tabelcijfers). Vier pins.

**Alleenstaand / tweede spoor**
- Pixel-schreef (Mondwest 04/13, plus 14, 18, 21) is de helft van de bitmap-pins, maar botst met "ver van Since Today's schreef". Tweede spoor, niet gebruikt.
- Cursieve schreef als nadruk in een grotesk (20). Eén pin; skill §4.1 verbiedt gemengde-familie-nadruk. Ruis.
- Verbonden pilvormen als lettercontainer (07, 22). Twee pins; levert alleen de pilvorm voor klikbare elementen op.

**Opvallend afwezig**
- Geen schreef als leesletter (23 uitgezonderd). Geen gecentreerde website-koppen: alle sitepins lijnen links (05, 06, 08, 10, 16, 17, 25). Geen tracked-caps-eyebrow boven een kop; de caps staan in de hoeken.

### Ruimtelijke logica

**Terugkerend**
- **Tekst boven, leegte, beeld dat van onderen de viewport in komt en aan de vouw wordt afgesneden** (05, 08, 25; 06 en 10 snijden ook onderaan). Het beeld is een band die begint waar de tekst ophoudt.
- **Hoekverankering** (02, 05, 06, 16): meta-elementen zitten in de vier hoeken van het kader, niet in een balk.
- **Ongelijke kolommen** (06 ongelijke hoogtes, 12 drie banden van ongelijke breedte, 17 half/half met verschillend materiaal, 25 beeldband met inzet rechts). Nooit twee gelijke helften met hetzelfde soort inhoud.
- **Hoge panelen naast elkaar** (09 twee posters, 12 drie banden, 20 drie stories). Staand formaat, gelijke hoogte, verschillende breedte of verschillend materiaal.
- **Type óp of áchter beeld** (10 achter, 15 over, 21 over, 17 over de naad). Vier pins.

**Alleenstaand**
- Masonry met vier kolommen (10). Eén pin. Niet overnemen als raster; wel het principe "beeld overlapt het woord".
- Diagonale stapeling (07, 22 samen met de pilvorm). Tweede spoor.

**Afwezig**
- Geen symmetrische 12-koloms verdeling met drie gelijke kaarten. 20 lijkt erop, maar dat zijn drie Instagram-stories, een opgelegd formaat. Geen bento. Geen carrousel behalve 23 (buitenstaander).

### Kleur

**Terugkerend**
- **Lichte, neutrale grond** (01, 03, 04, 05, 06, 08, 09, 10, 11, 13, 16, 18, 20, 22, 23, 25): zestien van vijfentwintig. De tint neigt koel-neutraal grijs (04, 08, 11, 13) vaker dan crème (14, 19). v1 zat met #f2f0eb aan de warme kant.
- **Eén verzadigde kleur, en die is meestal geel** (04 markeerstift achter labels, 06 blikje, 09 Lemon-poster, 11 balk en mascotte, 12 paneel, 13 label, 20 tekst en paneel): zeven pins geel. Groen (07, 17, 25) drie, blauw (02, 03, 15, 22) vier maar verspreid over foto en inkt.
- **Geel is vlak of markeerstift, nooit lopende tekstkleur op licht** (04, 11 achter een label; 09, 12, 20 als paneel). De klikbare elementen zijn inkt op grond (25 "Get in touch" donkere pil, 23 "Discover"), niet de accentkleur.
- **Verzadiging zit in de beelden, de chrome is monochroom** (06, 08, 10, 17, 25): de UI om het beeld heen is zwart-op-lichtgrijs.

**Alleenstaand / tweede spoor**
- Donkere grond (02, 07): twee pins. Dark mode bestaat, maar is niet het merk.
- Vlak kleurblok als halve pagina (17; 12 ook): tweede spoor, één keer bruikbaar als accentpaneel.
- Salie-groene UI-grond (24) en zand (19): elk één pin.

**Afwezig**
- Geen verlopen in de UI (02 en 09 hebben een verloop, maar 09 bouwt het uit tekens en 02 zit in een fototegel). Geen palet van vier tinten. Geen paars, geen glow.

### Beeldbehandeling

**Terugkerend**
- **Beeld in een rechthoek zonder radius, zonder schaduw, zonder kader** (05, 06, 08, 10, 12, 20, 25). Zeven pins.
- **Objecten, drukwerk, producten; geen gezicht als hoofdbeeld** (05, 06, 08, 10, 17, 21). 12 en 20 tonen mensen, maar als paneel naast tekst, niet als portret-hero.
- **Beeld dat gerasterd, geperforeerd of uit tekens opgebouwd is** (01 dither-halo, 09 beeld uit strepen en punten, 15 perforatie, 21 pixelranden, 25 scanlijnen). Vijf pins. Dit is het beelddevice: de resolutie is zichtbaar.
- **Verschillende beeldverhoudingen in één blik** (05, 06, 08, 10, 20).

**Alleenstaand**
- Glitch-vervorming van foto (25 in kleur, groen en blauw): één pin. Niet kopiëren; wel de les dat één beeldband alle kleur mag dragen.
- Browser- en telefoonmockup (23): buitenstaander.

**Afwezig**
- Geen foto met afgeronde hoeken. Geen foto met een pil-label erover. Geen iconenreeks (07 en 24 hebben lijniconen, allebei buiten de kern).

### Dichtheid

**Terugkerend**
- **Eén zin en verder leegte in het eerste scherm** (05, 08, 16, 25). Het beeld komt pas onderin.
- **Per pin één kop, één alinea, één of twee beelden** (06, 16, 17, 25). Nooit een kop plus drie subkoppen.
- **De lege zone is groot: ruwweg een derde tot de helft van de hoogte** (05, 08, 25).

**Alleenstaand**
- Dichte instrument-UI (24) en dichte specimen-ladder (11, 18): niet-kern.

**Afwezig**
- Geen kaartenrasters met tekst. Geen statistiekenrij van drie. Geen feature-lijst.

### Rand en ritme

**Terugkerend**
- **Horizontale banden gescheiden door een haarlijn of door niets** (04 twee volle lijnen, 24 rijen, 16 een metarij als scheiding, 25 navlijn). Verticale lijnen komen niet voor als decoratie.
- **Hoeken 90 graden voor alles wat een vlak of een beeld is** (05, 06, 08, 09, 10, 12, 20, 25).
- **Pilvorm alleen voor het klikbare** (07, 22, 25 "Get in touch" en de genummerde knoppen). De pixelletters zelf hebben afgeronde pixelhoeken (02, 14, 18, 19), maar dat zit in de letter, niet in de opmaak.
- **Displaywoord aan de rand geclipt** (zie Type).

**Alleenstaand**
- Afgeronde containers met 16 tot 20px (24). Eén pin. Niet overnemen.

### Materialiteit

**Terugkerend**
- **Vlak. Geen schaduw, geen glas, geen blur** in alle 25 pins (de schaduw onder het potje in 10 zit in de foto).
- **Toonverloop uit losse tekens of punten, niet uit een gradient** (01 kruisjes-dither, 09 strepen en punten, 15 gaten). Drie pins: als er toon nodig is, is die discreet en telbaar.
- **Drukwerk als eenheid** (03 inkt op papier, 04 en 11 specimenblad, 06 en 08 posters, 09 posters, 14 print). Zeven pins. De pagina is een reeks affiches, geen scroll van secties.
- **Korrel hoort bij de foto, niet bij de UI** (02, 21, 25).

**Afwezig**
- Geen papier-textuur over de UI. Geen noise-overlay. Geen 3D.

## Wat dit betekent voor het ontwerp

Elke regel is meetbaar; adjectieven zijn hier verboden.

1. **Leesletter**: één neutrale grotesk voor alle lopende tekst, knoppen en navigatie. Nul schreefletters op de pagina, ook niet als nadruk (Type; Jonathans ST-afstand).
2. **Displayletter**: NeueBit (pixel-grotesk) uitsluitend op vlaktitels van maximaal drie woorden en op jaartallen of tellingen. Maximaal twee displaywoorden per vlak. Nul leeszinnen in pixels (Type, 04/11/13 vs. alle sitepins).
3. **Pixelmaten**: displaygroottes in veelvouden van 12px (48, 72, 96, 144), zodat het bitmapraster op hele pixels valt (11: de ladder loopt in stappen van 12pt).
4. **Kop**: één zin van maximaal twee regels op desktop, linkslijnend, in de grotesk, nadruk uitsluitend via toon (inkt vs. grijs) of onderstreping (16, 25). Nul tracked-caps-labels boven een kop op de hele pagina (mono-meta mag alleen in de randstrook, sentence case).
5. **Eerste scherm**: tekstblok bovenin (top-padding maximaal 96px), daaronder een lege zone van minimaal 20vh en maximaal 40vh, daaronder een beeldband die de onderrand van de viewport snijdt (05, 08, 25).
6. **Kolommen**: nooit twee gelijke kolommen met gelijksoortige inhoud; verhouding minimaal 5:7 of ongelijk materiaal (beeld naast tekst, vlak naast foto) (06, 12, 17, 25).
7. **Grond**: één lichte neutrale tint met blauwwaarde ≥ roodwaarde (koel-neutraal, niet crème). Donkere modus bestaat als tokenset, is niet de standaard (16 licht vs. 2 donker).
8. **Accent**: één zuurgeel. Toegestaan als vlak of als markeerstift achter inkttekst. Verboden als tekstkleur op de grond en verboden op klikbare elementen (04, 09, 11, 12; 25 voor de knop).
9. **Beeld**: radius 0, geen schaduw, geen kader, geen label erover. Onderschrift uitsluitend eronder, sentence case, één functionele regel, geen "FIG"-nummering (05, 06, 08, 10, 25).
10. **Rasterdevice**: elk projectbeeld, het JL-merkteken en elke grote telling draagt het raster zichtbaar, en het device is per vlak een ander mechanisme: perforatie (15), beeld uit tekens (09), zelfde beeld op twee bemonsteringen (19), oplossen in punten (01). Hetzelfde mechanisme mag niet twee keer voorkomen.
11. **Toonverloop**: gradients zijn verboden in de UI; toon ontstaat uit telbare marks (01, 09, 15).
12. **Hoeken**: 0 voor vlakken, beelden, panelen en velden; volledige pil uitsluitend voor klikbare knoppen. Geen derde waarde (07, 22, 25 vs. 24).
13. **Materiaal**: geen box-shadow, geen backdrop-filter, geen noise-overlay, nul verlopen in CSS buiten het rasterdevice.
14. **Beweging**: alleen :hover en :active; geen entry-animaties, geen scroll-triggers, geen laadtoestanden (Jonathans besluit; het print-karakter van 03, 04, 09, 14).
15. **Scheidingen**: horizontale haarlijn per vlak toegestaan; nul verticale lijnen als decoratie (04, 24 vs. niets).
16. **Navigatie**: kale tekst op de grond, geen balk, maximaal drie elementen (naam, beschikbaarheidsregel, descriptor), in de hoeken (05, 06, 08, 16, 25).
17. **Displaywoord mag clippen**: overflow hidden op de vlakrand, geen omloop (13, 16, 17).
18. **Dichtheid**: per vlak maximaal één kop, één alinea (≤ 60 woorden), twee beelden (06, 16, 17, 25).

## Spanningen

**1. Het board houdt van de bitmapletter; de lezer vreest theater.**
Tien van vijfentwintig pins zijn letterproeven. Voor een founder die decks wantrouwt leest een pixelletter als kunstacademie. Opgelost via regel 2 en 3: de pixel staat alleen op titels en tellingen, nooit in een zin, en op een raster dat klopt (hele pixels). Wat gelezen wordt, staat in de grotesk van 16 en 25. Zo blijft het idee (resolutie zichtbaar) zonder dat de site eruitziet als een specimen.

**2. Het board wil leegte in het eerste scherm; de lezer scant naar bewijs.**
05, 08 en 25 laten een derde tot de helft leeg. Een founder wil binnen één scherm weten of er bewijs is. Opgelost via regel 5: de leegte is begrensd (20 tot 40vh) en de beeldband die de vouw snijdt is al bewijsmateriaal (projectbeeld), zodat de leegte niet leeg is maar een aanloop. Toets: bij 1440×900 zijn alle drie de bewijzen binnen drie schermen bereikt.

**3. De kleur zit op het board in de foto's; de site heeft weinig foto's, twee zijn nog plaatshouder.**
06, 10, 17 en 25 halen hun verzadiging uit beeld. Zonder beeld wordt de site grijs. Opgelost via regel 8 en 10: één accentpaneel (het visions-affiche uit marks op geel, 09/12) en het rasterdevice dat ook een matige foto tot ontwerp maakt. De kleur hangt dus niet aan fotokwaliteit.

**4. De pixel-schreef is de helft van het bitmapcluster, maar Since Today gaat naar ITC Century.**
Mondwest (04, 13), 14, 18 en 21 zijn schreefachtig. Opgelost door NeueBit als enige displayletter te nemen en Mondwest als tweede spoor te noteren, niet te gebruiken.

**5. De blinde lezing zette de levende statusregel op één; Jonathan heeft dat cluster afgewezen.**
24, 05 en 25 tonen een systeem dat zijn stand laat zien. Opgelost met precies wat is toegezegd: één handmatig onderhouden beschikbaarheidsregel, geen bolletje, geen klok, geen plaats.