# Design Book — Time 4 Gifts (time4gifts.nl)

*Opgesteld 2026-09-04 door MagicEverse op basis van de live site (WordPress + WooCommerce, thema "time4gifts" van Chef du Web). Briefing voor Claude Design en Claude Code: logo, kleuren, typografie, componenten, beeldtaal en tone of voice.*

Assets: `assets/` (logo-SVG, 13 favicons/touch-icons, hero- en categorie-illustraties, 73 foto's en packshots, iconen, fonts). Tokens: `design-tokens.json`. Screenshots: `_screenshots/`.

---

## 1. Wie is Time 4 Gifts

- **Specialist in gepersonaliseerde relatiegeschenken en kerstpakketten**, gevestigd in Oss/Uden/Schaijk (Noord-Brabant). Pay-off: **"surprising your relations"**.
- **Belofte:** "Laat je relaties door ons verrassen" — ze denken mee, vertalen wensen naar een geschenk dat "verrast, verbindt en bijblijft". Vier merkwaarden op de homepage: **verrassend · origineel · meedenkend · creatief**.
- **Model:** B2B-catalogus (2.000+ artikelen in 100 categorieën) zonder directe verkoop: klanten zetten producten op een **offertelijst** ("Aanvragen") of nemen contact op ("samen aan de slag"). Prijzen zijn "vanaf"-indicaties excl. btw of "Prijs op aanvraag".
- **Speerpunten:** kerstpakketten (samenstellen), 3D-relatiegeschenken (usb/powerbank in eigen vorm), drinkwaren, eco/duurzaam, beurzen & evenementen, onboarding, seizoenscampagnes (zomer, EK/WK, speciale dagen).
- **Doelgroep:** marketing- en HR-medewerkers van bedrijven; toon is persoonlijk en enthousiast, niet "groothandel".

## 2. Logo en beeldmerk

| Bestand | Gebruik |
|---|---|
| `assets/logo/logo.svg` | Primair logo: roze beeldmerk (gestileerde geschenk-/bloemvorm met lint, magenta #DA156A) links, rechts het woordmerk **TIME 4 GIFTS** in gespatieerde kapitalen (donker #252122) met daaronder de pay-off *surprising your relations* in roze. |
| `assets/favicon/favicon-*.png`, `apple-touch-icon-*.png` | Alleen het beeldmerk, in 13 formaten (16 t/m 180 px). |

Regels: logo altijd op wit of zeer licht; minimale hoogte in de header ± 60 px (desktop) en 40 px (mobiel). Beeldmerk mag los als icoon (favicon, social avatar). Geen andere kleurversie in gebruik dan roze + donkergrijs; een witte diapositief-versie bestaat niet op de site en zou voor een donkere footer toegevoegd moeten worden.

## 3. Kleuren

| Token | Hex | Rol |
|---|---|---|
| `primary` | **#FC73A7** | Het roze. Knoppen, topbalk, iconen, links in de footer, "onze missie"-kickers. |
| `primary-dark` | **#DA156A** | Magenta: hover op knoppen, beeldmerk, wishlist-/cart-badges, accenten. |
| `primary-soft` | #FDAAC9 | Lichtroze: decoratieve cirkels ("blobs") rond de hero, zachte vlakken. |
| `ink` | **#252122** | Bijna-zwart voor koppen en bodytekst. |
| `ink-2` | #333333 / #4F4F4F | Secundaire tekst en donkere knoppen (add-to-cart / wishlist in WooCommerce-vars). |
| `muted` | #999999 | Meta-tekst, placeholders. |
| `surface` | #F8F8F8 / #EAEAEA | Lichtgrijze kaarten en scheidingen. |
| `accent-yellow` | **#FEEF95** | Pastel-geel: categorietegel "Nieuwkomers", USP-bolletje "verrassend". |
| `accent-orange` | **#FDA87A** (donker #FC7830) | Pastel-oranje: categorietegel "3D relatiegeschenken", het grote "onze aanpak"-blok, USP "origineel". |
| `accent-mint` | **#8CF8BF** (donker #03BFAC) | Mintgroen: categorietegel "Tassen en Reizen", nieuwsbrief-blob, USP "meedenkend". |
| `accent-blue` | **#75D1FE** | Pastel-blauw: nieuwsbrief-blob, USP "creatief". |
| `white` | #FFFFFF | Basis; de site is overwegend wit met kleurvlakken. |

Verhouding: **wit + roze als merkkleur, vier pastels als speelse accenten** (elk gekoppeld aan één merkwaarde en één categorie). Pastels nooit als tekstkleur; altijd als vlak met donkere tekst erop. Roze is het enige "klikbare" signaal.

## 4. Typografie

| Rol | Font | Bron | Kenmerken |
|---|---|---|---|
| Alles (koppen, body, knoppen, nav) | **Manrope** | Google Fonts (400–800) | Geometrische, vriendelijke sans. Eén familie voor de hele site. |
| Koppen | Manrope 700 | | h1 ± 64 px / 1.1 (hero), h2 36 px / 1.25, h3 24 px. Zinskapitaal, geen uppercase. |
| Body | Manrope 500 | | 24 px op de homepage-intro, 18 px in lopende tekst, kleur #252122, regelafstand 1.5. |
| Kickers | Manrope 600, roze, klein | | "onze aanpak", "onze missie" boven de kop. |
| Knoppen | Manrope 700, 20 px, wit op roze | | Padding 15 × 50, radius 30 px (pill). |
| Woordmerk | gespatieerde geometrische kapitalen (in het SVG-logo, geen webfont) | | Niet nabouwen in tekst; altijd het SVG gebruiken. |
| Iconen | Font Awesome 5 (thema) + eigen SVG-iconen (`assets/icons/`: zoek, tas, facebook, instagram, linkedin) | | Lijn-iconen, 1,5 px, in ink of roze. |

Voor Claude Design: Manrope staat op Google Fonts, direct te gebruiken. Groot en luchtig zetten; de site werkt met veel witruimte en grote fontmaten.

## 5. Layout en componenten

**Grid en ritme**
- Container ± 1180 px, secties met 80–120 px verticale ruimte, veel wit.
- **Organische vormen** zijn het handschrift: de hero-foto zit in een grote ronde "blob" (cirkelvormige maskering), met lichtroze cirkels als confetti eromheen; nieuwsbrief-blok met mint- en blauwe cirkels in de hoeken; de "onze aanpak"-sectie is een vol oranje vlak.
- Ritme homepage: roze topbalk → witte header → hero (tekst links, blob-foto rechts) → 4 categorietegels in pastel (verspringend, 2 hoog/2 laag) → intro-tekst + 4 USP-bolletjes → oranje CTA-blok → missie (tekst links) → productslider "Enkele van onze favorieten" → nieuwsbrief → footer.

**Header**
- **Topbalk** roze (#FC73A7) met campagnelinks in wit: Nieuwe collectie 2026 · Kerstpakketten 2026 · Zomer · Onboarding · Speciale dagen · Beurzen & Evenementen. Op mobiel horizontaal scrollbaar met pijl.
- Witte header: logo links, nav in het midden (Wat we doen · Onze catalogus · Wie we zijn · Contact), rechts zoek-, hart- (verlanglijst, YITH) en tas-icoon (offertelijst) met roze tellerbadges.
- **Mega-menu** onder "Onze catalogus": zes categoriekaarten met illustratie + korte omschrijving en "bekijk alle categorieën >".
- Mobiel: hamburger links, logo gecentreerd, drie iconen rechts.

**Hero**
- h1 groot (2 regels), subregel in 24 px, **roze pill-knop** "samen aan de slag" + tekstlink "of neem zelf een kijkje". Foto rechts in cirkel-masker met roze bolletjes.

**Knoppen**
- Primair: roze pill (#FC73A7 → hover #DA156A), wit, 20 px bold. Op oranje vlak: witte pill met donkere tekst.
- Secundair: tekstlink in bold zonder onderstreping, of donkere knop (#333) voor "Toevoegen" (WooCommerce).
- Radius: **30 px pill** voor knoppen en zoekveld, 50 % voor iconen en bolletjes, 10–16 px voor kaarten.

**Categorietegels**
- Pastel-vlak met packshot-collage (flessen, speelgoed, tassen, verpakkingen) er "los" op, label eronder in bold. Vier tegels, verspringende hoogte.

**USP-rij**
- Vier kleine gekleurde cirkels (geel, oranje, mint, blauw) + één woord: verrassend / origineel / meedenkend / creatief.

**Productkaart**
- Wit, packshot vrijstaand (`-removebg-preview`), hartje linksboven, titel bold, "vanaf € x,xx excl. BTW" of "Prijs op aanvraag", geen add-to-cart maar **"Aanvragen"** (offertelijst). Slider met roze pijltjes.

**Nieuwsbrief**
- Lichtgrijs blok met mint- en blauwe cirkels, pill-invoerveld + roze knop "schrijf je in!".

**Footer**
- Wit, vier kolommen (Ons bedrijf · Specials · Contact · Socials met roze ronde social-iconen), copyright-regel, "Made by Chef du Web".

## 6. Beeldtaal

- **Twee registers:** (1) warme, echte foto's van het team met klanten aan tafel (kleurwaaiers, mokken, monsters) in ronde maskers; (2) **vrijstaande packshots** en **collages op pastel-vlak** voor categorieën en producten.
- Kleurtemperatuur licht en vrolijk, veel daglicht; producten met logo-voorbeeld.
- Foto's zijn groot geüpload (10 MB, zie tech-analyse) maar worden verkleind geserveerd.
- Illustratie-stijl: geen lijn-illustraties, wel "scatter"-collages (herhaald product op gekleurde achtergrond).
- Formaten: hero-cirkel ≈ 1:1, categorietegels ≈ 3:4, productkaarten 1:1, blog 3:2.

## 7. Tone of voice

- **Je/jij**, warm en enthousiast, in de wij-vorm: "We denken graag mee", "Laat ons het werk doen, terwijl u de complimenten ontvangt" (mengt soms je/u — in de mock consequent **je** aanhouden, u alleen in offerte/voorwaarden).
- Kickers in kleine letters ("onze aanpak", "onze missie"); CTA's als uitnodiging zonder uitroepteken behalve de nieuwsbrief ("schrijf je in!").
- Woorden: verrassen, verbinden, bijblijven, meedenken, gepersonaliseerd, duurzaam, origineel.
- Productteksten: kort, feitelijk, met "Bedruk met jouw logo. Vraag een offerte aan!" als vaste afsluiter.

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

**Do**
- Wit met roze als enige merkkleur, pastels als speelse vlakken; ronde vormen (blobs, pills, cirkels) overal.
- Manrope groot en luchtig; één font.
- Offerte-flow centraal: offertelijst-icoon met teller, "Aanvragen" op elke kaart, "samen aan de slag" als hoofd-CTA.
- Echte teamfoto's + vrijstaande packshots naast elkaar.

**Don't**
- Geen harde hoeken, geen donkere secties, geen uppercase-koppen.
- Geen tweede accentkleur als "klikbaar" naast roze.
- Geen webshop-prijsdruk (geen kortingsstickers, geen "in winkelwagen"); het is een offerte-catalogus.
- Roze tekst op pastel (contrast) vermijden.