Huisstijlhandboek · Digital Footprint

01 · Het merk

Eén kern, zes verbindingen.

Digital Footprint helpt bedrijven met hun online aanwezigheid, van domeinnaam tot website. De nieuwe identiteit maakt daar één beeld van: een netwerk dat vanuit één kern groeit. Het beeldmerk uit het logo is het hart, elke toepassing bouwt erop verder.

Van zoeken vinden maken.

Vijf ontwerpprincipesafgeleid uit het ontwerp

01

Ruimte

Warm papier als ondergrond en veel lucht. De inhoud staat linksonder, de rest van het scherm mag leeg blijven.

02

Verbinding

Het netwerk uit het beeldmerk is het terugkerende beeld. Het groeit uit de kern en loopt over de rand van het scherm.

03

Eén accent

Rood is schaars: een stip, de kern, een hover. Papier, inkt en grijs doen de rest.

04

Licht met nadruk

Koppen in Light, met één woordgroep in Medium. Nadruk komt uit gewicht, niet uit kleur of vet.

05

Rustige beweging

Eerst bouwt alles zich op, daarna ademt het netwerk zacht door. Nooit snel, nooit opdringerig.

Nog vast te stellen: missie, kernwaarden en positionering. Dit handboek legt de visuele identiteit vast; het merkverhaal volgt. Verzin in de tussentijd geen claims of waarden.

02 · Tone of voice

Kalm, helder en gewoon bereikbaar.

De stem volgt het beeld: veel ruimte, weinig woorden, één ding krijgt de nadruk. Deze regels komen uit de teksten van het nieuwe ontwerp.

We leggen de laatste verbindingen.

Dit domein is gereserveerd.

Tot die tijd zijn we gewoon bereikbaar.

Wel doen

Korte, rustige zinnen. Eén gedachte per zin.
Koppen in zinshoofdletters, met een punt erachter: “Dit domein is gereserveerd.”
Nadruk met gewicht: één woordgroep in Medium, de rest Light.
De we-vorm. Digital Footprint praat als team: “we leggen”, “we zijn bereikbaar”.
De lezer spreek je aan met je, nooit met u.
Concreet zeggen wat er gebeurt: “Hier verschijnt binnenkort een nieuwe website.”

Niet doen

“U” en “uw”, en title case. Allebei op de oude site: “Uw Digitale Voetafdruk Begint Hier”.
Uitroeptekens en schreeuwerige claims.
Vage beloftes en vakjargon zonder uitleg.
Nadruk met kleur, hoofdletters of onderstreping.
Lange alinea’s. Past het niet in 38 tekens breed en een paar regels, dan is het te veel.

Aanspreekvorm: altijd je, nooit u. Dat geldt voor alle teksten van Digital Footprint, ook de formele.

03 · Logo

Woordmerk en beeldmerk.

Het woordmerk “digital footprint” in kleine letters, naast het beeldmerk: een centrale knoop met zes verbindingen. In lopende tekst schrijf je Digital Footprint, twee woorden, allebei met een hoofdletter.

Standaard, op papier of wit

Negatief, op inkt

Beeldmerk, los als favicon of avatar

Vrije ruimte en formaat

x

Vrije ruimte: rondom minimaal x, de x-hoogte van het woordmerk (de hoogte van de “o”). Geen tekst, rand of beeld binnen die zone.
Minimale breedte: 120 px voor het volledige logo, zoals in het ontwerp (clamp(120px, 13vw, 160px)). Het beeldmerk los kan tot 16 px.
Achtergrond: standaard op papier #FCFBF9 of wit, negatief op inkt #1C1C20. Altijd een rustige, egale ondergrond.
Bestand: gebruik logo.svg. Het is gevectoriseerd uit het officiële PNG; de Questrial-benadering uit de handoffs vervalt.
Woordmerk: gezet in Helvetica Neue Light Extended. Typ het nooit na, in geen enkel lettertype.

Zo niet

Niet vervormen of uitrekken.

Niet roteren of schuin zetten.

Niet herkleuren buiten de twee varianten.

Geen schaduw, gloed of verloop.

Niet op een drukke of contrastarme ondergrond.

Digital Footprint

Het woordmerk niet natypen.

04 · Kleur

Warm papier, inkt en één rood.

Het palet is klein. Papier en inkt dragen alles, logo-grijs hoort bij het woordmerk en rood is het enige accent. Klik op een staal om de hex-code te kopiëren.

Merkkleuren

Tekst

Lijnen en netwerk

Verdelingrichtlijn

Papier Wit Inkt

Vooral papier en wit, inkt voor tekst, lijnen en grijs voor structuur. Rood alleen in kleine doses en nooit als groot vlak.

ContrastWCAG 2.2

AaInkt op papier
Alle tekst16,4:1AAA

AaTekst 2 op papier
Lopende tekst5,7:1AA

AaTekst 3 op papier
Alleen korte labels en meta; te zwak voor lopende tekst (AA vraagt 4,5:1)3,4:1Beperkt

AaRood op papier
Links en accenten in hover4,7:1AA

AaWit op rood
Primaire knop in hover4,9:1AA

AaWit op inkt
Primaire knop, negatief logo17,0:1AAA

AaRand op papier
Alleen decoratief, nooit de enige drager van informatie1,4:1Decoratief

05 · Typografie

Red Hat Display, licht met nadruk.

Eén lettertype voor alle tekst, in drie gewichten. Koppen staan in Light met één woordgroep in Medium; zo krijgt de zin een rustige, open uitstraling met één duidelijk zwaartepunt.

Aa

Red Hat Display

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 → € @ & ? !

Light 300koppen

Regular 400lopende tekst, labels

Medium 500nadruk, knoppen

Zelf gehost als één variabel bestand (latin, 300–500), niet via Google Fonts: dat is beter voor de AVG en past in een strikte CSP. Licentie: SIL Open Font License.

Typeschaal

Display · H1Light 300 · clamp(34px, 5.2vw, 68px) / 1.04−0.03em · max 12–13ch

We leggen de laatste verbindingen.

Heading 2Light 300 · clamp(28px, 3.4vw, 44px) / 1.1−0.025em

Eén kern, zes verbindingen.

Heading 3Medium 500 · 20px / 1.35−0.01em

Van domeinnaam tot website

BodyRegular 400 · clamp(15px, 1.3vw, 17px) / 1.7Tekst 2 · max 38ch

Hier verschijnt binnenkort het nieuwe digitalfootprint.nl. Tot die tijd zijn we gewoon bereikbaar.

KnopMedium 500 · 14px

Neem contact op

LinkRegular 400 · 14pxonderstreping 1px, rand

info@digitalfootprint.nl

LabelRegular 400 · 13pxTekst 3 · rode stip 6px

Nieuwe website in de maak

Lettertype van het woordmerk

Het woordmerk is gezet in Helvetica Neue Light Extended. Dat is een commercieel lettertype dat alleen in het logo voorkomt. Gebruik het nergens anders en typ het woordmerk nooit na; alle andere tekst staat in Red Hat Display.

06 · Ruimte en vorm

Veel lucht, ronde knopen.

De compositie is altijd dezelfde: logo linksboven, inhoud linksonder, het netwerk rechtsboven en over de rand. Alles schaalt vloeiend mee met clamp(), zonder harde breakpoints.

Zijmarge (gutter)clamp(24px, 5.6vw, 72px)
Header-padding verticaalclamp(24px, 3.6vw, 40px)
Logobreedteclamp(120px, 13vw, 160px)
Ruimte tussen tekstblokkenclamp(16px, 2.2vw, 24px)
Onderpadding inhoudclamp(28px, 5vw, 72px)
Tekstkolommax-width: 640px
Regellengte kop / tekst12–13ch / 38ch
Knop-padding13px 22px
Hoogte schermvullendmin-height: 100svh

Spacingschaal

4fijne correcties

8icoon tot tekst

12tussen knoppen

16min. tekstblokken

24max. tekstblokken, min. gutter

32binnen kaarten

48tussen groepen

72max. gutter

96tussen secties (klein)

144tussen secties (groot)

Rood gemarkeerd: maten die letterlijk in het ontwerp voorkomen.

Vormtaal

Knop →

Pill999px

Alle knoppen.

Cirkel50%

Stippen, knopen, golfringen.

Blok0

Kaarten en vlakken, recht.

Haarlijn1px

Randen, scheiding, onderstreping.

Schaduwnone

Nooit. Diepte komt uit ruimte en lijnen.

07 · Netwerk

Het netwerk groeit uit het beeldmerk.

Het beeldmerk, 1,7 keer vergroot, is de kern van een groter netwerk van 31 knopen en 30 lijnen. Het wordt gegenereerd met een vaste seed en ziet er dus overal hetzelfde uit. Klik een onderdeel aan om het uit te lichten.

viewBox 600 × 600 · seed 5 SVG

Het middelpunt van alles. Hier begint de animatie en hier komt elke lijn samen.

Straalr 22
Kleur#D9283B
Verschijntna 0,3 s

Exact het beeldmerk uit het logo, geschaald rond het centrum. De enige rode lijnen in het netwerk.

Knopen6 · r 9–11
Lijnen3 px · #D9283B
Schaal× 1,7

Drie haarlijnen per primaire knoop. De kleine knopen pulseren rustig; een enkele is rood.

Lijnen1 px · #D6D3CD
Knopenr 2,5–5 · #B3B1B6
Pulse3–7 s, opacity 1 → .35

Een tweede vertakking aan de middelste tak. Licht en klein, zodat het netwerk naar buiten toe oplost.

Lijnen1 px · #E6E3DE
Knopenr 2 · #C9C7CB
Pulse3–7 s

Ringen die vanuit het midden uitdijen en vervagen, alsof er een signaal wordt verstuurd. De derde is lichtrood.

Lijn1 px · #ECE9E4 · #F3D4D7
Cyclus10 s · delays 2 / 5,33 / 8,66 s
Grootte260% van de container

Gebruik

Rechtsboven, over de rand. right: max(-18vw, -260px), top: calc(-8vw - 60px), width: max(78vw, 560px).
Altijd achter de inhoud, met pointer-events: none en aria-hidden="true".
Gegenereerd, niet getekend. Gebruik network.js of netwerk.svg, zodat het netwerk overal identiek is.

Nooit over tekst of knoppen; op mobiel valt het achter de header, boven de tekst.
Eén netwerk per scherm. Niet herhalen als patroon of behang.
Niet herkleuren, geen knopen toevoegen en geen eigen netwerken tekenen.

08 · Beweging

Eerst opbouwen, dan ademen.

Bij binnenkomst tekent het netwerk zich vanuit de kern, daarna schuift de tekst op zijn plek. Daarna beweegt alleen nog het netwerk: langzaam, en altijd uit te zetten. Beweeg over een curve om hem te zien lopen.

Easing

Omhoogcubic-bezier(.2, .7, .2, 1) Tekst die inschuift (14px omhoog).

Tekenencubic-bezier(.4, 0, .2, 1) Netwerklijnen die zich tekenen.

Popcubic-bezier(.3, 1.4, .5, 1) Knopen die verschijnen, met lichte overshoot.

Golfcubic-bezier(.2, .6, .4, 1) Signaalgolven die uitdijen.

Intro bij binnenkomst

Headerfade · 1s · ease

Kern en beeldmerklijnen 1s, knopen .6s

Vertakkingenper lijn verschoven

Satellietenper lijn verschoven

Label.9s · delay .4s

H11s · delay .55s

Alinea1s · delay .7s

CTA-groep1s · delay .85s

Doorlopend

Drift14s

Het hele netwerk zweeft 6px heen en weer, ease-in-out. Hier versneld getoond.

Pulse3–7s

Kleine knopen dimmen naar 35% en terug, elk in een eigen tempo.

Golven10s

Drie ringen, gelijk verdeeld over de cyclus. Hier versneld getoond.

Reduced motion: bij prefers-reduced-motion: reduce gaan alle animaties en transities uit. Alles staat direct in de eindstaat en de golven verdwijnen. Hovers duren .3s.

09 · Componenten

Weinig onderdelen, steeds dezelfde.

Een knop, een tweede knop, een link en een label. Beweeg erover om de hover te zien, of kopieer de HTML.

Primaire knop

Neem contact op

Default

Neem contact op

Hover

Neem contact op

Focus

Neem contact op

Disabled

background: #1C1C20 → hover #D9283B, gap 10 → 14px, .3s
Padding 13px 22px, radius 999px, Medium 14px, wit

Secundaire knop

Meer over ons

Default

Meer over ons

Hover

Meer over ons

Focus

Meer over ons

Disabled

background: #FFF, rand 1px #DAD7D1 → hover rand en tekst #D9283B
Uit de parkeerpagina (4a); verder gelijk aan de primaire knop

Tekstlink

info@digitalfootprint.nl info@digitalfootprint.nl

Regular 14px, #64646B, border-bottom: 1px solid #DAD7D1, padding-bottom 2px
Hover: tekst en lijn #D9283B

Label

Nieuwe website in de maak

template.df0.nl

Rode stip 6 × 6px, gap 10px, Regular 13px, #8A8990
Voor status of domein boven een kop. Niet voor essentiële informatie (contrast 3,4:1)

CTA-groep

Neem contact op info@digitalfootprint.nl

display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; animeert als één blok in
Focus op alles wat klikbaar is: outline: 2px solid #D9283B; outline-offset: 3px

10 · Toepassingen

Al live.

Twee pagina’s gebruiken de nieuwe huisstijl al. Ze zijn de referentie voor alles wat volgt, te beginnen met de nieuwe digitalfootprint.nl.

Placeholder

digitalfootprint.nl ↗

Variant 5a. Staat op het hoofddomein zolang de nieuwe website in ontwikkeling is.

Parkeerpagina

placeholder.digitalfootprint.nl ↗

Variant 4a. Verschijnt op domeinen die klanten via Digital Footprint hebben geregistreerd, met het domein in het label.

Bestanden

logo.svgLogo standaard, grijs en rood

Download ↓

logo-negatief.svgLogo negatief, wit en rood, voor op inkt

Download ↓

beeldmerk.svgBeeldmerk los, ook het favicon

Download ↓

netwerk.svgHet netwerk, statisch (600 × 600)

Download ↓

red-hat-display-latin.woff2Lettertype, variabel 300–500 (SIL OFL)

Download ↓

design.mdAlle tokens en regels voor je project of AI-tool

Download ↓

Open puntennog te beslissen

Merkverhaal: missie, kernwaarden en positionering.
Origineel logobestand: een vectorbestand van de ontwerper (AI, EPS of SVG) kan de getracete logo.svg vervangen.