Welkom op de brandguide van Zwerfkei. Deze pagina documenteert de visuele bouwstenen van het design systeem: kleuren, typografie, componenten en spacing. Gebruik dit als referentie bij het bouwen van nieuwe pagina's en componenten. Deze informatie komt uit het Figma design, maar is hier in codevorm uitgewerkt zodat je precies kunt zien hoe alles is opgebouwd en geconfigureerd.

Tech stack

De styling is opgebouwd met de volgende tools:

• Tailwind CSS v4 — Utility-first CSS framework. Configuratie gebeurt volledig via CSS (@theme, @utility, @plugin), zonder tailwind.config.js.
• @tailwindcss/typography — Voegt de prose-klassen toe voor het stylen van vrije HTML-content, zoals artikelen en CMS-teksten.
• fluid-tailwindcss — Genereert vloeiende, viewport-schaalbare waarden via CSS clamp(). Gebruik klassen zoals fl-text-2xl/5xl of fl-p-4/8 om waarden automatisch te laten meeschalen tussen 600px en 1300px viewport breedte.
• Reka UI — Headless, toegankelijke Vue-componenten voor UI-patronen zoals modals, dropdowns, tabs en tooltips. Geen standaard styling — volledig te stylen met Tailwind.
• Swiper — Touch-vriendelijke slider/carousel library. Wordt headless ingezet zodat alle styling via eigen Tailwind-klassen verloopt.
• blade-icons — Rendert SVG-iconen server-side inline in Blade via <x-icon-naam />. Iconen worden geladen vanuit resources/svg/.
• vite-svg-loader — Vite plugin die SVG-bestanden importeert als Vue componenten via ?component. Gebruikt dezelfde bestanden uit resources/svg/ als blade-icons.
• GSAP — Animatie-library. Gebruiken we voor animaties zoals parallax-effecten.

Typografie

Het lettertype is Alexandria (via Google Fonts), ingesteld als het standaard sans-serif font. De heading-klassen (text-h1 t/m text-h10) zijn handmatig gedefinieerd met clamp()-waarden en schalen vloeiend mee met de viewport — zonder vaste breakpoints.

Kleurpalet

Alle kleuren zijn gedefinieerd in de oklch-kleurruimte, wat zorgt voor perceptueel uniforme kleuren en betere toegankelijkheid. Elke kleur heeft een basis-, primary- en secondary-variant.

Fluid spacing

Spacing en maatvoering gebruiken de fl-* klassen van fluid-tailwindcss. De plugin is geconfigureerd met useRem: true en checkAccessibility: true, wat betekent dat gegenereerde clamp-waarden automatisch worden getoetst aan WCAG SC 1.4.4 (tekst moet tot 200% vergroot kunnen worden zonder verlies van functionaliteit).

Ideeën

Later in het design worden tabs ingebouwd. Eigenlijk wil ik die uiteindelijk gebruiken om deze brandguide te structureren, zodat je per sectie (kleuren, typografie, componenten) direct naar de relevante content kunt navigeren. Voor nu is het nog een lange scroll, maar dat zal in de toekomst verbeteren!