Ontwerpregels · vast vs. invulbaar

Vorm staat vast. Inhoud wordt ingevuld.

De site gedraagt zich als een leeg geïnstalleerd thema: kleur, typografie, spacing, grid, knoppen, formulieren, navigatie, overlays en vaste beeldverhoudingen staan vast in code. Banners, sliders, video’s, foto’s, logo’s en decoratie zijn mediavelden die later vanuit de achterkant worden ingevuld. Een niet-ingevuld onderdeel wordt op de publieke site verborgen; in de beheeromgeving en deze styleguide tonen we een rustige lege staat.

Wat code níet doet: geen verfstrepen, krassen, grunge, stempels of campagnebeelden tekenen. Het echte logo is een afbeelding; sfeer en decoratie komen uit mediavelden. De publieke website is deze ronde niet aangepast.

01 · Kleurenpalet

Zwart als basis. Rood als gerichte stempel.

Ongeveer 70–80% van het scherm is zwart of donker antraciet. Witte en grijze teksten zorgen voor rust. Rood is herkenbaar en zichtbaar, maar altijd gericht: knoppen, actieve nav, stempelvormen en korte accenten — nooit grote blokken gewone tekst.

02 · Typografie

Oswald voor titels, Inter voor alles wat leest.

Grote koppen lopen in Oswald: industrieel, compact en deels in hoofdletters. Lopende tekst, navigatie, formulieren en knoppen blijven in Inter — rustig en goed leesbaar. Het echte logo wordt later als afbeeldingsbestand geplaatst en niet met tekst nagebouwd.

03 · Logo als media-item

Echt logo als bestand, niet nagebouwd in code.

Het officiële logo wordt als afbeelding geplaatst. Er zijn twee logovelden: één voor een lichte achtergrond (het aangeleverde bestand, zwarte letters) en één voor een donkere achtergrond (witte variant — nog aan te leveren). Geen CSS-filter om zwart wit te maken.

Logo — lichte achtergrond ✓ aangeleverd

Getoond op een licht vlak. Straks in de beheeromgeving te uploaden.

Logo — donkere achtergrond — nog aan te leveren

Logo (witte variant)

Witte versie van het logo voor zwarte/antraciet vlakken (header, footer).

Desktop ontbreektMobiel ontbreektmin. vector / 600×200

Op zwart tonen we voorlopig een neutraal veld — geen gefilterd zwart logo.

Logovelden

04 · Knoppen & statussen

Rode, witte, omlijnde en tekstknoppen op zwart.

Rood is de primaire actie. Wit is een krachtige tweede actie. Omlijnd is rustig. Tekstknop voor vervolgacties. Elke knop heeft een zichtbare hover, focus, loading- en disabled-status.

Focus: rode knop krijgt witte focus-ring, witte/omlijnde knop een rode ring — altijd met 2 px offset voor toetsenbordnavigatie. Loading toont een spinner in de knop.

05 · Navigatie

Zwarte header, logo als mediaveld, rustige nav, duidelijke acties.

De header is zwart. Het logo is een mediaveld (donkere variant — nog aan te leveren), niet met tekst nagebouwd. Actieve pagina is rood. Rechts staan altijd WhatsApp en Bel Gido. Op mobiel een echte hamburger die een menu uitklapt.

Desktop

Mobiel

06 · Hero-mediasysteem

Video of afbeelding, poster-first, met reduce-motion respect.

Een hero op de publieke site speelt standaard automatisch, zonder geluid, in een loop en inline op mobiel. Eerst verschijnt de poster; pas als de video afspeelt verdwijnt deze. Gebruikers met minder beweging zien alleen de poster. Op mobiel komt een aparte video/poster.

Let op: de aangeleverde video is een breed desktopbestand. Op mobiel mag dit niet automatisch hard worden uitgesneden — daarvoor wordt een aparte mobiele video of mobiele poster ingesteld. Kop en tekst hierboven zijn voorbeeldinhoud en configureerbaar.

Hero-mediasysteem velden

07 · Herbruikbaar mediasysteem

Eén veldstructuur voor álle beeld- en videoplekken.

Ieder beeldveld kan later dezelfde set velden bevatten. De code bepaalt alleen de plek, de verhouding, de overlay en de leesbaarheid — niet de inhoud.

Mediaveld-structuur

08 · Decoratieve huisstijlbeelden

Verfstrepen, stempels en grunge = beeld, niet code.

Deze sfeerbeelden worden later door De Jongens of een ontwerper aangeleverd. De code maakt alleen de plek en de positioneringsregels. Is een bestand niet ingevuld, dan blijft het onderdeel weg — de site blijft ook zonder netjes en professioneel.

Regel: code tekent geen verfstrepen, krassen, grunge of stempels na. Al deze sfeer komt uit echte mediavelden. Zonder bestand → geen decoratie.

09 · Sliders & banners

0 slides → verborgen. 1 → banner. 2+ → echte slider.

Een slider zonder slides wordt niet getoond. Eén actieve slide toont als gewone banner zonder pijlen, bolletjes of automatische wisseling. Vanaf twee actieve slides wordt het een echte slider met navigatie en wisseling.

Slide-velden

10 · Categorieën / branches

Categorietegels worden gedragen door fotografie.

Een tegel zonder ingestelde foto/naam wordt op de publieke site verborgen. Hieronder de lege staat zoals de beheeromgeving deze toont: plek, verhouding en wat nodig is.

Overlay: een vaste donkere gradient onderaan houdt de categorienaam leesbaar — instelbare sterkte. Zonder media blijft de hele tegel weg op de publieke site.

11 · Merken

Uitsluitend echte, geüploade merklogo’s.

Geen monogrammen of nagemaakte logo’s. Een merk zonder logo is in de beheeromgeving incompleet; op de publieke site wordt het alleen als rustige tekst getoond of verborgen.

Incompleet merk (beheerweergave)

Merkvelden

12 · Configureerbare sectietypes

Vaste set sectietypes, instelbaar — geen vrij drag-and-drop.

Een beheerbare vaste set professionele sectietypes met instelbare inhoud en volgorde, zodat de website visueel niet uit elkaar valt. Iedere sectie kan aan/uit, een titel/tekst, eigen beeld, een achtergrondvariant en eigen knoppen krijgen.

13 · Homepage-architectuur

Lege homepage, opgebouwd uit configureerbare secties.

De voorkant kan volledig leeg starten. De homepage is een vaste set van 13 sectietypes; niet-ingevulde secties worden verborgen. Elke sectie kan afzonderlijk aan/uit, van inhoud, beeld en volgorde worden voorzien.

Geen drag-and-drop-vrijheid: een vaste set sectietypes in instelbare volgorde voorkomt dat de site visueel uit elkaar valt. Volgorde wel aanpasbaar per sectie.

14 · Lege staten

Beheer toont een voorschrift. Publiek toont niets.

Een niet-ingevuld onderdeel wordt op de publieke website volledig verborgen — geen technische placeholders, geen “upload hier”-teksten, geen lege vlakken. In de beheeromgeving en deze styleguide zien we wél een rustige placeholder met het voorschrift.

Regel: de voorkant moet ook zonder enige inhoud netjes en professioneel blijven — geen kapotte of lege blokken, geen lege sliders.

15 · Spacing, breedte & grid

Een rustig raster als fundament.

Vaste spacing-schaal, één maximale contentbreedte (1240 px) en een 12-koloms raster voor uitlijning.

16 · Footer & mobiel

Volledig donkere footer en mobiele variant.

Footer met logo-slot (donkere variant) en configureerbare linkkolommen. Mobiel behoudt dezelfde hiërarchie — zonder nepcontent.

Einde

Vast vs. invulbaar.

Na goedkeuring worden de publieke pagina’s opgebouwd uit deze sectietypes — volledig leeg startend, zonder kapotte of lege blokken.