Fundament voor
nieuwe klantsites.
Dit is de demo-pagina van het blurr-site-starter project. Hier staan alle design-primitieven: nav, .container, .narrow, typografie-floor en GSAP-reveals.
Zo werkt de .container klasse.
De .container klasse is de enige outer wrapper voor page content. max-width: var(--max-w), 1180px, met padding-inline: var(--gutter). Nooit .container als grid-cel gebruiken (dubbele padding).
Token: --acc
Primaire brandkleur. Ingevuld door brandy per project.Token: --font-display
Heading-font. Placeholder: Geist. Vervangen per klant.Token: --radius
Border-radius voor kaarten en buttons. Nu: 8px.Token: --max-w
Max breedte van de container: 1180px. Niet aanpassen.De .narrow klasse lijnt links uit.
Max 860px breed, maar de linker rand staat op dezelfde pixel als de hero H1 en .container content. Dit is de correcte manier voor editorial en tekstuele secties. .narrow centreert niet via margin-inline: auto, maar gebruikt een calc-formule die de container-offset matcht.
Gebruik .narrow voor lange leesstukken, toelichtingen en secties waar de tekst de volle breedte niet nodig heeft.
Animaties via ScrollTrigger.
Elk element met de .gsap-reveal klasse schuift omhoog bij scroll. Stagger van 0.1s tussen elementen. Prefers-reduced-motion wordt gerespecteerd.
Alleen translate/scale/opacity
Nooit top/left/width/height animeren. Gebruik x, y, scale en opacity in GSAP.
ScrollTrigger cleanup
Bij Astro View Transitions worden ScrollTriggers opgeruimd via astro:before-swap.
gsap-init wrapper
De animate() helper throwt een Error bij verboden CSS-properties.
Minimums die altijd gelden.
Hieronder de typografische minimums uit de BLURR-richtlijnen. Body nooit onder 16px, labels nooit onder 11px.
Heading niveau 1
Heading niveau 2
Leadingtekst voor heroes en intro-secties. Minimaal 18px.
Standaard body-tekst. Minimaal 16px, nooit lager. Kleur: var(--ink-dim).
Klein body-tekst voor bijschriften. Minimaal 14px.