Merkpakket
project/five
Het logo is één element: de naam in een schuin blok. De schuinte komt van de streep en loopt door in de rest van de huisstijl. Alle logo's zijn te downloaden als SVG en PNG, of met rechtsklikken op het voorbeeld. Klik op een kleur om de hexcode te kopiëren.
01 — Primair logo
Blok skewX(-10°), tekst terug op skewX(10°) zodat de letters recht blijven staan. Hoekradius 8 px bij een blokhoogte van ±68 px, oftewel 12% van de hoogte.
Bricolage Grotesque 800, letterafstand -0.04em. De streep staat in gewicht 400 zodat hij dun blijft en als accent leest.
Zwart blok op licht, geel blok op donker. Geel blok op licht mag alleen als het logo groot en alleenstaand is.
02 — Varianten
03 — Icoon en favicon
12848321604 — Vrije ruimte en minimale maten
Minimaal de helft van de blokhoogte aan alle zijden. Geen tekst, lijn of beeld binnen die zone.
Volledig logo met blok: 120 px breed. Zonder blok: 96 px breed. Icoon: 16 px.
Lijn het blok uit op de tekstbaseline van de omgeving, niet op de blokrand — de schuinte maakt de optische rand ±4 px smaller.
05 — Kleur
Ink en Paper dragen het beeld, Signal is maximaal 10% van het vlak: streep, blok, één knop, één markering.
Signal is een vlakkleur, geen tekstkleur op licht. Voor gele tekst op wit gebruik je Signal deep. Ink op Signal haalt 11:1.
Ink wordt de achtergrond, Paper de tekst, Signal blijft ongewijzigd. Line wordt #2A2926.
06 — Typografie
Bricolage Grotesque 800 · koppen
Websites en automatisering die blijven werken
Instrument Sans 400/600 · lopende tekst
Instrument Sans houdt langere teksten leesbaar en is neutraal genoeg om naast de uitgesproken koppen te staan. Gebruik 17 px voor lopende tekst, 15 px voor secundair, 600 voor nadruk.
JetBrains Mono 500 · labels, code, data
deploy: project/five
status: running
44 / 30 / 22 px koppen, 17 / 15 px tekst, 11-12 px labels in kapitalen met 0.1em spatiëring.
Koppen altijd -0.035em spatiëring en maximaal drie regels. Nooit koppen in kapitalen.
Bricolage Grotesque, Instrument Sans en JetBrains Mono via Google Fonts. Fallback: system-ui bold, nooit een andere display-letter.
07 — In gebruik
Maatwerk zonder onderhoudsverrassingen
Voorbeeld van de header en een kop op de site.
project/five — websites & automatiseringbrowsertabDonkere sectie
Ink als achtergrond, Signal alleen voor het accent en de knop.
08 — Niet doen
Letters niet mee laten schuinen — de tekst staat altijd recht.
Geen omlijnd blok. Het blok is altijd een vlak.
Niet uitrekken of samenknijpen.
09 — Logo in beweging
Het blok staat eerst als smalle streep op de plek van de slash en vouwt in 0,76 s naar beide zijden open. Pas als het vlak er ligt onthult de tekst zich: “project” naar links, “five” naar rechts, weg van de streep. Beweeg met de muis over de logo’s hieronder om het af te spelen.
Vlak open in 760 ms, easing cubic-bezier(.72, 0, .12, 1). Woorden 560 ms later, cubic-bezier(.2, .8, .2, 1).
Dezelfde beweging omgekeerd en terug: dicht tot de streep en meteen weer open, tekst een fractie vooruit. Eén keer per hover.
De vouw gebruikt
clip-path: inset(… round 8px), dus de ronding blijft de hele beweging staan. Bij een ander blokformaat zet je --p5r op dezelfde waarde als de border-radius.De streep blijft staan, alleen de woorden bewegen. Bij prefers-reduced-motion staat het logo direct compleet.
10 — Accent in koppen
Eén accent per kop: een schuine onderstreep onder één woord of een aaneengesloten woordgroep. Geen gevuld blok op kopformaat — dat concurreert met het logo.
Maatwerk zonder onderhoudsverrassingen
Maatwerk zonder onderhoudsverrassingen
Streep 0.09em hoog (minimaal 5 px), radius 2 px, skewX(-10°), 0.04em boven de baseline. Loopt exact over de breedte van het gemarkeerde woord of de woordgroep, die daarvoor op
white-space: nowrap staat.Alleen in koppen vanaf 27 px, één accent per kop. Eén woord of een aaneengesloten woordgroep, mits die op één regel past. Op donker en licht dezelfde Signal-kleur.
Waar de kop bij het laden verschijnt: de streep tekent zichzelf van links naar rechts in 620 ms, scaleX(0) → scaleX(1) vanaf de linkerrand.
11 — Callout
Een geel vlak met dezelfde schuinte als het logoblok: skewX(-10°) op het vlak, skewX(10°) op de inhoud zodat de tekst recht blijft. Voor één losse regel die je wilt uitlichten, of een kort blok van maximaal vier regels.
één regel · 17 px, gewicht 600
Wat er in het beheercontract zit
Hosting, beveiligingsupdates en monitoring lopen door zolang de site in de lucht is. Storingen pakken we binnen vier uur op, doorontwikkeling gaat per uur en altijd na een schriftelijke schatting. Opzeggen kan per maand, zonder afkoopsom.
vier regels · kop 20 px, tekst 15 px
Radius 8 px. Horizontale padding minimaal het dubbele van de verticale: 18/34 px bij één regel, 26/40 px bij een blok.
Altijd Ink op Signal — nooit wit of grijs. Maximaal vier regels en één callout per scherm of pagina.
Geen callout direct naast het logo of naast een kop met de schuine onderstreep: twee schuine elementen naast elkaar vechten om aandacht.
12 — E-mailhandtekening
Klik in de handtekening om naam en gegevens aan te passen. Kopieer daarna en plak in de handtekening-instellingen van Gmail, Outlook of Apple Mail.
| Met vriendelijke groet, | ||||||
| Voornaam Achternaam | ||||||
 | ||||||
| systemen die werken | ||||||
|
13 — Site-handtekening (footer)
Klein, monotoon woordmerk met "Systemen die werken" in de footer van sites die wij bouwen. In rust neemt het de tekstkleur van de footer over. Bij hover kleurt het blok in (standaard Ink) en wordt de slash Signal-geel.
?raw) en zet hem inline in een span. Geen <img>: alleen inline SVG reageert op hover en neemt currentColor over.pf-sig op de <a> rond tekst en logo. Hover-kleur via --pf-hover, standaard #121212. De CSS zit al in de SVG.