# Design Book — JDL Sourcing (jdlsourcing.com/nl)

*Opgesteld 2026-09-04 door MagicEverse op basis van de live site (WordPress + Elementor Pro op Elementor Cloud, drie talen NL/EN/FR). Briefing voor Claude Design en Claude Code: logo, kleuren, typografie, componenten, beeldtaal en tone of voice.*

Assets: `assets/` (logo-SVG, favicons, intro-video, klantlogo's, teamfoto's, projectfoto's, iconen, Manrope-fontbestanden). Tokens: `design-tokens.json`. Screenshots: `_screenshots/`.

---

## 1. Wie is JDL Sourcing

- **Product-sourcing en maatwerkproductie** van merchandise, premiums, giveaways, POSM, kleding en verpakkingen, met "10+ jaar ervaring en lokale aanwezigheid in Azië & Europa". JDLsourcing B.V., Joop Geesinkweg 201, Amsterdam; oprichter Joep de Laat; team met projectmanager (Jing Long Weng) en sales/accountmanager (Jelle Khanna).
- **Belofte:** "Custom made merch, premiums, packaging & more!" — "Eindeloze mogelijkheden. U vraagt het, wij produceren het!" Vier USP's: 10+ jaar ervaring en lokale aanwezigheid, opslag- en wereldwijde verzendoplossingen, lokale kwaliteitscontroles, eindeloze mogelijkheden.
- **Bewijs:** klantlogo's Heineken, Spa, Wakuli, TUI, Flâneur, Haribo, L'Oréal; EcoVadis Silver (top 15 %, juli 2024); MVO-badge; "4.9+ Google reviews"; drie reviews van inkopers.
- **Model:** geen webshop maar een **inspiratiecatalogus** (41 producten in Merchandise, Verpakkingen, Premiums, Kleding) met op elke pagina "Offerte aanvragen". Het echte proces is een **4-stappen sourcing-proces**: briefing & sourcing → offerte → sample & productie → kwaliteitsinspectie & levering. Klanten volgen orders in een apart portaal (jdlorders.softr.app).
- **Doelgroep:** marketeers en inkopers van merken en agencies die iets écht op maat willen (mascottekostuum, retro voetbalshirt, takeaway-verpakking, displays), Europa-breed (NL/EN/FR).

## 2. Logo en beeldmerk

| Bestand | Gebruik |
|---|---|
| `assets/logo/Vector.svg` | Primair logo: wit/navy beeldmerk (silhouet van een **olifant met wereldkaart-motief** in een cirkel — verwijst naar Azië/sourcing) + woordmerk **JDLSOURCING** in strakke bold kapitalen, Manrope-achtig. Navy op wit in de header, wit op navy in de footer. |
| `assets/favicon/cropped-LOGO-3-*.png` | Beeldmerk (olifant in cirkel) als favicon/touch-icon 32/180/192 px. |
| `assets/hero/og-cropped-LOGO-3.png` | Social-share-afbeelding (og:image), alleen het beeldmerk. |

Regels: beeldmerk altijd in een cirkel; navy (#02075D) op wit of wit op navy; niet in andere kleuren. Woordmerk zonder spatie ("JDLSOURCING"), kapitalen, geen pay-off.

## 3. Kleuren

| Token | Hex | Rol |
|---|---|---|
| `primary` | **#02075D** | Diep navy. Koppen, knoppen, topbalk, footer, contact-sectie, USP-vinkjes, iconen. Verreweg de dominante kleur (150+ keer in de CSS). |
| `primary-2` | #323D83 / #4C508C | Lichter navy voor hover en secundaire vlakken. |
| `surface` | **#F9F9F9** | Lichtgrijze paginabasis en kaarten (100+ keer). |
| `line` | #E5E6ED / #E0E1E9 | Randen, scheidingen. |
| `muted` | #AFB0CA / #9698BB / #BEBFD4 | Blauwgrijze meta-tekst op navy en placeholders. |
| `ink` | #02075D (koppen) / #1F2124 (body) | Tekst — de body is bijna zwart, koppen navy. |
| `star` | **#FFC107** | Geel voor review-sterren, het enige warme accent. |
| `white` | #FFFFFF | Header, kaarten, tekst op navy. |
| Elementor-kit (niet gebruikt) | #6EC1E4 / #61CE70 / #54595F / #7A7A7A | Standaardkleuren van Elementor die nog in de kit staan maar in het design niet voorkomen — negeren. |

Verhouding: **navy + wit + lichtgrijs, één accent (geel) voor sterren.** Kleur komt uit de productfoto's en klantlogo's, niet uit het palet. Geen gradients, geen pastel, geen tweede merkkleur.

## 4. Typografie

| Rol | Font | Bron | Kenmerken |
|---|---|---|---|
| Alles (koppen, body, nav, knoppen) | **Manrope** | Zelf gehost (Elementor Google-Fonts-cache, `assets/font/manrope-*.woff2`) | Geometrische sans, 400–800. |
| h1 | Manrope 700–800, navy | | ± 48 px desktop / 34 px mobiel, 1.15, zinskapitaal met uitroepteken. |
| h2 | Manrope 700, navy, **half licht / half bold** | | Herkenbaar stijlmiddel: "**Experts** in productie op maat", "**Onze** custom-made producten", "Ons bewezen **sourcing process**" — één woordgroep bold, de rest 500. |
| Kicker | kleine navy pill met witte tekst (b.v. "JDLSOURCING", "Sourcing Experts", "Reviews") boven de h2 | | radius 100 px, 12 px uppercase-achtig. |
| Body | Manrope 400, #1F2124, 16 px / 1.6 | | Korte alinea's, vaak rechts van de kop in twee kolommen. |
| Knoppen | Manrope 600, 16 px | | Gevuld navy of navy outline, radius 100 px (pill). |
| Elementor-kit | Roboto / Roboto Slab | | Staan in de globale typografie-instellingen maar worden overschreven; niet gebruiken. |

Voor Claude Design: Manrope via Google Fonts. Koppen navy, de "licht + bold"-splitsing in h2's overnemen.

## 5. Layout en componenten

**Grid en ritme**
- Container ± 1200 px; secties 80–100 px; **afwisseling wit / #F9F9F9 / navy**. Navy wordt ingezet voor de topbalk, de contactsectie ("Daag ons uit met uw aanvraag!") en de footer.
- Ritme homepage: navy social-topbalk → witte sticky header → hero (tekst links, **masonry-collage van productfoto's** rechts met EcoVadis-badge) → klantlogo-rij → "Experts in productie op maat" (3 foto's/video) → producten (3 categoriekaarten + slider) → sourcing-proces (foto links, 4 stappen rechts) → team (3 kaarten) → "Producten die opvallen" (fotostrook) → reviews (3 kaarten, gele sterren) → navy contactblok met formulier → footer.

**Header**
- **Topbalk navy** (48 px): ronde social-iconen (LinkedIn, Facebook, Instagram) links in lichter navy, rechts "4.9+ Google reviews" met G-logo.
- Witte header (100 px): logo links, nav (Home · Over ons · Producten ▾ · CSR · Blog · Contact) in navy, actieve link bold; rechts taalwissel met vlag (NL/EN/FR, TranslatePress), account-icoon in cirkel, navy pill-knop **Contact**.
- Mobiel: logo links, vlag + account + hamburger rechts.

**Hero**
- h1 groot in navy, twee pill-knoppen (gevuld "Over ons", outline "Contact"), vier USP's met navy vink-cirkels. Rechts een 2-koloms **foto-masonry** op #F9F9F9-kaarten (thermosbeker, Uber Eats-tas, verpakking, display) met een ronde EcoVadis-badge er overheen.

**Knoppen**
- Primair: navy #02075D, wit, **radius 100 px**, padding 14 × 28. Hover: lichter navy.
- Secundair: outline navy 1,5 px, navy tekst.
- Op navy vlak: wit gevuld met navy tekst, of witte outline.
- Slider-pijlen: ronde navy knoppen 40 px.

**Kaarten**
- Categoriekaart: foto boven, navy voet met titel + "Voorbeeld"-link; radius 8–12 px.
- Proces-stap: witte kaart met navy icoon-cirkel links, titel bold, één regel uitleg.
- Teamkaart: witte kaart met portret, naam bold, functie in muted.
- Review-kaart: witte kaart, 5 gele sterren, quote, naam bold, functie.
- Klantlogo-rij: grijze logo's in één lijn (marquee-plugin).

**Formulier**
- In navy sectie: witte velden met radius 8 px (Naam, E-mail, Telefoon, Deadline, Budget, Bedrijf, Bericht), reCAPTCHA, witte knop "Versturen"; belofte "Ons team antwoordt binnen 24 uur".

**Footer**
- Navy, wit logo, social-cirkels, kolommen Links / Algemeen / JDLsourcing B.V. (adres, KvK, BTW) / Contact; MVO- en EcoVadis-badges; copyright-regel.

## 6. Beeldtaal

- **Drie registers:** (1) **packshots van eigen projecten** op lichtgrijze achtergrond (KTM-thermosbeker, Saucy Bird-box, Uber Eats-tas, Gratis-display) — echte klantcases, geen stock; (2) **reportagefoto's uit fabrieken en magazijnen in Azië** (inspectie, verpakken, stellingen) en het team op locatie; (3) **eventfoto's** (festival, sport, beurs) in de strook "Producten die opvallen".
- Intro-video van de oprichter (`assets/video/JDLsourcing-intro-Joep-De-Laat-720p-h264-1.mp4`, 2,4 MB) in de "Experts"-sectie.
- Kleurtemperatuur neutraal/koel, veel wit en lichtgrijs rondom de foto's; kaarten met kleine radius, geen maskers of blobs.
- Iconen: eigen SVG-lijniconen in navy cirkels (briefing, offerte, sample, inspectie; `assets/icons/`).
- Formaten: masonry-kaarten 1:1 en 3:4, categoriekaart 4:3, teamportret 3:4, eventstrook 1:1.

## 7. Tone of voice

- **Zakelijk-enthousiast, "je"-vorm met af en toe "u"** ("U vraagt het, wij produceren het!", "Daag ons uit met uw aanvraag!"); in de mock consequent **je** houden, u alleen in de offerte.
- Kernwoorden: custom-made, op maat, sourcing, premiums, POSM, kwaliteitsinspectie, lokale aanwezigheid, Azië & Europa, binnen 24 uur.
- Engels-Nederlands gemengd ("merch", "premiums", "packaging", "sourcing process") — dat is bewust en past bij de internationale (NL/EN/FR) uitstraling.
- Bewijs vóór belofte: jaren ervaring, logo's, EcoVadis, reviews, proces in vier stappen.

## 8. Do's & don'ts voor de mock

**Do**
- Navy + wit + #F9F9F9; pill-knoppen; kaarten met 8–12 px radius; h2's met licht/bold-splitsing en navy kicker-pill.
- Eigen projectfoto's als held; klantlogo-rij en EcoVadis-badge als vertrouwen.
- Sourcing-proces in vier stappen en "Offerte aanvragen" als enige CTA; orderportaal-link voor bestaande klanten.
- Drietalig denken (NL/EN/FR-wissel in de header).

**Don't**
- Geen webshop-elementen (prijzen, winkelwagen, checkout) — de WooCommerce-restanten "Winkel", "Afrekenen", "Mijn account" zijn ongewenst.
- Geen tweede kleur naast navy (het geel blijft bij sterren), geen gradients, geen stock-"handshake"-beelden.
- Geen Roboto/Roboto Slab uit de Elementor-kit.