KennisBank

jimvandenbreemen.nl design systeem

Uit wiki.jimvandenbreemen.nl, de persoonlijke kennisbank van Jim van den Breemen

4 minuten leestijd

jimvandenbreemen.nl design systeem

Definitie

Het design systeem van jimvandenbreemen.nl bestaat uit een vaste font stack, een bordeaux-gebaseerd kleurenpalet, brutalisme-specifieke modificaties en een versiebeheermethode voor HTML-prototypes. Het systeem is opgebouwd in iteraties via moodboard- en style guide-sessies in maart 2026.

Context

De website is een Hugo-site met custom theme “jvdb”. Het design is hybride: clean en content-first voor journalistieke tekst, visueel rijker voor fotografie. Brutalisme wordt als laag bovenop het basisdesign system toegepast, niet als vervanging. De WCAG 2.1 AA-norm is leidend voor kleurkeuzes.

Kernpunten

Font stack

RolFamilieFallback
Primair displayWavehaus (6 gewichten, self-hosted WOFF2)Futura, Avenir Next, Montserrat
Serif accentDM Serif DisplayGeorgia, serif
MonospaceJetBrains MonoCourier New, monospace

Wavehaus wordt preloaded in de <head> en geconverteerd van desktop-licentie (TTF/OTF) via fonttools of Transfonter. Licentie voor webgebruik is nog te controleren.

Kleurenpalet (bordeaux)

Kernkleuren uit palet v4 (WCAG-geauditeerd):

TokenWaardeGebruik
bordeaux-dark#3d0c0cachtergronden, zware accenten
bordeaux-base#8a2020primair accent
bordeaux-mid#d44040interactief, focus states
bordeaux-light#e07070hover, subtiele accenten
focus-visible#d440402px outline, 44x44px touch targets

Vijf donkere achtergrondgradaties aanwezig voor scènevariatie in het Immersive Framework.

Twee-texturen systeem

  • Suede (voor bordeaux-elementen): feTurbulence type turbulence, freq 0.35x0.55, numOctaves 6, blend-mode soft-light
  • Grain (voor overige elementen): feTurbulence type fractalNoise, freq 0.85, numOctaves 4

In brutalisme-variant:

  • grain opacity: 0.18
  • scan lines opacity: 0.3

Brutalisme-modificaties

Aanvullende tokens voor de brutalisme-variant:

  • Borders: 3px solid, geen border-radius (ook niet op foto’s)
  • Typografie: oversized, mix van font-families, monospace in UI
  • Gridlijnen: zichtbaar
  • Chapter dots: vierkant
  • Textuur: grain en scan lines actief

Content-type kleurcodering

TypeKleurTextuur
Fotobordeaux + suedesuede
Interviewsienna + graingrain
Columnstone + graingrain
Audiobordeaux-glow + suedesuede

Hybride navigatiesysteem:

  • Ghost nav op foto-secties
  • Editorial nav persistent op tekst-secties
  • Side dots rechts voor scènenavigatie
  • Mobile: hamburger + bottom bar

Editorial mode (tekst-zware secties): lichte achtergrond #f2ebe4.

JS-stack

BibliotheekOmvangFunctie
Lenis~5KBSmooth scroll
GSAP ScrollTrigger~25KBScroll-animaties
SplitType~3KBTekst-stagger

Totale JS-omvang: 75-80KB. Alternatief onder evaluatie: Trig.js (~4KB) als vervanging voor GSAP.

Versiebeheer-patroon

HTML-prototypes worden bewaard in een versies/ map naast de werkbestanden:

versies/
  v1-controlled-brutalism-2026-03-23/
  v2-brutalism-fullwidth-2026-03-24/
  v3-immersive-brutalism-2026-03-24/
  v4-immersive-fixed-2026-03-24/

Hetzelfde patroon is toegepast bij het Boek Engagency-project (versies/v1-*.html, versies/v2-*.html).

Glass UI overhaul (2026-04-25)

Het thema is op 25 april 2026 volledig herschreven met een glass UI-systeem op basis van backdrop-filter, CSS custom properties en Wavehaus als primair font. De brutalisme-variant is daarmee vervangen als actieve richting.

Aangeraakt in de overhaul:

  • themes/jvdb/assets/css/main.css herschreven (~950 regels), glass tokens, alle componentklassen
  • themes/jvdb/layouts/index.html nieuw met alle homepage-secties
  • themes/jvdb/layouts/_default/baseof.html nav-ghost vervangen door nav-glass
  • themes/jvdb/layouts/partials/nav-glass.html nieuw

Migratieplan voor nog-niet-overgezette templates staat in design/glass-ui-plan.md. Openstaande templates per mei 2026: foto/single.html, media/single.html, media/list.html, tekst/interview.html, shortcodes/gallery.html, baseof.html footer.

Zie wiki-glass-ui-css-systeem voor tokenstructuur en utility-klassen.

De /foto-sectie gebruikt twee Hugo-layouts uit themes/jvdb/layouts/foto/:

  • list.html — album-landingspagina, spawnt album-covers als cursor-scrub gallery
  • cursor-gallery.html — individuele albumpagina, spawnt albumfoto’s

Afbeeldingen staan in static/albums/<albumslug>/ als pre-geëxporteerde WebP. Hugo-template gebruikt album_folder frontmatter-param om bestanden te lezen via readDir. Twintig albums aangemaakt (2026-04-27).

Zie wiki-cursor-scrub-gallery-mechaniek voor de interactiemechaniek en Hugo-integratie.

Deploy-setup (2026-04-27)

MethodeStatus
Lokaal deploy-script (~/Claude/scripts/deploy-new.sh)Actief
GitHub Actions (.github/workflows/deploy.yml)Actief voor master-pushes
FTP credentials~/.netrc (chmod 600)

GitHub repo: https://github.com/Jvdbreemen/jimvandenbreemen.nl (privé).

De GitHub Actions workflow bouwt Hugo, converteert ontbrekende JPG/PNG naar WebP via cwebp, en deployt naar new.jimvandenbreemen.nl/public_html/ via SamKirkland/FTP-Deploy-Action met protocol: ftps.

Aandachtspunt: static/albums/ (2.9+ GB) staat niet in git. CI-builds missen albumfoto’s tot er een deploy-branch of LFS-strategie is. Openstaande keuze: deploy branch (lokaal gebouwde public/ pushen naar losse branch) of foto’s los uploaden naar server.

Zie wiki-weboke-ftp-deploy voor de volledige deploy-pipeline.

Zes verbeterpunten (vastgesteld 24 maart 2026, status mei 2026)

  1. Te veel specificeren, te weinig bouwen — gedeeltelijk opgelost (glass UI + cursor gallery gebouwd)
  2. Content ontbreekt — 20 albums toegevoegd; tekstpagina’s nog placeholder
  3. Geen versiebeheer ingericht — opgelost (GitHub + GitHub Actions)
  4. Accessibility niet getest — open
  5. Performance tooling ontbreekt — open
  6. Zware JS-stack (GSAP 75-80KB) — open; Trig.js als alternatief nog niet getest

Standalone design system (2026-04-21)

design/system/ in de projectroot bevat een standalone versie voor gebruik buiten Hugo:

BestandFunctie
colors_and_type.cssAlle tokens + semantische utility-classes, voor prototypes
fonts/Wavehaus woff2 kopieerbaar naar elke werkmap
preview/22 HTML-componentkaarten als bouwreferentie
ui_kits/website/index.htmlInteractieve layout-referentie
SKILL.mdInstructies voor Claude Code om het systeem automatisch toe te passen

Bron van waarheid blijft themes/jvdb/assets/css/main.css. colors_and_type.css is een gedestilleerde kopie voor prototypes.

Token-correcties toegepast op 2026-04-21:

TokenOudNieuw
--bordeaux-light#da4848#d44040 (aligned met --focus-ring)
--text-decorative#867a74#7a6e68 (iets donkerder/koeler)

Utility-classes toegevoegd aan main.css:

::selection, .jvdb-dark, .jvdb-editorial, .jvdb-hero, .jvdb-h1—.jvdb-h3, .jvdb-quote, .jvdb-body, .jvdb-body-sm, .jvdb-meta, .jvdb-micro, .jvdb-tag, .jvdb-caption, .jvdb-code. Puur additief, geen bestaande componentstijlen aangeraakt.

Verbanden

Bronnen

Geen externe bronnen; kennis gedestilleerd uit prototype-iteraties.

Sessie-herkomst

Verbanden

  1. Zie ook: wiki-glass-ui-css-systeem (tokenstructuur, utility-klassen, afbakening)
  2. Zie ook: wiki-cursor-scrub-gallery-mechaniek (foto-sectie, Hugo-integratie, Barba.js)
  3. Zie ook: wiki-dom-pool-gsap-optimalisatie (engine-optimalisaties cursor gallery)
  4. Zie ook: wiki-weboke-ftp-deploy (deploy-pipeline, GitHub Actions, FTPS)
  5. Zie ook: wiki-hugo-dict-scope-with-block (Go-template scope in homepage-secties)
  6. Zie ook: wiki-immersive-interview-framework
  7. Gerelateerd project: 03-projecten/jimvandenbreemen.nl
  8. Zie ook: research-pretext-chenglou — conceptually_related_to

Backlinks

Grafiekweergave