# MB Photography – huisstijl

Versie 1.0 · november 2026 · bron: https://brandbook.mbphoto.nl/

Gebruik dit bestand als context voor een eigen project of AI-tool. De website https://mbphoto.nl/ is de maatstaf.

## Merk

- Naam: **MB Photography** (spatie, twee hoofdletters). Geen varianten zoals MBPhoto of M.B. Photography.
- MB Photography is de fotografie van Morris Houtzager, vooral sport (voetbal, waterpolo, basketbal).
- Uitgangspunten: foto's eerst, één actie (een berichtje via Instagram), simpel.
- Instagram: https://www.instagram.com/mb_photography_mbp/ (@mb_photography_mbp)

## Stem

- Kort, eenvoudig, zonder jargon. Gewone Nederlandse woorden.
- Vriendelijk en direct. Geen grote beloftes.
- Eén oproep per pagina.
- Voorbeelden: "Fotografie door Morris Houtzager", "Bekijk meer op Instagram", "Meer foto's, het laatste werk en een shoot boeken: stuur een berichtje via Instagram."

## Logo

- Blauwe M die vloeiend doorloopt in een witte B, −45° gedraaid, op een donker vlak.
- Varianten: op donker vlak (standaard), los beeldmerk voor lichte achtergronden, app-icoon.
- Bestanden: https://brandbook.mbphoto.nl/logo/mb-logo.svg, /logo/mb-beeldmerk-licht.svg, /logo/mb-app-icoon.svg (ook als .png, 1024 px).
- Nooit natekenen, draaien, verkleuren of op een drukke achtergrond zetten. Vrije ruimte rondom: minstens een kwart van de logobreedte.
- Met naam: logo 56 px, gap 16 px, naam Familjen Grotesk 700 26 px (letter-spacing −0.02em), ondertitel 400 15 px in tekst 2. Mobiel: 44 px / 12 px / 20 px / 13 px.

## Kleur

| Naam | Hex | Gebruik |
|---|---|---|
| Papier | `#F3F2EE` | Achtergrond, tekst op inkt |
| Inkt | `#0B0B24` | Tekst, knoppen, randen, theme-color |
| Tekst 2 | `#4D4C55` | Ondertitels, labels, footer |
| Nacht | `#010014` | Vlak achter het logo |
| MB-blauw | `#0A0091` | De M; spaarzaam als accent |
| Wit | `#FFFFFF` | De B |
| App-blauw | `#2B23E0` | De M in het app-icoon |
| App-verloop | `#14143A` → `#0B0B24` | Achtergrond app-icoon, van boven naar onder |

Contrast: inkt op papier 17,2:1, tekst 2 op papier 7,6:1, MB-blauw op papier 13,2:1, wit op nacht 20,8:1. Blauw op nacht (1,4:1) is alleen voor het logo, nooit voor tekst.

```css
:root {
  --bg: #f3f2ee;
  --ink: #0b0b24;
  --text-2: #4d4c55;
  --night: #010014;
  --blue: #0a0091;
}
```

## Letter

- Eén lettertype: **Familjen Grotesk** (SIL OFL), gewichten 400/500/600/700, fallback `sans-serif`. Zelf hosten; geen externe fonts.

| Rol | Gewicht | Desktop / mobiel | Extra |
|---|---|---|---|
| Woordmerk | 700 | 186 / 68 px | line-height 0.8, letter-spacing −0.055em |
| Oproep | 500 | 32 / 23 px | line-height 1.2, letter-spacing −0.02em |
| Naam | 700 | 26 / 20 px | line-height 1, letter-spacing −0.02em |
| Knop | 600 | 17 / 15 px | |
| Ondertitel | 400 | 15 / 13 px | tekst 2 |
| Label | 600 | 14 / 13 px | |
| Klein | 400 | 13 / 11 px | tekst 2 |

## Ruimte en vorm

- Afstanden (px): 6, 10, 12, 16, 20, 24, 32, 40, 56, 64, 120.
- Zijmarge: 16 px mobiel, 32 px desktop. Max contentbreedte 1280 px.
- Hoeken: 0 voor foto's en vlakken, 40 px voor knoppen. Geen schaduwen.
- Hover op links en knoppen: opacity 0.7, 150 ms ease.

## Fotografie

- Actie van dichtbij: duels, emotie, licht van de lichtmasten.
- Eigen verhouding houden, niet bijsnijden. Hoofdformaat staand 9:16; ook 2:3 en liggend 16:9.
- Geen tekst, logo of watermerk over foto's. Geen kaders, schaduwen, afgeronde hoeken of filters.
- Alt-tekst beschrijft wat je ziet. Metadata eruit vóór publicatie. Webversies 640 en 960 px breed (WebP). Originelen niet online.
- Raster: 3 kolommen met 10 px tussenruimte (desktop), 2 kolommen met 6 px (mobiel, onder 900 px).

## Bouwstenen

- **Pill-link**: `border: 1.5px solid #0b0b24; border-radius: 40px; padding: 10px 18px; font: 600 15px`.
- **Hoofdknop**: `background: #0b0b24; color: #f3f2ee; border-radius: 40px; padding: 18px 26px; font: 600 17px`. Eén per pagina; mobiel volle breedte.
- **Icoonknop** (mobiel): 44×44 px, zelfde rand als de pill-link, `aria-label`.
- **Woordmerk-afsluiter**: "MB Photography" heel groot onderaan, `font-size: clamp(68px, 14.5vw, 186px)`, decoratief (`aria-hidden="true"`).