Style guide

Kitchen sink — alle componenten op één pagina.

Visuele QA. Wissel via theme-toggle naar light mode om beide weergaves te checken. Niet gelinkt vanuit nav.

Typografie

Het fundament staat — h1

Section heading — h2

Sub-section — h3

Smaller heading — h4

Body-paragraaf in Geist. Een Inter-achtige geometrische sans, gemaakt voor moderne UI. Gebruikt voor artikel-content, paragrafen, en de meeste tekst die je dagelijks leest. Met strong, emphasized, een link en inline code erbij.

Tweede regel om regelafstand te zien. Lange-vorm leesbaarheid op het scherm — niet te dicht, niet te ijl. Maximaal 70 karakters per regel voor leesbaarheid; daarna afkapping zodat geen regel-onleesbaarheid ontstaat.

Kleur & accent

primary secondary tertiary success warning error

Buttons & interacties

Met arrow

Per memory: outline-pill, uppercase tracked, geen filled accent CTAs.

Artikel-content (prose plugins)

Dit blok demonstreert wat 04-prose.css rendert voor een markdown-artikel via de 11 rehype/remark plugins.

Section heading uit markdown

Paragraaf na heading, met een interne link en externe link.

Sub-section

Italic deck na H3 — wordt door rehype-item-deck herkend.

Tekst na de deck, met een nadrukkelijke passage erin.

  • Eerste lijst-item met afkapping aan de zijkant.
  • Tweede item — bullet is een dunne lijn, niet een dot.
  • Derde item, langere regel die over twee regels loopt om te zien hoe de inspring werkt op meerregelige bullets.
  1. Genummerd één.
  2. Genummerd twee.
  3. Genummerd drie.
Generieke blockquote — display-font, oversize, primary-accent border-left.
💡 Beginner-tip: Korte, toegankelijke uitleg voor wie net begint. Renders door rehype-callout-tags met secondary-accent.
⚡ Voor gevorderden: Diepere context, technische nuance, of strategische overweging. Primary-accent.
Voor wie is dit artikel? Korte audience-omschrijving. Tertiary-accent voor onderscheid.

Eerste stap

Concrete actie die je vandaag kunt nemen. Klein genoeg om binnen een uur te starten.

Voor teams

Bredere implementatie — beleid, training, infrastructuur. Een uur tot meerdere weken werk.

Met inline NL-handle Nederlandse context en een rode-draad-segment.

Rode-draad zin — verbindt thema's door het artikel. Italic, dotted-rode border.

Bron: NRC, 12 april 2026

BedrijfModelRelease
OpenAIGPT-5Q1 2026
AnthropicClaude 4.6Maart 2026
GoogleGemini 3April 2026

Na de horizontale scheidslijn (met ruit-flourish) komt de slot-paragraaf.

Form-elementen

Notities