Op voorraad
ART. 10042
Brandbook · Direction D
Eén merk, één taal. Voor de vaklui die door willen.
Dit brandbook legt vast hoe Miedema Bouwmaterialen er online uitziet en klinkt: kleuren, typografie, componenten en toon — geëxtraheerd uit de live homepage van direction D.
Bron: direction-d/index.html
Juli 2026
Logo
Het woordmerk “MIEDEMA” in warm charcoal met de wapperende vlag in merkgroen. Het logo is een vast bestand: altijd als <img> plaatsen, nooit natekenen, herkleuren of uitrekken. Houd ruime witruimte rondom.
brightness-0 invert (footer).
- In de header 42–47 px hoog, in de footer 36 px.
- Op fotografie alleen diapositief en alleen bij voldoende contrast.
Kleuren
Twee Pantone-schalen dragen het merk: 334 M (groen) en 5605 M (grijsgroen), aangevuld met één amber accent voor de primaire actie. Groen doet het merkwerk, grijsgroen doet het leeswerk, amber doet de verkoop — en verder niets.
Groen — Pantone 334 M
merkkleur · basis is green-600#009A7B
#F2F9F6green-50 · afgeleid#E4F2ECgreen-100 · afgeleid#A6D7D0green-200 · Pantone-tint#77C3AAgreen-300 · Pantone-tint#5EBB9Fgreen-400 · Pantone-tint#26A487green-500 · Pantone-tint#009A7Bgreen-600 · basis#007F66green-700 · afgeleid#006650green-800 · afgeleid#004A3Agreen-900 · afgeleid- 600
- primaire knoppen en vlakken, zoekknop, actieve nav-streep, checkboxes, voortgangsbalk
- 700
- hover van 600 én groene tekstlinks (“Bekijk alles in…”)
- 500
- hover-rand van product- en categoriekaarten
- 300/200
- accenten op donkere vlakken: kickers en kolomkoppen in de footer en op banners
- 100
- “Op voorraad”-badge (met tekst green-800), vinkjes-bullets
- 50
- zachte wash voor promopanelen en chips
Grijsgroen — Pantone 5605 M
tekst & vlakken · basis is grey-700#3C483D
#F4F6F4grey-50 · afgeleid#E9ECE9grey-100 · afgeleid#D5DBD5grey-200 · afgeleid#818C81grey-300 · Pantone-tint#747F74grey-400 · Pantone-tint#636B63grey-500 · Pantone-tint#49564Agrey-600 · Pantone-tint#3C483Dgrey-700 · basis#303A31grey-800 · afgeleid#252D26grey-900 · afgeleid- 900
- inkt: donkerste tekst, tekst op amber, scrim/overlay
- 700
- koppen én de footer-achtergrond (hover: 800)
- 500
- de standaard bodytekst (body-kleur van de site)
- 400/300
- metatekst, placeholders, rustende iconen
- 200/100
- randen en hairlines (100 is de standaard kaartrand)
- 50
- sectie-achtergronden en invoervelden
Amber — het CTA-accent
alleen voor de primaire actie · tekst erop altijd grey-900
In winkelmand
#F8AC1Aamber-500 · basis, gespecificeerd
Hover / active
#D89515amber-600 · color-mix(in oklab, #F8AC1A, black 10%)
De hover mengt 10% zwart bij in de oklab-kleurruimte, waardoor goudgeel goudgeel blijft en niet omslaat naar bruin. In code als color-mix; waar een vaste waarde nodig is (print, externe tools): #D89515.
Amber is gereserveerd voor de primaire actie (in winkelmand, account aanmaken, afrekenen) plus kleine signalen: de teller op de winkelmand en de sterren van beoordelingen. Maximaal één amber knop per schermgebied; al het andere blijft groen of neutraal.
Typografie
Eén familie doet alles: Lato, in precies drie gewichten. Black (900) is het gezicht van het merk — koppen, prijzen, knoppen en kickers. Bold (700) draagt namen en navigatie, Regular (400) de lopende tekst.
Aa
Lato Black · 900
Koppen, prijzen, knoppen, kickers, actieve labels.
Aa
Lato Bold · 700
Productnamen, navigatie, labels, specs-waarden.
Aa
Lato Regular · 400
Bodytekst, omschrijvingen, metatekst.
Kom langs in Leeuwarden
Display XL · 36–60px · 900 · tracking-tight · leading 1.02
alleen op fotografie/video-secties, dan in wit
Altijd 3% extra korting op je eigen tarieven
H1 hero · 30–34px · 900 · leading 1.1 · text-balance
Populaire producten
H2 sectiekop · 26–30px · 900 · tracking-tight · grey-700
Uit eigen voorraad
Kicker · 11–12px · 900 · uppercase · tracking 0.08em
green-600/700 op licht, green-200/300 op donker, grey-400 neutraal
Van hout en plaatmateriaal tot ruwbouw- en afbouwproducten — bij Miedema vind je het complete bouwassortiment op één plek.
Body · 14–15px · 400 · leading-relaxed · grey-500
€ 8,95 / plaat
Prijs · 17–18px · 900 · eenheid 12px · 400 · grey-400
Op de homepage-mockup zit een tijdelijke fontkiezer (Lato / Be Vietnam Pro / Inter) als ontwerptool; het merk gebruikt Lato. Cijfers in prijzen en tellers zijn altijd 900.
Componenten
De bouwstenen zoals ze op de homepage staan — live gerenderd met de merkkleuren. Vlakken krijgen randen in plaats van schaduwen; schaduw is gereserveerd voor zwevende lagen zoals dropdowns en drawers.
Knoppen
Primair (amber) · alleen de hoofdactie
Groen · secundaire acties, formulieren
Outline · rand wordt green-600 op hover
Nu geopend
Statuslabel met live-dot · rounded-btn, gelijk aan de knoppen (dot blijft rond)
Bekijk alles in Hout
Tekstlink · green-700 · pijl schuift op hover (gap 1.5 → 2.5)
Badges & chips
Op voorraad
ART. 10042
Voorraad- en artikelbadge op productfoto’s
10
10
Teller op de winkelmand (amber) en als chip (green-50)
Kortingscode · gestreepte rand, kopieerbaar
4,5 sterren
Geopend tot 17:00
Sterren in amber · status-dot in groen
Formulieren
Invoerveld · bg-grey-50, rand grey-100 → green-600 bij focus, dan witte achtergrond
Checkbox, switch en segmented control · actief altijd green-600
Slider-pager · actieve dot rekt uit tot pill in green-600
Vormentaal & beweging
De hoekradius is geen vrije keuze maar een set van vier benoemde tokens in het Tailwind-@theme. De standaardschaal (rounded-sm t/m rounded-4xl) staat uit via --radius-*: initial, dus een afwijkende radius bestaat niet. Twijfel je, dan is het antwoord rounded-btn.
4
Badges, mini-chips en knoppen ín een veld (zoekknop) ·
rounded-badge
10
Dé standaard: alle knoppen, invoervelden en icoontegels ·
rounded-btn
16
Kaarten: product-, categorie- en promopanelen ·
rounded-card
Alleen herobanners en grote beeldvlakken ·
rounded-banner
●
Alleen echte cirkels en toggles: dots, tellers, de switch — geen nieuwe pill-knoppen ·
rounded-full
Specimen: de linkerbovenhoek van elk blokje toont de echte tokenwaarde.
- Kleurovergangen 150–200 ms (amber-CTA’s exact 200 ms voor een zachte hover).
- Kaarten liften op hover (
-translate-y-1), foto’s zoomen naar 105% in 300 ms. - Koopknoppen drukken in bij klik (
active:scale-95); pijlen schuiven mee met hover. - Respecteer altijd
prefers-reduced-motion.
Productkaart
Witte kaart, rand grey-100 → green-500 op hover. De koopknop is altijd voluit: icoon én “In winkelmand” — nooit alleen een icoon.
Op voorraad
ART. 10042
Banner / promokaart
Gekleurd vlak wordt één tint donkerder op hover.
Van fundering tot afwerking Bouw slimmer. Koop alles in één keer. Eén levering, één factuur. Bekijk assortimentDonkere variant: grey-700 → grey-800, kicker in green-300. Lichte variant: grey-100 → grey-200 met amber CTA.
Iconografie & beeld
Iconen
Outline-stijl, inline SVG, stroke 1.75–2.5 met ronde uiteinden. Rustend grey-400/600, actief grey-900 of green-600/700. Nooit emoji als icoon, nooit gevulde iconen.
Partnerlogo’s
Echte logo’s als <img> (geen nagemaakte); in rust grijswaarden op 55% dekking, vol kleur op hover. Geen partnerbeeld? Dan een tekstlabel — geen neplogo.
Fotografie
Alleen echt beeld: de eigen fotoshoot (mensen, magazijn, terrein) en echte productfoto’s. Warm daglicht, werkvloer-perspectief, mensen in actie. Afgeronde hoeken (16–24 px); op grote beeldvlakken tekst in wit boven een donkere gradient van onderaf. Geen stockfoto’s, geen getekende scenes.
Tone of voice
Zo wel
- “Vandaag besteld, morgen geleverd.”
- “Eén pakbon, één levering, één factuur.”
- Concreet: voorraad, maten, Rd-waarden en prijzen benoemen.
- Je-vorm, korte zinnen, actieve werkwoorden.
Zo niet
- Superlatieven en marketingtaal (“dé ultieme oplossing”).
- Engelse termen waar een Nederlands woord bestaat.
- Vage beloftes zonder getal of feit erachter.
- Uitroeptekens en emoji.
Harde regels (anti-slop)
- Één accent doet het werk: groen domineert, amber alleen voor de primaire actie.
- Geen paars, neon of andere merkvreemde tinten — ook niet in gradients.
- Echt logo en echte foto’s; eerlijke tekst-placeholders boven nepbeeld.
- Witruimte is een ontwerpmiddel, geen gat dat gevuld moet worden.