# Design Book — Promocorp

Bron: live scrape van zes websites op **3 september 2026**. Alle waarden zijn *gemeten* (computed styles in de browser, CSS, kleuren uit de SVG/PNG-logo's), niet geraden. Assets staan per merk in `corp/`, `buttonboss/`, `peppermint/`, `careconcepts/`, `clipfactory/` en `markclip/`, elk met `logo/`, `favicon/`, `images/` (en `social/` waar aanwezig).

Zie ook `TECH-ANALYSE.md` (platform, leeftijd, hosting, snelheid) en `design-tokens.json` (machineleesbaar).

---

## 0. De groep

**Promocorp BV** (Enschede, 120+ medewerkers) is sinds januari 2024 de nieuwe naam van de Buttonboss Group: de moedermaatschappij van vier productiebedrijven in promotionele artikelen, elk met een eigen specialisme. Easy Orange is per 1 oktober 2022 overgenomen en opgegaan in de groep. LoGolf is in april 2026 verkocht en hoort er niet meer bij.

| Merk | Domein | Specialisme | Submerken |
|---|---|---|---|
| Promocorp | promocorp.com | holding | — |
| Buttonboss | buttonboss.com | buttons, caps, borduurwerk, buttonmachines | **Kingcap** (caps), Promocap |
| The Peppermint Company | peppermint.nl | pepermunt, snoep, snacks, chocolade | **King** |
| Care Concepts | careconcepts.nl | verzorgingsproducten, private-label water | — |
| Clipfactory | clipfactory.com | bedrukte paperclips | **Markclip®** (eigen shop markclip.com), **Promoclip®** |
| Easy Orange | easyorange.nl → promocorp.com | overgenomen 2022, geen eigen site meer | — |

**Positionering:** fabrikant/groothandel B2B — de klant is de promotieartikelen-dealer, niet de eindgebruiker. Toon: zakelijk, product-first, weinig verhaal. De holdingsite zegt alleen: "Promocorp is de moedermaatschappij van de onderstaande 4 bedrijven, elk gespecialiseerd in hun eigen promotionele producten."

**Belangrijkste observatie:** in tegenstelling tot Blijk Groep heeft Promocorp wél een gedeeld systeem. Buttonboss, Peppermint, Care Concepts en Clipfactory draaien op één platform met één layout, één typografie-basis (Roboto) en één set componenten; alleen logo, hoofdkleur en knopfont verschillen. Het Promocorp-logo zelf is opgebouwd uit de vier merkkleuren (zwart, blauw, lichtblauw, groen). Markclip.com staat er als losse WooCommerce-shop met een eigen donker thema naast.

---

## 1. Promocorp — holding

**Platform:** Joomla 5 (Cassiopeia)

### Typografie
| Rol | Font | Waarde |
|---|---|---|
| Alles | **Roboto** (self-hosted, Thin t/m Black) | body 16px / 24px, 400 |
| Iconen | Font Awesome 5 | |

Geen koppen op de pagina (geen H1).

### Kleuren
| Token | Hex | Gebruik |
|---|---|---|
| `ink` | `#22262a` | tekst |
| `logo-black` | `#101010` | logo |
| `logo-blue` | `#004090` ≈ `#00539f` | logo (Clipfactory-blauw) |
| `logo-lightblue` | `#90c0e0` ≈ `#97caeb` | logo (Peppermint-lichtblauw) |
| `logo-green` | `#90c010` ≈ `#93d500` | logo (platform-groen) |
| `surface` | `#f0f0f0` | grijs vlak |
| `base` | `#ffffff` | achtergrond |
| *(template)* | `#912b3b` `#30638d` `#a51f18` `#448344` | Cassiopeia-kleuren in CSS, nauwelijks zichtbaar |

### Assets
`corp/logo/promocorp-logo-480.png` (480×135, meerkleurig), Joomla-favicons, en de vier merklogo's zoals de holding ze toont: `corp/images/buttonboss.png`, `peppermint.png`, `careconcepts.png`, `clipfactory.png`.

---

## 2. Het gedeelde platform (Buttonboss · Peppermint · Care Concepts · Clipfactory)

**Platform:** maatwerk Symfony (Webpack Encore), Shock Media Hengelo, beelden op AWS S3 via CloudImage. Zie `TECH-ANALYSE.md`.

### Gedeelde typografie
| Rol | Font | Waarde |
|---|---|---|
| Body / nav | **Roboto** | 15px / 24px, 400 — kleur `#a2a9ad` |
| Paragraaf | systeem sans-serif | 15px / 24px, 400 — kleur `#434648` |
| Knoppen | per merk (zie onder) | 15px / 15px, uppercase |
| Merkfonts beschikbaar | **Myriad Pro** (regular, condensed, semi-condensed, semi-extended) en **Avenir** (LT 85 Heavy, LT 95 Black, Next Bold, Next Demi) via Adobe Fonts | commercieel |

> Geen H1 op de homepages. De standaard tekstkleur `#a2a9ad` op wit haalt ~2,6:1 — ver onder WCAG AA. In elke nieuwe mock: tekst op minimaal `#434648`.

### Gedeelde componenten en kleuren
| Token | Hex | Gebruik |
|---|---|---|
| `chat-green` | `#24b600` | zwevende chat-/WhatsApp-knop (alle vier) |
| `accent-green` | `#93d500` | CSS-accent, ook in Promocorp-logo |
| `accent-orange` | `#f58220` / `#f15633` | CSS-accent (sale/CTA) |
| `link-blue` | `#054b96` | links |
| `text` | `#434648` | paragrafen |
| `text-light` | `#a2a9ad` | body/nav (te licht) |
| `surface` | `#f1f1f1` | grijze vlakken |
| `border` | `#cccccc` / `#e6e6e6` | randen |

### Per merk: hoofdkleur, logo, knopfont

#### Buttonboss (+ Kingcap)
| Token | Hex | Gebruik |
|---|---|---|
| `primary` | `#001531` | navy — header/footer, grootste vlak |
| `logo-navy` | `#141c31` | logo-wordmark |
| `accent` | `#c61c2c` | rood — logo-accent en CTA-vlakken |
| `secondary` | `#97caeb` | lichtblauw |
| `muted` | `#99a1ad` | tekst op navy |

Knopfont **Roboto Condensed** 400. Logo `buttonboss/logo/logo-buttonboss.svg` (180×41). Beeld: seizoens-categoriefoto's (caps, beanies, buttons, buttonmachine — "herfst"-set).

#### The Peppermint Company (+ King)
| Token | Hex | Gebruik |
|---|---|---|
| `primary` | `#00205c` | donkerblauw — 66 % van de homepage |
| `secondary` | `#97caeb` | lichtblauw — logo-accent |
| `accent` | `#f15f22` | oranje |
| `muted` | `#99a6be` | tekst op blauw |

Knopfont **Avenir LT 85 Heavy**. Logo `peppermint/logo/logo-peppermint.svg` (`#00205c` + `#97caeb`). Beeld: vier categoriefoto's per week vernieuwd (`…-wk36.jpg`). Het merk King heeft geen eigen visuele identiteit op de site.

#### Care Concepts
| Token | Hex | Gebruik |
|---|---|---|
| `primary` | `#1e0d3d` | donkerpaars — header/footer |
| `secondary` | `#633188` | paars — grote vlakken, logo |
| `accent` | `#f15633` | rood-oranje |
| `muted` | `#a59eb1` | tekst op paars |

Knopfont **Myriad Pro** 600. Logo `careconcepts/logo/logo-careconcepts.svg`. Beeld: lifestyle (`cc-lifestyle-new.jpg`), water (`cc-water2.jpg`), categoriebanners 2026 (baby, tubes).

#### Clipfactory (+ Promoclip)
| Token | Hex | Gebruik |
|---|---|---|
| `primary` | `#231f20` | zwart — header/footer, logo |
| `secondary` | `#00539f` | blauw — grote vlakken, logo |
| `accent` | `#e1251b` | rood — logo-accent |
| `muted` | `#918f90` | tekst op zwart |

Knopfont **Avenir Next Bold**. Logo `clipfactory/logo/logo-clipfactory.svg`. Beeld: productcategorieën (axionclip, wingclips, promoclip, desktins).

---

## 3. Markclip (losse webshop)

**Platform:** WordPress 7.0.4 + WooCommerce 10.9.1, child-theme "theme-2026" op Twenty Twenty-One, Bootstrap 5. Zie `TECH-ANALYSE.md`.

### Typografie
| Rol | Font | Waarde |
|---|---|---|
| Body / nav | **Lato** | 16px / 24px, 400 |
| H1 | Lato | 32px / 40px, **800**, wit |
| H2 | Lato | 20px / 28px, 800, wit |
| H3 | Lato | 16px / 24px, 800, wit |
| Paragraaf | systeem sans-serif | 15px / 24px |

### Kleuren
| Token | Hex | Gebruik |
|---|---|---|
| `base-dark` | `#191919` | donkere achtergrond (dominant) |
| `primary` | `#1032cf` | blauw — CTA-vlakken |
| `ink-dark` | `#141414` / `#000000` | tweede donkere laag |
| `text-on-dark` | `#ffffff` / `#b3b3b3` | tekst |
| *(Bootstrap)* | `#0d6efd` `#dc3545` `#198754` `#ffc107` | framework-defaults in CSS |

### Assets
`markclip/logo/logo-black.svg` + `logo-white.svg`, webp-favicons, kerstbanner (`social/`), productcategorie-beelden (axionclip, deltaclip, docubinder, foldbackclip, packaging, promoclip, wingclip).

---

## 4. Samenvatting voor Claude Design

### Fonts
```
Promocorp        Roboto (alles)
Platform (4×)    tekst: Roboto 15px  |  knop: per merk — Roboto Condensed / Avenir 85 Heavy / Myriad Pro / Avenir Next Bold
Markclip         Lato 400 / 800
```
Vrije vervangers: Myriad Pro → **Source Sans 3** (zelfde ontwerper-lijn) · Avenir → **Nunito Sans** / Mulish · Roboto en Lato zijn gratis (Google Fonts).

### Primaire kleur per merk
```
Promocorp        meerkleurig logo: #101010 · #00539f · #97caeb · #93d500   op #ffffff
Buttonboss       #001531 navy      + #c61c2c rood
Peppermint       #00205c blauw     + #97caeb lichtblauw   (+ #f15f22 oranje)
Care Concepts    #1e0d3d paars     + #633188 paars        (+ #f15633 oranje)
Clipfactory      #231f20 zwart     + #00539f blauw        (+ #e1251b rood)
Markclip         #191919 zwart     + #1032cf blauw
Gedeeld          #24b600 chat-groen · #93d500 accent-groen
```

### Beeldstijl
- **Platformsites:** productfotografie per categorie op donker merkvlak; seizoenssets (herfst, wk36); geen mensen, geen verhaal. Grote vlakken in de merkkleur dragen de pagina.
- **Care Concepts** is de uitzondering: lifestyle-fotografie en water-beelden naast product.
- **Markclip:** donker thema, productfoto's op wit uitgesneden, blauwe CTA-blokken.
- **Promocorp:** alleen logo's — geen beeld.

### Wat je moet weten voordat je ontwerpt
1. **Er ís een systeem** — één platform, vier kleuren. Een redesign kan groepsbreed en per merk alleen tokens wisselen. Dat is het model om te behouden.
2. **De hoofdkleuren zijn allemaal donker** (navy, blauw, paars, zwart). Het onderscheid tussen de merken zit in de tint, niet in de helderheid. Wil je ze naast elkaar herkenbaar houden, geef dan elk merk zijn secundaire kleur een grotere rol (lichtblauw, paars, blauw, rood).
3. **Contrast en structuur zijn nu zwak:** lichtgrijze bodytekst, geen H1's. Dat repareren is gratis winst.
4. **De submerken (Kingcap, King, Promoclip) bestaan alleen als naam.** Als ze visueel moeten bestaan, moet dat ontworpen worden — er is niets om van uit te gaan.
5. **Markclip past nergens bij.** Donker WooCommerce-thema met eigen blauw. Kiezen: in het platform trekken of bewust anders laten.