MN Project Beweging

Design system

Eén set kleuren, letters, ruimtes en bouwstenen voor de hele website. Zo ziet elke knop, kop en witruimte er overal hetzelfde uit, en blijft de site rustig en herkenbaar.

Teksten, prijzen en contactgegevens staan op één plek: build/content.js. Na een wijziging maakt node build/build.js de HTML van alle versies opnieuw.

• Eerst duidelijkheid. Bovenaan elke pagina: wat, voor wie, waar en de volgende stap.
• Eén hoofdactie. De primaire knop heet overal 'Plan een kennismaking'.
• Prijzen zichtbaar. Nooit verstopt in lopende tekst.
• Mobiel eerst. Compacte kop, tikvlakken van minimaal 44×44 px, korte koppen.
• Licht en snel. Geen plugins, eigen lettertypes, foto's in AVIF/WebP per schermformaat.
• Rustig. Zachte kleurvlakken, veel ruimte, geen bewegende banners. Koppen in gewone zinsopbouw.
• Het verhaal van Marta voorop. Haar eigen teksten staan direct onder de hero, opgeknipt in hoofdstukken (story in content.js).
• Sport, geen therapie. Teksten gaan over fit worden, energie, doorzetten en zelfvertrouwen, niet over mentale problemen.
• Tegel → dienstpagina → formulier. Elke dienst heeft een tegel op de homepage en een eigen pagina. De kennismakingsknop zet die dienst al klaar in het formulier (contact.html?dienst=…).
• Toegankelijk. Contrast minimaal AA, zichtbare focus, rustiger animaties bij 'reduce motion'.

Kleur

Het palet komt rechtstreeks van de huidige website. Elke kleur heeft een vaste rol. Thema's wijzigen alleen de semantische tokens (--color-*), nooit het palet zelf.

Waarom 'koraal donker'? Witte tekst op het originele koraal (#D94F4F) haalt maar 4,0:1 contrast, onder de norm van 4,5:1 voor gewone tekst. Voor knoppen gebruiken we daarom een iets donkerdere tint; het originele koraal blijft voor accenten en grote koppen.

Typografie

Montserrat blijft de basis voor tekst en knoppen (herkenbaar van de huidige site). Elk thema kiest een eigen koplettertype. Alle lettertypes staan op de eigen server: sneller en zonder gegevens naar Google.

Alle groottes schalen vloeiend mee met het scherm (clamp()), zodat koppen op mobiel compact blijven. Regellengte maximaal ±65 tekens.

Ruimte & vorm

Een schaal op basis van 4 en 8 pixels. Secties krijgen vloeiende verticale ruimte (--section-y).

Knoppen

Minimaal 52 px hoog (klein: 44 px). De primaire knop komt één keer per scherm voor. Hoekafronding volgt het thema via --btn-radius.

Kaarten, prijs & badges

Een dienst toont altijd: naam, voor wie, prijs en een link. Prijzen gebruiken de .price-component zodat ze overal vergelijkbaar zijn.

Inhoudsblokken

Lange teksten worden opgeknipt: stappen, kerncijfers, checklijsten en uitklapblokken.

Formulier

Labels altijd zichtbaar boven het veld, optionele velden gemarkeerd, invoer 16 px (geen inzoomen op iPhone). Het formulier staat nu in demo-modus tot er een formulierdienst gekoppeld is.

Navigatie & contact

Menu met vier items: Diensten, Werkwijze, Over mij, Contact, plus de primaire knop. Op mobiel: een kop van 64 px met menuknop, en onderaan een vaste contactbalk die verdwijnt zodra het contactblok in beeld is.

Iconen

Eén set lijn-iconen in één bestand (icons.svg). Kleur volgt de tekst. Gebruik: <svg class="icon"><use href="icons.svg#arrow"/></svg>

Beeld

De hero-foto (brein tussen dumbbells) is het vaste beeldmerk: fysieke en mentale gezondheid samen. Marta zelf staat alleen in beeld bij 'Over Marta'. Bestandsnamen beschrijven wat je ziet (goed voor Google) en elke foto heeft een alt-tekst.

Foto: duo-training (volgt)

Thema's

Elke versie laadt eerst tokens.css → base.css → components.css en daarna een eigen theme.css.