# Design Book — Blijk Groep

Bron: live scrape van de zes websites op **2 september 2026**. Alle waarden hieronder zijn *gemeten* (computed styles in de browser + CSS-variabelen + kleuren uit de SVG-logo's), niet geraden. Assets staan per merk in `corp/` (Blijk Groep), `promonl/`, `stegman/`, `acte/`, `brandwijk/` en `deblijkbon/`, elk met `logo/`, `favicon/`, `images/` en `social/`.

Gebruik dit bestand als bron van waarheid voor Claude Design / Claude Code: fonts, kleuren, typografieschaal en beeldstijl per merk.

---

## 0. De groep

**Blijk Groep** is de holding (~70 medewerkers) achter vijf merken in werknemerswaardering, duurzame geschenken en keuzeconcepten. Centraal: strategie, kennis en IT. Elk merk houdt een eigen identiteit en eigen markt.

- **Visie:** "Boeien en verbinden van mensen"
- **Payoff:** "Vertrouwen, aandacht en waardering staan bovenaan"
- **Kernwaarden:** De mens voorop · Creatief · Duurzaam
- **Tone of voice:** professioneel maar warm; strategische businesstaal gecombineerd met menselijke waarden; eerlijk en open.

| Merk | Domein | Positionering |
|---|---|---|
| Blijk Groep | blijkgroep.nl | Holding / corporate |
| Promo.nl | promo.nl | Promotieartikelen & relatiegeschenken (volume, webshop) |
| Stegman | stegman.nl | Kerstpakketten & keuzeconcepten, 25+ jaar specialist |
| By Acte | byacte.nl | Persoonlijke geschenkconcepten, premium/creatief |
| Brandwijk | brandwijkthemapakketten.nl | Duurzame kerst- en themapakketten |
| De blijkbon | blijkbon.nl | Digitale keuzebon / cadeaukaart |

**Belangrijkste observatie:** er is *geen* gedeeld designsysteem. Zes sites, vijf verschillende typografiesystemen, zes losse paletten en vier verschillende platforms (WordPress, Wix, FTLShop-SaaS, Laravel). Als je iets nieuws bouwt voor de groep is dat een kans, geen beperking.

---

## 1. Blijk Groep — corporate

**Platform:** WordPress + YOOtheme Pro

### Typografie

| Rol | Font | Waarde |
|---|---|---|
| Body / UI | **Questrial**, sans-serif | 14px / 21px, 400 |
| Lopende tekst | Questrial | 21px / 31.5px, 400 |
| H1 | Questrial | 28px / 33.6px, 600 |
| H2 | Questrial | 23.8px / 30.9px, 600 |
| Display | **Gilroy** — Light, Bold, ExtraBold, Black | self-hosted webfont |

> Questrial is gratis via Google Fonts. Gilroy is commercieel (Radomir Tinkov); vrije alternatieven met dezelfde geometrische toon: Poppins, Jost, Inter Tight.

### Kleuren

| Token | Hex | Gebruik |
|---|---|---|
| `ink` | `#222221` | logo, koptekst |
| `accent` | `#ff5f21` | primaire accentkleur (oranje), favicon |
| `link` | `#427df6` | H1 / links blauw |
| `deep` | `#121961` | diepblauw, secundair |
| `surface` | `#edf6f8` | lichtblauwe sectie-achtergrond |
| `surface-alt` | `#f0f0f0` | grijze blokken |
| `base` | `#ffffff` | hoofd-achtergrond |
| `muted` | `#939393` | secundaire tekst |

### Assets

`corp/logo/logo-blijk-groep.svg` (donker), `logo-blijk-groep-pay-off-white.svg` (wit met payoff), favicon (oranje). Plus zeven waardebeelden (Persoonlijk / Onverwacht / Oprecht / Verrassen / Vanuit je hart / Raken / Onvergetelijk): uitgeknipte portretfotografie op wit, met een warme oranje-gele randlichtgloed en daaroverheen de formule *“Waarderen is …”* — het laatste woord in oranje. Dat is de complete visuele taal van de groep.

---

## 2. Promo.nl

**Platform:** WordPress + Astra + Elementor + WooCommerce

### Typografie

| Rol | Font | Waarde |
|---|---|---|
| Alles | **Montserrat**, sans-serif | Google Fonts (400, 700) |
| Body | Montserrat | 13.68px / 25.4px, 400 |
| H1 | Montserrat | 31px / 43.4px, **700** |
| H2 | Montserrat | 26px / 33.8px, 700 |
| H3 | Montserrat | 20px / 26px, 700 |

Roboto en Roboto Slab worden ook geladen (Astra-default) maar zijn in de praktijk niet zichtbaar — dead weight.

### Kleuren

| Token | Hex | Gebruik |
|---|---|---|
| `primary` | `#f70000` | knalrood: CTA's, links, accentbalken |
| `dark` | `#011627` | bijna-zwart marineblauw (footer, donkere secties) |
| `dark-alt` | `#292929` | tweede donkere vlak |
| `text` | `#545454` | lopende tekst |
| `heading` | `#3a3a3a` | koppen |
| `surface` | `#f9f9f9` | lichte sectie-achtergrond |
| `base` | `#ffffff` | achtergrond |

### Opmerkingen voor een redesign

- De bodytekst is **13.68px** — onder elke leesbaarheidsnorm. Zet dit op 16–17px.
- `#f70000` op wit haalt ~4.0:1 contrast: net onvoldoende voor WCAG AA op tekstformaat. Gebruik voor tekst en links een donkerder rood (`#d10000` ≈ 5.3:1) en het felle rood alleen als vlak.
- Beeldmateriaal van promo.nl is **bewust niet gedownload** (jouw instructie). In `promonl/` staat wat je zelf al had (logo, og-beeld, site-screenshot); daarnaast staat het merklogo van de groepssite in `corp/logo/Logo_promo-be8e556b.jpeg`.

---

## 3. Stegman

**Platform:** WordPress, eigen theme (`themes/stegman`)

### Typografie

| Rol | Font | Waarde |
|---|---|---|
| Alles | **geen webfont** — `HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif` | |
| Body | systemstack | 16px / 25.6px, 400 |
| H1 | systemstack | 28.8px / 34.6px, 700 |
| H2 | systemstack | 25.6px / 30.8px, 700 |
| H3 | systemstack | 22.8px / 27.3px, 700 |

Stegman is de enige site zonder webfont. Snel, maar het merk heeft daardoor geen eigen typografische stem. Bij een redesign is dit de laagst hangende winst.

### Kleuren — een echt tokensysteem

Stegman gebruikt als enige merk een gestructureerde schaal via CSS-variabelen:

| Token | Hex | Gebruik |
|---|---|---|
| `--clr-bg-25` | `#fefaf1` | lichtste crème |
| `--clr-bg-50` | `#e8e6d9` | zand |
| `--clr-bg-75` | `#a9998e` | taupe |
| `--clr-bg-100` | `#555149` | donker warm bruingrijs — hoofdkleur, grote vlakken |
| `--clr-text` / `--clr-heading` | `#555149` | tekst |
| `--clr-accent` | `#ea3441` | rood accent |

**Seizoens- en themapaletten** (per contentblok overschreven, zelfde tokenstructuur):

| Thema | text / heading | accent | bg-25 → bg-100 |
|---|---|---|---|
| Navy | `#162d57` | — | — |
| Groen | `#1e3523` / `#163d0f` | `#d94426` | `#dbf5d6` `#a4e699` `#6ed65c` `#163d0f` |
| Goud | `#d3b76d` | `#fea858` | — |
| Olijf | `#624a00` | — | — |
| Bordeaux | `#490514` | — | — |

Kleurstalen op de homepage: `#fee451` geel · `#e4ddef` lila · `#f0a055` oranje · `#cbd889` groen · `#a9998b` taupe · `#ea3441` rood.

### Assets

`stegman/logo/logo.svg` (`#565049`) — het beeldmerk is een **boog**, ook gebruikt als favicon. Beeldstijl: warme productfotografie, kerst- en seizoensbrochures, showroom.

---

## 4. By Acte

**Platform:** Wix

### Typografie — het rijkste systeem van de groep

| Rol | Font | Waarde |
|---|---|---|
| H1 / H2 | **Silence Rocken** (display, Wix-webfont) | 48px resp. 41px, 400 |
| H3 | **Gelica Regular** (serif) | 45px / 63px, 700 |
| Body | **Gotham Medium** | 15px / 21px, 400 |
| Ook geladen | Playfair Display, Bodoni Moda, Raleway, Avenir (Light/Heavy), Didot Italic, DIN Next Light, Adobe Caslon, Amiri | |

> Dit is een display-serif + geometrische sans combinatie. Met vrije fonts te benaderen via **Playfair Display** of **Bodoni Moda** voor display (beide al aanwezig in de site) en **Montserrat** of **Jost** als Gotham-vervanger.

### Kleuren

| Token | Hex | Gebruik |
|---|---|---|
| `ink` | `#363636` | koppen |
| `text` | `#324d72` | lopende tekst (slate-navy) |
| `accent` | `#ee7219` | oranje CTA |
| `teal-dark` | `#0a5854` | donkere teal vlakken |
| `teal` | `#447f74` / `#75aaa0` | secundair groen |
| `navy` | `#2b5672` / `#314d72` | diep blauwgrijs |
| `surface` | `#f9f6f4` | warme off-white |
| `lilac` | `#dac6e2` | zacht paars vlak |
| `blush` | `#ebcac1` | zacht roze vlak |
| `base` | `#ffffff` | achtergrond |

### Assets

`acte/logo/ByActe_logo__logo.png` (wordmark, zwart) + `ByActe_logo__beeldmerk-04.png`. Fotografie: geënsceneerde lifestyle-shots (`DSC_*.jpg`), plus icoonset `Iconen_2-01..03.png`.

---

## 5. Brandwijk Themapakketten

**Platform:** FTLShop (SaaS-webshopplatform, React-frontend)

### Typografie

| Rol | Font | Waarde |
|---|---|---|
| Koppen | **Montserrat**, sans-serif (Google) | H1 28px/35px 700 · H2 24px/30px 700 · H3 16px/20px 700 |
| Body | systemstack (`-apple-system, Segoe UI, Roboto, …`) | 14px / 21px, 400 |
| Accentfont | **Avenir** 300/400/700 (self-hosted) | |

Zelfde Montserrat-kop als Promo.nl — het enige typografische raakvlak binnen de hele groep.

### Kleuren

| Token | Hex | Gebruik |
|---|---|---|
| `primary` | `#003a80` | merkblauw — logo, links, knoppen |
| `primary-dark` | `#00234d` | hover / donkere variant |
| `silver` | `#b6bcbd` | tweede logokleur |
| `ink` | `#262526` | tekst |
| `surface` | `#eeeae7` | warm grijze sectie |
| `border` | `#ced4da` / `#e6e6e6` | randen |
| `success` | `#208836` | groen (duurzaamheid, voorraad) |
| `base` | `#ffffff` | achtergrond |

### Assets

`brandwijk/logo/…-logo_brandwijk.svg` (blauw `#003a80` + zilver `#b6bcbd`), volledige favicon-set (ico + touch-icons), OG-image, en betaallogo's (iDEAL, Visa, Mastercard).

---

## 6. De blijkbon

**Platform:** Laravel + Vite + Tailwind v4 (oklch-tokens), achter Cloudflare — gebouwd door JustBetter

### Typografie

| Rol | Font | Waarde |
|---|---|---|
| Display / nav / buttons | **Dx Grafik**, sans-serif | 16–24px, 400 |
| Body | **Manrope** (self-hosted 400/600/700, latin + latin-ext) | 16px / 24px, 400 |
| H2 | Dx Grafik | 24px / 30px, 400 |
| Ook geladen | Inter 400/500/600 | |

Manrope is gratis (Google Fonts). Dx Grafik is commercieel (Dinamo).

### Kleuren — het meest uitgesproken palet

| Token | Hex | Gebruik |
|---|---|---|
| `primary` | `#4e3bec` | indigo/violet — dominante vlakken |
| `primary-deep` | `#1032cf` | diepblauw |
| `accent` | `#fcae42` | amber/oranje — tweede grote vlak |
| `cream` | `#fff8ea` | body-achtergrond |
| `cream-alt` | `#f8f0e2` / `#f8f2e5` | tekst op donker, zachte vlakken |
| `pink` | `#f291fc` | roze accent |
| `mint` | `#00ed87` | groen accent |
| `ink` | `#323641` | lopende tekst |
| `ink-dark` | `#262626` | koppen |

### Assets

`deblijkbon/logo/logo.png` + `small-logo.png`, meerkleurige favicon, zes headervisuals (`header1..6.webp`), `cards-visual.png`, `woman-with-card.png`, en partnerthumbs (Coolblue, Wehkamp, Intratuin, Dinercadeau).

---

## 7. Samenvatting voor Claude Design

### Fonts per merk

```
Blijk Groep   display: Gilroy (ExtraBold/Bold)   |  tekst: Questrial
Promo.nl      display: Montserrat 700            |  tekst: Montserrat 400
Stegman       display: Helvetica Neue 700        |  tekst: Helvetica Neue Light (systemstack)
By Acte       display: Silence Rocken / Gelica   |  tekst: Gotham Medium
Brandwijk     display: Montserrat 700            |  tekst: system UI + Avenir
De blijkbon   display: Dx Grafik                 |  tekst: Manrope
```

### Vrije vervangers voor de commerciële fonts

| Origineel | Licentie | Vrij alternatief |
|---|---|---|
| Gilroy | commercieel | Poppins · Inter Tight · Jost |
| Gotham Medium | commercieel | Montserrat · Jost |
| Silence Rocken | Wix-licentie | Playfair Display · Bodoni Moda |
| Gelica | commercieel | Fraunces · Bitter |
| Dx Grafik | commercieel | Space Grotesk · General Sans |
| Avenir | commercieel | Nunito Sans · Mulish |
| Questrial · Montserrat · Manrope · Inter | **gratis (Google)** | — |

### Primaire kleur per merk

```
Blijk Groep   #ff5f21  oranje      op  #edf6f8 / #ffffff
Promo.nl      #f70000  rood        op  #011627 / #ffffff
Stegman       #555149  warm bruin  op  #fefaf1   (accent #ea3441)
By Acte       #ee7219  oranje      op  #f9f6f4   (teal #0a5854)
Brandwijk     #003a80  blauw       op  #eeeae7 / #ffffff
De blijkbon   #4e3bec  indigo      op  #fff8ea   (amber #fcae42)
```

### Beeldstijl per merk

- **Blijk Groep** — uitgeknipte portretfotografie op wit, warme oranje-gele randlichtgloed, tekstformule “Waarderen is …” over het portret heen. Zeven varianten, één per waarde.
- **Promo.nl** — packshots op wit, veel productgrid, rode accentbalken.
- **Stegman** — warme seizoensfotografie, brochurecovers, showroom, kleurstalen als navigatie.
- **By Acte** — geënsceneerde lifestylefotografie, veel wit, pastelvlakken (lila, blush), icoonset.
- **Brandwijk** — productfotografie van pakketten, zakelijk blauw, duurzaamheidssignalen.
- **De blijkbon** — grafisch en plat: grote gekleurde vlakken, kaartvisuals, illustratie boven fotografie.

### Wat je moet weten voordat je ontwerpt

1. **Er is geen groepsdesignsysteem.** De enige gedeelde elementen zijn Montserrat (Promo + Brandwijk) en de neiging naar een warm oranje/rood accent (4 van de 6).
2. **Contrast is een probleem bij Promo.nl** (`#f70000` op wit) en bij de kleine bodytekst (13.68px). Fix dat in elke nieuwe mock.
3. **De blijkbon is de modernste stack en het meest uitgesproken merk** — zoek je een richting die "nieuw Blijk" voelt, dan ligt die daar.
4. De groep verkoopt *waardering*, niet spullen. Warmte, mensen en tastbaarheid horen in het ontwerp — geen kille SaaS-esthetiek.