Toegankelijkheid: tekst schaalt mee

Alle tekst is in rem opgemaakt, dus de pagina schaalt mee met je browser-zoom en met de OS-tekstgrootte — tot 200% blijft de layout heel. Probeer het: gebruik Ctrl + + / − (of de demoknop hieronder, die enkel de pagina-zoom simuleert).

Kleur

Merkkleur via --brand-rgb (white-label). Neutraal = ink-schaal.

Merk (zuidberg)

100

300

DEFAULT

700

Neutraal (ink)

100

200

300

400

500

600

700

800

900

Typografie

Schaal volledig in rem. 1rem = 16px bij standaard-browser.

Display

text-4xl · 2.25rem

Kop 1 (h1)

text-2xl · 1.5rem

Kop 2 (h2)

text-xl · 1.25rem

Subkop (lg)

text-lg · 1.125rem

Body — leesbare lopende tekst voor het brede publiek (20–65 jr).

text-base · 1rem

Klein — bijschriften en hulptekst.

text-sm · 0.875rem

Extra klein — meta, badges, labels.

text-xs · 0.75rem

Spacing

Tailwind 4px-grid. Aanvullend: 4.5 (18), 13 (52), 18 (72), touch (44).

2 · 8px

4 · 16px

6 · 24px

8 · 32px

touch · 44px

12 · 48px

Iconen

Self-hosted SVG-sprite (Lucide-stijl). Render via <use> — zie onderaan.

<svg class="icon" aria-hidden="true"><use href="/icons/sprite.svg#icon-home"></use></svg>

Knoppen

Min. 44px hoog, zichtbare focus, disabled-state. Icon-only knoppen hebben een aria-label.

Formulieren

Labels, hulptekst en focus-ring in merkkleur.

E-mailadres We sturen je een eenmalige inlogcode. Afdeling Bericht

Kaart, badge & afdeling-chip

Jan de Vries

Engineering 2 uur geleden

Een voorbeeld van een feed-kaart met afdeling-chip en meta-tekst.

Badges

Neutraal Merk Inactief HR Marketing

Toast

Korte, zelf-verdwijnende bevestiging (role="status").

Bericht geplaatst

States: laden / leeg / fout

Nette, rustige placeholders met consistente vorm.

Tijdlijn laden…

Nog geen berichten in deze tijdlijn.

Er ging iets mis bij het laden. Probeer het opnieuw.