# Digital Footprint — design.md

De huisstijl van Digital Footprint in één bestand. Zet dit bestand in de root van je project (of geef het als context aan je AI-tool, bijvoorbeeld naast een `CLAUDE.md`), zodat alles wat je bouwt meteen on-brand is.

- Bron: het digitale huisstijlhandboek (`Huisstijlhandboek/site/index.html`)
- Gebaseerd op de design handoffs van de parkeerpagina (variant 4a) en de placeholder (variant 5a), oktober 2026
- Versie 1.0, laatst bijgewerkt: 2026-10-23
- Online: https://brandbook.digitalfootprint.nl/

## Merk in het kort

**Van zoeken vinden maken.** Digital Footprint helpt bedrijven met hun online aanwezigheid, van domeinnaam tot website. De identiteit draait om één beeld: een netwerk dat vanuit één kern groeit. Het beeldmerk in het logo (een centrale knoop met zes verbindingen) is de kern van dat netwerk.

**Ontwerpprincipes:** ruimte · verbinding · één accent · licht met nadruk · rustige beweging.

Aanspreekvorm: altijd **je**, nooit u. Missie, kernwaarden en positionering zijn nog niet vastgesteld. Verzin ze niet.

## Kleuren

Klein palet: papier en inkt dragen alles, logo-grijs hoort bij het woordmerk, rood is het enige accent. Gebruik deze waarden exact en verzin geen tussentinten.

```css
:root {
  /* Merk */
  --df-red:        #D9283B;  /* accent en beeldmerk: stip, kern, hover, focus */
  --df-grey:       #55565A;  /* logo-grijs: alleen het woordmerk */
  --df-ink:        #1C1C20;  /* primaire tekst, primaire knop */
  --df-paper:      #FCFBF9;  /* achtergrond van elke pagina */
  --df-white:      #FFFFFF;  /* secundaire knop, tekst op inkt en rood */
  /* Tekst */
  --df-text-2:     #64646B;  /* lopende tekst, secundaire tekst */
  --df-text-3:     #8A8990;  /* labels en meta (13px), niet voor lopende tekst */
  /* Lijnen en netwerk */
  --df-line:       #DAD7D1;  /* randen, onderstreping van links */
  --df-wave:       #ECE9E4;  /* signaalgolven */
  --df-wave-red:   #F3D4D7;  /* derde signaalgolf (lichtrood) */
  --df-net:        #D6D3CD;  /* netwerk: vertakkingen */
  --df-net-light:  #E6E3DE;  /* netwerk: satellieten */
  --df-node:       #B3B1B6;  /* grijze knopen */
  --df-node-light: #C9C7CB;  /* kleine grijze knopen */
  /* Typografie */
  --df-font:       'Red Hat Display', system-ui, sans-serif;
  /* Layout */
  --df-gutter:     clamp(24px, 5.6vw, 72px);
  /* Motion */
  --df-ease-up:    cubic-bezier(.2, .7, .2, 1);   /* tekst schuift in */
  --df-ease-draw:  cubic-bezier(.4, 0, .2, 1);    /* lijnen tekenen */
  --df-ease-pop:   cubic-bezier(.3, 1.4, .5, 1);  /* knopen ploppen (lichte overshoot) */
  --df-ease-wave:  cubic-bezier(.2, .6, .4, 1);   /* signaalgolven */
}
```

### Contrast (WCAG 2.2)

| Combinatie | Ratio | Gebruik |
|---|---|---|
| Inkt op papier | 16,4:1 | AAA, alle tekst |
| Tekst 2 op papier | 5,7:1 | AA, lopende tekst |
| Tekst 3 op papier | 3,4:1 | alleen korte labels en meta, nooit voor lopende tekst (AA vraagt 4,5:1) |
| Rood op papier | 4,7:1 | AA, links en accenten |
| Wit op rood | 4,9:1 | AA, primaire knop in hover |
| Wit op inkt | 17,0:1 | AAA, primaire knop, negatief logo |
| Rand op papier | 1,4:1 | alleen decoratief, nooit als enige drager van informatie |

Richtlijn voor de verdeling: vooral papier en wit, inkt voor tekst, rood alleen in kleine doses (een stip, de kern, een hover). Rood is nooit een groot vlak.

## Typografie

| Rol | Font | Gewichten |
|---|---|---|
| Alle tekst op site en in documenten | Red Hat Display | 300 Light, 400 Regular, 500 Medium |
| Woordmerk (alleen in het logo) | Helvetica Neue Light Extended | n.v.t., nooit natypen |

Red Hat Display wordt zelf gehost (één variabel latin-bestand, 300–500, `font-display: swap`), niet via Google Fonts (AVG, en CSP `font-src 'self'`). Licentie: SIL Open Font License.

Het kenmerk: koppen in Light (300) met één woordgroep in Medium (500) als nadruk. Voorbeeld: "We leggen de **laatste verbindingen**." Geen vet (600+), geen cursief, geen nadruk met kleur.

### Typeschaal

| Niveau | Gewicht | Grootte / regelhoogte | Overig |
|---|---|---|---|
| Display (H1) | 300, nadruk 500 | `clamp(34px, 5.2vw, 68px)` / 1.04 | letter-spacing −0.03em, `max-width: 12–13ch`, `text-wrap: balance` |
| Heading 2 | 300, nadruk 500 | `clamp(28px, 3.4vw, 44px)` / 1.1 | letter-spacing −0.025em, `text-wrap: balance` |
| Heading 3 | 500 | 20px / 1.35 | letter-spacing −0.01em |
| Body | 400 | `clamp(15px, 1.3vw, 17px)` / 1.7 | kleur tekst 2, `max-width: 38ch`, `text-wrap: pretty` |
| Knop | 500 | 14px | |
| Link | 400 | 14px | onderstreping 1px `--df-line`, padding-bottom 2px |
| Label | 400 | 13px | kleur tekst 3, met rode stip van 6px |

Koppen in zinshoofdletters, met een punt erachter: "Dit domein is gereserveerd." Geen title case.

## Layout en ruimte

- Content staat **linksonder**, het netwerk **rechtsboven** en loopt over de rand van het scherm.
- Horizontale marge: `--df-gutter` = `clamp(24px, 5.6vw, 72px)`.
- Header-padding: `clamp(24px, 3.6vw, 40px) var(--df-gutter)`. Logo `width: clamp(120px, 13vw, 160px)`.
- Main: `gap: clamp(16px, 2.2vw, 24px)`, onderpadding `clamp(28px, 5vw, 72px)`, tekstkolom `max-width: 640px`.
- Geen breakpoints nodig voor de basislayout; alles schaalt via `clamp()`. Getest op 1280×800 en 390×844.
- Hoogte van een schermvullende pagina: `min-height: 100svh`.
- Spacingschaal: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 72 · 96 · 144 px.

## Vorm

| Eigenschap | Waarde | Gebruik |
|---|---|---|
| Radius | `999px` | knoppen (pill) |
| Radius | `50%` | stippen, knopen, golfringen |
| Radius | `0` | kaarten en blokken |
| Lijn | `1px solid #DAD7D1` | randen, scheidingslijnen, onderstreping |
| Schaduw | geen | diepte via ruimte en lijnen, nooit via schaduw of verloop |

## Logo

- Woordmerk "digital footprint" in kleine letters (Helvetica Neue Light Extended, `#55565A`) naast het beeldmerk (rood `#D9283B`): een centrale knoop met zes verbindingen.
- In lopende tekst: **Digital Footprint**, twee woorden, beide met een hoofdletter.
- Varianten: standaard (grijs + rood, op papier of wit), negatief (wit + rood, op inkt), beeldmerk los (favicon, avatar).
- Vrije ruimte rondom: minimaal de x-hoogte van het woordmerk (de hoogte van de "o").
- Minimale breedte: 120px voor het volledige logo; beeldmerk los vanaf 16px.
- Niet herkleuren buiten de varianten, niet vervormen, roteren of van schaduw voorzien, het woordmerk nooit natypen.
- Bestand: `logo.svg` is gevectoriseerd uit het officiële PNG. Gebruik dit bestand, niet de Questrial-benadering uit de handoffs.

## Netwerk (beeldmerk als beeld)

Het terugkerende beeld. Genereer het met `network.js` (deterministisch, vaste seed 5, 31 knopen en 30 lijnen, `viewBox 0 0 600 600`), zodat het overal identiek is.

| Onderdeel | Specificatie |
|---|---|
| Kern | middelste knoop, r 22, `#D9283B` |
| Primaire knopen | het beeldmerk uit het logo ×1,7 rond het centrum: 6 knopen (r ≈ 9–11) en rode lijnen van 3px |
| Vertakkingen | 3 per primaire knoop, haarlijn 1px `#D6D3CD`, knopen r 2,5–5 in `#B3B1B6` (sommige rood), pulseren |
| Satellieten | tweede vertakking, haarlijn 1px `#E6E3DE`, knopen r 2 in `#C9C7CB`, pulseren |
| Signaalgolven | 3 ringen, 1px, `#ECE9E4`, `#ECE9E4`, `#F3D4D7`, `width: 260%` van de netwerk-container |

Plaatsing: absolute container, `right: max(-18vw, -260px)`, `top: calc(-8vw - 60px)`, `width: max(78vw, 560px)`, `aspect-ratio: 1`, `pointer-events: none`, `aria-hidden="true"`. Altijd achter de content, nooit over tekst, één netwerk per scherm. Lijnen `stroke-linecap: round`.

## Motion

| Element | Animatie | Duur | Delay | Easing |
|---|---|---|---|---|
| Header | fade 0→1 | 1s | 0 | ease |
| Netwerklijnen | `stroke-dashoffset` 1→0 (`pathLength=1`) | 1s | per lijn, 0,5–2,9s | `--df-ease-draw` |
| Netwerkknopen | `scale` 0→1 (`transform-box: fill-box`) | .6s | per knoop | `--df-ease-pop` |
| Label | opacity 0→1, `translateY(14px)`→0 | .9s | .4s | `--df-ease-up` |
| H1 | idem | 1s | .55s | `--df-ease-up` |
| Alinea | idem | 1s | .7s | `--df-ease-up` |
| CTA-groep | idem | 1s | .85s | `--df-ease-up` |

Doorlopend: drift van het netwerk `translate(0,0)→(-6px,6px)→(0,0)` in 14s ease-in-out; pulse kleine knopen opacity 1→.35→1 in 3–7s; signaalgolven `scale(.08)→1` met opacity 0→1 (12%)→0 in 10s, delays 2s / 5,33s / 8,66s. Hovers: `.3s`.

`prefers-reduced-motion: reduce`: alle animaties en transities uit, alles direct in eindstaat, golven verborgen.

## Componenten

- **Primaire knop:** `padding: 13px 22px; border-radius: 999px; background: #1C1C20; color: #FFF; font: 500 14px`, flex met `gap: 10px` en een pijl `→`. Hover: `background: #D9283B; gap: 14px`. Transition `background, gap .3s`.
- **Secundaire knop:** idem, maar `background: #FFF; border: 1px solid #DAD7D1; color: #1C1C20`. Hover: rand en tekst `#D9283B`, `gap: 14px`.
- **Tekstlink:** 14px/400, `#64646B`, geen underline, `border-bottom: 1px solid #DAD7D1`, `padding-bottom: 2px`. Hover: tekst en rand `#D9283B`.
- **Label:** flex, `gap: 10px`, rode stip 6×6px, 13px `#8A8990`.
- **CTA-groep:** `display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px`.
- **Focus (alles wat klikbaar is):** `outline: 2px solid #D9283B; outline-offset: 3px` via `:focus-visible`.
- **Disabled:** `opacity: .4; pointer-events: none`.
- Iconen: geen; de pijl in een CTA is het teken `→`.

## Tone of voice

Kalm, helder en gewoon bereikbaar. De stem volgt het beeld: veel ruimte, weinig woorden, één ding krijgt de nadruk.

**Wel:** korte, rustige zinnen · koppen in zinshoofdletters met een punt · nadruk met gewicht (één woordgroep in 500) · we-vorm · de lezer aanspreken met **je**, nooit met u · concreet zeggen wat er gebeurt.

**Niet:** “u” en “uw” · title case ("Uw Digitale Voetafdruk Begint Hier") · uitroeptekens · schreeuwerige of vage beloftes · vakjargon zonder uitleg · nadruk met kleur, hoofdletters of onderstreping.

Zinnen die passen: "We leggen de laatste verbindingen." · "Dit domein is gereserveerd." · "Tot die tijd zijn we gewoon bereikbaar."

## Do / don't

**Wel:** exacte tokenwaarden · veel ruimte · rood spaarzaam · het officiële logo-SVG · het gegenereerde netwerk · zelf gehoste fonts.

**Niet:** nieuwe kleuren of tussentinten · schaduwen of verlopen · vet of cursief · zelfgetekende iconen of netwerken · merkclaims, cijfers, cases of kernwaarden verzinnen.

---

Vragen of twijfel? Het digitale huisstijlhandboek op https://brandbook.digitalfootprint.nl/ is leidend. Contact: info@digitalfootprint.nl