Editorial-brutalist design voor persoonlijke kennissystemen

Definitie

Een design-richting voor privé-wiki’s en kennissystemen die breekt met de klassieke Wikipedia-blauw-serif-op-wit look door te kiezen voor een warm, dark-first, typografisch karaktervolle aesthetiek die past bij een journalist-ontwerper. Kenmerken: variable serif (Fraunces of vergelijkbaar), één krachtige accent-kleur, §-prefix voor h2, drop caps, decimal-leading-zero TOC, archival noise overlay, en stempel-achtige privé-markeringen.

Context

Toen voor de KennisBank wiki web UI een visuele richting moest worden gekozen, was de default Wikipedia-look (Vector skin, blauw-op-wit, Helvetica/Times) te steriel voor een journalistiek-persoonlijk archief. De gekozen richting pakt elementen uit editorial magazine design (kickers, drop caps, serif typografie), brutalistisch webdesign (harde randen, accent-kleur contrast, geen schaduwen) en archief-aesthetiek (noise overlays, stempels, mono metadata-strips). Gebruikt in ~/Claude/projects/kennisbank-web/ als custom Quartz theme.

Kernpunten

Typografie

Display en body: variable serif met optical sizing

• Fraunces is de workhorse. Variable font met opsz (9 tot 144) en SOFT (0 tot 100) assen
• opsz: 144, SOFT: 80, wght: 560 voor display-headings: karakter zonder schreeuwen
• opsz: 14, SOFT: 30, wght: 400 voor body: soberder, leesbaar
• Alternatieven met vergelijkbaar karakter: Newsreader, Literata, DM Serif Display, Cormorant

UI-elementen: onderbenut neo-grotesque

• Instrument Sans voor nav, tags, metadata, button labels
• Alternatieven: Host Grotesk, Archivo, Public Sans
• Expliciet NIET: Inter, Space Grotesk, Work Sans (te generiek, te veelgebruikt door AI-gegenereerde sites)

Mono: klassieker mag

• JetBrains Mono of IBM Plex Mono voor code, kickers, metadata-strips, chips
• Belangrijk voor de archive-vibe: mono geeft library-catalogkaart gevoel

Kleurpalet

Dark als primaire modus, light als switcher. Eén accent-kleur door de hele UI, geen secundaire kleuren.

Rol	Dark	Light
Achtergrond	#0b0a07 warm near-black	#f5efde cremewit papier
Surface	#151309 warmer zwart	#fbf6e6
Tekst primair	#eee7d3 warme ivoor	#1a1713
Tekst muted	#8a8679	#5c574d
Accent	#ff5722 ink-oranje	#c2410c burnt orange
Border	#2a261c	#dfd7be

Regel: het accent is één signaal door de hele UI. Hover-staten, drop cap, stub-links, §-prefixen, stempel, TOC-counters. Nooit een tweede accent introduceren.

Typografische signalen uit oude drukwerktraditie

• § voor h2 in de accent-kleur, italic, kleiner dan de heading zelf. Signaal: “nieuwe sectie”. Komt uit pre-digitale typografie.
• Drop cap op de eerste alinea van een artikel, Fraunces wght 700 SOFT 100, 5 regels hoog, float-left, accent-kleur
• Decimal-leading-zero counters in de TOC via CSS counter-reset en counter(toc, decimal-leading-zero). Geeft 01, 02, 03 zoals in boek-indices.
• Kicker boven de h1: kleine mono-tekst met kruimelpad (“Wiki · Claude Code · Tooling”) in accent-kleur
• Metadata-strip onder de h1: mono font, all-caps, clusters van label+waarde zoals een library-catalogkaart

Layout-patronen

• Content-kolom max ~720px voor leesbaarheid (64 tot 66 karakters per regel)
• Drie-kolom grid desktop: linker TOC/explorer, middle article, rechter infobox/graph/backlinks
• Border-bottom 2px solid onder de article-header in plaats van schaduwen
• Orange horizontale lijn van 42px als optische teaser boven de h1 (subtiel signaal, geen grote banner)
• Backlinks als cards met accent left-border die bij hover groeit van 3px naar 8px (de content schuift mee)

Archief-details

• SVG noise overlay op de hele body met 3.5 tot 4% opacity. feTurbulence fractalNoise baseFrequency 0.85. Geeft papier-textuur zonder afleidend te zijn
• Grote watermark K in de footer (of eigen initiaal), 6rem Fraunces, 18% opacity, translate-center, behind de footer-content (z-index 0)
• Privé Archief stempel in de sidebar: 4 graden gedraaid, mono font, accent border, text “Privé / Archief” + subtitel met datum. Signaal dat de wiki afgeschermd is zonder modern lock-icon cliché

Wat je NIET doet

• Geen verlopen of gradient meshes (te trendy)
• Geen schaduwen (brutalism: harde randen)
• Geen paarse accent-kleur op witte achtergrond (AI-slop signaal)
• Geen ronde hoeken op content-containers (border-radius 0 voor alles behalve buttons en pills)
• Geen Inter, Space Grotesk, Roboto, Arial (generiek, onderdrukt karakter)
• Geen stockicons (emoji, lucide, heroicons) voor UI-semantiek: gebruik typografische tekens (§, ↩, ⌕, ◐) waar mogelijk

Verbanden

• Zie ook: wiki-quartz-4-custom-extensies - technische implementatie in Quartz
• Zie ook: wiki-sass-use-import-ordening - Sass valkuil bij font-imports in dit theme
• Zie ook: wiki-jimvandenbreemen-design-systeem - Jim’s eigen design-systeem voor jimvandenbreemen.nl (bordeaux-tokens, brutalisme-modificaties)
• Zie ook: wiki-karpathy-llm-wiki - Karpathy LLM wiki patroon waarop KennisBank gebouwd is

Bronnen

• Undercase Type. (2026). Fraunces variable serif. https://fraunces.undercase.xyz/
• Google Fonts. (2026). Fraunces, Instrument Sans, JetBrains Mono specimens.
• Praktijk-referentie: Dutch journalistieke printtraditie (Volkskrant, NRC) als toon-aangever

Sessie-herkomst

• raw-sessie-2026-04-14-wiki-web-ui-quartz-bouw