Colofon
Hoe deze site gemaakt is, en hoe het zover kwam. Twee lettertypes, twee pennen, één engine die alles tekent.
12 kolommen, 24 px tussenruimte, 64 px marges, basislijnen gemeten op de live tekst. Of druk alleen op Alt (⌥). Esc sluit het.
Typografie
Twee lettertypes, elk met één taak.
Instrument Serif
- 76Plotter zero
- 60Plotter zero
- 44Plotter zero
- 30Plotter zero
- 22Plotter zero
Inter Tight
- 19Inleiding: Sprint vanaf € 8.000, Marathon vanaf € 7.500 per maand.
- 17Lopende tekst: Sprint vanaf € 8.000, Marathon vanaf € 7.500 per maand.
- 15Kleine tekst: Sprint vanaf € 8.000, Marathon vanaf € 7.500 per maand.
- 13.5UI: Sprint vanaf € 8.000, Marathon vanaf € 7.500 per maand.
- 12Bijschrift: Sprint vanaf € 8.000, Marathon vanaf € 7.500 per maand.
Tabelcijfers, zodat getallen netjes uitlijnen en nooit verspringen
0123456789 · € 8.000 · € 7.500/maand
- Hiërarchie komt van grootte en grijs, niet van gewicht. Vet is er alleen voor knoppen en labels.
- Bijschriften en uitlezingen staan in Inter Tight met tabelcijfers. Geen monospace-labels.
- Titels verdelen hun regels evenwichtig; alinea’s blijven onder ongeveer 70 tekens.
Kleur
Twee pennen, nooit een vlak.
Inkt
#0b0b0c op #ffffff
Alles: tekst, contouren, arcering. De grijzen #3c4048, #5b6069 en #6f757e zorgen voor de hiërarchie.
Accentpen
#ff4d1a
Een tweede pen, één tot drie keer per scherm: lijnen van 1,5px of breder, arcering, ringen, markeringen. Ze draagt nooit tekst en vult nooit een vlak.
Tekenen
Arcering en snijtekens.
Elke tekening hier wordt lijn per lijn geplot, zoals een penplotter werkt: eerst de constructielijnen, dan de contouren, dan de arcering, en de accentpen als laatste. Er beweegt telkens maar één pen. Toon komt alleen uit de dichtheid van de lijnen, nooit uit een verloop.
- Enkele arcering45°, één pen. Uitgesneden, geselecteerd of uitgeschakeld.
- KruisarceringTwee lagen, 90° uit elkaar. Schaduw.
- Gearceerde vormDe dichtheid van de arcering volgt een toonveld. Geen verlopen.
- AccentarceringDe tweede pen, als laatste. Een slagschaduw.
Stack
Waar het op draait.
- Framework
- Next.js 16.1.6, App Router
- UI
- React 19.2.3
- Taal
- TypeScript 5
- Styling
- Gewone CSS bij elk onderdeel; Tailwind CSS 4 voor de basisreset
- Beweging
- Motion 12 voor springs; CSS stroke-dashoffset voor de penlijnen
- Tekeningen
- Mijn eigen plotter-engine op canvas 2D, plus SVG-penpaden. Geen tekenbibliotheek.
- Lettertypes
- next/font, zelf gehost bij de build
- Componenten
- Base UI 1.2
- Afspraken
- Mijn eigen systeem, gebouwd voor deze site
- Analytics
- PostHog (EU)
Wijzigingen
Van de oude site naar Plotter zero.
| Onderdeel | Oude site | Plotter zero |
|---|---|---|
| Titelletter | Anton, Funnel Display, Recoleta | Instrument Serif |
| Broodletter | Prompt, Geist | Inter Tight |
| Accent | #E06232, in de afsprakenkalender | #ff4d1a, een tweede pen |
| Beelden | Screenshots en foto’s | Geplotte lijnen |
Plotter zero
Gekozen als de nieuwe stijl: één inktpen, één accentpen, arcering en snijtekens. Nu de hele site, in het Engels en het Nederlands.
Deze release
Engels en Nederlands
Pagina’s per taal opgesplitst, met Nederlandse slugs. Beelden omgezet naar WebP.
228002b, 7f133aa
Tracking op één plek
Meta Pixel toegevoegd, daarna alle tracking achter één functie gezet voor WhatsApp- en boekingsevents.
c18deba, f32245a
WhatsApp in plaats van Telegram
De berichtknop opent nu WhatsApp.
04371c1
Dagelijkse revalidatie
Pagina’s worden hoogstens één keer per dag opnieuw opgebouwd.
d953bf6
Metadata en analytics
Paginametadata voor zoekmachines, Google Tag Manager, PostHog.
270210c, c6b5607, e19f6a1
Eerste echte layout
Klantreviews, merkknoppen, de menubalk onderaan.
8035874 … ce5d9df
Project gestart
Een nieuwe Next.js-app.
27e5fc3
Data en wijzigingen komen uit de git-geschiedenis van de site. Bij elke regel staat de commit-id.
De platen in het Lab komen van dezelfde engine.