Een merk-eigen theme bouwen op Hyvä UI

Een merk-eigen theme bouwen op Hyvä UI

Hyvä UI levert je in één licentie van ~250 euro een volledig design system met Tailwind CSS-componenten die direct productierijp zijn. Voor agencies die meerdere klanten bedienen, en voor merchants met een sterk merk, is dat een interessant startpunt — mits je weet hoe je die basis omzet naar iets unieks zonder elk component opnieuw te bouwen.

Wat Hyvä UI wel en niet is

Dit punt is cruciaal, want de verwarring is wijdverspreid.

Je koopt Hyvä UI niet om een Magento-installatie te vervangen. Je koopt het om sneller kwalitatieve UI te bouwen, ongeacht je stack.

De white-label case: één basis, meerdere merken

Stel: je bent een agency en je bouwt voor vijf klanten een webshop. Zonder gedeelde basis bouw je vijf keer een button-component, vijf keer een modal, vijf keer een accordion. Dat zijn duizenden regels dubbele code en vijf keer onderhoud.

Met Hyvä UI als basis heb je één set componenten. Je past per klant de design tokens aan — kleuren, typografie, spacing — en het resultaat ziet er voor iedere klant uniek uit.

Wij zien dit bij klanten terugkomen als de meest efficiënte aanpak voor projecten met een strak tijdplan en een duidelijke huisstijl.

Design tokens als fundament van een uniek merk

Hyvä UI is gebouwd rondom Tailwind CSS. Dat betekent dat het uiterlijk volledig via de Tailwind-config te sturen is. Geen maatwerk-CSS nodig voor het basisgedrag.

Een merk-eigen theme bouw je in drie stappen:

1. Kleuren definiëren — vervang de standaard Tailwind-palet met je merkkleur als primary, secondary en accent.
2. Typografie instellen — koppel je Google Font of licensed font via de fontFamily-sleutel.
3. Spacing en border-radius aanpassen — één config, consistent door alle componenten heen.

Voorbeeld van een merkspecifieke tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#1A3C5E',
          light:   '#2D5F8A',
          dark:    '#0F2337',
        },
        accent: '#E8500A',
      },
      fontFamily: {
        sans: ['Geist', 'ui-sans-serif', 'system-ui'],
        display: ['Playfair Display', 'Georgia', 'serif'],
      },
      borderRadius: {
        DEFAULT: '0.25rem',
        lg:      '0.5rem',
        xl:      '1rem',
      },
      spacing: {
        section: '5rem',
      },
    },
  },
};

Alles wat je hier definieert, sijpelt automatisch door naar de Hyvä UI-componenten. Je button gebruikt bg-primary, je card gebruikt rounded-lg, je heading gebruikt font-display. Geen zoek-en-vervang door componenten heen.

Meer achtergrond over hoe design tokens in Tailwind werken lees je in ons artikel over Hyvä UI design tokens en Tailwind.

Het Figma-bestand als ontwerp-startpunt

Hyvä UI levert een Figma Community-bestand. Dat bestand bevat dezelfde design tokens en componenten als de code — 1-op-1.

Voor agencies werkt dit als volgt:

• Designer opent het Figma-bestand en swappt de kleurvariabelen naar de huisstijl van de klant.
• Typografie en spacing volgen.
• Het resultaat is een klantspecifiek design op basis van bewezen componenten.
• Developer zet de Tailwind-config in code en de componenten sluiten direct aan.

Het voorkomt de klassieke mismatch waarbij een designer iets bedenkt dat een developer daarna van nul moet bouwen. De componenten bestaan al in code; alleen de tokens veranderen.

Component-aanpassingen: wanneer tokens niet genoeg zijn

Soms is een token-aanpassing niet voldoende. Een merk wil een button met een specifieke hover-animatie, of een productcard met een andere informatiehiërarchie.

Dan pas je het HTML-template aan, niet de JavaScript-logica. Dat is het voordeel van HTML-first: de interactie zit in Alpine.js-attributen die los staan van de visuele structuur.

Praktisch verschil:

De vuistregel: ga zo globaal mogelijk. Alles wat je op token-niveau kunt regelen, scheelt onderhoud op componentniveau.

Performance blijft intact

Een veelgestelde vraag: "Als ik de componenten aanpas, verlies ik dan de performance-voordelen?"

Nee, mits je de kern respecteert.

Hyvä UI is ontworpen met ~95% minder JavaScript dan een traditionele Luma-stack. Alpine.js doet wat nodig is; geen jQuery, geen KnockoutJS, geen RequireJS. Die filosofie geldt voor de componenten, niet alleen voor de standaard styling.

Zolang je geen zware JavaScript-bibliotheken toevoegt voor visuele effecten die ook in CSS kunnen, blijf je ruim boven Lighthouse 90. Wij halen bij klanten consistent 95+ op productie.

Dat geldt ook als je de Tailwind-config aanpast. Tailwind bouwt alleen de klassen die je daadwerkelijk gebruikt; een grotere config vertaalt zich niet naar een groter CSS-bestand.

Meer over de performance-architectuur lees je op de Hyvä UI overzichtspagina.

Framework-agnostisch: branding voor Magento, Laravel én headless

Hyvä UI is niet gebonden aan Magento. Dat is relevant voor agencies die dezelfde huisstijl over meerdere platforms willen doorzetten.

Praktische voorbeelden:

• Magento 2 + Hyvä theme: Hyvä UI-componenten direct integreren, huisstijl via Tailwind-config.
• Laravel: zelfde componenten, zelfde config, zelfde visueel systeem.
• Headless (Next.js, Astro): Tailwind-config en HTML-structuren overzetten, Alpine.js eventueel vervangen door React/Vue logica.
• Statische landingspagina: component HTML kopiëren, build-step met Tailwind voldoende.

Voor een merk dat meerdere touchpoints heeft — webshop, portaal, campagnepagina — is een gedeeld design system op basis van Hyvä UI een serieuze optie. De eenmalige investering van ~250 euro per developer/project is in dat perspectief verwaarloosbaar.

Wanneer Hyvä UI niet de juiste keuze is

Eerlijkheid spaart iedereen tijd.

• Je een bestaande Magento 2 Luma-installatie hebt en geen plannen om naar een Hyvä theme te migreren. De componentbibliotheek sluit aan op een Hyvä of clean Tailwind-omgeving, niet op Luma-templates.
• Je geen frontend-developer hebt die Tailwind kent. De componenten zijn niet drag-and-drop; je hebt iemand nodig die de HTML begrijpt en een build-step kan opzetten.
• Je merk vereist een volledig custom animatie-systeem met zware JavaScript-interacties. Dan zit je al snel buiten het bereik van Alpine.js en moet je beoordelen of de basis nog past.
• Je een page-builder-workflow verwacht (Pagebuilder, ElementorJS). Hyvä UI is code-first, niet editor-first.

En specifiek voor het white-label scenario: als je per klant sterk afwijkende componentstructuren verwacht, loop je het risico dat je toch veel per-project maatwerk bouwt. Dan verlies je een deel van het voordeel. Denk van tevoren na over hoeveel variatie je per merk accepteert.

Hoe een branding-traject er bij ons uitziet

Wanneer wij Hyvä UI inzetten voor een merk-eigen theme, werkt het zo:

1. Inventarisatie huisstijl — kleurpalet, typografie-keuzes, spacing-systematiek, merkgids.
2. Token-mapping — huisstijl vertalen naar Tailwind-config, inclusief dark-mode-varianten indien van toepassing.
3. Figma-sync — designbestand updaten zodat visueel design en code synchroon lopen.
4. Component-audit — welke componenten passen direct, welke vragen HTML-aanpassingen?
5. Build-verificatie — Lighthouse-check op productie-omgeving, geen CSS-regressies.
6. Documentatie — korte gids voor de klant of intern team: hoe voeg je een nieuw token toe?

Stap 1 tot 3 kosten bij een goed voorbereide klant een halve dag. Stap 4 en 5 hangen af van de complexiteit van de huisstijl.

Conclusie

Een merk-eigen theme op Hyvä UI bouwen is geen kwestie van een theme kopen en hopen dat het past. Het is een bewuste keuze om een design system te omarmen en je huisstijl via Tailwind-tokens te vertalen naar alle componenten tegelijk.

Het resultaat: snellere oplevering, betere performance, minder onderhoud. En een basis die je voor meerdere klanten of platforms hergebruikt.

Wil je weten of Hyvä UI past bij jouw stack en merkwensen? Neem contact op via /contact voor een gratis Tech Check. We kijken mee en geven een eerlijk advies — geen verkoopverhaal.